.user-tag > span { background: var(--background); border: 1px solid var(--border); color: var(--text-muted); }
.user-tag input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.user-tag.user-tag-trainer input:checked + span {
    background: var(--success);
    color: var(--on-success);
}
.user-tag:hover > span {
    border-color: var(--accent); color: var(--text);
}
.user-tag {
    position: relative;
    cursor: pointer;
}
.user-tag > span {
    display: inline-block;
    padding: var(--abstand-2) var(--abstand-3);
    border-radius: var(--radius-pille);
    font-size: var(--schrift-2);
    line-height: var(--zeile-2);
    transition: all var(--dauer-2);
    user-select: none;
}
.user-tag input:checked + span, .user-tag.user-tag-add > span {
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
    font-weight: 600;
}
.user-tag.user-tag-role input:checked + span { 
    background: var(--primary);
}
.user-tag.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.7);
}
.user-tag.is-disabled input { 
    cursor: not-allowed;
}
.user-tag.is-disabled.user-tag-role input:checked + span, .user-tag.is-disabled.user-tag-trainer input:checked + span {
    background: var(--border);
    color: var(--text-muted);
}
.user-tag.user-tag-orphan input:checked + span { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.user-tag.user-tag-add:hover > span {
    background: var(--accent-hover, var(--accent));
    color: var(--background);
    border-color: transparent;
}
.user-tag.user-tag-orphan > span { border-color: var(--danger); color: var(--danger); }