#teaser {	
	width: 100%;
	height: 560px;
	position: relative;
	display: block;
	z-index: 1;
	margin-bottom:250px;
}

	#teaser #bgimage {
		width: 100%;
		height: 520px;
		position: relative;
		display: block;
		z-index: 1;
		background: white url(/grafiken/home_teaser.jpg) no-repeat 50% 50%;
		background-size: cover;
		-webkit-clip-path: polygon(0 0, 0 100%, 100% 85%, 100% 0);
		clip-path: polygon(0 0, 0 100%, 100% 85%, 100% 0);
		margin-bottom: 40px;
	}

		#teaser #bgimage .overlay {
			position:relative;
			display: block;
			width: 400px;
			height: 100%;
			margin-left:10%;
			background-color: rgba(0, 153, 204, 0.9);
			transform:skewX(-12deg);
		}

			#teaser #bgimage .overlay h1 {
				transform: skewX(12deg);
				color: #fff;
				position:absolute;
				left:50%;
				top:15%;
			}

					#teaser #bgimage .overlay h1 .secondline {						
						font-size:1.6em;
						text-transform:uppercase;
					}
				#teaser #bgimage .overlay h1 .thirdline {					
					font-size: 1.8em;
					text-transform: uppercase;
				}

					#teaser #bgimage .overlay .eyecatcher {
						display: block;
						width: 20vmin;
						height: 20vmin;
						position: absolute;
						left: -50px;
						top: 50%;
						background-color: #fff;
						border: 5px solid var(--main-color);
						border-radius: 10vmin;
						transform: skewX(12deg);
						text-align: center;
						line-height: 1.8em;
						font-weight: bold;
						font-size: 1em;
						padding-top: 15px;
					}

				#teaser #bgimage .overlay .eyecatcher b {
					color: var(--main-color);
					display:block;
					font-size:1.2em;
				}

	#teaser #center-wrapper {
		width: var(--content-width-nopadding); 
		margin: 0 auto;
		padding: 20px;
		position: relative;
		display: block;
		background-color: #fff;
		border-radius: 5px;
		/*left: calc(50vw - 494px);*/
		z-index: 2;
		box-shadow: var(--text-color) 1px 1px 6px;
	}

#teaser #center-wrapper .row {
		display:grid;
		grid-template-columns: 2fr 2fr 2fr 1fr;
		grid-auto-flow: row;
		grid-row-gap: 10px;
		width: 100%;
		margin-bottom:20px;
	}

		#teaser #center-wrapper .row div label {
			color: var(--main-color);
			font-weight: bold;
			display: block;
			margin-bottom: 5px;
		}

		#teaser #center-wrapper .row div select {
			min-width: 200px;
			max-width: 250px;
			border-radius: 3px;
			background-color: rgba(255,255,255,0.9);
		}


@media (min-width:768px) and (max-width:988px) {
	#teaser {
		margin-bottom:300px;
	}
	
	#teaser #center-wrapper {
		width: 96%;
		margin: 0 auto;
		padding: 20px;
		position: relative;
		display: block;
		border-radius: 5px;
		left:0;
		bottom: 50px;
		z-index: 2;
	}

		#teaser #center-wrapper .row {
			flex-wrap: wrap;
			grid-template-columns: 1fr 1fr;
			grid-auto-flow: row;
			grid-row-gap: 5px;
			width: 100%;
		}
}


@media (max-width:767px) {
	#teaser {
		margin-bottom:320px;
	}
	
	#teaser #bgimage .overlay {		
		width: 100vw;
		margin-left:-50vw;
		transform: skewX(-12deg);
	}
			
	#teaser #center-wrapper {
		width: 96%;
		margin: 0 auto;
		padding: 20px;
		position: relative;
		display: block;	
		left:0;
		bottom:240px;
		z-index: 2;
	}

		#teaser #center-wrapper .row {
			flex-wrap: wrap;
			grid-template-columns: 1fr;
			grid-auto-flow: row;
			grid-row-gap: 10px;
			width: 100%;
		}

			#teaser #center-wrapper .row div select {		
				max-width: inherit;		
			}
	#teaser #center-wrapper .row .submitbox label {
		height: 5px;
	}
}