/* VIVA Leistungen - nachgebaut nach den "Animated Service Boxes" (The Plus,
   services-element-style-2) der Altseite, gemessen auf /de/designer/funktionen/
   in 1440/1024/390 px. Titel und Aufzaehlung nutzen die globalen Schriften des
   Kits (b9105b4: 40/35/30 px, c9e2b69: 20/19/18 px), der rote Vorspann die
   eigenen Werte des Widgets (20/18/16 px, Zeilenhoehe 1.4). */

/* Die Zeile ragt wie tp-row 10 px ueber den Container hinaus; Spalte und
   Huelle polstern zusammen 20/6 px, ab Tablet 20 px ringsum. */
.viva-leistungen {
	display: grid;
	grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr));
	margin: 0 -10px;
}
.viva-leistung {
	--viva-polster-x: 6px;
	position: relative;
	display: flex;
	padding: 20px var(--viva-polster-x);
}
/* Kreis wie The Plus: Ring als innerer Schatten in #cd2122; beim Ueberfahren
   des Eintrags fuellt er sich rot. */
.viva-leistung-kreis {
	position: relative;
	z-index: 1;
	flex: 0 0 80px;
	height: 80px;
	margin-right: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 2px #cd2122;
	transition: all 0.15s ease-out;
}
.viva-leistung:hover .viva-leistung-kreis {
	box-shadow: inset 0 0 0 40px #cd2122;
}
/* Duenne Linie vom Kreis bis zum Ende des Eintrags; auf ihr die Punkte. */
.viva-leistung::after {
	content: "";
	position: absolute;
	top: 100px;
	bottom: 20px;
	left: calc(var(--viva-polster-x) + 40px);
	width: 1px;
	background-color: rgba(0, 0, 0, 0.07);
}
/* Flex wie .se-content: die Abstaende von Titel und Vorspann fallen nicht zusammen. */
.viva-leistung-inhalt {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}
/* Mit .viva-leistung davor: sonst gewinnt die h3-Regel des Kits. */
.viva-leistung .viva-leistung-titel {
	margin: 0 0 5px;
	padding: 0;
	color: #000;
	font-family: var(--e-global-typography-b9105b4-font-family, "Source Sans Pro"), sans-serif;
	font-size: var(--e-global-typography-b9105b4-font-size, 40px);
	font-weight: var(--e-global-typography-b9105b4-font-weight, 300);
	line-height: var(--e-global-typography-b9105b4-line-height, 1.3em);
	letter-spacing: var(--e-global-typography-b9105b4-letter-spacing, 1px);
}
.viva-leistung-vorspann {
	margin-top: 15px;
	color: var(--e-global-color-68ab1e4, #aa1313);
	font-family: "Source Sans Pro", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 1px;
}
.viva-leistung-vorspann p {
	margin: 0;
}
.viva-leistung-punkte {
	position: relative;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	color: #000;
	font-family: var(--e-global-typography-c9e2b69-font-family, "Source Sans Pro"), sans-serif;
	font-size: var(--e-global-typography-c9e2b69-font-size, 20px);
	font-weight: var(--e-global-typography-c9e2b69-font-weight, 300);
	line-height: var(--e-global-typography-c9e2b69-line-height, 1.4em);
	letter-spacing: var(--e-global-typography-c9e2b69-letter-spacing, 1px);
}
.viva-leistung-punkte li {
	position: relative;
	margin: 0;
}
/* Punkt wie The Plus: 5 px mit 2-px-Ring, beim Ueberfahren 3 px. */
.viva-leistung-punkte li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: -62px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var(--e-global-color-68ab1e4, #aa1313);
	transition: all 0.15s;
}
.viva-leistung-punkte li:hover::before {
	box-shadow: 0 0 0 3px var(--e-global-color-68ab1e4, #aa1313);
}
.viva-leistung-punkte p {
	margin: 0 0 30px;
}
@media (max-width: 1024px) {
	.viva-leistung {
		--viva-polster-x: 20px;
	}
	.viva-leistung-vorspann {
		font-size: 18px;
	}
}
@media (max-width: 767px) {
	.viva-leistungen {
		grid-template-columns: minmax(0, 1fr);
	}
	.viva-leistung-vorspann {
		font-size: 16px;
	}
}