/* =========================
   LINK-KACHELN
   ========================= */

.link-cards-simple {
	width: 100%;

	padding-bottom:
		var(--content-block-padding-y);
}


.link-cards-simple__inner {
	width: 100%;
	max-width: var(--content-width, 1500px);

	margin-inline: auto;
}


/* =========================
   MODUL-ÜBERSCHRIFT
   ========================= */

.link-cards-simple__headline {
	margin-top: 0;
	margin-bottom: 0.5rem;
}


.link-cards-simple__subheadline {
	margin-bottom: 2rem;

	font-size: 1.1rem;
	line-height: 1.5;
}


.link-cards-simple__headline + .link-cards-simple__grid {
	margin-top: 1.5rem;
}


/* =========================
   GRID
   ========================= */

.link-cards-simple__grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 1rem;

	width: 100%;
}


/* =========================
   KACHEL
   ========================= */

.link-card-simple {
	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;

	background:
		var(--bg-color);

	border-radius:
		var(--card-border-radius);

	box-shadow:
		0 4px 20px
		rgba(
			var(--shadow-color-rgb),
			0.10
		);

	text-align: center;
	text-decoration: none;

	transform-origin:
		center bottom;

	transition:
		box-shadow var(--transition-time);
}


.link-card-simple,
.link-card-simple:hover,
.link-card-simple:focus,
.link-card-simple:focus-visible {
	text-decoration:
		none;
}


/* =========================
   BILDBEREICH
   ========================= */

.link-card-simple__image-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	aspect-ratio:
		4 / 3;

	padding:
		1.75rem;

	box-sizing:
		border-box;

	background:
		var(--bg-color);
}


.link-card-simple__image {
	display: block;

	width: 100%;
	height: 100%;

	max-width: 85%;
	max-height: 85%;

	object-fit:
		contain;
}


/* =========================
   TEXTBEREICH
   ========================= */

.link-card-simple__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 220px;

	padding:
		1rem
		1.25rem;

	box-sizing:
		border-box;

	background:
		var(--logo-color-1);

	color:
		var(--font-color-light);

	text-align:
		center;

	transition:
		background-color var(--transition-time);
}


/* =========================
   KACHEL-ÜBERSCHRIFT
   ========================= */

.link-cards-simple .link-card-simple__headline {
	margin:
		0
		0
		0.4rem;

	color:
		var(--font-color-light);

	font-size:
		0.95rem;

	line-height:
		1.25;

	font-weight:
		600;

	text-align:
		center;

	text-decoration:
		none;
}


/* =========================
   TEXT
   ========================= */

.link-cards-simple .link-card-simple__text {
	margin: 0;

	color:
		var(--font-color-light);

	font-size:
		0.78rem;

	line-height:
		1.35;

	text-align:
		center;

	text-decoration:
		none;
}


/* =========================
   CTA
   ========================= */

.link-cards-simple .link-card-simple__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top:
		0.65rem;

	padding:
		0.35rem
		0.65rem;

	background:
		rgba(
			255,
			255,
			255,
			0.16
		);

	color:
		var(--font-color-light);

	border-radius:
		var(--button-border-radius);

	font-size:
		0.72rem;

	line-height:
		1;

	font-weight:
		600;

	text-decoration:
		none;
}


/* =========================
   WIPP-ANIMATION
   ========================= */

@keyframes link-card-balance {

	0% {
		transform:
			rotate(0deg);
	}

	20% {
		transform:
			rotate(1.4deg);
	}

	40% {
		transform:
			rotate(-1.4deg);
	}

	60% {
		transform:
			rotate(1deg);
	}

	80% {
		transform:
			rotate(-1deg);
	}

	100% {
		transform:
			rotate(0deg);
	}

}


/* =========================
   HOVER
   ========================= */

.link-card-simple:hover {
	animation:
		link-card-balance
		0.9s
		ease-in-out
		1;

	box-shadow:
		0 8px 26px
		rgba(
			var(--shadow-color-rgb),
			0.18
		);
}


.link-card-simple:hover .link-card-simple__content,
.link-card-simple:focus-visible .link-card-simple__content {
	background:
		var(--logo-color-1-dark);
}


/* =========================
   TASTATUR-FOKUS
   ========================= */

.link-card-simple:focus-visible {
	outline:
		3px solid
		var(--logo-color-1-light);

	outline-offset:
		3px;

	box-shadow:
		0 8px 26px
		rgba(
			var(--shadow-color-rgb),
			0.18
		);
}


/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {

	.link-card-simple:hover {
		animation:
			none;
	}

}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1000px) {

	.link-cards-simple__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

	.link-cards-simple__grid {
		grid-template-columns:
			1fr;
	}


	.link-card-simple__image-wrapper {
		aspect-ratio:
			16 / 10;
	}


	.link-card-simple__content {
		height:
			160px;

		padding:
			0.75rem
			0.9rem;
	}

}