/* Zahlen-Teaser mit einer Zahl, die hochgezählt wird
	.homepage ist Container class auf der Homepage
	.row.border-bottom ist Container class auf allen anderen Seiten */
.bg-zahlenteaser {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	clear: both;
	display: flex;
}

.homepage .bg-zahlenteaser {
	/* background-color: #02407f;
	background-image: var(--blaugradient); */
	background-image: var(--portalgradient, var(--blaugradient,#02407f));
	color: #fff;
}

/* wenn die Teaser in der normalen Inhaltsspalte 
	- also nicht auf der Startseite - verwendet werden */
.row.border-bottom .bg-zahlenteaser {
	background: var(--hintergrund);
	color: var(--schrift);
	border: 2px solid var(--eins);
	margin: 45px 0;
}

ul.zahlen {
	padding-left: 0;
	margin: 0;
}

ul.zahlen > li::before {
	display: none;
}

.homepage .zahlenteaser a {
	color: #fff;
	text-decoration: none;
}

.zahlenteaser .teaser-content {
	display: flex;
	flex-direction: column;
}

.row.border-bottom .zahlenteaser :is(a,div).teaser-content {
	color: var(--schrifteins);
	text-decoration: none;
}

.zahlenteaser .teaser-content .icon {
	font-size: 5rem;
	line-height: 1;
	padding: 0 8px;
	text-align: center;
	transition: .5s ease all;
}

.zahlenteaser a.teaser-content:is(:hover,:focus,:active) .icon {
	transform: scale(1.05);
}

.row.border-bottom .zahlenteaser div.teaser-content .text {
	color: var(--schrift);
}

.row.border-bottom .zahlenteaser a.teaser-content:is(:hover,:focus,:active) {
	color: var(--eins);
}

.zahlenteaser a.teaser-content:is(:focus,:active) {
	outline: 3px dotted;
	outline-offset: 5px;
}

.zahlenteaser .zahl {
	font-size: 2rem;
	font-weight: 600;
	display: block;
}

/* Pfeil hinter dem Link */
.zahlenteaser a .text p::after {
	display: inline-block;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	content: "\f061";
	padding-left: 10px;
}




@media (min-width: 576px) {
	.zahlenteaser .teaser-content {
		display: flex;
		flex-direction: row; /* Icon links, Text rechts */
	}
}



@media (min-width: 768px) {
	ul.zahlen {
		display: flex;
		flex-direction: row;
		justify-content: center !important;
		flex-wrap: wrap;
	}
	
	.zahlenteaser .teaser-content {
		display: flex;
		flex-direction: column; /* 2 Teaesr pro Zeile, Icon oben, Text unten */
	}
}





@media (min-width: 992px) {	
	/* 50% Breite (statt die 33.3333% von Bootstrap) sorgt für nur 2 Teaser pro Zeile */
	.row.border-bottom .zahlenteaser-wrapper .col-lg-4 {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 1rem;
	}
}





@media (min-width: 1200px) {
	/* auf der Homepage >= 1200px Icon links neben dem Text */
	.homepage .zahlenteaser .teaser-content {
		flex-direction: row; /* Icon links, Text rechts */
	}
}





@media (prefers-color-scheme: dark), (inverted-colors: inverted) {

}