/**
 * core/details — Elbe Clean
 *
 * Drei Konstrukte teilen sich diese Datei, alle ohne JavaScript:
 *
 * 1. Mega-Menü „Leistungen" — fünf Bereichsspalten, patterns/mega-leistungen.php
 * 2. Mega-Menü „Unternehmen" — vier Karten, direkt in parts/header.html
 * 3. Mobiles Vollbild-Menü — die gesamte Navigation unterhalb von 1040px
 *
 * Die beiden Mega-Menüs tragen `name="ec-nav"` und schließen sich dadurch
 * gegenseitig; Auslöser, Panel-Rahmen, Bildplatzhalter und Spaltenabstände sind
 * für beide dieselben Regeln. Das mobile Menü steht für sich und ist immer nur
 * dann sichtbar, wenn die Mega-Menüs es nicht sind.
 *
 * Zu den px-Werten in den Media Queries: CSS erlaubt in @media-Bedingungen keine
 * Custom Properties. 1040px entspricht var(--wp--custom--breakpoint--xl),
 * 1400px ist der Umbruch des Entwurfs auf drei Spalten und hat kein Token,
 * weil er nur hier vorkommt.
 */

/* ---------------------------------------------------------------------------
 * Auslöser — sieht aus wie ein Navigationspunkt
 * ------------------------------------------------------------------------- */

.ec-nav__mega {
	/*
	 * static, damit das Panel sich an .ec-header__bar ausrichtet und über die
	 * volle Breite laufen kann statt an der Breite des Auslösers zu kleben.
	 */
	position: static;
}

/*
 * Der Auslöser steht in derselben Leiste wie die core/navigation-Einträge und
 * muss deshalb dieselbe Typografie tragen — Größe und Zeilenhöhe kommen aus
 * denselben Tokens, sonst stehen „Leistungen" und „Unternehmen"
 * unterschiedlich hoch und unterschiedlich groß nebeneinander.
 */
.ec-nav__mega > summary {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--xxs);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--custom--navigation--font-size);
	font-weight: 500;
	line-height: var(--wp--custom--navigation--line-height);
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--wp--custom--transition--base);
}

/* Das Standard-Dreieck entfällt, der Entwurf nutzt ein eigenes Zeichen. */
.ec-nav__mega > summary::-webkit-details-marker {
	display: none;
}

.ec-nav__mega > summary:hover,
.ec-nav__mega > summary:focus-visible,
.ec-nav__mega[open] > summary {
	background-color: var(--wp--preset--color--surface);
}

/*
 * Chevron in Akzentfarbe, wie bei den übrigen Aufklapp-Punkten.
 * Maße in em statt px: so wächst das Zeichen mit der Schriftgröße mit und
 * es braucht kein eigenes Token.
 */
.ec-nav__mega > summary::after {
	content: "";
	display: inline-block;
	width: 0.375em;
	height: 0.375em;
	border-right: 0.125em solid var(--wp--preset--color--accent);
	border-bottom: 0.125em solid var(--wp--preset--color--accent);
	transform: rotate(45deg) translateY(-25%);
	transition: transform var(--wp--custom--transition--base);
}

.ec-nav__mega[open] > summary::after {
	transform: rotate(225deg) translateY(-25%);
}

/* ---------------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------------- */

/*
 * Der Entwurf begrenzt die Höhe mit `calc(100vh - 100%)`. Das wirkt nicht:
 * Prozentwerte in max-height lösen nur gegen einen Bezugsrahmen mit fester
 * Höhe auf, und der Header hat keine. Der Browser lässt die Angabe stehen und
 * behandelt sie wie `none` — im Entwurf ragt das Panel deshalb unten heraus.
 *
 * 80vh statt dessen: genug für alle fünf Spalten, und das Panel füllt nie den
 * ganzen Bildschirm. Der Rest scrollt.
 */
.ec-nav__mega > .ec-mega {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 1;
	/*
	 * Das Flow-Layout des details-Blocks setzt einen Abstand zum summary.
	 * Das Panel hängt absolut darunter und braucht ihn nicht. Zwei Klassen im
	 * Selektor, sonst gewinnt die Core-Regel bei Gleichstand.
	 */
	margin-block-start: 0;
	background-color: var(--wp--preset--color--base);
	border-end-start-radius: var(--wp--custom--radius--lg);
	border-end-end-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--panel);
	max-height: 80vh;
	overflow-y: auto;
}

.ec-mega__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter);
}

/*
 * Das Flow-Layout von WordPress setzt margin-block-start auf jedes Geschwister
 * ab dem zweiten. In einem Grid und in der Linkliste regeln aber gap und
 * Innenabstand die Abstände — sonst rutscht die erste Spalte nach oben und die
 * Liste läuft weit auseinander.
 */
.ec-mega .ec-mega__grid > * + *,
.ec-mega .ec-mega__list .wp-block-post-template > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Spalte je Bereich
 * ------------------------------------------------------------------------- */

/*
 * Zwei Klassen, sonst gewinnt der blockGap des Group-Blocks bei Gleichstand
 * und alle Abstände in der Spalte werden gleich groß.
 *
 * Der Entwurf staffelt: 22px unter dem Bild, 14px unter dem Bereichstitel.
 */
.ec-mega .ec-mega__col > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

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

/*
 * Bildplatzhalter. Der Entwurf zeigt hier eine Schraffur mit Bildbeschreibung,
 * kein Foto — das bleibt so, bis Bildmaterial vorliegt. Statt der festen Höhe
 * von 92px ein Seitenverhältnis, damit die Fläche mit der Spalte mitwächst.
 */
.ec-mega__img {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 1;
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--sm);
	background-image: repeating-linear-gradient(
		135deg,
		var(--wp--preset--color--tint) 0 0.875rem,
		var(--wp--preset--color--surface) 0.875rem 1.75rem
	);
}

.ec-mega__img p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.ec-mega__label {
	margin: 0;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

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

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

/* ---------------------------------------------------------------------------
 * Leistungsliste — der Query Loop je Bereich
 * ------------------------------------------------------------------------- */

.ec-mega__list .wp-block-post-template {
	gap: 0;
}

.ec-mega__list .wp-block-post-title {
	margin: 0;
}

/*
 * Der Entwurf setzt 9px/12px Innenabstand bei einer Zeilenhöhe von rund 19px,
 * macht also 39px je Zeile. Hier: 8px (space.xxs) plus 1.4 Zeilenhöhe — die
 * Spacing-Skala gibt unterhalb von 12px nichts anderes her.
 */
.ec-mega__list .wp-block-post-title a {
	display: block;
	/* Negativer Rand: Text bündig zur Spaltenkante, Hover-Fläche steht über. */
	margin-inline-start: calc(var(--wp--preset--spacing--20) * -1);
	padding: var(--wp--custom--space--xxs) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--brand);
	line-height: 1.4;
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.ec-mega__list .wp-block-post-title a:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * Hinweisblock — steht im selben Grid und füllt die freie Zelle
 * ------------------------------------------------------------------------- */

.ec-mega__note {
	grid-column: 1 / -1;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface);
}

.ec-mega__note-text {
	gap: var(--wp--preset--spacing--40);
	align-items: baseline;
}

.ec-mega__note p {
	margin: 0;
}

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

.ec-mega__note-link a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	transition: color var(--wp--custom--transition--base);
}

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

/* ---------------------------------------------------------------------------
 * Karten-Panel „Unternehmen"
 *
 * Vier Karten statt Linklisten: Bildplatzhalter, Titel, Unterzeile. Die Karte
 * ist als Ganzes anklickbar — der Titel-Link legt dafür eine unsichtbare
 * Fläche über die Karte, wie im Entwurf ([data-card] h3 a::after).
 * ------------------------------------------------------------------------- */

/*
 * Zwei Klassen, damit die Spaltenzahl die Regel des Fünfer-Rasters weiter oben
 * und dessen Media Query schlägt.
 */
.ec-mega .ec-mega__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ec-mega__card {
	position: relative;
}

/* Der Entwurf setzt hier 5px — die Spacing-Skala beginnt darüber. */
.ec-mega .ec-mega__card > .ec-mega__card-title + * {
	margin-block-start: var(--wp--custom--space--xxs);
}

.ec-mega__card-title {
	margin: 0;
	font-weight: 600;
}

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

.ec-mega__card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

/*
 * Unterzeile und Pfeil stehen in einer Zeile, der Pfeil rechts. Er ist
 * dekorativ und deshalb ::after statt Markup — wie die Trennpunkte der
 * Meta-Leiste in group.css.
 */
.ec-mega__card-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.ec-mega__card-note::after {
	content: "→";
	font-size: 1.25em;
	color: var(--wp--preset--color--accent);
	opacity: 0;
	transform: translateX(-0.375em);
	transition:
		opacity var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.ec-mega__card:hover .ec-mega__card-note::after,
.ec-mega__card:focus-within .ec-mega__card-note::after {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------------------
 * Umbrüche
 *
 * Unterhalb von 1040px zeigt der Entwurf statt der Panels das Vollbild-Menü.
 * Beide Auslöser verschwinden deshalb; ihre Inhalte stehen dort in den
 * Akkordeons des mobilen Menüs.
 * ------------------------------------------------------------------------- */

@media (max-width: 1400px) {

	.ec-mega__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * Fünf Bereiche in drei Spalten lassen die dritte Zelle der zweiten Zeile
	 * frei — dort steht der Hinweisblock und stellt sich hochkant.
	 *
	 * Zwei Klassen im Selektor, weil sonst die verticalAlignment-Regel des
	 * Group-Blocks (align-items: center) bei gleicher Spezifität gewinnt.
	 */
	.ec-mega .ec-mega__note {
		grid-column: 3;
		grid-row: 2;
		align-self: start;
		flex-direction: column;
		align-items: flex-start;
	}

	.ec-mega .ec-mega__note-text {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------------------------
 * Mobiles Vollbild-Menü
 *
 * Ein drittes <details>, das unterhalb von 1040px die gesamte Navigation
 * trägt. Der Auslöser ist der Menü-Knopf in der Leiste; im geöffneten Zustand
 * wird dasselbe <summary> zum Schließkreuz oben rechts, und das <details>
 * selbst legt sich als Vollbildfläche über die Seite.
 *
 * Kein `name`-Attribut: Die Desktop-Panels sind hier ohnehin ausgeblendet.
 * ------------------------------------------------------------------------- */

@media (min-width: 1040px) {

	.ec-nav__mobile {
		display: none;
	}
}

/*
 * Auslöser. Der Text „Menü" bleibt im Markup — Screenreader lesen ihn, sichtbar
 * sind nur die beiden Striche. font-size: 0 blendet ihn aus, ohne ihn aus dem
 * Accessibility-Baum zu nehmen.
 */
.ec-nav__mobile > summary {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.125rem;
	height: 3.125rem;
	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: 0;
	cursor: pointer;
	list-style: none;
}

.ec-nav__mobile > summary::-webkit-details-marker {
	display: none;
}

/*
 * Die zwei Striche des Menü-Knopfs. Höhe aus dem Border-Token abgeleitet
 * statt als eigener px-Wert; im geöffneten Zustand kreuzen sie sich zum ×.
 */
.ec-nav__mobile > summary::before,
.ec-nav__mobile > summary::after {
	content: "";
	position: absolute;
	width: 1.1875rem;
	height: calc(var(--wp--custom--border--width) * 2);
	background-color: currentColor;
	transition: transform var(--wp--custom--transition--base);
}

.ec-nav__mobile > summary::before {
	transform: translateY(-0.1875rem);
}

.ec-nav__mobile > summary::after {
	transform: translateY(0.1875rem);
}

.ec-nav__mobile[open] > summary::before {
	transform: rotate(45deg);
}

.ec-nav__mobile[open] > summary::after {
	transform: rotate(-45deg);
}

/*
 * Geöffnet deckt das <details> die ganze Fläche. Das Kreuz liegt absolut
 * darüber und bleibt beim Scrollen stehen, weil nur der Inhalt scrollt.
 */
.ec-nav__mobile[open] {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base);
}

/*
 * z-index 2, nicht 1: Die Kopfzeile mit dem Logo klebt ebenfalls oben und steht
 * später im Dokument — bei gleichem Wert läge sie über dem Kreuz und würde es
 * halb verdecken.
 */
.ec-nav__mobile[open] > summary {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--custom--gutter);
	z-index: 2;
}

/*
 * Der Inhalt scrollt, nicht die Seite dahinter.
 *
 * `flex: 1` mit `min-height: 0` allein reicht hier nicht. Der Inhalt eines
 * offenen `<details>` liegt in einem anonymen Kasten, den der Browser nicht wie
 * ein gewöhnliches Flex-Kind auf die Höhe des Containers begrenzt. Gemessen bei
 * 390 × 800 mit aufgeklappten Akkordeons: Container und Inhalt beide 2441 Pixel
 * hoch, `scrollHeight` gleich `clientHeight`, also keine Bildlaufleiste — und
 * alles unterhalb von 800 Pixeln unerreichbar. Das Rad scrollte stattdessen die
 * Seite hinter dem Menü.
 *
 * `max-height` löst es, weil es unabhängig vom Flex-Algorithmus greift. `dvh`
 * statt `vh`, damit die einfahrende Adressleiste auf Mobilgeräten mitgerechnet
 * wird; `vh` davor als Rückfall für ältere Browser.
 *
 * `overscroll-behavior: contain` verhindert, dass das Scrollen am Ende der
 * Liste auf die Seite überspringt.
 */
.ec-nav__mobile > .ec-mobile {
	flex: 1;
	min-height: 0;
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-inline: var(--wp--custom--gutter);
	padding-block-end: var(--wp--preset--spacing--50);
}

/*
 * Die Kopfzeile mit dem Logo klebt oben, damit sie beim Scrollen der langen
 * Leistungsliste neben dem Kreuz stehen bleibt.
 */
.ec-mobile__head {
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	min-height: 3.125rem;
	padding-block: var(--wp--preset--spacing--30);
	/* Platz für das Kreuz, das rechts darüber liegt: dessen Breite plus Abstand. */
	padding-inline-end: 3.875rem;
	background-color: var(--wp--preset--color--base);
}

/*
 * Die Menüzeilen stoßen direkt aneinander und trennen sich über Linien, nicht
 * über Abstand. Zwei Klassen, sonst gewinnt der globale Blockabstand.
 */
.ec-mobile.ec-mobile > * + * {
	margin-block-start: 0;
}

/* Das erste Akkordeon soll nicht am Logo kleben. */
.ec-mobile.ec-mobile > .ec-mobile__head + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

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

/*
 * Der CTA im Menü steht höher als die Buttons im Fließtext — der Entwurf gibt
 * ihm 19px oben und unten. elements.button in theme.json setzt die schmalere
 * Grundform für alle Buttons der Site; hier zwei Klassen, um sie zu übersteuern.
 */
.ec-mobile__cta .wp-block-button__link {
	padding-block: var(--wp--preset--spacing--40);
}

.ec-mobile.ec-mobile > .ec-mobile__phone {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Hauptzeilen: die beiden Akkordeon-Auslöser und die einfachen Links. */
.ec-mobile__acc > summary,
.ec-mobile__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--width) solid var(--wp--preset--color--tint);
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: var(--wp--custom--navigation--line-height);
	cursor: pointer;
	list-style: none;
}

.ec-mobile__acc > summary::-webkit-details-marker {
	display: none;
}

/* Plus und Minus statt Dreieck — wie im Entwurf. */
.ec-mobile__acc > summary::after {
	content: "+";
	color: var(--wp--preset--color--accent);
	font-size: 1.1em;
	font-weight: 400;
}

.ec-mobile__acc[open] > summary::after {
	content: "–";
}

.ec-mobile__link a {
	color: inherit;
}

/*
 * Personen-Symbol vor „Member-Login". Keine Icon-Bibliothek: Für ein einziges
 * Zeichen wären Schriftdatei oder Sprite reiner Ballast, und ein <svg> im
 * Markup verträgt sich nicht mit core/paragraph — der Block-Validator lässt
 * dort nur Inline-Formate zu.
 *
 * Stattdessen als Maske aus custom.icon.user (theme.json). Die Fläche kommt aus
 * background-color: currentColor, das Symbol nimmt also automatisch die
 * Textfarbe an und folgt jedem Farbwechsel. Die Größe hängt an em und wächst
 * mit der Schrift.
 */
.ec-mobile__login a {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--xxs);
}

.ec-mobile__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;
}

/* Aufgeklappter Bereich: Karten auf getönter Fläche. */
.ec-mobile__services.ec-mobile__services > * + *,
.ec-mobile__acc > .ec-mobile__panel {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ec-mobile__cluster,
.ec-mobile__panel {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface);
}

/*
 * Innerhalb einer Karte regeln Innenabstand und Trennlinien die Abstände. Ohne
 * diese Regel setzt das Flow-Layout zusätzlich den globalen Blockabstand über
 * die Leistungsliste — zwei Klassen, sonst gewinnt die Core-Regel.
 */
.ec-mobile__cluster.ec-mobile__cluster > * + * {
	margin-block-start: 0;
}

.ec-mobile__cluster-label {
	margin: 0;
	padding-block-end: var(--wp--custom--space--xxs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ec-mobile__cluster-label a {
	color: var(--wp--preset--color--accent);
	transition: color var(--wp--custom--transition--base);
}

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

/*
 * Leistungen und Unternehmens-Links teilen sich die Zeilenoptik: Trennlinie
 * oben, großzügige Tippfläche.
 */
.ec-mobile__list .wp-block-post-template {
	gap: 0;
}

.ec-mobile__list .wp-block-post-title,
.ec-mobile__panel p {
	margin: 0;
}

.ec-mobile__list .wp-block-post-title a,
.ec-mobile__panel p a {
	display: block;
	/*
	 * Nur so viel Innenabstand, wie die Tippfläche braucht: 8px plus die
	 * Zeilenhöhe ergeben rund 42px — knapp an den 44px, die als Mindestmaß für
	 * Touch-Ziele gelten. Weniger würde die Zeilen zwar noch enger stellen,
	 * aber auf dem Telefon schlechter treffbar machen.
	 */
	padding-block: var(--wp--custom--space--xxs);
	border-block-start: var(--wp--custom--border--width) solid var(--wp--preset--color--tint);
	color: var(--wp--preset--color--brand);
	transition: color var(--wp--custom--transition--base);
}

.ec-mobile__list .wp-block-post-title a:hover,
.ec-mobile__panel p a:hover {
	color: var(--wp--preset--color--accent);
}

/* Die erste Zeile einer Karte braucht keine Linie nach oben. */
.ec-mobile__panel > p:first-child a {
	border-block-start: 0;
}

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

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

/*
 * 1100px ist der Umbruch des Entwurfs für das Vierer-Raster ([data-grid4]).
 * Er greift nur im schmalen Streifen bis 1040px, ab dort verschwindet das
 * Panel ganz. Kein Token, weil der Wert nur hier vorkommt.
 */
@media (max-width: 1100px) {

	.ec-mega .ec-mega__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1039px) {

	.ec-nav__mega {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Aufklappbarer Abschnitt auf der Leistungsseite — `.ec-seo`
 *
 * Enthält den ausführlichen Text für Suchmaschinen. Eingeklappt, damit er die
 * Nutzerführung nicht stört; im Quelltext ist er trotzdem vorhanden, weil
 * `details` seinen Inhalt nicht nachlädt.
 * ------------------------------------------------------------------------- */

.ec-seo > summary {
	display: flex;
	align-items: baseline;
	gap: var(--wp--custom--space--xxs);
	cursor: pointer;
	font-weight: 600;
	line-height: 1.75;
	color: var(--wp--custom--color--link);
	list-style: none;
}

.ec-seo > summary::-webkit-details-marker {
	display: none;
}

.ec-seo > summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--brand);
}

.ec-seo[open] > summary::after {
	content: "−";
}

.ec-seo > summary:hover {
	color: var(--wp--preset--color--brand);
}

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

/* ---------------------------------------------------------------------------
 * Ein Eintrag der Fragenliste auf der Leistungsseite — `.ec-faq__item`
 *
 * Gleiche Mechanik wie `.ec-seo`: das Zeichen rechts als Pseudo-Element, kein
 * eigener Block. Hier zusätzlich die Trennlinie und mehr Luft je Zeile.
 * ------------------------------------------------------------------------- */

.ec-faq__item {
	border-block-end: var(--wp--custom--border--width) solid var(--wp--custom--color--border);
}

.ec-faq__item > summary {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: baseline;
	justify-content: space-between;
	padding-block: var(--wp--preset--spacing--40);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	cursor: pointer;
	list-style: none;
}

.ec-faq__item > summary::-webkit-details-marker {
	display: none;
}

.ec-faq__item > summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--brand);
}

.ec-faq__item[open] > summary::after {
	content: "−";
}

.ec-faq__item > summary:hover {
	color: var(--wp--preset--color--accent);
}

.ec-faq__item p {
	margin-block-start: 0;
	padding-block-end: var(--wp--preset--spacing--40);
	line-height: 1.7;
	color: var(--wp--custom--color--text);
}