/**
 * Basistypografie
 *
 * Überschriften ohne Komponentenklasse (z. B. im Fließtext rechtlicher
 * Seiten) bekommen hier ein sauberes Grundstyling – die Redaktion muss
 * keine Klassen vergeben.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-normal);
	overflow-wrap: break-word;
	text-wrap: balance;
}

h1 { font-size: var(--font-size-title-md); line-height: var(--line-height-title-md); }
h2 { font-size: var(--font-size-title-sm); line-height: var(--line-height-title-sm); }
h3 { font-size: var(--font-size-title-xs); line-height: var(--line-height-title-xs); }
h4, h5, h6 { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }

p {
	text-wrap: pretty;
}

/*
 * Sektions-Überschriften (H2): websiteweit EINE Linie – Größe, Schrift,
 * Versalien. Komponenten setzen nur noch Abstände/Ausrichtung.
 * Änderung zentral über --font-size-heading.
 */
.intro__title,
.media-text__title,
.values__title,
.product-slider__title,
h2.text-section__title,
.woocommerce-Tabs-panel > h2 {
	font-family: var(--font-family-display);
	font-size: var(--font-size-heading);
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-heading);
	text-transform: uppercase;
}

strong,
b {
	font-weight: var(--font-weight-bold);
}

small {
	font-size: var(--font-size-small);
}

/* Fließtext aus dem WYSIWYG-Editor */
.prose {
	font-size: var(--font-size-body-lg);
	line-height: var(--line-height-body-lg);
}

.prose > * + * {
	margin-block-start: var(--stack-md);
}

.prose > * + :is(h2, h3, h4) {
	margin-block-start: var(--space-10);
}

.prose > :is(h2, h3, h4) + * {
	margin-block-start: var(--stack-sm);
}

.prose :is(ul, ol) {
	display: grid;
	gap: var(--space-2);
	padding-inline-start: 1.25em;
}

.prose li::marker {
	color: var(--theme-accent-text);
}

.prose a:not(.btn) {
	color: var(--theme-link);
	text-decoration-color: var(--theme-link-decoration);
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--duration-fast) var(--ease-standard),
		text-decoration-thickness var(--duration-fast) var(--ease-standard);
}

.prose a:not(.btn):hover {
	color: var(--theme-link-hover);
	text-decoration-thickness: 0.14em;
}

.prose--lead {
	font-family: var(--font-family-display);
	font-size: var(--font-size-lead);
	line-height: var(--line-height-lead);
}

.prose--lead > * + * {
	margin-block-start: 0;
}

/* Kleine Handschrift (Intro: Fließtext unter dem Teaser) */
.prose--lead-sm {
	font-family: var(--font-family-display);
	font-size: var(--font-size-lead-sm);
	line-height: var(--line-height-lead-sm);
}