/* FONT-RALEWAY*/ 
		@font-face {
		  font-family: 'Raleway';
		  font-style: normal;
		  font-weight: 400;
		  src: url('../fonts/raleway-v18-latin-regular.eot'); /* IE9 Compat Modes */
		  src: local(''),
			   url('../fonts/raleway-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			   url('../fonts/raleway-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
			   url('../fonts/raleway-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
			   url('../fonts/raleway-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
			   url('../fonts/raleway-v18-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
		}

		@font-face {
		  font-family: 'Raleway';
		  font-style: normal;
		  font-weight: 700;
		  src: url('../fonts/raleway-v18-latin-700.eot'); /* IE9 Compat Modes */
		  src: local(''),
			   url('../fonts/raleway-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			   url('../fonts/raleway-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
			   url('../fonts/raleway-v18-latin-700.woff') format('woff'), /* Modern Browsers */
			   url('../fonts/raleway-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
			   url('../fonts/raleway-v18-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
		}

		@font-face {
		  font-family: 'Raleway';
		  font-style: italic;
		  font-weight: 400;
		  src: url('../fonts/raleway-v18-latin-italic.eot'); /* IE9 Compat Modes */
		  src: local(''),
			   url('../fonts/raleway-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			   url('../fonts/raleway-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
			   url('../fonts/raleway-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
			   url('../fonts/raleway-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
			   url('../fonts/raleway-v18-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
		}

		@font-face {
		  font-family: 'Raleway';
		  font-style: italic;
		  font-weight: 700;
		  src: url('../fonts/raleway-v18-latin-700italic.eot'); /* IE9 Compat Modes */
		  src: local(''),
			   url('../fonts/raleway-v18-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			   url('../fonts/raleway-v18-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
			   url('../fonts/raleway-v18-latin-700italic.woff') format('woff'), /* Modern Browsers */
			   url('../fonts/raleway-v18-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
			   url('../fonts/raleway-v18-latin-700italic.svg#Raleway') format('svg'); /* Legacy iOS */
		}

/* CSS layout */

html{
	margin: 0;
	border: 0;
	background:lightgrey;
	font-size: 16px;
		}
	
body {  
		margin: 0 auto;
		min-width: 300px;
		max-width: 950px;
		font-family: "Raleway", "Segoe UI", "Trebuchet MS", "UnDotum", sans-serif;
		font-size: 11pt;
		color: #281B61;
		}
	
	
	/* === General CSS layout === */
	
*, *::before, *::after{
	box-sizing: border-box;
}
.schmal {
	font-size: 0.5rem;
}
.text{
	width: 95%;
}
.clearfix::after{
			content"";
			clear: both;
			display: bock;
			}
		
.linie {
		height: 14px;
		width: 100%;
		display: block;
		margin-top: -25px;
		margin-left: 62px;
		}
	
hr{
		height: 14px; 
		background-color: #BFBCD1; 
		margin-bottom: 0;
			}

		
	/* Header*/
#karo{
		width: 60px;
		height: 200px;
		background-color: #eee9f3;
		position:relative;
		top: 0;
		left:0px;
		display: inline-block;
		}
#karo1{
		width: 28px;
		height: 28px;
		background-color: #6d3689;
		position:absolute;
		top: 0;
		left:0;

		}
#karo2{
		width: 28px;
		height: 28px;
		background-color:  #eee9f3;
		position:absolute;
		top: 0;
		right: 0;
		}
#karo3{
		width: 27px;
		height: 80px;
		background-color: #cfbfdb;
		position:absolute;
		bottom: 85px;
		left: 0;
		}
#karo4{
		width: 27px;
		height: 165px;
		background-color: #966da8;
		position:absolute;
		bottom: 0;
		left: 35px;
		}
#header{
	min-width: 700px;
	position: relative;
		}
#name{
		margin-top: 20px;
		min-width: 500px; 
		height: 90px;
		position: absolute;
		top: 0;
		left: 100px;
		display: inline-block;
		}
	
#titel {
		min-width: 500px;
		position: absolute;
		top: 100px;
		left: 100px;
		display: inline-block;
		}

	/*Ende Header*/
	/* === Mobile Navigation === */
#mobile-nav-dropdown{
	display: inline-block;
	height: 20px;
}
#mobile-nav-button{
	color: #FFF;
	font-size: 3rem;
	border: solid 2px #6d3689;
	height: 40px;
	width: 40px;
	position: relative;
}

#mobile-nav-content{
	display: none;
}
	
#mobile-nav-button > span{
		Position: absolute;
		bottom: -8px;
		font-size: 3rem;
		
}
#mobile-nav-dropdown:hover #mobile-nav-content{
	display: block;
}

/* === Ende Mobile Navigation === */		

/* === Allgemeine Navigation === */
#navi {
	background-color: lightgrey;
	position: relative;
	font-weight: bold;
	font-size: .9rem;
	}

#navi ul {
	width: 150px;
	padding: 0;
    margin-left: -23px;
    margin-top: 0;
    list-style-type: none;	
}
#navi  ul li {
		text-align: center;
		margin-top:3px;
		border-color: white !important;
		border: solid;
		border-width: 2px;
		border-radius:10px;
		background-color: #D7B0E5;
		
			}
.active {
	background-color: #DEA0E5 !important;
}
.active > a{
	background-color: #DEA0E5 !important;
			color: #2E0562 !important;

}

#navi ul li a {
		display: inline-block;
		width: 100px;
		font-size:13px;
		text-align: center;
		color: #9500E5;
		background-color: #D7B0E5;
		padding: 2px;
		margin: 5px;
		text-decoration: none;
	}
#navi ul  li  a:visited {
		background-color: #D7B0E5;
		color: #9500E5;
	}
		
#navi ul li a:hover {
		font-size:13px;
		text-align: center;
		color: #FFF;
		background-color: grey;
		transition: all 0.8s ease;
		border-color: blue;
		border-width: 5px;
	}
#mobile-nav{
	display: none;
}	

@media(max-width: 768px) {
	#desktop-nav{
		display: none;
		}		
	#mobile-nav{
		display: block;
		}	
}
/* === Ende Navigation === */

/* GRID SYSTEM */
.container {
	width: 95%;
	margin-left: auto;
	margin-right:auto;
}

.row::after{
		content: "";
		clear: both;
		display: block;
}
[class*='col-'] {
	float: left;

	}
.col-0{	width: 20%;    }
.col-1{	width: 16.666%;}
.col-2{	width: 33.333%;}
.col-4{	width: 40%;    }
.col-3{	width: 50%     }
.col-5{	width: 80%     }  /* Eingefügt 28.10.20*/
.col-6{	width: 100%;   }
.col-7{	width: 13.333%;}  /* Eingefügt 28.10.20*/

@media (max-width: 1024px) {
	
	.col-1 { width: 33.333%;}

}
@media (max-width: 768px) {
	.col-0{	width: 100%;  }
	.col-1{	width: 50%;  }
	.col-2{	width: 100%; }
	.col-3{	width: 100%  }
	.col-4{	width: 50%;  }


}
@media (max-width: 480px) {
	.col-0{	width: 100%;  }
	.col-1{	width: 100%; }
	.col-2{	width: 100%; }
	.col-3{	width: 100%  }
	.col-4{	width: 100%;  }
}

/* Ende GRID SYSTEM */

#footer {
	height: 15px;
	vertical-align: super;
	margin: 10px  0;
	font-size:80%;
	background:#BFBCD1;
	clear: both;
}
.col-4 img{
	width: 100%;
	height: auto;
	margin-top: 50px;
}

.col-5 img{
	width: auto;
	height: 450px;
	margin-top: 0px;
	float:left;
}

#losung {
		margin: 10px;
		background-color: #FFFFD8;
			}
#losung>img{
		max-width: 95%;
		height: auto;
		margin: 10px;
	}

figure {
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
}

 .img_c{
		height: auto;
		width: 100%;
		float:left;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		}
 .img_l{
		height: auto;
		width: 100%;
		float:left;
		ymargin: 5px 5px 5px 0;
		}

 .img_lk{
		height: 200px;
		width: auto;
		float:left;
		margin: 5px 15px 5px 0;
		}
		
 .img_lp{
		height: 380px;
		width: auto;
		float:left;
		margin: 5px 50px 5px 15px ;
		}
		
 .figure_A{
	 display: block;
		height: 450px;
		width: auto;
		margin: 5px 5px 5px 5px ;
		}
 .figure_B{
		max-height: 680px;
		width: auto;
		margin: 5px 5px 5px 5px ;
		}	
 .img_fig_qr{
		height: auto;
		width: 48%;
		float:right;
		margin: 5px 0 5px 5px ;
		}
 .img_fig_ql{
		height: auto;
		width: 48%;
		float:left;
		margin: 5px 0 5px 5px ;
		}
 .img_fig_qbr{
		height: auto%;
		width: 90%;
		float:center;
		margin: 5px 5px 5px 5px ;
		}
		
.img_fig_hr{
		height: auto;
		width: 45%;
		float:right;
		margin: 5px 0 5px 5px ;
		}
.img_fig_hl{
			height: auto;
			width: 45%;
			float:left;
			margin: 5px 0 5px 5px ;
			}
.img_r{
		height: auto;
		width: 100%;
		float:right;
		xmargin: 5px 0 5px 15px ;
		}
		
 .img_rk{
		height: 200px;
		width: auto;
		float:right;
		margin: 5px 15px 5px 0;
		}
		
		
 .img_rp{
		height: 380px;
		width: auto;
		float:right;
		margin: 5px 50px 5px 15px ;
		}

 .img_top{
		height: 100px;
		width: auto;
		float:left;
		margin: 25px 15px 5px 0;
		}

.blog1
{
	background-color: lightyellow;
	height: 320px;
	padding: 5px;
}
.blog2
{
	background-color: lightgrey;
	height: 400px;
	padding: 5px;
}
.blog2 img
{
	display: block
	
}
.box_1 {
		padding: 5px;
		font-weight: 400;
		font-size: 1.0em;
		text-align: center;
		margin: 5px 5px;
		border: 3px;
		border-style: solid;
		border-color: #ff8f00;
		background-color: #E3E8FB;
		}
.box_1A {
		xpadding: 5px;
		font-weight: 400;
		font-size: 1.0em;
		text-align: center;
		xmargin: 5px 5px;
		border: 3px;
		border-style: solid;
		border-color: #ff8f00;
		background-color: #E3E8FB;
		}
.box_1 span {
		font-size: 1.8em;
		}
.box_1 .klein {
		font-size: 1.0em;
		text-align: justify;
		padding: 5px;
			}
.box_1 .mittel{
		font-size: 1.3em;
		text-align: center;
		padding: 5px;
			}

.box_1 .img_gr{
		height: 160px;
		width: auto;
		float: right;
		margin: 10px;
		}
		
.box_1 .epd{
		height: 80px;
		width: auto;
		float:left;
		}	
.box_1 ximg{
		height: 160px;
		width: auto;
		float:right;
		margin: 5px 5px 0 10px;
		}	
.box_2 {
		width: 32%;
		padding: 5px;
		font-weight: 400;
		font-size: 1.0em;
		text-align: center;
		background-color: #FFFFD8;
		background-image: Linear-gradient(#D7B0E5, #FFFFD8);
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		margin: 5px 5px;
		box-shadow: 0 0 10px #ff8f00 inset;
			}
.text_3 {
		display: block;
		padding: 5px;
		font-weight: 400;
		font-size: 1.0em;
		text-align: justify;
		margin-top: 30px;
		margin-left: 5px;
		
}

.text_3 span{
		padding: 5px;
		font-weight: 400;
		font-size: 1.0em;
		text-align: justify;
		margin: 5px 5px;
}
.Bild_1_rechts {
		display: block;
		min-height: 300px;
		margin-right: 0;
}
.Bild_1_rechts img{
		height: 300px;
		width: auto;
		float: right;
		margin-right:0;

}
.Bild_1_links {
		display: block;
		min-height: 300px;
		margin-left: 0;
}
.Bild_1_links img{
		height: 300px;
		width: auto;
		float:left;
		margin-left: 0;
}