/* ===========================================================================
   cl-physio — leistungen.css
   Services page: hero + five alternating service blocks. Layout comes from
   the shared .media-row (components.css); this adds the hero title and the
   contained image frame with a hover zoom-in / zoom-out effect.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Page wordmark (FR-13 · DR-09 · AC-23)

   „Leistungen“ is set by a recorded maximum WIDTH per breakpoint rather than
   by a font size, so the acceptance criterion can be measured directly on the
   thing it names. The wrapper carries the cap and is the query container; the
   word is sized in cqw, so it renders at the container's width and scales as
   a single unit — its aspect ratio therefore holds at every breakpoint.

   The constant: „Leistungen“ in the theme serif (EB Garamond, weight 600)
   measures 4.5486 × the font size in Chromium, kerning included. 21.7cqw
   therefore renders the word at 98.7 % of the cap — measured at or below the
   cap at every value tested from 140 px to 360 px, at 1× and 2×, and never
   over it. Changing the typeface, the weight or this constant without
   re-measuring will invalidate AC-23.

   The cap is a maximum, not a fixed size: where the column is narrower than
   the cap the word follows the column and shrinks rather than overflowing.

   The three widths were agreed under URS open point 23 and are recorded in
   FR-13; the breakpoints are the theme's existing 680 px and 880 px, so the
   desktop value applies from the width at which the row becomes two columns.

   Where container queries are unavailable the cqw declaration is dropped and
   the base h1 size in base.css applies, so the wordmark still renders.
   --------------------------------------------------------------------------- */
.leistungen__wordmark {
	--cl-wordmark-max: 173px; /* mobile — FR-13 [W-M] */
	container-type: inline-size;
	max-width: var(--cl-wordmark-max);
}
@media (min-width: 680px) {
	.leistungen__wordmark {
		--cl-wordmark-max: 220px; /* tablet — FR-13 [W-T] */
	}
}
@media (min-width: 880px) {
	.leistungen__wordmark {
		--cl-wordmark-max: 262px; /* desktop — FR-13 [W-D] */
	}
}
.leistungen__hero-title {
	margin: 0;
	font-size: 21.7cqw;
}

/* ---------------------------------------------------------------------------
   Contained image with hover zoom
   --------------------------------------------------------------------------- */
.zoom {
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}
.zoom__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.zoom:hover .zoom__img,
.zoom:focus-within .zoom__img {
	transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
	.zoom__img {
		transition: none;
	}
	.zoom:hover .zoom__img,
	.zoom:focus-within .zoom__img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Therapie Ergänzungen — three icon cards
   --------------------------------------------------------------------------- */
.ergaenzungen__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 760px) {
	.ergaenzungen__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Specials — accordion (WAI-ARIA disclosure pattern)
   --------------------------------------------------------------------------- */
.accordion {
	max-width: var(--container-narrow);
	margin: 0 auto;
}
.accordion__item {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.accordion__header {
	margin: 0;
}
.accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-serif);
	font-size: 1.3rem;
	color: var(--c-indigo);
}
.accordion__trigger:hover {
	background: var(--c-mist-50);
}
.accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}
.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	background: var(--c-indigo);
	transition: transform 0.3s var(--ease);
}
.accordion__icon::before { /* horizontal bar */
	top: 9px;
	left: 0;
	width: 20px;
	height: 2px;
}
.accordion__icon::after { /* vertical bar -> hidden when open = minus */
	left: 9px;
	top: 0;
	width: 2px;
	height: 20px;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
	transform: scaleY(0);
}
.accordion__body {
	padding: 0 1.5rem 1.5rem;
	color: var(--c-ink);
}
.accordion__body p {
	margin: 0;
}
.accordion__body > * + * {
	margin-top: 1rem;
}
.accordion__body .accordion__list {
	margin: 0;
	padding-left: 1.5rem;
	list-style: disc;
}
.accordion__body .accordion__list li {
	margin: 0.4rem 0;
}
.accordion__panel[hidden] {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.accordion__icon::before,
	.accordion__icon::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Ratio modifiers for the shared carousel (FR-31)

   components.css frames every non-hero carousel at 3:2, which suits the page
   opening. The service rows and the Therapie-Ergänzungen cards are cut at 4:3
   and Endometriose at 1:1, matching the ratios those slots already used, so
   each carries its own modifier rather than the slots being re-cut to one
   shared ratio. The framing itself — radius and shadow — is inherited.

   The .carousel qualifier is needed, not decorative: the rule it overrides is
   .carousel:not(.carousel--hero) .carousel__viewport, which is three classes,
   so a two-class selector loses on specificity and the viewport stays at 3:2.
   Matching it at three classes lets source order decide, and leistungen.css is
   enqueued with components.css as its dependency.
   --------------------------------------------------------------------------- */
.carousel.carousel--ratio-43 .carousel__viewport {
	aspect-ratio: 4 / 3;
}
.carousel.carousel--ratio-11 .carousel__viewport {
	aspect-ratio: 1 / 1;
}

/* ---------------------------------------------------------------------------
   FR-42 — „Therapeutische und unterstützende Maßnahmen“

   Fixed text-left: the row carries no --reverse modifier and is not part of
   the alternation of FR-14, so it keeps the same side at every width.

   base.css clears the marker from any ul that carries a class, so the four
   items of CR-09 restore theirs explicitly — they are a list of named
   procedures and read as one. The ul qualifier is needed to match the
   specificity of that rule (ul[class]); a bare class selector loses to it and
   the markers stay hidden.
   --------------------------------------------------------------------------- */
ul.massnahmen__list {
	list-style: disc;
	margin: 1rem 0 0;
	padding-left: 1.25rem;
}
ul.massnahmen__list li {
	margin-bottom: 0.35rem;
}

/* ---------------------------------------------------------------------------
   FR-43 — images inside a Therapie-Ergänzungen card

   The media sits where the icon sat, so it takes the icon's bottom margin and
   the card's own centring. It is pulled out to the card's padding edges: a
   card is a narrow column and an image inset on both sides reads as a stamp
   rather than as part of the card. A card left without images keeps its icon
   and this rule does not apply to it.
   --------------------------------------------------------------------------- */
.card__media {
	margin: -2rem -1.75rem 1rem;
}
.card__media .carousel__viewport {
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: none;
}