#links {
	
	width: 50%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	/*height: 100%;*/
}

#rechts {
	background-color: width :   50%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	height: 100%;
}

/*
	#links {
		width: 100%;
		float: left;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 2%;
		padding-bottom: 2%;
		height: 100%;
		color: black;
	}
	#rechts {
		width: 100%;
		float: left;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 2%;
		padding-bottom: 2%;
		height: 100%;
	}
*/

#beide {
	/*background-color: #bbcff0;*/
	width: 100%;
	float: left;
	background-color: white;
}

.kategorie {
	width: 96%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	/*background-color: #3399ff;*/
	margin-top: 2%;
	margin-bottom: 2%;
	/*background-image:linear-gradient(90deg, #3399ff 64%, blue 100%);*/
	color: white;
	font-size: 22px;

	
	/*margin-left: 10%;*/
	
}

#kategorie2 {
	width: 100%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	background-color: #3399ff;
	margin-top: 2%;
	margin-bottom: 2%;
	background-image:linear-gradient(90deg, #3399ff 64%, blue 100%);
}


#kategorieartikelread {
	width: 100%;
	float: left;
	padding-left: 8px;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #31a3dd;
	margin-top: 15px;
	margin-bottom: 1px;
	color: white;
	font-size: 30px;
}

#inhalt {
	width: 94%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 1%;
	padding-bottom: 1%;
	background-color: #D3D3D3;
	margin-top: 1%;
	margin-bottom: 1%;

	font-size: 16px;
	
	border-top: 1px solid #0A0A2A;
	border-bottom: 1px solid #0A0A2A;
}

#uberschrift
{
	width: 100%;
	background-color: #e0e0e0;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 28px;
	border-top: 3px solid #31a3dd;
	border-bottom: 3px solid #31a3dd;
	margin-bottom: 16px;
	float: left;
	
}


#inhaltartikelread {
	width: 100%;
	float: left;
	padding-left: 8px;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 4px;
	/*background-color: #0066cc;*/
	margin-top: 3px;
	margin-bottom: 3px;
	color: black;
	font-size: 22px;
	background-color: #e0e0e0;
	/*background-color: #D3D3D3;*/
	
	border-color: green;
	/*border-top: 1px solid #0A0A2A;*/
	border-top: 1.5px solid dodgerblue;
	border-bottom: 1.5px solid dodgerblue;
	
}

#inhaltartikelread img {
	width: 30px;

	
}

#inhaltartikelread a:link {
	color: #2e2d2d;
	text-decoration: underline;


}

#inhaltartikelread a:visited {
	text-decoration: underline;
	color: #2e2d2d;
}

#inhaltartikelread a:hover {
	color: #2e2d2d;
	text-decoration: underline;


}

#inhaltartikelread a:active {
	color: #2e2d2d;
	text-decoration: underline;


}



.inhaltartikelread {
	width: 100%;
	float: left;
	padding-left: 8px;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 4px;
	/*background-color: #0066cc;*/
	margin-top: 3px;
	margin-bottom: 3px;
	color: black;
	font-size: 22px;
	background-color: #e0e0e0;
	/*background-color: #D3D3D3;*/
	
	border-color: green;
	/*border-top: 1px solid #0A0A2A;*/
	border-top: 1.5px solid dodgerblue;
	border-bottom: 1.5px solid dodgerblue;
	
}

.inhaltartikelread img {
	width: 30px;

	
}

.inhaltartikelread a:link {
	color: #2e2d2d;
	text-decoration: underline;


}

.inhaltartikelread a:visited {
	text-decoration: underline;
	color: #2e2d2d;
}

.inhaltartikelread a:hover {
	color: #2e2d2d;
	text-decoration: underline;


}

.inhaltartikelread a:active {
	color: #2e2d2d;
	text-decoration: underline;


}





#inhalt a:link {
	color: #000080;
	text-decoration: underline;
	font-size: 18px;
	font-weight: bold;
}

#inhalt a:visited {
	color: #000080;
	text-decoration: underline;
	font-size: 18px;
	font-weight: bold;
}

#inhalt a:hover {
	color: #000080;
	text-decoration: underline;
	font-size: 18px;
	font-weight: bold;
}

#inhalt a:active {
	color: #000080;
	text-decoration: underline;
	font-size: 18px;
	font-weight: bold;
}

.uminhalt {
	width: 98%;
	float: left;
	

	display: none;
}

#textbereich
{
	
	float: left;
	width: 100%;
	color: black;
	padding: 5px;
	font-size: 20px;
	text-align: left;

}



#zurueckbutton
{
	background-color: #31a3dd;;
	float: left;
	font-size: 26px;
	padding: 10px;
	margin-top: 18px;
	margin-bottom: 18px;
	font-weight: bold;
	
}

#zurueckbutton a:link {
	color: white;
	text-decoration: underline;
	font-weight: bold;
}

#zurueckbutton a:visited {
	color: white;
	text-decoration: underline;
	font-weight: bold;
}

#zurueckbutton a:hover {
	color: white;
	text-decoration: underline;
	font-weight: bold;
}

#zurueckbutton a:active {
	color: white;
	text-decoration: underline;
	font-weight: bold;
}



#youtube
{
	width: 98%;
	max-width: 500px;
	height: 300px;
	margin-left: 1%;
	margin-right: 1%;
}

#mediathekbild
{
	width: 98%;
	max-width: 500px;

	margin-left: 1%;
	margin-right: 1%;
	
}

#textbereich a:link {
	color: #31a3dd;
	text-decoration: underline;
}

#textbereich a:visited {
	color: #31a3dd;
	text-decoration: underline;
}

#textbereich a:hover {
	color: #31a3dd;
	text-decoration: underline;
}

#textbereich a:active {
	color: #31a3dd;
	text-decoration: underline;
}

#textbereich h1
{
	color: black;
}

#textbereich h2
{
	color: black;
}

#textbereich h3
{
	color: black;
}

#textbereich p
{
	color: black;
	font-size: 18px;
}

#textbereich ul
{
	color: black;
	font-size: 18px;
}


#textbereich strong
{
	color: green;
}

/*#bcbbf0;*/
@media only screen and (max-width: 1024px) 
{
	#links {
		/*background-color: #bbcff0;*/
		width: 100%;
		float: left;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 2%;
		padding-bottom: 2%;
		height: 100%;
		color: black;
	}
	#rechts {
		width: 100%;
		float: left;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 2%;
		padding-bottom: 2%;
		height: 100%;
	}
}



/*ab hier der downloadbereich............................................................*/
/*ab hier der downloadbereich............................................................*/
/*ab hier der downloadbereich............................................................*/


#downloadbereich {
	
	width: 100%;
	float: left;
	background-color: white;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 3%;
	padding-bottom: 3%;
	 overflow:hidden;
	 text-align: left;
	 /*border: 0.5px solid dodgerblue;*/
}


img.downloadbereich {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 300px;
  max-width: 100%;
  float: left;
  clear: both;
  overflow:hidden;
}




#downloadbereich strong 
{
	color: black;
}

/*muss hier hin, damit der downloadbereich das nicht wieder �berschreibt...*/
#textbereich strong
{
	color: unset;
}


#downloadbereich h2 {
	color: black;
}

#downloadbereich h3 {
	color: black;
}

#downloadbereich h2 {
	color: black;
}

#dateilisten {
	color: black;
	width: 100%;
	float: left;
	background-color: #89E8F1;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 3%;
	padding-bottom: 3%;
	overflow:hidden;
}



#beschreibung {
	font-size: 170%;
	color: black;
	width: 100%;
	float: left;
	background-color: #bbcff0;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: 3%;
	overflow:hidden;
}





#beschreibung a:link {
	color: #0080FF;
}

#beschreibung a:visited {
	color: #0080FF;
}

#beschreibung a:hover {
	color: #0080FF;
}

#beschreibung a:active {
	color: #0080FF;
}


/*Teacherlist------------------------*/
/*Teacherlist------------------------*/
/*Teacherlist------------------------*/
/*Teacherlist------------------------*/
/*Teacherlist------------------------*/
#teacherlist
{
	width: 100%;
	
	

}

.lehrer
{
	
padding-left: 3%;
padding-right: 3%;
padding-top: 5px;
padding-bottom: 5px;
float: left;
height: 200px;
width: 700px;
margin: 0 auto;
margin-left: 25%;
margin-right: 25%;
	
}



#bilder
{
height: 130px;
float: left;
}

#bilder img
{
height: 120px;
width: 120px;
float: left;
padding: 3px;
}


#flagge
{
height: 120px;
width: 160px;
float: left;
padding: 3px;
}


#lehrertext
{
margin-top: 3px;
padding-left: 8px;
padding-right: 8px;
float: left;
width: 420px;
background-color: dodgerblue;
color: white;
height: 94px;
font-size: 23px;
}




#bilder img
{
height: 100px;
width: 100px;
float: left;
padding: 2%;
}

#lehrertext
{
padding-left: 8px;
float: left;
float: left;
width: 99%;
background-color: dodgerblue;
color: white;
height: auto;
}


.lehrer
{
 margin-top: 10px;
 border-color: grey;	
 border-top-style: solid;
 height: auto;
 width: 100%;
 margin-left: 0%;
margin-right: 0%;


}
	
	
.selbsttext
{
	width: 99%;
	padding-left: 8px;
	float: left;
	margin-top: 3px;
	display: none;
}

/*select*/


.select-css {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 300px; 
    max-width: 300px; 
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    margin: 0 auto;
    margin-bottom: 3px;
}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #888;
}
.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}
.select-css option {
    font-weight:normal;
}

#suchbutton
{text-align: center;
margin: 16px;

}

#map
{
 width: 100%;
 height: 180px;
 max-height:none;
 background-color: white;
}

@media only screen and (min-width: 904px)
{
	#map
	{
		 width: 100%;
		 height: 400px;
		 max-height:none;
 		background-color: white;
 		margin: 0;
 		padding: 0;
 		position: relative;
	}
	
	
}

@media only screen and (max-width: 904px)
{
	.col-md-12
	{
	 padding: 0px;
	 margin: 0px;
	}	
}

#allesfenster
{
 display: none;
}


body {
  
}

/*loader*/
/*loader*/
/*loader*/
/*loader*/
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
 	margin: 0 auto;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#wartetext
{
 text-align: center;
 font-size: 25px;
 color: dodgerblue;
 
}
/*ende loader*/
/*ende loader*/
/*ende loader*/



.header_section hd_cover
{
margin: 0px;
padding: 0px;
width: 100%;
}

#textabstand
{
	padding-left: 6px;
	padding-right: 6px;

	
}


.speedcontrolcontainer {
  max-width: 30em;
  display: block;
  border: 1px solid #000;
  padding: 10px;
  font-family: Sans-serif;
}
.speedcontrolcontainer audio {
  width: 100%;
  display: block;
}
.speedcontrolcontainer div {
  display: flex;
  padding: .5em 0;
  gap: 5px;
}
.speedcontrolcontainer label {
  flex: 1
}
.speedcontrolcontainer input[type="range"] {
  flex: 5
}
.speedcontrolcontainer span {
  flex: 1;
  text-align: center;
}