.hm-erfolge {
	width: 100%;
	padding: var(--hm-layout-section-top) var(--hm-layout-gutter) var(--hm-layout-section-bottom);
	background: var(--hm-color-background);
}

.hm-erfolge__inner {
	width: 100%;
}

.hm-erfolge__title {
	margin: 0 0 calc(var(--hm-layout-block-gap) * 0.72);
	color: var(--hm-color-text);
	font-size: clamp(34px, 3vw, 52px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.hm-erfolge__layout {
	display: grid;
	grid-template-columns: 0.9fr 1.4fr 0.9fr;
	grid-template-areas:
		"years operations cancer"
		"years psoriasis psoriasis"
		"devices devices devices";
	gap: 1.2vw;
	width: 100%;
}

.hm-erfolge-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 2.4vw;
	border: 1px solid var(--hm-color-border-soft);
	border-radius: 1.1rem;
	color: var(--hm-color-text);
	text-align: center;
	flex-direction: column;
}

.hm-erfolge-card--years {
	grid-area: years;
	padding-block: 5.3vw;
	background: linear-gradient(145deg, var(--hm-color-01), var(--hm-color-surface-strong));
}

.hm-erfolge-card--operations {
	grid-area: operations;
	padding-block: 2.65vw;
}

.hm-erfolge-card--cancer {
	grid-area: cancer;
	padding-block: 2.65vw;
	background: var(--hm-color-01);
}

.hm-erfolge-card--psoriasis {
	grid-area: psoriasis;
	padding-block: 2.65vw;
	background: linear-gradient(110deg, var(--hm-color-01), var(--hm-color-surface-strong));
}

.hm-erfolge-card--devices {
	grid-area: devices;
	padding-block: 2.8vw;
}

.hm-erfolge-card__value {
	margin: 0;
	font-size: clamp(48px, 4.2vw, 76px);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.035em;
}

.hm-erfolge-card--years .hm-erfolge-card__value {
	font-size: clamp(58px, 5vw, 88px);
}

.hm-erfolge-card__unit {
	margin: 0.35em 0 0.8em;
	font-size: clamp(23px, 1.8vw, 31px);
	font-weight: 400;
	line-height: 1;
}

.hm-erfolge-card__text,
.hm-erfolge-card__statement {
	margin: 0;
	font-size: clamp(17px, 1.25vw, 21px);
	font-weight: 400;
	line-height: 1.25;
}

.hm-erfolge-card__text strong,
.hm-erfolge-card__statement strong {
	color: var(--hm-color-accent);
	font-weight: 600;
}

.hm-erfolge-card__statement {
	font-size: clamp(22px, 1.9vw, 31px);
	line-height: 1.15;
}

@media (max-width: 980px) {
	.hm-erfolge__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"years operations"
			"years cancer"
			"psoriasis psoriasis"
			"devices devices";
		gap: 2vw;
	}
}

@media (max-width: 640px) {
	.hm-erfolge__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"years"
			"operations"
			"cancer"
			"psoriasis"
			"devices";
		gap: 4vw;
	}

	.hm-erfolge-card,
	.hm-erfolge-card--years,
	.hm-erfolge-card--operations,
	.hm-erfolge-card--cancer,
	.hm-erfolge-card--psoriasis,
	.hm-erfolge-card--devices {
		padding: 8vw 6vw;
	}
}

/* Kompakter Kartenmodus für Telefone und kleine Tablets im Querformat. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 600px) {
	.hm-erfolge {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.hm-erfolge__title {
		margin-bottom: 1.25rem;
	}

	.hm-erfolge__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"years operations"
			"years cancer"
			"psoriasis psoriasis"
			"devices devices";
		gap: 0.75rem;
	}

	.hm-erfolge-card {
		padding: 1rem 1.25rem;
		border-radius: 0.85rem;
	}

	.hm-erfolge-card__value {
		font-size: clamp(2.2rem, 6vw, 3rem);
	}

	.hm-erfolge-card--years .hm-erfolge-card__value {
		font-size: clamp(2.55rem, 7vw, 3.4rem);
	}

	.hm-erfolge-card__unit {
		margin: 0.2em 0 0.45em;
		font-size: clamp(1.1rem, 3vw, 1.35rem);
	}

	.hm-erfolge-card__text,
	.hm-erfolge-card__statement {
		font-size: 0.95rem;
		line-height: 1.2;
	}

	.hm-erfolge-card__statement {
		font-size: 1.1rem;
	}
}