/**
 * Seiten „Über uns“ (page-ueber-uns) und „Kontakt“ (page-kontakt).
 *
 * Farben, Schriften und Abstände kommen aus den Block-Attributen (theme.json-Presets).
 * Hier steht nur, was Attribute nicht ausdrücken können: Umbruch auf dem Tablet,
 * Trennlinien, die gestaffelten Grundsätze und die große Telefonnummer.
 */

/* ---------- Gemeinsam ---------- */

/* Zwischen 782 und 1023px sind zwei Spalten zu schmal für große Schrift: dort untereinander. */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.wp-block-columns:is(.ezam-about-stack-tablet, .ezam-kontakt-stack-tablet) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:is(.ezam-about-stack-tablet, .ezam-kontakt-stack-tablet) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/*
 * Kontakt-Blöcke im Textfluss: theme.css setzt `.wp-block-ezam-contact { margin: 0 }` und überschreibt damit
 * den Block-Abstand der umgebenden Gruppe. Hier bekommen sie denselben Abstand wie ihre Geschwister.
 */
.ezam-kontakt-hero .ezam-hero-intro > .wp-block-ezam-contact:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ezam-kontakt-address .wp-block-column > .wp-block-ezam-contact:not(:first-child),
.ezam-kontakt-faq__aside > .wp-block-ezam-contact:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------- Über uns: Einstieg ---------- */

.ezam-about-hero__media {
	width: min(100%, 30rem);
	margin-inline: auto;
}

/*
 * Komposition: Das Blatt hat oben links und unten rechts die großen Rundungen. Das Rundbild sitzt
 * unten links auf der kleinen Ecke und ragt über den Rand, die grüne Fläche tritt diagonal gegenüber
 * oben rechts hervor. So entsteht eine ruhige Diagonale statt eines schmalen Rands.
 */
.ezam-about-hero__media .ezam-hero-inset {
	left: -9%;
	bottom: 7%;
	width: 40%;
}

.ezam-about-hero__media.ezam-blob::before {
	inset: -5% -7% 16% 22%;
}

@media (max-width: 781.98px) {
	.ezam-about-hero__media {
		width: min(88%, 24rem);
	}

	.ezam-about-hero__media .ezam-hero-inset {
		left: -4%;
		bottom: -4%;
		width: 38%;
	}

	.ezam-about-hero__media.ezam-blob::before {
		inset: -4% -6% 14% 20%;
	}
}

/* ---------- Über uns: Erfahrung aus der Klinik ---------- */

.ezam-about-clinic__item + .ezam-about-clinic__item {
	border-top: 1px solid rgb(90 100 59 / 0.18);
}

.ezam-about-clinic__item > p {
	min-width: 0;
	hyphens: manual;
	-webkit-hyphens: manual;
	font-variant-numeric: lining-nums;
}

/* ---------- Über uns: So arbeiten wir ---------- */

/* Kein Seitenzweig auf dem Handy: dort läge er unter dem Text. */
@media (max-width: 781.98px) {
	.ezam-about-principles.ezam-leaf-accent::after {
		content: none;
	}
}

.ezam-about-principles.ezam-leaf-accent::after {
	opacity: 0.6;
}

/*
 * Bis 1439px reicht der Text des letzten Grundsatzes bis an den rechten Rand, genau dorthin, wo die Ranke
 * unten in der Ecke steht. Er bekommt rechts so viel Innenabstand, wie die Ranke Platz braucht: ihre Breite
 * und ihr Versatz aus theme.css, abzüglich des Seitenrands, plus 1rem Luft. „border-box“, damit der Abstand
 * von der Textbreite abgeht und der Text nicht unter den Begriff umbricht. Ab 1440px endet der Absatz
 * (höchstens 38rem breit) vor der Zeichnung.
 */
@media (min-width: 782px) and (max-width: 1439.98px) {
	.ezam-about-principle:last-child > .ezam-about-principle__text {
		box-sizing: border-box;
		padding-inline-end: calc(clamp(7rem, 12vw, 11rem) + clamp(-1rem, 1vw, 2rem) - var(--wp--style--root--padding-right, 0px) + 1rem);
	}
}

.ezam-about-principle__term {
	flex: 0 0 min(100%, 18rem);
	hyphens: manual;
	-webkit-hyphens: manual;
}

.ezam-about-principle__text {
	flex: 1 1 20rem;
	max-width: 38rem;
	margin-block-start: 0.35em;
}

/* Gestaffelt wie eine Treppe: jede Zeile rückt ein Stück ein, die Linie wird kürzer. */
@media (min-width: 1024px) {
	.ezam-about-principle:nth-child(2) {
		margin-inline-start: 9%;
	}

	.ezam-about-principle:nth-child(3) {
		margin-inline-start: 18%;
	}
}

/* ---------- Über uns: Zusammenarbeit ---------- */

/* Kapselbild auf Blau: ohne Rahmen, die Form trägt. Gesichter liegen im mittleren Band, die runden Enden schneiden nur Schultern und Tisch. */
.ezam-about-network__image {
	margin: 0;
}

.ezam-about-network__image img {
	width: 100%;
}

/* Die beiden Listen stehen im selben Raster wie Text und Bild darüber, getrennt durch eine feine helle Linie. */
.ezam-about-network__lists > .wp-block-column {
	border-top: 1px solid rgb(252 252 251 / 0.24);
	padding-top: var(--wp--preset--spacing--40);
}

/* Tablet: Text und Bild stehen untereinander, die kurzen Listen bleiben gleich breit nebeneinander. */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.ezam-about-network__lists > .wp-block-column {
		flex-basis: 50% !important;
	}
}

.ezam-about-network__block > .wp-block-list {
	margin-block-end: 0;
}

/* ---------- Über uns: Die Praxis ---------- */

/* Kurzer, mittig gesetzter Abschluss vor dem Kontakt-Band: ausgeglichene Zeilen statt eines einzelnen Worts in der letzten Zeile. */
.ezam-about-practice p {
	text-wrap: balance;
}

.ezam-about-practice p:not(.ezam-about-practice__lead) {
	max-width: 40rem;
}

/* ---------- Kontakt: Wege ---------- */

.ezam-kontakt-ways > * {
	margin-block: 0;
}

.ezam-kontakt-ways > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Die Nummer ist das Größte auf der Karte: Raleway, Versalziffern, Symbol etwas kleiner als die Schrift. */
.ezam-kontakt-ways__phone .ezam-contact-link {
	font-family: var(--wp--preset--font-family--raleway);
	letter-spacing: -0.01em;
	line-height: 1.15;
	align-items: center;
	gap: 0.4em;
}

.ezam-kontakt-ways__phone .ezam-contact-link .ezam-icon {
	--ezam-icon-size: 0.85em;
	margin-top: 0;
}

.ezam-kontakt-ways__phone .ezam-contact__label {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--coral-light);
	text-underline-offset: 0.18em;
}

.ezam-kontakt-ways__phone a.ezam-contact-link:hover .ezam-contact__label {
	text-decoration-color: currentColor;
}

/* Schmale Handys: Nummer so groß wie möglich, aber immer in einer Zeile. */
@media (max-width: 419.98px) {
	.ezam-kontakt-ways__phone {
		font-size: clamp(1.5rem, 7.4vw, 1.875rem) !important;
	}
}

.ezam-kontakt-ways__divider {
	margin-block: var(--wp--preset--spacing--40) !important;
	border-top-color: var(--wp--preset--color--blue-light);
	opacity: 0.8;
}

.ezam-kontakt-ways__more {
	min-width: 0;
}

.ezam-kontakt-ways__more .wp-block-ezam-contact.is-type-email {
	min-width: 0;
	max-width: 100%;
}

/* ---------- Kontakt: Adresse & Anfahrt ---------- */

.ezam-kontakt-address__line .ezam-contact-text {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--blue);
	font-variant-numeric: lining-nums;
}

.ezam-kontakt-address__line .ezam-contact-text .ezam-icon {
	--ezam-icon-size: 1.1em;
	margin-top: 0.1em;
}

.ezam-kontakt-address__note {
	max-width: 30rem;
}

.ezam-kontakt-address__card {
	border: 1px solid var(--wp--preset--color--sage-light);
}

/* ---------- Kontakt: Erster Termin ---------- */

.ezam-kontakt-first__panel {
	border: 1px solid var(--wp--preset--color--coral-light);
}

/* Handy: rechts derselbe Innenabstand wie links, sonst sitzt die Liste sichtbar außermittig in der Fläche. */
@media (max-width: 599.98px) {
	.ezam-kontakt-first__panel {
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}

.ezam-kontakt-first__head {
	flex: 1 1 24rem;
	min-width: 0;
}

.ezam-kontakt-first__title {
	flex: 1 1 14rem;
	min-width: 0;
}

.ezam-kontakt-first__list {
	flex: 1 1 22rem;
	min-width: 0;
	margin-block: 0;
}

/* ---------- Kontakt: Häufige Fragen ---------- */

@media (min-width: 1024px) {
	.ezam-kontakt-faq__aside {
		position: sticky;
		top: calc(var(--ezam-header-offset, 5.25rem) + 2rem);
		align-self: flex-start;
	}
}

.ezam-kontakt-faq .wp-block-details > p {
	max-width: 62ch;
}

/* Allein stehender Link in einer Antwort: mindestens 44px hohe Klickfläche. */
.ezam-kontakt-faq .wp-block-details > p > a:only-child {
	display: inline-block;
	padding-block: 0.6rem;
	font-weight: 700;
}

.ezam-kontakt-faq .wp-block-details > p:has(> a:only-child) {
	margin-block-start: 0.25rem;
}

.ezam-kontakt-faq .wp-block-details > p:has(> a:only-child):last-child {
	margin-block-end: calc(var(--ezam-details-pad, 1.5rem) - 0.6rem);
}