.dienst_sub_services .intro .pk-text {
	color: var(--text-color, var(--primary-100));
}

.dienst_sub_services .subservices-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(1rem, calc(1 * var(--su)));
	margin-top: max(1.5rem, calc(2 * var(--su)));
}

.dienst_sub_services .subservice-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: max(1.5rem, calc(1.5 * var(--su)));
	outline: 1px solid var(--primary-10);
	outline-offset: -1px;
	background-color: var(--neutral-20);
	color: var(--primary-100);
	text-decoration: none;
}

.dienst_sub_services .subservice-card:hover, .dienst_sub_services .subservice-card:active {
	background-color: var(--white-100);
}

.dienst_sub_services .subservice-card .arrow {
	align-self: flex-end;
	flex-shrink: 0;
	width: max(2rem, calc(2 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	outline: 1px solid var(--primary-20);
	outline-offset: -1px;
	background-color: transparent;
	color: var(--primary-100);
	margin-bottom: max(2rem, calc(3 * var(--su)));
	transition: background-color 300ms ease, outline-color 300ms ease;
}

.dienst_sub_services .subservice-card .arrow::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	mask: var(--icon-arrow-long) center / 40% no-repeat;
	transition: transform 300ms ease;
}

.dienst_sub_services .subservice-card:hover .arrow {
	background-color: var(--accent-100);
	outline-color: var(--accent-100);
	color: var(--white-100);
}

.dienst_sub_services .subservice-card:hover .arrow::before {
	transform: rotate(-45deg);
}

.dienst_sub_services .subservice-card .title {
	margin-bottom: max(.5rem, calc(.5 * var(--su)));
	font-size: var(--scaling-h5);
}

.dienst_sub_services .subservice-card .text {
	font-size: var(--body-xs-regular);
	color: var(--primary-80);
}

@media screen and (max-width: 992px) {

	.dienst_sub_services .subservices-grid {
		grid-template-columns: 1fr;
	}

}