/* CSS layout */
/* 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 */
/* CSS layout */
*, *::before, *::after{
	box-sizing: border-box;
}
html{
	margin: 0;
	border: 0;
	background:lightgrey;
		}
	
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 */
		
.clearfix::after{
			content"";
			clear: both;
			display: bock;
			}
hr{
		height: 14px; 
		background-color: #BFBCD1; 
		margin-bottom: 0;
			}

.blocksatz {
		text-align: justify;
		padding: 10px;
}
.small{
	font-size: small;
	font-weight: lighter;
}	
.medium{
	font-size: medium;
	}	
.img_70{
	width: 70%;
	height: auto;
}
.img_90{
	width: 90%;
	height: auto;
}
.img_100{
	width: 100%;
	height: auto;
}

	
	/* 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: 500px;
	position: relative;
		}
#name{
		margin-top: 20px;
		min-width: 500px; 
		height: 90px;
		position: absolute;
		top: 0;
		left: 100px;
		display: inline-block;
		}
	
.linie {
		height: 14px;
		
		display: block;
		margin-top: -25px;
		margin-left: 62px;
		}
#titel {
		min-width: 500px;
		position: absolute;
		top: 80px;
		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;
}	
#mobile-nav-text {
	display: none;
}

@media(max-width: 768px) {
	#desktop-nav{
		display: none;
		}		
	#mobile-nav{
		display: block;
		}
	#mobile-nav-text{
		display: block;
		}		
}
/* === Ende Navigation === */
.bild {
	display: inline-block;
	padding: 5px;
}
.bild img{
	width: 100px;
	height:auto;
}

.label {
	width: 90%;
	height: 80px;
	background-image: linear-gradient(#CC99FF, #CC9999);
	text-align: center;
	padding: 10px;
	font-style: italic;
	border-radius: 20px;
	margin-top: 10px;
}

.label a {
	text-decoration: none;
}

.label a span {
	font-size: small;
	
}
.Ausgabe{
	margin-left: 20%;
	height: 4px;
}
.Mobil-Ausgabe{
	height: 4px;
}
.Ebene0 {
	max-width: 400px;
}

.Ebene1 {
	font-size: 13pt;
	font-weight: normal;
	color: #281B61;
}
.box_1{
		font-weight: normal;
		margin: 5px;
		border-style: solid;
		border-color: #ff8f00;
		width: 100%;
		float:left;
		vertical-align: super;
		padding: 5px 5px 5px 15px;
}
.box_1 p {
		font-weight: normal;
}

.box_1 img {
		padding: 1rem;
		width: 50%;
		float: left;
}

.box_2{
		text-align: left;
		margin: 5px;
		border-style: solid;
		border-color: #ff8f00;
		width: 95%;
		float:left;
		vertical-align: super;
		padding: 5px 5px 5px 15px;
}

figure.f2{
	margin-right:0px;
	margin-top:0px;
	padding: 0.8em;
	background: white;
	width: 350px;
	float:right;
	}
figure.f3{
	margin-right:0px;
	margin-bottom:0px;
	padding:1em;
	background: white;
	width: 350px;
	font-size: small;
	text-align: center;
	float:right;
	}
figure.f6{
	
	margin-bottom:0px;
	padding:1em;
	background: white;
	width: auto;
	font-size: small;
	text-align: center;
	float:right;
	font-weight: lighter;
	}
.f4{
	height: 175px;
	width: auto;
	float:right;
	margin: 5px;
		}
.f5{
	height: auto;
	width: 95%;
	float:right;
	margin: 5px;
		}
@media (max-width: 768px) {
	.f5{
		height: 200px;
		width: auto;
		float:right;
		margin: 5px;
		}

	
}
figure.f8{
	margin-bottom:0px;
	padding:1em;
	background: white;
	width: auto;
	font-size: small;
	text-align: left;
	float:right;
	}
.cap{
		color: #9500E5;
		float: left;
		padding: 5px 15px 0 0;
		font-size: 450%;
		line-height:0.66em;
}

.columns{
	padding: 5px;
	column-count: 3;
	column-gap: 40px;
	column-rule: 1px solid #000;
	text-align: justify;
}
.columns2{
	padding: 5px;
	column-count: 2;
	column-gap: 40px;
	column-rule: 1px solid #000;
	text-align: justify;
}

                  /*=== 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*/
.col-8{	width: 100%;   
		text-align: left;}
.col-4 img{
	width: 90%;
	height: auto;
	margin-top: 10px;
}
.col-3 img{
	width: 100%;
	height: auto;
	margin-top: 10px;
}
@media (max-width: 1024px) {
	
	.col-1 { width: 33.333%;}

}
@media (max-width: 768px) {

	.col-1{	width: 50%;  }
	.col-2{	width: 33.333%; }
	.col-3{	width: 100%  }
	.columns{
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}


}
@media (max-width: 480px) {
	.col-0{	width: 30%;  }
	.col-1{	width: 100%; }
	.col-2{	width: 100%; }
	.col-3{	width: 100%  }
	.col-4{	width: 70%;  }
	.columns{
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
}
#footer {
	height: 15px;
	vertical-align: super;
	margin: 10px  0;
	font-size:80%;
	background:#BFBCD1;
	clear: both;
}