Fix and investigate layers not working correctly in Storybook

[JoCa96]

Why?

#2310 is a temp fix, but we need to figure out whats going on:

Broken components in Storybook
dev Currently many components styles are broken in our prod Storybook. Its propably caused by the normalization change but it works when running the Storybook locally and also for the Playwright screenshots.

Do you have any idea whats going on here? I remember that we had some weird issues with the CSS layers not being in the correct order in the deployed Storybook

Correct layers (when running pnpm dev):

Somehow broken layers when deploying Storybook:

Can be reproduced locally by running "pnpm build:storybook && pnpm preview"

That probably means that the order in which the css is parsed, changed

The css layer order is determined by whatever happens first:
Either a plain @layer declaration with the order of the declarations
or the order in which the layers are used

When searching in the DOM, it seems like the layers definition is missing completely, in the local Storybook you can find it in the DOM <style> tags

[JoCa96]

There is an open issue in Vite, regarding CSS ordering (See: vitejs/vite#3924)
This seems to be the root cause.