/*
 * proof/stats, layout "row" (default). Figma "About v2" stats 2612:342, see
 * sites/proof/design/about-spec.md: four 368 columns, 112 apart with a
 * 56 tall rule in the middle of each gap.
 */

.pf-block.pf-statsec {
	padding-top: calc(160 * var(--pf-u));
}
.pf-block .pf-statrow {
	display: flex;
	gap: calc(112 * var(--pf-u));
	margin-top: calc(84.5 * var(--pf-u));
}
.pf-statcol {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: calc(6 * var(--pf-u));
	min-width: 0;
}
.pf-statcol + .pf-statcol::before {
	content: "";
	position: absolute;
	left: calc(-56 * var(--pf-u));
	top: calc(17 * var(--pf-u));
	width: 1px;
	height: calc(56 * var(--pf-u));
	background: rgba(0, 0, 0, 0.08);
}
.pf-block .pf-statcol-num {
	font-weight: 500;
	font-size: calc(44 * var(--pf-t));
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: var(--pf-blue);
}
.pf-block .pf-statcol-text {
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.04em;
	color: rgba(0, 0, 0, 0.64);
}

/* Two columns below desktop; the rules become a line above each item. */
@media (max-width: 1024px) {
	.pf-block.pf-statsec {
		padding-top: 88px;
	}
	.pf-block .pf-statrow {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px 48px;
		margin-top: 48px;
	}
	.pf-statcol {
		padding-top: 20px;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}
	.pf-statcol + .pf-statcol::before {
		display: none;
	}
	.pf-block .pf-statcol-num {
		font-size: 40px;
	}
	.pf-block .pf-statcol-text {
		font-size: 16px;
	}
}
@media (max-width: 767px) {
	.pf-block.pf-statsec {
		padding-top: 72px;
	}
	.pf-block .pf-statrow {
		gap: 32px 20px;
		margin-top: 40px;
	}
	.pf-statcol {
		padding-top: 16px;
	}
	.pf-block .pf-statcol-num {
		font-size: 32px;
	}
	.pf-block .pf-statcol-text {
		font-size: 14px;
	}
}

/*
 * Layout "media": Figma Home 2373:1601 / 2373:1618 / 2373:1629. Three
 * 252 tall rows (number 100, Cousine label) in a 581 column between rules,
 * next to the 1195 x 758 video teaser. 161 above the label (the split
 * above has no bottom padding), 111 below.
 */
.pf-block.pf-statsec--media {
	padding-top: calc(161 * var(--pf-u));
	padding-bottom: calc(111 * var(--pf-u));
}
.pf-block .pf-statmedia {
	display: flex;
	justify-content: space-between;
	margin-top: calc(132.5 * var(--pf-u));
}
.pf-block .pf-statlist {
	flex: none;
	width: calc(581 * var(--pf-u));
	border-bottom: 1px solid var(--pf-rule);
}
.pf-block .pf-statitem {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: calc(252 * var(--pf-u));
	padding: calc(44 * var(--pf-u)) 0 calc(40 * var(--pf-u));
	border-top: 1px solid var(--pf-rule);
}
.pf-block .pf-statitem-num {
	font-weight: 500;
	font-size: calc(100 * var(--pf-t));
	line-height: 1;
	letter-spacing: -0.04em;
	color: #0a0a0a;
}
.pf-block .pf-statitem-text {
	font-family: var(--pf-mono);
	font-size: calc(20 * var(--pf-t));
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.8);
}
.pf-block .pf-statvideo {
	display: block;
	flex: none;
	width: calc(1195 * var(--pf-u));
}
.pf-block .pf-statvideo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1195 / 758;
	object-fit: cover;
	border-radius: calc(6 * var(--pf-u));
}
a.pf-statvideo:focus-visible {
	outline: 2px solid var(--pf-blue);
	outline-offset: 4px;
}

@media (max-width: 1024px) {
	.pf-block.pf-statsec--media {
		padding-top: 128px;
		padding-bottom: 40px;
	}
	.pf-block .pf-statmedia {
		flex-direction: column;
		gap: 40px;
		margin-top: 48px;
	}
	.pf-block .pf-statlist,
	.pf-block .pf-statvideo {
		width: 100%;
	}
	.pf-block .pf-statitem {
		gap: 12px;
		height: auto;
		padding: 24px 0;
	}
	.pf-block .pf-statitem-num {
		font-size: 80px;
	}
	.pf-block .pf-statitem-text {
		font-size: 15px;
	}
	.pf-block .pf-statvideo img {
		border-radius: 6px;
	}
}

/*
 * Layout "cards": Figma "Leistungsseiten" 3174:1333 + 3174:1107, see
 * sites/proof/design/leistung-spec.md §5b. 175 below the section before
 * it (the comparison table), the shared head (sub 591, black 50%), the row
 * 55 below the sub: four 452 x 212 blue panels without gaps (1px #DDD
 * inside, r 8; the halftone runs across the row at 4%), each over a
 * bordered 452 x 203 card that starts 19 under it. Number 96 cap-trimmed,
 * centred; the lime suffix (≈ 33 in the render; the node says 52.2)
 * top-aligned with its cap line, 8 to the right (the side bearings).
 */
.pf-block.pf-statsec--cards {
	padding-top: calc(175 * var(--pf-u));
}
/* 591 in Figma. Chrome breaks after "dass das" as drawn from 590 to 625
   wide (582 broke before "das"); 605 keeps a margin both ways. */
.pf-block.pf-statsec--cards .pf-sub {
	width: min(100%, calc(605 * var(--pf-u)));
	letter-spacing: -0.04em;
	color: rgba(0, 0, 0, 0.5);
}
.pf-block .pf-statcards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: calc(55 * var(--pf-u));
}
.pf-statcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.pf-block .pf-statcard-num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(212 * var(--pf-u));
	overflow: hidden;
	border-radius: calc(8 * var(--pf-u));
	background: var(--pf-blue);
	box-shadow: inset 0 0 0 1px #ddd;
	font-weight: 500;
	font-size: calc(96 * var(--pf-t));
	line-height: 1;
	color: #fff;
}
/* One halftone across the four panels (1826 x 291 from x -8, y -41),
   normal blend at 4% (the render's lighter squares; .pf-dither darkens). */
.pf-block .pf-statcard-num.pf-dither::before {
	mix-blend-mode: normal;
	background-size: calc(1826 * var(--pf-u)) calc(291 * var(--pf-u));
	background-position: calc(-8 * var(--pf-u)) calc(-41 * var(--pf-u));
}
.pf-block .pf-statcard:nth-child(2) .pf-statcard-num.pf-dither::before {
	background-position: calc(-460 * var(--pf-u)) calc(-41 * var(--pf-u));
}
.pf-block .pf-statcard:nth-child(3) .pf-statcard-num.pf-dither::before {
	background-position: calc(-912 * var(--pf-u)) calc(-41 * var(--pf-u));
}
.pf-block .pf-statcard:nth-child(4) .pf-statcard-num.pf-dither::before {
	background-position: calc(-1364 * var(--pf-u)) calc(-41 * var(--pf-u));
}
.pf-statcard-num > span {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-top: calc(2 * var(--pf-u));
}
.pf-statcard-num sup {
	margin-top: calc(23 * var(--pf-u));
	font-size: 0.34em;
	line-height: 1;
	vertical-align: baseline;
	color: var(--pf-lime);
}
/* Text card: border inside the 30 padding in Figma; content centred over
   the whole card, the top 19 hidden under the panel. */
.pf-block .pf-statcard-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(20 * var(--pf-u));
	height: calc(203 * var(--pf-u));
	margin-top: calc(-19 * var(--pf-u));
	padding: calc(30 * var(--pf-u) - 1px);
	border: 1px solid #ddd;
	border-radius: calc(8 * var(--pf-u));
}
/* 280.5 in Figma (with manual breaks); Chrome's mono text is narrower,
   276 gives the same lines. */
.pf-block .pf-statcard-text {
	max-width: calc(276 * var(--pf-u));
	font-family: var(--pf-mono);
	font-size: calc(14 * var(--pf-t));
	line-height: 1.2;
	color: #585757;
}
.pf-block .pf-statcard-source {
	max-width: calc(217 * var(--pf-u));
	font-size: calc(12 * var(--pf-t));
	line-height: 1.25;
	color: rgba(0, 0, 0, 0.45);
}

@media (max-width: 1024px) {
	.pf-block.pf-statsec--cards {
		padding-top: 96px;
	}
	.pf-block.pf-statsec--cards .pf-sub {
		width: min(100%, 560px);
	}
	.pf-block .pf-statcards {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
		margin-top: 40px;
	}
	.pf-block .pf-statcard-num {
		height: 160px;
		border-radius: 8px;
		font-size: 72px;
	}
	.pf-block .pf-statcard .pf-statcard-num.pf-dither::before {
		background-size: cover;
		background-position: center;
	}
	.pf-statcard-num > span {
		margin-top: 2px;
	}
	.pf-statcard-num sup {
		margin-top: 17px;
	}
	.pf-block .pf-statcard-body {
		gap: 16px;
		height: auto;
		min-height: 160px;
		margin-top: -16px;
		padding: 36px 24px 20px;
		border-radius: 8px;
	}
	.pf-block .pf-statcard-text,
	.pf-block .pf-statcard-source {
		max-width: none;
	}
	.pf-block .pf-statcard-text {
		font-size: 14px;
	}
	.pf-block .pf-statcard-source {
		font-size: 12px;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-statcards {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.pf-block .pf-statcard-num {
		height: 132px;
		font-size: 64px;
	}
	.pf-block .pf-statcard-body {
		min-height: 0;
		padding: 32px 20px 20px;
	}
}

/* Phone: fixed sizes in place of the former clamp() (see --pf-t in base.css). */
@media (max-width: 767px) {
	.pf-block .pf-statitem-num {
		font-size: 56px;
	}
}