/* Allgemein Anweisungen */
/*Farben

#e50404 rot
#ffffff weiss
#f9f9f9 altweis/hintergrund
#f0f0f0 hellgrau
#c0c0c0 grau
#7f7f7f dunkelgrau
#323232 antrazit
#000000 schwarz

*/

*	{

	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	
}

html, body {

	scroll-behavior: smooth;
    width: 99%;

    margin: 0px 5px;
    padding: 5px 5px;
    background: url(img/weichenbackground.jpg) repeat-y 10px 10px #F9F9F9;

    font-family: Arial, sans-serif;
  

}

section {

	float: left;
	width: 100%;
}

h1, p {
	margin: 0.5em;
}






	
header {
	background-color: #C0C0C0;

	width: 100%;
	float: left;


}

}
	
#bereichlogo {
	color: white;
	background-color: #e50404;		
	display: block;
	padding: 0.5em;
	text-decoration: none;
	float: left;	
}

#bereichlogo {
	width: auto;
}

#bereichlogo2 {
	
			
	display: block;
	padding: 0.5em;
	text-decoration: none;
	float: left;	
}

#bereichlogo2 {
	width: auto;
}
	
	#flexboxRhBtitle1 {
	
	display: flex;
	

	}
	#flexboxRhBtitle1 p:nth-child(1) {background: #0000ff; width: 25px; height: 25.5px;  border-left: 2px solid #ffffff;  padding: 2px}
	#flexboxRhBtitle1 p:nth-child(2) {background: url(img/rhb.gif) no-repeat #0000ff; color: #ffffff; padding: 5px 10px 5px 80px}
	
			#linkabc {
	
	display: flex;

	}
	#linkabc p:nth-child(1) {background: #0000ff; border-left: 2px solid #ffffff; width: 25px; height: 25px; padding: 5px}
	#linkabc p:nth-child(2) {background: #0000ff; border-left: 2px solid #ffffff; width: 25px; height: 25px; padding: 5px}
	#linkabc p:nth-child(3) {background: #0000ff; border-left: 2px solid #ffffff; width: 25px; height: 25px; padding: 5px}
	#linkabc p:nth-child(4) {background: #0000ff; border-left: 2px solid #ffffff; width: 25px; height: 25px; padding: 5px}
	#linkabc p:nth-child(5) {background: #0000ff; border-left: 2px solid #ffffff; width: 25px; height: 25px; padding: 5px}
	#linkabc p:nth-child(6) {background: #0000ff; border-left: 2px solid #ffffff; width: 25px; height: 25px; padding: 5px}
	#linkabc p:nth-child(7) {background: #0000ff; border-left: 2px solid #ffffff; width: 25px; height: 25px; padding: 5px}
	#linkabc p:nth-child(8) {background: #0000ff; border-left: 2px solid #ffffff; width: 25px; height: 25px; padding: 5px}
	
	
	#linkabc p:hover { 
	background:  #ff0000; }	
		
	

  
#klicker {
display: block;

	} 
	
	
	#boxtitle {
	
	
		background:  #c0c0c0;
		padding: 5px 10px 5px 30px;
		border-bottom: 1px dotted #3f3f3f;
		}
		
	#box111 {
	
		color:#323232;
		background: url(img/dotted1.gif) no-repeat 15px 5px #c0c0c0;
		padding: 5px 30px 5px 40px;
		border-bottom: 1px dotted #3f3f3f;
		}		
		
		
	#box12 {
	
		
		background: 5px 5px #ededed;
		padding: 5px 30px 5px 30px;
		border: 2px solid #ffffff;
		} 


	#box13 {
		display: block;
		float: left;
		width: 110px;
		color:#323232;
		background: 5px 5px #c0c0c0;
		padding: 10px 10px 10px 10px;
		border: 1px dotted #3f3f3f;
		}
		
	#box13:hover { 
		text-decoration: none; 
		color:#fff;
		background: 5px 5px #e50404; }	

	#box13t {
		display: block;
		float: right
		color:#323232;
		background: 5px 5px #c0c0c0;
		padding: 10px 10px 10px 10px;
		border: 1px dotted #3f3f3f;
		}
		
	#box13t:hover { 
		text-decoration: none; 
		color:#fff;
		background: 5px 5px #e50404; }			
		
		
	#box13a {
		display: block;
		float: left;
		
		color:#323232;
		background: 5px 5px #c0c0c0;
		padding: 10px 10px 10px 10px;
		border: 1px dotted #3f3f3f;
		}
		
	#box13a:hover { 
		text-decoration: none; 
		color:#fff;
		background: 5px 5px #e50404; }	

	#box131 {
		display: block;
		float: left;
		width: 350px;
		color: #323232;
		background: 5px 5px #c0c0c0;
		padding: 10px 10px 10px 10px;
		border: 1px dotted #3f3f3f;
		}
		
	#box131:hover { 
		text-decoration: none; 
		color:#fff;
		background: 5px 5px #e50404; }		
		
	#box14 {
		width: 100%;
	
		color:#323232;
		background: 5px 5px #c0c0c0;
		padding: 5px 5px 5px 5px;
		border-bottom: 1px dotted #3f3f3f;
		}


	#box21c {
	
		color: #fff;
		width: 400px;
		height:20px;
		margin-left: 60px;
		background: url(img/dotted1.gif) no-repeat 5px 5px #e50404;
		font: bold;
		padding: 5px 10px 5px 30px;
		border-bottom: 1px dotted #3f3f3f;
		}
		
		

	#box22 {
	
		font:  bold;
		width: 100%;
		
		background: #c0c0c0;
		padding: 5px 10px 5px 15px;
		border-left: #c0c0c0 10px solid ;
		border-bottom: 1px dotted #3f3f3f;
		}

		
		
	#box3 {
		60%
		
		
		background:  #c0c0c0;
		padding: 15px 100px 50px 50px;
		border-left: #e50404 30px solid ;
		border-bottom: 1px dotted #323232;
		}
		
		

		
    #box33 {
	
		
		background: url(img/dotted10.png) no-repeat 10px 10px #c0c0c0;
		padding: 5px 10px 5px 30px;
		border-bottom: 1px dotted #323232;
		
		}

		
	#box33:hover { 
		text-decoration:none; 
		color:#323232;
		background: url(img/dotted1.gif) no-repeat 10px 10px #e50404; }	

	#box34a {
	
		
		background: url(img/raily4.png) no-repeat 5px 5px #c0c0c0;
		padding: 20px 10px 5px 42px;
		color:#323232;
		border-bottom:  1px dotted #3f3f3f;
		}
		
		
	#box34a:hover { 
		text-decoration: none; 
		color:#ffffff;
		background: url(img/raily4.png) no-repeat 5px 5px #e50404; }

	#box34b {
	
		
		background: url(img/pdf.png) no-repeat 7px 7px #c0c0c0;
		padding: 20px 10px 5px 42px;
		color:#323232;
		border-bottom:  1px dotted #3f3f3f;
		}
		
		
	#box34b:hover { 
		text-decoration: none; 
		color:#ffffff;
		background: url(img/pdf.png) no-repeat 7px 7px #e50404; }	


		
		
#box35 {
		
		color: #fff;
		min-height: 120px;
		min-width: 300px;
		

		
	
		margin: 1px;
		
		background: url(img/dotted1a.gif) no-repeat 5px 5px #c0c0c0;
		padding: 5px 10px 5px 30px;
		font: bold;
		
		border-bottom: 5px solid #323232;
		}

#box35:hover { 
		
		text-decoration:none; 
		background: url(img/dotted1.gif) no-repeat 5px 5px #e50404; 
		padding: 5px 10px 5px 30px;
		min-height: 120px;
		min-width: 300px;
		
		
		
		}		
		
		
		

.bild {
    max-width: 90%;
    height: auto;
	
	
}

video {
    max-width: 80%;
    height: auto;
}


.videobereich-560-315 {
  
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}


.videobereich-800-360 {
  
    position: relative;
    height: 0;
    padding-bottom: 45%;
}

.videoextern {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hellgrau
{ 
		font:  0.9em Arial;
		color:#f0f0f0;
		}   

.hellgrau_b
{ 
		font: bold 0.9em Arial;
		color:#f0f0f0;
		} 

.weiss_1_0
{ 
		font: bold 1em Arial ;
		color: #fff;

		} 	
	

.grau32_1
{ 
		font:  1.0em Arial;
		color: #323232;	
}

	
.grau32_1_0
{ 
		font: bold 1em  Arial ;
		color: #323232;		
}

.grau32_1_1hgc0
{ 
		font:  1.1em  Arial ;
		color:#323232;				
		background: #c0c0c0; 
}

.grau32_1_5
{ 
		font:  1.5em  Arial ;
		color: #323232;		
}

.drot_1_1b {
	font: bold 1.1em  Arial ;
	color:#e50404;
	
}

.grau32_2-5c
{ 
		font:  2.5em Arial;
		color: #323232;
		text-align: center;		
}
		
.drot32_2-5b
  
{ 
		font:  2.5em Arial;
		color: #e50404;
		text-align: center;		

}	
	

/* Hauptmenü  */


	#steuerung li {
	list-style: none;
	float: left;
	
}
	
#steuerung a {
	display: block;
	height: 30px;
	width: 80;
	border-left: #c0c0c0 4px solid;
	border-bottom: #c0c0c0 8px solid;
	border-top: #c0c0c0 8px solid;
	border-right: #c0c0c0 4px solid;
	background: url(img/dotted10.png) no-repeat 1px 10px #f0f0f0;
	padding-bottom: 0.5em;
	padding-right: 1.5em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: f0f0f0;
	
}

	
	

#steuerung {
	float: left;
	font:  0.9em Arial; 

}

#steuerung a:hover {
	color: #f0f0f0;
	background: url(img/dotted1a.gif) no-repeat 3px 10px #e50404;
}

.menue-button {
	display: none;
}




/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:900px) {
	.menue-button {
		display: block;
		
	}

	
	.menue-button {
		background-color: #7f7f7f;
		border: #f9f9f9 2px solid;
		
		display: block;
		position: absolute;
		right: 10px;
		top: 50px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}



	#bereichlogo {
		width: 100%;
	}

	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}	

	#steuerung li {
		width: 100%;
		
		
	}	

	.menue-button:hover {
		color: black;
		background: #e50404;
	}
	
	
  
	
}	




	


/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
	display: block;
}
	
	

/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}	




	

/* Untermenü 1 */
.menue-button1 {
	display: none;
}	
	
#steuerung1 {
	float: left;
	border-left: #323232 3px solid;
	margin: 5px 10px 20px 0px;
	font: 0.9em  Arial;
	
}

#steuerung1 li {
	list-style: none;
		
}

	

	
#steuerung1 a {
	display: block;
	height: 100%;
	width: 200px;
	
	border-bottom: #7f7f7f 2px dotted;
	background: url(img/dotted10.png) no-repeat 1px 10px  #c0c0c0;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: black;
	
	
}	

#steuerung1 h1 {
	display: block;
	height: 100%;
	width: 180px;
	
	background: url(img/dotted0a.gif) no-repeat 5px 10px #e50404;
	font:  1.2em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #f9f9f9;
}




	
#steuerung1 a:hover {
	color: black;
	background: url(img/dotted1a.gif) no-repeat 3px 10px #e50404;
	
}

		
#steuerung1 h2 {
	display: block;
	height: 100%;
	width: 200px;
	
	background: #c0c0c0;
	font:  1em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #323232;
}


/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:900px) {
    .menue-button1 {
		display: block;
		
	}

	.menue-button1 {
		background-color: #c0c0c0;
		border: #f9f9f9 2px solid;

		display: block;
		position: absolute;
		right: 10px;
		/*	Abstand zum oberen Bildrand, 45er Schritte */
		top: 95px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	
	
	.menue-button1:hover {
		color: black;
		background: #e50404;
	}

	
	#bereichlogo1 {
		width: 100%;
	}
	
	#steuerung1 {
		float: left;
		width: 100%;
		display: none;
	}	

	#steuerung1 li {
		width: 100%;
		border-left: #7f7f7f 3px solid;
	}	
	
	

	
	
}	






/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue1:target #steuerung1 {
	display: block;
}
	
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue1:target .menue-button1-beschr-open {
	display: none ; 

}






/* Untermenü 2 */
.menue-button2 {
	display: none;
}	
	
#steuerung2 {
	float: left;
	border-left: #323232 3px solid;
	margin: 5px 10px 20px 0px;
	font: 0.9em  Arial;
	
}


#steuerung2 li {
	list-style: none;
		
}

	

	
#steuerung2 a {
	display: block;
	height: 100%;
	width: 200px;
	
	border-bottom: #7f7f7f 2px dotted;
	background: url(img/dotted10.png) no-repeat 1px 10px  #c0c0c0;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: black;
	
	
}	

#steuerung2 h1 {
	display: block;
	height: 100%;
	width: 180px;
	
	background: url(img/dotted0a.gif) no-repeat 5px 10px #e50404;
	font:  1.2em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #f9f9f9;
}
	
#steuerung2 a:hover {
	color: black;
	background: url(img/dotted1a.gif) no-repeat 3px 10px #e50404;
	
}		

#steuerung2 h2 {
	display: block;
	height: 100%;
	width: 200px;
	
	background: #c0c0c0;
	font:  1em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #323232;
}

/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:900px) {
    .menue-button2 {
		display: block;
		
	}

	.menue-button2 {
		background-color: #c0c0c0;
		border: #f9f9f9 2px solid;

		display: block;
		position: absolute;
		right: 10px;
		/*	Abstand zum oberen Bildrand, 45er Schritte */
		top: 140px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	
	
	.menue-button2:hover {
		color: black;
		background: #e50404;
	}

	
	#bereichlogo2 {
		width: 100%;
	}
	
	#steuerung2 {
		float: left;
		width: 100%;
		display: none;
	}	

	#steuerung2 li {
		width: 100%;
		border-left: #7f7f7f 3px solid;
	}	
	
	

	
	
}	





/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue2:target #steuerung2 {
	display: block;
}
	
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue2:target .menue-button2-beschr-open {
	display: none ; 

}










/* Untermenü 3 */


.menue-button3 {
	display: none;
}	
	
#steuerung3 {
	float: left;
	font:  0.9em Arial; 
	margin: 5px 10px 20px 0px;
	border-left: #323232 3px solid;
}

#steuerung3 li {
	list-style: none;
		
}
	
#steuerung3 a {
	display: block;
	height: 100%;
	width: 200px;
	
	border-bottom: #7f7f7f 2px dotted;
	
	background: url(img/dotted10.png) no-repeat 1px 10px  #c0c0c0;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #323232;
}
#steuerung3 h1 {
	display: block;
	height: 100%;
	width: 180px;

	
	background: url(img/dotted0a.gif) no-repeat 5px 10px  #e50404;
	font:  1.2em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: white;
}	
	
#steuerung3 a:hover {
	color: black;
	background: url(img/dotted1a.gif) no-repeat 3px 10px #e50404;
}	

#steuerung3 h2 {
	display: block;
	height: 100%;
	width: 200px;
	
	background: #c0c0c0;
	font:  1em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #323232;
}	

/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:900px) {
	
	.menue-button3 {
		display: block;
	}

	.menue-button3 {
		background-color: #c0c0c0;
		border: #f9f9f9 2px solid;
		
		display: block;
		position: absolute;
		right: 10px;
		/*	Abstand zum oberen Bildrand, 45er Schritte */
		top: 185px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	
	
	.menue-button3:hover {
		color: black;
		background: #e50404;
	}

	
	#steuerung3 {
		float: left;
		width: 100%;
		display: none;
	}	

	#steuerung3 li {
		width: 100%;
		
	}	
	
}	


/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue3:target #steuerung3 {
	display: block;
}
	
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue3:target .menue-button3-beschr-open {
	display: none ; 
}
























/* Untermenü 4 */


.menue-button4 {
	display: none;
}	
	
#steuerung4 {
	float: left;
	font:  0.9em Arial; 
	border-left: #323232 3px solid;
	margin: 5px 10px 20px 0px;
}

#steuerung4 li {
	list-style: none;	
}
	
#steuerung4 a {
	display: block;
	height: 100%;
	width: 200px;
	border-bottom: #7f7f7f 2px dotted;
	background: url(img/dotted10.png) no-repeat 1px 10px  #c0c0c0;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #323232;
}	
	
#steuerung4 h1 {
	display: block;
	height: 100%;
	width: 180px;

	background: url(img/dotted0a.gif) no-repeat 5px 10px  #e50404;
	font:  1.2em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #f9f9f9;
}		
#steuerung4 a:hover {
	color: black;
	background: url(img/dotted1a.gif) no-repeat 3px 10px #e50404;
}		


#steuerung4 h2 {
	display: block;
	height: 100%;
	width: 200px;
	
	background: #c0c0c0;
	font:  1em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #323232;
}


/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:900px) {
	
	.menue-button4 {
		display: block;
	}

	.menue-button4 {
		background-color: #c0c0c0;
		border: #f9f9f9 2px solid;
		
		display: block;
		position: absolute;
		right: 10px;
		/*	Abstand zum oberen Bildrand, 45er Schritte */
		top: 230px;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	
	
	.menue-button4:hover {
		color: black;
		background: #e50404;
	}

	
	#steuerung4 {
		float: left;
		width: 100%;
		display: none;
	}	

	#steuerung4 li {
		width: 100%;
		
	}	
	
}	


/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue4:target #steuerung4 {
	display: block;
}
	
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue4:target .menue-button4-beschr-open {
	display: none ; 
}


/* Untermenü _m */


.menue-button_m {
	display: none;
}	
	
#steuerung_m {
	float: left;
	font:  0.9em Arial; 
	border-left: #323232 3px solid;
	margin: 5px 10px 20px 0px;
}

#steuerung_m li {
	list-style: none;	
}
	
#steuerung_m a {
	display: block;
	height: 100%;
	width: 300px;
	border-bottom: #7f7f7f 2px dotted;
	background: url(img/dotted10.png) no-repeat 1px 10px  #c0c0c0;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #323232;
}	
	
#steuerung_m h1 {
	display: block;
	height: 100%;
	width: 280px;

	background: url(img/dotted0a.gif) no-repeat 5px 10px  #e50404;
	font:  1.2em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #f9f9f9;
}		
#steuerung_m a:hover {
	color: black;
	background: url(img/dotted1a.gif) no-repeat 3px 10px #e50404;
}


















/* Untermenü _u */


.menue-button_u {
	display: none;
}	
	
#steuerung_u {
	float: left;
	font:  0.9em Arial; 
	border-left: #323232 3px solid;
	margin: 5px 10px 20px 0px;
}

#steuerung_u li {
	list-style: none;	
}
	
#steuerung_u a {
	display: block;
	height: 100%;
	width: 200px;
	border-bottom: #7f7f7f 2px dotted;
	background: url(img/dotted10.png) no-repeat 1px 10px  #c0c0c0;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #323232;
}	
	
#steuerung_u h1 {
	display: block;
	height: 100%;
	width: 180px;

	background: url(img/dotted0a.gif) no-repeat 5px 10px  #e50404;
	font:  1.2em Arial;
	padding-bottom: 0.5em;
	padding-right: 2em;
	padding-top: 0.5em;
	padding-left: 2em;
	text-decoration: none;
	color: #f9f9f9;
}		
#steuerung_u a:hover {
	color: black;
	background: url(img/dotted1a.gif) no-repeat 3px 10px #e50404;
}		


footer {

	float: left;


	width: 100%;
}


	#box4 {
		 width: 100%;
		
		color: #323232;		
		background:  #c0c0c0;
		padding: 5px 10px 5px 15px;
		border-left: #e50404 10px solid ;
		border-bottom: 1px dotted #323232;
		}


#box_nachoben {
  display: block;
 background: /*url(img/dotted1a.gif) no-repeat*/ 20px 20px yellow;
  position: fixed;
  width: 50px;
  height: 57px;
  bottom: 20px;
  right: 15%;