/* Alle Styles die unter @media print definiert wurden werden nur fuer den Ausdruck der Seite verwendet, nicht zur Anzeige am Bildschirm. */
@media print {

	/* Blendet die linke Navigation aus wenn man die seite druckt.*/
	#leftNav {
		display: none!important;
	}
	.contentArea {
		margin-left: 1px!important;
	}
}

/* Alle Styles die unter @media all definiert wurden werden fuer den Ausdruck und die Anzeige an allen am Bildschirm verwendet. */
@media all {
	body {
		padding-top: 0px; /*	statt 2px / vor 13.07.2019: 5px	Positionierung des body im frameset */
		
	}

	/* Diese Klasse formatiert alle */ 
	.contentArea {
		padding-top: 17px;	/* vor 13.07.2019: 11	*/
		width: 80%; 
		float: left;
		margin-left: 150px;
		position: absolute;
	}

	/* Diese Klasse Versteckt ein Element, an dieser Klassen sollten keine Aenderungen vorgenommen werden, da diese auch unter keinen Umst�nden nicht sichtbar sind. */
	.hide {
		display: none;
		background: none; 
		z-index: -1;
		width: 0px;
		height: 0px;
	}

	.mainnav {
		margin: 20px 0px 0px 0px; /* alt war: -9px 0px 0px 0px; */
		left: 140px;
		padding: 0;
		position: absolute;
		width: 99%; 
		height: 34px; 
		background-color: white;
	}

	/* Diese Klasse sorgt dafuer dass die Pfadelemente der Navigation in einer Zeile angezeigt werden. */
	.path {
		display: inline;
		font-size: 12px; /* str eingefaerbt */ 	
	}

	/* Diese Klasse ist zustaendig die Ausgangsposition und Gestaltung der Submenueboxen zu uebernehmen. */
	.path ul{
		margin-top: 0px; 
		border: 1px outset grey; /* erzeugt einen grauen Rahmen um die Submenueboxen */
		opacity: 1; /* Sichtbarkeit der Untermenues. Werte zwischen 0 und 1 moeglich. 0 = unsichtbar; 1 = volle Sichtbarkeit */
	}

	/*
		 * Diese Klasse verschiebt alle Submenueboxen, die nach der ersten Submenuebox aufgeklappt werden um 19 Pixel nach oben, 
		 * damit das erste Element der neuen Submenuebox auf der Hoehe des aktuellen gehoverten Menuepunktes ist.
		 */
	.path li ul{
		margin-top: -19px;
	}

	/* Diese Klasse wird dazu verwendet die Submenueboxen anzuzeigen. */
	.show {
		display: block; /* Anzeigen der Submenuebox als ein Block */
		position: absolute; /* Die Position der Submenuebox soll absolut zur Position der Elternelemente sein. */
		background: #ddd; /* Hintergrundfarbe der Unterkategorien */
	}
	
	/* Diese Klasse enthaelt dich wichtigsten Einstellungen fuer die Navigation */ 
	#nav {
		/* background-image:url(../intro/images/menu_horiz_semi_22.gif); */ /* Hintergrundbild der Navigationsleiste */
		background-repeat:repeat-x; /* Horizontales Kacheln des Hintergrundbilds */
		margin-top:0px; /* vor 13.07.2019: -10 Positionierung der Navigationsleiste: Abstand oben */
		position:fixed; /*Verhindert, dass die Navigation beim Scrollen der Seite verschwindet */
		width:5400px; /* Breite der Navigationsleiste */
		/* left: expression( document.body.scrollLeft + 'px' ); /* loest Fehlermeldungen aus */
		/* top: expression( document.body.scrollTop + 'px' ); /*	loest Fehlermeldungen aus	*/
		z-index: 100;
		height: 20px;
	}

	/* Diese Klasse formatiert alle ul-Tags der Navigation */
	#nav ul {
		list-style-type: none;
		padding-left: 0px;
	}
	
	/* Diese Klasse formatiert alle li-Tags der Navigation */
	#nav li {
		padding: 0px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 2px;
		padding-bottom: 2px;
	}
	
	/* Diese Klasse legt die formate fuer alle a-Tags die sich in li-Tags befinden fuer die Navigation fest. */
	#nav li a {
		color:black; /* Schriftfarbe der Menueeintruege*/
		/* font-weight: bold; /* str	deaktiviert Schrifttyp der Menueeintraege */
		background: transparent; /* Hintergrundfarbe: Transparent, weil der Container den Hintergrund bereitstellt */
		text-decoration: none; /* Unterdrueckt dass Hyperlinks in der Navigation unterstrichen sind */
		white-space:	nowrap; /* Verhindert Zeilenumbrueche */
	}
	
	/* Diese Klasse formatiert alle Hyperlinks in li-Tags wenn mit der Mause auf den Link gezeigt wird. */
	#nav li a:hover {
		color:red; /* Schriftfarbe wird zu rot geaendert beim Draufzeigen mit der Maus.*/
	}
	
	/* Diese Klasse formatiert alle li-Tags wenn mit der Mause auf den li-Tag gezeigt wird. */
	#nav li:hover {
		background-image: url(../intro/images/menu_horiz_semi_aktiv_20.gif);	/* Hintergrundbild der Menueeintraege bei Draufzeigen mit der Maus anzeigen */
	}

	/* Damit alle Links in den Boxen der Top-Navigation die geoeffnet werden ueber die gesammte Laenger angezeit werden.*/
	.show li a {
		display: block;
	}
	
	
	/* Eigenschaften der Pfeilgrafik der Menueeintraege in den Submenueboxen, die Untereintraege besitzen */
	.mainnavArrow {
		width: 8px; /* Anzeige Breite der Grafik */
		height: 8px; /* Anzeige Hoehe der Grafik */
		border: none; /* Die Grafik soll ohne Rahmen angezeigt werden. */
		position:absolute; /* Die Position der Grafik wird absolut zum Eltern Element angegeben */
		right:9px; /* Die Grafik ist 9px vom rechten Rand des Eltern Elements entfernt.*/
		margin-top: -13px; /* Die Grafik ist um 13px nach oben verschoben. */
	}

	/* Eigenschaften der Pfeilgrafik der Menueeintraege im Navigationspfad, die Untereintraege besitzen */
	.mainnavArrowPath {
		width: 8px; /* Anzeige Breite der Grafik */
		height: 8px; /* Anzeige Hoehe der Grafik */
		border: none; /* Die Grafik soll ohne Rahmen angezeigt werden. */
		position: relative;/* Die Position der Grafik wird relative zum Eltern Element angegeben */
		left: 2px; /* Die Grafik wird um 2 px nach links verschoben und hat so mehr Abstand zum Text */
	}

	/* Diese Klasse positioniert die mannavbox, welche die Baumstruktur der Navigation beinhaltet.*/
	#mainnavBox {
		padding-bottom: 0px;
		padding-top: 0px;
		width: 150%;
	}

	/* Formatierung eines Links in der horizontalen Navigation. */
	#mainnavBox .mainnavLink {
		font-weight: normal;
	}

	/* Hervorhebung des bisher eingestellten Pfades (gelb hinterlegt) */
	#mainnavBox .bold{
		background-color: #fffa70; 
	}

	/* Diese Klasse wird im Internetexplorer dazu verwendet die Submenuboxen anzuzeigen. */
	.showIE {
		position: absolute;
		margin: 20px 0px 0px;
		display: block;
		position: absolute;
		padding-left: 0px;
		background:#ddd; 
	}

	#nav .mainnavLink div {
		left: 16px;
		position: relative;
		top: 2px;
	}

/*
 ************************ Styles fuer die linke Navigation *********************************
*/

	#leftNav { /* Positionierung der gesammten Navigation in der linken Spalte */
		background-color: #FFFFFF;		/* Farbe gesamte Leiste links */
		/* background:	url("../images/navlinks.jpg") repeat scroll 0 0 transparent; */
		float: left;
		height: 100%;
		left: 0;
		margin: 40px 31px 0px -1px;	/* alt: 20px 31px 0px -1px;	*/
		position: fixed;	/* linke Navigation wahlweise position: absolute;	position: fixed; */
		padding-top: 20px; 
		width: 140px;	/* bis 2/2013 130px */
		z-index: 50;
	}

	#leftNav ul { /* Positionierung der jeweiligen Navigations Gruppe Elternmenü und Kinder der aktuellen Ebene in der linken Spalte */
		padding: 0 10px 0 3px;	
	}

	#leftNav li { /* Die Menueeintraege sollen Raender unten und oben haben */
		border-bottom: 1px solid #E8E8E8;
		border-top: 1px solid #FFFFFF;
		list-style: none outside none;
	}
	
	#leftNav .first { /* Der erste Menueeintrag soll kein Rand oben haben */
		border-top: medium none;
	}
	
	#leftNav .last { /* Der letzte Menueeintrag soll kein Rand unten haben */
		border-bottom: medium none;
	}
	
	#leftNav .leftNavArrow { /* Positionierung der Pfeile in der horizontalen Navigation */
		height: 10px;
		left: 123px;
		margin-top: -10px;
		position: absolute;
		width: 8px;
	}
	
	#leftNav .mainnavArrow { /* Positionierung der Pfeile in der horizontalen Navigation */
		border: medium none;
		height: 8px;
		margin: 0px;
		position: relative;
		right: 2px;	/* Ueberlapp rechter Pfeil	*/
		width: 8px;
	}
	
	#leftNav .mainnavBackArrow { /* Positionierung der Pfeile der Links zu den Elternseiten in der horizontalen Navigation */
		border: medium none;
		height: 9px;
		ime-mode: auto;
		margin: 2px 3px 0px 0px;	/* 2. Parameter bestimmt Text-Abstand von linkem Rand	*/
		position: relative;
		vertical-align: text-top;
		width: 9px;
	}
	
	#leftNav .childUl { /* Positionierung der gesamten liste mit den Kindern in oeffnenden Fenster */
		background: none repeat scroll 0 0 #DEDEDE;
		border: 2px solid #E5E5E5;
		margin: 0px;
		position: relative;
		top: 0;
	}
	
	#leftNav .childLi { /* Positionierung des Kindes eines Menueeintrages. */
		display: inline-table;
		border: none;
		border-top-width: 0px;
		border-bottom-width: 0px;
		border-left-width: 0px;
		border-right-width: 0px;
		display: inline-table;
		padding: 15px 20px;
		font-size: 11pt; /* Groesse des Fonts Nav links in Mitte */
		width: 230px;
		vertical-align: top;
		float:left;	
		/* textunterlegte Bereiche: background:#777; */
	}
	
	#leftNav .childLi a { /* Gestaltung des Links des Kindes eines Menueeintrages. */
		color: #222;
		font-weight: bold;
		text-decoration: none;
		font-size: 9pt; /* Ueberschriften */
	}
	
	#leftNav .childChildList a {
		color: #333333;
		font-size: 9pt;
		font-weight: normal;
		/* ausgeklappte Texte */
		/* padding möglich - aber Nachbarzeilen kanibalisieren sich */
		/* background-image: url(../images/peter.jpg); */
		/* background: #222; */
	}

	.allCategories .childChildList {
		padding: 0;
	}
	
	#leftNav .childLi .emptyLi {
		list-style: none;
		height: 20px;
	}
	
	#leftNav .childLi .allCategories {
		list-style: none;
		font-weight: bold;
	}
	
	#leftNav .childLi .allCategories a {
		font-weight: bold;
		font-style: italic;
	}
	
	#leftNav .childLi li { /* Felder rechts */
		border: medium none;
		line-height: 20px;
		list-style-type: square;
	}
	
	#leftNav .leftNavLi {	/* Felder links */
		padding: 6px 5px;
	}
	
	#leftNav .leftNavLi:hover {
		background-color: #fffa00;
	}
	
	#leftNav .activeLeftNavLi {	/* aktves Feld links unten	*/
		background-color: #fffa70; /* Aktiver Pfad unten */
	}
	
	#leftNav .childBox {	/* gesamter Rahmen rechts */
		background: #D0D0D0 none repeat scroll 0pt 50%;
		left: 140px;
		margin-top: -20px;
		position: absolute;
		z-index: 220;
		/* background-image: url(../images/peter.jpg); */
	}
	
	#leftNav .adapter {	/* Rand zwischen Navigationsleiste links und Fenster rechts */
		height: 100%;
		left: -25px;
		position: absolute;
		width: 50px;
		z-index: 200;
	}
	
	#leftNav .mainnavLink {	/* innere Rahmen links */
		display: block;
		color: #222;
		font-weight: bold;
		text-decoration: none;
		font-size: 9pt;	/* Textgroesse Menu links, feststehend */
		z-index: 210;
		word-wrap: break-word;
		padding-right: 5px;
	}
	
	#leftNav .mainnavLink:hover, #leftNav .childLi a:hover{	/* kleine Rahmen rechts */
		color: red;
	}
	
	#leftNav .parents .mainnavLink {
		color: #444;
		width: 119px; 
	}
	
	#leftNav .parents .leftNavLi	{
		position: relative;
		background-color: #fffa70; /* Aktiver Pfad links (Parent Links eingefaerbt)	*/
		/* background-image:	url(../images/left_nav_parent.gif); */
	}
	
	#leftNav .childs {
		margin: 0px 0px 0px 3px;
	}
	
	#leftNav .childChildList {
		margin-left: 25px;
	}
	
	/*
	 ********************************* Styles fuer die Startseite *************************************
	*/
	
	.bodyStyle {
		margin: 0px;	 /* damit Bild oben, links anfaengt */
	}
	
	.page {
		width: 1000px;	/* Breite */
		margin-top: 0px; 
	}
	
	.row1,
	.row2,
	.row3,
	.row4,
	.row5,
	.row6,
	.row7 {
		clear: both;
		width: 1000px;
	}
	
	.row2 {
	/*
		background: #F6EF3F;
		height: 12px;
		width: 100%;
		font-size: 10pt;
	*/
	}
	
	.row3 {
		/*	background: url('../intro/images/intro_row3_background.gif') repeat-x scroll 0 0; /* unter Bild */
		height: 210px;
	}
	
	.row4 {
		height: 15px;
	}
	
	.row5 {
		height: 10px;
	}
	
	.row6 {
		height: 1px;		 /* neu fuer framelos */
		}
	
	.row7 {
		height: 20px;		/* war 20px neu fuer framelos */
	}
	
	.rowHide {
		display: none;		/* unbenutzt */
	}
	
	/* linker Bildteil oben */
	.col1 {
		background-color: #777777;
		height: 313px;	/* neu fuer framelos */
		float: left;
		text-align: center;
		border-style: none; /* neu fuer framelos */
	}
	
	/* rechter Textteil oben */
	.col2 {
		background-image:url(../images/hifi_70_72.gif); background-repeat:no-repeat; background-position:400px 30px;
		background-color: #DBDBDB; 
		border-left: 2px solid #FFFFFF;
		float: left;
		height: 313px; 
		margin-left: -2px;
		position: relative;
		font-size: 13px;
		width: 50%;
		z-index: 100;
	}
	
	/* die Listen, die die Bildwechsel auslösen */
	.linksList, .linksListLast {
		display: block;
		float: left;
		padding-left: 3%;	/* im Original 4%*/
		width: auto;
	}
	
	.linksListLast {
		margin-right: 0px!important;
	}
	
	.linksList li {
		list-style: none;
	}
	
	/* fuer die ul-Listen */
	.links {	
		font-size: 12pt;
		font-weight: normal;
		padding-left: 0;
		text-align: left;
	}
	
	.links li {	
		list-style-image: url("../intro/images/pfeil_intro.gif");
		padding: 5px 0;
		width: 140px;
	}
	
	/* fuer die Formatierung der Links unter dem Bild */
	.bodyStyle a {	
		color: #5A5A5A;
		font-size: 9pt;
		text-decoration: none;
		white-space: normal;
		word-wrap: break-word;
	}
	
	
	.bodyStyle a:hover {	
		text-decoration: underline;
		color: #191919;
	}
	
	.title {
		/* font-weight: bold; */
		font-size: 11pt;
		list-style: none;
		margin-bottom: -10px;
		margin-top: 10px;	/* vor 25.7.19: 20px */
		text-align: left;
	}
	
	/* fuer die ul-Liste ganz rechts */
	.furtherLinks {
		border-left: 1px solid #000000;
		margin-left: 0.5%;
		margin-right: 0px;
		margin-top: 0px;	/* wg. fehlender Ueberschrift */
		padding-left: 30px;
	}
	
	/* fuer die ul-Liste ganz rechts */
	.furtherLinksHeader {
		border-left: 1px solid #000000;
		margin-left: 0.5%;
		margin-right: 0px;
		/* margin-top: 0px; wg. fehlender Ueberschrift */
		padding-left: 30px;
	}
	
	/* teaser ist zur Formatierung der Textboxen rechts oben unter col2 */
	#teaser {
		float: left;
		margin-left: 15px;
		margin-top: 50px;
		position: relative;
		width: 390px;
	}
	#teaserTitle {
		font-weight: bold;
		white-space:nowrap;
	}
	#teaserText {
	}
	
	/* #teaserText ul li {
		 list-style-image: url("../img/pfeil.png");
	}*/
	
	#img {
		height: 313px;
		position: relative;
		width:500px;
		z-index: 1;
	}
	
	/* grauer Kasten mit Schliessungsdatum */
	.footer {
		/* background: none repeat scroll 0 0 #DBDBDB;	*/
		background-color: #DBDBDB;
		/*	margin: 0px auto! important; */
		padding: 3px;
		position: relative;
		/* top: 60%; */
		width: 994px;
	}
	
	.footer li {
		display: inline;
		margin: 0px 8px;	/* 12 -> 10 -> 8 */
		font-size: 8pt;
		color: #333333;
	}
	
	.footer a {
		font-size: 8pt;
	}
	
	.navZeile {
		background: none repeat scroll 0 0 #DBDBDB;
		height: 30px; 
	}
	
	/* unten: die rote Markenzeile */
	.marken	{
		display: inline;
		margin: -8px -8px;
		font-size: 6pt;
	}
	
	.marken li {
		display: inline;
		margin: 0px 6px;	
		font-size: 6pt;
	}
	
	.marken a {
		color: #ff0000;
		font-size: 7pt;
	}
	
	}	/*	@media all */

 
@media only screen and (max-width: 49rem) {

	/* Diese Klasse formatiert alle */ 
	.contentArea {
		width: 95%;	 /* statt 80% */
		margin-left: 5px; /* statt 150px */
	}
	
	#leftNav { /* Positionierung der gesammten Navigation in der linken Spalte */
		height: 0px;
		left: 0px;
		margin: 0px 0px 0px -1px;	/* vor 13.07.2019: 10px	*/
		padding-top: 20px; 
		display: none;
		background: none; 
		z-index: -1;
		width: 0px;
	}
	
	.mainnav {
		left: 40px; /*	statt 140px	*/
		margin: 20px 0px 0px 40px; /* alt war: -9px 0px 0px 0px; */
	}
		
	/* Diese Klasse ist zustaendig die Ausgangsposition und Gestaltung der Submenueboxen zu uebernehmen. */
	.path ul{
		/* left: 100px; */ 
	}


}