@charset "utf-8";
/* CSS Document */

.container {
	max-width:1200px;
	margin:0 auto;
	background:#efefff;
	display:flex;
	flex-wrap: wrap;
}

.columns {
	flex-wrap: wrap;
	box-sizing:border-box;
	position:relative;
}
.columns a {
	text-decoration:none;
	color:#000000;
	
}
.columns a:hover {
	color:rgba(255,255,255,1);
	background:#990000;
}


.row {
	width:auto;	
	display:flex;
	flex-wrap: wrap;
	
}
.row:before,
.row:after {
	content:'';
	display:table;
}

.row:after {
	clear:both;
}

/*_______________________________
Bild mittig
___________________________________*/
figure {
	float:right;
	width: 100%;
	margin:0 0 0.5em 0.5em;
}

figure img {
	width: 100%;
	height:auto;
}

figcaption {
	width: 100%;
	text-align: center;
	padding:5px;
	color: black;
	font-size:small;
	
}
/*____________________________________
ENDE Bild mittig
____________________________________________*/


/*______________________________________________
Gestaltung der Links
_________________________________________________*/

.link{
	list-style-type:none;
	width:100%;	
	margin-left:auto;
	margin-right:auto;
}

.link li a {
	text-decoration:none;
	color:#000080;
	text-align:left;	
	display:block;
	padding:5px;
	border-left:#000080 solid 1px;
	border-right:#000080 solid 1px;
	border-bottom:#000080 solid 1px;
}
/*nur das erstes li bekommt obere Linie*/
.link li:nth-child(1) {
	border-top:rgba(0,0,128,1) solid 1px;
}


/*Änderung der Farbe bei MouseObver*/
.link li:hover a:hover {
	background:rgba(153,0,0,1);
	color:#FFFFFF;
}

/*__________________________________________
ENDE Gestaltung der Links
______________________________________________*/


/*small*/
@media screen and (max-width:640px) {
	.s-1 {
		width:100%;
	}
}

/*medium*/
@media screen and (min-width:640px) and (max-width:960px) {
	.m-1 {
		width:11.45833%;
	}
	.m-2 {
	width:23.95833%;
	}
	.m-3 {
	width:36.45833%;
	}
	.m-4 {
	width:48.95833%;
	}
	.m-5 {
	width:61.45833%;
	}
	.m-6 {
	width:73.95833%;
		}	
	.m-7 {
	width:86.45833%
	}
	.m-8 {
	width:98.95833%
		}	
	.m-1, .m-2, .m-3, .m-4, .m-5, .m-6, .m-7, .m-8 {
		  margin:0 0.52083%;
	}
	
}
/*large*/
@media screen and (min-width:960px) {
	.l-1 {
		width:11.66666%;
	}
	.l-2 {
		width:24.16666%;
	}
	.l-3 {
		width:36.66666%;
	}
	.l-4 {
		width:49.16666%;
	}
	.l-5 {
		width:61.66666%;
	}
	.l-6 {
		width:74.16666%;
	}
	.l-7 {
		width:86.66666%;
	}
	.l-8 {
		width:99.16666%;
	}
	.l-1, .l-2, .l-3, .l-4, .l-5, .l-6, .l-7, .l-8 {
		margin:0 0.41666%;
	}
}