@charset "utf-8";

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
/*html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}*/
/*font:inherit durch folgendes ersetzt wegen IE Bug: font-weight:inherit;font-style:inherit;font-family:inherit;*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/*form reset*/
button,textarea,select,input{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-background-clip: padding;-moz-background-clip: padding;background-clip:padding-box;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;background-color:#fff;color:#000;outline:0;margin:0;padding:0;text-align:left;font-size:100%;height:1em;vertical-align:middle;}/*-webkit-appearance:none; weg, da sonst in chrome nicht ordentlich*/
button,input{line-height: normal;}
button[disabled],input[disabled]{cursor: default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px;}/*webkit-appearance wegen chrome, sonst nicht oder nur kaum sichtbar*/
textarea{overflow: auto;vertical-align:top;}
input{line-height: normal !important;}/*wegen FF bug*/
form{position: relative;}
form,select,input,textarea,submit,input[type="submit"],button{margin:0;padding:0;}
select,input,textarea{padding:3px;}
option{margin:0;padding:0 3px;/*line-height: normal !important;*/}
input[type="submit"],button{padding: 0.5em !important;}

/*
Klassennamen ausschließen (nicht class):
div:not(.classXXX) {
	font-weight: bold;
}
*/
/*
resetting box-sizing:
content-box: Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included
border-box: The width and height properties (and min/max properties) includes content, padding and border, but not the margin
initial: Sets this property to its default value.
inherit: Inherits this property from its parent element
*/
html {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
	height: 100%;
}
*, *:before, *:after {
	box-sizing: inherit;
}

.megamenu_container {
	box-sizing: content-box; 
}

.megamenu_container, .megamenu_container *, .megamenu_container *:before, .megamenu_container *:after {
 	box-sizing: content-box;  	
}


img { 
/*
	box-sizing: content-box; 
*/
}


/* enable for debugging - speziell BoxLayout auf Mobilgeräten [nicht löschen!] */
/*
* {
	color: rgba(200, 200, 200, 0.4) !important;
	border-color: rgba(0, 0, 0, 0.3) !important;
	outline-color: rgba(0, 0, 255, 0.3) !important;
	background: rgba(0, 0, 0, 0.07) !important;
}
*/

/******************************************
* line-height + font-size nur noch mit em!
* Ausnahme: fixe Größen wie Navigation!
*******************************************/

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons'), 
	local('fonts/MaterialIcons-Regular'), 
	url('fonts/MaterialIcons-Regular.woff2') format('woff2'),
	url('fonts/MaterialIcons-Regular.woff') format('woff'),
	url('fonts/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons, .materialtest {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  word-wrap: normal;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;

  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';

}

@font-face {
  font-family: 'EB Garamond',serif;
  font-style: normal;
  font-weight: 400;
  src: local('EB Garamond'), local('EBGaramond'),
  	url('fonts/EBGaramond-Regular.ttf') format('truetype');
}



/****************************/
/* BODY & SEITE (zentriert) */
/****************************/

html {
	-webkit-text-size-adjust: none;	/* iphone, Achtung: betrifft auch Safari und Co! Damit bei Safari auf Mac die Schriftgröße auch passt . Kann aber sein dass FontSize A A A dann nicht auf Safari geht.*/
}

body { 
	margin: 0; 
	padding: 0;
	height: 100%;/*wegen bg*/
	text-align: center;  /*IE*/
	color: #5b5452;
	
	background: url(../pic/back.png) #FFF no-repeat center 300px;
	background-attachment:fixed;
	
}

#startseite {
}

body, input, textarea, button { /* Schriftfamilie dezidiert angeben! v.a. wegen textarea!*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
}


body, body.fontswitchNormal {
	font-size: 62.5%; line-height:normal;
}
body.fontswitchBig { 
	font-size: 70%; 
}
body.fontswitchBiggest { 
	font-size: 80%;
}

#tinymce {
	font-size:80%;
}

/* nun größer*/
/*
body, body.fontswitchNormal {
    font-size: 87.5%;
    line-height: 1.429em;
}
body.fontswitchBig {
    font-size: 100%;
    line-height: 1.8em;
}
body.fontswitchBiggest {
    font-size: 112.5%;
    line-height: 2.2em;
}
*/


	/*
		http://stackoverflow.com/questions/8146874/issue-with-css-media-queriesscrollbar
		-> - issue media-queries or screensize - sonst bricht zb das Megamenu in den Browsern unterschiedlich in die Responsive-Version um!
		muss aber in interact_tiny_mce wieder aufgehoben werden, sonst geht scrollbar nicht
	*/
	/* Firefox - issue media-queries or screensize */
	@-moz-document url-prefix()
	{
		html
		{
			overflow:hidden;/*achtung (window).scroll wird nicht gefeuert -> muss in scrolltotop behoben werden! - weiters in inc_javascripts_und_css on .ready() bei iframe scrollbar wieder deatkivieren*/
			height:100%;
		}
		body
		{
			position:relative;
			overflow-y:scroll;
			height:100%;
			/*-webkit-overflow-scrolling:touch;*/

		}
	}
	/* Opera - issue media-queries or screensize*/
	x:-o-prefocus, html
	{
		overflow:hidden;
		height:100%;
	}
	x:-o-prefocus, body
	{
		position:relative;
		overflow-y:scroll;
		height:100%;
	}
	.removeOverflowHidden { /* Firefox - issue media-queries or screensize */
		overflow: visible !important;
	}



body#tinymce { /*iframebody*/
	padding: 5px; /*wichtig für randabstand im eingabetextfeld!*/
}


/*
	padding soll bei border-box bei #seite nie prozentuell angegeben werden. am besten padding: 0 und dann padding über #seitencontent steuern
	#seite sollte nur die volle breite des inhalts inkl. dem "virtuellen und unsichtbaren" rand zum gerät hin enthalten.
*/
#seite {
	min-width: 320px; /*wichtig wegen mobiler geräte, der max bereich.*/
	/*max-width: 782px;*/ /* =100% ... 768 seitencontentbreite + 2*7px(2*1%)padding bei seitencontent -> also wie wenn ehemalige seite 768 breit gewesen wäre*/ 
	max-width: 1224px; /* =100% ... 1200 seitencontentbreite + 2*12px(2*1%)padding bei seitencontent*/
	padding: 0%;/*wegen randabstand responsive*/
	margin: 0 auto 0 auto;
	text-align: left;
}
/*
	seitencontent löst das frühere seitenelement ab.
	seitencontent soll nur den sichtbaren bereich enthalten.
	entweder width:100% und % padding wird nach innen einfach abgezogen
	oder width 98% und %margin wird außen draufgerechnet
*/
#seite #seitencontent {
	position: relative;
	
	/*entweder*/
	width: 100%; /*(=768w + 2*7p)*/
	margin: 0; /* 1%*/ /*1% von weite von #seitencontent (also relativ zur weite). wird der contentweite hinzuaddiert*/	
	padding: 0 1% 15px 1%; /*padding: 0 1% 15px 1%;*/ /*1% von weite von #seitencontent (also relativ zur weite). wird den 100% der contentweite abgezogen*/

	/*oder*/
	/*width: 98%;*/ 
	/*margin: 0 1% 1% 1%;*/ /* 1%*/ /*1% von weite von #seitencontent (also relativ zur weite). wird der contentweite hinzuaddiert*/
	/*padding: 0 0 15px 0;*/ /*1% von weite von #seitencontent (also relativ zur weite). wird den 100% der contentweite abgezogen*/
		
	/* background-color: #99CC99; /**/
}



/*wrapper*/
/*box zentrieren/div zentrieren -> <div class="wrapCenter1"><div class="wrapCenter2">[zentrierter content]</div></div>*/
.wrapCenter1 {position: absolute; left: 50%;}
.wrapCenter2 {position: relative; left: -50%;}


/*******************/
/* Allgemeines*     /
/*******************/

h1 {
	clear:both;
	margin: 0 0 25px 0; 
	padding: 0;
	
	font-family: 'EB Garamond',serif;	
	color:#696260;
	font-weight: normal;
	
	font-size:2em; line-height:1.2em;
}


	/* h1 mit linie links & rechts */
	h1.tit_unterstrich,
	.loopMitAbstand h1,
	.loopOhneAbstand h1
	{
		margin: 0 0 50px 0; 
		display: table;
		white-space: nowrap;
		text-align: center;
	}
	h1.tit_unterstrich::before, h1.tit_unterstrich::after,
	.loopMitAbstand h1::before, .loopMitAbstand h1::after,
	.loopOhneAbstand h1::before, .loopOhneAbstand h1::after
	{
		content: "";
		display: table-cell;
		width: 50%;
		border-bottom:1px solid #cbc8c8;
	}



.loopOhneAbstand,
.loopMitAbstand h1
 {
	width: 100%;
	clear: both; /* nötig für kurztextige Textbausteine wegen Umbruch */
	/*float: left; führt zu zu geringer Höhe auf Startseite! Konsequenz noch nicht vollständig untersucht*/ 
}

.loopMitAbstand {
	padding-top:30px;
}

/* h1 in start-text-bausteinen */
.loopStartBoxes h1 {
	margin:11px 0 10px 0;
	width: 100%; 						/* 324 */
	padding:0; 	/* 10:324 */
	background:none; color:#85b5af; 

	font-size:1.5em; line-height:1.25em;
	text-decoration:underline;

	display:block;
	white-space:normal;
	text-align:left;
}

	.loopStartBoxes h1::before, .loopStartBoxes h1::after {
		border:0 none;
		display: block;
		width: 100%;
	}

h2{
	padding: 0; 
	clear: left; 	

	font-family: 'EB Garamond',serif;
	font-size:1.5em; line-height:1.25em; /* 24px/30px */
}

h2.lead, p.lead {
	padding: 0;
	clear: left; 	

	font-family: Verdana,serif;
	font-size:1em; line-height:1.5em; /* 16px/24px */
	font-weight:bold; color:#696260;
}
	h2,
	#tinymce h2 { /*detailseiten-zwischenüberschriften*/
		margin-top: 19px;
		margin-bottom: 11px;
		font-weight: normal; 
	}
	/* Lead */
	h2.lead, p.lead,
	#tinymce h2.lead, #tinymce p.lead {
		margin-top: 0;
		margin-bottom: 16px;
		color: #5b5452;		
	}
	h2.lead, p.lead,
	#tinymce h2.lead, #tinymce p.lead,
	.textbaustein div.loopText p { /*'neu1234 nochNach0799ZuMigrieren vollflaechenclick*/

	}	
	.loopContainer h2, 
	dl h2 {
		margin: 0;
		clear: none;
		font-size: 1em;
	}
	h2.anmeldeformular { /*angehängte formulare*/
		margin-top: 25px;
	}

	h2 a:link, h2 a:visited {
		text-decoration: none;
		color: #595959;
	}
	/*focus wegen ie10 - back weg*/
	h2 a:hover, h2 a:active {
		text-decoration: underline;
	}

h3 {
	margin: 0 0 8px 0;
	padding: 0;
	clear: left;
	/* font-size: 1.2em; */
}
	h3.datum {
		margin: 0 0 8px 0;
		padding: 0;
		/*font-size: 1.1em; line-height: 1.4em;*/
	}

h5 {
	font-size: 1.0em; line-height: 1.2em;
}

	/*Navigations-h5 (navLeft und verlinkte Überschriften in Teaser)*/
	h5 a {
		/*font-size: 13px; line-height:15px;*/
	}

	h5 a:link, h5 a:visited {
		text-decoration: none;
		color: #191818;
	}

	h5 a:hover, h5 a:active {
		text-decoration: underline;
		color: #000000;
	}



dl {
	width: 100%; 
	margin: 0 0 20px 0;
	float: left;
}

	dt {
		margin: 0 0 3px 0;
		clear: left;
		/*font-size: 1.2em; font-weight: bold;*/
	}

	
	dt a:link, dt a:visited {
		text-decoration: none;
		color:#324249;
	}

	dd {
		width: 79.899497%; /* 318px bezogen auf 398px */
		margin: 0 0 20px 0;
		float: left;
	}

	dt .picPreview {
		width: 17.085427%; /* 68/398 */
		margin: 3px 2.5125628% 20px 0; /* 10px */
		float: left; 
		border: 0;
		
	}
	

	
	img.picPreview.feedImg { /*extern eingebundene rss feeds*/
		width: 68px;
	}
	
	dd.noPic {
		width: 100%;
	}



p {
	margin: 0 0 12px 0; 
	padding: 0;
	/*font-size: 1.2em;*/ /*Achtung: selbe font-size auch dem picContainer zuweisen*/
	/*text-align: left;*/
	/* clear:left; verträgt sich nicht mit Kontaktformular */
}
	p.abstand {
		font-size: 1px; line-height: 0.3em;
		clear: left;
	}
	p.abstandgross {
		height: 30px;
	}	
	.loopContainer p, 
	dd p {
		margin-bottom: 3px;
	}
	
	#colRight p, 
	#colLeft p {
		margin: 0 8px 10px 8px;
		color:#585555;
	}

	#colDynPage p {
		/* clear:left; verträgt sich nicht mit Kontaktformular */
	}
		
	.teaserBox p { /*teaserbox*/
	}


	.picDetailInternP, 
	.picDetailContainerP, 
	#colRight .picDetailContainerP { 
		display: block;
		margin: 0 0 10px 0; 
		padding: 0 0 5px 0;
		/*font-size: 1em; line-height: 1.2em;*/
		font-weight: normal; 
	}	
	.picDetailContainerMini { /*um Minibilder*/
	} 

	p.erweiterteSuche {
		height: 1.7em;
		margin: -3px 0 0 0; 
		padding: 0;
		 
		font-weight: bold;
		
		background: #BFBEBE;
		background-image: url(../pic/erweitertesuche.gif);
	}

	p.erweiterteSuche img {
		position: absolute;
		margin-top: 0.1em;
		margin-left: 15.3em; 
	}




/* "normale" Links */
a:link {
	color: #85b5af;
}
a:visited {
	color: #85b5af;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}

	/*+++++++++++++++++++++++++++
	Zeichen/Grafiken, die hinter internen/externen mehr-Links angefügt werden
	Hexadezimalzeichen möglich z.B. BB -> \00BB
	Grafiken möglich url()
	Statischer Text möglich " "
	++++++++++++++++++++++++++++*/
	.mehr a:after {
		/*content: " "url(../pic/arrow1.gif);*/ /*leerzeichen + grafik*/
		/*content: " \00BB";*/
		/*content: " \203A";*/
		/*content: " >"; */
	}
	
	.mehr a:before{
		/*content: " "url(../pic/arrow1.gif);*/ /*leerzeichen + grafik*/
		/*content: " \00BB";*/
		/*content: " \203A";*/
		/*content: " _ ";*/
	}

	/*'iCalendar*/
	.mehr.outlook a:after {
		/*content: " \00BB";*/
	}	
	
	.mehr a[target="_blank"]:after {
		/*content: " \00BB";*/
	}
	
	#colDetailPage .mehr a:after,
	#tinymce .mehr a:after { /*damit auf Detailseiten dokUrls keine Linkzeichen erhalten*/
		/*content: "";*/
	}
	
	.mehr a[class="dokicon"]:after, 
	.mehr a[class *="dokicon"]:after { /*damit bei Links, denen bereits dokimages ("icon") zugeordnet sind, keine Zeichen hinzugefügt werden bzw eine der zugeordneten Klassen dokicon lautet*/
		content: "";
	}

	.mehr a:link, .mehr a:visited,
	.zurueck a:link, .zurueck a:visited {
	}
	/*'iCalendar und linke/rechteSpalten mehr-links*/
	.mehr.outlook a:link, .mehr.outlook a:visited, .mehr.outlook a:hover, .mehr.outlook a:active,
	#colRight .mehr a:link, #colRight .mehr a:visited,
	#colLeft .mehr a:link, #colLeft .mehr a:visited	 {
		padding-left: 0;
	}

	.zurueck a:link, .zurueck a:visited {
		padding-left: 11px;
		background-image: url(../pic/zurueck_pfeil.gif); background-position: left; background-repeat:no-repeat;
	}
	.mehr a:hover, .mehr a:active,
	.zurueck a:hover, .zurueck a:active	{
		text-decoration: underline;
	}

a.pfeil, 
#colRight a.pfeil {
	padding-left: 15px;
	font-weight: bold;
	text-decoration:underline;
	/*background-image:url(../pic/mehr_pfeil.gif); background-position: left; background-repeat:no-repeat;*/
}

.erweiterteSuche a:link, .erweiterteSuche a:visited {
	display: block;
	padding: 3px 0 0 10px;
	text-decoration: none;
	color: #FFF; 
}

.erweiterteSuche a:hover, .erweiterteSuche a:active {
	color: #000;
}

img {
	margin: 0; 
	padding: 0; 
	border: 0 none;
}

img.icon {
	/* position: relative; top:5px; */
	margin: 2px 0 2px 0; 
	padding: 0 0 0 5px;
	vertical-align: middle;
}

/* Mouse-Over-Effekt Schwarz Weiß */
img {
 
  -webkit-transition: all 1s ease;
	 -moz-transition: all 1s ease;
	   -o-transition: all 1s ease;
	  -ms-transition: all 1s ease;
		  transition: all 1s ease;
}
 
a:hover img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}

/* Listen */
/*styles nur in untercontainern wie zb colInhalt definieren, wegen tinymce*/
ul {

}


ol {}


#colInhalt div.mehr ul { /*404*/
	list-style: none;
	list-style-type: none;
	/*font-size: 14px; line-height: 1.4em;*/
}

#colGanzeBreite ul, 
#colInhalt ul { /*wichtig: clearboth darf nicht bei tinymce sein! #tinymceX ul*/
	/* clear: both; */ /*wichtig für umbruch falls liste direkt nach h1 innerhalb einer textbausteinloop zB auf der Startseite vorkommt; */
}

ul li {} /*angaben nur in bestimmten untercontainern, sonst zeigt es im tinymce falsche styles!*/	
ul ul {} /*angaben nur in bestimmten untercontainern, sonst zeigt es im tinymce falsche styles!*/
ol {}    /*angaben nur in bestimmten untercontainern, sonst zeigt es im tinymce falsche styles!*/
ol li {} /*angaben nur in bestimmten untercontainern, sonst zeigt es im tinymce falsche styles!*/

#colInhalt ul li {

}
#colInhalt ul.loopListe li {

}


	
#colInhalt ol,
#tinymce ol {
	margin: 8px 0 15px 30px;
	padding-left: 0;
}
#colInhalt ol li,
#tinymce ol li {
	margin: 0;
	padding-left: 0px;
	/*font-size: 1.25em; line-height: 1.3em;*/
}

/*Aufzählung/Verzeichnis der Subseiten auf Dynpage-Übersichtsseiten*/
#colInhalt ul.subsiteEnumeration,
#tinymce ul.subsiteEnumeration {
	margin-top: 16px;
}
#colInhalt ul.subsiteEnumeration li a,
#tinymce ul.subsiteEnumeration li a {
	font-weight: bold;
}
#colInhalt ul.subsiteEnumeration li a:link, #colInhalt ul.subsiteEnumeration li a:active,
#tinymce ul.subsiteEnumeration li a:link, #tinymce ul.subsiteEnumeration li a:active {
	color: #006666; /*evtl weg*/
}
#colInhalt ul.subsiteEnumeration li a:hover, #colInhalt ul.subsiteEnumeration li a:visited,
#tinymce ul.subsiteEnumeration li a:hover, #tinymce ul.subsiteEnumeration li a:visited {
	color: #003399; /*evtl weg*/
}

sub, sup {
	line-height: 0;
}
ul sup {
	font-size: 0.6em; 
	vertical-align: super;
}

/* Clear */
.clr {
	clear: both; 
	line-height:1px;
}
.clrLeft {
	clear: left;
}
.clrRight {
	clear: right;
}
.clrBothPlain {
	clear: both;
}


strong {
	font-weight: bold;
}
em {
	font-style: italic;
}

.grauFett, 
.textHi, 
.textError {
	font-weight: bold;
	color: #171717;
} 

.textError {
	color: #C00404;
}	

#metaNavigation {
	position: absolute;
	margin-left: -10000px;
}

/*
hinweis, damit ein element die HLHE der inneren elemente nimmt, kann man statt overflow: visible auch folgendes machen.
angenommen sitepart ist das element, das sich die höhe nicht nimmt, weil es zb gefloatet ist. dann...
*/
.sitepart {
	/*...*/
	}
	.sitepart:after {/*so gilt containerhöhe auch bei sNav, aber megamenu geht trotzdem wichtig für höhe, aber achtung, nicht beim megamenu*/
		clear: both;
		content: "";
		display: block;
		line-height: 0;
		height: 0;
	}


/*******************************************/
/* Kopfbereich mit Sprachauswahl und Image */
/*******************************************/
#kopf {	
	position: relative;
	float: left; display: inline; /*overflow: visible;*/
	width: 100%;
	height:180px;
	margin: 0; /*margin wie containerbox padding hat, falls box verwendet wird*/
	padding: 25px 0 0 0;
	background:#FFF;
 }

	#kopfImage {
		/*position: relative; */ /*damit darin kopfImage absolut positioniert werden kann*/
		width: 100%;/*w=768px/h=160px*/
		margin: 0; 
		padding: 0;
		float: left; /*display: inline*/
	}
	
	
		#slideshow {
			position:relative;
			clear:both;
			/*background: url(../pic/kopf_image/back_kopfimage.jpg)*//*wenn slides noch nicht geladen*/
		}
		#slideshow img {
			position: absolute;
			display: none;
		}
		#slideshow img.start {
			display: block;
		}


	#kopfLogo {
		position: relative;
		float:left;
		width: 20.416666%; /* 245/1200 */
		min-width:245px; display:block;
	}
		#kopfLogo a {
			display: block;
			margin: 0;
			padding: 0;
			position: relative;
			line-height: 0;
		}
		#kopfLogo img {
			width: 100%;
			padding: 0;
		}

	#topNavigation {
		
		position: absolute; top: 0; right: 0;
		width: auto;
		margin: 0.5% 0 0 0.5%;
		padding: 0.5%;		
		
		background-color: #99FF99;/*weg*/
	}
	
		#topNavigation p {
			margin-bottom: 0;
		}

		#topNavigation a:link, #topNavigation a:visited {
			color: #6E6E6E; 
			text-decoration: none; 
			font-weight:bold;
		}
		#topNavigation a:hover, #topNavigation a:active {
			color: #000000;
		}

/*
++++++++++++
Navigation
++++++++++++++
*/
#navMain, #navLeft, #navRight {

}

#navMain {
	float:right;
}

#navLeft, #navRight {
	padding-top: 10px; 
}

#navLeft { /* teaserbox: nötig, da sonst die teaser ins menü fließen */
	float: none; 
}

/*
Highlight (ehem durch navigationHi())
*/
/* Aktiv-Zustand (inc_navigation_hi.asp) */
#topNavigation a.navHi,
#topNavigation li a.navHi,
#topNavigation li.navHi a,
#navMain li > a.navHi,
#navMain li.navHi > a,
#colRight h5.navHi,
#colRight li > a.navHi,
#colRight li.navHi > a {
	color: #696260;
}


/*++++++++++++
containerbox bsp pj1003 u 1433 minisplash
++++++++++++++*/
#containerbox, #containerbox_oben, #containerbox_unten {
	position: relative; /*position relativ führt im IE6 dazu, dass navLeft nicht angezeigt wird, aber nur, wenn nicht als ul-li gelöst*/
	clear: both;	
}
/*falls containerbox mit schatten*/	
#containerbox {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
}
#containerbox_oben {	
}
#containerbox_unten {
}

/********************/
/* Linke Spalte     */
/********************/
/* nicht vorhanden */


/********************/
/* Rechte Spalte     */
/********************/
#colRight {
	position: relative;
	width: 30%;			/* 300px; */
	margin: 0 0 0 5%; 	/* 50px;  */
	padding: 0 0 0 0;  
	float: left;
	text-align: center;
	}
	#colDetailPage #colRight {
		/*background-image: none;*/
	}
	#colRight h5 {
		margin: 0;
	}

	#colRight ul {
		padding-left: 15px;
		margin-bottom: 5px;
		text-align: left;
	}
	#colRight ul li {
	}

	/* "normale" Links */
	#colRight ul a:link, #colRight ul a:visited {
		color: #4772A5; 
		text-decoration:none;
	}
	
	#colRight ul a:hover, #colRight ul a:active {
		color: #000000; 
		text-decoration:underline;
	}

	#picContainer {	/*umschließt alle Bilder in der colRight*/
		/*font-size: 1.2em;*/ /*wichtig für Bildbeschreibungstext anstelle der Formatierung des umgebenden p bei zugeordneten Bildern */
	}

/*
*************
TEASERboxen
*************
*/
.teaserGesamt {
	position: relative;
	/*margin-top: 10px;*/
	overflow: auto; /*damit das element eine höhe erhält*/
	}
	#colRight .teaserGesamt { /*teaserbox*/
	}
	#colLeft .teaserGesamt { /*teaserbox*/
	}		
	.teaserBox {
		position: relative;
		margin: 0;
		padding: 0;
		border: 1px solid #D7E0EC;
		text-align: left;
		/*font-size: 1.3em; line-height: 1.5em;*/
		background-color:#F2F2F2;
		overflow: auto; /*damit das element eine höhe erhält*/	
	}
	#colRight .teaserBox { /*teaserbox*/
	} 
	#colLeft .teaserBox { /*teaserbox*/
	} 	
	.teaserBox h5 { /*teaserbox*/
		margin: 0;
		padding-top: 10px;
		padding-bottom: 5px;
		text-align: center;
	}
	.teaserBox img {
		max-width: 100%;
	}
	.teaserBox .picPreview { /* teaserbox */
		margin: 4px 0; 
		border: 0 none;
		text-align: center;
		vertical-align: middle;	
	}
	.teaserBox ul { /*teaserbox*/
		margin: 0;
		padding: 3px 10px 2px 10px;
		list-style-position: outside;
		text-align: left;
		/*font-size: 0.85em; line-height: 1.25em;*/
	}
	/* damit die banner nicht unten noch einen div rand erhalten, falls sie verlinkt sind */
	.teaserBox .bannerlink { /*teaserbox*/
		line-height: 0;
		font-size: 0;	
	}
	.teaserGesamt .picFullTeaser { /*teaserbox*/
		width:100%; 
		padding: 0px;
	}
	.teaserGesamt .userStyle1, .teaserGesamt .userStyle1 { /*teaserbox-style*/
		background-color: #FFCC66;
	}
	.teaserGesamt .eventdate { /*'teaser-termindatum-aus- oder einblenden*/
		/*display: none;*/
	}
					
	.teaserBox a:link, .teaserBox a:visited, .teaserBox a:hover, .teaserBox a:active {
		color: #000000;
		text-decoration: underline;
	}	
	.teaserBox a:link, .teaserBox a:visited {
		color: #6E6E6E;
		text-decoration: underline;
	}	
	.teaserBox h5 a:link, .teaserBox h5 a:visited, .teaserBox h5 a:active, .teaserBox h5 a:hover {
		display: block; /*feed-symbol wird so aber nicht mehr daneben sondern darunter angezeigt*/ /*display: block;*/
	}
	.teaserBox .nurLink { /*teaserbox*/
		text-align: center;
	}	
	.teaserBox .nurLink a:link, .teaserBox .nurLink a:visited { /*teaserbox*/
		color: #000000; text-decoration: none;
	}
	.teaserBox .nurLink a:hover, .teaserBox .nurLink a:active { /*teaserbox*/
		color: #5D8EC1; text-decoration: underline;
	}
	
	#colRight #teasercontentEmpty {
		margin-top: -28px;
	}	


/*****************************************/
/* Inhalt normal: mit colRight           */
/*****************************************/

#colInhalt {
	position: relative;
	float: left; display: block;
	width: 65%; /*=padding right bei #colDynPage #colInhalt*//* 398px bezogen auf 590px; */
	margin: 0 0 50px 0;
	padding: 0; /* 366 */
}

	#colInhalt.ganzeBreite  {
		width:100%;
	}

#colInhalt.ganzeBreite > h2.lead, #colInhalt.ganzeBreite > p,  #colInhalt.ganzeBreite > ul {
	max-width:580px; /*text-align:center;*/
	/* margin-left:auto; margin-right:auto; */
	/* text-align:center; */ /*justify;*/
	max-width:790px;
}


#colInhalt > ul,
#tinymce > ul,
#colInhalt ul.feed-list { /*weg nur temporär eingebaut damit man im arztpackage noch übersichten sieht und text nicht in der wurscht daher kommt.*/
	margin: 8px 0 15px 0;
	padding-left: 0;
	list-style-type: square; list-style-position: outside; list-style-image: none; 
	/*font-size: 1.2em; line-height: 1.5em;*/
}
#colInhalt > ul,
.loopMenüpunkte > ul
{/*wichtig:nicht tinymce!*/
	overflow: hidden; /*overflow hidden: damit das element eine höhe erhält*/
	margin-bottom:15px;
}

#colInhalt > ul > li,
#tinymce > ul > li,
.loopMenüpunkte > ul > li
{ 
		margin: 0 0 2px 0;
		padding-left: 40px;
		background-image: url(../pic/li-punkt.png); background-repeat: no-repeat; background-position: 7px 8px;
}
#colInhalt > ol,
#tinymce > ol {
	list-style: decimal;
}


#colInhaltRahmenUnten, 
#colInhaltRahmenOben {
	clear: both;
}


#sieSindHier, 
#sieSindHierBottom,
#sieSindHierBottomV2 {
	position: relative;
	float: left; display: inline; /*IE6problem: doublemargin*/
	width: 100%;
	height: 50px;
	margin: 0;
	padding:12px 0 0 0; 
	font-family:Verdana;
	text-transform:lowercase;
	/*font-size:1.6em; line-height:1.4em;*/
}

	#startseite #sieSindHier {
		color:transparent; /* kein SieSindHier auf Startseite */
	}


#sieSindHierBottom {
	margin: 10px 0 15px 0; text-align:left;
}
#sieSindHierBottomV2 {
	width: auto;
	margin: 0 0 0 20px;
	padding: 0; 
	text-align: left;
}

#sieSindHier .dot,
#sieSindHierBottom .dot {
	/*standardfontsize: 12px zu 14px bei siesindhier*/
	font-size: 1em; width: 1em; display: inline-block; /*=font-size: 11px;line-height:17px -> w:11px;h:17px;*/
	margin-left: 0.091em; margin-right: 0.091em; /*=1px*/
	padding: 0;
	vertical-align: bottom;	
	text-align: center;
	color:#7faba5;
}

	#sieSindHierBottom a {
		margin:5px;
	}

	#sieSindHier a:link, #sieSindHier a:visited,
	#sieSindHierBottom a:link, #sieSindHierBottom a:visited,
	#sieSindHierBottomV2 a:link, #sieSindHierBottomV2 a:visited {
		color: #7faba5;
		text-decoration: none;
	}
	#sieSindHier a:hover, #sieSindHier a:active,
	#sieSindHierBottom a:hover, #sieSindHierBottom a:active,
	#sieSindHierBottomV2 a:hover, #sieSindHierBottomV2 a:active {
		color: #000000;
		text-decoration: none;
	}
	
#fussZeile, #fussNavigation {
	clear: both;
	width: 100%; 
	margin: 0px auto 0px auto;
	padding: 0;
	background: #8cbdb6;
	text-align: center;
	overflow: auto;
}

	#fussZeile {
		margin-top:-20px; position:absolute;
	}
	
	#fussNavigation{
		max-width:1020px;
		padding:0 1% 0 1%;
		margin-top:25px;
	}
	
	#fussNavigation > p {
		display: block; float: left; display: inline;
		width: 30%;
		margin: 0;
		text-align:left;
	}
	
	#fussNavigation .spalte_1 {
	}
	#fussNavigation .spalte_2 {
		margin-left:5%;
		margin-right:5%;
	}
	#fussNavigation .spalte_3 {
	}
	
	#fussNavigation > p > a {
		display: block;
		text-decoration:none;
		font-weight:normal;
		font-size:1.6em; line-height:2.25em;
		text-transform:lowercase;
	}
	
		#fussNavigation > p > a::before {
			content: "_ ";
		}
	
		#fussNavigation > p > a.main::before {
			content: "";
		}
	
		#fussNavigation > p > .abstand {
			margin-top:36px;
		}
	
		#fussNavigation > p > a.main:link, #fussNavigation > p > a.main:visited {
			color:#FFF;
		}
		#fussNavigation > p > a:link, #fussNavigation > p > a:visited {
			color:#d3f1ec;
		}
	
		#fussNavigation > p > a:hover, #fussNavigation > p > a:active,
		#fussNavigation > p > a.main:hover, #fussNavigation > p > a.main:active {
			color:#000;		
		}
	
	#backTop {
		float: right;
		text-align: right;
	}

	#interactLink {
		width: 100%;
		margin-top: 15px; margin-bottom:20px;
		height: 15px;
		text-align: center;
		font-size: 1.4em;
	}
		#interactLink a:link, #interactLink a:visited {
			text-decoration: none;
			color:#b2d8d2;
		}
		#interactLink a:hover {
			color:#000;
		}

.mehr, 
.zurueck, 
.blaettern {
	margin: 0 0 5px 0;

}
	.mehr {
		display: block; /* wegen IE6*/
		margin-bottom: 0px;
		text-align: left; 
	}
	/*iCalendar*/
	.mehr.outlook {
		display: block; /* wegen IE6*/
		float: left;	
		margin-bottom: 16px;
		text-align: left; 
	}	
	.zurueck {
		text-align: left;
		clear: left;
	}
	.blaettern {
		float: left; /*display: inline;*/
		width: 100%;
		margin-top: 20px;
		clear: both; 
		font-weight: bold;
	}
	/*'detailblaettern*/
	.blaettern .vorher,
	.blaettern .nachher {
		width: 25%;
	}
	.blaettern .seiteninfo {
		width: 50%;
	}
	.blaettern .vorher {
		float: left; /*display: inline;*/
		text-align: left;
	}
	.blaettern .seiteninfo {
		float: left; /*display: inline;*/
		text-align: center;
	}
	.blaettern .nachher {
		float: right; /*display: inline;*/
		text-align: right;
	}

	.mehr img {
	}

.datum {
	float: left; /*display: inline;*/
	margin: 0;
	font-weight: bold;
	color: #4A626C;
}

.loop {
	/* LoopStyle für eingebundene Loops: Abstand nach oben und unten */
	margin: 20px 0 20px 0; 
	clear: left; /*float: left;*/
}

.loop .picGalerie { /*damit text unterhalb einer bildergalerie normal weitergeht 12.11.28*/
	float: left; display: inline;
	margin: 0;
}

.loopOhneAbstand {
	/* LoopStyle für Loops am Seitenbeginn */
	}
	
	#colRight .loopOhneAbstand,
	#colRight .loopMitAbstand,
	#colLeft .loopOhneAbstand {
		overflow: auto; /*damit das element eine höhe erhält*/
	}

.loopStartBoxes {
	/* LoopStyle für TextbausteinLoops in Boxenform */
	margin-bottom: 0px;
	/*overflow: hidden;*/
	float:left; display:inline;/*wichtig, damit es sich die höhe nimmt*/
}

	.loopStartBoxes > * { /*'neu1234*/ /*'neu1234 nochNach0799ZuMigrieren vollflaechenclick*/
		/* clear:left; */
		float:left;
		display: block; padding:0px; margin:0 0 20px 0;
		width:30%; min-height:350px; /* 300:1000 */
		line-height:0px;
		text-decoration: none;
	}	

		.loopStartBoxes > *:nth-child(3n+1)  	/* jeder 1. Baustein in 3er-Zeile */ {
			clear:both;
		}
		.loopStartBoxes > *:nth-child(3n+2)  	/* jeder 2. Baustein in 3er-Zeile */ {
			margin-left:5%; margin-right:5%; 	/* 50:1000 */
		}

		.loopStartBoxes > *.missingNth1 { 		/* jeder 1. Baustein in 3er-Zeile für IE-8 (vgl. inc_js_und_css.asp) */
			clear:both;
		}
		.loopStartBoxes > *.missingNth2 { 		/* jeder 2. Baustein in 3er-Zeile für IE-8 (vgl. inc_js_und_css.asp) */
			margin-left:5%; margin-right:5; 	/* 50:1000 */
		}

		.loopStartBoxes a img {
			/*
			opacity: .99;
			*/
		}
		
		.loopStartBoxes a:hover img {
			opacity: .7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70);				
		}
	
		.loopStartBoxes a:hover h1 {
			color:#5b5452;
		}

	.loopStartBoxes p {
		width:100%;	padding:0 0 0 0; margin:0;
		font-size:1.0em; line-height:1.5em;
		color:#5b5452;
	}

	/* Mouse-Over-Effekt Schwarz Weiß */
	img {
	 
	  -webkit-transition: all 1s ease;
		 -moz-transition: all 1s ease;
		   -o-transition: all 1s ease;
		  -ms-transition: all 1s ease;
			  transition: all 1s ease;
	}
	 
	a:hover img {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: gray;
	}


ul.loopListe {
	/* LoopStyle für sonstige Loops */
	width:100%;
}

	.loopListe li {
	}
	
	.loopListe li.mehr {

	}

	.loopListe li.mehr a {
		text-align:center; text-decoration:underline;
	}


	.loopListe li a,
	.textbaustein, /*'neu1234 nochNach0799ZuMigrieren vollflaechenclick*/
	.textbaustein a { /*'neu1234 nochNach0799ZuMigrieren vollflaechenclick*/ 
		clear:left; float:left; width:100%;
		display: block; padding:0px; 
		text-decoration:none; /* GoogleChrome */
		margin-bottom:10px; /* 40+10 */
	}

	.loopListe li img {
		float:left;
		width:18.5%; /* 185px */
		margin:0 0 40px 0; /* +10px durch loopListe a */
	}

	.loopListe li img {
		opacitiy: .99;
	}

	.loopListe li a:hover img {
		opacity: .7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70);
	}	

	.loopListe li div.loopText {
		float:left;
		width:79%; 			/* 790px */ 
		margin:0 0 0 2.5%; 	/* 25px */ 
		padding:0px;
	}


	.loopListe li div.loopText h2 {
		clear:left;
		margin:0px 0 10px 0; padding:0px;
		font-weight:normal;
	}

	.loopListe li a div.loopText h2 {
		text-decoration:underline;
		color:#85b5af;
	}

	.loopListe li a:hover div.loopText h2 {
		color:#5b5452;
	}

	.loopListe li div.loopText p { 
		clear:left; 
		display:table;
		color:#5b5452;
	}

	.loopListe li div.loopText p.datum {
		margin:0 0 12px 0;
		font-weight:normal; 
		color:#5b5452;
	}

	.loopListe li a div.loopText p.mehr {
	}		
	.loopListe li a div.loopText p.mehr,
	.loopListe li a:hover div.loopText p.mehr,
	.loopListe li a:hover div.loopText p.outlook {
	}
	.loopListe li a div.loopText p.outlook:hover {
	}

.dot h1 { /* vgl. h2 */
	margin-top: 15px; 
	margin-bottom: 8px; 
	padding: 0px;
	border-bottom: 1px dotted #777777;	
	/*font-size: 1.3em; line-height: 1.3em; */
	color:#2F2F2F;
}

/**********************************/
/* Inhalt inkl. colRight          */
/**********************************/
#colGanzeBreite, 
#colDynPage, 
#colDetailPage {
	/* 1000 Pixel bis Freiraum aufgebraucht */
	width: 100%; max-width:1024px;
	margin:0px auto 0 auto;
	
	padding:0px 1% 0px 1%;

	/* Standard-Schriftgröße */
	font-size:1.6em; line-height:1.5em; /* 16px/24px */
}

/* Pseudo colRight - auch picDetailContainer beachten */
#colDynPage #colInhalt {
	/*width: 65%;*/ 			/* 650px/1000 	*/
	/*padding-right: 32.542372%;*/ 	/* 192px; 175w+17m			*/
	width: 100%;/*evtl nur 100% wenn colLeft nicht im projekt vorhanden ist*/
	padding-right: 35%;/*calc(100%-67.457627%); *//*=100-67.457627%*/
}

/********************/
/* Table:           */
/********************/
table.tabreset { /*cellpadding/cellspacing/valign*/
	border-collapse: collapse; border-spacing: 0; /*ersetzt cellspacing="0" */
	padding: 0; /*ersetzt cellpadding="0"*/
	margin: 0 auto; /*align (center)*/
}
table.tabreset th,
table.tabreset td { /*ersetzt (so gut wie) valign*/
	vertical-align: top;
}
td.tdl {
	text-align: left; /*align="left"*/
}
td.tdr {
	text-align: right; /*align="right"*/
}
td.tdc {
	text-align: center; /*align="center"*/
	margin: 0 auto;
}

table { 
	border-collapse: collapse; border-spacing: 0; /*ersetzt cellspacing="0" */
}

table td {
	vertical-align: top; /*valign=top*/
	padding: 0px; /*ersetzt cellpadding="0"*/
	/*font-size: 1.2em;*/
}
.valignMiddle {
	vertical-align: middle;
}


table.vertikal tr td:first-child, 
table.horizontal tr:first-child td { /*linke spalten hervorheben bzw. erste zeilen hervorheben*/
	font-weight: bold;
	color: #333;
}

/********************/
/* Bilder           */
/********************/

/* Positionierung ausserhalb colInhalt in Pseudo-ColRight oder colRight*/
.picDetailContainer {
	float: right; display: inline;
	width: 46.15384%; /* 300px bezogen auf 650px  */
	/* rechter Rand = Bildbreite + padding+rechterRand(colInhalt) als Minuswert*/
	/* linker Rand = rechterRand colInhalt, damit in IE und Firefox gleich*/
	margin: 0 -53.84615% 0 7.692308%; /* 300px+50px/650 , 50px */
	padding: 0;
	clear: right;
	/* auch #colDynPage #colInhalt beachten */
}

	#picContainer .picDetailContainer {
		width:100%;
	}

	#colRight .picDetailContainer {
		margin: 0 0 40px 0;	/* Abstand oben wegen dynamischer Seiten */
	}

/* Container für Bild im Textbaustein-Loop */
.picDetail {
	float: right; /*display: inline;*/
	/* width: 26.633165%; /* 106px bezogen auf 398px */
	/* margin: 0 0 15px 3.7688442%; /* 15px */
	padding: 0; 
	border: 0px none;
	}
	
	#colDynPage .picDetail, 
	#colRight .picDetail, 
	#colDetailPage .picDetail {
		width: 100%; /* 138px; */ 
		margin: 0 0 10px 0; 
		padding: 0;
	}

	.loopStartBoxes .picDetail {
		float:none; margin:0; padding:0;
		width:100%;
	}


/* intern - Bild innerhalb des Contents anzeigen */
.picIntern {
	width: 100%; /* 398px; */
	margin: 0;	
	padding: 0; 
}

.picPreview {
}

/*minibild*/
.picMini {
	float: left; /*display: inline;*/
	width: 45.714285%;
	margin: 0 0 15px 0;
}
.picDetailContainer .first {}
.picDetailContainer .last {
	float: right; /*display: inline;*/ 
}
/*end minibild*/


/* klassische Bildgalerie, eCards */
.picGalerie {/*resp*/
	width: 100%;
	text-align: center;
	}
	
	.picGalerie ul {/*resp*/
		width: 100%;
		width: auto;
		height: auto;
		float: left; display: block;
		margin: 0 auto 0 auto;
		padding: 0;
		clear: left;
		text-align: center;		
		list-style: none;
	}	
	.picGalerie	ul li,
	.picGalerie	ul li.last {/*resp*/
		float: left; /*display: inline;*/
		width: auto;
		margin: 0;	
		padding: 0;
		background: none;
	}
	.picGalerie	ul li {/*resp*/
		width: 20.19774011299435%;/*(136+7) zu 708*/
		padding-right: 1%;/*7px;*/	
		padding-bottom: 1%;/*7px*/
	}
	.picGalerie	ul li.last {/*resp*/
		width: 19.2090395480226%;/*136 zu 708*/
		padding-right: 0;
	}
	.picGalerie	ul li .picPreview {/*resp*/
		width: 100%;
		max-width: 232px;
		max-height: 232px;		
		margin: 0;
		border: 0px none;
	}		
	.picGalerie	ul li a {/*resp*//*damit nicht zusätzlicher rand hinzukommt*/
		display: block;
		line-height: 0;
	}

	.picGalerie a:link.ecard, .picGalerie a:visited.ecard {
		display:block; 
		text-align: center;
	} 
	.picGalerie a:hover.ecard, .picGalerie a:active.ecard {
	} 


/********************/
/* Bilder allgmein  */
/********************/
img.picNull {
	margin: 0;
	padding: 0;
	border: 0 none;
}

img.picTrans {
	margin: 0;
	border: 0 none;
	background: #FFFFFF; 
	/* filter:Alpha (opacity=70); -moz-opacity:0.7; */
}

img.ecard {
	width: 396px; /*besser prozent*/
	border: 1px solid #D7E0EC; /* 366 */
}

img.thumbnail {/*Thumbnail-Bilder bei Presse in der rechten Spalte*/
	border: 0 none;
}

/*transparenu bei hover*/
a img {
	opacity: 0.99; /*damit FF nicht flackert in Kombi mit opacity und hover, muss hier 0.99 sein. 1 bzw 'nichts' führt zu flackern*/
}
a:hover img {
	opacity: 0.6;
	-moz-opacity: 0.6;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	background-color: transparent;
}


/******************************************************************/
/* Formularelemente, vgl. auch kontaktformular.css, warenkorb.css */
/******************************************************************/

/* Schriftfamilie dezidiert angeben! v.a. wegen textarea!*/
/* Schriftgröße in em, damit abhängig von default-body-Größe*/
select, input, textarea, submit, form input[type=submit], button {
	font-size: 1.1em; line-height: 1.8em; /*nicht entfernen*/
	padding:3px 10px 3px 10px;
	font-weight:normal;
}
textarea {
	line-height: 1em;
}
option {
	font-size: inherit; line-height: inherit;
}
select option { /*um zeilenhöhe auszugleichen?*/
	/*
	padding-top: 3px;
	padding-bottom: 3px;
	*/
}

form input[type=submit], button {
	-webkit-appearance: none; /*ohne dies lässt sich der button für safari nur schwer stylen mobil/iphone/ipad*/
}

	/*busabfahrtsplan start*/
	form#abfahrtsplan {
		padding: 5px 5px 0 5px;
		border: 1px solid #BDDAD6;
		background-color: #EFEFEF;
		/*font-size: 1.2em; line-height: 1.6em;*/
		}
		form#abfahrtsplan #vonplan,
		form#abfahrtsplan #bisplan {
			overflow: auto;
		}
		form#abfahrtsplan #vonplan label,
		form#abfahrtsplan #bisplan label {
			float: left; display: block; 
			width: 40px;
			/*font-size: 1em; line-height: 1.5em;*/
		}
		form#abfahrtsplan #vonplan label {
			padding-top: 3px;
		}
		form#abfahrtsplan #bisplan label {
			padding-top: 1px;
		}
		form#abfahrtsplan #std_t_start {
			width: 340px;
			/*font-size: 1em;*/
		}
		form#abfahrtsplan #stationradio {
			display: block;
			margin: 3px 0 8px 40px;
			overflow:auto;
		}
		form#abfahrtsplan input[type="radio"] {
			/*float: left; display: block;*/
			margin-top: 2px;
			margin-right:5px;		
			height: 12px;
			line-height: 12px;
			border-style: none;
		}
		form#abfahrtsplan #fahrplansenden {
			clear: both;
			text-align: right;
		} 
		form#abfahrtsplan .stadtbus {
			position: relative;
			width: 140px; 
			height: 27px;
			margin-top: 7px;
			margin-left: 40px;
			text-align: left;
		}
		form#abfahrtsplan .stadtbus img {
			position: absolute;	top: -4px; right: 0;
		}
		form#abfahrtsplan .button {
			float: right; /*display: inline*/ 
			width: 115px;
			margin: -2px 0 0 0;
		}
		form#abfahrtsplan .button input {
			border: none;
			background: none;
			font-weight: bold;
			/*font-size: 1em; line-height: 1.2em;*/
		}	
	/*busabfahrtsplan ende*/
	
	
	
	/*busabfahrtsplan vers3 start*/
	form#schedule_widget {
		padding: 5px;
		border: 1px solid #BDDAD6;
		background-color: #EFEFEF;
		/*font-size: 1.2em; line-height: 1.6em;*/
		}
		form#schedule_widget #formVonPlan,
		form#schedule_widget #formBisPlan {
			overflow: auto;
		}
		form#schedule_widget #formVonPlan label,
		form#schedule_widget #formBisPlan label {
			float: left; display: block; 
			width: 40px;
			/*font-size: 1em;	line-height: 1.5em;*/
		}
		form#schedule_widget #formVonPlan label {
			padding-top: 3px;
		}
		form#schedule_widget #formBisPlan label {
			padding-top: 1px;
		}
		form#schedule_widget #name_origin {
			width: 340px;
			/*font-size: 1em;*/
		}
		form#schedule_widget #formFahrplanSenden {
			clear: both;
			text-align: right;
			overflow: auto;
		} 
		form#schedule_widget .fahrplanbutton {
			margin: 0;
			clear: both;
			text-align: right;
			overflow: auto;
		}
		form#schedule_widget .fahrplanbutton input {
			float: right; /*display: inline;*/
			width: auto;
			padding: 0 5px;
			font-weight: bold;
			/*font-size: 0.9em; line-height: 1.2em;*/		
		}	
	/*busabfahrtsplan ende*/
		

/*form,*/
	form input {
		/*padding: 0; */
	}	

	form input,
	form select,
	form textarea {
		/*
		padding-left: 2px;
		padding-right: 2px;
		*/
		border: 1px solid #7F9DB9; /*border: 0px none; outline: 1px solid #7F9DB9;*/	
		background: #FAFAFA;
	}
		
	form input,
	form select {
		height: auto; min-height:34px;			
	}

	form select { 
	}
	
	form textarea { 
	}	


	/*laut bereastreet und webaim soll bei JEDEM focus-element (Links, Menü, Formulareingaben) ein möglichst gut sichtbares outline definiert werden, speziell für jene, die mit tastatur navigieren */
	:focus {
		/*outline: 5px ridge #7F9DB9 !important;*/ /*zu bedenken: betrifft nicht nur tastaturnav sondern auch klick auf link*/
	}
	form input:focus, 
	form textarea:focus, 
	form select:focus {
		background: #EEE; 
	}

	form option.hi {
		background: #FFBA00;	
	}


	/*
	form submit, form button, form input[type=submit] {
		width: 150px;
		border: 0 none;
	}
	*/

	label {
		display: block;
		margin: 0; 
		padding: 0;
		/*font-size:1.2em; line-height:1.9em;*/
	}

	.readonlyInput label { /*'formReadonly - label ausblenden*/ 
		/*display: none;*/
	}
	
	.readonlyInput input { /*'formReadonly*/ 
		background: #ddd !important;
		color: #777;
	}
		
	.readonlyInputFull { /*'formReadonly*/
		display: none; /*none, damit bei nicht-übergebenen parametern das themenfeld/referenzfeld nicht angezeigt wird*/
	}
	

	.button, 
	.anmeldeform .button, 
	a.button {

		width:185px;
		margin-left:auto; margin-right:auto;
		padding: 10px 20px 5px 20px;
		display:block;
		border:0px none;
	
		-webkit-border-radius: 6;
		-moz-border-radius: 6;
		border-radius: 6px;
		
		color: #ffffff;
		font-size: 1.1em;
		background: #85b5af;
		
		text-decoration: none;
		text-align:center;
		cursor: pointer;
}

		a.button {
			 margin-top:20px; 
		}

		input.button:link, input.button:visited, 
		a.button:link, a.button:visited {
			color: #ffffff;
			text-decoration: none;
		}
		input.button:hover, 
		a.button:hover {
			color: #FFF; 
			text-decoration: none;
			background-color: #000; /* background: url(../pic/button-hi.gif); */
		}

		input.button:active,
		a.button:active {
			color: #FFF; 
			text-decoration: none;
			background-color: #CCC; /* background: url(../pic/button-hi.gif); */
		}
		
		
	.anmeldeform .button {
		/* float: right; */
		/*display: inline;*/
	}
	
	.anmeldeform .auswahllisteBackground { /*form inc_anmeldeformular*/
		background: none;
	}	

.hinweisBox,
h2.alert, #tinymce h2.alert {
	display: block;
	width: 368px; 
	margin: 10px 0 10px 0;
	padding: 10px 15px 5px 15px;
	clear: left;
	color: #191916; 
	background:#F3CD55;
}

.hinweisBox h2 {
	margin-top: 0;
	color: #C00404;
} 

/*****************/
/* Indexfilter   */
/*****************/
#indexfilter {	/* Form */
	position: relative;
	width: 100%;
	margin: 0 0 18px 0;
	padding: 0 10px 10px 10px;/*padding top wird quasi durch .indexfilter-padding-top ausgeglichen*/
	clear: both; 
	background: #f6f0d0;
	}
	.indexfilter {	/* DIV */
		position: relative;
		height: auto;
		margin: 0;
		/*padding-top: 5px;*/
		padding: 10px 0 0 0;
		}
		.indexfilter:after {/*so gilt containerhöhe*/
			clear: both;
			content: "";
			display: block;
			line-height: 0;
			height: 0;
		}
	
	.indexfilterCheckbox {	/* DIV */
		float: left; display: block;
		height: 30px;
		margin: 4px 0 0 0; 
		padding-top: 0;
	}

	#indexfilter label {
		display: inline;/*wichtig damit label neben checkboxen die richtige breite erhalten - checkboxnewinsert*/
		font-weight: bold; 
		color: #595959;
	}

	#indexfilter label.produktKategorie {
		color: #000;
	}
	
	#indexfilter .button {
		margin: 0;
	}
	
	.indexfilter .formfeld label.suchsubmit { /*indexfilter form*/
		font-weight: normal;
	}
	
	#indexfilter .minderHeight { /*indexfilter form*/
		height: 20px;
		padding-top: 10px;
	}	

	.formfeld {
		float: left;
	}

	.formfeldCheckbox {
		float: left; /*display: inline;*/
		width: 190px; 
		padding-top: 10px;
		/*font-size: 1.2em; line-height:18px;*/
		color:#171717;
	}

	.formfeldCheckbox, 
	.formfeldBeschriftungAktiv {
		color: #171717;
	}

	.formfeldBeschriftungInaktiv {
		color: #B0AEA3;
	}


	.formfeldRechts {
		float: right; display: inline;
		margin-right: 10px;
	}
	
	form p {
		clear: both;
	}

	form .inputNormal {
		width: 179px;
		margin-right: 10px;
	}
	form .inputSchmal {
		width: 55px;
		margin-right: 10px;
	}

	form .selectNormal {
		width: 183px;
		margin-right: 10px;
	}
	form .selectSchmal {
		width: 57px;
		margin-right: 10px;
	}

	form .selectBreit {
		width: 202px;
		margin-right: 10px;
	}

	form .selectDoppelt {
		width: 376px;
		margin-right: 10px;
	}	
	
	form .checkbox {
		float: left;
		width: 21px;
		border: 0 none;
	}

	.formfeldCheckbox .checkbox {
		display: block;
		margin-right: 5px;
	}


/****************
	RSS-Feed Symbole ...
****************/	
.feed,
.feedFiltered { /*rss-feed-erweitert*/
	margin: 0 0 0 3px;
	padding: 0 0 0 19px;
	}
	.feed { /*rss-feed-erweitert*/	
		background: url("../pic/feed-icon-14x14.png") no-repeat 0 50%; /*color image repeat attachment position;*/
	} 
	.feedFiltered { /*rss-feed-erweitert*/
		background: url("../pic/feed-icon-14x14-half.png") no-repeat 0 50%;
	}	
	
	.feed-list { /*rss-feed-erweitert*/
		margin: 0 0 15px 15px;
		padding: 0;
		list-style-type: none;
	}
	
	.feed-list li { /*rss-feed-erweitert*/
		margin: 0 0 10px 0;
		padding: 0;
		list-style-type: none;
	}
	
	.feed-list li a { /*rss-feed-erweitert*/
		padding: 0 0 0 19px;
		background: url("../pic/feed-icon-14x14.png") no-repeat 0 50%;
		list-style-type: none;
		color: #000;
	} 	
	
	#fussZeile a.feed {
		color: #fff;
		font-weight: bold;
	}
	
	.unscheinbar { /*rss-feed-erweitert*/
		font-size: 0.7em;
		font-style: normal;
		font-weight: normal;
	}

	a:link.feed, a:visited.feed, a:link.feed, a:visited.feed,
	a:link.feedFiltered, a:visited.feedFiltered, a:link.feedFiltered, a:visited.feedFiltered { /*rss-feed-erweitert*/
		display: inline !important;
		text-decoration: none;
	}
	
	
/************************************
 404-suche und hinweistext 2013-06-26
 ***********************************/
#fehlerhandling404 #suchmaske404 {
	float: left; /*display: inline;*/ 
	width: 100%; 
	height: auto;
	margin: 0; 
	padding: 10px 0 0 0;
	clear: left;
	overflow: auto; 
	}
	#fehlerhandling404 form#formSuche404 { 
	}
	#fehlerhandling404 form#formSuche404 #suche404 {
		float: left;
		width: 48.571428%;  
		margin:5px 15px 20px 0px;
	}
	#fehlerhandling404 form#formSuche404 .button {
		margin-top: 0px !important;
		width: 185px;
	}
	#fehlerhandling404 #fehlermeldung404 #oops404 {
		font-size: 2em;
		line-height: 6em;
		text-align: right;
	}
	#fehlerhandling404 #fehlermeldung404 p.klein {
		margin-top: 25px;
	}
	#fehlerhandling404 .mehr {
		margin-top: 60px;
	}
	
	
/************************************
 Hinweistext für den User in hervorgehobener Box auf Detailseiten bei der Preview  
 ' preview_hinweis_box
 ************************************/
div#previewHinweisText {
	margin: 2px;
	padding: 2px;
	border: 2px groove #000;
	color : #000000;
	background-color: #FFFF99;
	}
	
	div#previewHinweisText h1 {
		margin: 0 0 2px 0;
		padding: 0;
		/*font-size: 1.2em; line-height: 1.4em;*/
	}

	div#previewHinweisText form input.urlTextBox {
		width: 90%;
		height: 12px;
		padding: 0;
		/*line-height: 1.2em;*/
	}

	div#previewHinweisText .textHiBereich {
		font-weight: bold;
		color: #171717;
	} 

	div#previewHinweisText table.preview_box {
		width: 100%;
		/*font-size: 1em; line-height: 1.2em;*/
	}

	div#previewHinweisText table.preview_box td {
		vertical-align: top;
	}

	div#previewHinweisText table.preview_box td.ueberschrift {
		font-variant: small-caps;
		font-weight: bold;
		/*font-size: 1.2em;*/
	}

	div#previewHinweisText table.preview_box td.bereichsbezeichnung {
		white-space: nowrap;
		vertical-align: top;
	}

	div#previewHinweisText table.preview_box td.abstandhalter {
		padding-bottom: 20px;
	}

	div#previewHinweisText table.preview_box td.linkspalte {
		width: 90%;
	}

	
/***************
iframes und Spez-Container um iframes
***************/	
iframe, object, embed { /*How To Keep Your iFrame Content Responsive with CSS*/
	max-width: 100%;
	}
	iframe {
		border: 0 none;
	}
	#uploadframe { /*iframe fileupload width:376px;height:100px;margin:0px;padding:0px;*/
		width: 376px;
		height: 104px;
		margin: 0;
		padding: 0;
		border: 0 none;	
		overflow: auto; /*scrolling=auto*/
		/*overflow: hidden;*/ /*scrolling=no*/
	}
	.responsiveMapsContainer { /*iFrame Anfahrt*/
		position: relative;
		height: 0;
		padding-bottom: 56%;
		overflow: hidden;
	}	 
	.responsiveMapsContainer iframe {  /*iFrame Anfahrt*/
		position: absolute;	top: 0;	left: 0;
		width: 100%;
		height: 100%;
	}
	.video,
	#tinymce .video { /*iFrame cms youtube*/
		position: relative;
		padding-bottom: 56%;
		height: 0;
		overflow: hidden;
		margin-bottom: 20px;
	}	 
	.video iframe,
	#tinymce .video iframe {  /*iFrame cms youtube*/
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}	

/**************
twitterfollow 
achtung IE6 -> muss responsive natürlich umgebaut werden
**************/
#socialnet {
	position: fixed; top: 37%; left: 0;/*right: 0px;*/
	
	width: 80px;
	height: 200px; /*height: auto;*/
	border: 0 none;
	
	z-index: 500;	
	
	margin-left: -52px;	
	-webkit-transition: margin 1s ease;
	-moz-transition: margin 1s ease;
	-o-transition: margin 1s ease;
	-ms-transition: margin 1s ease;
	transition: margin 1s ease;	

	background: url(../pic/social_bg_left_hidden.png) no-repeat;	
	}
	#socialnet:hover, 
	#socialnet:active {
		margin-left: 0;	
		background-image: url(../pic/social_bg_left.png);
		
	}
	#socialnet #twitterfollow {
		/*
			display: scroll;
			position: fixed; top: 43%;
			border: 0 none;
		*/
		position: absolute;	top: 22px; left: 0; /*right: 0px;*/
		z-index: 999;
	}
	#socialnet a {
		padding-bottom: 5px;
	}


/*******************
href-symbole
'hreftypico:
a[href ^="http://"] - Links, deren href-Attributwert mit http:// beginnt
a[href $=".ogg"] - Links, deren href-Attributwert auf .ogg endet
a[href *=".gzip"], a[href *=".GZIP"] - wo .gzip vorkommt 
********************/
a.dokicon, a.icondesc, a.dokiconlink, a.dokiconbildsymbol, a.dokiconroutenplaner {
	}
	p.mehr a.dokicon, a.dokicon, a.icondesc[href $=".jpg"], a.dokiconlink[target], a.dokiconbildsymbol, a.dokiconroutenplaner {
		padding: 1px 0px 1px 40px;
		position:relative;
 	}




	/* Material-Icons als Symbol für alle Attachments */

	p.mehr a.dokicon:before, p.mehr a.dokiconlink:before, p.mehr a.dokiconroutenplaner:before {
		font-family: 'Material Icons';
		position:absolute; left:8px; bottom:-1px;
		font-size:1.4em;;
		font-weight: normal;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		word-wrap: normal;
		
		/* Support for all WebKit browsers. */
		-webkit-font-smoothing: antialiased;
		/* Support for Safari and Chrome. */
		text-rendering: optimizeLegibility;
		/* Support for Firefox. */
		-moz-osx-font-smoothing: grayscale;
		/* Support for IE. */
		font-feature-settings: 'liga';

		/* underline bei IE verbergen */
		overflow:hidden;
  }


	a.dokicon:before {
		content: "file_download";
	}


	a.dokiconlink:before {
		content: 'link';
	
	}
	a.dokiconroutenplaner:before { 
		content: 'location_on';
	}

	a.icondesc[href $=".jpg"], a.dokicon[href $=".jpg"], a.dokicon[href $=".jpeg"] { /*icondesc=Presse Beschreibungstext unter Bild in der rechten Spalte*/
		/*background: url(../pic/ico_kl_jpg.gif) no-repeat center right;*/
	}
	a.thumbnail[href $=".jpg"] { /*Link um Thumbnail-Bilder bei Presse in der rechten Spalte*/
		padding: 0 0 5px 0;
		background: none !important;
	}
	a.dokiconlink[target="_blank"], a.dokiconlink[target="_self"] { /*externe Links zB auf Presseseite*/
		/*background: url(../pic/ico_kl_ext.gif) no-repeat center right;*/
	}
	a.dokiconbildsymbol[href *=".jpg"] { /*[bild]01,symbol[/bild]*/
		/*margin-right: 5px; /*damit es nicht am Text klebt, falls es nur das nakte Symbol ist*/
		/*margin-left: 5px; /*damit es nicht am Text klebt, falls es nur das nakte Symbol ist*/
		/*background: url(../pic/ico_kl_jpg.gif) no-repeat center right; */
	}
	a.dokiconroutenplaner { 
		/*background: url(../pic/ico_kl_map.gif) no-repeat center right;*/
	}
	a.dokicon[href $="typ=.iCal"], a.dokicon[href $="typ=.vCard"] { /*iCal speichern bei Termin oder vcard*/ 
		/*background: url(../pic/ico_kl_events.gif) no-repeat center right;*/
	}
	a.dokicon[href $="typ=.vcardkontakt"] { 
		/*background: url(../pic/ico_kl_vcard.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".mp3"] { /*mp3s enden noch nicht mit typ=.mp3*/
		/*background: url(../pic/ico_kl_mp3.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".flv"] { /*flvs enden noch nicht mit typ=.flv*/
		/*background: url(../pic/ico_kl_flv.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".pdf"] {
		/*background: url(../pic/ico_kl_pdf.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".png"], a.dokicon[href $=".tif"], a.dokicon[href $=".psd"] {
		/*background: url(../pic/ico_kl_Bilder.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".ppt"], a.dokicon[href $=".pps"], a.dokicon[href $=".exe"] {
		/*background: url(../pic/ico_kl_dummy.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".gif"] {
		/*background: url(../pic/ico_kl_gif.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".txt"], a.dokicon[href $=".csv"] {
		/*background: url(../pic/ico_kl_txt.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".rtf"], a.dokicon[href $=".doc"] {
		/*background: url(../pic/ico_kl_doc.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".xls"] {
		/*background: url(../pic/ico_kl_xls.gif) no-repeat center right;*/
	}
	a.dokicon[href $=".zip"] { 
		/*background: url(../pic/ico_kl_zip.gif) no-repeat center right; */
	}

.webindexbody { /*body von seiten mit iframe-einbindung forward+index+sprache/index*/
	text-align: center;
}
.webindexloops { /*body von seiten mit iframe-einbindung für suchmasch.loops index+sprache/index*/
	width: 450px; 
	margin: auto;
}

/**************
Sonstiges
***************/
.noBg {
	background: none;
}	
.attachBox {
	width: 344px;
}
.ortZusatz {
	font-weight: normal;
}
.kontaktGeoLink {
	margin-bottom: 6px;
}
.kontaktUrl {
	margin-bottom: 14px;
}
.vcardBlock {
	margin-bottom: 0;
}
.vcardlink {
	border:0 none;
}

/*'2013-07-01 browser-update - hinweis auf alte version*/
.buorg {
	padding: 15px !important;
}


/*Buttons, u.a. auch Warenkorb und Form absenden. Styles ausgegliedert, damit nicht inline. siehe speichernButton()*/
.speichernButton_Enabled {
	cursor: pointer !important;
	background-image: url(../pic/buttonwarenkorb.gif) !important;

}
.speichernButton_Disabled {
	cursor: wait !important;
	background-image: url(../pic/button-loading.gif) !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}


/*standard*/
.justDesktop {
	display: inherit; /*fuer den fall dass auch spans diese class haben*/
}
.justMobile {
	display: none;
}
/*'2013-10-24 - damit touchenabled devices trotzdem im megamenu den hauptnavigationslink erneut angezeigt(klickbar) bekommen*/
.allTouchDevices  {
	display:none;
}

#seite.deviceSupportsTouch .allTouchDevices,
#seite.deviceSupportsTouch .justMobile.allTouchDevices { 
	display: block !important;
}



/*********************
Scroll-To-Top Button -> siehe lib/scrolltotop/
**********************/



