/* =========================
   ICON LISTS
   ========================= */

.icon-lists {
	width: 100%;
}


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

.icon-lists-header {
	margin-top: 0;
	margin-bottom: 2.5rem;
}


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

.icon-lists-grid {
	display: grid;

	width: 100%;

	gap: 3rem;
}


/* 1 LISTE */

.icon-lists-grid[data-columns="1"] {
	grid-template-columns: 1fr;
}


/* 2 LISTEN */

.icon-lists-grid[data-columns="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* 3 LISTEN */

.icon-lists-grid[data-columns="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* 4 LISTEN */

.icon-lists-grid[data-columns="4"] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================
   EINZELNE SPALTE
   ========================= */

.icon-list-column {
	min-width: 0;
}


.icon-list-column-title {
	margin-top: 0;
	margin-bottom: 1.5rem;

	color: inherit;
}


/* =========================
   UL
   ========================= */

ul.icon-list {
	display: flex;
	flex-direction: column;

	width: max-content;
	max-width: 100%;

	gap: 1.35rem;

	margin: 0 auto;
	padding: 0;

	list-style: none;
}


ul.icon-list > li {
	list-style: none;
}


.icon-lists ul.icon-list > li::before {
	content: none;
	display: none;
}


.icon-list li::marker {
	content: "";
}


/* =========================
   LISTENEINTRAG
   ========================= */

.icon-list-item {
	display: grid;

	grid-template-columns: 2.4rem minmax(0, 1fr);

	align-items: center;

	column-gap: 1rem;

	margin: 0;
	padding: 0;
}


/* =========================
   ICON
   ========================= */

.icon-list-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 2.4rem;
	height: 2.4rem;

	flex: 0 0 2.4rem;

	color: inherit;
}


.icon-list-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

.icon-list-text {
	display: block;

	min-width: 0;

	color: inherit;

	font-size: 1rem;
	line-height: 1.4;
}


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

@media (max-width: 1000px) {

	.icon-lists-grid[data-columns="3"],
	.icon-lists-grid[data-columns="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


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

@media (max-width: 650px) {

	.icon-lists-grid,
	.icon-lists-grid[data-columns="1"],
	.icon-lists-grid[data-columns="2"],
	.icon-lists-grid[data-columns="3"],
	.icon-lists-grid[data-columns="4"] {
		grid-template-columns: 1fr;
	}


	.icon-lists-grid {
		gap: 2.5rem;
	}


	ul.icon-list {
		gap: 1.1rem;
	}


	.icon-list-icon {
	width: 2.2rem;
	height: 2.2rem;

	flex-basis: 2.2rem;
}

}
/* =========================================================
   ICON LISTS – FARBEN
   ========================================================= */

/*
 * Logo-Farbe 2 / Orange:
 * Icon Lists bleiben bewusst weiß.
 */

body .icon-lists.frame-bg-logo-color-2 {
	--frame-text: var(--font-color-light, #ffffff);

	color: var(--frame-text);
}


.icon-lists.frame-bg-logo-color-2 .icon-lists-header,
.icon-lists.frame-bg-logo-color-2 .icon-list-column-title,
body .icon-lists.frame-bg-logo-color-2 .icon-list-item,
body .icon-lists.frame-bg-logo-color-2 .icon-list-icon,
body .icon-lists.frame-bg-logo-color-2 .icon-list-text {
	color: inherit;
}


/* =========================================================
   ICON LISTS – SPALTENAUSRICHTUNG
   ========================================================= */

/*
 * Die Listen selbst nicht mehr innerhalb
 * ihrer Rasterspalte zentrieren.
 */

ul.icon-list {
	margin-left: 0;
	margin-right: 0;
}


/*
 * 2 Listen:
 * links und rechts an den Außenkanten.
 */

.icon-lists-grid[data-columns="2"] {
	grid-template-columns: 1fr 1fr;
}

.icon-lists-grid[data-columns="2"] .icon-list-column:first-child {
	justify-self: start;
}

.icon-lists-grid[data-columns="2"] .icon-list-column:last-child {
	justify-self: end;
}


/*
 * 3 Listen:
 * links außen,
 * mittlere exakt in der Mitte,
 * rechts außen.
 */

.icon-lists-grid[data-columns="3"] {
	grid-template-columns:
		minmax(0, 1fr)
		auto
		minmax(0, 1fr);
}

.icon-lists-grid[data-columns="3"] .icon-list-column:nth-child(1) {
	justify-self: start;
}

.icon-lists-grid[data-columns="3"] .icon-list-column:nth-child(2) {
	justify-self: center;
}

.icon-lists-grid[data-columns="3"] .icon-list-column:nth-child(3) {
	justify-self: end;
}


/*
 * 4 Listen:
 * über die komplette Wrapperbreite verteilen.
 */

.icon-lists-grid[data-columns="4"] .icon-list-column:first-child {
	justify-self: start;
}

.icon-lists-grid[data-columns="4"] .icon-list-column:last-child {
	justify-self: end;
}

/* =========================================================
   ICON LISTS – MOBILE KORREKTUR
   ========================================================= */

@media (max-width: 650px) {

	.icon-lists-grid,
	.icon-lists-grid[data-columns="1"],
	.icon-lists-grid[data-columns="2"],
	.icon-lists-grid[data-columns="3"],
	.icon-lists-grid[data-columns="4"] {
		grid-template-columns: 1fr;
	}


	.icon-lists-grid .icon-list-column,
	.icon-lists-grid[data-columns="2"] .icon-list-column:first-child,
	.icon-lists-grid[data-columns="2"] .icon-list-column:last-child,
	.icon-lists-grid[data-columns="3"] .icon-list-column:nth-child(1),
	.icon-lists-grid[data-columns="3"] .icon-list-column:nth-child(2),
	.icon-lists-grid[data-columns="3"] .icon-list-column:nth-child(3),
	.icon-lists-grid[data-columns="4"] .icon-list-column:first-child,
	.icon-lists-grid[data-columns="4"] .icon-list-column:last-child {
		justify-self: stretch;

		width: 100%;
	}


	ul.icon-list {
		width: 100%;
		max-width: none;
	}
}