/* ############################################################
	LAYOUT-RASTER
############################################################ */

.mdl300-modul-box .blog-layout {
	display: flex;
	flex-direction: column;
}
	.mdl300-modul-box .blog-list-container {
		order: 0;
		width: 100%;
	}
	.mdl300-modul-box .blog-sidebar {
		order: -1;
		width: 100%;
		margin-bottom: 48px;
	}
@media screen and (min-width: 992px) {
	.mdl300-modul-box .blog-layout {
		flex-direction: row;
	}
		.mdl300-modul-box .blog-list-container {
			order: 0;
			width: calc((6 * var(--col-width-1)) + (5 * var(--gap)));
		}
		.mdl300-modul-box .blog-sidebar {
			order: 1;
			align-self: flex-start;
			position: sticky;
			top: 110px; /* Headerhöhe + Panel-Abstand */
			width: calc((5 * var(--col-width-1)) + (4 * var(--gap)));
			margin-left: calc((1 * var(--col-width-1)) + (2 * var(--gap)));
			margin-bottom: 0;
		}
}
@media screen and (min-width: 1200px) {
	.mdl300-modul-box .blog-sidebar {
		top: 193px; /* Headerhöhe + Panel-Abstand */
	}
}
@media screen and (min-width: 1600px) {
	.mdl300-modul-box .blog-list-container {
		width: calc((5 * var(--col-width-1)) + (4 * var(--gap)));
	}
	.mdl300-modul-box .blog-sidebar {
		width: calc((6 * var(--col-width-1)) + (5 * var(--gap)));
	}
}


/* ############################################################
	BLOG-ÜBERSICHT
############################################################ */

/* Resets */
.mdl300-modul-box .blog-item > p:last-of-type, p.blog-result-info {
	margin-bottom: 0;
}
.mdl300-modul-box a.link-btn {
	margin: 0;
}


/* Modultitel */
.mdl300-modul-box h2.modultitel {
	margin-bottom: 50px;
}
@media screen and (min-width: 1200px) {
	.mdl300-modul-box h2.modultitel {
		margin-bottom: 100px;
	}
}


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


/* Liste */
.mdl300-modul-box ul.blog-list {
	margin-top: 0;
}
	.mdl300-modul-box ul.blog-list li {
		margin-bottom: 48px;
		padding-bottom: 27px;
		border-bottom: 1px solid var(--main-color-2);
	}
	.mdl300-modul-box ul.blog-list > li:last-of-type {
		margin-bottom: 0;
	}
@media screen and (min-width: 1200px) {
	.mdl300-modul-box ul.blog-list li {
		margin-bottom: 70px;
		padding-bottom: 40px;
	}
}


/* Datum, Kategorie */
.mdl300-modul-box p.blog-meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-bottom: 18px;
	font-weight: 700;
}
.mdl300-modul-box time::after {
	content: "·";
	padding-left: 5px;
	padding-right: 5px;
}
@media screen and (min-width: 1200px) {
	.mdl300-modul-box p.blog-meta {
		margin-bottom: 23px;
	}
}


/* Titel */
.mdl300-modul-box h3.blog-title {
	margin-bottom: 24px;
	font-size: 1.5rem; /* 24px */
	line-height: 1.16;
	letter-spacing: 0.48px;
}
@media screen and (min-width: 1200px) {
	.mdl300-modul-box h3.blog-title {
		margin-bottom: 35px;
		font-size: 2.1875rem; /* 35px */
		letter-spacing: 0.7px;
	}
}


/* Einleitung */
.mdl300-modul-box p.blog-shorttext {
	margin-bottom: 32px;
}
@media screen and (min-width: 1200px) {
	.mdl300-modul-box p.blog-shorttext {
		margin-bottom: 48px;
	}
}


/* ############################################################
	FILTER
############################################################ */

/* Titel */
.mdl300-modul-box h3.blog-filter-title {
	margin-bottom: 16px;
	font-size: 1rem; /* 16px */
	line-height: 1.5;
	letter-spacing: 0.32px;
}
@media screen and (min-width: 1200px) {
	.mdl300-modul-box h3.blog-filter-title {
		margin-bottom: 20px;
		font-size: 1.25rem; /* 20px */ 
		letter-spacing: 0.4px;
	}
}


/* Liste */
.mdl300-modul-box ul.blog-filter-list {
	display: flex;
	flex-direction: column;
	margin-top: 0;
}
@media screen and (max-width: 991.98px) {
	.mdl300-modul-box ul.blog-filter-list {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 14px;
		padding-right: 40px !important; /* damit das letzte Item nicht unter dem Fade verschwindet */
		overflow-x: auto;
    	-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		scrollbar-width: none; /* Firefox: Scrollbar verstecken (optional) */
		-webkit-mask-image: linear-gradient(to right, var(--main-color-black) 0, var(--main-color-black) calc(100% - 40px), transparent 100%);
		mask-image: linear-gradient(to right, var(--main-color-black) 0, var(--main-color-black) calc(100% - 40px), transparent 100%);
	}
	.mdl300-modul-box ul.blog-filter-list::-webkit-scrollbar {
		display: none; /* WebKit */
	}
		.mdl300-modul-box ul.blog-filter-list > li {
			flex: 0 0 auto; /* schrumpfen nicht */
		}
}
@media screen and (min-width: 992px) {
	.mdl300-modul-box ul.blog-filter-list li:not(:first-child) {
		margin-top: 14px;
	}
}


/* Links */
.mdl300-modul-box a.blog-filter-link {
	padding: 8px 16px 10px;
	border-radius: 10px;
	background-color: var(--main-color-white);
}
.mdl300-modul-box a.blog-filter-link.is-active {
	font-weight: 700;
}
.mdl300-modul-box a.blog-filter-link span.blog-filter-count {
	margin-left: 5px;
}
@media screen and (max-width: 991.98px) {
	.mdl300-modul-box a.blog-filter-link {
		display: inline-flex;
		white-space: nowrap; /* A-Link bricht nicht um */
	}
}
@media screen and (min-width: 992px) {
	.mdl300-modul-box a.blog-filter-link {
		display: block;
		width: calc(100% + 20px);
		margin-left: -20px;
		padding: 10px 20px 12px;
		border-radius: 10px;
		transition: all 300ms var(--cubic-bezier);
	}
	.mdl300-modul-box a.blog-filter-link:hover {
		background-color: var(--main-color-7);
		color: var(--main-color-white);
	}
}