@import url('aktuelles.css');
@import url('_subfooter.css');

.badges .badge {
	position: relative;
	padding-top: 70%;
	height: 0;
	border-radius: 12px;
	background-color: #f0f0f0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.badges .badge a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	color: #309A8C;
}
.badges .badge a .badge-tooltip {
	position: relative;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 12px 24px;
	width: 100%;
	background-color: #fff;
	background-color: rgba(255,255,255,.9);
	font-size: 1.25rem;
	line-height: 1.25rem;
	text-transform: uppercase;
	transition: padding-bottom .25s;
}
.badges .badge a:hover .badge-tooltip {
	padding-bottom: 24px;
}
.badges .badge a:hover .badge-tooltip::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 12px;
	left: 12px;
	width: calc(100% - 24px);
	border-bottom: 2px solid #309A8C;
	animation: widthLeftToRight 0.5s ease-in-out;
}
@keyframes widthLeftToRight {
	0% {width: 0;}
	100% {width: calc(100% - 24px);}
}
.darkmode .badges .badge {
	background-color: #444;
}
.darkmode .badges .badge a .badge-tooltip {
	background-color: #292929;
	background-color: rgba(41,41,41,.9);
}

#startseite-aktuelles .grid {
	grid-gap: 48px;
}
#startseite-aktuelles .grid > .aktuelles {
	min-width: 0;
}
#startseite-aktuelles .grid > .aktuelles .grid {
	grid-gap: 24px;
}