Add CLAUDE.md, use snackbar for WebGPU errors

Add a new CLAUDE.md project guidelines file. Update BabylonCanvas to replace alert() with an Angular Material MatSnackBar and use ngx-translate for a localized WebGPU-not-supported message (injects MatSnackBar and TranslateService and updates imports). Add the corresponding WEBGPU.NOT_SUPPORTED entries to en.json and de.json for localization.

CLAUDE.md

@@ -0,0 +1,91 @@
+# Claude Code Guidelines
+
+## Project Overview
+
+This is the frontend of the Playground project, built with Angular 21 and Angular Material. It includes features like a light/dark theme toggle and multi-language support via ngx-translate. The application is a static Single Page Application (SPA) served by NGINX.
+
+**Key Technologies:**
+*   **Frontend Framework:** Angular 21
+*   **UI Components & Theming:** Angular Material
+*   **Internationalization:** ngx-translate
+*   **Server:** NGINX (for serving the SPA)
+*   **Containerization:** Docker
+*   **CI/CD:** GitHub Actions
+
+## Building and Running
+
+### Local Development
+
+1.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+2.  **Start development server:**
+    ```bash
+    ng serve --open
+    ```
+    The app will run at `http://localhost:4200`.
+
+### Building for Production
+
+To build the project for production, which creates the optimized static files:
+```bash
+ng build
+```
+
+## Language
+- All code must be written in **English** — including variable names, function names, comments, and commit messages.
+
+## Clean Code
+- Write simple, clear, and readable code.
+- Avoid deeply nested or chained calls. Break complex expressions into named intermediate variables or separate steps.
+- Code should be understandable by junior developers without additional explanation.
+
+## Braces
+- Always use curly braces `{}` for branches and loops — even for single-line bodies.
+
+  ```ts
+  // ✅ correct
+  if (isValid) {
+    doSomething();
+  }
+
+  // ❌ avoid
+  if (isValid) doSomething();
+  ```
+
+## Functions
+- Extract reusable or logically distinct logic into separate, well-named functions.
+- A function should do one thing and do it well.
+- Prefer short functions that are easy to test and understand.
+
+## Comments
+- Only add comments when they explain the **why** or the **idea** behind the code — not the **what**.
+- Do not comment on things that are already obvious from the code itself.
+
+  ```ts
+  // ✅ useful comment — explains intent
+  // Retry once to handle transient network errors
+  const result = await fetchWithRetry(url);
+
+  // ❌ useless comment — just restates the code
+  // Call fetchWithRetry with url
+  const result = await fetchWithRetry(url);
+  ```
+  
+## Development Conventions
+
+*   **Language:** TypeScript
+*   **Framework:** Angular
+*   **Styling:** SCSS (based on `styles.scss` and component-specific `.scss` files).
+*   **Linting:** ESLint is configured (see `eslint.config.js` and `package.json` scripts).
+*   **Internationalization:** Uses `ngx-translate` with `en.json` and `de.json` asset files.
+
+## Project Structure (Key Areas)
+
+*   `src/app/`: Contains the main application logic, components, services, and routing.
+*   `src/app/pages/`: Specific pages of the application (e.g., about, algorithms, imprint, projects).
+*   `src/assets/`: Static assets including images, internationalization files (`i18n`), and logos.
+*   `Dockerfile`: Defines the Docker image for the application.
+*   `nginx.conf`: NGINX configuration for serving the SPA.
+*   `.gitea/workflows/`: Contains CI/CD workflows (e.g., `build-Frontend-a.yml`).