﻿/*@charset "UTF-8"; */
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}


/* ----------------------------------------------------------------------------- *
 *                          Styles fuer Fixes Layout                              *
 * ----------------------------------------------------------------------------- */
/*
.page-wrapper {
	margin: 0 auto;
	width: 1240px;
}

.header {
	padding: 1.5em 24px;
}

.main-nav {
	width: 213px;
	float: left;
}

.main-wrapper {
	width: 1027px;
	margin-left: 213px;
}

.main-content {
	float: left;
	width: 735px;
	padding: 2em 24px;
}

.aside {
	width: 292px;
	margin-left: 735px;
	padding: 30px 24px;
}

.footer {
	padding: 0.8em 24px;
}
*/


/* ----------------------------------------------------------------------------- *
 *                          Styles fuer Fluides Layout                            *
 * ----------------------------------------------------------------------------- */


.page-wrapper {
	margin: 0 auto;
	max-width: /*1400px*/1200px;
	/*OG */
}

.header {
	padding: /*1.5em 1.935483871% */ 2em 0 2em 15%;
}

/*.main-nav {
	width: 18%;
	float: left;
} */

.main-wrapper {
	width: /*82.822580645%*/ 100%;
	margin-left: 	0/*/18%*/;
}

.main-content {
	float: left;
	width: /*71.567672833%*/ 100%;
	padding: 2em 15%/*2.3369036027%*/;
	;
}

/*.aside {
	width: 28.432327167%;
	margin-left: 71.567672833%;
	padding: 2em 2.3369036027%;
}*/

.footer {
	padding: 0.8em 1.935483871%;
}

/* ----------------------------------------------------------------------------- *
 *                          Styles fuer images - OG                              *
 * ----------------------------------------------------------------------------- */

.introbild img {
width: 80%; height: auto;
}
.introbild {
text-align: center;
}



/* ----------------------------------------------------------------------------- *
 *                          Styles fuer Teaserboxen                               *
 * ----------------------------------------------------------------------------- */

.teaser-box {
	background-color: #fff;
	border: 1px solid #ddd;
}

.teaser-box h2 {
	margin: 0;
	font-size: 20px;
}


h1, h10{
	margin: 0.5em 0 0 0;
}


@media screen and (max-width: 850px) {
	h1, h10 {
		font-size: 2.5rem;
	}
	.teaser-box {
		overflow: auto;
		width: 100%;
		margin-bottom: 1em;
	}
	.teaser-box img {
		width: 45%;
		float: left;
		margin: 1em;
	}
	.box-inner1, .box-inner2, .box-inner3 {
		line-height: 1.3;
	    min-height: 0;
	    padding: 1em;
	}
}

@media screen and (min-width: 851px) {
	.section.teaser-articles {
		display: flex
	}
	.teaser-box {
		flex: 1 33.333333%;
		margin: 0 2.3369036027% 2em 0;
	}
	.teaser-box:nth-of-type(3n+3) {
		margin-right: 0;
	}
	.teaser-box p:last-of-type {
		margin-bottom: 0;
	}
	.teaser-box img {
		width: 100%;
	}
	.box-inner1, .box-inner2, .box-inner3 {
	padding: 1em;
	min-height: 250px;
}

}

/*
.teaser-box {
	transition: all 1.5s ease;
}
*/
