.tipp { position: relative; display: inline-block; cursor: help; }
.tipp::after {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--text); color: var(--background); font-size: var(--schrift-2); font-weight: 600; font-style: normal; line-height: var(--zeile-2);
    letter-spacing: normal; text-transform: none; padding: 0.35em 0.6em; border-radius: var(--radius-2); white-space: normal; width: max-content; max-width: min(16rem, 80vw);
    box-shadow: var(--schatten-1); z-index: 1000; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--dauer-1);
}
.tipp:hover::after, .tipp:focus-visible::after, .tipp.tipp-offen::after { content: attr(data-tipp); opacity: 1; visibility: visible; }
.profile-badge.tipp { display: flex; overflow: visible; }
a.profile-badge.tipp, button.profile-badge.tipp { cursor: pointer; }