/**
 * NEOS Liste – Styles für Frontend und Editor.
 * Alle Werte laufen über CSS-Custom-Properties, die der Block inline setzt.
 */

.neos-liste {
	/* Logo */
	--neos-bullet-size: 28px;
	--neos-bullet-gap: 16px;
	--neos-bullet-color: #cb1967;
	--neos-bullet-inner: transparent;

	/* Abstände */
	--neos-item-gap: 28px;
	--neos-text-gap: 6px;
	--neos-align: left;

	/* Überschrift */
	--neos-heading-size: 26px;
	--neos-heading-lh: 1.25;
	--neos-heading-weight: 700;
	--neos-heading-color: #000;

	/* Beschreibung */
	--neos-desc-size: 17px;
	--neos-desc-lh: 1.5;
	--neos-desc-weight: 400;
	--neos-desc-color: #000;

	/* Highlighter */
	--neos-hl-px: 14px;
	--neos-hl-py: 6px;
	--neos-hl-radius: 60px;
	--neos-hl-bg: #cb1967;
	--neos-hl-text: #fff;

	/* Skalierung (siehe Media-Query am Ende) */
	--neos-scale: 1;
	--neos-h-size: calc(var(--neos-heading-size) * var(--neos-scale));
	--neos-d-size: calc(var(--neos-desc-size) * var(--neos-scale));

	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--neos-item-gap);
	text-align: var(--neos-align);
}

.neos-liste__item {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--neos-bullet-gap);
}

.neos-liste__item::marker {
	content: "";
}

.neos-liste.is-bullet-center .neos-liste__item {
	align-items: center;
}

/* --- Logo ---------------------------------------------------------- */

.neos-liste__bullet {
	flex: 0 0 auto;
	width: var(--neos-bullet-size);
	height: var(--neos-bullet-size);
	display: block;
	line-height: 0;
}

.neos-liste__logo {
	display: block;
	width: 100%;
	height: 100%;
}

.neos-liste__logo-ring {
	fill: var(--neos-bullet-color);
}

.neos-liste__logo-inner {
	fill: var(--neos-bullet-inner);
}

/* Logo optisch auf die Mitte der ersten Textzeile setzen. */
.neos-liste:not(.is-bullet-center) .neos-liste__bullet {
	margin-top: calc(
		(var(--neos-h-size) * var(--neos-heading-lh) - var(--neos-bullet-size)) / 2
	);
}

.neos-liste:not(.is-bullet-center) .neos-liste__item.has-hl-heading .neos-liste__bullet {
	margin-top: calc(
		(var(--neos-h-size) * var(--neos-heading-lh) - var(--neos-bullet-size)) / 2 + var(--neos-hl-py)
	);
}

/* --- Texte --------------------------------------------------------- */

.neos-liste__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--neos-text-gap);
}

.neos-liste__text {
	margin: 0;
	padding: 0;
}

.neos-liste__heading {
	font-size: var(--neos-h-size);
	line-height: var(--neos-heading-lh);
	font-weight: var(--neos-heading-weight);
	color: var(--neos-heading-color);
}

.neos-liste__desc {
	font-size: var(--neos-d-size);
	line-height: var(--neos-desc-lh);
	font-weight: var(--neos-desc-weight);
	color: var(--neos-desc-color);
}

/* --- Highlighter --------------------------------------------------- */

.neos-liste__hl {
	display: inline;
}

.neos-liste__text.is-highlighted {
	/* Platz für den Hintergrund, der über die Textzeile hinausragt. */
	padding-block: var(--neos-hl-py);
}

.neos-liste__text.is-highlighted .neos-liste__hl {
	padding: var(--neos-hl-py) var(--neos-hl-px);
	border-radius: var(--neos-hl-radius);
	background-color: var(--neos-hl-bg);
	color: var(--neos-hl-text);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.neos-liste__heading.is-highlighted .neos-liste__hl {
	background-color: var(--neos-hl-bg-h, var(--neos-hl-bg));
	color: var(--neos-hl-text-h, var(--neos-hl-text));
}

.neos-liste__desc.is-highlighted .neos-liste__hl {
	background-color: var(--neos-hl-bg-d, var(--neos-hl-bg));
	color: var(--neos-hl-text-d, var(--neos-hl-text));
}

.neos-liste__text.is-highlighted a {
	color: inherit;
}

/* --- Mobile -------------------------------------------------------- */

@media (max-width: 600px) {
	.neos-liste {
		--neos-scale: 0.85;
	}
}