/* core/group: Kopf, Fuß und Sektionen. */

/* ---------------------------------------------------------------------------
 * Sticky Header
 * ------------------------------------------------------------------------- */

/*
 * Klebt am Wrapper des Template Parts, nicht am Kopf selbst: Der Wrapper ist genau so
 * hoch wie der Kopf, darin hätte ein klebendes Element keinen Weg. Eingeloggt rückt der
 * Kopf unter die Admin-Leiste, außer unter 600px, wo diese mitscrollt.
 */
.wp-block-template-part:has(> .ec-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 60;
}

@media (max-width: 600px) {
	.wp-block-template-part:has(> .ec-header) {
		top: 0;
	}
}

/* Bezugsrahmen der Mega-Menü-Panels. */
.ec-header {
	position: relative;
}

/*
 * Ab breakpoint.xl klebt nur die Meta-Leiste, die Menüzeile scrollt weg. Wrapper und Kopf
 * lösen sich dafür auf, sonst wäre der Elternkasten der Leiste wieder nur so hoch wie der
 * Kopf. Die Menüzeile übernimmt Bezugsrahmen und Ebene der Mega-Menü-Panels.
 */
@media (min-width: 1040px) {
	.wp-block-template-part:has(> .ec-header),
	.ec-header {
		display: contents;
	}

	.ec-metabar {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0);
		z-index: 60;
	}

	.ec-header__bar {
		position: relative;
		z-index: 59;
	}
}

/*
 * Kein Blockabstand zwischen Meta-Leiste und Hauptleiste. Zwei Klassen, weil WordPress
 * den Abstand containerspezifisch ausgibt.
 */
.ec-header .ec-header__bar {
	margin-block-start: 0;
}

.ec-header__bar {
	border-bottom: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
}

/* Auslöser, Navigation und CTA stehen als eine Gruppe rechts. */
.ec-header__nav {
	gap: var(--wp--custom--space--xxs);
}

/* CTA in der Größe der Menüeinträge statt der globalen Button-Größe. */
.ec-header__nav .wp-block-button__link {
	font-size: var(--wp--custom--navigation--font-size);
}

/* ---------------------------------------------------------------------------
 * Meta-Leiste
 *
 * Trennpunkte zwischen den Einträgen als ::before.
 * ------------------------------------------------------------------------- */

/* Unter der Spacing-Skala, die Leiste bleibt flach. */
.ec-metabar {
	padding-top: var(--wp--custom--space--xxs);
	padding-bottom: var(--wp--custom--space--xxs);
}

.ec-metabar p {
	line-height: 1.3;
}

.ec-metabar__facts {
	gap: var(--wp--preset--spacing--40);
}

.ec-metabar__facts p + p::before {
	content: "";
	display: inline-block;
	width: var(--wp--custom--dot--size);
	height: var(--wp--custom--dot--size);
	margin-right: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	vertical-align: middle;
}

/*
 * Meta-Leiste und Kopf-CTA erst ab breakpoint.xl, darunter enthält das Vollbild-Menü
 * beides. Zwei Klassen am CTA, weil das Flex-Layout von core/buttons display gleich
 * spezifisch und später setzt.
 */
@media (max-width: 1039px) {
	.ec-metabar,
	.ec-header__bar .ec-header__cta {
		display: none;
	}
}

.ec-metabar__login {
	font-weight: 600;
}

/*
 * Personen-Symbol vor "Member-Login". Dieselben Deklarationen wie bei .ec-mobile__login
 * in details.css, weil beide Dateien unabhängig voneinander geladen werden.
 */
.ec-metabar__login a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--space--xxs);
}

.ec-metabar__login a::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	mask-image: var(--wp--custom--icon--user);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
}

.ec-metabar a,
.ec-footer a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--transition--base);
}

.ec-metabar a:hover,
.ec-footer a:hover {
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
 * Hero der Startseite
 * ------------------------------------------------------------------------- */

.ec-hero {
	position: relative;
	overflow: hidden;
}

/* Lichtschein oben rechts. */
.ec-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -14%;
	inset-inline-end: -8%;
	width: min(47.5rem, 72vw);
	aspect-ratio: 1;
	background-image: radial-gradient(circle at 50% 50%, var(--wp--preset--color--tint) 0%, transparent 68%);
	pointer-events: none;
}

/* Der Inhalt liegt über dem Schein. */
.ec-hero > * {
	position: relative;
}

.ec-hero .ec-label {
	color: var(--wp--custom--color--neutral);
}

/* Versalienzeile bündig mit der Oberkante des Bildes. */
.ec-hero__grid {
	gap: var(--wp--preset--spacing--60);
	align-items: stretch;
}

/*
 * Feste zwei Spalten, weil die Mindest-Spaltenbreite des Blocks auf breiten Bildschirmen
 * vier Spuren anlegt. Im CSS erreicht die Regel auch bereits gespeicherte Seiten.
 */
.ec-hero .ec-hero__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 880px entspricht breakpoint.md. */
@media (max-width: 880px) {
	.ec-hero .ec-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Gestaffelte Abstände in der Textspalte. Zwei Klassen gegen den Blockabstand. */
.ec-hero .ec-hero__text > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ec-hero .ec-hero__text > .ec-hero__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Bei dieser Größe enger gesetzt als die übrigen Überschriften. */
.ec-hero__title {
	font-size: var(--wp--custom--font-size--hero);
	line-height: 0.98;
	letter-spacing: -0.035em;
}

/* Ohne Rücksetzung trägt <mark> den gelben Standardgrund des Browsers. */
.ec-hero__title mark {
	background-color: transparent;
}

.ec-hero__intro {
	max-width: 27em;
	color: var(--wp--custom--color--text);
}

/*
 * Bild so hoch wie die Textspalte. Stehen die Spalten untereinander, gilt wieder das
 * Seitenverhältnis.
 */
.ec-hero__image {
	height: 100%;
	margin: 0;
}

.ec-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--panel);
}

/* ---------------------------------------------------------------------------
 * Karten-Raster, vier Spalten
 *
 * Doppelte Klasse gegen die gleich spezifische, später ausgegebene Grid-Regel des
 * Group-Blocks. Im CSS statt im Block-Attribut, damit Änderungen auch gespeicherte
 * Seiten erreichen.
 * ------------------------------------------------------------------------- */

.ec-grid4.ec-grid4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 1100px) {
	.ec-grid4.ec-grid4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ec-grid4.ec-grid4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Vorteilsband
 *
 * Dunkle Karte direkt unter dem Hero, ohne eigenen Innenabstand oben und unten.
 * ------------------------------------------------------------------------- */

.ec-band__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
}

/*
 * Logo als Wasserzeichen unten rechts, angeschnitten. Absolut positioniert nimmt es
 * nicht am Raster teil.
 */
.ec-band__card::after {
	content: "";
	position: absolute;
	inset-inline-end: -2%;
	inset-block-end: -46%;
	width: min(26.25rem, 52%);
	aspect-ratio: 2400 / 247;
	background-image: url(../../images/logo-weiss.png);
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

/* Die Textspalten liegen über dem Wasserzeichen. */
.ec-band__item {
	position: relative;
}

/* Versalienzeile und Text eng. Zwei Klassen gegen den globalen Blockabstand. */
.ec-band__card .ec-band__item > * + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

.ec-band .ec-label {
	color: var(--wp--custom--color--accent-hover);
}

.ec-band__text {
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Leistungsbereiche als Kartenleiste
 *
 * Vertikaler Innenabstand im CSS, weil ein Padding-Attribut am constrained Group den
 * seitlichen Seitenrand aufhebt.
 * ------------------------------------------------------------------------- */

.ec-cluster {
	padding-block-start: var(--wp--preset--spacing--70);
	padding-block-end: var(--wp--preset--spacing--60);
}

.ec-cluster .ec-label {
	color: var(--wp--custom--color--neutral);
}

/* Überschrift links, Pfeiltasten rechts, beide auf der Grundlinie. */
.ec-cluster .ec-cluster__head {
	gap: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
}

.ec-cluster__intro {
	max-width: 44em;
}

.ec-cluster .ec-cluster__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-cluster__title {
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.ec-cluster__intro-text {
	color: var(--wp--custom--color--text);
}

/*
 * Seitlich um den Seitenrand eingerückt, damit angeschnittene Karten sichtbar bleiben.
 * Innenabstand oben und unten für den Kartenschatten, weil ein Scroll-Container beide
 * Achsen abschneidet (overflow: clip hilft nicht, geclippte Container scrollen nicht).
 * Unten fest (space.shadow), da der Schatten nicht mitschrumpft. Doppelte Klasse gegen
 * das gleich spezifische gap des Flex-Layouts.
 */
.ec-rail.ec-rail {
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
	overflow-x: auto;
	padding-inline: var(--wp--custom--gutter);
	padding-block: var(--wp--preset--spacing--30) var(--wp--custom--space--shadow);
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--wp--custom--gutter);
	scrollbar-width: none;
}

.ec-rail::-webkit-scrollbar {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Pfeiltasten der Leiste
 *
 * Die Tasten erzeugt assets/js/rail.js.
 * ------------------------------------------------------------------------- */

.ec-rail__nav {
	display: flex;
	gap: var(--wp--custom--space--xxs);
}

/*
 * hidden setzt rail.js, wenn die Leiste nicht überläuft. display: flex oben schlägt die
 * Browser-Vorgabe für [hidden].
 */
.ec-rail__nav[hidden] {
	display: none;
}

.ec-rail__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.375rem;
	height: 3.375rem;
	border: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base), opacity var(--wp--custom--transition--base);
}

.ec-rail__button--prev::before {
	content: "←";
}

.ec-rail__button--next::before {
	content: "→";
}

.ec-rail__button:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--surface);
}

.ec-rail__button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * Bereichskarte
 * ------------------------------------------------------------------------- */

.ec-rail .ec-rail__card {
	display: flex;
	flex-direction: column;
	flex: none;
	width: clamp(17rem, 32vw, 26.25rem);
	scroll-snap-align: start;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--panel);
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}

.ec-rail .ec-rail__card:hover {
	transform: translateY(-0.375rem);
	box-shadow: var(--wp--custom--shadow--lift);
}

.ec-rail__image {
	margin: 0;
}

.ec-rail__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
}

/*
 * Spalte mit Fußlink unten, damit die Fußlinien aller Karten auf einer Höhe stehen.
 * Die Abstände des Flow-Layouts entfallen, gap ersetzt sie.
 */
.ec-rail__card .ec-rail__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
}

.ec-rail__card .ec-rail__body > * + * {
	margin-block-start: 0;
}

.ec-rail__title {
	line-height: 1.15;
}

.ec-rail__title a {
	color: var(--wp--preset--color--brand);
	transition: color var(--wp--custom--transition--base);
}

.ec-rail__title a:hover {
	color: var(--wp--preset--color--accent);
}

.ec-rail__desc {
	flex: 1;
	color: var(--wp--preset--color--muted);
}

/* Leistungen als Fließzeile mit Trennpunkten. */
.ec-rail__list .wp-block-post-template {
	gap: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
}

.ec-rail__list .wp-block-post {
	display: flex;
}

.ec-rail__list .wp-block-post-title {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: normal;
}

.ec-rail__list .wp-block-post:not(:last-child)::after {
	content: "·";
	padding-inline: 0.45em;
	color: var(--wp--custom--color--accent-pale);
}

.ec-rail__card .ec-rail__body > .ec-rail__more {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--border--width) solid var(--wp--preset--color--surface);
	font-weight: 600;
}

.ec-rail__more a,
.ec-cluster__all a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/*
 * Der Link rückt in den Schattenraum der Leiste, sein sichtbarer Abstand bleibt
 * spacing 50. Zwei Klassen gegen den globalen Blockabstand.
 */
.ec-cluster > .ec-cluster__foot {
	margin-block-start: calc(var(--wp--preset--spacing--50) - var(--wp--custom--space--shadow));
}

/* Pfeil als Pseudo-Element, damit er beim Bearbeiten des Linktextes erhalten bleibt. */
.ec-link--arrow a::after {
	content: "→";
	padding-inline-start: 0.4em;
}

/* ---------------------------------------------------------------------------
 * Karten-Raster, drei Spalten
 *
 * Aufbau wie .ec-grid4.
 * ------------------------------------------------------------------------- */

.ec-grid3.ec-grid3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 1100px) {
	.ec-grid3.ec-grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ec-grid3.ec-grid3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-grid2.ec-grid2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 560px) {
	.ec-grid2.ec-grid2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Sechs Gründe
 * ------------------------------------------------------------------------- */

.ec-reasons {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--70);
}

/*
 * Firmenzeichen rechts oben, angeschnitten. Als Maske, damit die weiße Grafik die
 * Hintergrundfarbe annimmt.
 */
.ec-reasons::before {
	content: "";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--50);
	inset-inline-end: -4%;
	width: min(32.5rem, 60%);
	aspect-ratio: 1;
	background-color: var(--wp--custom--color--accent-pale);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.14;
	pointer-events: none;
}

/* Der Inhalt liegt über dem Zeichen. */
.ec-reasons > * {
	position: relative;
}

.ec-reasons .ec-label {
	color: var(--wp--custom--color--neutral);
}

.ec-reasons .ec-reasons__head {
	margin-block-end: var(--wp--preset--spacing--55);
}

.ec-reasons .ec-reasons__head > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Breite am Titel statt am alignwide-Container, dessen Ränder Core mit !important auf
 * auto setzt.
 */
.ec-reasons__title {
	max-width: 44rem;
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-reasons__n {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.ec-reasons__item-title {
	line-height: 1.25;
}

.ec-reasons__text {
	color: var(--wp--preset--color--muted);
}

.ec-reasons .ec-reasons__item > * + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

.ec-reasons .ec-reasons__item > .ec-reasons__item-title {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------------------
 * Einladung am Fuß der Sektion
 * ------------------------------------------------------------------------- */

.ec-reasons .ec-invite {
	position: relative;
	overflow: hidden;
	align-items: stretch;
	gap: var(--wp--preset--spacing--55);
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--55);
	border-radius: var(--wp--custom--radius--card);
}

/* Wortmarke links unten, angeschnitten. */
.ec-invite::after {
	content: "";
	position: absolute;
	inset-inline-start: -3%;
	inset-block-end: -56%;
	width: min(20rem, 34%);
	aspect-ratio: 2400 / 247;
	background-image: url(../../images/logo-weiss.png);
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.07;
	pointer-events: none;
}

/*
 * Text und Bild teilen sich die Zeile im Verhältnis 2:1 und brechen erst
 * um, wenn die Textspalte unter 20rem fiele.
 */
.ec-invite__text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 2 1 20rem;
	gap: var(--wp--preset--spacing--50);
}

.ec-invite .ec-invite__text > * + * {
	margin-block-start: 0;
}

.ec-invite__lead {
	max-width: 30em;
	font-weight: 500;
	line-height: 1.5;
}

.ec-invite__image {
	position: relative;
	flex: 1 1 13rem;
	margin: 0;
}

.ec-invite__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------------------------------------------------------------------------
 * Bild-Text-Modul
 *
 * Vertikaler Innenabstand im CSS, damit der seitliche Seitenrand erhalten bleibt.
 * ------------------------------------------------------------------------- */

.ec-split {
	padding-block: var(--wp--preset--spacing--70);
}

.ec-split .ec-label {
	color: var(--wp--custom--color--neutral);
}

/* start statt stretch, damit das Bild sein Seitenverhältnis behält. */
.ec-split__grid {
	align-items: start;
}

/*
 * Feste zwei Spalten, weil die Mindest-Spaltenbreite des Blocks auf breiten Bildschirmen
 * vier Spuren anlegt. Zwei Klassen, damit gap gegen die später ausgegebene Layout-Regel
 * gewinnt. Größerer Zeilenabstand für die gestapelte Ansicht.
 */
.ec-split .ec-split__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--55);
	row-gap: var(--wp--preset--spacing--60);
}

@media (max-width: 880px) {
	.ec-split .ec-split__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Gespiegelt: Bild links. */
.ec-split--reverse .ec-split__image {
	order: -1;
}

/* Beim Umbruch steht das Bild immer unter dem Text, auch in der Spiegelung. */
@media (max-width: 880px) {
	.ec-split--reverse .ec-split__image {
		order: 0;
	}
}

.ec-split__title {
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.ec-split .ec-split__text > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-split .ec-split__text > .ec-split__link {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ec-split__text p {
	color: var(--wp--custom--color--text);
	line-height: 1.75;
}

.ec-split__link a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* height: auto am Bild, damit aspect-ratio gegen die Höhenangabe im Markup greift. */
.ec-split__image {
	margin: 0;
}

.ec-split__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

/* ---------------------------------------------------------------------------
 * Bild-Text-Modul, Abwandlungen
 *
 * Zusatzklassen an der äußeren Gruppe: --breit gibt dem Text zwei Drittel, --fuellbild
 * zieht das Bild auf die Höhe der Textspalte.
 * ------------------------------------------------------------------------- */

.ec-split--breit .ec-split__grid {
	grid-template-columns: 2fr 1fr;
}

@media (max-width: 880px) {
	.ec-split--breit .ec-split__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Bild in Höhe der Textspalte, ohne eigenes Seitenverhältnis. stretch ist nötig, weil
 * height: 100% am Bild eine Bezugshöhe braucht.
 */
.ec-split--fuellbild .ec-split__grid {
	align-items: stretch;
}

/*
 * Bild absolut in der Fläche, damit nur die Textspalte die Zeilenhöhe bestimmt. Im Fluss
 * zöge ein verzögert ladendes Bild die Zeile auf die Ersatzhöhe von WordPress (1500px).
 */
.ec-split--fuellbild .ec-split__image {
	position: relative;
	min-height: clamp(16.25rem, 26vw, 22.5rem);
}

.ec-split--fuellbild .ec-split__image img {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

/* ---------------------------------------------------------------------------
 * Ablauf in vier Schritten
 *
 * Farben aus dem Section Style styles/dunkel.json.
 * ------------------------------------------------------------------------- */

.ec-steps {
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--70);
}

.ec-steps .ec-steps__head {
	margin-block-end: var(--wp--preset--spacing--55);
}

/*
 * Kurze Zeilen im Kopf. Die Breite sitzt an Überschrift und Absatz, weil Core die Ränder
 * des alignwide-Kopfs mit !important auf auto setzt.
 */
.ec-steps__title,
.ec-steps__intro {
	max-width: 34rem;
}

.ec-steps .ec-steps__head > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-steps .ec-label {
	color: var(--wp--custom--color--accent-hover);
}

/* balance statt geschütztem Leerzeichen, das beim Bearbeiten verloren ginge. */
.ec-steps__title {
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/*
 * Kompakte Fassung für die Leistungsseiten. Die Überschrift steht dort ohne Einleitung
 * und läuft über die volle Breite.
 */
.ec-steps--kompakt {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-steps--kompakt .ec-steps__title {
	max-width: none;
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.06;
}

.ec-steps__intro,
.ec-steps__text {
	color: var(--wp--custom--color--accent-pale);
}

/* Haken im Kreis als ::before, punktierte Linie zum nächsten Schritt als ::after. */
.ec-steps__item {
	position: relative;
	padding-block-start: calc(2.375rem + var(--wp--preset--spacing--30));
}

.ec-steps__item::before {
	content: "✓";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--accent-hover);
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

/*
 * Linie auf Höhe der Kreismitte bis in den Abstand zum nächsten Schritt, beim letzten
 * Schritt nur bis zur Spaltenkante.
 */
.ec-steps__item::after {
	content: "";
	position: absolute;
	inset-block-start: 1.1875rem;
	inset-inline: 0 calc(var(--wp--preset--spacing--50) * -1);
	border-block-start: calc(var(--wp--custom--border--width) * 2) dotted color-mix(in srgb, var(--wp--custom--color--accent-hover) 60%, transparent);
}

.ec-steps__item:last-child::after {
	inset-inline-end: 0;
}

/*
 * Am Zeilenende endet die Linie an der Spaltenkante. Umbrüche wie bei .ec-grid4, bei
 * zwei Spalten beschließt jedes zweite Element eine Zeile.
 */
@media (max-width: 1100px) {
	.ec-steps__item:nth-child(2n)::after {
		inset-inline-end: 0;
	}
}

/* Bei einer Spalte läuft die Linie bis zum Bildschirmrand, .ec-steps schneidet ab. */
@media (max-width: 560px) {
	.ec-steps__item::after,
	.ec-steps__item:last-child::after {
		inset-inline-end: calc(var(--wp--custom--gutter) * -1);
	}
}

.ec-steps .ec-steps__item > * + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

.ec-steps .ec-steps__item > .ec-steps__n {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-steps__n {
	color: var(--wp--custom--color--accent-hover);
	font-weight: 600;
}

.ec-steps > .ec-steps__note {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------------------
 * Leistungsdetail: Kopf, Eckdaten, Inhalt
 * ------------------------------------------------------------------------- */

.ec-lead {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-lead .ec-lead__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--55);
	row-gap: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (max-width: 880px) {
	.ec-lead .ec-lead__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-lead .ec-lead__text > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-lead .ec-lead__text > .ec-lead__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-lead__cluster {
	color: var(--wp--preset--color--accent);
}

.ec-lead__cluster a {
	color: inherit;
}

.ec-lead__title {
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.ec-lead__text-excerpt {
	max-width: 34em;
	color: var(--wp--custom--color--text);
	line-height: 1.7;
}

.ec-lead__image {
	margin: 0;
}

.ec-lead__image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
}

/* Band mit den Eckdaten. */
.ec-facts {
	padding-block: var(--wp--preset--spacing--40);
}

/* auto-fit, damit die übrigen Angaben aufrücken, wenn eine fehlt. */
.ec-facts .ec-facts__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--55);
}

.ec-facts .ec-label {
	color: var(--wp--preset--color--accent);
}

.ec-facts .ec-facts__item > * + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

.ec-facts__value,
.ec-facts__value a {
	color: var(--wp--preset--color--brand);
}

/* ---------------------------------------------------------------------------
 * "Kennen Sie das?"
 *
 * Eigene Schriftgröße zwischen xl und der Hero-Stufe.
 * ------------------------------------------------------------------------- */

.ec-problem {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60);
}

/* Firmenzeichen rechts, wie bei .ec-reasons. */
.ec-problem::before {
	content: "";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--50);
	inset-inline-end: 0;
	width: min(18.75rem, 40%);
	aspect-ratio: 1;
	background-color: var(--wp--custom--color--accent-pale);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.14;
	pointer-events: none;
}

.ec-problem__inner {
	position: relative;
}

.ec-problem .ec-label {
	color: var(--wp--preset--color--accent);
}

.ec-problem .ec-problem__inner > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ec-problem__question {
	max-width: 24em;
	font-size: clamp(var(--wp--preset--font-size--xl), 2.9vw, var(--wp--custom--font-size--question));
	line-height: 1.28;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--brand);
	text-wrap: pretty;
}

.ec-problem__answer {
	max-width: 44em;
	color: var(--wp--custom--color--text);
	line-height: 1.8;
}

.ec-detail {
	padding-block: var(--wp--preset--spacing--60);
}

/* Ohne Beitragsinhalt fällt der Abschnitt zusammen. */
.ec-detail:not(:has(.wp-block-post-content > *)) {
	padding-block: 0;
}

.ec-detail .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ec-detail h2 {
	margin-block-start: var(--wp--preset--spacing--50);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.ec-detail p {
	color: var(--wp--custom--color--text);
	line-height: 1.75;
}

/* Leistungsumfang mit Haken statt Aufzählungspunkten. */
.ec-scope {
	list-style: none;
	padding-inline-start: 0;
}

.ec-scope li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--width) solid var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand);
}

.ec-scope li::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Leistungsübersicht
 *
 * Ein Abschnitt je Bereich, getrennt durch eine feine Linie.
 * ------------------------------------------------------------------------- */

.ec-archive__head {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-archive__title {
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.ec-archive__head .ec-archive__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Breite an den Kindern statt am alignwide-Container, dessen Ränder Core mit !important
 * auf auto setzt.
 */
.ec-archive__title,
.ec-archive__text {
	max-width: 40rem;
}

.ec-archive__text {
	color: var(--wp--custom--color--text);
	line-height: 1.75;
}

/* Bereichsseite: erster Abschnitt direkt unter dem Kopf, ohne Trennlinie. */
.ec-services--first {
	border-block-start: 0;
	padding-block-start: var(--wp--preset--spacing--60);
}

.ec-services--first .ec-services__intro {
	margin-block-end: var(--wp--preset--spacing--50);
}

.ec-services--first .ec-services__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-services--first .ec-services__title {
	max-width: 40rem;
}

.ec-services {
	padding-block: var(--wp--preset--spacing--55);
	border-block-start: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
}

.ec-services .ec-label {
	color: var(--wp--custom--color--neutral);
}

/* Links Bereichsname, rechts Beschreibung und Verweis. */
.ec-services .ec-services__head {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--55);
	row-gap: var(--wp--preset--spacing--40);
	align-items: start;
	margin-block-end: var(--wp--preset--spacing--50);
}

@media (max-width: 780px) {
	.ec-services .ec-services__head {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-services .ec-services__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-services__title {
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.ec-services__desc {
	color: var(--wp--custom--color--text);
	line-height: 1.75;
}

.ec-services .ec-services__aside > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-services__more a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Leistungskarte
 *
 * Kindselektor, damit Beiträge aus einem Query Loop innerhalb der Karte nicht
 * mitgemeint sind.
 * ------------------------------------------------------------------------- */

.ec-services__grid.ec-services__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 640px) {
	.ec-services__grid.ec-services__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Spaltenzahl nach Kartenzahl, damit die letzte Zeile nicht verwaist (fünf Karten:
 * 3 + 2, sieben: 4 + 3). Im CSS statt als columnCount, weil gespeichertes Markup die
 * alte Kartenzahl festschreiben würde. Die Breiten stehen in den Media Queries, damit
 * keine Regel die Spezifität von :has() überbieten muss.
 */
@media (min-width: 641px) and (max-width: 1240px) {
	.ec-services__grid.ec-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1241px) {
	.ec-services__grid.ec-services__grid:has(> :is(:nth-child(4), :nth-child(7), :nth-child(8), :nth-child(12)):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ec-services__grid.ec-services__grid:has(> :is(:nth-child(3), :nth-child(5), :nth-child(6), :nth-child(9), :nth-child(11)):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ec-services__grid.ec-services__grid:has(> :nth-child(1):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-services__grid > .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface);
	transition: transform var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}

.ec-services__grid > .wp-block-post:hover {
	transform: translateY(-0.25rem);
	border-color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.ec-services__grid > .wp-block-post:hover {
		transform: none;
	}
}

.ec-service__image {
	margin: 0;
}

.ec-service__image img {
	display: block;
	width: 100%;
}

.ec-services .ec-service__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--wp--custom--space--xxs);
	padding: var(--wp--preset--spacing--50);
}

.ec-services .ec-service__body > * + * {
	margin-block-start: 0;
}

.ec-service__title {
	line-height: 1.25;
}

.ec-service__title a {
	color: var(--wp--preset--color--brand);
	transition: color var(--wp--custom--transition--base);
}

.ec-service__title a:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * Die ganze Karte führt zur Leistung. Overlay am Titel-Link, damit es nur einen
 * Tabstopp und eine Vorlesefassung gibt.
 */
.ec-service__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Fokusrahmen um die ganze Karte. */
.ec-services__grid > .wp-block-post:has(.ec-service__title a:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.ec-service__title a:focus-visible {
	outline: none;
}

.ec-service__text {
	flex: 1;
	color: var(--wp--preset--color--muted);
}

/* Beschriftung ohne eigenen Link, die Karte ist bereits das Ziel. */
.ec-service__cue {
	margin-block-start: var(--wp--custom--space--xxs);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* Eigener Pfeil, weil .ec-link--arrow einen Link erwartet. */
.ec-service__cue::after {
	content: "→";
	padding-inline-start: 0.4em;
}

/* ---------------------------------------------------------------------------
 * Kontaktabschluss
 *
 * Farben und Verlauf aus dem Section Style styles/kontaktband.json.
 * ------------------------------------------------------------------------- */

.ec-cta {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60);
}

/* Wortmarke rechts unten, angeschnitten. */
.ec-cta::after {
	content: "";
	position: absolute;
	inset-inline-end: -2%;
	inset-block-end: -42%;
	width: min(32.5rem, 42%);
	aspect-ratio: 2400 / 247;
	background-image: url(../../images/logo-weiss.png);
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.16;
	pointer-events: none;
}

/*
 * Container ohne Breitenbegrenzung, damit die Überschrift einzeilig passt. Die Kinder
 * begrenzen sich selbst. Doppelte Klasse gegen die gleich spezifische Layout-Regel,
 * die WordPress pro Block inline und damit später ausgibt.
 */
.ec-cta .ec-cta__inner {
	position: relative;
	max-width: none;
	margin-inline: auto;
}

.ec-cta .ec-label {
	color: var(--wp--custom--color--accent-pale);
}

.ec-cta .ec-cta__inner > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-cta .ec-cta__inner > .ec-cta__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-cta .ec-cta__inner > .ec-cta__promise {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * Einzeilig, solange Platz ist. max-content statt nowrap, damit ein längerer,
 * redaktionell gepflegter Text umbricht. max-width: none hebt die contentSize des
 * constrained Layouts auf.
 */
.ec-cta__title {
	inline-size: max-content;
	max-inline-size: 100%;
	margin-inline: auto;
	line-height: 1.03;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-cta__text {
	max-width: 36em;
	margin-inline: auto;
	line-height: 1.65;
}

/* Haken vor dem Antwortversprechen, als Pseudo-Element unabhängig vom Text. */
.ec-cta__promise {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--space--xxs);
	font-weight: 600;
}

.ec-cta__promise::before {
	content: "✓";
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--overlay--pill);
	font-size: var(--wp--preset--font-size--sm);
}

/* Umriss-Button in hellen Farben für den dunklen Grund. */
.ec-cta .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
	color: var(--wp--preset--color--base);
	box-shadow: none;
}

.ec-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--base);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	color: var(--wp--preset--color--base);
}

/* Der Cyan-Schein passt nicht auf den Farbverlauf. */
.ec-cta .wp-block-button__link {
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Aktuelle News
 *
 * Leiste wie .ec-rail, die Karten sind hier Einträge eines Query Loops.
 * ------------------------------------------------------------------------- */

.ec-news {
	padding-block-end: var(--wp--preset--spacing--70);
}

.ec-news .ec-rail__head {
	margin-block-end: var(--wp--preset--spacing--40);
}

.ec-news__title {
	line-height: 1.08;
	letter-spacing: -0.03em;
}

/*
 * Wie .ec-rail__card, für Einträge eines Query Loops. Kindselektor, weil die
 * Bereichskarten einen eigenen Query Loop mit ebenfalls .wp-block-post enthalten.
 */
.ec-rail > .wp-block-post,
.ec-newsliste__grid > .wp-block-post {
	display: flex;
	flex-direction: column;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--panel);
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}

/* Nur in der Leiste: feste Kartenbreite und Rastpunkt. */
.ec-rail > .wp-block-post {
	flex: none;
	width: clamp(17rem, 30vw, 25rem);
	scroll-snap-align: start;
}

.ec-rail > .wp-block-post:hover,
.ec-newsliste__grid > .wp-block-post:hover {
	transform: translateY(-0.375rem);
	box-shadow: var(--wp--custom--shadow--lift);
}

.ec-news__image {
	margin: 0;
}

.ec-news__image img {
	display: block;
	width: 100%;
}

.ec-news .ec-news__body,
.ec-newsliste .ec-news__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--wp--custom--space--xxs);
	padding: var(--wp--preset--spacing--50);
}

.ec-news .ec-news__body > * + *,
.ec-newsliste .ec-news__body > * + * {
	margin-block-start: 0;
}

.ec-news__date {
	color: var(--wp--preset--color--muted);
}

.ec-news__heading {
	line-height: 1.25;
}

.ec-news__heading a {
	color: var(--wp--preset--color--brand);
	transition: color var(--wp--custom--transition--base);
}

.ec-news__heading a:hover {
	color: var(--wp--preset--color--accent);
}

.ec-news__excerpt {
	flex: 1;
	color: var(--wp--preset--color--muted);
}

.ec-news > .ec-news__foot {
	margin-block-start: calc(var(--wp--preset--spacing--50) - var(--wp--custom--space--shadow));
}

.ec-news__all a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Beitragsübersicht
 *
 * Karten wie in der Leiste, im Raster mit höchstens drei Spalten. auto-fit statt
 * auto-fill, damit zwei Beiträge keine leere dritte Spalte erzeugen.
 * ------------------------------------------------------------------------- */

.ec-newsliste {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-newsliste__grid.ec-newsliste__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17.5rem, 30%)), 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.ec-newsliste .ec-news__heading {
	font-size: var(--wp--preset--font-size--xl);
}

.ec-newsliste .ec-newsliste__blaettern {
	margin-block-start: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
}

/* Die Seitenzahlen bilden einen eigenen Block und brauchen einen eigenen Abstand. */
.ec-newsliste__blaettern .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.ec-newsliste__blaettern a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.ec-newsliste__blaettern a:hover {
	color: var(--wp--custom--color--accent-hover);
}

/* ---------------------------------------------------------------------------
 * Weitere Beiträge unter einem Beitrag
 *
 * Flache Karten ohne Bild und Schatten. Oben kein Innenabstand, die Sektion schließt
 * an den Beitragstext an.
 * ------------------------------------------------------------------------- */

.ec-weitere {
	padding-block-end: var(--wp--preset--spacing--70);
}

.ec-weitere__titel {
	margin-block-end: var(--wp--preset--spacing--40);
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.ec-weitere__grid.ec-weitere__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.ec-weitere__grid > .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--xxs);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface);
}

.ec-weitere__grid > .wp-block-post > * + * {
	margin-block-start: 0;
}

.ec-weitere__datum {
	color: var(--wp--preset--color--muted);
}

.ec-weitere__karten-titel {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.25;
}

.ec-weitere__karten-titel a {
	color: var(--wp--preset--color--brand);
	transition: color var(--wp--custom--transition--base);
}

.ec-weitere__karten-titel a:hover {
	color: var(--wp--preset--color--accent);
}

/* Pfeil am Link selbst, .ec-link--arrow erwartet ein a darunter. */
.ec-weitere__mehr {
	margin-block-start: auto;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.ec-weitere__mehr::after {
	content: "→";
	padding-inline-start: 0.4em;
}

/* ---------------------------------------------------------------------------
 * Instagram unter der Beitragsübersicht
 *
 * Kacheln aus .ec-insta__item, dem Baustein der Instagram-Karte auf der Kontaktseite.
 * ------------------------------------------------------------------------- */

.ec-social {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-social .ec-social__head {
	gap: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
}

.ec-social__intro {
	max-width: 40em;
}

.ec-social__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-social__title {
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

/* Feste Stufen statt auto-fit, damit sechs Kacheln immer volle Reihen ergeben. */
.ec-social__grid.ec-social__grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 1100px) {
	.ec-social__grid.ec-social__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ec-social__grid.ec-social__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * Nachhaltigkeits-Teaser
 *
 * Raster des Bild-Text-Moduls, mit zentrierten Spalten und Kartenstapel rechts.
 * ------------------------------------------------------------------------- */

.ec-sustain .ec-split__grid {
	align-items: center;
}

.ec-sustain .ec-split__text > .ec-sustain__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-sustain .ec-sustain__cards > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-sustain__card {
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
}

.ec-sustain .ec-sustain__card > * + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

.ec-sustain__card-text {
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * Kundenlogos und Bewertungen
 * ------------------------------------------------------------------------- */

.ec-trust {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-trust .ec-label {
	color: var(--wp--preset--color--muted);
}

.ec-trust__count {
	font-size: clamp(var(--wp--preset--font-size--xl), 2.8vw, var(--wp--preset--font-size--xxl));
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--brand);
}

/*
 * Zahl und Zusatz sind getrennte Blöcke mit je eigener Bindung, daher gap statt
 * Leerzeichen. In em, damit der Abstand mit der Schriftgröße wächst.
 */
.ec-trust .ec-trust__count {
	gap: 0.3em;
	align-items: baseline;
}

.ec-trust__zahl {
	font-weight: 700;
}

.ec-trust .ec-trust__head > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-trust .ec-trust__badge {
	width: fit-content;
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--40);
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
}

/* Google-Zeichen vor der Note. */
.ec-trust__badge::before {
	content: "";
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	background-image: url(../../images/google-g.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.ec-trust__score {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--xxs);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand);
}

.ec-trust__score::after,
.ec-review__text::before {
	content: "★★★★★";
	letter-spacing: 0.1em;
	color: var(--wp--custom--color--star);
}

.ec-trust__source {
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * Logoreihen
 * ------------------------------------------------------------------------- */

.ec-trust .ec-logos {
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}

/*
 * Die zweite Gruppe läuft nach unten aus, als Zeichen, dass die Liste weitergeht. Die
 * Maske ändert nur die Deckkraft, vorgelesen werden alle Namen.
 */
.ec-trust .ec-logos--fade {
	margin-block-start: var(--wp--preset--spacing--30);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 45%) 52%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 45%) 52%, transparent 100%);
}

.ec-logos .ec-logos__item {
	flex: 0 1 clamp(7.5rem, 10vw, 10rem);
	margin: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
}

/* Drei Logos je Zeile, damit das Raster auf schmalen Geräten nicht zu lang wird. */
@media (max-width: 520px) {
	.ec-logos .ec-logos__item {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
	}
}

/* Graustufen, damit die fremden Markenfarben die Reihe nicht unruhig machen. */
.ec-logos__item img {
	width: 100%;
	aspect-ratio: 5 / 2;
	object-fit: contain;
	padding: var(--wp--preset--spacing--20);
	filter: grayscale(1);
}

/* ---------------------------------------------------------------------------
 * Kundenstimmen
 * ------------------------------------------------------------------------- */

.ec-trust .ec-trust__reviews {
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--55);
	text-align: start;
}

.ec-review {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
}

.ec-review.ec-review > * + * {
	margin-block-start: 0;
}

.ec-review__text {
	flex: 1;
	line-height: 1.65;
}

/* Sterne über dem Zitat. */
.ec-review__text::before {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
}

.ec-review .ec-review__author {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--border--width) solid var(--wp--preset--color--surface);
}

.ec-review__initial {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.ec-review .ec-review__person > * + * {
	margin-block-start: 0;
}

.ec-review__name {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	line-height: 1.3;
}

.ec-review__meta {
	color: var(--wp--preset--color--muted);
	line-height: 1.3;
}

.ec-trust .ec-trust__note {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

/*
 * Leere Fußnote ausblenden. Der gebundene Absatz bleibt im Seiteninhalt stehen, auch
 * wenn der gepflegte Text leer ist.
 */
.ec-trust .ec-trust__note:has(> p:empty) {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

/* Versalienzeile über Spalte oder Sektion. Die Farbe setzt der jeweilige Abschnitt. */
.ec-label {
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ec-footer .ec-label {
	color: var(--wp--custom--color--accent-hover);
}

.ec-muted {
	color: var(--wp--custom--color--on-dark-muted);
}

/*
 * columnCount im Block bringt keine Umbrüche mit, daher hier. Umbruchpunkte wie bei
 * .ec-grid4.
 */
@media (max-width: 1100px) {
	.ec-footer .ec-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ec-footer .ec-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-footer__card {
	background-color: var(--wp--custom--overlay--card);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--40);
}

/* Enge Zeilen in den Karten. Zwei Klassen gegen den Blockabstand des Flow-Layouts. */
.ec-footer .ec-footer__card > * + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

.ec-footer__card p {
	line-height: 1.45;
}

.ec-footer__phone {
	font-weight: 600;
}

/* Mehr Luft unter der Versalienzeile. */
.ec-footer .ec-footer__card > .ec-label + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-footer .ec-footer__card .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Kein Button-Schein auf dem dunklen Footer. */
.ec-footer .wp-block-button__link {
	box-shadow: none;
}

.ec-footer__services,
.ec-footer__legal {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--border--width) solid var(--wp--custom--overlay--line);
}

/* Leistungen als Pillen. Zwei Klassen gegen das gap des Flex-Layouts. */
.ec-footer .ec-pills {
	gap: var(--wp--custom--space--xxs);
}

.ec-pills p {
	margin: 0;
}

.ec-pills a {
	display: inline-block;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--overlay--pill);
	line-height: 1.2;
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.ec-pills a:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
 * Seitenkopf
 *
 * Ebenen von unten: Streifen, Bilder, Verlauf, Wortmarke, Inhalt. Ohne Bild
 * bleibt das Streifenmuster sichtbar.
 * ------------------------------------------------------------------------- */

.ec-pagehead {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--brand);
	background-image: var(--wp--custom--pagehead--stripes);
}

/* Verlauf hinter dem Text, links dicht, rechts offen. */
.ec-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--wp--custom--pagehead--veil);
	pointer-events: none;
}

/* Wortmarke rechts unten, angeschnitten. */
.ec-pagehead::after {
	content: "";
	position: absolute;
	inset-inline-end: -2%;
	inset-block-end: -40%;
	z-index: 2;
	width: min(26.25rem, 38%);
	aspect-ratio: 2400 / 247;
	background-image: url(../../images/logo-weiss.png);
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.08;
	pointer-events: none;
}

/*
 * Hebt die Inhaltsbreite des constrained Layouts auf. Doppelte Klasse, weil die
 * Layout-Regel von WordPress gleich spezifisch ist und später ausgegeben wird.
 */
.ec-pagehead__slides.ec-pagehead__slides {
	position: absolute;
	inset: 0;
	max-width: none;
}

.ec-pagehead__slides .ec-pagehead__slide {
	position: absolute;
	inset: 0;
	margin: 0;
}

/* Doppelte Klasse gegen .wp-block-image img { height: auto }. */
.ec-pagehead__slide.ec-pagehead__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Überblenden erst mit Skript. Ohne JavaScript bleibt das oberste Bild sichtbar. */
.ec-pagehead__slides--js .ec-pagehead__slide {
	opacity: 0;
	transition: opacity 700ms ease;
}

.ec-pagehead__slides--js .ec-pagehead__slide.is-current {
	opacity: 1;
}

.ec-pagehead__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	min-height: var(--wp--custom--pagehead--min);
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
}

/* Punkte und Pfeile bringen eigenen Freiraum mit, daher weniger Innenabstand. */
.ec-pagehead__inner:has(.ec-pagehead__nav) {
	padding-block-end: var(--wp--preset--spacing--50);
}

.ec-pagehead--flach .ec-pagehead__inner {
	min-height: var(--wp--custom--pagehead--min-compact);
}

/* Steht nur die Überschrift im Kopf, entfällt die Mindesthöhe. */
.ec-pagehead__inner:not(:has(.ec-pagehead__lead, .ec-pagehead__actions)) {
	min-height: 0;
}

/* Der Brotkrumenpfad bleibt oben, alles Weitere sammelt sich darunter. */
.ec-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block: 0 auto;
	color: var(--wp--preset--color--base);
}

.ec-crumbs a {
	color: var(--wp--custom--color--accent-pale);
}

.ec-crumbs a:hover {
	color: var(--wp--preset--color--base);
}

.ec-crumbs a::after {
	content: "›";
	margin-inline-start: var(--wp--preset--spacing--30);
	color: var(--wp--custom--color--on-dark-muted);
}

.ec-pagehead__text {
	max-width: min(100%, 46em);
	padding-block-start: var(--wp--preset--spacing--40);
}

.ec-pagehead__kicker {
	letter-spacing: 0.2em;
	color: var(--wp--custom--color--accent-on-dark);
}

.ec-pagehead__title {
	font-size: var(--wp--custom--font-size--pagehead);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--base);
	text-wrap: balance;
}

.ec-pagehead__lead {
	max-width: 34em;
	line-height: 1.65;
	color: var(--wp--preset--color--tint);
}

.ec-pagehead__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Punkte und Pfeile erzeugt assets/js/kopf.js. */
.ec-pagehead__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-pagehead__dots {
	display: flex;
	gap: var(--wp--custom--space--xxs);
}

.ec-pagehead__dot {
	width: 2.25rem;
	height: 0.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--overlay--control);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base);
}

.ec-pagehead__dot.is-current {
	background-color: var(--wp--preset--color--accent);
}

.ec-pagehead__arrow {
	width: 2.75rem;
	height: 2.75rem;
	border: var(--wp--custom--border--width) solid var(--wp--custom--overlay--control);
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base);
}

.ec-pagehead__arrow:hover {
	background-color: var(--wp--custom--overlay--line);
}

.ec-pagehead__arrow::before {
	content: "←";
}

.ec-pagehead__arrow--next::before {
	content: "→";
}

/* ---------------------------------------------------------------------------
 * "Wann welche Leistung?"
 *
 * Symbole über ec-icon--<name>, als Maske aus assets/images/icons/.
 * ------------------------------------------------------------------------- */

.ec-compare {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-compare__intro {
	max-width: 42em;
	margin-block-end: var(--wp--preset--spacing--55);
}

.ec-compare .ec-label {
	color: var(--wp--custom--color--neutral);
}

.ec-compare__lead {
	max-width: 34em;
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}

.ec-compare__tel a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.ec-compare__grid.ec-compare__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--55);
}

@media (max-width: 880px) {
	.ec-compare__grid.ec-compare__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-compare__item {
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50);
}

/* Symbol vor der Überschrift. */
.ec-compare__item::before {
	content: "";
	display: block;
	width: 2.625rem;
	height: 2.625rem;
	margin-block-end: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--accent);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
}

.ec-compare .ec-compare__item > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-compare__text {
	line-height: 1.75;
	color: var(--wp--custom--color--text);
}

.ec-icon--bell::before { mask-image: url(../../images/icons/bell.svg); }
.ec-icon--bolt::before { mask-image: url(../../images/icons/bolt.svg); }
.ec-icon--building::before { mask-image: url(../../images/icons/building.svg); }
.ec-icon--chat::before { mask-image: url(../../images/icons/chat.svg); }
.ec-icon--check::before { mask-image: url(../../images/icons/check.svg); }
.ec-icon--drop::before { mask-image: url(../../images/icons/drop.svg); }
.ec-icon--leaf::before { mask-image: url(../../images/icons/leaf.svg); }
.ec-icon--loop::before { mask-image: url(../../images/icons/loop.svg); }
.ec-icon--monitor::before { mask-image: url(../../images/icons/monitor.svg); }
.ec-icon--paw::before { mask-image: url(../../images/icons/paw.svg); }
.ec-icon--people::before { mask-image: url(../../images/icons/people.svg); }
.ec-icon--recycle::before { mask-image: url(../../images/icons/recycle.svg); }
.ec-icon--route::before { mask-image: url(../../images/icons/route.svg); }
.ec-icon--stairs::before { mask-image: url(../../images/icons/stairs.svg); }

/* ---------------------------------------------------------------------------
 * "Ein Ansprechpartner, der Ihr Objekt kennt"
 *
 * Bild bündig in der zweiten Spalte, der Innenabstand sitzt daher an der Textspalte.
 * ------------------------------------------------------------------------- */

.ec-partner {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-partner__card.ec-partner__card {
	position: relative;
	overflow: hidden;
	gap: 0;
	border-radius: var(--wp--custom--radius--lg);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 880px) {
	.ec-partner__card.ec-partner__card {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Firmenzeichen links, angeschnitten. */
.ec-partner__card::before {
	content: "";
	position: absolute;
	inset-inline-start: -12%;
	inset-block-end: -26%;
	height: 132%;
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--base);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

.ec-partner__text {
	position: relative;
	padding: var(--wp--preset--spacing--55);
}

.ec-partner__kicker {
	letter-spacing: 0.2em;
	color: var(--wp--custom--color--accent-on-dark);
}

.ec-partner__lead {
	max-width: 32em;
	line-height: 1.75;
	color: var(--wp--preset--color--tint);
}

.ec-partner__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-partner__image {
	margin: 0;
	min-height: clamp(15.625rem, 26vw, 25rem);
}

.ec-partner__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Leistungsdetail: Einleitung und Leistungsumfang
 *
 * Markup aus patterns/leistung-intro.php, gefüllt aus den Feldern der Leistung.
 * ------------------------------------------------------------------------- */

.ec-intro {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-intro__grid.ec-intro__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--55);
	align-items: start;
}

@media (max-width: 880px) {
	.ec-intro__grid.ec-intro__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-intro__text > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ec-intro__text h2 {
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.ec-intro__text p {
	line-height: 1.75;
	color: var(--wp--custom--color--text);
}

.ec-intro__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Der Umfang als Karte. Der Kopf trägt die Farbe, der Körper die Liste. */
.ec-scope {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--panel);
}

/* Kopf und Körper ohne Blockabstand. */
.ec-scope.ec-scope > * + * {
	margin-block-start: 0;
}

.ec-scope__head {
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--brand);
}

.ec-scope__head .ec-label {
	color: var(--wp--custom--color--accent-on-dark);
}

.ec-scope .ec-scope__head > * + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

.ec-scope__title {
	color: var(--wp--preset--color--base);
}

.ec-scope__body {
	padding: var(--wp--preset--spacing--50);
}

.ec-scope .ec-scope__body > * + * {
	margin-block-start: 0;
}

/* Häkchen als Pseudo-Element, die Listenzeilen bleiben reiner Text. */
.ec-scope__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-scope__list li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
	line-height: 1.55;
	color: var(--wp--preset--color--brand);
}

.ec-scope__list li:last-child {
	border-block-end: 0;
}

/* Erste Zeile ohne eigenen Abstand, der Innenabstand der Karte genügt. */
.ec-scope__list li:first-child {
	padding-block-start: 0;
}

.ec-scope__list li::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

/* Zwei Klassen, weil die Regel oben den Blockabstand im Körper auf null setzt. */
.ec-scope__body .ec-scope__note {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--custom--color--text);
}

/* Ohne Auflistung tritt an die Stelle der Karte die Einladung zum Gespräch. */
.ec-scope--anfrage {
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--card);
	padding: var(--wp--preset--spacing--50);
}

.ec-scope--anfrage > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-scope__tel a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* Pfeil hinter der Telefonnummer. */
.ec-scope__tel a::after {
	content: "→";
	padding-inline-start: 0.4em;
}

/* ---------------------------------------------------------------------------
 * Kontakt: Anfrage und Erreichbarkeit
 *
 * Formular links, rechts eine feste schmale Spalte. Umbruch am md-Breakpoint.
 * ------------------------------------------------------------------------- */

.ec-anfrage {
	padding-block: var(--wp--preset--spacing--60);
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}

.ec-anfrage__grid.ec-anfrage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (max-width: 880px) {
	.ec-anfrage__grid.ec-anfrage__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Die Karte, in die das Formular kommt. */
.ec-anfrage__formular {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--55);
	background-color: var(--wp--preset--color--surface);
}

/*
 * Logo-Wasserzeichen unten rechts, angeschnitten. Größe nach der Breite, weil die
 * Karte mit der Zahl der Formularfelder wächst.
 */
.ec-anfrage__formular::before {
	content: "";
	position: absolute;
	inset-block-end: -14%;
	inset-inline-end: -8%;
	width: min(34.375rem, 70%);
	aspect-ratio: 1;
	background-color: var(--wp--custom--color--accent-pale);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.1;
	pointer-events: none;
}

/* Das Formular liegt über dem Zeichen. */
.ec-anfrage__formular > * {
	position: relative;
}

/* Auffälliger Platzhalter, solange kein Formular eingesetzt ist. */
.ec-anfrage__hinweis {
	border: 2px dashed var(--wp--custom--color--accent-pale);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--custom--color--text);
}

.ec-anfrage__spalte {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/* Karte mit Anschrift und Zuständigkeiten. */
.ec-kontakt {
	border: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--base);
}

.ec-kontakt > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-kontakt__firma {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
}

.ec-kontakt__adresse {
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}

.ec-kontakt .ec-kontakt__wege > * + * {
	margin-block-start: 0;
}

.ec-kontakt__wege {
	line-height: 1.9;
}

.ec-kontakt__tel a {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

.ec-kontakt__mail a {
	color: var(--wp--preset--color--accent);
}

.ec-kontakt__zeiten {
	color: var(--wp--custom--color--text);
}

.ec-kontakt__anfahrt a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* Zuständigkeiten unter einer Linie, Schrift so groß wie im Rest der Karte. */
.ec-kontakt .ec-kontakt__bereiche {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
}

/* Kein Blockabstand, das Raster setzt die Abstände. */
.ec-kontakt .ec-kontakt__bereiche > * + *,
.ec-kontakt .ec-kontakt__bereich > * + * {
	margin-block-start: 0;
}

.ec-kontakt__bereich {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	color: var(--wp--custom--color--text);
}

.ec-kontakt__bereich-titel {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

/* Ansprechpartner: Zeile über beide Spalten, darunter Porträt und Name. */
.ec-kontakt .ec-kontakt__person {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
}

.ec-kontakt .ec-kontakt__person > * + * {
	margin-block-start: 0;
}

.ec-kontakt__person-kicker {
	grid-column: 1 / -1;
	color: var(--wp--custom--color--neutral);
}

/* object-fit hält den Kreis auch bei nicht quadratischen Bildern. */
.ec-kontakt__person-bild img {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--wp--custom--radius--pill);
	object-fit: cover;
}

.ec-kontakt__person-name {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

/* ---------------------------------------------------------------------------
 * Unternehmen: Kurzprofil
 *
 * Der große Satz auf 24em, damit er in kurzen Zeilen umbricht.
 * ------------------------------------------------------------------------- */

.ec-profil {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

/* Logo rechts oben, angeschnitten, neben dem umbrechenden Satz. */
.ec-profil::before {
	content: "";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--70);
	inset-inline-end: 0;
	width: min(18.75rem, 40%);
	aspect-ratio: 1;
	background-color: var(--wp--custom--color--accent-pale);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.14;
	pointer-events: none;
}

.ec-profil > * {
	position: relative;
}

.ec-profil__lead {
	max-width: 24em;
	margin-block-end: var(--wp--preset--spacing--50);
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.28;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--brand);
	text-wrap: pretty;
}

.ec-profil__akzent {
	color: var(--wp--preset--color--accent);
}

.ec-profil__text {
	max-width: 44em;
	line-height: 1.8;
	color: var(--wp--custom--color--text);
}

/* ---------------------------------------------------------------------------
 * Unternehmen: Bildreihe
 *
 * Das Hochformat (4:5) gibt die Zeilenhöhe vor. Das breite Bild liegt absolut in
 * seinem Rahmen, damit es die Höhe nicht mitbestimmt.
 * ------------------------------------------------------------------------- */

.ec-bilder {
	padding-block-end: var(--wp--preset--spacing--50);
}

.ec-bilder__grid.ec-bilder__grid {
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.ec-bilder__breit {
	grid-column: span 2;
	position: relative;
}

.ec-bilder__hoch {
	align-self: start;
}

/* Doppelte Klasse gegen .wp-block-image img { height: auto } aus Core. */
.ec-bilder__hoch.ec-bilder__hoch img {
	aspect-ratio: 4 / 5;
	inline-size: 100%;
	object-fit: cover;
}

.ec-bilder__breit.ec-bilder__breit img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ec-bilder img {
	border-radius: var(--wp--custom--radius--card);
}

@media (max-width: 880px) {
	.ec-bilder__grid.ec-bilder__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Allein in der Zeile braucht das Bild ein eigenes Verhältnis. */
	.ec-bilder__breit.ec-bilder__breit img {
		position: static;
		aspect-ratio: 16 / 10;
		block-size: auto;
	}
}

@media (max-width: 600px) {
	.ec-bilder__grid.ec-bilder__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ec-bilder__breit {
		grid-column: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Unternehmen: Zahlenband
 * ------------------------------------------------------------------------- */

.ec-zahlen {
	padding-block-end: var(--wp--preset--spacing--60);
}

.ec-zahlen__karte {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--55);
	background-color: var(--wp--preset--color--brand);
}

/* Logo-Wasserzeichen, hier auf dunklem Grund und deshalb weiß. */
.ec-zahlen__karte::before {
	content: "";
	position: absolute;
	inset-block-end: -30%;
	inset-inline-end: -4%;
	width: min(31.25rem, 55%);
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--base);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

.ec-zahlen__grid.ec-zahlen__grid {
	position: relative;
	gap: var(--wp--preset--spacing--50);
}

.ec-zahlen__item {
	text-align: center;
}

.ec-zahlen__wert {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--base);
}

.ec-zahlen__label.ec-zahlen__label {
	margin-block-start: var(--wp--custom--space--xxs);
	color: var(--wp--custom--color--accent-pale);
}

@media (max-width: 880px) {
	.ec-zahlen__grid.ec-zahlen__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * Unternehmen: Mitarbeiter
 * ------------------------------------------------------------------------- */

.ec-team {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.ec-team__oben.ec-team__oben {
	gap: var(--wp--preset--spacing--60);
	align-items: stretch;
	margin-block-end: var(--wp--preset--spacing--60);
}

.ec-team__titel {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-team__text p {
	line-height: 1.8;
	color: var(--wp--custom--color--text);
}

/* Doppelte Klasse gegen .wp-block-image img aus Core. */
.ec-team__bild.ec-team__bild {
	position: relative;
}

.ec-team__bild.ec-team__bild img {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	border-radius: var(--wp--custom--radius--lg);
	object-fit: cover;
}

.ec-team__grid.ec-team__grid {
	gap: var(--wp--preset--spacing--40);
}

.ec-team__karte {
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--base);
}

/* Haken im Kreis vor der Kartenüberschrift, wie in den Ablauf-Schritten. */
.ec-team__karte-titel {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2;
}

.ec-team__karte-titel::before {
	content: "✓";
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
}

.ec-team__karte-text {
	margin-block-end: 0;
	line-height: 1.5;
	color: var(--wp--preset--color--brand);
}

@media (max-width: 1100px) {
	.ec-team__grid.ec-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 880px) {
	.ec-team__oben.ec-team__oben {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Einspaltig gibt die Fläche die Höhe über ihr Seitenverhältnis vor. Das Bild bleibt
	 * absolut, weil ein verzögert ladendes Bild im Fluss die Ersatzhöhe von 1500px annähme.
	 */
	.ec-team__bild.ec-team__bild {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 600px) {
	.ec-team__grid.ec-team__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Unternehmen: Stimmen aus dem Team
 * ------------------------------------------------------------------------- */

.ec-stimmen {
	padding-block: var(--wp--preset--spacing--70);
}

.ec-stimmen__kopf {
	max-width: 40em;
	margin-block-end: var(--wp--preset--spacing--55);
}

.ec-stimmen__titel,
.ec-zuschriften__titel,
.ec-verweise__titel {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-stimmen__grid.ec-stimmen__grid {
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

/* Name und Funktion unten, auch bei unterschiedlich langen Zitaten. */
.ec-stimmen__karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface);
}

.ec-stimmen__bild img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ec-stimmen__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--preset--spacing--50);
}

.ec-stimmen__zitat {
	flex: 1;
	margin-block-end: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--lg);
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--brand);
}

.ec-stimmen__name.ec-stimmen__name {
	margin-block-end: 0;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

.ec-stimmen__rolle.ec-stimmen__rolle {
	margin-block-start: 0;
	color: var(--wp--preset--color--muted);
}

.ec-stimmen .ec-muted {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (max-width: 880px) {
	.ec-stimmen__grid.ec-stimmen__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Unternehmen: Jobs und Partner
 * ------------------------------------------------------------------------- */

.ec-jobs {
	padding-block-end: var(--wp--preset--spacing--70);
}

/* Die Fläche kommt aus dem Section Style, hier nur Form und Raster. */
.ec-jobs__karte.ec-jobs__karte {
	gap: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	align-items: stretch;
}

.ec-jobs__text {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--55);
}

/* Wasserzeichen links unten, angeschnitten. */
.ec-jobs__text::before {
	content: "";
	position: absolute;
	inset-block-end: -24%;
	inset-inline-start: -10%;
	width: min(25rem, 60%);
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--base);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

.ec-jobs__text > * {
	position: relative;
}

/*
 * Kicker auf dunklem Grund. Zwei Klassen, weil die Sektionen ihre Kickerfarbe ebenfalls
 * mit zwei Klassen setzen. Nur zusammen mit dem Modifier, damit anders gefärbte Kicker
 * im Section Style unberührt bleiben.
 */
.is-style-dunkel .ec-label--hell,
.ec-label.ec-label--hell {
	color: var(--wp--custom--color--accent-on-dark);
}

.ec-jobs__titel {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--base);
	text-wrap: balance;
}

.ec-jobs__intro {
	max-width: 32em;
	margin-block-end: var(--wp--preset--spacing--50);
	line-height: 1.75;
	color: var(--wp--custom--color--accent-pale);
}

/*
 * Bild bis zur Kante der Rasterzelle. aspect-ratio: auto hebt das Verhältnis aus dem
 * Block auf, damit neben einer höheren Textspalte kein Streifen bleibt. Im Block
 * bleibt es für den Zuschnitt im Editor.
 */
.ec-jobs__bild {
	position: relative;
	margin-block: 0;
}

.ec-jobs__bild.ec-jobs__bild img {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

@media (max-width: 880px) {
	.ec-jobs__karte.ec-jobs__karte {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Einspaltig gibt die Fläche die Höhe vor, wie bei .ec-team__bild. */
	.ec-jobs__bild.ec-jobs__bild {
		aspect-ratio: 4 / 3;
	}
}

/* ---------------------------------------------------------------------------
 * Unternehmen: Kundenstimmen
 * ------------------------------------------------------------------------- */

.ec-zuschriften {
	padding-block-end: var(--wp--preset--spacing--70);
}

.ec-zuschriften__kopf {
	max-width: 44em;
	margin-block-end: var(--wp--preset--spacing--50);
}

.ec-zuschriften__grid.ec-zuschriften__grid {
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.ec-zuschrift {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--55);
	background-color: var(--wp--preset--color--surface);
}

.ec-zuschrift::before {
	content: "";
	position: absolute;
	inset-block-start: 8%;
	inset-inline-end: -4%;
	width: min(15.625rem, 55%);
	aspect-ratio: 1;
	background-color: var(--wp--custom--color--accent-pale);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.12;
	pointer-events: none;
}

.ec-zuschrift > * {
	position: relative;
}

.ec-zuschrift__text {
	flex: 1;
	margin-block-end: var(--wp--preset--spacing--40);
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--brand);
}

.ec-zuschrift__name.ec-zuschrift__name {
	margin-block-end: 0;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

.ec-zuschrift__rolle.ec-zuschrift__rolle {
	margin-block-start: 0;
	color: var(--wp--preset--color--muted);
}

.ec-zuschriften .ec-muted {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (max-width: 1100px) {
	.ec-zuschriften__grid.ec-zuschriften__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Unternehmen: Verweiskarten
 *
 * Zwei Karten zu den Unterseiten.
 * ------------------------------------------------------------------------- */

.ec-verweise {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-verweise__kopf {
	max-width: 48em;
	margin-block-end: var(--wp--preset--spacing--50);
}

.ec-verweise__grid.ec-verweise__grid {
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.ec-verweis {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}

/* :focus-within gibt der Tastatur dieselbe Rückmeldung wie dem Zeiger. */
.ec-verweis:hover,
.ec-verweis:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--wp--custom--shadow--lift);
}

.ec-verweis__bild img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ec-verweis__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--custom--space--karte);
}

/* Größer als die h3-Vorgabe, weil der Titel die Karte trägt. */
.ec-verweis__titel {
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--custom--font-size--karten-titel);
	line-height: 1.15;
}

.ec-verweis__text {
	flex: 1;
	margin-block-end: var(--wp--preset--spacing--40);
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}

@media (max-width: 880px) {
	.ec-verweise__grid.ec-verweise__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Bestätigung nach dem Absenden
 *
 * Die Seite hat weder Seitenkopf noch Kontaktband, die Karte steht allein.
 * ------------------------------------------------------------------------- */

.ec-danke {
	padding-block: var(--wp--preset--spacing--70);
	background-color: var(--wp--preset--color--surface);
}

.ec-danke__karte {
	max-width: 50rem;
	margin-inline: auto;
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--55);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--panel);
}

/* Haken über der Überschrift, größer als im Ablauf. */
.ec-danke__karte::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	margin-block-end: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xl);
}

.ec-danke__title {
	margin-block-end: var(--wp--preset--spacing--40);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-danke__intro {
	margin-block-end: var(--wp--preset--spacing--50);
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}

/* Rufnummer als eigener, gebundener Block unter ihrer Bezeichnung. */
.ec-danke__label {
	color: var(--wp--preset--color--muted);
}

/* Doppelte Klasse gegen den Blockabstand des Flow-Layouts, der zwei Klassen trägt. */
.ec-danke__tel.ec-danke__tel {
	margin-block: var(--wp--custom--space--xxs) var(--wp--preset--spacing--50);
	line-height: 1.2;
}

.ec-danke__tel a {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

.ec-danke__actions {
	gap: var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------------------
 * Kontakt: Was nach dem Absenden passiert
 *
 * Schritte mit der Geometrie von .ec-steps__item, hier in Farben für hellen Grund.
 * ------------------------------------------------------------------------- */

.ec-nachher {
	overflow: hidden;
	padding-block-end: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--base);
}

/* Kleiner als sonst, die Sektion ist ein Nachsatz zum Formular. */
.ec-nachher__title {
	margin-block-end: var(--wp--preset--spacing--50);
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-nachher__grid.ec-nachher__grid {
	gap: var(--wp--preset--spacing--40);
}

.ec-nachher .ec-steps__item::before {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Der Abstand zwischen den Schritten ist hier spacing 40, die Linie folgt ihm. */
.ec-nachher .ec-steps__item::after {
	inset-inline-end: calc(var(--wp--preset--spacing--40) * -1);
	border-block-start-color: var(--wp--custom--color--accent-pale);
}

.ec-nachher .ec-steps__item:last-child::after {
	inset-inline-end: 0;
}

.ec-nachher__text {
	line-height: 1.6;
	color: var(--wp--preset--color--brand);
}

/* Ein Schritt pro Zeile, die Linie läuft bis zum Rand. .ec-nachher schneidet ab. */
@media (max-width: 880px) {
	.ec-nachher__grid.ec-nachher__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ec-nachher .ec-steps__item::after,
	.ec-nachher .ec-steps__item:last-child::after {
		inset-inline-end: calc(var(--wp--custom--gutter) * -1);
	}
}

/* Instagram-Karte. */
.ec-insta {
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface);
}

.ec-insta > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-insta__title {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
}

.ec-insta__grid.ec-insta__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.ec-insta__item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------------------------------------------------------------------------
 * Leistungsdetail: Abschnitt mit Phasen
 *
 * Über beide Spalten der Einleitung, ohne eigene Fläche. Die Nummern setzt ein
 * CSS-Zähler.
 * ------------------------------------------------------------------------- */

.ec-phasen {
	grid-column: 1 / -1;
	counter-reset: ec-phase;
}

.ec-phasen > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ec-phasen > .ec-phasen__grid {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-phasen .ec-label {
	color: var(--wp--preset--color--accent);
}

.ec-phasen__title {
	font-size: var(--wp--custom--font-size--karten-titel);
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.ec-phasen__intro {
	max-width: 44em;
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}

.ec-phasen__grid.ec-phasen__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 880px) {
	.ec-phasen__grid.ec-phasen__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-phase {
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--base);
}

.ec-phase > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Überschrift und Nummer stehen nebeneinander, der Kreis bleibt unverkleinert. */
.ec-phase__title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}

.ec-phase__title::before {
	counter-increment: ec-phase;
	content: counter(ec-phase, decimal-leading-zero);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.ec-phase__text {
	line-height: 1.65;
	color: var(--wp--custom--color--text);
}

/* ---------------------------------------------------------------------------
 * Leistungsdetail: "Sauberkeit ist Vertrauenssache"
 *
 * Bild in Höhe der Textspalte. Umbruch am md-Breakpoint wie in den übrigen Sektionen.
 * ------------------------------------------------------------------------- */

.ec-versprechen {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-versprechen__karte.ec-versprechen__karte {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
}

@media (max-width: 880px) {
	.ec-versprechen__karte.ec-versprechen__karte {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* overflow hält das Wasserzeichen, das breiter als die Spalte ist, vom Bild fern. */
.ec-versprechen__text {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--55);
}

/* Logo-Wasserzeichen als Maske, wie in .ec-reasons. */
.ec-versprechen__text::before {
	content: "";
	position: absolute;
	inset-block-start: -10%;
	inset-inline-end: -6%;
	height: 118%;
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--base);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

/* Der Inhalt liegt über dem Zeichen. */
.ec-versprechen__text > * {
	position: relative;
}

.ec-versprechen__title {
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-versprechen__intro {
	max-width: 34em;
	line-height: 1.7;
	color: var(--wp--custom--color--accent-pale);
}

/* Die Zusagen: Haken statt Aufzählungspunkt, Trennlinie zwischen den Zeilen. */
.ec-versprechen__liste {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-inline-start: 0;
	list-style: none;
	border-block-start: var(--wp--custom--border--width) solid var(--wp--custom--overlay--line-stark);
}

.ec-versprechen__liste li {
	display: grid;
	grid-template-columns: 1.375rem 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--width) solid var(--wp--custom--overlay--line-stark);
	line-height: 1.45;
}

.ec-versprechen__liste li::before {
	content: "✓";
	color: var(--wp--custom--color--accent-hover);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.ec-versprechen__note {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--custom--color--on-dark-muted);
}

/* Zweispaltig bestimmt die Textspalte die Höhe, einspaltig das Seitenverhältnis. */
.ec-versprechen__bild.ec-versprechen__bild {
	margin: 0;
	height: 100%;
}

.ec-versprechen__bild.ec-versprechen__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 880px) {
	.ec-versprechen__bild.ec-versprechen__bild img {
		aspect-ratio: 4 / 3;
	}
}

/* ---------------------------------------------------------------------------
 * Kundenstimmen, kompakte Fassung für die Leistungsseiten
 *
 * Ohne Fläche, Kicker, Kundenzahl und Logos. Die Bewertung steht links und ohne
 * Pille, die auf weißem Grund unsichtbar wäre.
 * ------------------------------------------------------------------------- */

.ec-trust--kompakt {
	padding-block-start: 0;
}

.ec-trust--kompakt .ec-trust__badge {
	margin-block-start: 0;
	margin-inline-start: 0;
	padding: 0;
	background-color: transparent;
}

.ec-trust--kompakt.ec-trust--kompakt > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-trust--kompakt .ec-trust__note {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Eigener Linienton, weil Karte und Grund hier die Farben tauschen. */
.ec-trust--kompakt .ec-review__author {
	border-block-start-color: var(--wp--custom--color--border);
}

/* ---------------------------------------------------------------------------
 * Leistungsdetail: "Häufige Fragen"
 *
 * Die Ausklapper selbst stehen in blocks/details.css.
 * ------------------------------------------------------------------------- */

.ec-faq {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-faq__grid.ec-faq__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--55);
	align-items: start;
}

@media (max-width: 880px) {
	.ec-faq__grid.ec-faq__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-faq__title {
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-faq__intro {
	max-width: 34em;
	/* Gleiche Stufe wie der Fließtext der Seite. */
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}

.ec-faq .ec-faq__kontakt {
	margin-block-start: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	align-items: baseline;
}

.ec-faq__tel a {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

.ec-faq__mail a {
	color: var(--wp--preset--color--accent);
}

.ec-faq__zeiten {
	color: var(--wp--preset--color--muted);
}

/* Die Fragenliste trägt oben eine Linie, jeder Eintrag eine darunter. */
.ec-faq__liste {
	border-block-start: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
}

/* Die Einträge stoßen aneinander; ihre Linien liefern die Trennung. */
.ec-faq .ec-faq__liste > * + * {
	margin-block-start: 0;
}

/* "Häufig zusammen angefragt": Überschrift und Übersichtslink in einer Zeile. */
.ec-services--related .ec-services__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.ec-services--related .ec-services__intro > * + * {
	margin-block-start: 0;
}

.ec-services__all a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * Qualität: Qualitätsmanagement in drei Stufen
 *
 * Helle Fassung des Ablaufs. Kreis und Linie als Pseudo-Elemente, die Nummer aus
 * einem CSS-Zähler.
 * ------------------------------------------------------------------------- */

.ec-stufen {
	padding-block: var(--wp--preset--spacing--60);
	counter-reset: ec-stufe;
}

.ec-stufen__ueberschrift {
	margin-block-end: var(--wp--preset--spacing--55);
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.ec-stufen__grid.ec-stufen__grid {
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

/* Oberer Innenabstand für den Kreis. Den Überstand der Linie schneidet .ec-stufen ab. */
.ec-stufen__item {
	position: relative;
	padding-block-start: calc(2.375rem + var(--wp--preset--spacing--40));
}

.ec-stufen__item::before {
	content: counter(ec-stufe);
	counter-increment: ec-stufe;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1;
}

/* Linie vom Kreis bis zur nächsten Karte, bei der letzten entfällt sie. */
.ec-stufen__item::after {
	content: "";
	position: absolute;
	inset-block-start: 1.1875rem;
	inset-inline-start: 2.375rem;
	inset-inline-end: calc(-1 * var(--wp--preset--spacing--50));
	border-block-start: 2px dotted var(--wp--custom--color--accent-pale);
}

.ec-stufen__item:last-child::after {
	content: none;
}

.ec-stufen__nummer.ec-stufen__nummer {
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.ec-stufen__titel {
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.22;
}

.ec-stufen__text {
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}

@media (max-width: 880px) {
	.ec-stufen__grid.ec-stufen__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Untereinander läuft keine Linie mehr zwischen den Stufen. */
	.ec-stufen__item::after {
		content: none;
	}
}

/* ---------------------------------------------------------------------------
 * Qualität: Ein Ansprechpartner, kurze Wege
 *
 * Leiste auf Basis von .ec-rail und assets/js/rail.js, Karten ohne Schatten.
 * ------------------------------------------------------------------------- */

.ec-naehe {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.ec-naehe__kopf {
	margin-block-end: var(--wp--preset--spacing--40);
}

.ec-naehe .ec-label {
	color: var(--wp--custom--color--neutral);
}

.ec-naehe__ueberschrift {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.ec-naehe__intro.ec-naehe__intro {
	gap: var(--wp--preset--spacing--55);
}

.ec-naehe__intro p {
	line-height: 1.8;
	color: var(--wp--custom--color--text);
}

@media (max-width: 880px) {
	.ec-naehe__intro.ec-naehe__intro {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Leiste in Inhaltsbreite und ohne Kartenschatten, daher ohne den Innenabstand von
 * .ec-rail.
 */
.ec-naehe__leiste.ec-naehe__leiste {
	padding-inline: 0;
	padding-block: 0;
}

/*
 * Die Karten füllen die Zeile, bis keine 16.25rem je Karte mehr passen. Dann scrollt
 * die Leiste, und rail.js blendet die Pfeile ein.
 */
.ec-naehe .ec-naehe__karte {
	display: flex;
	flex: 1 0 16.25rem;
	flex-direction: column;
	max-width: 26.25rem;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	scroll-snap-align: start;
}

/* Pfeile rechts über der Leiste. */
.ec-naehe .ec-rail__nav {
	width: fit-content;
	margin-block-start: var(--wp--preset--spacing--40);
	margin-inline-start: auto;
}

.ec-naehe__bild {
	margin: 0;
}

.ec-naehe__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

.ec-naehe__body {
	flex: 1;
	padding: var(--wp--custom--space--karte);
}

.ec-naehe__titel {
	margin-block-end: var(--wp--custom--space--xxs);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.22;
}

.ec-naehe__text {
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}

/* ---------------------------------------------------------------------------
 * Qualität: ECS-Anliegen-App
 *
 * Aufbau wie .ec-jobs. Die Trennlinien zwischen den Schritten sind Rahmen am
 * Folgeelement, damit sie auch nach dem Entfernen einer Zeile stimmen.
 * ------------------------------------------------------------------------- */

.ec-app {
	padding-block-end: var(--wp--preset--spacing--60);
	counter-reset: ec-app-schritt;
}

.ec-app__karte.ec-app__karte {
	gap: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	align-items: stretch;
}

.ec-app__text-spalte {
	position: relative;
	padding: var(--wp--preset--spacing--55);
}

/* Das Wasserzeichen liegt hinter dem Text und bleibt in der Karte. */
.ec-app__text-spalte::before {
	content: "";
	position: absolute;
	inset-block-end: -26%;
	inset-inline-start: -12%;
	width: min(22rem, 60%);
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--base);
	mask-image: url(../../images/logo-icon.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

.ec-app__text-spalte > * {
	position: relative;
}

.ec-app__ueberschrift {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.ec-app__intro {
	max-width: 34em;
	margin-block-end: var(--wp--preset--spacing--50);
	line-height: 1.75;
}

.ec-app__liste {
	max-width: 38em;
	overflow: hidden;
	border: var(--wp--custom--border--width) solid var(--wp--custom--overlay--line);
	border-radius: var(--wp--custom--radius--card);
}

.ec-app__zeile {
	position: relative;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	padding-inline-start: calc(var(--wp--preset--spacing--50) + 1.875rem + var(--wp--preset--spacing--40));
}

.ec-app .ec-app__liste .ec-app__zeile {
	margin-block-start: 0;
}

.ec-app__zeile + .ec-app__zeile {
	border-block-start: var(--wp--custom--border--width) solid var(--wp--custom--overlay--line);
}

.ec-app__zeile::before {
	content: counter(ec-app-schritt);
	counter-increment: ec-app-schritt;
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-start: var(--wp--preset--spacing--50);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1;
}

.ec-app__titel.ec-app__titel {
	margin-block-end: var(--wp--custom--space--xxs);
	font-weight: 600;
}

.ec-app__text.ec-app__text {
	margin-block: 0;
	line-height: 1.6;
	color: var(--wp--custom--color--accent-pale);
}

.ec-app__bild {
	margin: 0;
}

.ec-app__bild.ec-app__bild img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--wp--custom--pagehead--min-compact);
	object-fit: cover;
}

@media (max-width: 880px) {
	.ec-app__karte.ec-app__karte {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Gestapelt steht das Bild oben. */
	.ec-app__bild {
		order: -1;
	}

	.ec-app__bild.ec-app__bild img {
		height: auto;
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Nachhaltigkeit: Unsere Haltung
 *
 * Raster von .ec-split--breit, in der schmalen Spalte eine Karte statt eines Bildes.
 * ------------------------------------------------------------------------- */

.ec-haltung {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-klima {
	display: flex;
	flex-direction: column;
	padding: var(--wp--custom--space--karte);
	border-radius: var(--wp--custom--radius--lg);
}

/* Heller Grund für die Siegel, die für weißen Untergrund gezeichnet sind. */
.ec-klima__siegel.ec-klima__siegel {
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--base);
}

/* Gemeinsame Höhe, weil die Siegel unterschiedlich proportioniert sind. */
.ec-klima__siegel .ec-klima__siegel-item img {
	width: auto;
	height: 2.75rem;
}

.ec-klima__titel {
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.18;
}

.ec-klima__text {
	line-height: 1.75;
	color: var(--wp--custom--color--text);
}

/* ---------------------------------------------------------------------------
 * Nachhaltigkeit: Neun Punkte
 *
 * Symbol als Maske am Pseudo-Element, in der Akzentfarbe.
 * ------------------------------------------------------------------------- */

.ec-punkte {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-punkte__ueberschrift {
	margin-block-end: var(--wp--preset--spacing--55);
	font-size: var(--wp--custom--font-size--sektion-kompakt);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.ec-punkte__grid.ec-punkte__grid {
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.ec-punkt {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
}

.ec-punkt::before {
	content: "";
	display: block;
	width: 2.625rem;
	height: 2.625rem;
	margin-block-end: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--accent);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
}

.ec-punkt__titel {
	margin-block-end: var(--wp--custom--space--xxs);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2;
}

.ec-punkt__text {
	line-height: 1.65;
	color: var(--wp--custom--color--text);
}

.ec-punkte .ec-punkt > * + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

@media (max-width: 880px) {
	.ec-punkte__grid.ec-punkte__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ec-punkte__grid.ec-punkte__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Nachhaltigkeit: Kostenlose Analyse
 *
 * Raster und Kartenstapel von .ec-sustain.
 * ------------------------------------------------------------------------- */

.ec-analyse {
	padding-block: var(--wp--preset--spacing--60);
}

/* Knopf am Fuß der Textspalte. */
.ec-analyse .ec-split__text {
	display: flex;
	flex-direction: column;
}

.ec-analyse .ec-sustain__actions {
	margin-block-start: auto;
}

/*
 * Dunkle Kachel. Der Text trägt aus .ec-sustain eine eigene Farbe, die der Section
 * Style Dunkel nicht überschreibt.
 */
.ec-analyse .ec-analyse__fair .ec-sustain__card-text {
	color: var(--wp--custom--color--accent-pale);
}

.ec-analyse__zahl.ec-analyse__zahl {
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--custom--font-size--pagehead);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--brand);
}

/* ---------------------------------------------------------------------------
 * Nachhaltigkeit: Ökologische Reinigungsmittel
 * ------------------------------------------------------------------------- */

.ec-produkte {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-produkte .ec-split__grid {
	align-items: center;
}