/* ############################################################
	200 - NAVIGATION: BILD/TEXT
############################################################ */

/* Reset */
.mdl200-modul-box a {
	text-decoration: none;
}


/* Modulbox */
.mdl200-modul-box {
	position: relative;
	width: 100%;
	min-height: auto;
	margin-bottom: 10px;
}
@media (min-width: 1024px) {
	.mdl200-modul-box {
		height: calc(100vh - 207px - 55px); /* Browser-Höhe - Header - Abstand unten */
		margin-bottom: 0;
	}
}


/* Liste */
.mdl200-modul-box ul.quicklinks-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: 23px;
}
	.mdl200-modul-box li.quicklinks-item {
		min-width: 0;
		min-height: 0;
	}
	.mdl200-modul-box li.quicklinks-item--large {
		--kampagne-line: 77.67%;
		--kampagne-mobile-ratio: 1 / 1.05;

		position: relative;
		grid-column: 1 / -1;
		aspect-ratio: var(--kampagne-mobile-ratio);
		margin-bottom: 8px;
		overflow: hidden;
	}
		.mdl200-modul-box a.quicklinks-link {
			display: block;
			height: 100%;
			-webkit-tap-highlight-color: transparent;
			touch-action: manipulation;
		}
		.mdl200-modul-box li.quicklinks-item--large > a.quicklinks-link {
			position: relative;
			overflow: hidden;
		}
@media (min-width: 1024px) {
	.mdl200-modul-box ul.quicklinks-list {
		grid-template-columns:
			calc((100% - var(--gap)) / 2)
			calc((100% - var(--gap) - var(--gap) - var(--gap)) / 4)
			calc((100% - var(--gap) - var(--gap) - var(--gap)) / 4);
		/*grid-template-columns: 2fr 1fr 1fr;*/
		grid-template-rows: 1fr 1fr;
		gap: var(--gap);
		height: 100%;
	}
		.mdl200-modul-box li.quicklinks-item--large {
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			aspect-ratio: auto;
			margin-bottom: 0;
		}
			.mdl200-modul-box a.quicklinks-link {
				display: grid;
				grid-template-rows: minmax(0, 1fr) auto;
				height: 100%;
			}
}


/* Kampagne */
.mdl200-modul-box .kampagne-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
	.mdl200-modul-box .kampagne-bg-picture, .mdl200-modul-box .kampagne-picture {
		display: block;
		position: absolute;
		inset: 0;
		overflow: hidden;
	}
	.mdl200-modul-box .kampagne-bg-picture {
		z-index: 1;
		clip-path: inset(0 0 calc(100% - var(--kampagne-line)) 0);
	}
	.mdl200-modul-box .kampagne-picture {
		z-index: 2;
		transform-origin: 50% var(--kampagne-line);
		transition: transform 300ms var(--cubic-bezier);
	}
	.mdl200-modul-box a.quicklinks-link:hover .kampagne-picture,
	.mdl200-modul-box a.quicklinks-link.is-touch-hover .kampagne-picture {
		transform: scale(1.07);
	}
		.mdl200-modul-box .kampagne-wrapper img {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center center;
		}
@media (min-width: 1024px) {
	.mdl200-modul-box .kampagne-wrapper {
		inset: 0;
		aspect-ratio: auto;
	}
		.mdl200-modul-box a.quicklinks-link:hover .kampagne-picture,
		.mdl200-modul-box a.quicklinks-link.is-touch-hover .kampagne-picture {
			transform: scale(1.04);
		}
			.mdl200-modul-box .kampagne-picture img {
				left: 50%;
				width: auto;
				height: 100%;
				max-width: none;
				transform: translateX(-50%);
				object-fit: contain;
				object-position: center top;
			}
}


/* Foto */
.mdl200-modul-box .picture-wrapper {
	position: relative;
	display: block;
	aspect-ratio: 1 / 0.75;
	overflow: hidden;
	margin-bottom: 10px;
}
	.mdl200-modul-box .picture-wrapper img {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		transition: transform 300ms var(--cubic-bezier);
	}
	.mdl200-modul-box a.quicklinks-link:hover .picture-wrapper img,
	.mdl200-modul-box a.quicklinks-link.is-touch-hover .picture-wrapper img {
		transform: scale(1.14);
	}
@media (min-width: 1024px) {
	.mdl200-modul-box .picture-wrapper {
		min-height: 0;
		aspect-ratio: auto;
	}
	.mdl200-modul-box a.quicklinks-link:hover .picture-wrapper img,
	.mdl200-modul-box a.quicklinks-link.is-touch-hover .picture-wrapper img {
		transform: scale(1.04);
	}
}
@media (min-width: 1280px) {
	.mdl200-modul-box .picture-wrapper {
		margin-bottom: 15px;
	}
}


/* Icon */
.mdl200-modul-box .icon-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1 / 0.75;
	background-color: var(--main-color-3);
	overflow: hidden;
	margin-bottom: 10px;
	transition: background-color 300ms var(--cubic-bezier);
}
.mdl200-modul-box a.quicklinks-link:hover .icon-wrapper,
.mdl200-modul-box a.quicklinks-link.is-touch-hover .icon-wrapper {
	background-color: var(--main-color-1);
}
	.mdl200-modul-box .icon-wrapper > span {
		display: block;
		width: 46%;
		aspect-ratio: 1 / 1;
		background-color: var(--main-color-1);
		border-radius: 50%;
		overflow: hidden;
		transition: background-color 300ms var(--cubic-bezier);
	}
	.mdl200-modul-box a.quicklinks-link:hover .icon-wrapper > span,
	.mdl200-modul-box a.quicklinks-link.is-touch-hover .icon-wrapper > span {
		background-color: var(--main-color-3);
	}
@media (min-width: 1024px) {
	.mdl200-modul-box .icon-wrapper {
		min-height: 0;
		aspect-ratio: auto;
	}
}
@media (min-width: 1280px) {
	.mdl200-modul-box .icon-wrapper {
		margin-bottom: 15px;
	}
}


/* Titel, Text */
.mdl200-modul-box .quicklinks-item--large .content-wrapper {
	z-index: 3;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
	.mdl200-modul-box h3, .mdl200-modul-box .quicklinks-item--large p.subline {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mdl200-modul-box .quicklinks-item--large h3 {
		display: block;
		white-space: nowrap;
		font-weight: 900;
		font-size: 1.8125rem; /* 29px */
		/*font-size: clamp(1.8125rem, 6vw, 3.125rem); /* min 29px, max 50px */
		line-height: 1.25;
	}
	.mdl200-modul-box .quicklinks-item--large p.subline {
		display: block;
		white-space: nowrap;
		font-size: 1.25rem; /* 20px */
		/*font-size: clamp(1.25rem, 4.8vw, 1.5625rem); /* min 20px, max 25px */
		line-height: 1.5;
	}
@media (min-width: 1024px) {
	.mdl200-modul-box li:not(.quicklinks-item--large) .content-wrapper {
		height: 50px;
	}
}
@media (min-width: 1280px) {
	.mdl200-modul-box .quicklinks-item--large h3 {
		font-size: clamp(1.8125rem, 3vw, 3.125rem); /* min 29px, max 50px */
	}
	.mdl200-modul-box .quicklinks-item--large p.subline {
		font-size: 1.5625rem; /* 25px */
	}
	.mdl200-modul-box li:not(.quicklinks-item--large) .content-wrapper {
		height: 70px;
	}
		.mdl200-modul-box li:not(.quicklinks-item--large) h3 {
			font-size: 1.5625rem; /* 25px */
			line-height: 1.4;
		}
}