@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{
	font-family:open_sans_regular, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
	font-size:16px;

	-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(51,51,102);
	background-color:rgb(34,65,145);
	margin:0;
	padding:0;

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


@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{

	/*
	HINWEIS: Grundzätzliches zu teiltransparenten Hintergrundgrafiken mit dynamischer Anpassung an Viewportbreite.

	Für das Desktop-Layout können die diversen Wellenkanten problemlos eingesetzt werden. Bei Geräten mit höherer Pixeldichte (device pixel ratio > 1) kommt es aber bei einigen Browsern
	zu Blitzern und Unsauberkeiten durch die Interploation der Hintergrundgrafiken. Grund ist, dass dann die Kanten der gerendeten Grafik nicht mehr exakt mit den
	Kanten der Block-Container übereinstimmen, in denen sie als background-image eingesetzt werden.

	Abhilfe:
		1)	Die Hintergrundgrafiken sollten immer höher sein, als der Container in dem sie eingestezt werden. Dadurch werden sie zumindest schon mal automatisch
			an der Unterkante des Containers abgeschnitten.

		2)	Grafiken und Hintergrundmuster, die mit der Containerbreite skalieren und Transparenz an der Oberkante enthalten, müssen mit background-position:center -1px; oben platziert werden.
			Dadurch wird die Grafik dann auch an der Oberkante des Containers abgeschnitten.
			Beispiel hierfür ist die Wellenkante, als Trenngrafik zwischen wbox1-Containern. Da die Welle auch noch mit Rundungen an die Oberkante stößt, muss die sichtbare Grafik
			auch noch min. 2px Tranparenz zusätzlich zur Oberkante freihalten. Dadurch sind beim geglätteten Rendern ausreichend Pixel zur sauberen Interpolation vorhanden.

		3)	Zuletzt kann es bei Hintergrundbildern, die background-position:x bottom haben auch noch zu Blitzern an der Unterkante des Containers kommen.
			Die Grafik kann in dem Fall ja nicht durch den Container abgeschnitten werden. Hier hilft es zur Not dem Contaier margin-bottom:-1px; zu setzen, so dass
			der nachfolgende Inhaltscontainer nach oben gezogen wird und ein Überlappungsbereich zwischen Hintergrundgrafik von container1 und Hintergrundfarbe von container2 kommt.
			Dies gleicht die Blitzkante aus.
			Biespiel hierfür ist die Abschlusswelle in .footer_top. .footer_bottom wird um -1px nach oben gezogen und überschneidet mit identischer Hintergrundfarbe die
			Farbe aus dem background-image von .footer_top.

		4)	Beispiel Cascade Logotafel mit Schlagschatten im Kopf. Hier kommen 2 Grafiken zum Einsatz, die als background eines transparenten Platzhalters gesetzt werden.
			Da die Grafik rundherum Transparenz und einen Schlagschatten enthält, treten je nach Skalierung auch hier Blitzer r/u auf.
			Um dies zu beheben, hat die sichtbare Logografik rechts und unten zusätzliche Transparente Pixel. Die sichtbare Grafik ist EXAKT 110% der Breite des Platzhalters
			in dem sie eingepasst wird. Über background-size:110%; wird das Hintergrundbild so skaliert, dass es optisch wieder exakt so groß ist, wie im ursprünglichen Design.
			Die zusätzlichen Transparenten Bereiche r/u ragen aber jetzt über die Grenzen des transparenten Platzhalterbildes hinaus.
			Dies zwingt den Renderer das Hintergrundbild r/u abzuschneiden, was am Ende zu den gewünschten sauberen Kanten führt.

	ANMERKUNG: der Firefox mobile unter Android zeigte im Test die meisten Unsauberkeiten. Vor allen Dingen wird die Grafik bei dem Wellentrennen in wbox1 je nach
	Geräteausrichtung etwas pixelig gerendert. Dies könnte an der Erzeugung des Block-Containers mittel :before Pseudoklasse liegen ? Alle anderen Browser zeigen
	nach den obigen Fixes die Hintergrundgrafiken sauber an. 
	*/




	/*allgemein*/
	.row{
		width:100%;
		/*BEACHTE: alle Inhaltsreihen werden auf eine Minimalbreite von 320px (iPhone hoch) festgenagelt. Dadurch bleibt das Mindestlayout
		auch für kleinere viewports erhalten und die Seite muss horizontal gescrollt werden. Dies ist aber nur die letzte Ausweichlösung, da das gesamte
		Layout wie immer für halbwegs moderne Smartphones ausgelegt ist.
		WICHTIG: die .content_row hat eine margin/padding, die direkt von der viewportbreite abhängig sind. Für diese Eigenschaften müssen
		am Ende explizite fixe Zielwerte gesetzt werden. s.u. viewport 320px.*/
/*min-width:320px;*/
		float:left;
		clear:both;
		position:relative;
	}
		.row_center{
			max-width:980px;
			margin:0 auto;
			position:relative;
		}
		/*Standard floatendes Element mit clear. floater_stack formatiert zudem die direkt untergeordneten DIV als übereinadergestapelte float container mit negativer margin.*/
		.floater, .floater_stack, .floater_stack > div{
			width:100%;
			float:left;
			clear:both;
			position:relative;
		}
			.floater_stack > div{
				clear:none;
				margin-right:-100%;
			}


	/*--- Logo, Navigation top ---*/
	/*WICHTIG: für alle Elemente in diesem Kopflayout muss das box-sizing:border-box umgeschaltet sein.
	Dies wird durch die zusätzliche Standardklasse box_border_all auf dem obersten Element erreicht (s. HTML).*/
	.top_row{
		z-index:300;
	}
		.top_row img{
			max-width:100%;
			width:auto;
			height:auto;
			border:none;
		}
		.top_center{
			width:inherit;
			max-width:980px;
			margin:0 auto;
			position:relative;
		}
		.tpad_1{
			padding-left:20px;
			padding-right:20px;
		}
		/*Stapelreihenfolge sehr wichtig, da die Dropdownmenüs sich gegenseitig überdecken.
		In der Desktopansicht liegt das Logo vorne, da es in dieser Breite keine Überschneidungen mit den Menüs gibt. Dadurch liegen die farbigen Hintergründe der beiden
		Menücontainer hinter dem Logo/Tafel. Später wird die Ebenenreihenfolge geändert. s.u.*/
		.top_topmenu_container{
			position:relative;
			z-index:20;
		}
			.top_topmenu_pos{
				/*links Raum freihalten, damit die Hintergrundfarbe des .topmenu_container hinter der Logotafel abgeschnitten wird und nicht links durch die abgerundeten Ecken scheint.*/
				width:100%;
				padding-left:100px;
				position:absolute;
				left:0;
				top:30px;
			}
				.topmenu_container{
					width:100%;
					float:left;
					clear:both;
					padding-left:110px;
					min-height:50px;
					background:url(images-cascade/topmenu-bg-blau.png) center center;
					border-top-right-radius:10px;
				}
		.top_hmenu_container{
			position:relative;
			z-index:10;
		}
			.top_hmenu_pos{
				width:100%;
				padding-left:100px;
				position:absolute;
				left:0;
				top:80px;
			}
				.hmenu_container{
					width:100%;
					float:left;
					clear:both;
					padding-left:110px;
					height:50px;
					background:url(images-cascade/hmenu-bg-blau.png) center center;
					border-bottom-right-radius:10px;
				}
		.top_logo_container{
			max-width:100%;
			position:relative;
			z-index:30;
		}
			.top_logo_pos{
				width:25%;
				max-width:210px;
				position:absolute;
				left:0;
				top:30px;
			}
				/*Für die Desktopansicht soll der Schlagschatten der Logotafel aus optischen Gründen nur am rechten Rand zu sehen sein.
				Später in der mobilen Ansicht wird das hmenu als freistehende Tasten angezeigt.
				Dann wird die Logografik mit einem vollen Schlagschatten auch nach unten verwendet. s.u. viewports.
				Um im HTML-Code nur ein IMG-Element zu verwenden, wird die sichtbare Logografik als Hintergrundbild des transparenten Platzhalters gesetzt.
				Durch background-size:contain skaliert das Hintergrundbild proportional mit seinem IMG-Container.*/
				.top_logo_placeholder{
					width:210px;
					overflow:hidden;
					position:relative;
					z-index:20;
				}
					img.top_logo{
						display:block;
						/*Desktopansicht: Tafel nur mit Schlagschattenausschnitt rechte Kante.*/
						background:url(images-cascade/cascade-logo-tafel-top.png) no-repeat left top;
						/*BEACHTE: um Blitzer beim Abwärtsskalierung zu underdrücken, hat die Logografik exakt 110% der Größe des Platzhalters.
						Da auch die background-size auf 110% gestez ist, passt das Hintergrundbild optisch wieder exakt in den Platzhalter.
						Dieser Trick zwingt aber den Renderer dazu, einen Teil der Hintrgrundgrafik r/u abzuschneiden. Dies unterdrückt die Blitzkanten.*/
						background-size:110%;
					}
		.fmenu0_box{
			position:relative;
			display:none;
			z-index:40;
		}
			.fmenu0_pos{
				width:100%;
				position:absolute;
				left:0;
				top:70px;
			}
				.fmenu0{
					position:absolute;
					right:20px;
				}
				#fmenu0_container{
					top:40px;
				}


	/*---  Kopfbild, immer als Slider mit 1-n Slides ---*/
	.top_img_row{
		z-index:100;
	}
		/*In diesem Projekt ist das Kopfbild max. 1280px breit und stößt in der Desktopansicht
		immer an den oberen Browserrand*/
		.top_img_row > .row_center{
			max-width:100%;
		}
		.top_img_pcontainer, .top_img_container{
			width:100%;
			max-width:100%;
			float:left;
			clear:both;
			position:relative;
		}
			.top_img_container .top_img_static img{
				max-width:100%;
			}
				/*Upscale: dieser Kontroll-DIV wird onresize per JS ausgemesswen um bei viewportbreiten > 1400 das Anwachsne der Sliderhöhe zu steuern. s. JS im Layout.
				WICHTIG: das Element ist hier zunächst display:none, wodurch die offsetWidth immer 0 ergibt. In der allgemeinen media Regel für alle Browser,
				die mediaqueries unterstützen, wird das Element display:block und kann korrekt ausgemessen werden.
				Diese Vorgehensweise stellt sicher, dass die Aufwärtsskalierung des Sliders nur für Browser erfolgt, die die notwendigen CSS Regeln unterstützen (z.B. background-size).
				Bei IE8- erfolgt keine Skalierung, so dass das Hintergrundbild bei großen viewports links und rechts einfach die Hintergrundfarbe der Seite freigibt.*/
				.slider0_measurement{
					display:none;
					position:relative;
					width:100%;
					float:left;
					margin-right:-100%;
					border-top:1px solid transparent;
					z-index:10;
				}
				/*Downscale: Container mit transparentem PNG als Platzhalter. Ab viewport < 980px skaliert das Bild proportional und steuer so die Gesamthöhe des Sliders und damit der enthaltenen Slides.*/
				.top_slider_placeholder{
					width:100%;
					float:left;
					overflow:hidden;
					z-index:20;
				}
					img.top_slider_placeholder_img{
						display:block;
						max-width:100%;
						width:auto;
						height:auto;
					}
				/*Slides mit formatfüllenden Hintergrundbildern ab IE9.
				Das Bild wird per style-attribute auf den .slide-Container gesetzt.
				Durch background-size:cover füllt das Bild das slide immer aus, auch wenn Teile des Bildes dadurch in Breite ober Höhe abgeschnitten werden.
				Der IE unterstützt dies erst ab v9. Da für IE8- aber per conditional CSS die Layoutbreite auf min. 1000px beschränkt ist, skaliert der Slider bei IE8- nicht bei kleineren Viewportbreiten.
				Dadurch treten auch keine Darstellungsfehler auf, weil das Hintergrundbild im IE8- nicht mit dem Gesamtlayout herunterskaliert.*/
				.top_img_container .slider_content{
					clear:none;
					position:absolute;
					height:100%;
					left:0;
					top:0;
					z-index:30;
				}
					.top_img_container .slide{
						height:100%;
						background-repeat:no-repeat;
						/*Wg. bug Opera wird position auf center/top gesetzt. Dies hat den selben Effekt wie center/center, da der DIV auf dem das Bild gesetzt ist in der Höhe proportional skaliert.*/
						background-position:center top;
						/*Hintergrundbild formatfüllend, alle ab IE9
						BEACHTE: dadurch skaliert das Hintergrundbild auch über sein Originalgröße hinaus! Sollte dies unerwünscht sein, so kann der Effekt auch per mediaquery so gesteuert werden,
						dass er nur bis zu einer bestimmten max. viewportbreite wirkt. s.a. viewport >= 1400px*/
						background-size:cover;
					}
				/*Welle, die den Sliderinhalt unten überlagert*/
				.top_slider_welle{
					width:100%;
					height:130px;
					position:absolute;
					left:0;
					bottom:-100px;
					background-image:url(images-cascade/welle-bg-blau.png);
					background-position:center top;
					background-repeat:repeat-x;
					/*Das Pattern hat eine Rapportbreite von 960px. Wird dieser DIV-Container kleiner als 960px so skaliert auch das Hintergrundbild mit, da durch background-size:contain das Bild immer
					so weit skaliert wird, dass es sowohl in Breite als auch Höhe OHNE Anschnitt angezeigt werden kann. Das macht den Unterschied zu "cover" aus, bei dem die Fläche immer ausgefüllt
					wird, auch wenn dazu das Bild angeschnitten werden muss.
					HINWEIS: in diesem Projekt reicht der Inhaltsbereich allerdings bis zum Browserrand, so dass die Welle bei viewpoerbreiten < 980px sowieso nicht mehr zu sehen ist
					und deshalb ausgeblendet wird (s.u. viewports)*/
					/*background-size:contain;*/
					z-index:40;
				}



	/*--- Inhalt ---*/
	/*Aufbau:
	Der Inhaltsbereich mit der Welle überschneidet den Slider im Hintergrund. Zudem überschneidet der Textinhalt die Welle darüber. Da das Bild der Welle im oberen Bereich
	transparent ist, kann auf .content_container nicht einfach eine bgcolor für den nachfolgenden Textinhalt gesetzt werden. Diese Farbe würde hinter der Welle sichtbar.
	Desweiteren muss der Textinhalt Teile des Wellenbildes überschneiden. Also kann auch .content_main keine bgcolor erhalten.
	Um diese Probleme zu lösen, gibt es einen absolut positionierten DIV .content_bg, der sich mit height:100% immer so weit ausdehnt, wie der Inhaltsbereich
	durch die Welle und Texte auseinandergedrückt wird (alle ab IE7). Dieser DIV stellt die bgcolor. Damit diese Farbe nicht im oberen Bereich hinter der Welle sichtbar wird,
	hat .content_row ein ausreichendes padding-top. Dies schiebt zunächst alle folgenden container nach unten. So auch den mit der bgcolor.
	In der Folge wird dann content_top um den selben Betrag wieder negativ nach oben gezogen, so dass am Ende die Welle wieder an der Oberkante der .content_row steht.*/
	.content_row{
		/*Der Inhaltsbereich mit Welle und Texten wird negativ nach oben über den Hintergrundslider gezogen. Im Desktoplayout sind dies -170px.
		Sobald die Skalierung bei vieports < 980px einsetzt, muss sich dieser Offset verringern, da sonst die content-Welle den Slider zusehends stärker überlagert.
		Hierzu wird beim Einsetzen des mediaquery < 980px die negative margin als Prozentwert gesetzt (-17.3469% +/- 1px Rundungsfehler je nach Browser). s.u. viewports.
		WICHTIG: das Setzen des Prozentwertes kannn erst ab <=980 erfolgen, da auch erst ab dann der Hintergrundslider herunter skaliert.*/
		margin-top:-170px;
		/*Raum für transparentes durchscheinen des Hintergrundsliders*/
		padding-top:100px;
		z-index:200;
	}
		.content_bg{
			position:absolute;
			width:100%;
			height:100%;
			left:0;
			top:0;
			/*Hintergrundfarbe für nachfolgende Textinhalt.*/
			background-color:white;
		}
		/*Welle, Teaser, Quicklinks oben*/
		.content_top{
			/*Inhalte wieder nach oben zeihen, so dass die Welle wieder an der Oberkante der .content_row steht. Nachfolgende Container floaten mit nach oben.
			BEACHTE: auch dieser Offset wird später dynamisch, um mit dem Rest des Layouts zu skalieren. s.u. viewports*/
			margin-top:-100px;
		}
			.content_top img{
				border:none;
				max-width:100%;
				width:auto;
				height:auto;
			}
				/*Das Platzhalter IMG in diesem Container steuert die Höhe durch proportionale Skalierung. Die weiteren Inhalte floaten übereinandergstapelt (s.o. .floater_stack)*/
				img.content_top_welle_placeholder{
					display:block;
					/*Das sichtbare Bild der Welle. Dieses MUSS exakt so groß sein wie der Platzhalter.
					Da das Layout für IE8- auf feste min. Breite festgenagelt ist, kann hier für die neueren Browser ab IE9+ background-size verwendet werden, so dass das
					Hintergrundbild mit abnehmender viewportbreite proportional herunterskaliert.
					HINWEIS: Opera und ggf. andere Browser, die sehr starke Rundungsdifferenzen erzeugen, füllen den Container u.U. nicht ganz aus und am Rand blitzt
					der Seitenhintergrund durch. Um dies zu beheben, wird das sichtbare Bild als Hintergrundbild direkt auf das transparente Platzhalter IMG gesetzt.
					Dadurch sollten beide Bilder gleich gerundet skaliert werden. Zudem MUSS background-size:100% statt contain|cover verwendet werden und die Position left/top.
					Dies führt bei allen ab IE9 und Opera zu einem einwandfreien Ergebnis ohne Blitzer.*/
					background:url(images-cascade/welle-content-blau.png) left top no-repeat;
					background-size:100%;
					background-position:0px -1px;
				}
				.content_top_teaser img{
					display:block;
					/*Die Grafik hat 50% der Layoutbreite und skaliert proportional mit Slider und Welle.*/
					max-width:50%;
				}


		/*Hauptinhalt*/
		.content_main{
			min-height:200px;
			/*Wird nach oben über die Welle gezogen. Auch hier muss der Offset beim Skalieren unterhalb von 980px dynamisch gesetzt werden,
			da ja der Container mit der Welle auch skaliert wird. vergl. .content_welle*/
			margin-top:-140px;
			/*Randabstand wird bei abnehmender viewportbreite reduziert. Für Startseite kein padding l/r.*/
			padding:0 30px 0 30px;
		}
			/* 1) Standardlayout: center_col über volle Breite, left_col ausgeblendet.*/
			.center_col{
				width:100%;
				float:left;
				position:relative;
				/*BEACHTE: die Trennerwelle im .footer_container ist um -40px nach oben gezogen und überlagert .content_main.
				Für die normalen Inhaltsseiten wird deshalb ein padding-bottom gesetzt, damit die letze Textzeile nicht hinter der Welle verschwindet.
				Für die Startseite ist dieses padding nicht erwünscht, da dort die Inhalt in eigenen farbigen boxen untereinander stehen, bei denen die
				Überschneidung der Hintergrundfarbe mit der Welle des footer gerade erwünscht ist.*/
				padding-bottom:40px;
				z-index:10;
			}
				.html_content{
					padding-top:26px;
				}
			.left_col{
				width:274px;
				float:left;
				margin-right:-100%;
				position:relative;
				padding-bottom:60px;
				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*/
				padding-left:274px;
			}
				body.smenu_lvl_1 .html_content{
					padding-left:44px;
				}
			/* 3) Startseite, html_content über volle Breite */
			body.page-start .content_main{
				padding-left:0;
				padding-right:0;
			}
				body.page-start .center_col{
					padding-bottom:0;
				}



	/*--- Footer ---*/
	/*Das Konstrukt ermöglicht es, dass sowohl im oberen Bereich oberhalb der Abschlusswelle, als auch im unteren Bereich die jeweiligen Inhalte
	die beiden Container beliebig weit auseinander drücken können.
	Hier stellt sich zudem das Problem, dass lt. Screendesign für das Desktoplayout die Inhalte in .footer_top die Grafik des Maskottchens Flossy teilweise überdecken.
	Dazu muss aber die Grafik absolut positinioniert und vomzIndex her hinter den Inhalten gestapelt werden. In der Folge muss aber bei kleineren
	viewportbreiten die Flossy-Grafik responsive skalieren und die Inhalte in .footer_bottom müssen dies Grafik umfließen können.
	Um diese Anforderungen realisieren ist die Grafik zweimal im HTML-Code als IMG eingebettet und verschiedene footer Element werden
	eingeblendet und umgestapelt.*/
	.footer_container{
		width:100%;
		float:left;
		clear:both;
		position:relative;
		margin-bottom:40px;
		z-index:210;
	}
		.footer_container:before{
			/*Für die sichtbare obere Wellenkante wird ein Blockelement erzeugt, welches die Hintergrundgrafik als Endlospattern enthält.
			WICHTIG: um Blitzer zu vermeiden, muss die Grafik höher als der Container sein und oben 2px Transparenz enthalten.
			Das Hintergrundbild wird dann negativ um -1px nach oben gezogen, so dass auch oben das Bild beim Rendern angeschnitten wird.*/
			content:'';
			display:block;
			width:100%;
			height:40px;
			line-height:1px;
			background:url(images-cascade/wbox1-welle-dblau.png);
			background-position:center -1px;
			background-repeat:repeat-x;
			/*Wird um den Betrag seiner eigenen height negativ nach oben gezogen. Dadurch stößt der Container zu dem die Welle die Oberkante bildet wieder
			direkt an seinen Vorgänger im Layout. So entstehen keine Blitzer wärend die Wellengrafik geladen wird.
			Typischerweise würde der Vorgänger Container an seiner Unterkante den Überlappungsbereich durch padding-bottom:40px freihalten.*/
			margin-top:-40px;
		}
		.footer_container img{
			max-width:100%;
			width:auto;
			height:auto;
			border:none;
		}
		/*Dieser Container stellt das Bild der Abschlusswelle als Hintergrundgrafik am unteren Rand.*/
		.footer_top{
			width:100%;
			/*Gesamthöhe min. so, dass Abschlusswelle und Flossy komplett zu sehen ist.*/
			min-height:292px;
			padding-bottom:40px;
			float:left;
			clear:both;
			position:relative;
			background-color:rgb(71,107,179);
			/*Das Bild skaliert ab IE9+ proportional mit der viewportbreite*/
			background-image:url(images-cascade/footer-welle-abschluss-blau.png);
			background-repeat:no-repeat;
			background-position:left bottom;
			background-size:100%;
			/*Bei Geräten mit höherer Pixeldichte kommt es z.B. im Firefox zu Blitzern an der Unterkante durch Interpolation. Deshalb wird der nachfolgende .footer_bottom
			um -1px nach oben gezogen, um einen Überlappungsbereich zwische Grafik und nachfolgender background-color zu erzeugen.*/
			margin-bottom:-1px;
			z-index:20;
		}
			.footer_top_content{
				color:white;
				padding:0 30px 0 30px;
				position:relative;
				z-index:20;
			}
				/*Links aufNewsletter, facebook in der rechten Spalte*/
				.footer_top_link{
					width:100%;
					float:left;
					clear:both;
					position:relative;
					margin-top:40px;
				}
					.footer_top_link:first-child{
						margin-top:0;
					}
					.footer_top_link, .footer_top_link:hover{
						text-decoration:none;
						color:inherit;
					}
					.footer_top_link .link_img{
						float:left;
						margin-right:20px;
					}
					.footer_top_link .link_body{
						float:left;
						padding-top:2px;
					}
						.footer_top_link .link_body:after{
							content:'\e69d';
							display:inline-block;
							font-family:'fontawesome_icons';
							font-size:1.4em;
							color:rgb(255,202,0);
							padding-left:0.5em;
							position:relative;
							top:2px;
						}
			.footer_top_flossy{
				/*Diese statische Grafik wird ab vp 980 ausgeblendet*/
				position:absolute;
				right:28px;
				bottom:-40px;
				width:28%;
				max-width:269px;
				z-index:10;
			}
		/*Dieser Container hat die gleiche Hintergrundfarbe wie die Abschlusswelle und stellt die gerundeten Ecken an der Unterkante.*/
		.footer_bottom{
			width:100%;
			float:left;
			clear:both;
			position:relative;
			color:white;
			background-color:rgb(108,141,197);
			border-bottom-left-radius:20px;
			border-bottom-right-radius:20px;
			z-index:10;
		}
			.footer_bottom_row_1{
				width:100%;
				float:left;
				clear:both;
				position:relative;
			}
				.footer_bottom_flossy{
					/*Diese Grafik wird ab vp 980 eingeblendet. Sie überschneidet den Inhalt in footer_top nicht mehr und und skaliert responsive.
					Sie ist negativ nur so weit nach oben gezogen, wie das padding-bottom des .footer_top. Dadurch überschneiden die obigen Inhalte
					die Grafik nicht mehr automatisch.*/
					float:right;
					width:31%;
					margin-top:-40px;
					padding-right:28px;
					display:none;
				}
					.footer_bottom_flossy img{
						display:block;
					}
				.footer_address{
					width:69%;
					padding-left:30px;
				}
					.footer_address a{
						color:white;
					}
					.footer_address p, .footer_address div{
						margin:0;
						padding:0;
					}
					/*Die Einzelinformationen sollen soweit möglich zuerst nur als Einheit umbrechen, nicht innerhalb von Wörtern oder Zahlen.
					Die Teilblöcke erhalten ein Trennzeichen und einen abschließenden Buchstabenabstand.*/
					.footer_address span{
						display:inline-block;
					}
						.footer_address > * > span:before{
							content:'• ';
						}
						.footer_address > * > span:after{
							content:' ';
						}
						/*Keine Trenner vor jeweils erstem Eintrag pro Absatz*/
						.footer_address > * > span:first-child:before, .footer_address > * > span:first-child:before{
							display:none;
						}
			.footer_bottom_row_2{
				width:100%;
				float:left;
				clear:both;
				position:relative;
				padding:14px 30px 5px 30px;
			}
				.footer_nav_container{
					width:100%;
					float:left;
					clear:both;
					position:relative;
					padding:10px 0 10px 0;
					border-top:1px solid rgb(167,187,220);
				}

}


@media print{
	html, body{
		background-color:white;
		background-image:none;
	}
	.head_container{
		display:none;
	}
	.top_container{
		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{
			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;
	}

	.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{
		display:none;
	}
}

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

	p{
		line-height:1.6em;
		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(34,65,145);
		font-family:open_sans_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{
		font-size:1.5em;
		margin-bottom:1.3em;
		font-weight:normal;
			/*H1 Bullet nicht wie im Entwurf vorgesehen. Einrückung ergibt beim Schrumpfen der Layoutbreite unschöne Zeilenumbrüche und alleinstehende Wörter.*/
			/*text-indent:80px;
			padding-top:0.2em;
			padding-bottom:0.2em;
			background:url(images-cascade/h1-bullet-blau.png) no-repeat 0px 1px;*/
	}
	h2{
		font-size:1.3em;
		margin-bottom:0.75em;
	}
	h3{
		font-size:1.2em;
	}
	h4{
		font-size:1.1em;
	}
	h5, h6{
	}


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

	a{
		color:rgb(153,153,204);
		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 15px 0;
		clear:both;
		float:none;
	}
	/*hr als box mit Hintergrundgrafik*/
	___hr{
		border:none;
		width:100%;
		height:15px;
		margin-bottom:1em;
		background:url(images/sline-635.png) no-repeat center bottom;
		/*Ab IE9 skaliert immer auf die volle Inhaltsbreite*/
		background-size:100% 15px;
	}

	/*hr gestrichelt*/
	hr.dashed{
		border-top:1px dashed rgb(204,204,204);
	}

	/*fette Darstellung bei strong und b deaktivieren, da sonst der verwendete fette Schriftschnitt nochmals mit einer Outline gezeichnet wird.*/
	strong, b{
		font-family:open_sans_semibold;
		font-weight:normal;
	}

}
@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;
	}
}



/*Projektspezifischer grid Abstand*/
div[class*=c4g_grid_]{margin-left:-40px;}
	div[class*=c4g_grid_] > div{border-left-width:40px;}



/*--- 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;
	border-radius:10px;
}

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

	border:1px solid #224191;
	border:none;
	border-radius:10px;
}



div.c4g_grid_2 div img, div.c4g_grid_3 div img, div.c4g_grid_4 div img{
	border-radius:10px;
}

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


/*--- Listen-Formate ---*/
@media screen{
	.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(210,211,211);
		}
			/*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;
	}
}


/*====== Inhaltsboxen, Text/Bild ===========*/
/*-- Startseite 4 Themenbereiche headline/foto ------*/
.start_themen{
	padding:0 30px 40px 30px;
	margin-top:-27px;
}
	/*besonderer grid Abstand*/
	.start_themen div[class*=c4g_grid_]{margin-left:-27px;}
		.start_themen div[class*=c4g_grid_] > div{border-left-width:27px;}

	.tbox1{
		font-family:open_sans_semibold, Arial, Helvetica, sans-serif;
		font-size:20px;
		line-height:1em;
		color:white;
		position:relative;
	}
	.tbox1 a, .tbox1 a:hover{
		text-decoration:none;
		color:inherit;
	}
		/*Headlines mit Linkpfeil rechts*/
		.tbox1 .box_head{
			position:relative;
			padding:12px 10px 14px 14px;
			border-top-left-radius:10px;
			border-top-right-radius:10px;
			/*Standardfarbe dunkelblau*/
			background-color:rgb(34,65,145);
			z-index:20;
		}
			.tbox1 .box_head:after{
				/*icon-circle-arrow-right*/
				content:'\e69d';
				font-family:fontawesome_icons;
				font-size:1.15em;
				display:inline-block;
				position:absolute;
				right:10px;
				margin-top:1px;
			}
		/*Bilder
		Die Bilder in den boxen skalieren IMMER 100% mit der box-Breite. Dies ist erforderlich, da das grid für die boxen bei kleineren viewports einmal in 2/2 umbricht.
		Dabei sollen die Bilder vergrößert werden und so trotzdem die Box voll ausfüllen. Da height:auto ist, werden sie nicht verzerrt.
		WICHTIG: die Bilder müssen im Original alle gleich hoch sein, da sonst die Spaltenhöhen nicht identisch für alle skaliert werden !
		Da nur wenige Browser bei Containern mit gerundeten Ecken den kompletten Inhalt beschneiden, werden die runden Ecken direkt auf die IMG-Elemente gesetzt.
		Der Container wird um 1px nach oben hinter die Headline gezogen, um beim Skalieren Blitzer zwischen beiden Containern zu unterbinden.*/
		.tbox1 .box_img{
			margin-top:-1px;
			z-index:10;
		}
			.tbox1 .box_img img{
				display:block;
				width:100%;
				height:auto;
				border:none;
				border-top-left-radius:0px;
				border-top-right-radius:0px;
				border-bottom-left-radius:10px;
				border-bottom-right-radius:10px;
			}
		/*Farben*/
		.tbox1.mblau .box_head{background-color:rgb(57,115,191);}
		.tbox1.rot .box_head{background-color:rgb(204,0,0);}
		.tbox1.orange .box_head{background-color:rgb(255,140,0);}


/*--- .wbox1 - farbige Boxen mit Wellenkante oben, Startseite ---
Aufbau: vergleichbar mit dem .footer_container
Die Inhalte werden in einen DIV.wbox1 verschachtelt. Die Hintergrund- und Wellenfarbe wird über die Zusatzklasse mblau, gelb, dorange etc. gesetzt.
Das Wellenmuster an der Oberkante wird durch :before mit Hintergrundgrafik erzeugt. Dieser :before Inhalt wird um -40px negativ aus seinem Container nach oben gezogen,
so dass er den vorherigen Container an dessen Unterkante überlagert. Damit die vorherigen Inhalte dadruch nicht verdeckt werden, hat der vorherige Container
ein padding-bottom von der gelichen Höhe, also 40px.
Genaugenommen stoßen also die beiden DIV-Container direkt aufeinander. Optisch überlagert aber das nach oben gezogene Wellenmuster den vorherigen Container UND dessen
Hintergrundfarbe. Der Effekt ist, dass beliebige .wbox1-Container mit unterschiedlichen Farben und beliebiger Höhe aufeinanderfolgen können und sich die
Wellemmuster jeweils wie Fischschuppen überlagern. Der Letzt Container/Inhalt von .html_content wird dann wiederum von der Wellenkante des .footer_container überlagert.
Für eine Farbvariante muss die background-color der .wbox1 immer exakt mit der Farbe der Wellengrafik übereinstimmen.

BEACHTE: die DIV.wbox1 werden nicht floatend geschaltet, sondern verhalten sich wie Standard-DIV. Deshalb funktioniert das Layout auch erst ab IE8 optisch korrekt !
Außerdem ist bedenken, dass bei Einsatz eines so formatierten DIV innerhalb eines normalen Textes aus dem HTML-Editor, der vorherige normale
Textabsatz auch einen erhöhten Abstand unten braucht, da er sonst natürlich ggf. durch die nachfolgende Wellenkante des .wbox1 Blocks teilweise überdeckt wird.
*/
/*Layout*/
.wbox1, .wbox1 *{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.wbox1:before, .wbox1:after{
	content:'';
	display:block;
	width:100%;
	clear:both;
}
.wbox1{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	/*Abstand seitlich zunächst wie Standardabstand .content_main. Wird ggf. später in den viewports verringert. s.u.*/
	/*Abstand vom Textinhalt zur Unterkante=negativer Offset Wellenkante, um die Überlagerung durch die Welle des nachfolgenden .wbox1 Containers auszugleichen.*/
	padding:0 30px 40px 30px;
	color:white;
	/*Standardfarbe: mblau*/
	background-color:rgb(108,141,197);
}
	.wbox1:before{
		/*Für die sichtbare obere Wellenkante wird ein Blockelement erzeugt, welches die Hintergrundgrafik als Endlospattern enthält.
		WICHTIG: um Blitzer zu vermeiden, muss die Grafik höher als der Container sein und oben 2px Transparenz enthalten.
		Das Hintergrundbild wird dann negativ um -1px nach oben gezogen, so dass auch oben das Bild beim Rendern angeschnitten wird.*/
		content:'';
		display:block;
		width:100%;
		height:40px;
		line-height:1px;
		/*Da .wbox1 im Gegensatz zu .footer_container nicht floatet, muss für die Welle position:absolute gesetzt sein.
		Andernfalls wird das Element nicht nach oben aus dem Container gezogen.*/
		position:absolute;
		left:0;
		top:0;
		/*Das Blockelement wird um den Betrag seiner eigenen height negativ nach oben gezogen.*/
		margin-top:-40px;
		/*Standardfarbe: mblau*/
		background:url(images-cascade/wbox1-welle-mblau.png);
		background-position:center -1px;
		background-repeat:repeat-x;
	}
	.wbox1 h1, .wbox1 h2, .wbox1 h3, .wbox1 h4, .wbox1 h5, .wbox1 h6{
		color:white;
	}

/*Inhalte, Spalten
Bild und Text laufen zunächst horizontal und werden später vertikal umgebrochen.
Ist ein Bild vorhanden, so wird für die body/link entsprechend ein padding-left gesetzt. Andernfalls wird kein Raum links freigehalten.
*/
.fbox2{
	width:100%;
	float:left;
	clear:both;
	margin-bottom:30px;
}
	.fbox2 a, .fbox2 a:hover{
		text-decoration:none;
		color:inherit;
	}
	.fbox2 p{
		margin-bottom:0;
	}
		.fbox2 p+p{
			margin-top:0.8em;
		}
	.fbox2 .box_img{
		width:32%;
		float:left;
		margin-right:-100%;
	}
		.fbox2 .box_img img{
			display:block;
			/*mittig im container*/
			margin:0 auto;
			max-width:100%;
			width:auto;
			height:auto;
			border:none;
		}
	.fbox2 .box_link{
		padding-top:0.9em;
	}

	/*Layout: standard: kein Bild, kein padding*/
	.fbox2 .box_body, .fbox2 .box_link{
		width:100%;
		float:left;
	}
		/*Mit Bild*/
		.fbox2 .box_img+.box_body, .fbox2 .box_img+.box_body+.box_link{
			padding-left:36%;
		}
		.fbox2 .box_img+.box_body{
			padding-top:20px;
		}
	.fbox2 .box_link span{
		display:inline-block;
	}
	.fbox2 .box_link span:after{
		content:'\e69d';
		display:inline-block;
		font-family:'fontawesome_icons';
		font-size:1.4em;
		color:rgb(255,202,0);
		padding-left:0.5em;
		position:relative;
		top:2px;
	}

/*Farben*/
.wbox1.hblau{background-color:rgb(145,175,215);}
	.wbox1.hblau:before{background-image:url(images-cascade/wbox1-welle-hblau.png)}
.wbox1.dblau{background-color:rgb(71,107,179);}
	.wbox1.dblau:before{background-image:url(images-cascade/wbox1-welle-dblau.png)}
.wbox1.gelb{background-color:rgb(255,202,0);color:inherit;}
	.wbox1.gelb:before{background-image:url(images-cascade/wbox1-welle-gelb.png)}
	.wbox1 h1, .wbox1 h2, .wbox1 h3, .wbox1 h4, .wbox1 h5, .wbox1 h6{color:inherit;}
	.wbox1.gelb .fbox2 .box_link span:after{
		color:white;
	}
.wbox1.orange{background-color:rgb(255,173,51);}
	.wbox1.orange:before{background-image:url(images-cascade/wbox1-welle-orange.png)}
.wbox1.dorange{background-color:rgb(230,119,0);}
	.wbox1.dorange:before{background-image:url(images-cascade/wbox1-welle-dorange.png)}
.wbox1.rot{background-color:rgb(242,48,48);}
	.wbox1.rot:before{background-image:url(images-cascade/wbox1-welle-rot.png)}
.wbox1.drot{background-color:rgb(217,0,0);}
	.wbox1.drot:before{background-image:url(images-cascade/wbox1-welle-drot.png)}





/*========= Reihe Start Aktuelles =============*/
/*--- Spalten ---*/
.start_news .col_head{
	min-height:34px;
	position:relative;
}
	.start_news .col_head a, .start_news .col_head a:hover{
		text-decoration:none;
		color:inherit;
	}
	.start_news .col_head h1,
	.start_news .col_head h2,
	.start_news .col_head h3,
	.start_news .col_head h4,
	.start_news .col_head h5,
	.start_news .col_head h6{
		font-size:20px;
		line-height:1em;
		padding:0;
		margin:0;
	}
	.col_veranstaltungen .col_head{
		padding-left:0.5em;
	}
	.col_veranstaltungen .col_head a:after{
		/*icon-circle-arrow-right*/
		content:'\e69d';
		font-family:fontawesome_icons;
		font-size:23px;
		line-height:1em;
		display:inline-block;
		padding-left:0.5em;
		position:relative;
		top:1px;
	}

/*--- Kalenderbox ---*/
.kalender{
	width:100%;
	/*border-spacing entspricht dem alten HTML-Attribute cellspacing. Es wirkt sich aber nur aus, wenn border-collapse nicht gesetzt ist.
	Damit die hor. Trennlinien bei wtnames nicht optisch unterbrochen werden, wird hier für die Tabelle kein border-spacing eingesetzt, um
	die Zellen voneinander abzusetzen. Stattdessen werden an bestimmten Kanten borders gesetzt. s.u. Trennlinien zwischen Zellen.*/
	/*border-spacing:1px;*/

	border-collapse:collapse;
	empty-cells:show;
	font-family:roboto_condensed_light, Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height:1em;
	position:relative;
}
	.kalender a, .kalender a:hover{
		text-decoration:none;
		color:inherit;
	}

	/*Leider positioniert der Android webkit die Inhalte der TD-Elememt nicht richtig, wenn diese position:absoluet sind. Um ein brauchbares
	Blockelement als Anker zu haben, sind alle TD-Inhalte in SPAN oder DIV eingesclossen, die dann position-relative sind.*/
	.kalender td{
		font-weight:normal;
		text-align:center;
		padding:0;
		margin:0;
	}
	.kalender .wtnames td span, .kalender tbody td span{
		display:block;
		padding:1em 0 1em 0;
		position:relative;
	}
	/*Die Schriftgröße der Header-Inhalte wird zwar auf Basis der Gesamtschriftgröße des Kalenders gesetzt. Innerhalb des Headers berechnen sich die EM Angaben aber dann aus eben diese
	neue Zwischengröße und nicht mehr aus der Kalener Basisschriftgröße. Dadruch kann der Kaldenerkopf einfache pauschal verkleinert werden.*/
	.kalender .header{
		font-family:roboto_condensed_regular, Arial, Helvetica, sans-serif;
		font-size:1.25em;
		line-height:1em;
	}
		.kalender .header td{
			padding-top:0.5em;
			padding-bottom:1em;
		}
		.kalender .header span{
			display:inline-block;
		}
			/*Buttons vor zurück*/
			.kalender .header .btn{
				position:absolute;
				cursor:pointer;
			}
				.kalender .header .btn:before{
					/*icon-chevron-sign-left*/
					content:'\e716';
					font-family:fontawesome_icons;
					font-size:1.5em;
					color:rgb(207,216,230);
				}
					.kalender .header .btn.next:before{
						/*icon-chevron-sign-right*/
						content:'\e717';
					}
				.kalender .header .btn.prev{
					left:0.5em;
				}
				.kalender .header .btn.next{
					right:0.5em;
				}
		.kalender .wtnames{
			font-family:roboto_condensed_bold, Arial, Helvetica, sans-serif;
		}
			.kalender .wtnames td span{
				padding-top:1.35em;
				padding-bottom:1.35em;
			}

	/*Trennlinien zwischen Zellen. Leider zeichnen die Browser die borders an den vier Kanten der Zellen mit unschiedlicher Priorität.
	Deshalb wird zur durchgängigen Abtrennung über und unter der Reihe wtnames eine leere TR mit einer TD colspan=7 über die volle Breite eingesetzt.*/
	.kalender .wtnames td{
		border-right:1px solid rgb(108,141,197);
	}
	.kalender .trenner td{
		height:0px;
		border-top:1px solid rgb(145,175,215);
		border-right:1px solid rgb(108,141,197);
	}
	.kalender tbody td{
		border-right:1px solid rgb(108,141,197);
		border-bottom:1px solid rgb(108,141,197);
	}

	/*Farben: die Reihenfolge der definition hier bestimmt, mit welchem Gewicht eine der Klassen auf einer TD am Ende seine Formatierungen durchsetzt.*/
	/*Sa, So*/
	.kalender .wtsa, .kalender .wtso{
		background-color:rgb(137,164,209);
	}
	/*min. 1 Verranstaltung auf diesem Kalendertag*/
	.kalender .act{
		background-color:rgb(71,107,179);
		cursor:pointer;
	}
	/*Kalendertag ist heute*/
	.kalender .on{
		background-color:rgb(255,180,0);
		text-shadow:1px 1px 4px rgba(0,0,0,0.4);
	}
	/*belegte Felder auch mit kleiner farbiger Ecke kennzeichnen*/
	.kalender .act span:before{
		content:'';
		display:inline-block;
		width:0px;
		height:0px;
		border:4px solid white;
		border-right-color:transparent;
		border-bottom-color:transparent;
		position:absolute;
		left:0px;
		top:0px;
	}



/*======== Slider ==========*/
/*Startseite News-Lsider und Kurse-Slider haben zwar unteschiedliche HTML-IDs sind aber ansonsten sind identisch formatiert.
Also verwenden beide .slider1... Formate */
.slider1_header{
	position:relative;
}
.slider1_header > *{
	/*Macht die childNodes und damit die Headline und cbtn_container floatend*/
	float:left;
}
.slider1_cbtn_container{
	float:right;
	position:relative;
	padding-top:0px;
}
.slider1_cbtn{
	float:left;
	cursor:pointer;
	font-family:'fontawesome_icons';
	font-size:25px;
	line-height:24px;
}
	.slider1_cbtn:before{
		/*icon-chevron-sign-left*/
		content:'\e716';
		color:white;
	}
	.slider1_cbtn_right{
		margin-left:12px;
	}
	.slider1_cbtn_right:before{
		/*icon-chevron-sign-right*/
		content:'\e717';
	}


/*--- fbox1 Text/Bild -----*/
.fbox1{
	width:100%;
	float:left;
	clear:both;
	position:relative;
}
	.fbox1 img{
		max-width:100%;
		width:auto;
		height:auto;
		display:block;
		border:none;
	}
	.fbox1 a, .fbox1 a:hover{
		text-decoration:none;
		color:inherit;
	}
	.fbox1 p{
		font-size:14px;
		line-height:1.4em;
		margin-bottom:0;
	}
		.fbox1 p+p{
			margin-top:0.8em;
		}

.fbox1 .box_img{
	width:100%;
	float:left;
	clear:both;
}
	.fbox1 .box_img img{
		margin-bottom:14px;
	}

.fbox1 .box_body{
	width:100%;
	float:left;
	clear:both;
	position:relative;
}
	.fbox1 .box_body h1
	,.fbox1 .box_body h2
	,.fbox1 .box_body h3
	,.fbox1 .box_body h4
	,.fbox1 .box_body h5
	,.fbox1 .box_body h6{
		font-size:18px;
		color:inherit;
	}
.fbox1 .box_link{
	width:100%;
	float:left;
	clear:both;
	text-align:left;
	padding-top:0.9em;
	font-size:14px;
	position:relative;
}
	.fbox1 .box_link span{
		font-family:open_sans_semibold, Arial, Helvetica, sans-serif;
		display:inline-block;
	}
	.fbox1 .box_link span:after{
		/*icon-chevron-sign-right*/
			/*content:'\e717';*/
		/*icon-chevron-right*/
			/*content:'\e64d';*/
		/*icon-angle-right*/
			/*content:'\e6e7';*/
		/*icon-circle-arrow-right*/
		content:'\e69d';
		display:inline-block;
		font-family:'fontawesome_icons';
		font-size:1.4em;
		color:rgb(255,202,0);
		padding-left:0.5em;
		position:relative;
		top:2px;
	}





/*======== NAVIGATION ========*/
/*--- Topmenu ---*/
.topmenu{
	float:right;
	font-family:roboto_condensed_regular;
	font-size:18px;
	line-height:1em;
	padding-right:10px;
}
.topmenu a{
	display:inline-block;
	color:rgb(34,65,145);
	text-decoration:none;
}
	/*--- Level 0 ---*/
	.topmenu a.lvl0 > span{
		display:inline-block;
		padding:0.84em 10px 8px 5px;
		/*ab IE10+
		Der Schlagschatten hat keinen Offset und wird hier als weißer Schein nach außen zur Verbesserung der Lesbarkeit eingesetzt.*/
		text-shadow:0px 0px 10px rgba(255,255,255,1.0);
	}
	/*--- Icons ---*/
	.topmenu a.lvl0:before{
		/*icon-chevron-sign-right*/
		content:'\e717';
		font-family:fontawesome_icons;
		display:inline-block;
		padding-left:8px;
		font-size:1.1111em;
		color:rgb(89,128,179);
		/*ab IE10+*/
		text-shadow:0px 0px 10px rgba(255,255,255,1.0);
	}
		/*die Icons werden über die Menüklasse aus dem CMS gesteuert. Diese liegt jeweils auf dem LI-Element*/
		/*Ausnahme: Home Menüpunkt nur Icon ohne Beschriftung*/
		.topmenu .tm-icon-home a.lvl0:before{
			/*icon-home*/
			content:'\e612';
		}
			.topmenu .tm-icon-home a.lvl0 > span{
				display:none;
			}
			.topmenu .tm-icon-home a.lvl0:before{
				padding:0.82em 13px 7px 8px;
			}

		.topmenu .tm-icon-news a.lvl0:before{
			/*icon-bell-alt*/
			content:'\e6d6';
		}
		.topmenu .tm-icon-aktionen a.lvl0:before{
			/*icon-certificate*/
			content:'\e697';
		}
		.topmenu .tm-icon-kurse a.lvl0:before{
			/*icon-calendar*/
			content:'\e66a';
		}
		.topmenu .tm-icon-service a.lvl0:before{
			/*icon-info-sign*/
			content:'\e653';
		}
		.topmenu .tm-icon-zeiten a.lvl0:before{
			/*icon-time*/
			content:'\e614';
		}
		.topmenu .tm-icon-preise a.lvl0:before{
			/*icon-euro*/
			content:'\e730';
		}
		.topmenu .tm-icon-suche a.lvl0:before{
			/*icon-lupe*/
			content:'\e600';
		}
	/*act, on*/
	.topmenu a.act, .topmenu a.on{
		font-family:roboto_condensed_bold;
	}
	.topmenu a.act:before, .topmenu a.on:before{
		color:rgb(34,65,145);
	}
.topmenu .sub{
	font-family:roboto_condensed_light;
	font-size:18px;
	line-height:1em;
}
.topmenu .sub a{
	display:block;
	color:rgb(51,51,51);
	border-top:1px solid rgb(230,230,230);
}
	/*Sonderfall: da der aktive Menüpunkt eine Hintergrundfarbe erhält, müss das erste und letzte A-Element oben bzw. unten gerundete Ecke mit dem selben Radius
	erhalten wie der sub2-Container.*/
	.topmenu .sub a.first{
		border:none;
		border-top-left-radius:5px;
		border-top-right-radius:5px;
	}
		.topmenu .sub a.last{
			border-bottom-left-radius:5px;
			border-bottom-right-radius:5px;
		}
	.topmenu .sub a > span{
		display:inline-block;
		padding:9px 10px 10px 10px;
	}
	.topmenu .sub a > span:before{
		/*icon-caret-right*/
		content:'\e6bf';
		font-family:fontawesome_icons;
		display:inline-block;
		padding-right:7px;
		color:rgb(180,180,180);
	}
	.topmenu .sub a:hover{
		background-color:rgb(229,237,255);
	}
	/*act, on*/
	.topmenu .sub a.act, .topmenu .sub a.on, .topmenu .sub a.act > span:before, .topmenu .sub a.on > span:before{
		color:rgb(34,65,145);
	}
	.topmenu .sub a.act, .topmenu .sub a.on{
		font-family:roboto_condensed_regular;
		background-color:rgb(229,237,255);
	}


/*--- Hauptmenu top ---*/
.hmenu{
	float:right;
	font-family:roboto_condensed_light;
	font-size:21px;
	line-height:21px;
	padding-right:10px;
}
/*lvl0 Menüpunkte rechtbündig*/
.hmenu > ul{
	text-align:right;
}
.hmenu > ul > li{
	float:none;
	display:inline-block;
	text-align:left;
	/*Die LI-Elemente laufen rechtsbündig wie Wörter eines Textes. Dies erzeugt unerwünschten
	Leerraum zwischen den Buttons - eben wie zwischen Wörtern in einer Textzeile.
	Um diesen Leeraum in allen Browsern annähernd zu eliminieren, wird eine negative
	margin links gesetzt. Der Trick mit dem word-spacing:0 funktioniert bei safari/chrom/webkit
	nicht oder führt zu konfusen Ergebnissen.
	Der Wert hier (-0.25em) führt in allen getesteten Browsern zu annähernd gleich guten Ergebnissen
	- Windows: alle ab IE8
	- Android: webkit, Opera, firefox
	- iOS: safari*/
	margin-left:-0.25em;
}
.hmenu .br1, .br2, .br3, .br4, .br5, .br6, .br7, .br8{
	/*Damit ein Umbruch der inline-block laufenden lvl0-Menüpunkt erzwungen werden kann, wurde mittels JS vor jedem 4. LI-Element ein DIV eingefügt.
	Dieser bleibt solange unsichtbar, bis bei entsprechender viewportbreite der manuelle Umbruch wirken soll.
	Für mehr Flexibilität werden gleich mehrere DIVs vergleichbar mit der Simulation der nth-child Regel eingefügt.
	Diese müssen hier zunächst alle unsichtbar gemacht werden und können dann sogar den Umbruch bei unterschiedlichen viewportbreiten steuern.*/
	display:none;
}
.hmenu a.lvl0{
	display:inline-block;
	color:white;
	text-decoration:none;
}
	/*--- Level 0 ---*/
	.hmenu a.lvl0 > span{
		display:inline-block;
		padding:12px 10px 17px 5px;
	}
	/*--- Icons ---*/
	.hmenu a.lvl0:before{
		content:'';
		display:inline-block;
		font-size:21px;
		line-height:21px;
		width:34px;
		height:17px;
		background:url(images-cascade/hm-icon-cascade.png) no-repeat;
	}
		.hmenu .hm-icon-erlebnisbad a.lvl0:before{background-image:url(images-cascade/hm-icon-erlebnisbad.png);}
		.hmenu .hm-icon-freibad a.lvl0:before{background-image:url(images-cascade/hm-icon-freibad.png);}
		.hmenu .hm-icon-sauna a.lvl0:before{background-image:url(images-cascade/hm-icon-sauna.png);}
		.hmenu .hm-icon-wellness a.lvl0:before{background-image:url(images-cascade/hm-icon-wellness.png);}
	/*act, on*/
	.hmenu a.lvl0.act, .hmenu a.lvl0.on{
		font-family:roboto_condensed_regular;
	}
		.hmenu a.lvl0.act:before, .hmenu a.lvl0.on:before{
			background-image:url(images-cascade/hm-icon-on.png);
		}

.hmenu .sub{
	font-family:roboto_condensed_light;
	font-size:18px;
	line-height:1em;
}
.hmenu .sub a{
	display:block;
	text-decoration:none;
	font-family:roboto_condensed_light;
	color:rgb(51,51,51);
	border-top:1px solid rgb(230,230,230);
}
	/*Sonderfall: da der aktive Menüpunkt eine Hintergrundfarbe erhält, müss das erste und letzte A-Element oben bzw. unten gerundete Ecke mit dem selben Radius
	erhalten wie der sub2-Container.*/
	.hmenu .sub a.first{
		border:none;
		border-top-left-radius:5px;
		border-top-right-radius:5px;
	}
		.hmenu .sub a.last{
			border-bottom-left-radius:5px;
			border-bottom-right-radius:5px;
		}
	.hmenu .sub a > span{
		display:inline-block;
		padding:9px 10px 10px 10px;
	}
	.hmenu .sub a > span:before{
		/*icon-caret-right*/
		content:'\e6bf';
		font-family:fontawesome_icons;
		display:inline-block;
		padding-right:7px;
		color:rgb(180,180,180);
	}
	.hmenu .sub a:hover{
		background-color:rgb(229,237,255);
	}
	/*act, on*/
	.hmenu .sub a.act, .hmenu .sub a.on, .hmenu .sub a.act > span:before, .hmenu .sub a.on > span:before{
		color:rgb(34,65,145);
	}
	.hmenu .sub a.act, .hmenu .sub a.on{
		background-color:rgb(229,237,255);
		font-family:roboto_condensed_regular;
	}


/*--- fmenu0 ---*/
.fmenu0{
	text-align:right;
	font-family:'roboto_condensed_regular';
	font-size:20px;
	line-height:18px;
}
.fmenu0 a{
	display:inline-block;
	min-height:40px;
	position:relative;
	text-decoration:none;
	color:white;
	background-color:rgb(9,80,160);
	margin-left:12px;
	border:1px solid rgb(153,153,153);
	border-bottom:none;
	border-radius:7px;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}
.fmenu0 a:first-child{
	margin-left:0;
}
	.fmenu0 a > span{
		display:inline-block;
		padding:10px 12px 9px 12px;
	}
	.fmenu0 a > span:before{
		font-family:'fontawesome_icons';
		display:inline-block;
		padding-right:0.3em;
		position:relative;
	}
	/*Button Fmenu öffnen*/
	.fmenu0 a.btn_fmenu_opener{
		background-color:white;
		color:rgb(34,65,145);
		border:none;
		border-radius:8px;
	}
		.fmenu0 a.btn_fmenu_opener > span:before{
			/*icon-list*/
			content:'\e635';
		}
			/*wenn FMenu offen*/
			.fmenu0 a.btn_fmenu_opener.open{
				color:white;
				background-color:rgb(34,65,145);
				border-bottom-left-radius:0;
				border-bottom-right-radius:0;
			}
				.fmenu0 a.btn_fmenu_opener.open > span:before{
					/*icon-remove*/
					content:'\e60b';
					margin:0 2px 0 3px;
				}
.cms4d_fmenu_head, .cms4d_fmenu_body, .cms4d_fmenu_footer{
	background-color:rgb(34,65,145);
}
	.cms4d_fmenu .fbtn{
		background-color:rgb(242,246,255);
	}
		.cms4d_fmenu .flbl a:before{
			color:rgb(102,136,204);
		}
		.cms4d_fmenu .fcbtn > span{
			background-color:rgb(102,136,204);
		}
		/*act, on*/
		.cms4d_fmenu .fcol.on .flbl a:before{
			color:rgb(34,65,145);
		}
	.cms4d_fmenu_footer .btn{
		background-color:rgb(102,136,204);
	}


/*--- Submenu Treeview ---*/
/*Prinzipiell sind die Bullets/Icons negativ aus dem Text-SPAN herausgerückt, damit bei mehrzeilig umbrechenden Beschriftungen der Text nicht links unter dem Bullet weiter läüft.
D.h. das Padding wird so geählt, dass die linken Textkanten mit der gewünschten Einrückung versehen werden. Dann wird das Bullet jewils so weit links herausgezogen, dass
auch die erste Textzeile linksbündig mit den ggf. umbrechenden Folgezeilen steht. Wie der Offset in den einzelnen Level ist, liegt an der Gestaltung
und ändert sich bei jedem Projekt.
*/
.tree{
	width:100%;
	float:left;
	clear:both;
	font-size:19px;
	line-height:1.25em;
	padding-top:10px;
}
.tree ul, .tree li{
	list-style:none;
	padding:0;
	margin:0;
	display:block;
}
.tree a{
	display:block;
	text-decoration:none;
	color:rgb(34,65,145);
}
.tree a > span{
	display:block;
}
	/*Level 0 - Einrückung 50px*/
	.tree a.lvl0{
		background:url(images-cascade/tm-trenner-blau.png) no-repeat;
		background-size:100% 15px;
	}
		.tree a.lvl0.first{
			background:none;
		}
		.tree a.lvl0 > span{
			padding:20px 0 19px 0;
		}
			.tree a.lvl0 > span:before{
				content:'';
				display:inline-block;
				width:42px;
				height:17px;
				margin-bottom:-2px;
				background:url(images-cascade/tm-icon-blau.png) no-repeat;
				margin-left:-50px;
				margin-right:7px;
			}
		/*act, on*/
		.tree a.lvl0.act, .tree a.lvl0.on{
			font-family:open_sans_semibold;
		}
			.tree a.lvl0.act > span:before, .tree a.lvl0.on > span:before{
				background-image:url(images-cascade/tm-icon-blau-on.png);
			}
			/*Wenn zu einem lvl0 ein sub angezeigt wird, wird das padding unten etwas verringert, damit der Abstand zum ersten lvln optisch nicht so weit erscheint.*/
			.tree a.lvl0.hascn.act > span{
				padding-bottom:0.9em;
			}

	/*Level n - Einrückung 24px*/
	.tree .sub{
		padding-bottom:10px;
		font-size:16px;
		line-height:1.25em;
	}
	.tree .sub2{
		display:block;
	}
		.tree .sub a{
			border-top:1px dashed rgb(204,218,255);
			padding:7px 0 8px 0;
		}
			.tree .sub a span:before{
				/*icon-circle-blank*/
				content:'\e6ee';
				font-family:fontawesome_icons;
				color:rgb(153,182,255);
				margin-left:-20px;
				margin-right:5px;
			}
		/*act, on*/
		.tree .sub a.act > span:before, .tree .sub a.on > span:before{
			color:rgb(34,65,145);
		}
			.tree .sub a.on > span{
				font-family:open_sans_semibold;
			}
				.tree .sub a.on > span:before{
					/*icon-circle*/
					content:'\e6f2';
				}

	/*Einrückungen / Offsets*/
	.tree a.lvl0{padding-left:50px;}
	/*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:50px;}
	.tree a.lvl2{padding-left:70px;}
	.tree a.lvl3{padding-left:90px;}
	.tree a.lvl4{padding-left:110px;}
	.tree a.lvl5{padding-left:130px;}
	.tree a.lvl6{padding-left:150px;}
	.tree a.lvl7{padding-left:170px;}
	.tree a.lvl8{padding-left:190px;}
	.tree a.lvl9{padding-left:200px;}




/*--- footer Menü ---*/
.footer_nav{
	text-align:center;
}
.footer_nav a{
	color:white;
	text-decoration:none;
	display:inline-block;
	margin-left:-0.25em;
}
	.footer_nav a > span{
		display:inline-block;
		padding:3px 0 5px 0;
	}
	.footer_nav a:before{
		content:'|';
		display:inline-block;
		padding:0 0.5em 0 0.5em;
	}
		.footer_nav a:first-child:before{
			display:none;
		}


/*--- quicklink Icons, oben rechts unter content_welle ---*/
.qmenu{
	float:right;
	position:relative;
	margin-right:30px;
	/*BEACHTE: der Container schiebt sich relativ zur Breite des Inhaltsbereichs bei kleineren viewportbreiten < 980px langsam nach oben.*/
	margin-top:8%;
}
.qmenu a{
	float:left;
	width:42px;
	height:42px;
	text-align:center;
	background-color:rgb(34,65,145);
	border-radius:8px;
	margin-left:10px;
	padding:5px 5px 0 5px;
	box-shadow:3px 3px 6px rgba(0,0,0,0.2);
}
	/*Icons*/
	.qmenu a:before{
		/*icon-time*/
		content:'\e614';
		font-family:fontawesome_icons;
		font-size:35px;
		line-height:1em;
		color:white;
		display:inline-block;
	}
		.qmenu a.kontakt:before{
			/*icon-phone*/
			content:'\e68a';
			padding:1px 0 0 1px;
		}
		.qmenu a.preise:before{
			/*icon-euro*/
			content:'\e730';
			padding:1px 1px 0 0;
		}




/*=========== Farben ==========*/
@media screen, projection{
	/*Textformate*/
	body.kat-wellness h1,
	body.kat-wellness h2,
	body.kat-wellness h3,
	body.kat-wellness h4,
	body.kat-wellness h5,
	body.kat-wellness h6{
		color:rgb(255,120,0);
	}
	body.kat-sauna h1,
	body.kat-sauna h2,
	body.kat-sauna h3,
	body.kat-sauna h4,
	body.kat-sauna h5,
	body.kat-sauna h6{
		color:rgb(230,0,0);
	}

	/*Seite Hintergrundfarbe*/
	body.kat-wellness{background-color:rgb(255,153,0);}
	body.kat-sauna{background-color:rgb(191,0,0);}

	/*Wellenmuster Unterkante Slider, hinter Inhaltsbereich*/
	body.kat-wellness .top_slider_welle{background-image:url(images-cascade/welle-bg-orange.png);}
	body.kat-sauna .top_slider_welle{background-image:url(images-cascade/welle-bg-rot.png);}

	/*lange Welle Oberkante Inhaltsbereich, vor Slider*/
	body.page-start .content_top_welle_placeholder{background-image:url(images-cascade/welle-content-start.png);}
	body.kat-wellness .content_top_welle_placeholder{background-image:url(images-cascade/welle-content-orange.png);}
	body.kat-sauna .content_top_welle_placeholder{background-image:url(images-cascade/welle-content-rot.png);}

	/*Hintergrundfläche Inhaltsbereich*/
	body.page-start .content_bg{
		background-color:rgb(145,175,215);
	}


	/*Hauptmenu 1., 2. Reihe*/
	body.kat-wellness .topmenu_container{background-image:url(images-cascade/topmenu-bg-orange.png);}
	body.kat-sauna .topmenu_container{background-image:url(images-cascade/topmenu-bg-rot.png);}

	body.kat-wellness .hmenu_container{background-image:url(images-cascade/hmenu-bg-orange.png);}
	body.kat-sauna .hmenu_container{background-image:url(images-cascade/hmenu-bg-rot.png);}

	/*Submenu Treeview*/
	body.kat-wellness .tree a{color:rgb(255,102,0);}
	body.kat-sauna .tree a{color:rgb(229,46,46);}

	body.kat-wellness .tree a.lvl0 > span:before{background-image:url(images-cascade/tm-icon-orange.png);}
	body.kat-sauna .tree a.lvl0 > span:before{background-image:url(images-cascade/tm-icon-rot.png);}

		body.kat-wellness .tree a.lvl0{background-image:url(images-cascade/tm-trenner-orange.png);}
		body.kat-sauna .tree a.lvl0{background-image:url(images-cascade/tm-trenner-rot.png);}

			body.kat-wellness .tree a.lvl0.first{background-image:none;}
			body.kat-sauna .tree a.lvl0.first{background-image:none;}

			body.kat-wellness .tree a.lvl0.act > span:before, body.kat-wellness .tree a.lvl0.on > span:before{
				background-image:url(images-cascade/tm-icon-orange-on.png);
			}
			body.kat-sauna .tree a.lvl0.act > span:before, body.kat-sauna .tree a.lvl0.on > span:before{
				background-image:url(images-cascade/tm-icon-rot-on.png);
			}

		body.kat-wellness .tree .sub a{border-top-color:rgb(255,224,178);}
		body.kat-sauna .tree .sub a{border-top-color:rgb(255,202,191);}
	
			body.kat-wellness .tree .sub a > span:before{color:rgb(255,204,153);}
			body.kat-sauna .tree .sub a > span:before{color:rgb(245,196,196);}
	
				body.kat-wellness .tree .sub a.act > span:before, body.kat-wellness .tree .sub a.on > span:before{
					color:rgb(255,102,0);
				}
				body.kat-sauna .tree .sub a.act > span:before, body.kat-sauna .tree .sub a.on > span:before{
					color:rgb(230,23,23);
				}


	/*footer*/
	body.kat-wellness .footer_container:before{background-image:url(images-cascade/wbox1-welle-dorange.png);}
	body.kat-sauna .footer_container:before{background-image:url(images-cascade/wbox1-welle-drot.png);}

		body.kat-wellness .footer_top{
			background-color:rgb(230,119,0);
			background-image:url(images-cascade/footer-welle-abschluss-orange.png);
		}
		body.kat-sauna .footer_top{
			background-color:rgb(217,0,0);
			background-image:url(images-cascade/footer-welle-abschluss-rot.png);
		}

		body.kat-wellness .footer_bottom{background-color:rgb(255,173,51);}
		body.kat-sauna .footer_bottom{background-color:rgb(242,48,48);}

			body.kat-wellness .footer_nav_container{border-top-color:rgb(255,206,133);}
			body.kat-sauna .footer_nav_container{border-top-color:rgb(242,121,121);}

}




/*======== VIEWPORTS ======*/
/*--- Alle Browser, die mediaqueries unterstützen ---*/
@media screen and (width){
	/*Der Kontroll-DIV wird eingeblendet und kann korrekt mit offsetWidth ausgemessen werden.*/
	.slider0_measurement{
		display:block;
	}
}

/*--- Größer als Slider Hintergrundbild 1400px ---*/
@media screen and (min-width:1400px){
	/*--- Slider ---*/
	.top_img_container .slide{
		/*Opera bugfix, um Blitzer am Rand zu unterdrücken.*/
		background-size:100%;
		background-position:left center;
	}
}

/*--- ab kleiner XGA 1024, < iPad quer ---*/
@media screen and (max-width:1000px){
}

/*--- ab Standard-Außenbreite bei Cms4d.Grid (980px) ---*/
@media screen and (max-width:980px){
	/*Welle über slider im Hintergrund ausblenden, da sowieso am Browserrand abgeschnitten.*/
	.top_slider_welle{
		display:none;
	}

	/*--- Footer ---*/
	.footer_container{
		margin-bottom:0;
	}
		.footer_bottom{
			border-radius:0;
			padding-bottom:20px;
		}
}

/*--- unterhalb von Standard-Außenbreite bei Cms4d.Grid (908)*/
@media screen and (max-width:979px){
	/*--- Inhalt ---*/
	/*Offsets dynamisch von der Viewportbreite abhängig machen.
	WICHTIG: ab der minimalen viewportbreite <= 320px müssen diese Werte auf die finalen festen Pixelwerte zurückgesetzt werden.*/
	.content_row{
		/*Der usprüngliche Feste Wert von 170px wird jetzt als prozentualer Anteil der viewportbreite gesetzt.
		Dadurch skaliert ab jetzt der Offset proportional zusammen mit der Welle und dem Hintergrundslider.*/
		margin-top:-17.3469%;
		/*WICHTIG: das fixe padding (100px), das zum Abrücken der Hintergrundfarbe gesetzt ist, muss im selben Prozentsatz schrumpfen, wie
		die negative margin auf .content_top. Nur dann bleiben die Abstände beim Abwärtsskalieren exakt erhalten.*/
		padding-top:10.2040%;
	}
		.content_top{
			margin-top:-10.2040%;
		}
		.content_main{
			margin-top:-14.2857%;
		}

	/*--- Footer ---*/
	/*bottom darf jetzt in der Stapelreihenfolge VOR top liegen, da das Bild von Flossy den oberen Inhalt nicht mehr relevant überschneidet.*/
	.footer_top{
		min-height:120px;
		z-index:10;
	}
		.footer_top_flossy{
			display:none;
		}
	.footer_bottom{
		z-index:20;
	}
		.footer_bottom_flossy{
			display:block;
		}
		/*Die Adresse fängt jetzt an umzubrechen. Alle Teilblöcke außer dem ersten im ersten Absatz blenden jetzt den Trenner ein.*/
		.footer_address span:first-child:before{
			display:inline;
		}
			.footer_address > *:first-child span:first-child:before{
				display:none;
			}
}

/*--- kleiner Standard-Innenbreite bei Cms4d.Grid (940px) ---*/
@media screen and (max-width:939px){
	/*--- Navigation ---*/
	/*topmenu aus dem Layout an oberen Browserrand rücken (floatet jetzt).
	ACHTUNG: z-Index jetzt am höchsten, weil Dropdown das Logo und hmenu überscheiden kann.*/
	.top_topmenu_container{
		padding:0;
		z-index:50;
	}
		.top_topmenu_pos{
			padding:0;
			left:auto;
			top:auto;
			position:relative;
			float:left;
			clear:both;
			/*Kein Hintergrundbild mehr, da sich sonst bei Orange und Rot unschöne Mischungen ergeben.*/
			background-color:white;
		}
			.topmenu_container{
				background-image:none !important;
				padding:0;
				border-radius:0;
			}
				.topmenu{
					font-family:roboto_condensed_light;
					padding-right:25px;
				}
	/*Hauptmenü als Tasten mit gleicher Breite.*/
	.top_hmenu_container{
		z-index:20;
	}
		.top_hmenu_pos{
			padding:0;
			width:75%;
			left:25%;
			top:70px;
		}
			.hmenu_container{
				padding:0;
				background:none !important;
				border-radius:0;
			}
				/*Ab jetzt erst mal zweizeilig. Umbruch vor jedem 4 childNode. Der Umbruch erfolgt über DIVs (.br1, .br2, ...), die über JS ins DOM eingefügt wurden und bis jetzt display:none waren.*/
				.hmenu{
					font-size:18px;
					margin-top:-6px;
					padding-right:0;
				}
					.hmenu .br3{
						display:block;
					}
					.hmenu a.lvl0 > span{
						padding-bottom:11px;
						padding-right:5px;
					}
						/*lvl0 Reiter als Tasten. Die Farbe wird auch global über die body-Klasse im Farbschema gesteuert.*/
						.hmenu a.lvl0{
							border-radius:8px;
							padding-left:12px;
							padding-bottom:3px;
							margin-top:6px;
							margin-left:6px;
							min-width:150px;
							background-color:rgb(34,65,145);
						}

	/*Submenu Treeview kleiner*/
	.tree{
		font-size:16px;
	}
		.tree a.lvl0 > span{
			padding:18px 0 17px 0;
		}



	/*Logo etwas nach oben rücken*/
	.top_logo_container{
		z-index:10;
	}
		.top_logo_pos{
			top:70px;
			width:100%;
			max-width:100%;
		}
			img.top_logo{
				/*Jetzt Logotafel mit vollem Schlagschatten als Hintergrundgrafik zeigen.*/
				background-image:url(images-cascade/cascade-logo-tafel-schatten-top.png);
			}

	/*Quicklinks o/r näher zum Rand*/
	.qmenu{
		margin-right:20px;
	}


	/*--- Inhalt ---*/
	.content_main{
		padding-left:20px;
		padding-right:20px;
	}
		body.smenu_lvl_1 .html_content{
			padding-left:20px;
		}
		/*Linke Spalte mit treeview etwas schmaler*/
		.left_col{
			width:240px;
		}
		body.smenu_lvl_1 .center_col{
			padding-left:240px;
		}

	/*Startseite 4 Themenbereiche*/
	.start_themen{
		padding-left:20px;
		padding-right:20px;
	}
		/*grid Abstand verringern*/
		.start_themen div[class*=c4g_grid_]{margin-left:-20px;}
			.start_themen div[class*=c4g_grid_] > div{border-left-width:20px;}
		.tbox1{
			font-size:17px;
		}


	/*wbox1*/
	.wbox1{
		padding-left:20px;
		padding-right:20px;
	}

	/*footer*/
	.footer_top_content{
		padding-left:20px;
		padding-right:20px;
	}
	.footer_address{
		padding-left:20px;
	}


	/*=== Farben ===*/
	body.kat-sauna .hmenu a.lvl0{background-color:rgb(204,0,0);}
	body.kat-wellness .hmenu a.lvl0{background-color:rgb(255,128,0);}
}


/*--- grosse Tablets hoch ---*/
@media screen and (max-width:800px){
	/*---- Reihe Start Aktuelles -----*/
	/*Kalender*/
	.col_veranstaltungen .col_head{
		padding-left:4px;
	}
		.col_veranstaltungen .col_head a > *:after{
			right:4px;
		}
	.kalender .header{font-size:1em;}
		.kalender .header .btn.prev{left:4px;}
		.kalender .header .btn.next{right:4px;}
}

/*--- mittlere Tablets iPad ---*/
@media screen and (max-width:774px){
	.content_container img.max_30{
		max-width:220px;
	}
}
@media screen and (max-width:760px){
	/*--- 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;}

	/*--- Navigation ---*/
	.topmenu_container{
	}
		/*Schrift+Icons verkleinern*/
		.topmenu{
			padding-top:4px;
			/*padding-right:0;*/
			font-size:16px;
		}
		/*Das Logo skaliert jetzt mit der Breite des Layouts*/
		.top_logo_placeholder{
			width:30%;
			max-width:216px;
			min-width:100px;
		}
			img.top_logo{
				border-right:6px solid transparent;
			}
	/*Desktop Hauptmen ausblenden -> mobile Menü*/
	.top_hmenu_container{
		display:none;
	}
	.fmenu0_box{
		display:block;
	}
	/*Quicklinks o/r, Buttons kleiner*/
	.qmenu a{
		width:32px;
		height:32px;
		margin-left:8px;
	}
		.qmenu a:before{
			font-size:24px;
		}


	/*--- Slider top ---*/
	/*Cursorbuttons einblenden*/
	.sltop .cms4d_slider3_cbtn{
		display:block;
	}
	/*Indexbuttons kleiner, nur noch Indikator*/
	.sltop .cms4d_slider3_ibtn{
		width:8px;
		height:8px;
		margin:auto 4px;
	}
		.sltop .cms4d_slider3_ibtn:before{
			width:8px;
			height:8px;
		}

	/*Standard nur noch center_col über die volle Breite. Da für bestimmte body-Hilfsklassen ggf. noch
	andere spezieller Regeln wirken, müssen hier die Formate mit !important höchste Priorität erhalten.*/
	.left_col{
		display:none !important;
	}
	.center_col{
		width:100% !important;
		margin-left:0 !important;
		margin-right:0 !important;
		padding-left:0 !important;
		padding-right:0 !important;
	}
		.html_content{
			padding-left:0 !important;
			padding-right:0 !important;
		}


	/*Startseite 4 Themenbereiche*/
	.tbox1{
		font-size:14px;
	}


	/*---- Reihe Start Aktuelles -----*/
	/*Das dreispaltige Layout wird direkt einspaltig.*/
	.start_news div.c4g_grid_3{margin-left:0;}
		.start_news div.c4g_grid_3 > div{
			width:100%;
			clear:both;
			border-left-style:none;
			/*Da nachfolgend noch andere Regeln für das c4d grid die border setzen, muss der gewünschte Wert hier leider mit important fixiert werden.*/
			/*border-top:1px solid rgb(167,187,220) !important;*/
			border-top:4px dotted white !important;
			padding-top:30px;
			margin-bottom:30px;
		}
			.start_news div.c4g_grid_3 > div:first-child{
				border:none !important;
				padding:0;
			}
	/*Anordnung in Slidern Bild links/ Texte rechts. Dies wird final wieder in eine vertikale Anordnung geändert s.u. < 400.
	Die Breite des Bildes und das padding-left für den text sollen mit fbox2 übereinstimmen, so dass die Textkanten ordentlich untereinanderstehen, wenn auf den Slider
	eine wbox1 mit Text/Bild folgt.*/
	.fbox1 .box_img{
		width:32%;
		float:left;
		clear:none;
		margin-right:-100%;
	}
		.fbox1 .box_body, .fbox1 .box_link{
			width:100%;
			float:left;
			clear:none;
			padding-left:36%;
		}

	/*--- footer ---*/
	/*oberer Inhalt einspaltig*/
	.footer_top_content .c4g_grid_2 > div{
		width:100%;
		border-style:none !important;
		padding:0 20px 0 20px;
		margin-top:40px;
	}
		.footer_top_content .c4g_grid_2 > div:first-child{
			margin-top:0;
		}
}
@media screen and (max-width:708px){
	.content_container img.max_33{
		max-width:220px;
	}
}

/*--- Smartphone gross quer (z.B. Galaxy S3) ---*/
@media screen and (max-width:640px){
	/*--- 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;}


	/*Startseite 4 Themenbereiche*/
	.start_themen{
		margin-top:-20px;
	}
		/*Grid 2 spaltig*/
		.start_themen div.c4g_grid_4 > div{width:50%;}
		.start_themen div.c4g_grid_4 > div:nth-child(1n){clear:none;border-top-style:none;}
		.start_themen div.c4g_grid_4 > div:nth-child(2n+1){clear:left;}
			.start_themen div.c4g_grid_4 > div:nth-child(1n+3){border-top-style:solid;}


	/*--- Navigation ---*/
	/*topmenu nur noch als icons*/
	.topmenu_container{
	}
		.topmenu{
			padding-top:0;
			font-size:18px;
		}
			.topmenu a.lvl0 > span{
				display:none;
			}
				.topmenu a.lvl0:before, .topmenu .tm-icon-home a.lvl0:before{
					padding:0.82em 10px 15px 10px;
				}
}

/*--- kleine Tablets, Smartphone mittel quer ab <= 610px ---*/
@media screen and (max-width:610px){
}
@media screen and (max-width:564px){
	/*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%;
	}
}

@media screen and (max-width:533px){
	/*--- Inhalt ---*/
	.content_main{
		padding-left:15px;
		padding-right:15px;
	}

	/*Startseite 4 Themenbereiche*/
	.start_themen{
		padding-left:15px;
		padding-right:15px;
	}
		/*grid Abstand verringern*/
		.start_themen div[class*=c4g_grid_]{margin-left:-15px;}
			.start_themen div[class*=c4g_grid_] > div{border-left-width:15px;border-top-width:15px;}

	/*wbox1*/
	.wbox1{
		padding-left:15px;
		padding-right:15px;
	}


	/*--- Footer ---*/
	.footer_top_content{
		padding-left:15px;
		padding-right:15px;
	}
	.footer_address{
		/*font-family:roboto_condensed_regular;
		font-size:13px;*/
		width:68%;
		padding-left:15px;
	}
	.footer_bottom_flossy{
		position:absolute;
		margin:0;
		padding:0;
		width:27%;
		right:15px;
		bottom:0px;
	}
	.footer_bottom_row_2{
		padding-left:15px;
		padding-right:15px;
	}
}

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

	/*Quicklinks o/r ausblenden*/
	.qmenu{
		display:none;
	}

	/*--- Footer ---*/
	.footer_bottom_flossy{
		position:relative;
		width:100%;
		float:left;
		clear:both;
		left:auto;
		top:auto;
		right:auto;
		bottom:auto;
		margin:0;
		padding:0;
	}
		.footer_bottom_flossy img{
			display:block;
			margin:0 auto;
			max-width:50%;
		}
	.footer_address{
		width:100%;
		float:left;
		clear:both;
		position:relative;
		margin:0;
		padding:20px 15px 0 15px;
	}
}

/*--- 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;
	}


	/*Breadcrumb*/
	.bcmenu_top{
		text-align:center;
	}

	/*---- Reihe Start Aktuelles -----*/
	/*Anordnung in Slidern wieder einspaltig untereinander*/
	.fbox1 .box_img{
		width:100%;
		float:left;
		clear:both;
		margin-right:0;
	}
		.fbox1 .box_body, .fbox1 .box_link{
			width:100%;
			float:left;
			clear:both;
			padding-left:0;
		}

	/*--- fbox2 Text/Bild ---*/
	/*Anordnung analog fbox1 in einspaltig untereinander*/
	.fbox2 .box_img{
		width:100%;
		clear:both;
	}
		.fbox2 .box_img img{
			/*links ausrichten*/
			margin:0;
		}
	.fbox2 .box_body, .fbox2 .box_link{
		width:100%;
		clear:both;
		padding-left:0 !important;
	}
}


/*--- Minimale Layoutbreite: Smartphone hoch bis 320px, typisch iPhone und andere hoch ---*/
@media screen and (max-width:320px){
	/*Inhaltposition darf nicht mehr weiter dynamisch vertikal mit der viewportbreite skalieren.
	Finale Pixelwerte setzen.*/
	.content_row{
		margin-top:-55px;
		padding-top:32px;
	}
}








/*--- 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-wb/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-wb/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;
	}
}





/*--- 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_liste li.hblau .headline{background-color:rgb(145,175,215);}
.news_liste li.dblau .headline{background-color:rgb(71,107,179);}
.news_liste li.gelb .headline{background-color:rgb(255,202,0);color:rgb(51,51,102);}
.news_liste li.gelb .headline a{color:rgb(51,51,102);}
.news_liste li.orange .headline{background-color:rgb(255,173,51);color:rgb(51,51,102);}
.news_liste li.orange .headline a{color:rgb(51,51,102);}
.news_liste li.dorange .headline{background-color:rgb(230,119,0);}
.news_liste li.rot .headline{background-color:rgb(242,48,48);}
.news_liste li.drot .headline{background-color:rgb(217,0,0);}

.news_liste li.hblau .news_liste_lnk span:after{color:rgb(145,175,215);}
.news_liste li.dblau .news_liste_lnk span:after{color:rgb(71,107,179);}
.news_liste li.gelb .news_liste_lnk span:after{color:rgb(255,202,0);}
.news_liste li.orange .news_liste_lnk span:after{color:rgb(255,173,51);}
.news_liste li.dorange .news_liste_lnk span:after{color:rgb(230,119,0);}
.news_liste li.rot .news_liste_lnk span:after{color:rgb(242,48,48);}
.news_liste li.drot .news_liste_lnk span:after{color:rgb(217,0,0);}


.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;
		text-align:left;
		font-size:0.8em;
		position:relative;

		margin-top:-2em;
		border-radius:5px;
		text-decoration:none;
		text-align:left;


	}
		.news_details_backlink_top span{
			display:inline-block;
			padding:2px 8px 3px 9px;
			border-radius:5px;
			color:white;
			background-color:#224191;
		}
		.news_details_backlink_top span:before{
			/*icon-caret-left*/
			content:'\e6be';
			font-family:'fontawesome_icons';
			padding-right:0.5em;
		}
}
@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-wb/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:0.5em;
	}
	.sitemap ul li a{
		color:#224191;
	}
	.sitemap ul li ul li{
		font-weight:normal;

	}
}
@media print{
}



/*----- Suche ----*/
.suche_icon{
	float:right;
	margin:10px 0px 0px 20px;
	cursor:pointer;
}
.suche_container{
	width:241px;
	position:absolute;
	right:8px;
	top:72px;
	z-index:20000;
	padding:10px;
	border:1px solid #6C8DC5;
	border-radius:5px;
	background-color:#6C8DC5;
	box-shadow:5px 5px 5px 0px rgba(0,0,0,0.5)
}
.suche_eingabe{
	border:1px solid #F0F0F0;
	border-radius:5px;
	background-color:#F0F0F0;
	padding:4px;
	font-size:16px;
	width:186px;
}
.suche_button{
	width:28px;
	height:28px;
	border:1px solid #224191;
	border-radius:5px;
	background-color:#224191;
	background-image:url(images-cascade/icon-lupe.png);
	background-repeat:no-repeat;
	background-position:center center;
	margin-left:6px;
	cursor:pointer;
}

.suchergebnis{
	padding:0px 0px 0px 0px;
	float:left;
	margin-bottom:20px;
	
}
.suchergebnis p{
	margin-bottom:0.1em;
	
}
.suchergebnis p a, .suchergebnis p a:hover{
	color:black;
	text-decoration:none;
	font-weight:bold;
	
}
.suchergebnis .suche_lnk{
	float:left;
	font-weight:bold;
	color:#476BB3;
	font-size:14px;
	line-height:1.4em;
	padding:0em 0em 0em 0.2em;
	margin-top:1em;
	margin-bottom:1em;
	position:relative;
}
	.suchergebnis .suche_lnk:after{
		/*icon-circle-arrow-right*/
		content:'\e69d';
		font-family:fontawesome_icons;
		font-size:1.3em;
		font-weight:normal;
		color:#476BB3;
		float:right;
		margin-top:1px;
		margin-left:0.5em;
	}
	.suchergebnis .suche_lnk:hover{
		text-decoration:none;
	}


@media screen and (max-width:939px){
	.suche_container{
		right:26px;
		top:42px;
	}
}
@media screen and (max-width:330px){
	.topmenu .tm-icon-suche a.lvl0:before{
		font-size:17px;
	}
}




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

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





/*--- Formularfelder ---*/
.ft1{
	font-family:open_sans_regular, Arial, "Arial Unicode MS", Helvetica, sans-serif;
	color:black;
	font-size:14px;
	width:220px;
	background-color:#E5F1FF;
	border:1px solid #476BB3;
	border-radius:5px;
	padding:4px;
}
.ft1:focus{
	background-color:#91AFD7;
}

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


.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:#E5F1FF;
	border:1px solid #476BB3;
	border-radius:5px;
	padding:4px;
}

.ta1:focus{
	background-color:#91AFD7;
}


.fs1{
	font-family:open_sans_regular, Arial, "Arial Unicode MS", Helvetica, sans-serif;
	color:black;
	font-size:14px;
	background-color:#FEF2DB;
	border:1px solid #196559;
	border-radius:5px;
	padding:3px;
}


.bt1{
	font-size:16px;
	font-weight:normal;
	color:white;
	background-color:#224191;
	border:1px solid #224191;
	border-radius:5px;
	padding:4px 9px 5px 9px;

	text-decoration:none;
	margin-top:2px;
	cursor:pointer;


	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.bt1:hover{
	background-color:#224191;
	border:1px solid #224191;
}

.bt2{
	font-size:16px;
	font-weight:normal;
	color:white;
	background-color:#224191;
	border:1px solid #224191;
	border-radius:5px;
	padding:4px 9px 5px 9px;

	text-decoration:none;
	margin-top:2px;
	cursor:pointer;

	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.bt2:hover{
	background-color:#224191;
	border:1px solid #224191;
}


/*--- Belegungsplan ---*/

.belegungsplan{
	float:left;
	margin-bottom:30px;
}
	.belegungsplan2{
		width:100%;
	}

.tbl_bp{

	font-family:roboto_condensed_light, Arial, Helvetica, sans-serif;
	border-collapse:collapse;

	empty-cells:show;

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

}

	.tbl_bp td{
		padding:4px;
		word-wrap:break-word;

		vertical-align:center;

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


	.tbl_bp .headline{
		float:left;
		padding-top:2px;
	}
	.tbl_bp .navi{
		float:right;
		padding-top:2px;
	}
	.short{
		display:none;
	}
	
	.belegungsplan2 .tbl_bp tr:nth-child(n+1) td:first-child{
		width:1%;
	}
	
	.belegungsplan2 .tbl_bp .day_locked{
		text-align:center;
	}
		.belegungsplan2 .tbl_bp .day_locked:before{
			/*content:'\e60b';*/
			font-family:fontawesome_icons;
		}

	
.btn_bp_p{
	text-decoration:none;
	background-color:#476BB3;
	border-radius:5px;
	padding:1px 4px 2px 4px;
	color:white;
	font-size:13px;
	cursor:pointer;
}
	a.btn_bp_p:hover{
		text-decoration:none;
	}
	.btn_bp_p i{
		font-style:normal;
	}
	.btn_bp_p span:before{
		font-family:'fontawesome_icons';
		font-size:0.9em;
		content:'\e644';
		margin-right:4px;
	}

.btn_bp_n{
	text-decoration:none;
	background-color:#476BB3;
	border-radius:5px;
	padding:1px 4px 2px 4px;
	color:white;
	font-size:13px;
	margin-left:10px;
	cursor:pointer;
}
	a.btn_bp_n:hover{
		text-decoration:none;
	}
	.btn_bp_n i{
		font-style:normal;
	}
	.btn_bp_n span:after{
		font-family:'fontawesome_icons';
		font-size:0.9em;
		content:'\e648';
		margin-left:5px;
	}

	.off{
		background-color:#E2E2e2;
		color:#AAAAAA;
	}


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

	.tbl_bp{

		font-size:0.8em;
	}

		.tbl_bp td{
			padding:2px;
			word-wrap:break-word;

		}



	.tbl_bp .headline{
		font-size:1.1em;
		padding:4px;
	}
	.tbl_bp .navi{
		padding-top:4px;
	}
}

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

	.tbl_bp{

		font-size:0.7em;
	}

		.tbl_bp td{
			padding:1px;
			word-wrap:break-word;

		}



	.tbl_bp .headline{
		font-size:1.2em;
		padding:4px;
	}
	.btn_bp_n i, .btn_bp_p i{
		display:none;
	}
	.btn_bp_n span:after{
		margin-left:2px;
	}
	.btn_bp_p span:before{
		margin-right:3px;
	}
	.short{
		display:inline;
	}

	.long{
		display:none;
	}

}




/*--- Öffnungszeiten---*/

.oeffnungszeiten_container{
	float:left;
	width:100%;
}
.oeffnungszeiten{
	float:left;
	width:100%;
	margin-bottom:3em;

}
	.oeffnungszeiten .datum_head{
		float:left;
		width:100%;
		font-size:22px;
		margin-bottom:10px;
		padding:10px;
	 	font-family:roboto_condensed_regular, Arial, Helvetica, sans-serif;
		color:white;
		box-sizing:border-box;
		border-radius:5px;
		background-color:#6C8DC5;
	}
		.oeffnungszeiten .datum{
			float:left;
		}
			.oeffnungszeiten .wdn_short{
				display:none;
			}
		.oeffnungszeiten .datum_prevnext{
			float:right;
		}
			.oeffnungszeiten .datum_prev{
				float:left;
				font-family:'fontawesome_icons';
				background-color:#224191;
				color:white;
				padding:4px 8px 3px 4px;
				border-radius:4px;
				cursor:pointer;
				line-height:1em;
			}
				.oeffnungszeiten .datum_prev:before{
					content:'\e644';
				}
			.oeffnungszeiten .datum_next{
				float:left;
				font-family:'fontawesome_icons';
				background-color:#224191;
				color:white;
				padding:4px 4px 3px 8px;
				border-radius:4px;
				cursor:pointer;
				line-height:1em;
				margin-left:8px;
			}
				.oeffnungszeiten .datum_next:before{
					content:'\e648';
				}

	.oeffnungszeiten .oz_kat{
		float:left;
		width:32%;
		margin-right:2%;
		padding:10px;
		color:white;
		font-size:22px;
	 	font-family:roboto_condensed_light, Arial, Helvetica, sans-serif;
		box-sizing:border-box;
		border-radius:5px;
	}
		.oeffnungszeiten .oz_kat.erlebnisbad{
			background-color:#224191;
		}
		.oeffnungszeiten .oz_kat.freibad{
			background-color:#3973BF;
		}
		.oeffnungszeiten .oz_kat.saunawelt{
			background-color:#CC0000;
			margin-right:0;
		}
		.oeffnungszeiten .oz_kat .name{
			font-family:roboto_condensed_regular, Arial, Helvetica, sans-serif;
		}





@media screen and (max-width:480px){
	.oeffnungszeiten .oz_kat{
		width:100%;
		margin:0 0 10px 0;
	}
}
@media screen and (max-width:370px){
	.oeffnungszeiten .wdn_short{
		display:inline;
	}
	.oeffnungszeiten .wdn_full{
		display:none;
	}
}




/*--- Kundenspezifische Klassen für HTML-Editor ---*/
.marg0{
	margin-bottom:0;
	margin-top:0;
}
	.marg0 ul{
		margin-bottom:0;
		margin-top:0;
	}
.marg1{
	margin-bottom:1em;
}

a.lnk_button1{
	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:after{
	content:'\e6e7';
	font-family:'fontawesome_icons';
	padding-left:0.5em;
}
a.lnk_button1:hover,a.lnk_button1:focus{
	text-decoration:none;
	color:white;
}


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{
}
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  ';
}


a.bt_route, a.bt_route:hover{
	padding:4px 6px 4px 30px;
	background-image:url(images-cascade/icon-route.png);
	background-repeat:no-repeat;
	background-position:6px 7px;
	text-decoration:none;
	line-height:1px;
	border:1px solid #009E42;
	border-radius:3px;
	background-color:#F9F9F9;
}

.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;
	
	table-layout: fixed;

}

	.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{
	padding:10px;
	background-color:#33312B;
	border:1px solid #DEDDDA;
	margin:5px 0px 5px 0px;
}
#map img{
	max-width:none;
}
#route{
	margin-left:0px;
	margin-bottom:1.5em;
}

.fb{
	color:#224191;
}
.fb:before{
	font-size:48px;
	font-family:'fontawesome_icons';
	content:'\e678';
}




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

.layer_info{
	display:block;
	position:absolute;
	z-index:200;
	top:150px;
	right:0px;
	background-color:#E60000;
	color:white;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
	font-size:42px;
	padding:10px;
	line-height:1em;
	cursor:pointer;
}
	.layer_info:before{
		font-family:'fontawesome_icons';
		content:'\e662';
		font-family:'roboto_condensed_bold';
		content:'3G';		
	}

@media screen and (max-width:940px){
	.layer_info{
		top:180px;
	}
}
@media screen and (max-width:760px){
	.layer_info{
		top:140px;
	}
}
@media screen and (max-width:640px){
	.layer_info{
		top:5px;
		left:0px;
		right:auto;
		font-size:28px;
		z-index:300;
		padding:5px 8px 5px 5px;
		border-top-left-radius:0px;
		border-bottom-left-radius:0px;
		border-top-right-radius:10px;
		border-bottom-right-radius:10px;
	}
}
@media screen and (max-width:380px){
	.layer_info{
		top:200px;
		right:0;
		left:auto;
		padding:5px 8px 5px 8px;
		border-top-left-radius:10px;
		border-bottom-left-radius:10px;
		border-top-right-radius:0px;
		border-bottom-right-radius:0px;
	}
}