/******************************************************************
Block: Agentur (mediaschneider/agentur)

Design: desktop Group 754, mobile Group 758 (Home).

Blue area (full width, tischoben-1.0x1280) with the eyebrow ("Dachzeile"),
the title and the text. Below it the key figures «Zahlen & Fakten» (design
2026-10-19, Adobe XD). The blue area ends inside the tiles: its bottom padding
is the gap to the tiles plus the overlap, the tiles pull themselves up by the
overlap.
******************************************************************/

.ms-agentur {
	padding-block-end: var(--ms-agentur-bottom);
}

.ms-agentur__head {
	padding-block: var(--ms-agentur-top) var(--ms-agentur-gap);
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--blue);

	.ms-agentur--facts & {
		padding-block-end: calc(var(--ms-agentur-gap) + var(--ms-agentur-overlap));
	}
}

.ms-agentur__heading {
	margin-block-end: 1rem;
}

.ms-agentur__eyebrow {
	margin-block-end: 1rem;
	font-size: var(--ms-fs-medium);
	line-height: var(--ms-lh-medium);
	font-weight: 500;
	text-transform: uppercase;
}

.ms-agentur__title {
	font-size: var(--wp--preset--font-size--title-long);
	line-height: var(--ms-lh-title-long);
	font-weight: 700;
	color: inherit;
}

.ms-agentur__text {
	max-inline-size: 38.4375rem; /* 615px */
	font-size: var(--ms-fs-medium);
	line-height: var(--ms-lh-medium);
	font-weight: 500;

	p + p {
		margin-block-start: var(--ms-lh-medium);
	}
}

@media (width >= 48rem) {
	.ms-agentur__eyebrow,
	.ms-agentur__text {
		font-weight: 400;
	}
}



/*********************
ZAHLEN & FAKTEN
Up to six tiles, side by side in the order of the list. The width of every tile
is chosen in the admin: --d1 / --d2 = 1/4 / 1/2 from 48rem (columns of 4),
--m1 / --m2 = 1/3 / 2/3 below 48rem (columns of 3).
Design, from 48rem (1250 × 615px, rows 296px):
  200+ Mio 1/4 | 35+ (figures) 1/2 | 30+ 1/4
  93% (ring) 1/2 | 3.3 1/4 | 6+ 1/4
Mobile (Figma Group 757, Mediaschneider_Web_Mobile_Home), rows as high as a
1/3 tile is wide (111px, 12px apart on 393px):
  200+ Mio (coins) 2/3 | 35+ 1/3
  30+ 1/3 | 93% (ring) 2/3
  3.3 2/3 | 6+ 1/3
Hellblau: from 48rem the 1st, 3rd, 5th tile, below 48rem the 1st, 4th, 6th
(Figma Group 757); Hellgrau: the others.

Animation (view.js, once, when the tiles come into view): the numbers count up
(1.8s), the middle and right figure (from 48rem only) slide out of the left one to the right,
the coins (mobile only) rise out of the bottom one, one after the other,
the blue of the ring builds up over the navy circle to the value (2.8s), in
sync with its number. The tiles themselves come in from below (motion.js).
Without JavaScript and with "reduce motion": the final state.
*********************/

.ms-facts {
	position: relative;
	margin-block-start: calc(-1 * var(--ms-agentur-overlap));
}

.ms-facts__grid {
	container-type: inline-size; /* the mobile row height (cqi) */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ms-facts-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-facts__tile {
	--ms-facts-bg: var(--wp--preset--color--grey-light);

	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--ms-facts-pad) var(--ms-facts-pad) calc(var(--ms-facts-pad) * 1.1);
	overflow: clip;
	color: var(--wp--preset--color--navy);
	background-color: var(--ms-facts-bg);
}

.ms-facts__value {
	position: relative;
	z-index: 1;
	font-size: var(--ms-fs-facts-value);
	line-height: 1.12;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ms-facts__label {
	position: relative;
	z-index: 1;
	margin-block-start: auto;
	padding-block-start: 1rem;
	font-size: var(--ms-fs-facts-label);
	line-height: 1.4;
}

/* Figures (person.svg of the design, from 48rem only): three side by side in the right part of the tile. */
.ms-facts__people {
	position: absolute;
	inset-block-end: calc(var(--ms-facts-pad) * 2.4);
	inset-inline-start: 66%;
	inline-size: 14%;
	aspect-ratio: 96.2 / 136.63;
	translate: -50% 0;
}

.ms-facts__person {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	fill: var(--ms-facts-bg); /* covers the figure behind it */
	stroke: var(--wp--preset--color--blue);
	stroke-width: 4;
	stroke-miterlimit: 10;
}

/* The left one at the back, the right one in front. */
.ms-facts__person--l {
	translate: -112% 0;
}

.ms-facts__person--r {
	translate: 112% 0;
}

/*
Coins (mobile only, Figma Group 493): a stack of 5 in the right part of the tile, 65% of its height.
Every coin is a cylinder (39.5 × 28px in the design), 11.12px above the one below it (39.66% of its
height); the upper ones are in front and cover the top of the one below.
*/
.ms-facts__coins {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 77.6%;
	block-size: 65%;
	aspect-ratio: 39.5 / 72.52;
	translate: -50% -50%;
}

.ms-facts__coin {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 38.66%; /* 28.04 of 72.52 */
	overflow: visible;
	translate: 0 calc(var(--ms-coin) * -39.66%);
	fill: var(--ms-facts-bg);
	stroke: var(--wp--preset--color--blue);
	stroke-width: 2;
}

/* Ring in the right part of the tile, starting at 12 o'clock: the blue (value) over the navy circle. */
.ms-facts__ring {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 72%;
	inline-size: auto;
	block-size: 66%;
	aspect-ratio: 1;
	overflow: visible;
	translate: -50% -50%;
	rotate: -90deg;
	fill: none;
	stroke-width: 4;
}

.ms-facts__ring-rest {
	stroke: var(--wp--preset--color--navy);
}

.ms-facts__ring-value {
	stroke: var(--wp--preset--color--blue);
	stroke-width: 4.6; /* a bit wider: covers the navy circle cleanly */
	stroke-dasharray: var(--ms-ring, 0) 100; /* --ms-ring: the value in %, set in the HTML and by view.js */
}

/* Mobile: every row as high as a 1/3 tile is wide, so the 1/3 tiles are square (the row grows when a text needs more room). */
@media (width < 48rem) {

	.ms-facts__tile {
		min-block-size: calc((100cqi - 2 * var(--ms-facts-gap)) / 3);
	}

	.ms-facts__tile--m2 {
		grid-column: span 2;
	}

	.ms-facts__tile:is(:nth-child(1), :nth-child(4), :nth-child(6)) {
		--ms-facts-bg: var(--wp--preset--color--blue-light);
	}

	.ms-facts__value {
		font-weight: 600;

		br {
			display: none; /* "200+ Mio" on one line */
		}
	}

	.ms-facts__label {
		padding-block-start: 0.5rem;
		line-height: 1.6; /* 16px */
	}

	/* The figures are desktop only (Figma Group 757: «Mitarbeitende» without figures). No ring or coins in a 1/3 tile. */
	.ms-facts__people,
	.ms-facts__tile--m1 :is(.ms-facts__ring, .ms-facts__coins) {
		display: none;
	}
}

@media (width >= 48rem) {

	.ms-facts__tile {
		min-block-size: var(--ms-facts-row);
	}

	.ms-facts__tile:nth-child(odd) {
		--ms-facts-bg: var(--wp--preset--color--blue-light);
	}

	.ms-facts__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ms-facts__tile--d2 {
		grid-column: span 2;
	}

	.ms-facts__people {
		inset-inline-start: 68%;
		inline-size: min(19%, 6rem);
	}

	/* The coins are mobile only. No figures or ring in a 1/4 tile. */
	.ms-facts__coins,
	.ms-facts__tile--d1 :is(.ms-facts__people, .ms-facts__ring) {
		display: none;
	}
}

/*
Start state (only with JavaScript and without "reduce motion"): the figures wait on top of the left one,
the coins on top of the bottom one (each higher coin a little slower, so they rise one after the other).
*/
@media (prefers-reduced-motion: no-preference) {

	.ms-motion .ms-facts {
		:is(.ms-facts__people, .ms-facts__coins) {
			transition: opacity 0.4s ease-out 0.15s;
		}

		.ms-facts__coin {
			transition: translate calc(0.7s + var(--ms-coin) * 0.2s) var(--ms-ease-inout) 0.4s;
		}

		.ms-facts__person--m,
		.ms-facts__person--r {
			transition: translate 1.1s var(--ms-ease-inout) 0.4s;
		}

		.ms-facts__person--r {
			transition-duration: 1.4s;
		}

		&:not(.is-in) {
			:is(.ms-facts__people, .ms-facts__coins) {
				opacity: 0;
			}

			.ms-facts__coin {
				translate: 0 0;
			}

			.ms-facts__person--m,
			.ms-facts__person--r {
				translate: -112% 0;
			}
		}
	}
}