.swatch {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #fff;
    outline: 2px solid #fff;
}
.swatch.selected {
    outline: 2px solid #333;
}
/* Fokus nur bei Tastatur, nicht bei Mausklick */
.swatch:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #005fcc;
}

/* Falls :focus-visible nicht überall greift, Fallback: */
.swatch:focus {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
}