/*========================
Klassen Layout
=========================*/
.sec-first {
	padding-top: 20px;
	border-top: 55px solid black;
} /* section unterhalb der Nav-Leiste*/
.no-h1 {
	height: 4rem; /* abstand falls keine h1 */
}
.row, .row-full, .row-big, .row-big-bild, .row-big-image, .description {
	position: relative;
	height: auto;
    margin: 0 auto 0 auto;
-webkit-box-sizing: border-box; /* ältere Wbkit-Browser */
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box; /* W3C/Chrome//Opera/IE */
	display: flex;
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
	background: none;
}
.row {
	padding: 5px 10px;
}
.row, .row-full {   /*  row-full ist ohne padding fuer bilder  */
	max-width: 1400px;
	width: auto;
}
.row-big {   /*  row-big  fuer bildschirmbreite  */
	width: 100%;
	padding: 10px;
}
.row-big-bild {   /*  row-big  fuer bildschirmbreite mit 20px aussen für bilder anordnung  */
	width: 100%;
	padding: 10px;
}
.row-big-image {   /*  row-big-image  fuer bildschirmbreite ohne padding fuer bilder  */
	width: 100%;
	padding: 0;
}
/* Spalten */
.clmn_2l, .clmn_2r, .clmn_3l, .clmn_3m, .clmn_3r, .clmn_1-3l, .clmn_2-3r {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	flex: 1 1 auto;  /*gleiche Höhe siehe row display: flex, float bei mediaqueries allerdings aufgehoben */
	margin: 0;
	padding: 0;
}
/* 2 gleiche Spalten */
.clmn_2l, .clmn_2r {
	width: 50%;
}
.clmn_2l {
	margin: 0 5px 0 0;
}
.clmn_2r {
	margin: 0 0 0 5px;
}
@media screen and (max-width: 768px) {	
	.clmn_2l, .clmn_2r {
		width: 100%;
		margin-bottom: 0.6rem;
	}
}
/* 3 gleiche Spalten */
.clmn_3l, .clmn_3m, .clmn_3r {
	width: 33.3333333328%;
}
.clmn_3l {
	margin-right: 5px;
}
.clmn_3m {
	margin-right: 5px;
	margin-left: 5px;
}
.clmn_3r {
	margin-left: 5px;
}
@media screen and (max-width: 768px) {	
	.clmn_3l, .clmn_3m, .clmn_3r, .clmn_1-3l, .clmn_2-3r {
		width: 100%;
		margin-bottom: 0.6rem;
	}
}
/* 3 Spalten, 1zu2 */
.clmn_1-3l {
	width: 33.3333333328%;
	margin-right: 5px;
}
.clmn_2-3r {
	width: 66.6666666656%;
	margin-left: 5px;
}
/* verschachtelung */
.clmn_row {
	position: relative;
	padding: 0;
	width: 100%;
	height: auto;
    margin: 0 auto 0 auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: flex;
}
/*========================
1 box in row
=========================*/
.box_1 {
	width: 100%;
	max-width: 990px;
	height: auto;
	padding: 0;
}
.box_100 {
	width: 100%;
	height: auto;
	padding: 0;
}
/*========================
2 gleiche boxen in row
=========================*/
.box_2l, .box_2r, .box_2 {
	width: 50%;
/*	overflow: hidden; */
}
.box_2l {
	padding: 0 10px 0 0;
}
.box_2r {
	padding: 0 0 0 10px;
}
.box_2 {
	padding: 0 10px 0 10px;
}
/*========================
3 gleiche boxen in row
=========================*/
.box_3l, .box_3m, .box_3r {
	width: 33.3333333328%;
	overflow: hidden;
}
.box_3l {
	padding: 0 5px 0 0;
}
.box_3m {
	padding: 0 5px 0 5px;
}
.box_3r {
	padding: 0 0 0 5px;
}
/*========================
4 gleiche boxen in row
=========================*/
.box_4l, .box_4lm, .box_4rm, .box_4r {
	width: 25%;
	overflow: hidden;
}
.box_4l {
	padding: 0 5px 0 0;
}
.box_4lm {
	padding: 0 5px 0 5px;
}
.box_4rm {
	padding: 0 5px 0 5px;
}
.box_4r {
	padding: 0 0 0 5px;
}
/*========================
2 boxen 3:1 in row mit box_4r
=========================*/
.box_3-4l {
	width: 75%;
	overflow: hidden;
	padding: 0 5px 0 5px;
}
/*========================
1 bild in row
=========================*/
.bild_100 {
	width: 100%;
	height: auto;
	margin: 0;
}
/*========================
2 gleiche bilder in row
=========================*/
.bild_2l, .bild_2r, .bild_2 {
	width: 50%;
/*	overflow: hidden; */
}
.bild_2l {
	margin: 0 5px 0 0;
}
.bild_2r {
	margin: 0 0 0 5px;
}
.bild_2 {		/* in 4er reihe mit 4left und 4right*/
	margin: 0 5px 0 5px;
}
/*========================
3 gleiche bilder in row
=========================*/
.bild_3l, .bild_3m, .bild_3r {
	width: 33.3333333328%;
	overflow: hidden;
}
.bild_3l {
	margin: 0 5px 0 0;
}
.bild_3m {
	margin: 0 5px 0 5px;
}
.bild_3r {
	margin: 0 0 0 5px;
}
/*========================
4 gleiche bilder in row
=========================*/
.bild_4l, .bild_4lm, .bild_4rm, .bild_4r {
	width: 25%;
	overflow: hidden;
}
.bild_4l {
	margin: 0 5px 0 0;
}
.bild_4lm {
	margin: 0 5px 0 5px;
}
.bild_4rm {
	margin: 0 5px 0 5px;
}
.bild_4r {
	margin: 0 0 0 5px;
}
.bild_3-4l {
	width: 75%;
	overflow: hidden;
	margin: 0 5px 0 0;
} /* 3-bild-breite von 4, links dazu bild_4r */
/*===================================
alle boxen in row flex und box-sizing
===================================*/
.clmn_2l, .clmn_2r, .clmn_sub2l, .clmn_sub2r, .box_1, .box_100, .box_2l, .box_2r, .box_2, .box_3l, .box_3m, .box_3r, .box_4l, .box_4lm, .box_4rm, .box_4r, .box_3-4l {
	display: block;
	margin: 0;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	flex: auto;  /*gleiche Höhe siehe row display: flex, bei mediaqueries: wrap */
}
.clmn_sub2l {
	margin: 0 5px 0 0;
}
.clmn_sub2r {
	margin: 0 0 0 5px;
}
/* medium tablet */
@media screen and (max-width: 800px) {
	.clmn_sub2l, .clmn_sub2r {
		width: 100%;
		margin:10px 0 10px 0;
		padding: 0;
	}
	.clmn_2l, .clmn_2r, .box_1, .box_2l, .box_2r, .box_2, .box_3l, .box_3m, .box_3r, .box_4l, .box_4lm, .box_4rm, .box_4r, .box_3-4l {
		width: 100%;
		margin:0 0 20px 0;
		padding: 0 10px 0 10px;
	}
	.box_100 {
		padding:0;
		margin: 0 0 20px 0;
	}
	.row, .row-big, .row-big-image, .row-big-bild, .clmn_row {
		flex-wrap: wrap; /* bricht um */
		width: auto;
		margin:0;
	}
	.row, .row-big, .row-big-bild, .clmn_row  {
		padding: 0 20px 0 20px;
	}
}
/*===================================
alle bilder in row flex und box-sizing
===================================*/
.bild_1, .bild_100, .bild_2l, .bild_2r, .bild_2, .bild_3l, .bild_3m, .bild_3r, .bild_4l, .bild_4lm, .bild_4rm, .bild_4r, .bild_3-4l {
	display: block;
	padding: 0;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	flex: auto;  /*gleiche Höhe siehe row display: flex, bei mediaqueries: wrap */
}
/* medium tablet */
@media screen and (max-width: 800px) {
	.bild_1, .bild_100, .bild_2l, .bild_2r, .bild_2, .bild_3l, .bild_3m, .bild_3r, .bild_4l, .bild_4lm, .bild_4rm, .bild_4r, .bild_3-4l {
		width: 100%;
		margin:0 0 10px 0;
	}
}
.pull-right {
	display: block;
    float: right !important;
	margin: 0 20px 0 0;
	padding: 0;
}
.pull-left {
	display: block;
    float: left !important;
	margin: 0 0 0 10px;
	padding: 0;
}
.copyright {
	display: block;
	margin: 10px 10px 0px 10px;
	padding: 0 0 10px 0;
-webkit-box-sizing: border-box; /* ältere Wbkit-Browser */
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box; /* W3C/Chrome//Opera/IE */
}
.marginbottom50 {
	margin: 0 auto 50px auto;
}

