diff --git a/CLAUDE.md b/CLAUDE.md
index ec6a29a..8c0f3ce 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -77,7 +77,7 @@ ng build
 
 *   **Language:** TypeScript
 *   **Framework:** Angular
-*   **Styling:** Only use tailwind, as much as possible. If not possible use SCSS (based on `styles.scss` and component-specific `.scss` files).
+*   **Styling:** Tailwind CSS (v3) is the primary styling approach. Use utility classes in templates. SCSS (`styles.scss`) is only for Angular Material theme setup, Material component overrides with `!important`, Swiper `::part()` selectors, and component `:host` blocks. Shared Tailwind component classes live in `src/tailwind.css` via `@layer components`.
 *   **Linting:** ESLint is configured (see `eslint.config.js` and `package.json` scripts).
 *   **Internationalization:** Uses `ngx-translate` with `en.json` and `de.json` asset files.
 
diff --git a/angular.json b/angular.json
index 886b910..3490ef8 100644
--- a/angular.json
+++ b/angular.json
@@ -40,6 +40,7 @@
               }
             ],
             "styles": [
+              "src/tailwind.css",
               "src/styles.scss",
               "node_modules/swiper/swiper-bundle.css"
             ]
@@ -95,6 +96,7 @@
               }
             ],
             "styles": [
+              "src/tailwind.css",
               "src/styles.scss"
             ]
           }
diff --git a/package-lock.json b/package-lock.json
index 17310b9..75ea63c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "angular-eslint": "21.3.1",
         "eslint": "^10.0.3",
         "jasmine-core": "~6.1.0",
+        "tailwindcss": "^3.4.19",
         "typescript": "~5.9.3",
         "typescript-eslint": "8.58.2"
       }
@@ -249,6 +250,19 @@
         "node": ">= 14.0.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -3569,6 +3583,44 @@
         "@angular/core": ">=16"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@npmcli/agent": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-4.0.0.tgz",
@@ -5572,6 +5624,47 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -5798,6 +5891,19 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.4",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
@@ -5889,6 +5995,19 @@
         "node": "18 || 20 || >=22"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
@@ -6023,6 +6142,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001788",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001788.tgz",
@@ -6294,6 +6423,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -6495,6 +6634,19 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
@@ -6626,6 +6778,20 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -7395,6 +7561,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -7450,6 +7646,16 @@
         "fast-string-width": "^3.0.2"
       }
     },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -7504,6 +7710,19 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
@@ -8467,6 +8686,35 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -8535,6 +8783,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-obj": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
@@ -8637,6 +8895,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/jose": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.2.tgz",
@@ -9081,6 +9349,26 @@
         "node": ">=12"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/listr2": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
@@ -9490,6 +9778,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/metaviewport-parser": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/metaviewport-parser/-/metaviewport-parser-0.3.0.tgz",
@@ -9507,6 +9805,33 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -9816,6 +10141,18 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -9981,6 +10318,16 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-bundled": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-5.0.0.tgz",
@@ -10106,6 +10453,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -10466,6 +10823,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-scurry": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
@@ -10527,6 +10891,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/piscina": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.1.4.tgz",
@@ -10579,6 +10963,93 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss-media-query-parser": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@@ -10586,6 +11057,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-safe-parser": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
@@ -10613,6 +11110,27 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -10793,6 +11311,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -10819,6 +11358,16 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
@@ -10867,6 +11416,28 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/restore-cursor": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
@@ -10894,6 +11465,17 @@
         "node": ">= 4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -11095,6 +11677,30 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -11662,6 +12268,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -11675,6 +12304,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/swiper": {
       "version": "12.1.3",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.3.tgz",
@@ -11694,6 +12336,108 @@
         "node": ">= 4.7.0"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/tar": {
       "version": "7.5.13",
       "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.13.tgz",
@@ -11769,6 +12513,29 @@
         "b4a": "^1.6.4"
       }
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/third-party-web": {
       "version": "0.26.7",
       "resolved": "https://registry.npmjs.org/third-party-web/-/third-party-web-0.26.7.tgz",
@@ -11827,6 +12594,19 @@
         "node": ">=14.14"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -11867,6 +12647,13 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -12051,6 +12838,13 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
diff --git a/package.json b/package.json
index dc85848..7aa8169 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "angular-eslint": "21.3.1",
     "eslint": "^10.0.3",
     "jasmine-core": "~6.1.0",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.9.3",
     "typescript-eslint": "8.58.2"
   },
diff --git a/src/app/layout/app/app.component.html b/src/app/layout/app/app.component.html
index 0278604..2327e18 100644
--- a/src/app/layout/app/app.component.html
+++ b/src/app/layout/app/app.component.html
@@ -1,9 +1,9 @@
 <app-particles-background></app-particles-background>
 <app-topbar />
-<main class="app-container app-surface">
+<main class="w-full max-w-app mx-auto mt-4 grow text-app-fg transition-colors duration-[220ms]">
   <router-outlet />
 </main>
 
-<footer class="foot">
+<footer class="border-t border-black/[.08] p-fluid-md text-center opacity-80 bg-app-bg">
   <small>© {{ currentYear }} Andreas Dahm - {{ `APP.COPYRIGHT` | translate }}</small>
 </footer>
diff --git a/src/app/layout/topbar/topbar.component.html b/src/app/layout/topbar/topbar.component.html
index 5b3701f..b7377a9 100644
--- a/src/app/layout/topbar/topbar.component.html
+++ b/src/app/layout/topbar/topbar.component.html
@@ -1,23 +1,27 @@
-<mat-toolbar class="topbar" color="primary" (keydown)="onKeydown($event)">
-  <a class="brand" routerLink="/">
-    <img class="logo-dot" src="{{AssetsConstants.LOGO}}" alt="" aria-hidden="true" draggable="false"
+<mat-toolbar class="!flex !items-center !p-[clamp(0.5rem,1vw,1rem)] !backdrop-blur-[8px] !backdrop-saturate-[1.1] !bg-white/80 dark:!bg-[#313131]/80 !border-b !border-black/[.08]" color="primary" (keydown)="onKeydown($event)">
+  <a class="flex items-center gap-[clamp(0.4rem,1vw,0.6rem)] text-inherit no-underline" routerLink="/">
+    <img class="w-[clamp(36px,10vw,48px)] h-[clamp(36px,10vw,48px)] rounded-full" src="{{AssetsConstants.LOGO}}" alt="" aria-hidden="true" draggable="false"
       oncontextmenu="return false;">
-    <span class="brand-text">{{ 'APP.TITLE' | translate }}</span>
+    <span class="font-semibold tracking-[0.2px] text-[clamp(1rem,3vw,1.2rem)]">{{ 'APP.TITLE' | translate }}</span>
   </a>
 
-  <nav class="nav">
-    <a [routerLink]="RouterConstants.ABOUT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
-    <a [routerLink]="RouterConstants.PROJECTS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
-    <a [routerLink]="RouterConstants.ALGORITHMS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
-    <a [routerLink]="RouterConstants.IMPRINT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.IMPRINT' | translate }}</a>
+  <nav class="absolute left-1/2 -translate-x-1/2 flex gap-[clamp(0.25rem,1vw,0.5rem)] justify-center mobile:hidden">
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+       [routerLink]="RouterConstants.ABOUT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+       [routerLink]="RouterConstants.PROJECTS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+       [routerLink]="RouterConstants.ALGORITHMS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+       [routerLink]="RouterConstants.IMPRINT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.IMPRINT' | translate }}</a>
   </nav>
 
   <!-- Mobile nav menu button -->
-  <button mat-icon-button class="nav-menu-btn" [matMenuTriggerFor]="navMenu" aria-label="Open navigation">
+  <button mat-icon-button class="hidden mobile:inline-flex" [matMenuTriggerFor]="navMenu" aria-label="Open navigation">
     <mat-icon>menu</mat-icon>
   </button>
 
-  <span class="spacer"></span>
+  <span class="flex-1"></span>
 
   <!-- Mobile nav menu -->
   <mat-menu #navMenu="matMenu" xPosition="before">
@@ -35,7 +39,7 @@
     </button>
   </mat-menu>
 
-  <span class="spacer"></span>
+  <span class="flex-1"></span>
 
   <!-- Settings: Sprache + Theme -->
   <button mat-icon-button [matMenuTriggerFor]="settingsMenu" aria-label="Open settings"
@@ -75,4 +79,4 @@
       </button>
     </div>
   </mat-menu>
-</mat-toolbar>
\ No newline at end of file
+</mat-toolbar>
diff --git a/src/app/layout/topbar/topbar.component.scss b/src/app/layout/topbar/topbar.component.scss
index 1518279..fae7e81 100644
--- a/src/app/layout/topbar/topbar.component.scss
+++ b/src/app/layout/topbar/topbar.component.scss
@@ -1,107 +1,6 @@
-/* ---- Topbar Host & Base ---- */
 :host {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    display: block;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: block;
 }
-
-.topbar {
-    /* Erzeugt den Milchglas-Effekt */
-    backdrop-filter: saturate(1.1) blur(8px);
-    -webkit-backdrop-filter: saturate(1.1) blur(8px);
-    /* Safari Support */
-
-    /* Mischt die Variable mit Transparenz. !important überschreibt Material-Vorgaben */
-    background: color-mix(in oklab, var(--app-topbar-bg) 80%, transparent) !important;
-    border-bottom: 1px solid rgba(0, 0, 0, .08);
-
-    display: flex;
-    align-items: center;
-    padding: clamp(0.5rem, 1vw, 1rem);
-}
-
-/* ---- Branding ---- */
-.brand {
-    display: flex;
-    align-items: center;
-    gap: clamp(0.4rem, 1vw, 0.6rem);
-    color: inherit;
-    text-decoration: none;
-
-    .logo-dot {
-        width: clamp(36px, 10vw, 48px);
-        height: clamp(36px, 10vw, 48px);
-        border-radius: 50%;
-    }
-
-    .brand-text {
-        font-weight: 600;
-        letter-spacing: .2px;
-        font-size: clamp(1rem, 3vw, 1.2rem);
-    }
-}
-
-/* ---- Navigation ---- */
-.nav {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: clamp(0.25rem, 1vw, 0.5rem);
-    justify-content: center;
-}
-
-.nav a {
-    opacity: 0.72;
-    transition: opacity 150ms ease;
-    position: relative;
-
-    &::after {
-        content: '';
-        position: absolute;
-        bottom: 4px;
-        left: 10px;
-        right: 10px;
-        height: 2px;
-        background: currentColor;
-        border-radius: 2px;
-        transform: scaleX(0);
-        transition: transform 200ms ease;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-
-    &.active {
-        opacity: 1;
-
-        &::after {
-            transform: scaleX(1);
-        }
-    }
-}
-
-.nav-menu-btn {
-    display: none;
-}
-
-.spacer {
-    flex: 1;
-}
-
-/* ---- Mobile Responsiveness ---- */
-@media (max-width: 760px) {
-    .nav {
-        display: none;
-    }
-
-    .nav-menu-btn {
-        display: inline-flex;
-    }
-
-    .brand {
-        flex: unset;
-    }
-}
\ No newline at end of file
diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html
index 314e737..86a46ba 100644
--- a/src/app/pages/about/about.component.html
+++ b/src/app/pages/about/about.component.html
@@ -1,33 +1,34 @@
-<section class="about">
-  <mat-card class="hero">
-    <div class="hero-flex-container">
-      <div class="photo">
-        <img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
+<section class="grid gap-fluid-md max-w-app mx-4 mt-auto">
+  <mat-card>
+    <div class="flex flex-wrap gap-fluid-lg p-fluid-md items-start">
+      <div class="flex-[1_1_min(100%,425px)] max-w-full flex justify-center">
+        <img class="block w-full h-auto max-w-[425px] rounded-xl shadow-[0_6px_24px_rgba(0,0,0,0.25)] object-cover"
+          [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
           draggable="false" oncontextmenu="return false;" priority />
       </div>
 
-      <div class="intro">
-        <h1>{{ 'ABOUT.HELLO' | translate }}</h1>
-        <p class="lead">
+      <div class="flex-[999_1_min(100%,400px)]">
+        <h1 class="mt-0 mb-2 text-[clamp(1.5rem,5vw,2.5rem)]">{{ 'ABOUT.HELLO' | translate }}</h1>
+        <p class="opacity-90 my-2 mb-4 text-[clamp(1rem,2.5vw,1.15rem)]">
           {{ 'ABOUT.LEAD' | translate }}
         </p>
 
-        <div class="meta">
-          <div class="row">
+        <div class="flex flex-col gap-1 mb-2">
+          <div class="flex items-center flex-wrap gap-[0.4rem]">
             <mat-icon aria-hidden="true">work</mat-icon>
             <span>{{ 'ABOUT.ROLE' | translate }}</span>
           </div>
-          <div class="row">
+          <div class="flex items-center flex-wrap gap-[0.4rem]">
             <mat-icon aria-hidden="true">location_on</mat-icon>
             <span>{{ 'ABOUT.LOCATION' | translate }}</span>
           </div>
-          <div class="row">
+          <div class="flex items-center flex-wrap gap-[0.4rem]">
             <mat-icon aria-hidden="true">email</mat-icon>
             <a href="" (click)="SharedFunctions.openMail($event)">
               {{ 'ABOUT.CONTACT_ME' | translate }}
             </a>
           </div>
-          <div class="row">
+          <div class="flex items-center flex-wrap gap-[0.4rem]">
             <mat-icon>data_object</mat-icon>
             <a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a>
             <span>·</span>
@@ -39,11 +40,11 @@
     </div>
   </mat-card>
 
-  <mat-card class="skills">
-    <h2>{{ 'ABOUT.SECTION.SKILLS' | translate }}</h2>
-    <div class="chip-groups">
+  <mat-card class="p-[clamp(5px,2vw,15px)]">
+    <h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.SKILLS' | translate }}</h2>
+    <div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,250px),1fr))] gap-fluid-sm ml-1 mb-2">
       <div>
-        <h3>{{ 'ABOUT.SECTION.BACKEND_ARCH' | translate }}</h3>
+        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.BACKEND_ARCH' | translate }}</h3>
         <mat-chip-set aria-label="Backend and Architecture">
           @for (s of skillsArchitecture; track s) {
           <mat-chip>{{ s | translate }}</mat-chip>
@@ -52,7 +53,7 @@
       </div>
 
       <div>
-        <h3>{{ 'ABOUT.SECTION.INFRA_CLOUD' | translate }}</h3>
+        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.INFRA_CLOUD' | translate }}</h3>
         <mat-chip-set aria-label="Infrastructure and Cloud">
           @for (s of skillsCore; track s) {
           <mat-chip>{{ s | translate }}</mat-chip>
@@ -61,7 +62,7 @@
       </div>
 
       <div>
-        <h3>{{ 'ABOUT.SECTION.SIM_ALGO' | translate }}</h3>
+        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.SIM_ALGO' | translate }}</h3>
         <mat-chip-set aria-label="Simulation and Algorithms">
           @for (s of skillsEngineering; track s) {
           <mat-chip>{{ s | translate }}</mat-chip>
@@ -71,31 +72,31 @@
     </div>
   </mat-card>
 
-  <mat-card class="experdience">
-    <h2 style="margin-left: 0.5rem;">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
-    <div class="xp-list">
+  <mat-card class="p-[clamp(5px,2vw,15px)]">
+    <h2 class="mt-1 ml-2 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
+    <div class="ml-1 grid gap-fluid-sm">
       @for (entry of xpKeys; track entry.key) {
-      <div class="xp-item">
-        <div class="xp-head-grid">
-          <div class="logo-wrap">
-            <img src="{{entry.logo}}" alt="" class="company-logo" aria-hidden="true" />
+      <div>
+        <div class="grid grid-cols-[auto_1fr] gap-x-3">
+          <div class="row-span-2 col-start-1 flex items-center">
+            <img src="{{entry.logo}}" alt="" class="w-10 h-10 object-contain opacity-90 rounded-[10%] bg-logo-bg" aria-hidden="true" />
           </div>
-          <div class="head-row">
-            <strong>{{ (entry.key + '.ROLE') | translate }}</strong>
-            <span class="time">{{ (entry.key + '.TIME') | translate }}</span>
+          <div class="row-start-1 col-start-2 flex flex-wrap items-baseline gap-x-4 gap-y-1">
+            <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.ROLE') | translate }}</strong>
+            <span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.TIME') | translate }}</span>
           </div>
 
-          <div class="company-row">
+          <div class="row-start-2 col-start-2 mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
             {{ (entry.key + '.COMPANY') | translate }}
           </div>
 
         </div>
         @if (!entry.no_highlights) {
-          <div class="highlights">
+          <div class="mt-[0.4rem] ml-[clamp(0.25rem,1vw,0.75rem)] pl-[clamp(0.8rem,2vw,1.2rem)]">
             <ul>
-              <li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
-              <li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
-              <li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
+              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
+              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
+              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
             </ul>
           </div>
         }
@@ -108,38 +109,38 @@
       }
     </div>
   </mat-card>
-  <mat-card class="projects">
-    <h2>{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>
+  <mat-card class="p-[clamp(5px,2vw,15px)]">
+    <h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>
 
-    <div class="xp-list">
+    <div class="ml-1 grid gap-fluid-sm">
       @for (entry of projectKeys; track entry.key) {
-      <div class="xp-item">
-        <div class="head-row">
-          <strong>{{ (entry.key + '.TITLE') | translate }}</strong>
+      <div>
+        <div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
+          <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.TITLE') | translate }}</strong>
         </div>
-        <div class="company-row">
+        <div class="mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
           {{ (entry.key + '.DESCRIPTION') | translate }}
         </div>
         @if (entry.externalLink) {
-        <div class="link-row">
-          <a class="link-with-icon" href="{{entry.externalLink}}" target="_blank" rel="noopener noreferrer">
-            <mat-icon>open_in_new</mat-icon>
+        <div class="mt-[0.1rem] opacity-85">
+          <a class="inline-flex items-center gap-[0.35rem] leading-none" href="{{entry.externalLink}}" target="_blank" rel="noopener noreferrer">
+            <mat-icon class="!text-[18px] !w-[18px] !h-[18px]">open_in_new</mat-icon>
             {{ (entry.key + '.LINK_EXTERNAL') | translate }}
           </a>
         </div>
         }
-        <div class="link-row">
-          <a class="link-with-icon" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
+        <div class="mt-[0.1rem] opacity-85">
+          <a class="inline-flex items-center gap-[0.35rem] leading-none" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
             rel="noopener noreferrer">
-            <mat-icon>link</mat-icon>
+            <mat-icon class="!text-[18px] !w-[18px] !h-[18px]">link</mat-icon>
             {{ (entry.key + '.LINK_INTERNAL') | translate }}
           </a>
         </div>
-        <div class="highlights-noMargin">
+        <div>
           <ul>
-            <li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
-            <li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
-            <li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
+            <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
+            <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
+            <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
           </ul>
         </div>
       </div>
@@ -152,23 +153,23 @@
     </div>
   </mat-card>
 
-  <mat-card class="education">
-    <h2>{{ 'ABOUT.SECTION.EDUCATION' | translate }}</h2>
+  <mat-card class="p-[clamp(5px,2vw,15px)]">
+    <h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.EDUCATION' | translate }}</h2>
 
-    <div class="xp-list">
-      <div class="xp-item">
+    <div class="ml-1 grid gap-fluid-sm">
+      <div>
         @for (entry of educationKeys; track entry.key) {
-        <div class="head-row">
-          <strong>{{ (entry.key + '.WHERE') | translate }}</strong>
-          <span class="time">{{ (entry.key + '.WHEN') | translate }}</span>
+        <div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
+          <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.WHERE') | translate }}</strong>
+          <span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.WHEN') | translate }}</span>
         </div>
-        <div class="company-row">
+        <div class="mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
           {{ (entry.key + '.WHAT') | translate }}
         </div>
 
         @if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
         {
-        <mat-divider style="margin-top: .5rem; margin-bottom: .5rem"></mat-divider>
+        <mat-divider class="!my-2"></mat-divider>
         }
         }
       </div>
diff --git a/src/app/pages/algorithms/algorithms.component.html b/src/app/pages/algorithms/algorithms.component.html
index 838b550..212107e 100644
--- a/src/app/pages/algorithms/algorithms.component.html
+++ b/src/app/pages/algorithms/algorithms.component.html
@@ -1,15 +1,15 @@
-<div class="card-grid">
-  <h1 class="algo-page-title">{{ 'ALGORITHM.TITLE' | translate }}</h1>
+<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
+  <h1 class="m-0 mb-2 text-[clamp(1.4rem,4vw,2rem)]">{{ 'ALGORITHM.TITLE' | translate }}</h1>
 </div>
-<div class="card-grid">
+<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
   @for (category of categories; track category.id) {
-    <mat-card class="algo-card" [routerLink]="[category.routerLink]">
+    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col cursor-pointer hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(0,0,0,0.12)]" [routerLink]="[category.routerLink]">
       <mat-card-content>
-        <div class="algo-icon-wrap">
-          <mat-icon>{{ category.icon }}</mat-icon>
+        <div class="flex items-center text-[var(--mat-sys-primary)] mb-4">
+          <mat-icon class="!text-[26px] !w-[26px] !h-[26px]">{{ category.icon }}</mat-icon>
         </div>
-        <h3 class="algo-card-title">{{ category.title | translate }}</h3>
-        <p class="algo-card-desc">{{ category.description | translate }}</p>
+        <h3 class="text-[1.05rem] font-semibold mb-2 m-0">{{ category.title | translate }}</h3>
+        <p class="m-0 opacity-75 text-sm leading-relaxed">{{ category.description | translate }}</p>
       </mat-card-content>
     </mat-card>
   }
diff --git a/src/app/pages/algorithms/cloth/cloth.component.html b/src/app/pages/algorithms/cloth/cloth.component.html
index 11d88e7..026005a 100644
--- a/src/app/pages/algorithms/cloth/cloth.component.html
+++ b/src/app/pages/algorithms/cloth/cloth.component.html
@@ -1,11 +1,11 @@
-<mat-card class="algo-container">
+<mat-card class="w-full max-w-[1920px] p-5">
   <mat-card-header>
     <mat-card-title>{{ 'CLOTH.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
-    <div class="controls-container">
-      <div class="controls-panel">
+    <div class="flex flex-col mb-4">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         <button mat-raised-button color="primary" (click)="toggleWind()">
           {{ isWindActive ? ('CLOTH.WIND_OFF' | translate)  : ('CLOTH.WIND_ON' | translate) }}
         </button>
@@ -16,7 +16,7 @@
           {{ 'CLOTH.RESTART_SIMULATION' | translate }}
         </button>
       </div>
-      <div class="sliders-panel">
+      <div class="flex items-center gap-2.5">
         <span>{{ 'CLOTH.ELONGATION' | translate }}: {{ elongation }}</span>
         <mat-slider min="0.5" max="2.0" step="0.1">
           <input matSliderThumb [(ngModel)]="elongation">
diff --git a/src/app/pages/algorithms/conway-gol/conway-gol.component.html b/src/app/pages/algorithms/conway-gol/conway-gol.component.html
index 568001c..2cab315 100644
--- a/src/app/pages/algorithms/conway-gol/conway-gol.component.html
+++ b/src/app/pages/algorithms/conway-gol/conway-gol.component.html
@@ -1,11 +1,11 @@
-<mat-card class="algo-container">
+<mat-card class="w-full max-w-[1920px] p-5">
   <mat-card-header>
     <mat-card-title>{{ 'GOL.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
-    <div class="controls-container">
-      <div class="controls-panel">
+    <div class="flex flex-col mb-4">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         <button mat-raised-button (click)="generate(Scenario.SIMPLE)">
           <mat-icon>arrow_right</mat-icon> {{ 'GOL.SIMPLE_SCENE' | translate }}
         </button>
@@ -22,7 +22,7 @@
           <mat-icon>check_box_outline_blank</mat-icon> {{ 'GOL.EMPTY_SCENE' | translate }}
         </button>
       </div>
-      <div class="controls-panel">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         @if (gameStarted())
         {
           <button mat-raised-button (click)="pauseGame()">
@@ -35,8 +35,8 @@
         }
         <p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
       </div>
-      <div class="input-container">
-        <mat-form-field appearance="outline" class="input-field">
+      <div class="flex gap-3 items-center flex-wrap">
+        <mat-form-field appearance="outline" class="w-[150px]">
           <mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
           <input
             matInput
@@ -47,7 +47,7 @@
             (ngModelChange)="pauseGame(); genericGridComponent.gridRows = gridRows; genericGridComponent.applyGridSize()"
           />
         </mat-form-field>
-        <mat-form-field appearance="outline" class="input-field">
+        <mat-form-field appearance="outline" class="w-[150px]">
           <mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
           <input
             matInput
@@ -58,7 +58,7 @@
             (ngModelChange)="pauseGame(); genericGridComponent.gridCols = gridCols; genericGridComponent.applyGridSize()"
           />
         </mat-form-field>
-          <mat-form-field appearance="outline" class="input-field">
+          <mat-form-field appearance="outline" class="w-[150px]">
             <mat-label>{{ 'GOL.SPEED' | translate }}</mat-label>
             <input
               matInput
@@ -72,9 +72,9 @@
         </mat-form-field>
 
       </div>
-      <div class="legend">
-        <span><span class="legend-color alive"></span> {{ 'GOL.ALIVE' | translate }}</span>
-        <span><span class="legend-color empty"></span> {{ 'GOL.DEAD' | translate }}</span>
+      <div class="flex flex-wrap gap-4 items-center text-[0.9em]">
+        <span><span class="legend-swatch bg-black"></span> {{ 'GOL.ALIVE' | translate }}</span>
+        <span><span class="legend-swatch bg-gray-300"></span> {{ 'GOL.DEAD' | translate }}</span>
       </div>
     </div>
     <app-generic-grid
diff --git a/src/app/pages/algorithms/four-color/four-color.component.html b/src/app/pages/algorithms/four-color/four-color.component.html
index 37ba2a1..bf8b2cc 100644
--- a/src/app/pages/algorithms/four-color/four-color.component.html
+++ b/src/app/pages/algorithms/four-color/four-color.component.html
@@ -1,20 +1,20 @@
-<mat-card class="algo-container">
+<mat-card class="w-full max-w-[1920px] p-5">
   <mat-card-header>
     <mat-card-title>{{ 'FOUR_COLOR.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
 
-    <div class="controls-container">
-      <div class="controls-panel">
+    <div class="flex flex-col mb-4">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         <button mat-flat-button color="primary" (click)="generateNewMap()">{{ 'FOUR_COLOR.GENERATE' | translate }}</button>
         <button mat-flat-button color="accent" (click)="autoSolve()">{{ 'FOUR_COLOR.SOLVE' | translate }}</button>
         <button mat-stroked-button (click)="resetColors()">{{ 'FOUR_COLOR.CLEAR' | translate }}</button>
       </div>
 
-      <div class="controls-panel">
-        <div class="input-container">
-          <mat-form-field appearance="outline" class="input-field">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
+        <div class="flex gap-3 items-center flex-wrap">
+          <mat-form-field appearance="outline" class="w-[150px]">
             <mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
             <input
               matInput
@@ -26,7 +26,7 @@
             />
           </mat-form-field>
 
-          <mat-form-field appearance="outline" class="input-field">
+          <mat-form-field appearance="outline" class="w-[150px]">
             <mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
             <input
               matInput
@@ -40,21 +40,28 @@
         </div>
       </div>
 
-      <div class="legend">
-        <span><span class="legend-color color1"></span> {{ 'FOUR_COLOR.COLOR_1' | translate }}</span>
-        <span><span class="legend-color color2"></span> {{ 'FOUR_COLOR.COLOR_2' | translate }}</span>
-        <span><span class="legend-color color3"></span> {{ 'FOUR_COLOR.COLOR_3' | translate }}</span>
-        <span><span class="legend-color color4"></span> {{ 'FOUR_COLOR.COLOR_4' | translate }}</span>
+      <div class="flex flex-wrap gap-4 items-center text-[0.9em]">
+        <span><span class="legend-swatch bg-[#FF5252]"></span> {{ 'FOUR_COLOR.COLOR_1' | translate }}</span>
+        <span><span class="legend-swatch bg-[#448AFF]"></span> {{ 'FOUR_COLOR.COLOR_2' | translate }}</span>
+        <span><span class="legend-swatch bg-[#4CAF50]"></span> {{ 'FOUR_COLOR.COLOR_3' | translate }}</span>
+        <span><span class="legend-swatch bg-[#FFEB3B]"></span> {{ 'FOUR_COLOR.COLOR_4' | translate }}</span>
       </div>
 
-      <div class="status-panel" [ngClass]="solutionStatus.toLowerCase()">
-        <span class="status-label">{{ 'FOUR_COLOR.STATUS.LABEL' | translate }}:</span>
-        <span class="status-message">{{ 'FOUR_COLOR.STATUS.' + solutionStatus | translate }}</span>
+      <div class="mt-5 flex gap-2.5 py-2.5 px-4 rounded border-l-[5px] font-medium min-w-[300px] items-center"
+           [ngClass]="{
+             'border-l-gray-500 bg-app-bg': solutionStatus === 'INCOMPLETE',
+             'border-l-green-500 bg-green-50 text-green-800': solutionStatus === 'SOLVED',
+             'border-l-orange-500 bg-orange-50 text-orange-700': solutionStatus === 'CONFLICTS',
+             'border-l-red-500 bg-red-50 text-red-800': solutionStatus === 'INVALID'
+           }">
+        <span class="uppercase text-[0.8em] opacity-70">{{ 'FOUR_COLOR.STATUS.LABEL' | translate }}:</span>
+        <span>{{ 'FOUR_COLOR.STATUS.' + solutionStatus | translate }}</span>
       </div>
     </div>
 
-    <div class="canvas-container">
+    <div class="flex justify-center items-center w-full max-w-[1000px] mx-auto">
       <canvas #fourColorCanvas
+              class="cursor-pointer max-w-full h-auto [image-rendering:pixelated]"
               (mousedown)="onMouseDown($event)"
               (mousemove)="onMouseMove($event)"
               (touchstart)="onTouchStart($event)"
diff --git a/src/app/pages/algorithms/four-color/four-color.component.scss b/src/app/pages/algorithms/four-color/four-color.component.scss
index 5d87a81..e69de29 100644
--- a/src/app/pages/algorithms/four-color/four-color.component.scss
+++ b/src/app/pages/algorithms/four-color/four-color.component.scss
@@ -1,54 +0,0 @@
-
-.status-panel {
-  margin-top: 20px;
-  display: flex;
-  gap: 10px;
-  padding: 10px 15px;
-  border-radius: 4px;
-  background-color: var(--app-fg);
-  border-left: 5px solid #9e9e9e;
-  font-weight: 500;
-  min-width: 300px;
-  align-items: center;
-}
-
-.status-panel.incomplete {
-  border-left-color: #9e9e9e;
-  background-color: var(--app-bg);
-}
-
-.status-panel.solved {
-  border-left-color: #4CAF50;
-  background-color: #e8f5e9;
-  color: #2e7d32;
-}
-
-.status-panel.conflicts {
-  border-left-color: #ff9800;
-  background-color: #fff3e0;
-  color: #ef6c00;
-}
-
-.status-panel.invalid {
-  border-left-color: #f44336;
-  background-color: #ffebee;
-  color: #c62828;
-}
-
-.status-label {
-  text-transform: uppercase;
-  font-size: 0.8em;
-  opacity: 0.7;
-}
-
-.color1 { background-color: #FF5252; }
-.color2 { background-color: #448AFF; }
-.color3 { background-color: #4CAF50; }
-.color4 { background-color: #FFEB3B; }
-
-canvas {
-  cursor: pointer;
-  max-width: 100%;
-  height: auto;
-  image-rendering: pixelated;
-}
diff --git a/src/app/pages/algorithms/fractal/fractal.component.html b/src/app/pages/algorithms/fractal/fractal.component.html
index b8c7b8f..be75397 100644
--- a/src/app/pages/algorithms/fractal/fractal.component.html
+++ b/src/app/pages/algorithms/fractal/fractal.component.html
@@ -1,12 +1,12 @@
-<mat-card class="algo-container">
+<mat-card class="w-full max-w-[1920px] p-5">
   <mat-card-header>
     <mat-card-title>{{ 'FRACTAL.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
-    <div class="controls-container">
-      <div class="controls-panel">
-        <mat-form-field appearance="fill">
+    <div class="flex flex-col mb-4">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
+        <mat-form-field class="w-[200px]" appearance="fill">
           <mat-label>{{ 'FRACTAL.ALGORITHM' | translate }}</mat-label>
           <mat-select [value]="'Mandelbrot'" (selectionChange)="onAlgorithmChange($event.value)">
             <mat-option value="Mandelbrot">Mandelbrot</mat-option>
@@ -15,7 +15,7 @@
             <mat-option value="Newton">Newton</mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field appearance="fill">
+        <mat-form-field class="w-[200px]" appearance="fill">
           <mat-label>{{ 'FRACTAL.COLOR_SCHEME' | translate }}</mat-label>
           <mat-select [value]="'Blue-Gold'" (selectionChange)="onColorChanged($event.value)">
             <mat-option value="Blue-Gold">Blue-Gold</mat-option>
@@ -29,7 +29,7 @@
           <mat-icon>undo</mat-icon> {{ 'FRACTAL.RESET' | translate }}
         </button>
       </div>
-      <div class="zoom-controls" style="display: flex; align-items: center; gap: 10px;">
+      <div style="display: flex; align-items: center; gap: 10px;">
         <mat-icon>zoom_out</mat-icon>
         <ngx-slider [(value)]="sliderValue" [options]="options" (valueChange)="onSliderChange($event)" ></ngx-slider>
         <mat-icon>zoom_in</mat-icon>
diff --git a/src/app/pages/algorithms/fractal3d/fractal3d.component.html b/src/app/pages/algorithms/fractal3d/fractal3d.component.html
index b7ed0da..7d424d9 100644
--- a/src/app/pages/algorithms/fractal3d/fractal3d.component.html
+++ b/src/app/pages/algorithms/fractal3d/fractal3d.component.html
@@ -1,11 +1,11 @@
-<mat-card class="algo-container">
+<mat-card class="w-full max-w-[1920px] p-5">
   <mat-card-header>
     <mat-card-title>{{ 'FRACTAL3D.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
-    <div class="controls-container">
-      <div class="controls-panel">
+    <div class="flex flex-col mb-4">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         <button matButton="filled" (click)="onFractalTypeChange(0)">{{ 'FRACTAL3D.MANDELBULB' | translate }}</button>
         <button matButton="filled" (click)="onFractalTypeChange(1)">{{ 'FRACTAL3D.MANDELBOX' | translate }}</button>
         <button matButton="filled" (click)="onFractalTypeChange(2)">{{ 'FRACTAL3D.JULIA' | translate }}</button>
diff --git a/src/app/pages/algorithms/information/information.html b/src/app/pages/algorithms/information/information.html
index 617374f..13125e9 100644
--- a/src/app/pages/algorithms/information/information.html
+++ b/src/app/pages/algorithms/information/information.html
@@ -1,10 +1,10 @@
-<div class="algo-info">
-  <h3>{{ algorithmInformation.title | translate }}</h3>
+<div class="mb-4 py-3 px-4 border border-[#ddd] rounded-lg">
+  <h3 class="m-0 mb-2">{{ algorithmInformation.title | translate }}</h3>
 
   @if(algorithmInformation.entries && algorithmInformation.entries.length > 0){
     @for (algo of algorithmInformation.entries; track algo)
     {
-      <p>
+      <p class="my-2">
         <strong>
           @if(algo.translateName){
             {{ algo.name | translate}}
@@ -20,7 +20,7 @@
 
   @if (algorithmInformation.disclaimer !== '')
   {
-    <p>
+    <p class="my-2">
       <strong>{{ 'ALGORITHM.NOTE' | translate}}</strong> {{ algorithmInformation.disclaimer | translate}}
     </p>
     @if (algorithmInformation.disclaimerListEntry && algorithmInformation.disclaimerListEntry.length > 0)
diff --git a/src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html b/src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html
index 88aa734..f394cc3 100644
--- a/src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html
+++ b/src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html
@@ -1,27 +1,27 @@
-<mat-card class="algo-container">
+<mat-card class="w-full max-w-[1920px] p-5">
   <mat-card-header>
     <mat-card-title>{{ 'LABYRINTH.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
-    <div class="controls-container">
-      <div class="controls-panel">
+    <div class="flex flex-col mb-4">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         <button matButton="filled" [disabled]="isAnimationRunning()" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
         <button matButton="filled" [disabled]="isAnimationRunning()" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
       </div>
-      <div class="controls-panel">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         <button matButton="filled" [disabled]="isAnimationRunning()" (click)="createRandom(true)">{{ 'LABYRINTH.PRIM' | translate }}</button>
         <button matButton="filled" [disabled]="isAnimationRunning()" (click)="createRandom(false)">{{ 'LABYRINTH.KRUSKAL' | translate }}</button>
       </div>
 
-      <div class="legend">
-        <span><span class="legend-color start"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
-        <span><span class="legend-color end"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
-        <span><span class="legend-color wall"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
-        <span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
-        <span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
+      <div class="flex flex-wrap gap-4 items-center text-[0.9em]">
+        <span><span class="legend-swatch bg-green-600"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
+        <span><span class="legend-swatch bg-red-600"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
+        <span><span class="legend-swatch bg-black"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
+        <span><span class="legend-swatch bg-sky-300"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
+        <span><span class="legend-swatch bg-[gold]"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
       </div>
-      <div class="controls-panel">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         <p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
         <p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
       </div>
diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.html b/src/app/pages/algorithms/pathfinding/pathfinding.component.html
index 3787e7f..da742f1 100644
--- a/src/app/pages/algorithms/pathfinding/pathfinding.component.html
+++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.html
@@ -1,33 +1,33 @@
-  <mat-card class="algo-container">
+  <mat-card class="w-full max-w-[1920px] p-5">
     <mat-card-header>
       <mat-card-title>{{ 'PATHFINDING.TITLE' | translate }}</mat-card-title>
     </mat-card-header>
     <mat-card-content>
       <app-information [algorithmInformation]="algoInformation"/>
 
-      <div class="controls-container">
-        <div class="controls-panel">
+      <div class="flex flex-col mb-4">
+        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
           <button matButton="filled" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
           <button matButton="filled" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
         </div>
-        <div class="controls-panel">
+        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
           <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'normal'})">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button>
           <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'random'})">{{ 'PATHFINDING.RANDOM_CASE' | translate }}</button>
           <button matButton="filled" (click)="createCase({withWalls: true, scenario: 'edge'})">{{ 'PATHFINDING.EDGE_CASE' | translate }}</button>
           <button matButton="filled" (click)="createCase({withWalls: false, scenario: 'normal'})">{{ 'PATHFINDING.CLEAR_BOARD' | translate }}</button>
         </div>
 
-        <div class="controls-panel">
-          <mat-button-toggle-group [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
+        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
+          <mat-button-toggle-group class="rounded overflow-hidden" [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
             <mat-button-toggle [value]="NodeType.Start">{{ 'PATHFINDING.START_NODE' | translate }}</mat-button-toggle>
             <mat-button-toggle [value]="NodeType.End">{{ 'PATHFINDING.END_NODE' | translate }}</mat-button-toggle>
             <mat-button-toggle [value]="NodeType.Wall">{{ 'PATHFINDING.WALL' | translate }}</mat-button-toggle>
             <mat-button-toggle [value]="NodeType.None">{{ 'PATHFINDING.CLEAR_NODE' | translate }}</mat-button-toggle>
           </mat-button-toggle-group>
         </div>
-        <div class="controls-panel">
-          <div class="input-container">
-            <mat-form-field appearance="outline" class="input-field">
+        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
+          <div class="flex gap-3 items-center flex-wrap">
+            <mat-form-field appearance="outline" class="w-[150px]">
               <mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
                         <input
                           matInput
@@ -38,7 +38,7 @@
                           (ngModelChange)="genericGridComponent.gridRows = gridRows; genericGridComponent.applyGridSize()"
                         />          </mat-form-field>
 
-            <mat-form-field appearance="outline" class="input-field">
+            <mat-form-field appearance="outline" class="w-[150px]">
               <mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
                         <input
                           matInput
@@ -51,14 +51,14 @@
           </div>
         </div>
 
-        <div class="legend">
-          <span><span class="legend-color start"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
-          <span><span class="legend-color end"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
-          <span><span class="legend-color wall"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
-          <span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
-          <span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
+        <div class="flex flex-wrap gap-4 items-center text-[0.9em]">
+          <span><span class="legend-swatch bg-green-600"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
+          <span><span class="legend-swatch bg-red-600"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
+          <span><span class="legend-swatch bg-black"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
+          <span><span class="legend-swatch bg-sky-300"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
+          <span><span class="legend-swatch bg-[gold]"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
         </div>
-        <div class="controls-panel">
+        <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
           <p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
           <p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
         </div>
diff --git a/src/app/pages/algorithms/pendulum/pendulum.component.html b/src/app/pages/algorithms/pendulum/pendulum.component.html
index acbc526..055acb6 100644
--- a/src/app/pages/algorithms/pendulum/pendulum.component.html
+++ b/src/app/pages/algorithms/pendulum/pendulum.component.html
@@ -1,45 +1,45 @@
-<mat-card class="algo-container">
+<mat-card class="w-full max-w-[1920px] p-5">
   <mat-card-header>
     <mat-card-title>{{ 'PENDULUM.TITLE' | translate }}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
-    <div class="controls-container">
-      <div class="sliders-grid">
-          <div class="slider-item">
-            <p>{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
-            <ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
+    <div class="flex flex-col mb-4">
+      <div class="grid grid-cols-2 tablet:grid-cols-1 tablet:gap-4 mb-6">
+          <div class="flex items-center gap-4 mr-4">
+            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
+            <ngx-slider class="grow" [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
           </div>
-          <div class="slider-item">
-            <p>{{ 'PENDULUM.ATTRACTION' | translate }}</p>
-            <ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
+          <div class="flex items-center gap-4 mr-4">
+            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.ATTRACTION' | translate }}</p>
+            <ngx-slider class="grow" [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
           </div>
 
-          <div class="slider-item">
-            <p>{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
-            <ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
+          <div class="flex items-center gap-4 mr-4">
+            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
+            <ngx-slider class="grow" [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
           </div>
-          <div class="slider-item">
-            <p>{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
-            <ngx-slider [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
+          <div class="flex items-center gap-4 mr-4">
+            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
+            <ngx-slider class="grow" [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
           </div>
 
-          <div class="slider-item">
-            <p>{{ 'PENDULUM.M1_MASS' | translate }}</p>
-            <ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
+          <div class="flex items-center gap-4 mr-4">
+            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.M1_MASS' | translate }}</p>
+            <ngx-slider class="grow" [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
           </div>
-          <div class="slider-item">
-            <p>{{ 'PENDULUM.M2_MASS' | translate }}</p>
-            <ngx-slider [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
+          <div class="flex items-center gap-4 mr-4">
+            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.M2_MASS' | translate }}</p>
+            <ngx-slider class="grow" [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
           </div>
 
-          <div class="slider-item full-width">
-            <p>{{ 'PENDULUM.DAMPING' | translate }}</p>
-            <ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
+          <div class="flex items-center gap-4 mr-4 col-span-full">
+            <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.DAMPING' | translate }}</p>
+            <ngx-slider class="grow" [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
           </div>
       </div>
 
-      <div class="actions-container">
+      <div class="flex flex-wrap gap-3 mb-4">
         <button mat-raised-button color="primary" (click)="pushPendulum(true)">
           {{ 'PENDULUM.POKE_M1' | translate }}
         </button>
@@ -51,11 +51,11 @@
         </button>
       </div>
 
-      <div class="legend" style="margin-top: 10px">
-        <span><span class="legend-color L1"></span> L1</span>
-        <span><span class="legend-color L2"></span> L2</span>
-        <span><span class="legend-color M1"></span> M1</span>
-        <span><span class="legend-color M2"></span> M2</span>
+      <div class="flex flex-wrap gap-4 items-center text-[0.9em] mt-2.5">
+        <span><span class="legend-swatch bg-yellow-400"></span> L1</span>
+        <span><span class="legend-swatch bg-fuchsia-500"></span> L2</span>
+        <span><span class="legend-swatch bg-red-600"></span> M1</span>
+        <span><span class="legend-swatch bg-green-600"></span> M2</span>
       </div>
     </div>
     <app-babylon-canvas
diff --git a/src/app/pages/algorithms/pendulum/pendulum.component.scss b/src/app/pages/algorithms/pendulum/pendulum.component.scss
index eea0f7d..e69de29 100644
--- a/src/app/pages/algorithms/pendulum/pendulum.component.scss
+++ b/src/app/pages/algorithms/pendulum/pendulum.component.scss
@@ -1,41 +0,0 @@
-.sliders-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-bottom: 1.5rem;
-
-  .slider-item {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-right: 1rem;
-
-    p {
-      width: 100px;
-      flex-shrink: 0;
-      margin: 0;
-      font-size: 0.9rem;
-    }
-
-    ngx-slider {
-      flex-grow: 1;
-    }
-
-    &.full-width {
-      grid-column: 1 / -1;
-    }
-  }
-}
-
-.actions-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-@media (max-width: 900px) {
-  .sliders-grid {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-}
diff --git a/src/app/pages/algorithms/sorting/sorting.component.html b/src/app/pages/algorithms/sorting/sorting.component.html
index 77ade5b..2737587 100644
--- a/src/app/pages/algorithms/sorting/sorting.component.html
+++ b/src/app/pages/algorithms/sorting/sorting.component.html
@@ -1,11 +1,11 @@
-<mat-card class="algo-container sorting-card">
+<mat-card class="w-full max-w-[1920px] p-[clamp(10px,3vw,20px)]">
     <mat-card-header>
       <mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
     </mat-card-header>
     <mat-card-content>
       <app-information [algorithmInformation]="algoInformation"/>
-      <div class="controls-panel">
-        <mat-form-field appearance="fill">
+      <div class="flex gap-[clamp(5px,2vw,10px)] mb-[clamp(10px,3vw,20px)] items-center flex-wrap mt-2.5 text-[0.9em]">
+        <mat-form-field class="w-[clamp(150px,20vw,200px)]" appearance="fill">
           <mat-label>{{ 'SORTING.ALGORITHM' | translate }}</mat-label>
           <mat-select [(ngModel)]="selectedAlgorithm">
             @for (algo of algoInformation.entries; track algo.name) {
@@ -14,7 +14,7 @@
           </mat-select>
         </mat-form-field>
 
-        <mat-form-field appearance="outline">
+        <mat-form-field class="w-[clamp(150px,20vw,200px)]" appearance="outline">
           <mat-label>{{ 'SORTING.ARRAY_SIZE' | translate }}</mat-label>
           <input
             matInput
@@ -27,7 +27,7 @@
           />
         </mat-form-field>
       </div>
-      <div class="controls-panel">
+      <div class="flex gap-[clamp(5px,2vw,10px)] mb-[clamp(10px,3vw,20px)] items-center flex-wrap">
         <button mat-raised-button color="primary" (click)="startSorting()">
           <mat-icon>play_arrow</mat-icon> {{ 'SORTING.START' | translate }}
         </button>
@@ -43,17 +43,19 @@
         </button>
       </div>
 
-      <div class="controls-panel">
+      <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
         <p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
       </div>
-      <div class="visualization-area">
+      <div class="flex items-end h-[clamp(200px,40vh,400px)] border-b border-app-fg mb-[clamp(10px,3vw,20px)] gap-px bg-card-bg">
         @for (item of sortArray; track $index) {
           <div
-            class="bar"
+            class="grow w-2.5 min-w-px transition-all duration-[50ms]"
             [style.height.px]="item.value * 3"
-            [class.unsorted]="item.state === 'unsorted'"
-            [class.comparing]="item.state === 'comparing'"
-            [class.sorted]="item.state === 'sorted'"
+            [ngClass]="{
+              'bg-[#424242]': item.state === 'unsorted',
+              'bg-[#ffeb3b]': item.state === 'comparing',
+              'bg-[#4caf50]': item.state === 'sorted'
+            }"
           ></div>
         }
       </div>
diff --git a/src/app/pages/imprint/imprint.component.html b/src/app/pages/imprint/imprint.component.html
index 0abee76..5d7de4d 100644
--- a/src/app/pages/imprint/imprint.component.html
+++ b/src/app/pages/imprint/imprint.component.html
@@ -1,9 +1,9 @@
-<section class="imprint">
-  <mat-card class="imprint-card">
-    <h2 class="imprint-title">{{ 'IMPRINT.TITLE' | translate }}</h2>
+<section class="grid gap-fluid-md max-w-app mx-4 mt-auto">
+  <mat-card class="p-fluid-md">
+    <h2 class="m-0 mb-4 text-[clamp(1rem,3vw,1.2rem)] font-semibold">{{ 'IMPRINT.TITLE' | translate }}</h2>
 
-    <div class="imprint-section">
-      <p class="imprint-label">{{ 'IMPRINT.PARAGRAPH' | translate }}</p>
+    <div class="grid gap-1 mb-4">
+      <p class="text-xs tracking-[0.04em] uppercase opacity-70 m-0">{{ 'IMPRINT.PARAGRAPH' | translate }}</p>
 
       <p>
         Andreas Dahm<br />
@@ -13,8 +13,8 @@
       </p>
     </div>
 
-    <div class="imprint-section">
-      <p class="imprint-label">{{ 'IMPRINT.CONTACT' | translate }}</p>
+    <div class="grid gap-1 mb-4">
+      <p class="text-xs tracking-[0.04em] uppercase opacity-70 m-0">{{ 'IMPRINT.CONTACT' | translate }}</p>
       <p>
         E-Mail:
         <a href="mailto:andreas&#46;dahm&#64;gmail&#46;com">
diff --git a/src/app/pages/projects/dialog/project-dialog.component.html b/src/app/pages/projects/dialog/project-dialog.component.html
index d4c21cc..5beb9e6 100644
--- a/src/app/pages/projects/dialog/project-dialog.component.html
+++ b/src/app/pages/projects/dialog/project-dialog.component.html
@@ -1,38 +1,38 @@
 <h2 mat-dialog-title>{{ project.title | translate }}</h2>
 <mat-dialog-content #dialogContent>
-  <div class="project-dialog-layout">
-    <div class="project-info">
-      <p class="introduction">{{ project.introduction | translate }}</p>
+  <div class="flex flex-col gap-6">
+    <div>
+      <p class="text-lg leading-relaxed opacity-90 mb-4">{{ project.introduction | translate }}</p>
 
-      <div class="features-list">
-        <ul>
+      <div class="mb-6">
+        <ul class="pl-5">
           @for(bullet of project.bulletPoints; track bullet) {
-          <li>{{ bullet | translate }}</li>
+          <li class="mb-2">{{ bullet | translate }}</li>
           }
         </ul>
       </div>
 
-      <div class="insight-grid">
-        <div class="insight-card technical">
-          <div class="insight-header">
-            <mat-icon>settings_suggest</mat-icon>
-            <h3>{{ 'PROJECTS.SECTION.TECHNICAL' | translate }}</h3>
+      <div class="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] sm-dialog:grid-cols-1 gap-4 mb-4">
+        <div class="p-5 rounded-xl bg-black/[.03] border border-black/[.05] dark:bg-white/[.05] dark:border-white/10">
+          <div class="flex items-center gap-3 mb-3 text-link">
+            <mat-icon class="!text-[24px] !w-6 !h-6">settings_suggest</mat-icon>
+            <h3 class="m-0 text-sm uppercase tracking-wider font-semibold">{{ 'PROJECTS.SECTION.TECHNICAL' | translate }}</h3>
           </div>
-          <ul>
+          <ul class="m-0 pl-5 text-[0.95rem] leading-relaxed opacity-85">
             @for(challenge of project.challenges; track challenge) {
-            <li>{{ challenge | translate }}</li>
+            <li class="mb-1">{{ challenge | translate }}</li>
             }
           </ul>
         </div>
 
-        <div class="insight-card softskills">
-          <div class="insight-header">
-            <mat-icon>psychology</mat-icon>
-            <h3>{{ 'PROJECTS.SECTION.LEARNINGS' | translate }}</h3>
+        <div class="p-5 rounded-xl bg-black/[.03] border border-black/[.05] dark:bg-white/[.05] dark:border-white/10">
+          <div class="flex items-center gap-3 mb-3 text-link">
+            <mat-icon class="!text-[24px] !w-6 !h-6">psychology</mat-icon>
+            <h3 class="m-0 text-sm uppercase tracking-wider font-semibold">{{ 'PROJECTS.SECTION.LEARNINGS' | translate }}</h3>
           </div>
-          <ul>
+          <ul class="m-0 pl-5 text-[0.95rem] leading-relaxed opacity-85">
             @for(learning of project.learnings; track learning) {
-            <li>{{ learning | translate }}</li>
+            <li class="mb-1">{{ learning | translate }}</li>
             }
           </ul>
         </div>
@@ -41,14 +41,14 @@
 
     @if (project.images.length > 0)
     {
-    <div class="media-section">
-      <swiper-container class="my-swiper" [attr.slides-per-view]="1" [attr.space-between]="12" [attr.navigation]="true"
+    <div class="my-4 rounded-xl overflow-hidden bg-black">
+      <swiper-container class="my-swiper rounded-xl" [attr.slides-per-view]="1" [attr.space-between]="12" [attr.navigation]="true"
         [attr.pagination]="true" [attr.keyboard]="true" style="width: 100%;">
         @for (img of project.images; track img) {
-        <swiper-slide>
-          <img class="slide-img" [src]="img.url" [alt]="project.title | translate" />
+        <swiper-slide class="rounded-xl overflow-hidden flex flex-col bg-[#222]">
+          <img class="w-full h-auto !max-h-[clamp(300px,60vh,512px)] object-contain block shrink-0" [src]="img.url" [alt]="project.title | translate" />
           @if (img.source) {
-          <div class="slide-source">
+          <div class="text-xs text-[#aaa] bg-[#2a2a2a] p-2 text-right border-t border-[#444]">
             {{ img.source }}
           </div>
           }
@@ -58,8 +58,8 @@
     </div>
     }
 
-    <div class="footer-details">
-      <div class="tech-stack">
+    <div class="flex flex-col gap-4 pt-4 border-t border-black/10 dark:border-white/10">
+      <div class="flex flex-wrap">
         <mat-chip-set aria-label="Technologies">
           @for(tech of project.technologies; track tech) {
           <mat-chip>{{tech}}</mat-chip>
@@ -67,7 +67,7 @@
         </mat-chip-set>
       </div>
 
-      <div class="link-section">
+      <div class="flex flex-wrap gap-fluid-sm mt-6">
         @for(link of project.links; track link)
         {
         <a mat-button href="{{link.url}}" target="_blank" rel="noopener noreferrer">
diff --git a/src/app/pages/projects/dialog/project-dialog.component.scss b/src/app/pages/projects/dialog/project-dialog.component.scss
index 70e73fe..e69de29 100644
--- a/src/app/pages/projects/dialog/project-dialog.component.scss
+++ b/src/app/pages/projects/dialog/project-dialog.component.scss
@@ -1,117 +0,0 @@
-.project-dialog-layout {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.introduction {
-  font-size: 1.1rem;
-  line-height: 1.6;
-  opacity: 0.9;
-  margin-bottom: 1rem;
-}
-
-.features-list {
-  margin-bottom: 1.5rem;
-  ul {
-    padding-left: 1.2rem;
-    li {
-      margin-bottom: 0.5rem;
-    }
-  }
-}
-
-.insight-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.insight-card {
-  padding: 1.25rem;
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.03);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-
-  .insight-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 0.75rem;
-    color: var(--link-color);
-
-    mat-icon {
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-    }
-
-    h3 {
-      margin: 0;
-      font-size: 0.9rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      font-weight: 600;
-    }
-  }
-
-  ul {
-    margin: 0;
-    padding-left: 1.2rem;
-    font-size: 0.95rem;
-    line-height: 1.5;
-    opacity: 0.85;
-
-    li {
-      margin-bottom: 0.4rem;
-    }
-  }
-}
-
-.dark .insight-card {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-.media-section {
-  margin: 1rem 0;
-  border-radius: 12px;
-  overflow: hidden;
-  background: #000;
-}
-
-.footer-details {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.dark .footer-details {
-  border-top-color: rgba(255, 255, 255, 0.1);
-}
-
-.tech-stack {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.link-section {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-
-  a {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-}
-
-@media (max-width: 600px) {
-  .insight-grid {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/src/app/pages/projects/projects.component.html b/src/app/pages/projects/projects.component.html
index f11ad3d..017e2ec 100644
--- a/src/app/pages/projects/projects.component.html
+++ b/src/app/pages/projects/projects.component.html
@@ -1,52 +1,52 @@
-<div class="card-grid">
+<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
   @if (featuredProject(); as project) {
-    <mat-card class="project-card featured">
-      <mat-card-header>
+    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full col-span-full hover:-translate-y-[5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
+      <mat-card-header class="pb-4">
         <mat-card-title>{{ project.title | translate }}</mat-card-title>
         <mat-card-subtitle>{{ project.shortDescription | translate }}</mat-card-subtitle>
       </mat-card-header>
       @if(project.images.length > 0) {
-        <img mat-card-image [src]="project.images[0].url" [alt]="project.title | translate">
+        <img mat-card-image class="w-full h-[clamp(150px,25vw,250px)] object-cover" [src]="project.images[0].url" [alt]="project.title | translate">
       } @else {
-        <div class="icon-container">
-          <mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
+        <div class="flex justify-center items-center h-[clamp(150px,20vw,200px)] bg-[#f0f0f0]">
+          <mat-icon class="text-[clamp(3rem,8vw,4rem)] w-[clamp(3rem,8vw,4rem)] h-[clamp(3rem,8vw,4rem)] text-[#666]">{{ project.icon }}</mat-icon>
         </div>
       }
-      <mat-card-content>
+      <mat-card-content class="grow pt-4 pb-4">
         <p>{{ project.introduction | translate }}</p>
-        <mat-chip-set aria-label="Technologies">
+        <mat-chip-set class="pt-fluid-sm" aria-label="Technologies">
           @for(tech of project.technologies; track tech) {
             <mat-chip>{{tech}}</mat-chip>
           }
         </mat-chip-set>
       </mat-card-content>
-      <mat-card-actions>
+      <mat-card-actions class="mt-auto">
         <button mat-button (click)="openProjectDialog(project)">{{ 'PROJECTS.READ_MORE' | translate }}</button>
       </mat-card-actions>
     </mat-card>
   }
 
   @for (project of otherProjects(); track project) {
-    <mat-card class="project-card">
-      <mat-card-header>
+    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full hover:-translate-y-[5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
+      <mat-card-header class="pb-4">
         <mat-card-title>{{ project.title | translate }}</mat-card-title>
       </mat-card-header>
        @if(project.images.length > 0) {
-        <img mat-card-image [src]="project.images[0].url" [alt]="project.title | translate">
+        <img mat-card-image class="w-full h-[clamp(150px,25vw,250px)] object-cover" [src]="project.images[0].url" [alt]="project.title | translate">
       } @else {
-        <div class="icon-container">
-          <mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
+        <div class="flex justify-center items-center h-[clamp(150px,20vw,200px)] bg-[#f0f0f0]">
+          <mat-icon class="text-[clamp(3rem,8vw,4rem)] w-[clamp(3rem,8vw,4rem)] h-[clamp(3rem,8vw,4rem)] text-[#666]">{{ project.icon }}</mat-icon>
         </div>
       }
-      <mat-card-content>
+      <mat-card-content class="grow pt-4 pb-4">
         <p>{{ project.shortDescription | translate }}</p>
-        <mat-chip-set aria-label="Technologies">
+        <mat-chip-set class="pt-fluid-sm" aria-label="Technologies">
           @for(tech of project.technologies; track tech) {
             <mat-chip>{{tech}}</mat-chip>
           }
         </mat-chip-set>
       </mat-card-content>
-      <mat-card-actions>
+      <mat-card-actions class="mt-auto">
         <button mat-button (click)="openProjectDialog(project)">{{ 'PROJECTS.READ_MORE' | translate }}</button>
       </mat-card-actions>
     </mat-card>
diff --git a/src/app/shared/components/generic-grid/generic-grid.html b/src/app/shared/components/generic-grid/generic-grid.html
index 4b1d74e..93804b1 100644
--- a/src/app/shared/components/generic-grid/generic-grid.html
+++ b/src/app/shared/components/generic-grid/generic-grid.html
@@ -1,3 +1,5 @@
-<div class="canvas-container">
-  <canvas #gridCanvas></canvas>
+<div class="flex justify-center items-center w-full max-w-[1000px] mx-auto">
+  <canvas #gridCanvas
+          class="block w-full h-auto aspect-square min-w-[200px] max-w-[1000px] touch-none rounded-[clamp(10px,2vw,20px)] outline-none">
+  </canvas>
 </div>
diff --git a/src/app/shared/components/particles-background/particles-background.component.scss b/src/app/shared/components/particles-background/particles-background.component.scss
index 2f4354d..b429a16 100644
--- a/src/app/shared/components/particles-background/particles-background.component.scss
+++ b/src/app/shared/components/particles-background/particles-background.component.scss
@@ -7,9 +7,3 @@
   z-index: -1;
   pointer-events: none;
 }
-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-width: 0;
-}
diff --git a/src/app/shared/components/render-canvas/babylon-canvas.component.html b/src/app/shared/components/render-canvas/babylon-canvas.component.html
index ea533fa..51cf30f 100644
--- a/src/app/shared/components/render-canvas/babylon-canvas.component.html
+++ b/src/app/shared/components/render-canvas/babylon-canvas.component.html
@@ -1,3 +1,5 @@
-<div class="canvas-container">
-  <canvas #renderCanvas></canvas>
+<div class="flex justify-center items-center w-full max-w-[1000px] mx-auto">
+  <canvas #renderCanvas
+          class="block w-full h-auto aspect-square min-w-[200px] max-w-[1000px] touch-none rounded-[clamp(10px,2vw,20px)] outline-none">
+  </canvas>
 </div>
diff --git a/src/index.html b/src/index.html
index cf4b896..b166ecf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,6 +11,6 @@
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" rel="stylesheet">
 </head>
 <body>
-  <app-root></app-root>
+  <app-root class="flex flex-col min-h-screen"></app-root>
 </body>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
index 7196338..2262c34 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -13,13 +13,11 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 @include mat.core-theme($light-theme);
 @include mat.all-component-themes($light-theme);
 
-
-// Dark-Mode
 .dark {
   @include mat.all-component-colors($dark-theme);
 }
 
-/* ---- Custom variables ---- */
+/* ---- Custom variables (bridge Material tokens to CSS vars for Tailwind) ---- */
 :root {
   --app-maxWidth: 1200px;
   --app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
@@ -38,7 +36,7 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 }
 
 .dark {
-  --app-bg: #{mat.get-theme-color($dark-theme,surface-variant)};
+  --app-bg: #{mat.get-theme-color($dark-theme, surface-variant)};
   --app-fg: #{mat.get-theme-color($dark-theme, on-surface)};
   --app-card-background: #313131;
   --app-logo-bg: #313131;
@@ -50,37 +48,7 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
   --link-color-hover: #9ad2ff;
 }
 
-.dark body {
-  background: radial-gradient(ellipse at 50% 0%, #1e2530 0%, #1a1a1a 65%);
-}
-
-/* ---- global background and tests ---- */
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: Inter, Roboto, Arial, sans-serif;
-  background-color: var(--app-bg);
-  color: var(--app-fg);
-  transition: background-color 220ms ease, color 220ms ease;
-}
-
-.material-symbols-outlined {
-  font-variation-settings:
-    "FILL" 0,
-    /* 0 oder 1 */
-    "wght" 400,
-    /* 100..700 */
-    "GRAD" 0,
-    /* -50..200 */
-    "opsz" 24;
-  /* 20..48 */
-}
-
-/* smooth transition between theme change */
+/* ---- Material component theme transitions ---- */
 .mat-toolbar,
 .mat-mdc-card,
 .mat-sidenav,
@@ -97,37 +65,14 @@ body {
     fill 220ms ease;
 }
 
-/* links */
-a {
-  color: var(--link-color);
-  text-decoration: none;
-  font-weight: 500;
-
-  &:hover {
-    color: var(--link-color-hover);
-    text-decoration: underline;
-  }
-}
-
-/* cards */
+/* ---- Material card overrides ---- */
 .mat-mdc-card {
   position: relative;
   border-radius: var(--card-radius) !important;
   background: var(--card-bg) !important;
-  box-shadow: var(--card-shadow-outer);
   overflow: hidden;
-
   border: none;
-
-  transition:
-    box-shadow 200ms ease,
-    transform 200ms ease;
-
-  &.algo-container {
-    width: 100%;
-    max-width: 1920px;
-    padding: 20px;
-  }
+  transition: box-shadow 200ms ease, transform 200ms ease;
 }
 
 .mat-mdc-card::before {
@@ -136,22 +81,12 @@ a {
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
-
   box-shadow:
     inset 0 1px 0 var(--card-border-inset),
     inset 0 -1px 0 var(--card-border-inset-dark);
 }
 
-.mat-mdc-card::after {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-/* accordion */
-/* expansion panels like cards */
+/* ---- Material accordion/expansion panel overrides ---- */
 .mat-accordion {
   display: grid;
   gap: 8px;
@@ -161,31 +96,20 @@ a {
   border-radius: var(--card-radius) !important;
   background: var(--card-bg) !important;
   overflow: hidden;
-  /* ok */
   border: none !important;
 }
 
-
 .mat-accordion .mat-expansion-panel::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
-
   box-shadow:
     inset 0 1px 0 var(--card-border-inset),
     inset 0 -1px 0 var(--card-border-inset-dark);
 }
 
-.mat-accordion .mat-expansion-panel::after {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  border-radius: inherit;
-  pointer-events: none;
-}
-
 .mat-expansion-panel-header {
   background: transparent !important;
 }
@@ -194,6 +118,7 @@ a {
   padding-top: 0;
 }
 
+/* ---- Material dialog overrides ---- */
 .image-dialog-panel .mat-mdc-dialog-surface {
   border-radius: 16px;
   overflow: hidden;
@@ -210,251 +135,7 @@ a {
   padding: 0;
 }
 
-.link-row {
-  grid-row: 2;
-  grid-column: 2;
-  margin-top: .1rem;
-  opacity: .85;
-  vertical-align: center;
-}
-
-.link-with-icon {
-  display: inline-flex;
-  align-items: center;
-  gap: .35rem;
-  line-height: 1;
-}
-
-.link-with-icon mat-icon {
-  font-size: 18px;
-  height: 18px;
-  width: 18px;
-}
-
-// algos
-
-.algo-container {
-  max-width: var(--app-maxWidth);
-  gap: clamp(1rem, 3vw, 1.5rem);
-  margin-right: 1rem;
-  margin-left: 0.5rem;
-  margin-top: auto;
-}
-
-.algo-info {
-  margin: 0 0 1rem 0;
-  padding: 0.75rem 1rem;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-
-  h3 {
-    margin: 0 0 0.5rem 0;
-  }
-
-  p {
-    margin: 0.5rem 0;
-  }
-
-  a {
-    margin-left: 0.25rem;
-  }
-}
-
-.controls-panel {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-top: 10px;
-  font-size: 0.9em;
-
-  mat-button-toggle-group {
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  mat-form-field {
-    width: 200px;
-  }
-}
-
-.input-container {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-  flex-wrap: wrap;
-
-  .input-field {
-    width: 150px;
-  }
-}
-
-canvas {
-  border: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 auto;
-  max-width: 100%;
-}
-
-.dark canvas {
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
-}
-
-.legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  align-items: center;
-  font-size: 0.9em;
-
-  .legend-color {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    border: 1px solid lightgray;
-    vertical-align: middle;
-    margin-right: 5px;
-
-    &.start {
-      background-color: green;
-    }
-
-    &.end {
-      background-color: red;
-    }
-
-    &.wall {
-      background-color: black;
-    }
-
-    &.visited {
-      background-color: skyblue;
-    }
-
-    &.path {
-      background-color: gold;
-    }
-
-    &.empty {
-      background-color: lightgray;
-    }
-
-    &.alive {
-      background-color: black;
-    }
-
-    &.L1 {
-      background-color: yellow;
-    }
-
-    &.L2 {
-      background-color: magenta;
-    }
-
-    &.M1 {
-      background-color: red;
-    }
-
-    &.M2 {
-      background-color: green;
-    }
-
-    &.color1 {
-      background-color: #FF5252;
-    }
-
-    &.color2 {
-      background-color: #448AFF;
-    }
-
-    &.color3 {
-      background-color: #4CAF50;
-    }
-
-    &.color4 {
-      background-color: #FFEB3B;
-    }
-  }
-}
-
-.controls-container {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-}
-
-/* Sorting Visualization & Canvas */
-.sorting-visualization-area,
-.visualization-area {
-  display: flex;
-  align-items: flex-end;
-  height: clamp(200px, 40vh, 400px);
-  border-bottom: 1px solid var(--app-fg);
-  margin-bottom: clamp(10px, 3vw, 20px);
-  gap: 1px;
-  background-color: var(--card-bg);
-
-  .sorting-bar,
-  .bar {
-    flex-grow: 1;
-    background-color: #424242;
-    transition: height 0.05s ease-in-out, background-color 0.05s ease-in-out;
-    width: 10px;
-    min-width: 1px;
-
-    &.unsorted {
-      background-color: #424242;
-    }
-
-    &.comparing {
-      background-color: #ffeb3b;
-    }
-
-    &.sorted {
-      background-color: #4caf50;
-    }
-  }
-}
-
-/* ---- Modern Layouts & Typography (Grid, Flex, Clamp) ---- */
-
-.layout-container {
-  width: 100%;
-  max-width: var(--app-maxWidth);
-  margin: 0 auto;
-  padding: clamp(1rem, 4vw, 2rem);
-}
-
-app-root {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.app-container {
-  width: 100%;
-  max-width: var(--app-maxWidth);
-  margin: 1rem auto;
-
-}
-
-.app-surface {
-  flex-grow: 1;
-  color: var(--app-fg);
-  transition: background-color 220ms ease, color 220ms ease;
-}
-
-.foot {
-  border-top: 1px solid rgba(0, 0, 0, .08);
-  padding: clamp(1rem, 2vw, 1.5rem);
-  text-align: center;
-  opacity: .8;
-  background: var(--app-bg);
-}
-
-/* ---- Menu Overrides ---- */
+/* ---- Material menu overrides ---- */
 .mat-mdc-menu-item .mdc-list-item__primary-text {
   display: flex;
   align-items: center;
@@ -493,358 +174,7 @@ app-root {
   border-color: rgba(255, 255, 255, .06);
 }
 
-/* ---- About Page Sections ---- */
-.about,
-.imprint {
-  display: grid;
-  gap: clamp(1rem, 3vw, 1.5rem);
-  max-width: var(--app-maxWidth);
-  margin-right: 1rem;
-  margin-left: 1rem;
-  margin-top: auto;
-}
-
-.hero {
-  border-radius: var(--card-radius);
-  background: var(--card-bg);
-  overflow: hidden;
-}
-
-.hero-flex-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: clamp(1rem, 4vw, 2rem);
-  padding: clamp(1rem, 3vw, 1.5rem);
-  align-items: flex-start;
-
-  .photo {
-    flex: 1 1 min(100%, 425px);
-    max-width: 100%;
-    display: flex;
-    justify-content: center;
-
-    img {
-      display: block;
-      width: 100%;
-      height: auto;
-      max-width: 425px;
-      border-radius: 12px;
-      box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
-      object-fit: cover;
-    }
-  }
-
-  .intro {
-    flex: 999 1 min(100%, 400px);
-  }
-}
-
-.hero .intro h1 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  font-size: clamp(1.5rem, 5vw, 2.5rem);
-  background: linear-gradient(135deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
-  background-clip: text;
-}
-
-.hero .intro .lead {
-  opacity: .9;
-  margin: 0.5rem 0 1rem;
-  font-size: clamp(1rem, 2.5vw, 1.15rem);
-}
-
-.hero .intro .meta {
-  display: flex;
-  flex-direction: column;
-  gap: .25rem;
-  margin-bottom: 0.5rem;
-}
-
-.hero .intro .meta .row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: .4rem;
-}
-
-.hero .intro .actions {
-  display: flex;
-  gap: .5rem;
-  flex-wrap: wrap;
-  margin-top: .5rem;
-}
-
-.skills,
-.experience,
-.projects,
-.education {
-  padding: clamp(5px, 2vw, 15px);
-}
-
-.skills h2,
-.experience h2,
-.projects h2,
-.education h2 {
-  margin-top: .25rem;
-  margin-left: .25rem;
-  font-size: clamp(1.2rem, 4vw, 1.8rem);
-}
-
-.skills .chip-groups {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
-  gap: clamp(0.5rem, 2vw, 1rem);
-  margin-left: .25rem;
-  margin-bottom: .5rem;
-}
-
-.skills .chip-groups h3 {
-  margin: .2rem 0 .4rem;
-  font-size: .95rem;
-  opacity: .85;
-}
-
-.xp-list {
-  margin-left: .25rem;
-  display: grid;
-  gap: clamp(0.75rem, 2vw, 1rem);
-}
-
-.xp-item .xp-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: .5rem;
-}
-
-.xp-item .xp-head .time {
-  opacity: .75;
-  font-size: clamp(0.85rem, 2vw, 0.95rem);
-}
-
-.xp-item .xp-sub {
-  opacity: .9;
-  margin-bottom: .25rem;
-}
-
-.xp-item ul {
-  margin: .25rem 0 .5rem 1.15rem;
-}
-
-.xp-head-grid {
-  display: grid;
-  grid-template-columns: calc(clamp(32px, 8vw, 48px) + .75rem) 1fr;
-  grid-template-rows: auto auto;
-  column-gap: clamp(0.5rem, 2vw, .75rem);
-}
-
-.logo-wrap {
-  grid-row: 1 / span 2;
-  grid-column: 1;
-  display: flex;
-  align-items: center;
-}
-
-.company-logo {
-  width: clamp(32px, 8vw, 48px);
-  height: clamp(32px, 8vw, 48px);
-  object-fit: contain;
-  opacity: .9;
-  border-radius: 10%;
-  background-color: var(--app-logo-bg);
-}
-
-.head-row {
-  grid-row: 1;
-  grid-column: 2;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: clamp(0.25rem, 1vw, 0.5rem) 1rem;
-}
-
-.head-row strong {
-  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
-}
-
-.head-row .time {
-  opacity: .75;
-  font-size: clamp(0.85rem, 2vw, 0.95rem);
-}
-
-.company-row {
-  grid-row: 2;
-  grid-column: 2;
-  margin-top: .1rem;
-  opacity: .85;
-  font-size: clamp(0.85rem, 2vw, 1rem);
-}
-
-.highlights {
-  margin-top: .4rem;
-  margin-left: clamp(0.25rem, 1vw, .75rem);
-  padding-left: clamp(0.8rem, 2vw, 1.2rem);
-}
-
-.highlights li,
-.highlights-noMargin li {
-  margin: .2rem 0;
-  font-size: clamp(0.9rem, 2vw, 1rem);
-}
-
-/* ---- Imprint ---- */
-.imprint-card {
-  padding: clamp(1rem, 3vw, 1.5rem);
-}
-
-.imprint-title {
-  margin: 0 0 1rem;
-  font-size: clamp(1rem, 3vw, 1.2rem);
-  font-weight: 600;
-}
-
-.imprint-section {
-  display: grid;
-  gap: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.imprint-label {
-  font-size: 0.75rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  opacity: 0.7;
-  margin: 0;
-}
-
-/* ---- Projects Page & Dialog ---- */
-.card-grid {
-  display: grid;
-  gap: clamp(1rem, 3vw, 1.5rem);
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
-  max-width: var(--app-maxWidth);
-  margin-right: 1rem;
-  margin-left: 1rem;
-  margin-top: auto;
-}
-
-.algo-card {
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  }
-}
-
-.algo-card::after, .project-card::after {
-  inset: unset;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
-  border-radius: var(--card-radius) var(--card-radius) 0 0;
-}
-
-.algo-icon-wrap {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in oklab, var(--mat-sys-primary) 15%, transparent);
-  color: var(--mat-sys-primary);
-  margin-bottom: 1rem;
-
-  mat-icon {
-    font-size: 26px;
-    width: 26px;
-    height: 26px;
-  }
-}
-
-.algo-page-title {
-  margin: 0 0 0.5rem 0;
-  font-size: clamp(1.4rem, 4vw, 2rem);
-}
-
-.algo-card-title {
-  font-size: 1.05rem;
-  font-weight: 600;
-  margin: 0 0 0.5rem 0;
-}
-
-.algo-card-desc {
-  margin: 0;
-  opacity: 0.75;
-  font-size: 0.9rem;
-  line-height: 1.55;
-}
-
-.project-card {
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.project-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.project-card.featured {
-  grid-column: 1 / -1;
-}
-
-.project-card mat-card-header {
-  padding-bottom: 1rem;
-}
-
-.project-card mat-card-content {
-  flex-grow: 1;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.project-card mat-chip-set {
-  padding-top: clamp(0.5rem, 2vw, 1rem);
-}
-
-.project-card mat-card-actions {
-  margin-top: auto;
-}
-
-.icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: clamp(150px, 20vw, 200px);
-  background-color: #f0f0f0;
-}
-
-.fallback-icon {
-  font-size: clamp(3rem, 8vw, 4rem);
-  width: clamp(3rem, 8vw, 4rem);
-  height: clamp(3rem, 8vw, 4rem);
-  color: #666;
-}
-
-img[mat-card-image] {
-  width: 100%;
-  height: clamp(150px, 25vw, 250px);
-  object-fit: cover;
-}
-
-.my-swiper {
-  border-radius: 12px;
-}
-
+/* ---- Swiper shadow DOM (::part cannot be Tailwind) ---- */
 .my-swiper::part(button-prev),
 .my-swiper::part(button-next) {
   width: 35px;
@@ -866,101 +196,3 @@ img[mat-card-image] {
 .my-swiper::part(pagination) {
   bottom: 12px;
 }
-
-swiper-slide {
-  border-radius: 12px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background-color: #222;
-}
-
-.slide-img {
-  width: 100%;
-  height: auto;
-  max-height: clamp(300px, 60vh, 512px) !important;
-  object-fit: contain;
-  display: block;
-  flex-shrink: 0;
-}
-
-.slide-source {
-  font-size: 0.75rem;
-  color: #aaa;
-  background: #2a2a2a;
-  padding: 0.5rem;
-  text-align: right;
-  border-top: 1px solid #444;
-}
-
-.link-section {
-  display: flex;
-  gap: clamp(0.5rem, 2vw, 1rem);
-  margin-top: 1.5rem;
-  flex-wrap: wrap;
-}
-
-/* ---- Shared Elements ---- */
-.canvas-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.canvas-container canvas {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 1 / 1;
-  min-width: 200px;
-  max-width: 1000px;
-  touch-action: none;
-  border: none;
-  border-radius: clamp(10px, 2vw, 20px);
-  outline: none;
-}
-
-.category-cards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: clamp(0.5rem, 2vw, 1rem);
-  margin-top: clamp(1rem, 3vw, 2rem);
-}
-
-.category-cards mat-card {
-  cursor: pointer;
-  flex: 1 1 300px;
-  min-width: 300px;
-  max-width: 450px;
-}
-
-.category-cards mat-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.sorting-card {
-  width: 100%;
-  max-width: 1920px;
-  padding: clamp(10px, 3vw, 20px);
-}
-
-.sorting-card .controls-panel {
-  display: flex;
-  gap: clamp(5px, 2vw, 10px);
-  margin-bottom: clamp(10px, 3vw, 20px);
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.sorting-card .controls-panel mat-form-field {
-  width: clamp(150px, 20vw, 200px);
-}
-
-.sorting-card .info-panel {
-  margin-top: 10px;
-  font-size: 0.9em;
-}
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 0000000..c670509
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,67 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-width: 0;
+    border-style: solid;
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    font-family: Inter, Roboto, Arial, sans-serif;
+    background-color: var(--app-bg);
+    color: var(--app-fg);
+    transition: background-color 220ms ease, color 220ms ease;
+  }
+
+  a {
+    @apply text-link no-underline font-medium hover:text-link-hover hover:underline;
+  }
+
+  .material-symbols-outlined {
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+  }
+
+  .dark body {
+    background: radial-gradient(ellipse at 50% 0%, #1e2530 0%, #1a1a1a 65%);
+  }
+
+  canvas {
+    @apply border-none block mx-auto max-w-full;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  }
+
+  .dark canvas {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  }
+}
+
+@layer components {
+  .legend-swatch {
+    @apply inline-block w-[15px] h-[15px] border border-gray-300 align-middle mr-[5px];
+  }
+
+  .card-gradient-bar {
+    @apply relative;
+  }
+
+  .card-gradient-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
+    border-radius: var(--card-radius) var(--card-radius) 0 0;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..b899d5f
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,37 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,ts}'],
+  darkMode: 'class',
+  corePlugins: { preflight: false },
+  theme: {
+    extend: {
+      colors: {
+        'app-bg': 'var(--app-bg)',
+        'app-fg': 'var(--app-fg)',
+        'card-bg': 'var(--card-bg)',
+        'link': 'var(--link-color)',
+        'link-hover': 'var(--link-color-hover)',
+        'logo-bg': 'var(--app-logo-bg)',
+      },
+      maxWidth: {
+        'app': 'var(--app-maxWidth)',
+      },
+      borderRadius: {
+        'card': 'var(--card-radius)',
+      },
+      fontFamily: {
+        'sans': ['Inter', 'Roboto', 'Arial', 'sans-serif'],
+      },
+      spacing: {
+        'fluid-sm': 'clamp(0.5rem, 2vw, 1rem)',
+        'fluid-md': 'clamp(1rem, 3vw, 1.5rem)',
+        'fluid-lg': 'clamp(1rem, 4vw, 2rem)',
+      },
+      screens: {
+        'mobile': { 'max': '760px' },
+        'sm-dialog': { 'max': '600px' },
+        'tablet': { 'max': '900px' },
+      },
+    },
+  },
+};