#eyeCatcher{
	margin: 32px 16px 0;
	background: #FFF;
	@include box-shadow($std-box-shadow);
	overflow: hidden;

	@include breakpoint($desktop-s){
		//max-height: 450px;
	}
	&.smallHeader {
		margin-left: 5.3%;
		margin-right: 5.3%;
		@include breakpoint($mobile-xl) {
			width:61%;
			padding:$content-padding;
			margin-left:auto;
			margin-right:auto;
			h1 {
				font-size: 1.8em;
			}
			a.button-full, a.button-border {
				display: inline-block;
				margin: 0 7px 6px 0;
				padding: 8px 12px;
			}
		}

		@include breakpoint($desktop-s){
			max-width:46.3%;
			.imageContainer {
				width: 46%;
			}
			.contentContainer {
				width: 54%;
			}
		}
	}
}

.imageContainer{
	height: 100%;
	overflow: hidden;
	margin-bottom:15px;
	position: relative;

	img{
		width: 100%;
		min-height: 160px;
	}

	@include breakpoint($mobile-xl){
		float: left;
		width: 50%;
		margin-bottom: 0;
	}

	@include breakpoint($desktop-s){
		float: left;
		width: 45%;
	}

	div.bottomBar{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		@include box-sizing('border-box');
		background: rgba($aqua, 0.8);
		text-align: right;
		padding: 10px 0;

		a{
			display: inline-block;
			color: #FFF;
			margin: 0 8px;

			&.merken, &.entmerken, &.kontakt{
				span{
					display: inline-block;
					vertical-align: middle;

					&.label{
						display: none;
					}
				}

				span[class^="icon-"]{
					font-size: 200%;
				}

				&:hover{
					span.label{
						width: 80px;
						margin-left: 8px;
					}
				}

				&.entmerken{
					display: none;
					color: $aqua;

					span[class^="icon-"]{
						background: #FFF;
						@include border-radius(14px);
						@include transform(rotate(45deg));
					}
				}
			}
		}
	}
}

.contentContainer{
	height: 100%;
	overflow: hidden;

	@include breakpoint($mobile-xl){
		float: left;
		width: 50%;
	}

	@include breakpoint($desktop-s){
		float: right;
		width: 55%;
	}

	h1{
		margin: 0 0 16px 0;
	}
}

.contentContainer_inner{
	padding: 1vw $content-padding 0;
	//width: 100%;
}