/*
 * Menüs aus details, ohne JavaScript: Mega-Menü "Leistungen"
 * (patterns/mega-leistungen.php), Mega-Menü "Unternehmen" (parts/header.html) und
 * mobiles Vollbild-Menü. Die Mega-Menüs tragen name="ec-nav" und schließen sich
 * gegenseitig. 1040px entspricht custom.breakpoint.xl.
 */

/* ---------------------------------------------------------------------------
 * Auslöser der Mega-Menüs
 * ------------------------------------------------------------------------- */

.ec-nav__mega {
	/* Panel richtet sich an .ec-header__bar aus und läuft über die volle Breite. */
	position: static;
}

/* Gleiche Typografie wie die Einträge von core/navigation daneben. */
.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);
}

.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, wächst mit der Schriftgröße. */
.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
 * ------------------------------------------------------------------------- */

/*
 * Höhe begrenzt, der Rest scrollt. calc(100vh - 100%) greift hier nicht, weil der
 * Header keine feste Höhe hat.
 */
.ec-nav__mega > .ec-mega {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 1;
	/*
	 * Hebt den Abstand des Flow-Layouts zum summary auf. Zwei Klassen, weil die
	 * Core-Regel gleich spezifisch ist.
	 */
	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);
}

/* Abstände über gap und Innenabstand, der Flow-Abstand von WordPress entfällt. */
.ec-mega .ec-mega__grid > * + *,
.ec-mega .ec-mega__list .wp-block-post-template > * + * {
	margin-block-start: 0;
}

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

/* Zwei Klassen gegen den gleich spezifischen blockGap des Group-Blocks. */
.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);
}

/* Kopfbild der Zielseite. */
.ec-mega__img {
	margin: 0;
	aspect-ratio: 3 / 1;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
}

.ec-mega__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Ausschnitt leicht nach oben versetzt, damit bei Personen der Kopf und bei
	 * Räumen der Boden im Bild bleibt.
	 */
	object-position: center 35%;
}

/* Führt die Zielseite kein Kopfbild, bleibt die Fläche als beschriftetes Feld stehen. */
.ec-mega__img--leer {
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--20);
	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 (Query Loop je Bereich)
 * ------------------------------------------------------------------------- */

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

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

.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 in der freien Rasterzelle
 * ------------------------------------------------------------------------- */

.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"
 *
 * Die ganze Karte ist über ein ::after am Titel-Link klickbar.
 * ------------------------------------------------------------------------- */

/* Zwei Klassen gegen das Fünfer-Raster und dessen Media Query. */
.ec-mega .ec-mega__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ec-mega__card {
	position: relative;
}

.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);
}

.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
 *
 * Unter 1040px entfallen die Mega-Menüs, ihre Inhalte stehen im mobilen Menü.
 * ------------------------------------------------------------------------- */

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

	/*
	 * Der Hinweisblock steht hochkant in der freien Zelle der zweiten Zeile. Zwei
	 * Klassen gegen die gleich spezifische verticalAlignment-Regel des Group-Blocks.
	 */
	.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ü
 *
 * Unter 1040px. Geöffnet wird das summary zum Schließkreuz und das details zur
 * Vollbildfläche.
 * ------------------------------------------------------------------------- */

@media (min-width: 1040px) {
	.ec-nav__mobile {
		display: none;
	}
}

/* "Menü" bleibt für Screenreader im Markup, font-size: 0 blendet es nur optisch aus. */
.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;
}

/* Zwei Striche, geöffnet gekreuzt zum Schließkreuz. */
.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 als Vollbildfläche. Nur der Inhalt scrollt, das Kreuz bleibt stehen. */
.ec-nav__mobile[open] {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base);
}

/* Über der Logozeile, die ebenfalls klebt und später im Dokument steht. */
.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;
}

/*
 * flex: 1 und min-height: 0 begrenzen den anonymen Inhaltskasten eines offenen
 * details nicht, erst max-height macht ihn scrollbar. vh als Rückfall für dvh.
 */
.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);
}

.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 Schließkreuz, dessen Breite plus Abstand. */
	padding-inline-end: 3.875rem;
	background-color: var(--wp--preset--color--base);
}

/* Zeilen trennen sich über Linien. Zwei Klassen gegen den globalen 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);
}

/* Höher als die übrigen Buttons. Zwei Klassen gegen elements.button aus theme.json. */
.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;
}

.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 als Maske aus custom.icon.user, in Textfarbe. Ein svg im Markup
 * lässt core/paragraph nicht zu.
 */
.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);
}

/* In der Karte trennen Linien. Zwei Klassen gegen den Flow-Abstand von Core. */
.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);
}

/* Gemeinsame Zeilenoptik für Leistungen und Unternehmens-Links. */
.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;
	/* Mit Zeilenhöhe rund 42px, nahe am Mindestmaß von 44px für Touch-Ziele. */
	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);
}

/* Greift nur zwischen 1040 und 1100px, darunter entfällt das Panel. */
@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)
 *
 * Ausführlicher Text für Suchmaschinen, eingeklappt, aber vollständig im Quelltext.
 * ------------------------------------------------------------------------- */

.ec-seo > summary {
	display: flex;
	align-items: baseline;
	gap: var(--wp--custom--space--xxs);
	cursor: pointer;
	/* Gleiche Größe wie die Einleitung darüber. */
	font-size: var(--wp--preset--font-size--lg);
	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);
}

/* ---------------------------------------------------------------------------
 * Fragenliste auf der Leistungsseite (.ec-faq__item)
 * ------------------------------------------------------------------------- */

.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);
	/* Gleiche Stufe wie der Fließtext der Seite. */
	font-size: var(--wp--preset--font-size--lg);
	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);
}