.tooltip {
	display: inline-block;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s, box-shadow 1s, visibility 1s;
	z-index: 100;
	position: absolute;
	top: -2.5em;
	padding: .1em .5em;
	margin-top: .5em;
	color: gainsboro;
	background-color: #152032;
	border-radius: 5px;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.69);
	white-space: nowrap;
}

.linklist li:first-of-type .tooltip {
	top: 1em;
}

@media screen and (hover:hover) {

    .sidebar .tooltip,
    .submenu .tooltip,
    .upcoming-events .tooltip {
        transition-delay: .5s;
    }

    .sidebar .tooltip:hover,
    .submenu .tooltip:hover,
    .upcoming-events .tooltip:hover {
        visibility: hidden;
        transition: none;
    }
}



.state-pending .tooltip::after {
	content: 'Event steht an';
}

.state-upcoming .tooltip::after {
	content: 'Event beginnt demnächst';
}

.state-running .tooltip::after {
	content: 'Event hat begonnen';
}

.state-ended .tooltip::after {
	content: 'Event ist beendet';
}

time:hover .tooltip,
time:has(+time:hover) .tooltip {
	opacity: 1;
	visibility: visible;
}

	

.submenu time .tooltip:hover {
	opacity: 0;
	visibility: hidden;
}

.submenu .tooltip {
    font-family: Arial, sans-serif;
}