.legende {
    position: relative;
    cursor: help;
}

.legende::after {
    content: attr(data-legende);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;

    padding: 8px 12px;
    background: var(--black);
    color: var(--white);
    font-size: calc(var(--font-size) / 2);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.legende:hover::after,
.legende:focus::after {
    opacity: 1;
}