docs: fix CSS layers order in deployed Storybook (#2310)

Relates to #812 

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):

![Bild](https://github.com/user-attachments/assets/e67daad9-9247-43e6-8509-10af37b66f4c)

Somehow broken layers when deploying Storybook:
![Bild
(1)](https://github.com/user-attachments/assets/a53f50ce-fa5b-4efc-bbab-aaa025ac1a04)

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

packages/sit-onyx/.storybook/main.ts

@@ -1,6 +1,13 @@
 import type { StorybookConfig } from "@storybook/vue3-vite";
+import { readFileSync } from "fs";
+import { fileURLToPath } from "node:url";
 import { mergeConfig } from "vite";
 
+const onyxLayers = readFileSync(
+  fileURLToPath(new URL("../src/styles/layers.scss", import.meta.url)),
+  "utf-8",
+);
+
 const config: StorybookConfig = {
   stories: ["./pages/*.mdx", "../src/**/*.stories.ts"],
   addons: ["@storybook/addon-essentials", "storybook-dark-mode", "@storybook/addon-a11y"],
@@ -27,6 +34,13 @@ const config: StorybookConfig = {
     <meta property="og:image:height" content="600" />
     <meta property="og:url" content="https://storybook.onyx.schwarz">
   `,
+  // somehow Storybook does not parse the CSS in the correct order so the CSS layers are messed up.
+  // to fix this, we add them manually before all other styles here
+  // TODO: remove after [#2311](https://github.com/SchwarzIT/onyx/issues/2311)
+  previewHead: (head) => `
+    <style>${onyxLayers}</style>
+    ${head}
+  `,
   // fix "The file does not exist at "..." which is in the optimize deps directory"
   // see: https://github.com/storybookjs/storybook/issues/28542#issuecomment-2268031095
   viteFinal: (config) => {