Vaadin 23 hide label within menu bar according to screen size

Hi there,

I want to display a language label within a menu bar.
If there is enough space (>1280px) the normal label should be displayed otherwise the label with the short form.
This is the java code:

        String[] languageTexts = LANGUAGE_MAP.get(languageTag);
        Label label = new Label(languageTexts[0]);
        label.setClassName("language-label");

        Label labelShort = new Label(languageTexts[1]);
        labelShort.setClassName("language-label-abbr");

        HorizontalLayout layout = new HorizontalLayout(label, labelShort);
        Icon preIcon = new Icon(VaadinIcon.GLOBE_WIRE);
        Icon posIcon = new Icon(VaadinIcon.CARET_DOWN);

        MenuItem menuItem = menuBar.addItem(preIcon);
        menuItem.add(layout);
        menuItem.add(posIcon);
       return menuItem;

and the css:

.language-label-abbr {
display: none;
}

@media screen and (max-width: 1280px) {

.language-label {
    display: none;
}

.language-label-abbr {
    display: inline-block;
}

}

Unfortunately the styles does not seem to be applied. I guess because of the shadow root. I am not so familiar with this concept as I have not done frontend stuff for several years now.

How do I have to change the selector to apply the styles properly?

Thanks and Best Regards
Matt