/* =========================
   IMAGE CARDS
   ========================= */

.link-cards {
	width: 100%;

	padding-bottom:
		var(--content-block-padding-y, 4rem);

	box-sizing: border-box;
}


.link-cards__inner {
	width: 100%;
	max-width: var(--stage-maxwidth, 1400px);

	margin-inline: auto;
}


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

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


.link-cards__subheadline {
	margin-bottom: 2rem;

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


.link-cards__headline + .link-cards__grid {
	margin-top: 1.5rem;
}


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

.link-cards__grid {
	display: grid;

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

	gap: 1rem;

	width: 100%;
}


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

body .link-card {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;

	background:
		var(--neutral-color-dark);

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

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

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

	text-decoration: none;
}


body .link-card--linked {
	cursor: pointer;

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


body .link-card--linked:hover,
body .link-card--linked:focus-visible {
	color:
		var(--font-color-light);

	text-decoration: none;

	transform:
		translateY(-4px);

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


body .link-card--static {
	cursor: default;
}


/* =========================
   BILD
   ========================= */

.link-card__image-wrapper {
	position: relative;

	width: 100%;

	aspect-ratio:
		4 / 3;

	overflow: hidden;

	flex:
		0 0 auto;
}


.link-card__image {
	display: block;

	width: 100%;
	height: 100%;

	max-width: none;
	max-height: none;

	object-fit: cover;

	transition:
		transform 0.45s ease;
}


.link-card--linked:hover .link-card__image,
.link-card--linked:focus-visible .link-card__image {
	transform:
		scale(1.045);
}


.link-card--static .link-card__image {
	transition: none;
}


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

.link-card__content {
	position: relative;

	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 140px;

	padding:
		0.85rem
		1rem;

	box-sizing: border-box;

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

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

	text-align: center;

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


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


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

body .link-card .link-card__headline {
	margin:
		0
		0
		0.35rem
		0;

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

	font-size:
		1rem;

	line-height:
		1.2;

	text-align:
		center;
}


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

body .link-card .link-card__text {
	margin: 0;

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

	font-size:
		0.78rem;

	line-height:
		1.35;

	text-align:
		center;
}


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

.link-card__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;
}


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

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

	outline-offset:
		3px;
}


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

@media (max-width: 1000px) {

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

}


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

@media (max-width: 600px) {

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


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


	.link-card__content {
		height:
			132px;

		padding:
			0.75rem
			0.9rem;
	}


	body .link-card .link-card__headline {
		font-size:
			0.95rem;
	}


	body .link-card .link-card__text {
		font-size:
			0.76rem;
	}

}