h5p mod to customize css

Hello everyone,
yesterday I created my h5pmod-plugin, means created a php and a css file in a folder.

This is the php:

<?php
function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {
 
  $styles[] = (object) array(
 
    'path' => plugin_dir_url( __FILE__ ).'/custom-h5p.css',
    'version' => '?ver=1.0' // Cache buster
 
  );
 
}
 
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);
 
?>

css includes for example the following (basically i want to change the blue to another colour):

.h5p-interactive-book-status-arrow {
background-color: #333;
}
.h5p-interactive-book-status-button:active {
background-color: #333;
}
.h5p-interactive-book-status-menu .icon-menu {
color: #333;`

And this is the folder:
/wp-content/plugins/h5pmods

The style does not change. In the Google Chrome developer tool it shows me that the file is loaded, but the color lines are crossed out, so are not implemented.

Where do I have to look at to solve this issue? What could be the root cause?