/* ############################################################
	231 - BLOG/STORYS AUF STARTSEITE
############################################################ */

/* Liste */
/* Allgemein */
.mdl231-list,
.mdl231-list-item {
	position: relative;
	width: 100%;
}


/* Foto */
.mdl231-foto-box {
	position: relative;
	overflow: hidden;
}
.mdl231-foto-box::before {
	content: "";
	display: block;
	width: 100%;
	padding-bottom: calc(100% / (5 / 3));
}
	.mdl231-foto-box > .mdl231-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;
	}
@media (min-width: 1020px) {
	.mdl231-foto-box {
		z-index: 1;
	}
	.mdl231-foto-box::before {
		padding-bottom: calc(100% / (3 / 2));
	}
}


/* Zeilenbegrenzung */
.mdl231-text-box .projekttitel,
.mdl231-text-box h3,
.mdl231-text-box p.subline {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* Kategorie */
.mdl231-kategorie {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 8px 16px;
	font-size: 0.625rem; /* 10px */
	line-height: 1.42; /* 14px */
	letter-spacing: 0.2px;
}
@media (min-width: 760px) {
	.mdl231-kategorie {
		padding: 8px 20px;
		font-size: 0.875rem; /* 14px */
		line-height: 1.42; /* 20px */
		letter-spacing: 0.28px;
	}
}


/* Projekttitel, Datum */
.mdl231-text-box .projekttitel,
.mdl231-text-box .datum {
	color: #cc0000;
	text-transform: uppercase;
	font-family: "Campton-Medium";
	font-size: 0.625rem; /* 10px */
	line-height: 1.42; /* 14px */
	letter-spacing: 2px;
}
@media (min-width: 760px) {
	.mdl231-text-box .projekttitel,
	.mdl231-text-box .datum {
		position: absolute;
		top: 35px;
		font-size: 0.75rem; /* 12px */
		line-height: 1.5; /* 18px */
		letter-spacing: 2.4px;
	}
	.mdl231-text-box .projekttitel {
		left: 35px;
		width: calc(100% - 80px - (2 * 34px));
		-webkit-line-clamp: 1;
	}
	.mdl231-text-box .datum {
		right: 35px;
	}
}


/* Textdaten */
.mdl231-text-box {
	position: relative;
	padding: 35px 30px;
}
	.mdl231-text-box {
		font-size: 0.875rem; /* 14px */
		line-height: 1.42; /* 20px */
		letter-spacing: 0.28px;
	}
		.mdl231-text-box h3 {
			margin-top: 17px;
			margin-bottom: 0;
			font-size: 1.25rem; /* 20px */
			line-height: 1.25; /* 25px */
			letter-spacing: 0;
		}
		.mdl231-text-box p.subline {
			-webkit-line-clamp: 4;
		}
		.mdl231-text-box h3 + p.subline {
			margin-top: 7px;
		}
		.mdl231-text-box p + p {
			margin-top: 17px;
		}
		
		/* Hyperlink mit Pfeil */
		.mdl231-text-box a.weiterlesen-link {
			font-family: "Campton-Medium";
		}
		.mdl231-text-box a.weiterlesen-link,
		.mdl231-text-box a.weiterlesen-link::after {
			color: #cc0000;
		}
		.mdl231-text-box a.weiterlesen-link::after {
			content: "\2192";
			display: inline-block;
			padding-left: 6px;
			/*-o-transform: translateX(0);
			-ms-transform: translateX(0);
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			transform: translateX(0);
			-o-transition: transform 0.3s;
			-ms-transition: transform 0.3s;
			-moz-transition: transform 0.3s;
			-webkit-transition: transform 0.3s;
			transition: transform 0.3s;*/
		}
@media (min-width: 760px) {
	.mdl231-text-box {
		padding: 35px;
	}
		.mdl231-text-box {
			font-size: 1rem; /* 16px */
			line-height: 1.625; /* 26px */
			letter-spacing: 0.32px;
		}
			.mdl231-text-box h3 {
				margin-top: 54px;
				font-size: 1.75rem; /* 28px */
				line-height: 1.21; /* 34px */
				-webkit-line-clamp: 2;
			}
			.mdl231-text-box h3 + p.subline {
				margin-top: 18px;
				-webkit-line-clamp: 4;
			}
			
			/* Hyperlink mit Pfeil */
			.mdl231-text-box a.weiterlesen-link::after {
				padding-left: 12px;
			}
			/*.mdl231-text-box a.weiterlesen-link:hover::after {
				-o-transform: translateX(4px);
				-ms-transform: translateX(4px);
				-moz-transform: translateX(4px);
				-webkit-transform: translateX(4px);
				transform: translateX(4px);
			}*/
			.mdl231-text-box a.weiterlesen-link:hover::after {
				-webkit-animation-duration: 1s;
				-webkit-animation-name: bounceInRight;
				-webkit-animation-timing-function: ease-in-out;
				animation-duration: 1s;
				animation-name: bounceInRight;
				animation-timing-function: ease-in-out;
			}
}
@media (min-width: 1020px) {
	.mdl231-text-box {
		z-index: 2;
		width: calc(100% - (35px * 2));
		margin-top: -100px;
		margin-left: 35px;
		padding: 35px;
	}
}
@media (min-width: 1280px) {
	.mdl231-text-box {
		padding: 35px;
	}
}


/* Button: Alle Storys */
a.mdl231-button-all {
	position: relative;
	display: inline-block;
	background-color: #201d17;
	border-radius: 19px;
	margin-top: 50px;
	padding: 12px 24px;
	font-size: 0.875rem; /* 14px */
	line-height: 1.25; /* 17.5px */
	letter-spacing: 0.56px;
	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;
}
a.mdl231-button-all:hover {
	background-color: #cc0000;
	color: #efe0c2;
}
@media (min-width: 760px) {
	a.mdl231-button-all {
		border-radius: 25px;
		margin-top: 120px;
		padding: 12px 30px;
		font-size: 1rem; /* 16px */
		line-height: 1.63; /* 26px */
		letter-spacing: 0.64px;
	}
}