:root {
    --tp-bg: rgba(20, 20, 20, 0.92);
    --tp-fg: #fff;
    --tp-radius: 10px;
    --tp-pad: .55rem .7rem;
    --tp-shadow: 0 10px 30px rgba(0,0,0,.25);
    --tp-maxw: 100%;
    --tp-font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

[data-tooltip] {
    /*cursor: help;*/ /* optional */
}

.tooltip {
    position: fixed; /* folgt der Maus via JS */
    z-index: 9999;
    max-width: var(--tp-maxw);
    font: 13px/1.35 var(--tp-font);
    color: var(--tp-fg);
    background: var(--tp-bg);
    border-radius: var(--tp-radius);
    padding: var(--tp-pad);
    box-shadow: var(--tp-shadow);
    pointer-events: none; /* nie klickbar – verhindert Flackern */
    opacity: 0;
    transform: translateY(4px) scale(.98);
    transition: opacity .12s ease, transform .12s ease;
    will-change: transform, opacity, top, left;
}

    .tooltip[data-show="true"] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

@media (prefers-reduced-motion: reduce) {
    .tooltip {
        transition: none
    }
}