/*
 * en2x Beitrags-Content – structural, instance-independent styles.
 *
 * WYSIWYG content in the en2x style: headlines #250F51 uppercase (h2/h3),
 * readable body text, own spacing. The optional background colour is applied
 * inline per instance; the padding for the filled state is a class modifier.
 * Font inherited (Rubik).
 */

.en2x-beitrag-content {
	/* Self-brought side gutter aligns content to the hero/container edge in
	 * full-width rows; the optional background sits inside this gutter. The
	 * bottom margin (32 + 20px) gives breathing room to the next module. */
	margin: 0 var(--en2x-side-gutter, 20px) 52px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	color: inherit;
}

/* When a background colour is set (inline), add padding so text never touches
 * the edge. The colour itself stays instance-scoped (inline style attribute). */
.en2x-beitrag-content--filled {
	padding: 28px;
	border-radius: 8px;
}

/* Anchor target (an "ID für Anker" is set): keep the headline clear of the fixed
 * Salient header when jumped to. The offset is the shared, responsive token. */
.en2x-beitrag-content--anchor {
	scroll-margin-top: var(--en2x-header-offset, 110px);
}

.en2x-beitrag-content h2,
.en2x-beitrag-content h3,
.en2x-beitrag-content h4 {
	margin: 18px 0 10px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--en2x-color-headline, #250F51);
}

.en2x-beitrag-content h2 {
	font-size: 22px;
}

.en2x-beitrag-content h3 {
	font-size: 18px;
}

.en2x-beitrag-content h4 {
	font-size: 16px;
}

.en2x-beitrag-content :first-child {
	margin-top: 0;
}

.en2x-beitrag-content :last-child {
	margin-bottom: 0;
}

.en2x-beitrag-content p {
	margin: 0 0 12px;
}

.en2x-beitrag-content ul,
.en2x-beitrag-content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.en2x-beitrag-content li {
	margin: 0 0 6px;
}

.en2x-beitrag-content a {
	color: var(--en2x-color-primary, #221182);
}

.en2x-beitrag-content img {
	max-width: 100%;
	height: auto;
}