﻿@charset "utf-8";

/*=== 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;
}

.embed-container{
	display:block !important;
	position: relative;
	padding-bottom: 56.25%;
	overflow:hidden !important;
	max-width:100%;
	height:auto;
}

.embed-container iframe, .embed-container object, .embed-container embed, .embed-container .content{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.embed-size-container
{
	max-width:510px;
	margin-bottom:1.8em;
}


/*========== 24.10.2013, dogan ===============*/

/*--- Webfonts ---*/
@font-face {
    font-family: 'archivo_narrow';
    src: url('fonts/archivonarrow-regular-webfont.eot');
    src: url('fonts/archivonarrow-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/archivonarrow-regular-webfont.woff') format('woff'),
         url('fonts/archivonarrow-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'archivo_narrow_bold';
    src: url('fonts/archivonarrow-bold-webfont.eot');
    src: url('fonts/archivonarrow-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/archivonarrow-bold-webfont.woff') format('woff'),
         url('fonts/archivonarrow-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


html{
	width:100%;
	min-height:100%;
}
body{
	color:black;
	background-color:black;
	margin:0;
	padding:0;

	font-family:Calibri, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
	font-size:16px;
	-webkit-text-size-adjust:100%;

	background-image:url(images-mwnm/body-bg-1920.jpg);
	background-position:center top;
	background-repeat:no-repeat;

	width:100%;
	min-height:100%;
}
/*Bei manchen Browern werden zu große Bilder nicht dargestellt.
Deshalb werden hier abgestuft etwas kleinere Versionen geladen.*/
@media screen and (max-width:1280px)
{
	body{
		background-image:url(images-mwnm/body-bg-1280.jpg);
	}
}
@media screen and (max-width:1024px)
{
	body{
		background-image:url(images-mwnm/body-bg-1024.jpg);
	}
}
@media print{
	body{
		color:black;
		background-color:white;
		text-align:left;
		margin:0;
		padding:0;
		background-image:none;
	}
}
/*IE Tabellenfehler*/
table{
	font-size:1em;
}


/*alle ab IE8+, zwingt dieses Element und alle Nachkommen in den box-modus*/
.border_box, .border_box *{
	-webkit-box-sizing:border-box; /* Safari/Chrome, andere WebKit */
	-moz-box-sizing:border-box;    /* Firefox, andere Gecko */
	box-sizing:border-box;         /* Opera/IE 8+ */
}

.c_green{color:rgb(0,65,22);}
.bg_green{background-color:rgb(0,65,22);}
.c_red{color:rgb(225,0,30);}
.bg_red{background-color:rgb(225,0,30);}
.c_beige{color:rgb(255,217,144);}
.bg_beige{background-color:rgb(255,217,144);}



/*========= Layout Seite ==========*/
@media screen, projection{

	.page_container{
		width:100%;
		float:left;
		clear:both;
	}

	/*===== allgemeiner floatender Reihen-Container =====
	Bei diesem Projekt sind Desktop und Tablet-Layout (iPad hoch) schon identisch.
	Allgemeiner Aufbau Reihe über volle Breite (topmenu, head)
	+ innerer container zentriert (kein floating) mit max-width.
	+ innerer container floating mit 100%*/
	.row{
		width:100%;
		float:left;
		clear:both;
		position:relative;
	}
		.row_center{
			width:100%;
			max-width:768px;
			margin:0 auto;
			position:relative;
		}
			.row_inner{
				width:100%;
				float:left;
				clear:both;
				position:relative;
			}


	/*===== topmenu, immer sichtbar =====*/
	.topnav_row{
		min-height:40px;
		background:black url(images-mwnm/topnav-row-bg.png) repeat-x;
		z-index:40;
	}
		.topnav_container{
			padding:0 20px 0 20px;
			position:relative;
		}
			/*Verhalten:
			Die beiden Menüspalten floaten links bzw rechts. Im HTML-Code steht die rechte Spalte zuerst.
			Sollte bei Breiten über 480px zu wenig Platz sein, bricht die linke Spalte automatisch in die nächste
			Reihe um. Dabei bleiben die Beschriftungen möglichst lange sichtbar. Erst unterhalb 480 werden
			die Beschriftungen ausgeblendet und nur noch die Icons sichtbar. s.u.*/
			.topnav_right{
				float:right;
			}
			.topnav_left{
				float:left;
			}


	/*===== Kopfzeile mit Logo slogan, skalieren jeweils proportional ab < 768 =====*/
	.head_row_logo{
		background:black url(images-mwnm/head-row-logo-bg.png) no-repeat center top;
		z-index:10;
	}
		.head_row_logo img{
			max-width:100%;
			float:left;
			border:none;
		}
	.head_row_subline{
		background:url(images-mwnm/head-row-subline-bg.png);
		z-index:11;
	}
		.head_row_subline .row_inner{
			background-color:black;
		}
		.head_row_subline img{
			max-width:100%;
			float:left;
			border:none;
		}
		/*Ab 400px wird das Bild mit dem zweizeiligen Text eingeblendet s.u.*/
		.head_row_subline .subline_desktop{
			display:block;
		}
		.head_row_subline .subline_mobile{
			display:none;
		}


	/*===== Kopfbild, Bildwechsler =====*/
	.top_img_row{
		z-index:20;
	}
		.top_img_row .row_inner{
			background-color:rgb(255,217,144);
			background-color:black;
		}
			.top_img_pcontainer{
				width:100%;
				float:left;
				clear:both;
				position:relative;
			}
				.top_img_container{
					width:100%;
					float:left;
					clear:both;
					position:relative;
					overflow:hidden;
					z-index:10;
				}
					/*BEACHTE: diese Formatierung bezieht sich nur auf den Standardfall, dass ein statisches Kopfbild direkt als Kind von
					top_img_container ausgegeben wird. Für den Bildwechsler gelten andere Formate, s.u.*/
					.top_img_container > img{
						/*Für desktop Originalgröße festnageln. Wird beim Übergang ins fluid Layout auf relative Breite gesetzt, s.u.*/
						width:768px;
						/*WICHTIG: muss floaten, damit kein ungewollter Abstand außen herum durch Whitespace im Code entsteht*/
						float:left;
						clear:both;
					}

			/*--- Bildwechsler Startseite, flexible Breite/Höhe ---*/
			/*
			Normalerweise wird auf dem container, in den per JS das Control hineingeschrieben wird die height
			explizit in Pixel angegeben. In diesem Fall hier soll aber der Bildwechsler mit dem Layout proportional skalieren.
			Da aber die inneren Elemente des Bildwechslers alle position:absolute sind, drücken sie den übergeordneten
			floatenden Container nicht auseinander. Würde also keine height angegeben, so wäre der container nur 0px hoch.
			LÖSUNG:
			Um den eigentlichen Bildwechsler liegt noch ein floatender Container (outer). Hinter dem container des Bildwechslers (z-index)
			liegt als Geschwister noch ein Hilfscontainer mit einem transparenten Hilfsbild. Das Hilfsbild hat nun die gewünschte
			Breite/Höhe, die für den Bildwechsler geplant ist (hier z.B. max. 960x440px). Da der Hilfscontainer und sein Hilfsbild
			beide floaten, drücken sie das Layout für den gesamten Bildwechsler auf die gewünschte Breite/Höhe auseinander.
			Für die inneren absolut positionierten Elemente des Bildwechslers kann jetzt die Angabe von height:100% den so
			gewonnenen Innenraum immer proportional ausfüllen.
			Wenn sich die Breite des Layouts und damit auch die Breite des transparenten Hilfsbildes verkleinert,
			dann skaliert das IMG-Element typischerweise proportional. Durch die sich proportional verringernde Höhe nimmt dann auch
			die Gesamthöhe des Bildwechsler-Layouts ab.
			*/
			.ss0_outer_container{
				width:100%;
				float:left;
				clear:both;
				position:relative;
			}
				.ss0_outer_container_height{
					width:100%;
					float:left;
					clear:both;
					z-index:10;
				}
					.ss0_height_img{
						max-width:100%;
						float:left;
						clear:both;
					}
			.ss0_container{
				position:absolute;
				left:0px;
				top:0px;
				z-index:20;
			}


	/*===== Hauptmenu Desktop =====*/
	.hmenu_row{
		/*Dieses Menü wird standardmäßig angezeigt und funktionert für alle abe IE8.
		Wird später beim Übergang zu fluid ausgeblendet und durch tabmenu ersetzt. s.u.*/
	}
		.hmenu_container{
			background-color:black;
		}


	/*===== Hauptmenu fluid, tabmenu =====*/
	.tabmenu_row{
		/*Dieses Menü wird erst beim Übergang zu fluid eingeblendet und ersetzt dann hmenu s.u.*/
		display:none;
	}
		.tabmenu_container{
			background-color:black;
		}


	/*===== Seiteninhalt =====
	Das Layout ist zweispaltig, wobei die Seiteninhalte links neben der right_col floaten.
	Da die Elemente in right_col wahrscheinlich nicht fluid sind, behält die rechte Spalte zunächst
	ihre fixe Breite bis zu einem bestimmten breakpoint.
	Leider ist die Verwendung von display:table-cell mit einigen Nachteilen in punkto fluidem Layoutveralten verbunden.
	Um hier trotzdem nur mit floating eine variable mit einer fixen Spalte zu realisieren,
	wird folgendes Konstrukt angewandt:
	Da center_col (float:left) sich variabel verhalten soll und auch gleichzeitig für das weitere Verhalten
	der darin enthaltenen Inhaltstexte/Bilder eine Layoutbreite definieren muss, erhält sie width:100%.
	Dadurch nimmt center_col zunächst die volle Breite der Reihe ein. Die im HTML-Code nachfolgende right_col
	hat eine feste Pixelbreite und float:right. Da center_col rechts neben sich keinen Raum mehr lässt, steht
	right_col zunächst rechts unterhalb von center_col.
	Wie bekommt man jetzt right_col dazu, Kopf an Kopf in der selben Reihe wie center_col rechts zu floaten ?
	1)	Die fixe Breite von right_col ist bekannt. center_col erhält rechts eine NEGATIVE margin
		mit exakt der Breite von right_col. Dadurch ist jetzt der Platz frei, damit right_col nach oben rutschen kann,
		um mit identischer Oberkante rechts neben center_col zu floaten.
		Hierbei ist es tatsächlich so, dass right_col in der Layoutreihenenfolge center_col überlagert. Quasi so, als
		wäre right_col absolut oben rechts positioniert. Werden beide container eingefärbt, sieht man dies deutlich.
		Die Inhalte von center_col werden also teiweise von right_col verdeckt.
	2)	Um den Raum "hinter" right_col freizuräumen, erhält jetzt html_content als eigentlicher Inhaltscontainer
		noch ebenfalls margin-right in der selben Breite, wie right_col. Da html_content selbst nicht floatet, gibt
		es auch keine Probleme mit der durch padding/margin erzeugten "Überbreite". Der DIV verhält sich einfach
		normal display:block.
	Da right_col die Inhalte von center_col überlagert, wird durch z-index bei beiden suchergestellt,
	dass right_col immer VOR center_col gezeichnet wird.

	Dieses Layout-Konstrukt ist getestet und OK in:
	Windows: IE8(7), IE10(9), Firefox, Opera, Chrome, Safari, Opera mobile emulator
	Android: webkit, Opera mobile 12.10, Firefox 24
	*/
	.content_row{
		z-index:30;
	}
		.content_container{
			background-color:rgb(255,217,144);
			position:relative;
		}
			.center_col{
				float:left;
				width:100%;
				margin-right:-205px;
				position:relative;
				z-index:10;
			}
				.html_content{
					/*KEIN floating, KEINE width - sorgt nur für das padding im Innenraum*/
					position:relative;
					padding:20px 23px 10px 30px;
					margin-right:205px;
				}
				.html_content .content_left{
					float:left;
					width:245px;
					padding-right:10px;
				}
			.right_col{
				width:205px;
				float:right;
				position:relative;
				z-index:20;
			}
				.right_col_content{
					/*KEIN floating, KEINE width - sorgt nur für das padding im Innenraum*/
					position:relative;
					padding:20px 20px 20px 0;
				}
					.right_col_box{
						width:100%;
						float:left;
						clear:both;
						margin-bottom:20px;
					}





	/*--- Footer Container, nur fluid ---*/
	.footer_container{
		width:100%;
		float:left;
		clear:both;
		display:none;
	}
	.footer{
		width:100%;
		float:left;
		clear:both;
		text-align:left;
		min-height:40px;
		font-family:archivo_narrow;
		font-size:15px;
		position:relative;
	}
		.footer_center{
			text-align:left;
			display:inline-block;
			position:relative;
			color:white;
			padding:10px;
		}
		.footer.green{
			background:rgb(0,65,22) url(images-mwnm/hmenu-bg-green.png) repeat-x;
		}
		.footer.red{
			background:rgb(180,0,24) url(images-mwnm/hmenu-bg-red.png) repeat-x;
		}
		.footer a{
			color:white;
			text-decoration:none;
		}
		.footer a:hover{
			color:white;
			text-decoration:underline;
		}


	/*===== Navigation =====*/
	/*für die drei horizontalen Menüs*/
	.hm_float{
		float:left;
	}
	.hm_float a{
		font-size:18px;
		color:rgb(153,153,153);
		float:left;
		text-decoration:none;
	}
		.hm_float a.on{
			color:white;
		}
		.hm_float a > span{
			float:left;
			padding:8px 0 10px 0px;
		}
			/*folgt auf ein Icon ein Span, dann erhält der Span etwas mehr padding-left zum Icon*/
			.hm_float a > i+span{
				padding-left:3px;
			}
		/*Menü icons*/
		.hm_float i[class*=icon_]{
			float:left;
			width:40px;
			min-height:40px;
			background:url(images-mwnm/tm-icon-star.png) no-repeat center top;
		}
			.hm_float i.icon_star{
				background-image:url(images-mwnm/tm-icon-star.png);
				width:22px;
			}
				.hm_float a.on i.icon_star{
					background-image:url(images-mwnm/tm-icon-star-on.png);
				}
			.hm_float i.icon_mapmarker{
				background-image:url(images-mwnm/tm-icon-mapmarker.png);
				width:14px;
			}
				.hm_float a.on i.icon_mapmarker{
					background-image:url(images-mwnm/tm-icon-mapmarker-on.png);
				}
			.hm_float i.icon_home{
				background-image:url(images-mwnm/tm-icon-home.png);
				width:26px;
			}
				.hm_float a.on i.icon_home{
					background-image:url(images-mwnm/tm-icon-home-on.png);
				}
			.hm_float i.icon_sitemap{
				background-image:url(images-mwnm/tm-icon-sitemap.png);
				width:24px;
			}
				.hm_float a.on i.icon_sitemap{
					background-image:url(images-mwnm/tm-icon-sitemap-on.png);
				}

		/*topmenu links mit icon und text*/
		.topmenu_1{
		}
			.topmenu_1 a{
				margin-left:16px;
			}
			.topmenu_1 a:first-child{
				margin-left:0;
			}
		/*topmenu mitte nur icons*/
		.topmenu_2{
			margin-right:20px;
		}
			.topmenu_2 a > i[class*=icon_]{
				width:40px;
			}
		/*sprachmenü rechts*/
		.langmenu a{
		}
			/*vertikale Trennstriche, ab IE8*/
			.langmenu a > span:before{
				content:'|';
				color:rgb(153,153,153);
				padding:0 4px 0 4px;
			}
			.langmenu a:first-child > span:before{
				display:none;
			}



	/*--- Hauptmenu horizontal zentriert, zweizeilig Desktop ---
	BEACHTE: die Menüpunkte sollen als Gruppe jeweils zentriert in einer Reihe stehen.
	Um dies ohne Hilfstabellen zu realisieren hat der Menücontainer text-align:center.
	Der untergeordnete Hilfscontainer hmenu_center floatet NICHT und ist display:inline-block.
	Dadurch richtet er sich mit seinem wiederum floatenden Inhalt mittig in der Reihe aus.
	Leider kommt es in allen Browsern bei inline-block Elementen zu ungewolltem Leerraum, wenn im HTML-Code
	Whitespace vorhanden ist. Dadruch würde der hmenu_center Element unterhalb jeweils ein paar
	pixel Leerraum erzeugen. Um dies zu beheben, erhält dieser Container eine negative margin.
	WICHTIG: in dieser Konstruktion MUSS hmenu position:relative gesetzt haben.*/
	.hmenu{
		width:100%;
		float:left;
		clear:both;
		text-align:center;
		min-height:40px;
		font-family:archivo_narrow;
		font-size:18px;
		position:relative;
	}
		.hmenu_center{
			text-align:left;
			display:inline-block;
			margin-bottom:-10px;
			position:relative;
		}
		.hmenu.green{
			background:rgb(0,65,22) url(images-mwnm/hmenu-bg-green.png) repeat-x;
		}
		.hmenu.red{
			background:rgb(180,0,24) url(images-mwnm/hmenu-bg-red.png) repeat-x;
		}
		.hmenu a{
			color:white;
			text-decoration:none;
			float:left;
			background:url(images-mwnm/hmenu-bullet.png) no-repeat 0px 13px;
			padding:8px 14px 10px 15px;
		}
			.hmenu a.on{
				background-image:url(images-mwnm/hmenu-bullet-on.png);
			}



	/*--- Hauptmenu Tabmenu fluid, Aufklappen per JS ---*/
	.tabmenu, .tabmenu *{
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	.tabmenu{
		font-size:18px;
	}
	.tabmenu ul, .tabmenu li{
		list-style:none;
		display:inline;
		padding:0;
		margin:0;
		color:white;
	}
	.tabmenu > ul > li{
		width:100%;
		float:left;
		clear:both;
		background-color:rgb(0,66,22);
	}
	.tabmenu > ul > li.red{
		background-color:rgb(181,0,24);
	}
		.tabmenu .tab{
			font-family:archivo_narrow_bold;
			background:url(images-mwnm/hmenu-bg-green.png) repeat-x;
			padding:12px 10px 12px 36px;
			border-top:1px solid rgb(51,133,78);
			border-bottom:1px solid rgb(0,52,18);
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			cursor:pointer;
			position:relative;
		}
			.tabmenu .tab:before{
				content:'';
				display:block;
				position:absolute;
				left:7px;
				top:-1px;
				width:24px;
				height:100%;
				background:url(images-mwnm/tabmenu-icon-plus.png) no-repeat left center;
			}
			.tabmenu li.red .tab{
				background-image:url(images-mwnm/hmenu-bg-red.png);
				border-top-color:rgb(231,51,75);
				border-bottom-color:rgb(144,0,19);
				border-bottom-color:rgb(128,0,17);
			}
			.tabmenu .tab.open:before{
				background-image:url(images-mwnm/tabmenu-icon-minus.png);
			}
		.tabmenu .sub{
			/*Zuerst alle Sub-Container geschlosen. Wird über JS auf- und zugeklappt (s. tabmenu_onclick)*/
			display:none;
			width:100%;
			float:left;
			clear:both;
			/*versteckt in allen Browsern die border-top des/der ersten LI-Elemente*/
			margin-top:-1px;
		}
			.tabmenu .sub li{
				/*zunächst zweispaltig, wird später auf einspaltig 100% ausgedehnt s.u.*/
				width:50%;
				float:left;
				border-top:1px solid rgb(0,53,18);
			}
				.tabmenu li.red .sub li{
					border-color:rgb(128,0,17);
				}
			.tabmenu a{
				color:white;
				text-decoration:none;
				display:block;
				padding:11px 10px 12px 34px;
				position:relative;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
				.tabmenu a:before{
					content:'';
					display:block;
					position:absolute;
					left:14px;
					top:0px;
					width:11px;
					height:100%;
					background:url(images-mwnm/hmenu-bullet.png) no-repeat left center;
				}
				.tabmenu a.on:before{
					background-image:url(images-mwnm/hmenu-bullet-on.png);
				}



	/*--- Buttonmenü rechte Spalte desktop ---*/
	/*BEACHTE: da sich im IE8 keine mehrfachen Hintergrundbilder festlegen lassen, aber :before schon funktioniert,
	werden optionale Icons als dynamisches Element vor der Beschriftung erzeugt.*/
	.btn2{
		display:block;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		color:white;
		background-color:rgb(179,0,24);
		font-family:archivo_narrow;
		font-size:18px;
		padding:8px 9px 8px 9px;
		text-decoration:none;
		background-repeat:repeat-x;
		background-position:left center;
		background-image:url(images-mwnm/btn2-bg-red.png);
		border:1px solid rgb(178,0,24);
		border-radius:5px;
		/*WICHTIG*/
		position:relative;
	}
		.btn2[class*=icon_]{
			padding-left:45px;
		}
		.btn2[class*=icon_]:before{
			content:'';
			position:absolute;
			left:-1px;
			top:-1px;
			width:40px;
			height:40px;
			background-repeat:no-repeat;
		}
		.btn2.icon_calendar:before{
			background-image:url(images-mwnm/btn2-icon-calendar.png);
		}
		.btn2.icon_envelope_alt:before{
			background-image:url(images-mwnm/btn2-icon-envelope-alt.png);
		}
		.btn2.icon_book:before{
			background-image:url(images-mwnm/btn2-icon-book.png);
		}
		.btn2.icon_file_text_alt:before{
			background-image:url(images-mwnm/btn2-icon-file-text-alt.png);
		}
		.btn2.icon_uebernachtung:before{
			background-image:url(images-mwnm/btn2-icon-uebernachtung.png);
		}
		.btn2.icon_hand:before{
			background-image:url(images-mwnm/btn2-icon-fa-hand-o-right.png);
		}
		.btn2.icon_stern:before{
			background-image:url(images-mwnm/btn2-icon-stern.png);
		}
		.btn2.icon_faq:before{
			background-image:url(images-mwnm/btn2-icon-faq.png);
		}
		.btn2.icon_press:before{
			background-image:url(images-mwnm/btn2-icon-press.png);
		}
	.bmenu{
		margin-bottom:10px;
	}
	.bmenu .btn2{
		margin-bottom:10px;
	}

}

/*---------------------- Logo Container -------------------*/


.logosp{
	width:49%;
	height:140px;
	float: left;
	border-bottom: 1px solid #6c8f77;
	text-align: center;
}

.logosp:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

.logosp img{
	display: inline-block;
	vertical-align: middle;
	max-width:85% !important;
	max-height: 85%;
}

.logosp_border_right{
	border-right: 1px solid #6c8f77;
}

.logosp_border_bottom{
	border-bottom: none;
}

.logosp_border_bottom_last{
	border-bottom: none;	
}

.headline_border{
	border-bottom: 1px solid #6c8f77;
	margin-bottom: 20px;
	margin-top: 20px;
	float:left;
	width:100%;
}



/*========== alle Browser, die media queries unterstützen (IE ab 9) ==========*/
@media screen and (width)
{
}





/*========== ab <= 768px, alles fluid ==========*/
@media screen and (max-width:768px){
	.cms4d_ib2_layer img{
		width:100%;
	}
}


/*========== große Tablets ab <= 800 ==========*/
@media screen and (max-width:800px){
}

/*========== mittlere Tablets kleiner iPad, < 768 ==========*/
@media screen and (max-width:760px){
	body{
		background-image:none;
	}

	/*===== Bilder allgemein =====
	Ab hier prozentuale Breite zum übergeordenten Layout, damit der Text optisch schöner um das Bild fließt.*/
	.html_content img.bild_links{
		width:42%;
	}
	.html_content img.bild_rechts{
		width:42%;
	}


	/*===== Hauptmenu Desktop =====*/
	.hmenu_row{
		display:none;
	}
	/*===== Hauptmenu fluid, tabmenu =====*/
	.tabmenu_row{
		display:block;
	}


	/*===== Navigation =====*/
	.topnav_container{
		padding-left:10px;
		padding-right:10px;
	}
	.topmenu_2{
		margin-right:5px;
	}
		.topmenu_2 a > i[class*=icon_]{
			width:40px;
		}

	/*--- Hauptmenu horizontal zentriert, zweizeilig Desktop ---*/
	.hmenu{
		text-align:left;
	}
		.hmenu_center{
			display:block;
			margin:0;
			padding-left:10px;
		}


	/*--- Bildwechsler ---
	Falls der Bildwechsler mit einem CSS Hintergrundbild gestartet wird, muss jetzt auch die dynamische
	Skalierung dieses Hintergrundbildes für neuere Browser eingeschaltet werden.*/
	.cms4d_ib2_layer_container{
		background-size:100% auto;
	}

	.top_img_container > img{
		width:100%;
	}
}

/*========== kleine Tablets, Smartphone groß quer ab <= 610px ==========*/
@media screen and (max-width:610px){
	/*===== Seiteninhalt =====
	Ab dieser Breite nur noch einspaltig. right_col bricht nach unten um*/
	.center_col{
		width:100%;
		float:left;
		clear:both;
	}
		.html_content{
			padding:20px 20px 10px 20px;
			margin:0;
		}
	.right_col{
		width:100%;
		float:left;
		clear:both;
	}
		.right_col_content{
			padding:20px 20px 10px 20px;
		}

	/*--- Bildwechsler ---
	Die Index-Buttons für die Bildwechsler pauschal ausblenden*/
	.cms4d_ib2_ibut_container{
		display:none !important;
	}
}
@media screen and (max-width:520px){
}

/*========== Smartphone quer ab < 480px (< iPhone quer) ==========*/
@media screen and (max-width:479px){
	/*===== Navigation =====*/
	/*Beschritungen ausblenden und für icons mehr Breite setzen*/
	.topnav_container{
		padding-left:0px;
	}
		.topmenu_1 a{
			margin-left:0px;
		}
		.topmenu_1 i[class*=icon_]
		{
			width:40px;
		}
		.topmenu_1 a > span{
			display:none;
		}

	.tabmenu .sub li{
		width:100%;
		clear:both;
	}

}

/*========== Smartphone hoch ab <= 400px ==========*/
@media screen and (max-width:400px){
	/*===== Bilder allgemein =====*/
	.html_content img.bild_links, .html_content img.bild_rechts{
		/*breite wieder max. Originalbreite, ansonsten mit Layout proportional skalieren*/
		width:inherit;
		float:left;
		clear:both;
		margin-left:0;
		/*rechts freiräumen damit kein Text mehr umfließen kann*/
		margin-right:100%;
	}

	/*Ab 400px wird das Bild mit dem zweizeiligen Text eingeblendet s.u.*/
	.head_row_subline .subline_desktop{
		display:none;
	}
	.head_row_subline .subline_mobile{
		display:block;
	}
	
	/* Rahmenanpassung und Umbrüche für den Logo-Container*/
	.logosp{
		width:100%;
	}
	
	.logosp_border_right{
		border-right: none;
	}
	
	.logosp_border_bottom{
		border-bottom: 1px solid #6c8f77;	
	}
}


@media print{
	html, body{
		background-color:white;
		background-image:none;
	}
	.head_container{
		display:none;
	}
	.top_logo_container{
		display:none;
	}
	.top_container{
		display:none;
	}
	.top_img_pcontainer{
		display:none;
	}
	.top_img_container{
		display:none;
	}
	.hmenu_container{
		display:none;
	}
	.left_col{
		display:none;
	}
	.treemenu_container{
		display:none;
	}
	.bcmenu_container{
		display:none;
	}
	.dropdown_outer_container, .dropdown_container{
		display:none;
	}
	.content_container{
		background-image:none;
		padding:0;
		margin:0;
	}
	.topmenu_container, .mainmenu_container{
		display:none;
	}
	.bottom_container{
		display:none;
	}
}

/*--- Absatz-Formate ---*/
@media screen{
	pre{
		font-size:1em;
		clear:both;
	}

	p{
		line-height:1.2em;
		margin:0;
		padding:0;
		margin-bottom:1.5em;
	}
	p + p{
		margin-top:-0.5em;
	}
	.html_content p{
		line-height:1.2em;
		margin:0;
		padding:0;
		margin-bottom:1.5em;
	}

	h1, h2, h3, h4, h5, h6{
		color:black;
		font-family:archivo_narrow_bold, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
		margin:0 0 0.5em 0;
		padding:0;
		line-height:1.1em;
	}
	h1{
		color:rgb(225,0,30);
		font-size:1.5em;
		margin-bottom:0.5em;
	}
	h2{
		font-size:1.25em;
		margin-bottom:0.7em;
	}
	h3{
		font-size:1.15em;
	}
	h4{
		font-size:1.15em;
	}
	h5{
		font-size:1.15em;
	}
	h6{
		font-size:1.15em;
	}

	address{
		font-style:normal;
		font-size:0.8em;
		line-height:normal;
	}

	a, a:active, a:visited{
		text-decoration:none;
	}
	.html_content a{
		color:rgb(153,99,0);
	}
	.html_content a:hover{
		text-decoration:underline;
	}

	hr{
		height:1px;
		overflow:hidden;
		border:none;
		border-top:1px solid rgb(229,181,92);
		padding:0;
		margin:0 0 15px 0;
		clear:both;
		float:none;
	}
	hr.dashed{
		border-top:1px dashed rgb(229,181,92);
	}


}
@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;
	}

}

.hr_solid{
	border-top:1px solid rgb(230,230,230);
	height:17px;
	margin-top:7px;
	position:relative;
}
.hr_dashed{
	border-top:1px dashed rgb(204,204,204);
	height:17px;
	margin-top:7px;
	width:100%;
	float:left;
	position:relative;
}


/*===== Bilder =====
Innerhalb html_content werden alle IMG pauschal so geschaltet, dass sie fluid sind. Durch max-width:100%
bleiben sie in allen Browsern ab IE7 so lange in ihrer Originalgröße, bis das übergeordnete Element
kleiner wird als sie selbst. Ab dann passen sie sich proportional der max. verfügbaren Breite an.
*/
@media screen, projection{
      /*allgemein*/
      .html_content img{
            /*max. Ausdehnung Originalbreite, anderfalls proportionale Verkleinerung*/
            max-width:100%;
            /*ACHTUNG: width/height:auto
            überschreibt auch ggf. direkt auf dem IMG-Element gesetzte width/height HTML-Attribute.
            D.h. die Bildgröße kann im HTML-Editor nicht mehr über den normalen Dialog angepasst werden (sollte sowieso nicht...).
            Es wäre aber noch möglich, über ein style-Attribut eine feste Pixel-width zu setzen.
            Allerdings führt das im IE8 zu Verzerrungen sobald das Bild mit dem Layout skaliert.
            Alle neueren Browser skalieren aber auch dann noch korrekt proportional mit dem Layout ab der auf
            dem style-Attribute gesetzten Pixelbreite.
            */
            width:auto;
            height:auto;
      }

      /*inline Bilder. Originalbröße bis breakpoint, dann prozentuale Breite s.u.*/
      .html_content img.bild_links{
            float:left;
            margin:0 20px 10px 0;
      }
      .html_content img.bild_rechts{
            float:right;
            margin:0 0 10px 20px;
      }
}



.container_rel{
	/*allgemein Für NS7*/
	position:relative;
}


/*--- Listen-Formate ---*/
@media screen{
	.html_content ul{
		list-style:none;
		padding:0;
		margin:-0.5em 0 1.5em 1em;
	}
	.html_content ul ul{
		margin:0;
		padding-left:1em;
	}
	.html_content li{
		padding:0.5em 0 0 0;
		margin:0;
	}
	.html_content li:before{
		content:'';
		display:inline-block;
		width:10px;
		height:10px;
		margin:0 0.4em 0 -1em;
		background-color:rgb(153,99,0);
		border-radius:10px;
	}

	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;
	}
}




/*--- Infoboxen ----*/
.infobox1{
	background-color:#FF8B1A;
	border:1px solid #FF8B1A;
	border-radius:6px;
	margin-bottom:1em;
	padding:9px 12px 12px 12px;
	float:left;
	min-width:256px;
	width:80%;
}
.infobox2{
	color:white;
	background-color:#006622;
	border:1px solid #006622;
	border-radius:6px;
	margin-bottom:1em;
	padding:9px 12px 12px 12px;
	float:left;
	min-width:256px;
	width:80%;
}
.infobox2 a, .infobox2 a:hover{
	color:white;
}





/*--- 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;
}
.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;
}
.cms4dmodul_2_teaser_modulbodycontainer, .cms4dmodul_3_teaser_modulbodycontainer{
}
.cms4dmodul_2_teaser_modulbodycontainer ul li, .cms4dmodul_3_teaser_modulbodycontainer ul li{
	background-image:none;
}

.cms4dmodul_2_teaser_headline, .cms4dmodul_3_teaser_headline{
}

.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{
	margin:0 0 1em 0;
	padding:0;
}

.cms4dmodul_2_liste_modulbodycontainer .news_liste_hr, .cms4dmodul_3_liste_modulbodycontainer .news_liste_hr{
}

.cms4dmodul_2_liste_modulbodycontainer h2, .cms4dmodul_3_liste_modulbodycontainer .news_liste_hr{
}





/*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:10px;
	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:158px;
	height:106px;
	overflow:hidden;
	float:left;
	border:1px solid #006622;
	margin-right:10px;
	margin-bottom:10px;
}
.bildergalerie_liste img{
	width:158px;
	height:106px;
	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{
}
.event_register a{
	color:black;
	border:1px solid #273341;
	background-color:#c0c4c9;
	padding:2px 2px 2px 2px;
	margin-right:2px;
	float:left;
	text-decoration:none;
	font-size:0.9em;
}
.event_register .year_buttons{
	float:left;
	clear:both;
	margin-bottom:2px;
}
.event_register .year_buttons a:hover{
	color:white;
	background-color:#5b7998;
}
.event_register .but_y{
	background-color:#c0c4c9;
}
.event_register .act_year{
	border:1px solid #273341;
	color:white;
	background-color:#5b7998;
	font-weight:bold;
	padding:2px 2px 2px 2px;
	margin-right:2px;
	float:left;
	font-size:0.9em;
}

.event_register .month_buttons{
	clear:left;
}
.event_register .month_buttons a:hover{
	color:white;
	background-color:#5b7998;
}
.event_register .but_m{
	border:1px solid #273341;
	background-color:#d7d9dd;
}
.event_register .but_m_act{
	border:1px solid #273341;
	background-color:#5b7998;
}
.event_register .but_m_on{
	border:1px solid #273341;
	color:white;
	background-color:#5b7998;
	font-weight:bold;
}
.event_register .monat_name{
	margin:5px 0 0 0;
	font-weight:bold;
	padding-bottom:0.8em;
	border-bottom:1px dashed #273341;
}

.event_liste{
	float:left;
	margin-bottom:0.5em;
}
.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;
	/*wichtig für IE*/
	float:left;
	clear:both;
	border-bottom:1px dashed #273341;
}

.event_liste .headline{
	color:black;
	font-size:1.15em;
	font-weight:bold;
	margin:0 0 0.5em 0;
	background-image:none;
	padding:0;
}
.event_liste .headline a{
	color:black;
}
.event_liste .headline a:hover{
	color:black;
	text-decoration:none;
}

.event_liste .body_text{
	float:left;
	width:615px;
}

.event_liste .body_text p{
	margin-bottom:0.5em;
}

.event_liste_date{
	margin-bottom:0.5em;
	font-size:0.9em;
	font-weight:bold;
	color:#27334;
}
.event_liste h1, .event_details h1{
	border:none;
	background-color:transparent;
	background-image:none;
	text-indent:0px;
	font-style:normal;
	padding:0px;
	font-family:Verdana;
	font-size:1.4em;
	font-weight:bold;
	margin:0 0 1em 0;
}
.event_liste h2, .event_details h2{
	color:black;
	font-size:1.0em;
	margin:0.25em 0 0.6em;
	color:black;
}
.event_liste_lnk{
	font-weight:bold;
}
.event_details{
}
.event_details_date{
	margin-bottom:15px;
	font-weight:bold;
}
.event_details address{
	margin:0 0 1em 0;
}
@media screen{
	.event_details_backlink_top{
		float:right;
	}
	.event_details_backlink_top a{
		text-decoration:none;
	}
}
@media print{
	.event_details_backlink_top{
		display:none;
	}
}
.event_liste .data_img_container{
	width:120px;
	overflow:hidden;
	float:left;
	margin-top:-5px;
	margin-right:15px;
	margin-bottom:10px;
}
.event_liste .box_2s{
	margin-left:130px;
}
.event_liste .data_img{
	border:none;
	margin-top:5px;
}
.event_liste .data_img_txt{
	font-size:9px;
}
/*in der Detailansicht umfliesst der Langtext die komplette Box*/
.event_details .data_img_container{
	float:left;
	clear:left;
	margin:-3px 10px 8px 0;
}
.event_details .data_img{
	border:none;
	margin-top:5px;
}
.event_details .data_img_txt{
	font-size:9px;
}



/*--- News Liste/Details ---*/
.news_liste{
	float:left;
	width:100%;
}
.news_liste .headline{
	color:black;
	font-size:1em;
}
.news_liste .headline a, .news_liste .headline a:hover{
	text-decoration:none;
	color:black;
}

.news_liste .headline_newsmode{
	/*color:#375BAB;
	float:left;
	font-size:1.4em;
	font-weight:bold;*/
	color:rgb(170,131,69);
	font-size:1.35em;
	margin:0 0 1em 0;
	padding:0;
	font-weight:bold;
}
.link_newsmode{
	float:right;
}
.news_liste ul{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:100%;
}
.news_liste ul li{
	background-image:none;
	list-style:none;
	margin:0 0 15px 0;
	padding:15px 0 0 0;
	/*wichtig für IE*/
	float:left;
	clear:both;
	width:100%;
	border-top:1px solid #B40018;
	border-top:1px solid #e5c281;

}
.news_liste li:before{
	display:none;
}

.news_liste .data_img_container{
	width:160px;
	overflow:hidden;
	float:left;
	margin:0px 15px 0px 0px;
}
.news_liste .data_img{
	border:none;
}
.news_liste .data_img_mobile{
	border:none;
	display:none;
}
.news_liste .data_img_txt{
	font-size:9px;
}

.news_liste .body_text{
	float:left;
	width:330px;
}
.news_liste .body_text p a, .news_liste .body_text p a:hover{
	text-decoration:none;
	color:black;
}
.news_liste .body_text p {
	margin-bottom:0.5em;
}

.news_liste .body_text ul{
	list-style:none;
	margin:1em 0 1em 10px;
	padding:0;
	width:auto;
}
.news_liste .body_text ul li{
	padding:0 0 0.5em 15px;
	margin:0 0 0 -8px;
	background-image:url(images-mwnm/li-bullet.gif);
	background-repeat:no-repeat;
	background-position:0px 5px;
	border-bottom:0px;
	width:auto;
	
}

.news_liste .body_text .news_liste_lnk{
	font-weight:bold;
	color:#996300;
}
.news_liste .body_text .news_liste_lnk:hover{
	color:#996300;
	text-decoration:underline;
}

.news_liste_hr{
	border-top:1px solid #246DB3;
	margin:15px 0px 15px 0px;
	clear:both;
}
.news_liste_date{
	font-size:0.7em;
	color:black;
}
.news_liste h1, .news_details h1{

}
.news_liste h2{
	color:rgb(38,77,128);
	font-size:1.2em;
	margin:0 0 0.5em 0;
}
.news_details h1{

}
.news_details h2{
	color:black;
	font-size:1.2em;
	font-weight:bold;
	padding:0;
	margin-bottom:1em;
	background-image:none;
}
.news_details{
}
.news_details_date{
	margin-bottom:15px;
	font-weight:bold;
}

.news_details address{
	margin:0 0 1em 0;
}
@media screen{
	.news_details_backlink_top{
		float:right;
		margin-left:15px;
	}
	.news_details_backlink_top a{
		font-weight:normal;
		font-size:0.9em;
	}
}
@media print{
	.news_details_backlink_top{
		display:none;
	}
}
.news_liste .box_2s{
	margin-left:130px;
}

/*in der Detailansicht umfliesst der Langtext die komplette Box*/
.news_details .data_img_container{
	float:left;
	clear:left;
	margin:-3px 10px 8px 0;
}
.news_details .data_img{
	border:none;
	margin-top:5px;
}
.news_details .data_img_txt{
	font-size:9px;
}


@media screen and (max-width:760px){

	.news_liste .data_img_container{
		width:100%;
		overflow:hidden;
		float:left;
		margin:0px 15px 15px 0px;
	}
	.news_liste .data_img{
		display:none;
	}
	.news_liste .data_img_mobile{
		display:block;
		width:100%;
	}
	.news_liste .body_text{
		width:100%;
	}

}


/*--- News Register ---*/
.news_register{
	width:620px;
	float:left;
}

.news_register_tabs{
	width:620px;
	float:left;
}

.news_register_tabs .tab_off{
	float:left;
	background-color:#F0F5E1;
	background-color:#DAD2C1;
	margin-right:10px;
	margin-top:5px;
	padding:4px 11px 5px 11px;
	padding:6px 11px 7px 11px;

	border-radius:4px 4px 0px 0px;

}

.news_register_tabs .tab_on{
	float:left;
	background-color:#887861;
	color:white;
	margin-right:10px;
	padding:4px 11px 14px 11px;

	border-radius:4px 4px 0px 0px;

	background-image:url(images-rc/register-pu.gif);
	background-repeat:no-repeat;
	background-position:center 24px;
}

.news_register_content{
	width:598px;
	float:left;
	border:1px solid #887861;
	padding:10px;

	border-radius:0px 4px 4px 4px;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.news_register_content .content{
	width:598px;
	float:left;
	display:none;
}

.news_register_content .data_img_container{
	width:auto;
	float:left;
	margin-top:0px;
	margin-right:15px;
	margin-bottom:8px;
}

.news_register_content .data_img{
	border:1px solid #887760;
	margin-top:0px;
}

.news_register_content .data_img_txt{
	font-size:9px;
}

.news_register_content .body_text{
	width:auto;
}

.news_register_content .body_text p {
	margin-bottom:0.5em;
}

.news_register_content .body_text ul{
	list-style:none;
	margin:1em 0 1em 10px;
	padding:0;
	width:auto;
}

.news_register_content .body_text ul li{
	padding:0 0 0.5em 15px;
	margin:0 0 0 -8px;
	background-image:url(images-rc/li-bullet-1.png);
	background-repeat:no-repeat;
	background-position:0px 5px;
	border-bottom:0px;
	width:auto;
}

.news_register_content .news_register_lnk{
	font-weight:bold;
	margin-top:0.5em;
}

.news_register_content .news_register_lnk a{
	color:#887760;
}

.info_layer_container{
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
	border:1px solid #887760;
	width:200px;
	padding:6px;
	background-color:#F0F5E1;
	background-color:#AA956D;
	color:white;

	border-radius:4px 4px 4px 4px;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

	.info_layer_container ul{
		list-style:none;
		margin:-0.5em 0 1.5em 13px;
		padding:0;
	}
	.info_layer_container ul ul{
		list-style:none;
		margin:0 0 0 13px;
		padding:0;
	}
	.info_layer_container ul li{
		padding:0.5em 0 0 15px;
		margin:0 0 0 -12px;
		background-image:url(images-rc/li-bullet-1.png);
		background-repeat:no-repeat;
		background-position:0px 10px;
	}




/*--- 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{
		background-image:url(images-rsdaun/lvl-n-on.png);
		background-position:0px 12px;
		font-weight:bold;
		margin-bottom:0.5em;
		padding-left:15px;
	}
	.sitemap ul li a{
		font-size:0.9em;
	}
	.sitemap ul li ul li{
		border:none;
		padding-bottom:0;
		margin-top:0.5em;
		margin-bottom:0.5em;
	}
	.sitemap ul li ul li{
		background-image:url(images-rsdaun/lvl-n.png);
		background-position:0px 12px;
		font-weight:normal;

	}
	.sitemap ul li ul li a{
		font-size:0.9em;
	}
	.sitemap ul li ul li ul li{
		background-image:url(images-rsdaun/lvl-n.png);
	}
}
@media print{
}


/*--- Register ---*/
.register{
	width:100%;
	float:left;
}

.register .reg_off{
	background-color:#AA956D;
	font-size:16px;
	font-weight:bold;
	color:white;
	padding:12px;
	cursor:pointer;
	float:left;
	margin-left:20px;
}

.register .reg_on{
	background-color:#887760;
	font-size:16px;
	font-weight:bold;
	color:white;
	padding:12px;
	cursor:pointer;
	float:left;
	margin-left:20px;
}

.register .kalender{
	background-image:url(images-rc/icon-kalender.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	padding-left:30px;
}

.register .form{
	background-image:url(images-rc/icon-mail.png);
	background-repeat:no-repeat;
	background-position:0px -1px;
	padding-left:28px;
}

.register .agb{
	background-image:url(images-rc/icon-agb.png);
	background-repeat:no-repeat;
	background-position:0px -1px;
	padding-left:28px;
}


/*--- Formularfelder ---*/
.ft1{
	font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	color:black;
	font-size:14px;
	width:220px;
	border:1px solid #006622;
	background-color:#FF8B1A;
	padding:4px;
	
}

.ft1_on{
	font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	font-size:14px;
	color:black;
	width:220px;
	border:1px solid #006622;
	background-color:#FF8B1A;
	padding:4px;
}

.ft2{
	font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	color:black;
	font-size:14px;
	width:50px;
	border:1px solid #006622;
	background-color:#FF8B1A;
	padding:4px;
}

.ft2_on{
	font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	font-size:14px;
	color:black;
	width:50px;
	border:1px solid #006622;
	background-color:#FF8B1A;
	padding:4px;
}


.ta1{
	font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	color:black;
	font-size:14px;
	width:420px;
	height:152px;
	border:1px solid #006622;
	background-color:#FF8B1A;
	padding:4px;
}

.ta1_on{
	font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	font-size:14px;
	color:black;
	width:420px;
	height:152px;
	border:1px solid #006622;
	background-color:#FF8B1A;
	padding:4px;
}


.bt1{
	cursor:pointer;
	font-size:14px;
	font-weight:bold;
	color:white;
	border:1px solid #B20018;
	background-color:#E1001F;
	padding:10px 8px 10px 8px;
	border-radius:6px;
}

.bt2{
	cursor:pointer;
	font-size:14px;
	font-weight:bold;
	color:white;
	border:1px solid #B20018;
	background-color:#006622;
	padding:4px 8px 4px 8px;
	border-radius:6px;
	float:left;
	margin-top:2px;
}




/*--- GoogleMap ---*/
#map{
	margin-bottom:1em;
	border:1px solid #006622;
	width:100%;
	height:350px;
}
#map img{
	max-width:508px;
}
#gm_error{
	padding:10px;
	background-color:#EEEEEE;
	border:1px solid #DEDDDA;
	margin:5px 0px 5px 0px;
	color:black;
	display:none;
}
#route{
	width:100%;
	float:left;
	color:black;
}


#expand
{
	display:none;
	width:100%;
	float:left;
	overflow:hidden;

}
.expander
{
	color:#996300;
}



/*--- Layer ---*/
.layer_close{
	cursor:pointer;
	position:relative;
	margin-left:30px;
}
	.layer_close{
		right:5px;
		top:4px;
		position:absolute;
	}
	.layer_close img{
		width:36px;
		height:36px;
		position:absolute;
		top:3px;
		left:-35px;
	}
	.layer_close:after{
		/*
		content:'\f057';
		font-family:fontawesome;
		color:#FFFFFF;
		font-size:42px;
		*/
	}
	
	.layer_img{
			border:1px solid #CCCCCC;
	}
	
@media screen and (max-width:620px){
	.layer_img{
		border-right:none;
		border-left:none;
	}
	.layer_close{
		right:10px;
		top:5px;
		
		margin-top:-50px;
	}
		.layer_close:after{
			font-size:42px;
		}
}



/*--- Pressegalerie ---*/
.presse_gal{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
	.presse_gal .item{
		width:calc(50% - 15px);
		margin-bottom:30px;
	}
		.presse_gal .item .img{
			margin-bottom:10px;
		}
			.presse_gal .item .img img{
				width:100%;
			}
		.presse_gal .item .lnk{
			display:flex;
			flex-wrap:wrap;
			justify-content:space-between;
		}
			.presse_gal .lnk a, .presse_gal .lnk a:hover{
				font-size:20px;
				text-decoration:none;
			}
				.presse_gal .lnk a.dwnl:before{
					content:url(images-mwnm/icon-dwnl.png);
					margin-right:6px;
				}
				.presse_gal .lnk a.view:before{
					content:url(images-mwnm/icon-view.png);
					margin-right:6px;
				}
		
@media screen and (max-width:768px){
	.presse_gal .item .lnk a{
		width:100%;
		margin-bottom:5px;
	}
}
@media screen and (max-width:480px){
	.presse_gal .item{
		width:100%;
	}
	.presse_gal .item .lnk a{
		width:auto;
		margin-bottom:0;
	}
}


/*--- JSSOR ---*/
.slider_close{
	cursor:pointer;
	position:relative;
	margin-left:30px;
}
	.slider_close img{
		width:36px;
		height:36px;
		position:absolute;
		top:0px;
		left:0px;
	}
	.slider_close:after{
		content:'\f00d';
		font-family:fontawesome;
		color:white;
		font-size:42px;
	}

.slider_expand{
	cursor:pointer;
	position:relative;
	margin-left:30px;
}
	.slider_expand img{
		width:36px;
		height:36px;
		position:absolute;
		top:0px;
		left:0px;
	}
	.slider_expand:after{
		content:'\f065';
		font-family:'fontawesome';
		color:white;
		font-size:42px;
	}

.slider_play{
	cursor:pointer;
	position:relative;
	margin-left:40px;
}
	.slider_play img{
		width:36px;
		height:36px;
		position:absolute;
		top:0px;
		left:0px;
	}
	.slider_play:after{
		content:'\f04b';
		font-family:fontawesome;
		color:white;
		font-size:42px;
	}

.slider_stop{
	cursor:pointer;
	position:relative;
	margin-left:40px;
}
	.slider_stop img{
		width:36px;
		height:36px;
		position:absolute;
		top:0px;
		left:0px;
	}
	.slider_stop:after{
		content:'\f04c';
		font-family:fontawesome;
		color:white;
		font-size:42px;
	}

.slider_index{
	position:relative;
	margin-left:30px;
	font-size:42px;
	color:white;
	font-family:'roboto_bold';
	font-family:'sourcesanspro_bold';
}


.slider_compress{
	cursor:pointer;
	position: fixed;
	top: 10px;
	right: 10px;
	text-shadow: 2px 2px 5px #000000;
}

	.slider_compress:after{
		content:'\f066';
		font-family:'fontawesome';
		color:white;
		font-size:42px;		
	}

@media screen and (max-width:1024px){
	body:after{
		content:'marker1';
		display:none;
	}
	.slider_close{
		margin-left:25px;
	}
		.slider_close img{
			width:30px;
			height:30px;
		}
		.slider_close:after{
			font-size:35px;
		}

	.slider_expand{
		margin-left:25px;
	}
		.slider_expand img{
			width:30px;
			height:30px;
		}
		.slider_expand:after{
			font-size:35px;
		}

	.slider_play{
		margin-left:33px;
	}
		.slider_play img{
			width:30px;
			height:30px;
		}
		.slider_play:after{
			font-size:35px;
		}

	.slider_stop{
		margin-left:33px;
	}
		.slider_stop img{
			width:30px;
			height:30px;
		}
		.slider_stop:after{
			font-size:35px;
		}

	.slider_index{
		margin-left:25px;
		font-size:35px;
	}
}

@media screen and (max-width:640px){
	body:after{
		content:'marker2';
		display:none;
	}
	.slider_close{
		margin-left:15px;
	}
		.slider_close img{
			width:18px;
			height:18px;
		}
		.slider_close:after{
			font-size:21px;
		}

	.slider_expand{
		margin-left:15px;
	}
		.slider_expand img{
			width:18px;
			height:18px;
		}
		.slider_expand:after{
			font-size:21px;
		}

	.slider_play{
		margin-left:20px;
	}
		.slider_play img{
			width:18px;
			height:18px;
		}
		.slider_play:after{
			font-size:21px;
		}

	.slider_stop{
		margin-left:20px;
	}
		.slider_stop img{
			width:18px;
			height:18px;
		}
		.slider_stop:after{
			font-size:21px;
		}

	.slider_index{
		margin-left:15px;
		font-size:21px;
	}	
}

#zoom_slider_content{
}


.jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
	background: url(../jssor/b02.png) no-repeat;
	overflow: hidden;
	cursor: pointer;
}

.jssorb13 div {
	background-position: -5px -5px;
}

.jssorb13 div:hover, .jssorb13 .av:hover {
	background-position: -35px -5px;
}

.jssorb13 .av {
	background-position: -65px -5px;
}

.jssorb13 .dn, .jssorb13 .dn:hover {
	background-position: -95px -5px;
}

.jssora20l, .jssora20r, .jssora20ldn, .jssora20rdn
{
	position: absolute;
	cursor: pointer;
	display: block;
	background: url(../jssor/a13.png) no-repeat;
	overflow:hidden;
}
.jssora20l { background-position: -3px -33px; }
.jssora20r { background-position: -63px -33px; }
.jssora20l:hover { background-position: -123px -33px; }
.jssora20r:hover { background-position: -183px -33px; }
.jssora20ldn { background-position: -243px -33px; }
.jssora20rdn { background-position: -303px -33px; }

@media screen and (max-width:939px){
	.jssora20l, .jssora20r, .jssora20ldn, .jssora20rdn{display:none}
}
