/* =========================================================
   LISTEN-BLÖCKE
   ========================================================= */

.list-blocks {
	position: relative;

	width: 100%;

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

	box-sizing:
		border-box;

	--list-blocks-text-color:
		var(--font-color);

	--list-blocks-accent-color:
		var(--logo-color-1);

	color:
		var(--list-blocks-text-color);
}


/* =========================================================
   MODUL-HINTERGRUND / KONTRAST
   ========================================================= */

.list-blocks.frame-bg-logo-color-1,
.list-blocks.frame-bg-logo-color-1-dark,
.list-blocks.frame-bg-logo-color-2,
.list-blocks.frame-bg-neutral-color-dark {
	--list-blocks-text-color:
		var(--font-color-light);

	--list-blocks-accent-color:
		var(--logo-color-1-light);
}


.list-blocks.frame-bg-logo-color-1-light,
.list-blocks.frame-bg-neutral-color-light,
.list-blocks.frame-bg-white {
	--list-blocks-text-color:
		var(--font-color-dark);

	--list-blocks-accent-color:
		var(--logo-color-1);
}


/* =========================================================
   HINTERGRUNDBILD
   ========================================================= */

.list-blocks:has(> .content-background-image) {
	--list-blocks-text-color:
		var(--font-color-light);

	--list-blocks-accent-color:
		var(--logo-color-1-light);

	isolation:
		isolate;

	overflow:
		hidden;
}


.list-blocks > .content-background-image {
	position: absolute;

	inset: -12px;

	z-index: -2;

	overflow:
		hidden;
}


.list-blocks > .content-background-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit:
		cover;

	filter:
		blur(6px)
		brightness(0.42);

	transform:
		scale(1.04);
}


.list-blocks:has(> .content-background-image)::before {
	content: "";

	position: absolute;

	inset: 0;

	z-index: -1;

	background:
		rgba(0, 0, 0, 0.18);

	pointer-events:
		none;
}


/* =========================================================
   INNER
   ========================================================= */

.list-blocks__inner {
	position: relative;

	z-index: 1;

	width: 100%;
}


/* =========================================================
   HEADLINE / SUBHEADLINE / INTRO
   ========================================================= */

.list-blocks__headline {
	margin:
		0
		0
		0.35rem;

	color:
		var(--list-blocks-text-color);
}


.list-blocks__subheadline {
	margin:
		0
		0
		1rem;

	color:
		var(--list-blocks-text-color);

	font-size:
		1.1rem;

	line-height:
		1.45;
}


.list-blocks__intro {
	width: 100%;

	margin:
		0
		0
		2.5rem;

	color:
		var(--list-blocks-text-color);

	line-height:
		1.6;
}


.list-blocks__intro > :first-child {
	margin-top:
		0;
}


.list-blocks__intro > :last-child {
	margin-bottom:
		0;
}


.list-blocks__intro p,
.list-blocks__intro li,
.list-blocks__intro strong,
.list-blocks__intro em {
	color:
		var(--list-blocks-text-color);
}


.list-blocks__intro a {
	color:
		var(--list-blocks-accent-color);
}


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

.list-blocks__grid {
	display: grid;

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

	gap:
		2rem;

	width:
		100%;

	align-items:
		stretch;
}


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

.list-block {
	position: relative;

	min-width: 0;
	height: 100%;

	padding:
		2rem
		1.5rem
		1.6rem;

	box-sizing:
		border-box;

	overflow:
		hidden;

	--list-card-bg:
		#ffffff;

	--list-card-text:
		var(--font-color-dark);

	--list-card-accent:
		var(--logo-color-1);

	--list-card-stripe:
		var(--logo-color-1);

	background:
		var(--list-card-bg);

	color:
		var(--list-card-text);

	border:
		1px solid
		rgba(0, 0, 0, 0.07);

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

	box-shadow:
		0 4px 14px
		rgba(0, 0, 0, 0.07),
		0 12px 28px
		rgba(0, 0, 0, 0.05);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.list-block:hover {
	transform:
		translateY(-3px);

	box-shadow:
		0 7px 20px
		rgba(0, 0, 0, 0.10),
		0 16px 34px
		rgba(0, 0, 0, 0.07);
}


/* =========================================================
   KACHELFARBEN
   ========================================================= */

.list-block--white {
	--list-card-bg:
		#ffffff;

	--list-card-text:
		var(--font-color-dark);

	--list-card-accent:
		var(--logo-color-1);
}


.list-block--neutral-color-light {
	--list-card-bg:
		var(--neutral-color-light);

	--list-card-text:
		var(--font-color-dark);

	--list-card-accent:
		var(--logo-color-1);
}


.list-block--logo-color-1-light {
	--list-card-bg:
		var(--logo-color-1-light);

	--list-card-text:
		var(--font-color-dark);

	--list-card-accent:
		var(--logo-color-1-dark);
}


.list-block--logo-color-1 {
	--list-card-bg:
		var(--logo-color-1);

	--list-card-text:
		var(--font-color-light);

	--list-card-accent:
		var(--logo-color-1-light);
}


.list-block--logo-color-1-dark {
	--list-card-bg:
		var(--logo-color-1-dark);

	--list-card-text:
		var(--font-color-light);

	--list-card-accent:
		var(--logo-color-1-light);
}


.list-block--logo-color-2 {
	--list-card-bg:
		var(--logo-color-2);

	--list-card-text:
		var(--font-color-light);

	--list-card-accent:
		var(--logo-color-1-light);
}


.list-block--neutral-color-dark {
	--list-card-bg:
		var(--neutral-color-dark);

	--list-card-text:
		var(--font-color-light);

	--list-card-accent:
		var(--logo-color-1-light);
}


/* =========================================================
   OBERER FARBSTREIFEN
   ========================================================= */

.list-block__stripe {
	position: absolute;

	top: 0;
	left: 0;

	display: block;

	width: 22%;
	min-width: 70px;
	max-width: 130px;

	height: 5px;

	background:
		var(--list-card-stripe);
}


/* Streifenfarben */

.list-block--stripe-logo-color-1 {
	--list-card-stripe:
		var(--logo-color-1);
}


.list-block--stripe-logo-color-1-light {
	--list-card-stripe:
		var(--logo-color-1-light);
}


.list-block--stripe-logo-color-1-dark {
	--list-card-stripe:
		var(--logo-color-1-dark);
}


.list-block--stripe-logo-color-2 {
	--list-card-stripe:
		var(--logo-color-2);
}


.list-block--stripe-neutral-color-light {
	--list-card-stripe:
		var(--neutral-color-light);
}


.list-block--stripe-neutral-color-dark {
	--list-card-stripe:
		var(--neutral-color-dark);
}


/* =========================================================
   KACHEL-INNER
   ========================================================= */

.list-block__inner {
	width:
		100%;
}


/* =========================================================
   LISTENÜBERSCHRIFT
   ========================================================= */

.list-block__title {
	margin:
		0
		0
		0.85rem;

	color:
		var(--list-card-text);

	font-size:
		0.95rem;

	font-weight:
		700;

	line-height:
		1.3;
}


/* =========================================================
   RTE-INHALT
   ========================================================= */

.list-block__content {
	color:
		var(--list-card-text);

	font-size:
		0.8rem;

	line-height:
		1.5;
}


.list-block__content > :first-child {
	margin-top:
		0;
}


.list-block__content > :last-child {
	margin-bottom:
		0;
}

/* =========================================================
   LEEREN RTE-ABSATZ NACH LISTE ENTFERNEN
   ========================================================= */

.list-block__content > ul + p:last-child {
	display: none;
}


.list-block__content > ol + p:last-child {
	display: none;
}


.list-block__content p,
.list-block__content li,
.list-block__content strong,
.list-block__content em {
	color:
		var(--list-card-text);
}


.list-block__content a {
	color:
		var(--list-card-accent);

	text-decoration:
		underline;
}


/* =========================================================
   LISTEN
   ========================================================= */

.list-block__content ul {
	margin:
		0.4rem
		0
		0;

	padding-left:
		1.25rem;
}


.list-block__content li {
	margin-bottom:
		0.35rem;

	padding-left:
		0.15rem;
}


.list-block__content li:last-child {
	margin-bottom:
		0;
}


.list-block__content li::marker {
	color:
		var(--list-card-accent);
}


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

.list-blocks__cta {
	margin-top:
		2.5rem;
}


.list-blocks__cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding:
		0.65rem
		1rem;

	background:
		var(--list-blocks-accent-color);

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

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

	font-size:
		0.78rem;

	font-weight:
		600;

	line-height:
		1;

	text-decoration:
		none;

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


.list-blocks__cta-link:hover,
.list-blocks__cta-link:focus-visible {
	background:
		var(--logo-color-1-dark);

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

	text-decoration:
		none;

	transform:
		translateY(-2px);

	box-shadow:
		0 4px 14px
		rgba(0, 0, 0, 0.12);
}


/* =========================================================
   3 SPALTEN
   ========================================================= */

@media (max-width: 1200px) {

	.list-blocks__grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

}


/* =========================================================
   2 SPALTEN
   ========================================================= */

@media (max-width: 900px) {

	.list-blocks__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap:
			1.5rem;
	}

}


/* =========================================================
   1 SPALTE
   ========================================================= */

@media (max-width: 600px) {

	.list-blocks__grid {
		grid-template-columns:
			1fr;

		gap:
			1.25rem;
	}


	.list-block {
		padding:
			1.7rem
			1.25rem
			1.4rem;
	}

}