/**
 * Ernst Müller – Layout · Richtung A „Editorial Grid" (zentrierte Komposition)
 * Prototyp auf der Seite „Leistungen" (Body-Klasse .em-editorial).
 *
 * Konzept: Die gesamte Komposition sitzt zentriert in der Seitenmitte mit
 * gleichem Whitespace links/rechts. Innerhalb jeder Section steht die
 * Überschrift links (mit großer Section-Nummer) und läuft beim Scrollen
 * sparsam sticky mit; der Fließtext liegt in einer schmalen Spalte rechts daneben.
 *
 * Native Spalten-Blöcke (FSE/TT25-konform). Deaktivieren des Plugins +
 * Zurückspielen des Content-Backups stellt das Standard-Layout wieder her.
 *
 * ─── Zentrale Stellschrauben ────────────────────────────────────────────
 *   --em-canvas    Breite der zentrierten Komposition (Whitespace L/R)
 *   --em-gap       Abstand zwischen Überschrift-Spalte und Text-Spalte
 *   --em-sticky    Abstand der sticky-Überschrift von oben
 * ────────────────────────────────────────────────────────────────────────
 */

body.em-editorial .wp-block-post-content > .em-ed {
	--em-canvas: clamp(20rem, 90vw, 1000px);
	--em-gap: clamp(1.5rem, 5vw, 4rem);
	--em-sticky: 6rem;

	max-width: var(--em-canvas);
	margin-inline: auto;
	counter-reset: em-sec;
}

/* Abstand zwischen den Sektionen. */
body.em-editorial .em-ed > .em-ed-section {
	margin-block: clamp(2.5rem, 6vw, 4.5rem);
	column-gap: var(--em-gap);
	align-items: start; /* nötig, damit sticky in der linken Spalte greift */
}

/* Linke Spalte: Überschrift + Nummer, läuft sparsam sticky mit. */
body.em-editorial .em-ed-head {
	position: sticky;
	top: var(--em-sticky);
	align-self: start;
}

body.em-editorial .em-ed-head > h2 {
	margin: 0;
	font-size: clamp(1.5rem, 1rem + 1.9vw, 2.3rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	hyphens: auto;
	overflow-wrap: normal;
}

/* Große Section-Nummer als grafisches Label über der Überschrift. */
body.em-editorial .em-ed-head > h2::before {
	counter-increment: em-sec;
	content: counter(em-sec, decimal-leading-zero) " —";
	display: block;
	margin-bottom: 0.6rem;
	color: #E40A13;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.25em;
}

/* Rechte Spalte: Fließtext in ruhiger Zeilenlänge. */
body.em-editorial .em-ed-body > p {
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.15rem);
	line-height: 1.7;
}

body.em-editorial .em-ed-body > p:first-child {
	margin-top: 0;
}

/* Trennlinien: feine, breite Linien. */
body.em-editorial .em-ed > .wp-block-separator {
	max-width: none;
	margin-block: 0;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.12;
}

/* ─── Mobile: Spalten stapeln nativ (<782px); sticky deaktivieren ───────── */
@media (max-width: 781px) {
	body.em-editorial .em-ed-head {
		position: static;
		margin-bottom: 0.5rem;
	}
	body.em-editorial .em-ed > .em-ed-section {
		margin-block: clamp(2rem, 8vw, 3rem);
	}
}