/* ############################################################
	260 - TIMELINE
############################################################ */

/* Modulbox */
.mdl260-modul-box {
	position: relative;
	width: 100%;
}


/* Box */
.mdl260-inline-box {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;
	padding-bottom: 70px;
}
.mdl260-inline-box:first-of-type {
	padding-bottom: 110px;
}
.mdl260-inline-box:last-of-type {
	padding-bottom: 0;
}
.mdl260-inline-box::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 12px;
	width: 1px;
	height: 100%;
	background-color: var(--main-color-1);
}
.mdl260-inline-box:first-of-type::before {
	top: 9px;
}
.mdl260-inline-box:last-of-type::before {
	content: none;
}
@media screen and (min-width: 768px) {
	.mdl260-inline-box {
		flex-direction: row;
		padding-bottom: 100px;
	}
	.mdl260-inline-box:first-of-type {
		padding-bottom: 140px;
	}
	.mdl260-inline-box::before {
		left: 16px;
	}
	.mdl260-inline-box:first-of-type::before {
		top: 11px;
	}
}
@media screen and (min-width: 1200px) {
	.mdl260-inline-box {
		padding-bottom: 110px;
	}
	.mdl260-inline-box:first-of-type {
		padding-bottom: 170px;
	}
	.mdl260-inline-box::before {
		left: calc((2 * var(--col)) + (2 * var(--gap)));
	}
	.mdl260-inline-box:first-of-type::before {
		top: 13px;
	}
}


/* Datum */
.mdl260-inline-box .date-wrapper {
	position: relative;
	flex: 0 0 auto;
	width: calc(100% - 36px);
	margin-left: 36px;
}
.mdl260-inline-box:not(:first-of-type) .date-wrapper {
	margin-bottom: 22px;
}
	.mdl260-inline-box .date-wrapper b::after {
		content: "";
		display: inline-block;
		position: absolute;
		top: -3px;
		left: -36px;
		width: 24px;
		height: 24px;
		background-color: var(--main-color-2);
		border-radius: 50%;
	}
@media screen and (min-width: 768px) {
	.mdl260-inline-box .date-wrapper {
		width: calc(100% - 47px);
		margin-left: 47px;
	}
	.mdl260-inline-box:not(:first-of-type) .date-wrapper {
		margin-bottom: 29px;
	}
		.mdl260-inline-box .date-wrapper b::after {
			left: -47px;
			width: 31px;
			height: 31px;
		}
}
@media screen and (min-width: 1200px) {
	.mdl260-inline-box .date-wrapper {
		width: calc((2 * var(--col)) + (1 * var(--gap)));
		margin-left: 0;
		margin-right: calc((1 * var(--col)) + (2 * var(--gap)));
		text-align: right;
	}
	.mdl260-inline-box:not(:first-of-type) .date-wrapper {
		margin-bottom: 0px;
	}
		.mdl260-inline-box .date-wrapper b::after {
			left: auto;
			right: calc(-1 * ((1 * var(--gap)) + 16px));
		}
}
@media screen and (min-width: 1400px) {
	.mdl260-inline-box .date-wrapper b::after {
		right: calc(-1 * ((1 * var(--gap)) + 18px));
		width: 35px;
		height: 35px;
	}
}


/* Text */
.mdl260-inline-box .content-wrapper {
	flex: 0 0 auto;
	width: calc(100% - 36px);
	margin-left: 36px;
}
@media screen and (min-width: 768px) {
	.mdl260-inline-box .content-wrapper {
		width: calc(100% - 47px);
		margin-left: 47px;
	}
}
@media screen and (min-width: 992px) {
	.mdl260-inline-box .content-wrapper {
		width: calc((6 * var(--col-width-1)) + (5 * var(--gap)));
	}
	.mdl260-inline-box:first-of-type .content-wrapper {
		width: calc(100% - 47px);
	}
	.mdl260-inline-box .picture-wrapper + .content-wrapper {
		margin-left: 0;
	}
}
@media screen and (min-width: 1200px) {
	.mdl260-inline-box .content-wrapper {
		width: calc(((6 * var(--col-width-1)) + (5 * var(--gap))) - ((1 * var(--col)) + (1 * var(--gap))));
		margin-left: 0;
	}
	.mdl260-inline-box:first-of-type .content-wrapper {
		width: calc(((9 * var(--col-width-1)) + (8 * var(--gap))) - ((2 * var(--col)) + (2 * var(--gap))));
	}
}


/* Foto */
.mdl260-inline-box .picture-wrapper {
	flex: 0 0 auto;
	width: calc(100% - 36px);
	margin-left: 36px;
	margin-bottom: 22px;
	font-size: 0;
	line-height: normal;
}
	.mdl260-inline-box .picture-wrapper img {
		border-radius: 20px;
	}
@media screen and (min-width: 768px) {
	.mdl260-inline-box .picture-wrapper {
		width: calc(100% - 47px);
		margin-left: 47px;
		margin-bottom: 29px;
	}
}
@media screen and (min-width: 992px) {
	.mdl260-inline-box .picture-wrapper {
		width: calc(((6 * var(--col-width-1)) + (5 * var(--gap))) - 47px);
		margin-right: var(--gap);
		margin-bottom: 0;
	}
}
@media screen and (min-width: 1200px) {
	.mdl260-inline-box .picture-wrapper {
		width: calc(((7 * var(--col-width-1)) + (6 * var(--gap))) - ((3 * var(--col)) + (3 * var(--gap))));
		margin-left: 0;
	}
}
@media screen and (min-width: 1600px) {
	.mdl260-inline-box .picture-wrapper {
		width: calc(((6 * var(--col-width-1)) + (5 * var(--gap))) - ((3 * var(--col)) + (3 * var(--gap))));
	}
}


/* Absätze */
.mdl260-inline-box p + h3 {
	margin-top: 22px;
}
.mdl260-inline-box h3 + p {
	margin-top: 0;
}
@media screen and (min-width: 768px) {
	.mdl260-inline-box p + h3 {
		margin-top: 29px;
	}
}
@media screen and (min-width: 1400px) {
	.mdl260-inline-box p + h3 {
		margin-top: 33px;
	}
}