
/* ############################################################
	330 - TEASER-NAVIGATION
############################################################ */

/* Liste */
/* Allgemein */
.mdl330-list,
.mdl330-list-item {
	position: relative;
	width: 100%;
}


/* Foto */
.mdl330-foto-box {
	position: relative;
	overflow: hidden;
}
.mdl330-foto-box::before {
	content: "";
	display: block;
	width: 100%;
	padding-bottom: calc(100% / (5 / 3));
}
	.mdl330-foto-box > .mdl330-image {
		display: inline-block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #efe0c2;
		background-blend-mode: multiply;
		-o-transition: transform 1s;
		-ms-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
		transition: transform 1s;
	}
	.mdl330-foto-box:hover .mdl330-image {
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
@media (min-width: 1020px) {
	.mdl330-foto-box::before {
		padding-bottom: calc(100% / (3 / 2));
	}
}


/* Textdaten */
.mdl330-text-item {
	padding-top: 40px;
}
	.mdl330-text-item span {
		display: block;
		font-size: 0.6875rem; /* 11px */
		line-height: 1.36; /* 15px */
		letter-spacing: 2.2px;
	}
	.mdl330-text-item h3 {
		font-size: 1.5rem; /* 24px */
		line-height: 1.25; /* 30px */
		letter-spacing: 0;
	}
		.mdl330-text-item span + h3,
		.mdl330-text-item h3 + p {
			margin-top: 7px;
		}
	.mdl330-text-item a.mdl330-link {
		margin-top: 27px;
		position: relative;
		display: inline-block;
		left: 50%;
		transform: translateX(-50%);
		background-color: #201d17;
		border-radius: 19px;
		padding: 12px 24px;
		font-size: 0.75rem; /* 12px */
		line-height: 1.25; /* 15px */
		letter-spacing: 0.48px;
		color: #efe0c2;
		-o-transition: background 0.3s ease;
		-ms-transition: background 0.3s ease;
		-moz-transition: background 0.3s ease;
		-webkit-transition: background 0.3s ease;
		transition: background 0.3s ease;
	}
	.mdl330-text-item a.mdl330-link:hover {
		background-color: #cc0000;
	}
@media (min-width: 760px) {
	.mdl330-text-item {
		padding-top: 60px;
	}
		.mdl330-text-item span {
			font-size: 0.875rem; /* 14px */
			line-height: 1.57; /* 22px */
			letter-spacing: 2.8px;
		}
		.mdl330-text-item h3 {
			font-size: 2.25rem; /* 36px */
			line-height: 1.22; /* 44px */
		}
			.mdl330-text-item span + h3,
			.mdl330-text-item h3 + p {
				margin-top: 15px;
			}
		.mdl330-text-item a.mdl330-link {
			border-radius: 25px;
			padding: 12px 30px;
			font-size: 1rem; /* 16px */
			line-height: 1.63; /* 26px */
			letter-spacing: 0.64px;
		}
}
@media (min-width: 1020px) {
	.mdl330-text-item {
		padding: 40px 40px 0;
	}
		.mdl330-text-item a.mdl330-link {
			left: auto;
			transform: none;
		}
}
@media (min-width: 1280px) {
	.mdl330-text-item {
		padding: 60px 60px 0;
	}
}