/* ─── Tooltip (injected by tooltip-init.js) ─────────────────────────────── */

.sp-tooltip {
    position:      absolute;
    bottom:        calc(100% + 6px);
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--sp-ink);
    color:         #fff;
    font-family:   var(--sp-font-ui);
    font-size:     11px;
    line-height:   1.35;
    padding:       5px 8px;
    border-radius: 4px;
    /* Darf umbrechen statt in einer einzigen, sehr breiten Zeile über den
       Rand hinauszuragen und dort abgeschnitten zu werden. */
    white-space:   normal;
    max-width:     200px;
    text-align:    center;
    pointer-events: none;
    z-index:       100;
    opacity:       0;
    transition:    opacity .15s ease;
}

.sp-tooltip::after {
    content:      '';
    position:     absolute;
    top:          100%;
    left:         50%;
    transform:    translateX(-50%);
    border:       4px solid transparent;
    border-top-color: var(--sp-ink);
}

.frontend-cell:hover .sp-tooltip {
    opacity: 1;
}