From 5b16d988f5fa25299f1355700bd8520206a13c7d Mon Sep 17 00:00:00 2001
From: Sabrina Hennrich <sabrina@digimedialoop.de>
Date: Tue, 3 Jun 2025 09:18:45 +0200
Subject: [PATCH] new Routing

---
 app.vue                                |  10 +-
 assets/images/DML_Logo.svg             |   5 +
 components/Accordion.vue               |  23 ++
 components/BackToTopBtn.vue            |   4 +-
 components/CallToActionBox.vue         |   2 +-
 components/ContactForm.vue             |  32 +--
 components/HeroBox.vue                 |  95 ++++++-
 components/LanguageBox.vue             |   2 +-
 components/PageContent.vue             |   6 +-
 components/Recommendations.vue         |   6 +-
 components/SchemaCoder.vue             | 180 +++++++++++++
 components/SideBarNaviSlider.vue       |   5 +-
 components/template/PageHeader.vue     | 227 ++++++++++++++---
 composables/useI18nPages.ts            |   3 +-
 i18n/i18n-pages.ts                     |  98 +++----
 i18n/locales/de.json                   |  67 ++++-
 layouts/default.vue                    |  34 ++-
 pages/{artikel => article}/[link].vue  |   9 +-
 pages/designer/index.vue               |  23 +-
 pages/index.vue                        |   7 +
 pages/magazin/index.vue                |  13 +-
 pages/{projekt => project}/[link].vue  |  19 +-
 pages/references/index.vue             |  20 +-
 pages/services/accessibility/index.vue | 100 +++++++-
 pages/services/ai/index.vue            | 173 +++++++++++++
 pages/services/cms/index.vue           |  32 +++
 pages/services/index.vue               | 339 +++++++++++++------------
 pages/services/seo/index.vue           |   6 +-
 pages/webagency/index.vue              |   6 +-
 stores/main.ts                         |   8 +
 30 files changed, 1213 insertions(+), 341 deletions(-)
 create mode 100644 assets/images/DML_Logo.svg
 create mode 100644 components/SchemaCoder.vue
 rename pages/{artikel => article}/[link].vue (97%)
 rename pages/{projekt => project}/[link].vue (98%)
 create mode 100644 pages/services/ai/index.vue
 create mode 100644 pages/services/cms/index.vue

diff --git a/app.vue b/app.vue
index a27016a..8396a8a 100644
--- a/app.vue
+++ b/app.vue
@@ -7,8 +7,16 @@
 <script setup>
 import { onMounted, onBeforeUnmount } from 'vue'
 import { useMainStore } from '@/stores/main'
-
+import { useRouter } from 'vue-router'
 const mainStore = useMainStore()
+const router = useRouter()
+
+router.beforeEach((to, from, next) => {
+  mainStore.setDarkHeroBack(false)
+  next()
+})
+
+
 
 // Scroll- und Resize-Listener in den Lifecycle-Hooks registrieren
 onMounted(() => {
diff --git a/assets/images/DML_Logo.svg b/assets/images/DML_Logo.svg
new file mode 100644
index 0000000..550966a
--- /dev/null
+++ b/assets/images/DML_Logo.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 499.34 136.563">
+        <path id="dml" fill="rgb(55,55,55)" d=" M 16.155 85.5 L 16.155 85.5 L 16.155 85.5 Q 11.564 85.5 7.903 83.379 L 7.903 83.379 L 7.903 83.379 Q 4.242 81.258 2.121 77.597 L 2.121 77.597 L 2.121 77.597 Q 0 73.936 0 69.287 L 0 69.287 L 0 69.287 Q 0 64.696 2.063 61.035 L 2.063 61.035 L 2.063 61.035 Q 4.126 57.374 7.67 55.253 L 7.67 55.253 L 7.67 55.253 Q 11.215 53.132 15.69 53.132 L 15.69 53.132 L 15.69 53.132 Q 19.583 53.132 22.722 54.788 L 22.722 54.788 L 22.722 54.788 Q 25.859 56.444 27.777 59.176 L 27.777 59.176 L 27.777 42.091 L 27.777 42.091 Q 27.777 41.045 28.416 40.434 L 28.416 40.434 L 28.416 40.434 Q 29.056 39.825 30.043 39.825 L 30.043 39.825 L 30.043 39.825 Q 31.031 39.825 31.671 40.434 L 31.671 40.434 L 31.671 40.434 Q 32.31 41.045 32.31 42.091 L 32.31 42.091 L 32.31 69.519 L 32.31 69.519 Q 32.194 74.052 30.073 77.684 L 30.073 77.684 L 30.073 77.684 Q 27.952 81.316 24.319 83.408 L 24.319 83.408 L 24.319 83.408 Q 20.688 85.5 16.155 85.5 Z  M 16.155 81.432 L 16.155 81.432 L 16.155 81.432 Q 19.525 81.432 22.17 79.834 L 22.17 79.834 L 22.17 79.834 Q 24.813 78.236 26.353 75.505 L 26.353 75.505 L 26.353 75.505 Q 27.894 72.774 27.894 69.287 L 27.894 69.287 L 27.894 69.287 Q 27.894 65.859 26.353 63.098 L 26.353 63.098 L 26.353 63.098 Q 24.813 60.338 22.17 58.769 L 22.17 58.769 L 22.17 58.769 Q 19.525 57.2 16.155 57.2 L 16.155 57.2 L 16.155 57.2 Q 12.843 57.2 10.17 58.769 L 10.17 58.769 L 10.17 58.769 Q 7.497 60.338 5.927 63.098 L 5.927 63.098 L 5.927 63.098 Q 4.358 65.859 4.358 69.287 L 4.358 69.287 L 4.358 69.287 Q 4.358 72.774 5.927 75.505 L 5.927 75.505 L 5.927 75.505 Q 7.497 78.236 10.17 79.834 L 10.17 79.834 L 10.17 79.834 Q 12.843 81.432 16.155 81.432 Z  M 45.966 85.21 L 45.966 85.21 L 45.966 85.21 Q 44.92 85.21 44.31 84.599 L 44.31 84.599 L 44.31 84.599 Q 43.7 83.989 43.7 82.943 L 43.7 82.943 L 43.7 55.689 L 43.7 55.689 Q 43.7 54.643 44.31 54.033 L 44.31 54.033 L 44.31 54.033 Q 44.92 53.422 45.966 53.422 L 45.966 53.422 L 45.966 53.422 Q 46.954 53.422 47.564 54.033 L 47.564 54.033 L 47.564 54.033 Q 48.174 54.643 48.174 55.689 L 48.174 55.689 L 48.174 82.943 L 48.174 82.943 Q 48.174 83.989 47.564 84.599 L 47.564 84.599 L 47.564 84.599 Q 46.954 85.21 45.966 85.21 Z  M 45.908 47.379 L 45.908 47.379 L 45.908 47.379 Q 44.629 47.379 43.7 46.449 L 43.7 46.449 L 43.7 46.449 Q 42.77 45.519 42.77 44.183 L 42.77 44.183 L 42.77 44.183 Q 42.77 42.73 43.729 41.888 L 43.729 41.888 L 43.729 41.888 Q 44.688 41.045 45.966 41.045 L 45.966 41.045 L 45.966 41.045 Q 47.186 41.045 48.145 41.888 L 48.145 41.888 L 48.145 41.888 Q 49.104 42.73 49.104 44.183 L 49.104 44.183 L 49.104 44.183 Q 49.104 45.519 48.174 46.449 L 48.174 46.449 L 48.174 46.449 Q 47.244 47.379 45.908 47.379 Z  M 73.569 85.5 L 73.569 85.5 L 73.569 85.5 Q 68.978 85.5 65.433 83.437 L 65.433 83.437 L 65.433 83.437 Q 61.889 81.374 59.884 77.713 L 59.884 77.713 L 59.884 77.713 Q 57.879 74.052 57.879 69.345 L 57.879 69.345 L 57.879 69.345 Q 57.879 64.58 59.971 60.919 L 59.971 60.919 L 59.971 60.919 Q 62.063 57.258 65.724 55.195 L 65.724 55.195 L 65.724 55.195 Q 69.385 53.132 74.034 53.132 L 74.034 53.132 L 74.034 53.132 Q 78.741 53.132 82.372 55.195 L 82.372 55.195 L 82.372 55.195 Q 86.005 57.258 88.068 60.919 L 88.068 60.919 L 88.068 60.919 Q 90.13 64.58 90.189 69.345 L 90.189 69.345 L 87.574 70.74 L 87.574 70.74 Q 87.574 75.04 85.772 78.381 L 85.772 78.381 L 85.772 78.381 Q 83.971 81.723 80.804 83.611 L 80.804 83.611 L 80.804 83.611 Q 77.636 85.5 73.569 85.5 Z  M 74.15 97.762 L 74.15 97.762 L 74.15 97.762 Q 69.559 97.762 66.072 96.047 L 66.072 96.047 L 66.072 96.047 Q 62.586 94.333 60.32 91.369 L 60.32 91.369 L 60.32 91.369 Q 59.68 90.672 59.768 89.859 L 59.768 89.859 L 59.768 89.859 Q 59.855 89.045 60.61 88.522 L 60.61 88.522 L 60.61 88.522 Q 61.365 87.999 62.295 88.173 L 62.295 88.173 L 62.295 88.173 Q 63.225 88.347 63.748 89.045 L 63.748 89.045 L 63.748 89.045 Q 65.433 91.137 68.077 92.415 L 68.077 92.415 L 68.077 92.415 Q 70.721 93.693 74.208 93.693 L 74.208 93.693 L 74.208 93.693 Q 77.462 93.693 80.078 92.125 L 80.078 92.125 L 80.078 92.125 Q 82.693 90.556 84.232 87.708 L 84.232 87.708 L 84.232 87.708 Q 85.772 84.861 85.772 81.026 L 85.772 81.026 L 85.772 72.192 L 87.457 68.822 L 90.189 69.345 L 90.189 81.2 L 90.189 81.2 Q 90.189 85.907 88.097 89.655 L 88.097 89.655 L 88.097 89.655 Q 86.005 93.403 82.402 95.582 L 82.402 95.582 L 82.402 95.582 Q 78.799 97.762 74.15 97.762 Z  M 74.034 81.432 L 74.034 81.432 L 74.034 81.432 Q 77.462 81.432 80.106 79.892 L 80.106 79.892 L 80.106 79.892 Q 82.751 78.353 84.261 75.621 L 84.261 75.621 L 84.261 75.621 Q 85.772 72.89 85.772 69.345 L 85.772 69.345 L 85.772 69.345 Q 85.772 65.801 84.261 63.04 L 84.261 63.04 L 84.261 63.04 Q 82.751 60.28 80.106 58.74 L 80.106 58.74 L 80.106 58.74 Q 77.462 57.2 74.034 57.2 L 74.034 57.2 L 74.034 57.2 Q 70.605 57.2 67.932 58.74 L 67.932 58.74 L 67.932 58.74 Q 65.259 60.28 63.748 63.04 L 63.748 63.04 L 63.748 63.04 Q 62.237 65.801 62.237 69.345 L 62.237 69.345 L 62.237 69.345 Q 62.237 72.89 63.748 75.621 L 63.748 75.621 L 63.748 75.621 Q 65.259 78.353 67.932 79.892 L 67.932 79.892 L 67.932 79.892 Q 70.605 81.432 74.034 81.432 Z  M 102.102 85.21 L 102.102 85.21 L 102.102 85.21 Q 101.055 85.21 100.445 84.599 L 100.445 84.599 L 100.445 84.599 Q 99.835 83.989 99.835 82.943 L 99.835 82.943 L 99.835 55.689 L 99.835 55.689 Q 99.835 54.643 100.445 54.033 L 100.445 54.033 L 100.445 54.033 Q 101.055 53.422 102.102 53.422 L 102.102 53.422 L 102.102 53.422 Q 103.09 53.422 103.7 54.033 L 103.7 54.033 L 103.7 54.033 Q 104.309 54.643 104.309 55.689 L 104.309 55.689 L 104.309 82.943 L 104.309 82.943 Q 104.309 83.989 103.7 84.599 L 103.7 84.599 L 103.7 84.599 Q 103.09 85.21 102.102 85.21 Z  M 102.043 47.379 L 102.043 47.379 L 102.043 47.379 Q 100.765 47.379 99.835 46.449 L 99.835 46.449 L 99.835 46.449 Q 98.906 45.519 98.906 44.183 L 98.906 44.183 L 98.906 44.183 Q 98.906 42.73 99.864 41.888 L 99.864 41.888 L 99.864 41.888 Q 100.823 41.045 102.102 41.045 L 102.102 41.045 L 102.102 41.045 Q 103.322 41.045 104.281 41.888 L 104.281 41.888 L 104.281 41.888 Q 105.239 42.73 105.239 44.183 L 105.239 44.183 L 105.239 44.183 Q 105.239 45.519 104.309 46.449 L 104.309 46.449 L 104.309 46.449 Q 103.38 47.379 102.043 47.379 Z  M 158.644 85.21 L 158.644 85.21 L 158.644 85.21 Q 157.656 85.21 157.017 84.599 L 157.017 84.599 L 157.017 84.599 Q 156.377 83.989 156.377 83.001 L 156.377 83.001 L 156.377 66.265 L 156.377 66.265 Q 156.377 62.14 154.228 59.728 L 154.228 59.728 L 154.228 59.728 Q 152.077 57.316 148.707 57.316 L 148.707 57.316 L 148.707 57.316 Q 145.104 57.316 142.808 59.728 L 142.808 59.728 L 142.808 59.728 Q 140.513 62.14 140.571 66.149 L 140.571 66.149 L 136.561 66.149 L 136.561 66.149 Q 136.619 62.256 138.247 59.292 L 138.247 59.292 L 138.247 59.292 Q 139.874 56.328 142.722 54.701 L 142.722 54.701 L 142.722 54.701 Q 145.569 53.074 149.171 53.074 L 149.171 53.074 L 149.171 53.074 Q 152.601 53.074 155.244 54.701 L 155.244 54.701 L 155.244 54.701 Q 157.889 56.328 159.37 59.292 L 159.37 59.292 L 159.37 59.292 Q 160.852 62.256 160.852 66.265 L 160.852 66.265 L 160.852 83.001 L 160.852 83.001 Q 160.852 83.989 160.242 84.599 L 160.242 84.599 L 160.242 84.599 Q 159.632 85.21 158.644 85.21 Z  M 117.966 85.21 L 117.966 85.21 L 117.966 85.21 Q 116.92 85.21 116.31 84.599 L 116.31 84.599 L 116.31 84.599 Q 115.7 83.989 115.7 83.001 L 115.7 83.001 L 115.7 55.689 L 115.7 55.689 Q 115.7 54.701 116.31 54.062 L 116.31 54.062 L 116.31 54.062 Q 116.92 53.422 117.966 53.422 L 117.966 53.422 L 117.966 53.422 Q 118.954 53.422 119.564 54.062 L 119.564 54.062 L 119.564 54.062 Q 120.174 54.701 120.174 55.689 L 120.174 55.689 L 120.174 83.001 L 120.174 83.001 Q 120.174 83.989 119.564 84.599 L 119.564 84.599 L 119.564 84.599 Q 118.954 85.21 117.966 85.21 Z  M 138.363 85.21 L 138.363 85.21 L 138.363 85.21 Q 137.375 85.21 136.736 84.599 L 136.736 84.599 L 136.736 84.599 Q 136.097 83.989 136.097 83.001 L 136.097 83.001 L 136.097 66.265 L 136.097 66.265 Q 136.097 62.14 133.946 59.728 L 133.946 59.728 L 133.946 59.728 Q 131.797 57.316 128.426 57.316 L 128.426 57.316 L 128.426 57.316 Q 124.823 57.316 122.498 59.67 L 122.498 59.67 L 122.498 59.67 Q 120.174 62.023 120.174 65.801 L 120.174 65.801 L 116.978 65.801 L 116.978 65.801 Q 117.094 62.081 118.634 59.204 L 118.634 59.204 L 118.634 59.204 Q 120.174 56.328 122.847 54.701 L 122.847 54.701 L 122.847 54.701 Q 125.521 53.074 128.891 53.074 L 128.891 53.074 L 128.891 53.074 Q 132.319 53.074 134.964 54.701 L 134.964 54.701 L 134.964 54.701 Q 137.607 56.328 139.089 59.292 L 139.089 59.292 L 139.089 59.292 Q 140.571 62.256 140.571 66.265 L 140.571 66.265 L 140.571 83.001 L 140.571 83.001 Q 140.571 83.989 139.961 84.599 L 139.961 84.599 L 139.961 84.599 Q 139.351 85.21 138.363 85.21 Z  M 185.142 85.5 L 185.142 85.5 L 185.142 85.5 Q 180.435 85.5 176.804 83.437 L 176.804 83.437 L 176.804 83.437 Q 173.172 81.374 171.108 77.713 L 171.108 77.713 L 171.108 77.713 Q 169.046 74.052 169.046 69.345 L 169.046 69.345 L 169.046 69.345 Q 169.046 64.58 170.993 60.948 L 170.993 60.948 L 170.993 60.948 Q 172.939 57.316 176.368 55.224 L 176.368 55.224 L 176.368 55.224 Q 179.796 53.132 184.271 53.132 L 184.271 53.132 L 184.271 53.132 Q 188.687 53.132 191.971 55.137 L 191.971 55.137 L 191.971 55.137 Q 195.254 57.142 197.055 60.686 L 197.055 60.686 L 197.055 60.686 Q 198.857 64.231 198.857 68.764 L 198.857 68.764 L 198.857 68.764 Q 198.857 69.694 198.276 70.246 L 198.276 70.246 L 198.276 70.246 Q 197.694 70.798 196.765 70.798 L 196.765 70.798 L 172.068 70.798 L 172.068 67.079 L 197.23 67.079 L 194.731 68.88 L 194.731 68.88 Q 194.789 65.51 193.511 62.837 L 193.511 62.837 L 193.511 62.837 Q 192.232 60.164 189.878 58.653 L 189.878 58.653 L 189.878 58.653 Q 187.525 57.142 184.271 57.142 L 184.271 57.142 L 184.271 57.142 Q 180.959 57.142 178.46 58.711 L 178.46 58.711 L 178.46 58.711 Q 175.961 60.28 174.595 63.04 L 174.595 63.04 L 174.595 63.04 Q 173.23 65.801 173.23 69.345 L 173.23 69.345 L 173.23 69.345 Q 173.23 72.89 174.77 75.621 L 174.77 75.621 L 174.77 75.621 Q 176.31 78.353 178.983 79.921 L 178.983 79.921 L 178.983 79.921 Q 181.656 81.49 185.142 81.49 L 185.142 81.49 L 185.142 81.49 Q 187.235 81.49 189.356 80.764 L 189.356 80.764 L 189.356 80.764 Q 191.477 80.038 192.755 78.934 L 192.755 78.934 L 192.755 78.934 Q 193.394 78.411 194.208 78.381 L 194.208 78.381 L 194.208 78.381 Q 195.021 78.353 195.603 78.817 L 195.603 78.817 L 195.603 78.817 Q 196.358 79.514 196.387 80.328 L 196.387 80.328 L 196.387 80.328 Q 196.416 81.141 195.719 81.723 L 195.719 81.723 L 195.719 81.723 Q 193.801 83.35 190.838 84.425 L 190.838 84.425 L 190.838 84.425 Q 187.874 85.5 185.142 85.5 Z  M 219.719 85.5 L 219.719 85.5 L 219.719 85.5 Q 215.128 85.5 211.467 83.379 L 211.467 83.379 L 211.467 83.379 Q 207.806 81.258 205.685 77.597 L 205.685 77.597 L 205.685 77.597 Q 203.564 73.936 203.564 69.287 L 203.564 69.287 L 203.564 69.287 Q 203.564 64.696 205.627 61.035 L 205.627 61.035 L 205.627 61.035 Q 207.69 57.374 211.234 55.253 L 211.234 55.253 L 211.234 55.253 Q 214.779 53.132 219.254 53.132 L 219.254 53.132 L 219.254 53.132 Q 223.148 53.132 226.285 54.788 L 226.285 54.788 L 226.285 54.788 Q 229.424 56.444 231.341 59.176 L 231.341 59.176 L 231.341 42.091 L 231.341 42.091 Q 231.341 41.045 231.98 40.434 L 231.98 40.434 L 231.98 40.434 Q 232.619 39.825 233.607 39.825 L 233.607 39.825 L 233.607 39.825 Q 234.595 39.825 235.234 40.434 L 235.234 40.434 L 235.234 40.434 Q 235.874 41.045 235.874 42.091 L 235.874 42.091 L 235.874 69.519 L 235.874 69.519 Q 235.758 74.052 233.637 77.684 L 233.637 77.684 L 233.637 77.684 Q 231.515 81.316 227.883 83.408 L 227.883 83.408 L 227.883 83.408 Q 224.252 85.5 219.719 85.5 Z  M 219.719 81.432 L 219.719 81.432 L 219.719 81.432 Q 223.089 81.432 225.733 79.834 L 225.733 79.834 L 225.733 79.834 Q 228.377 78.236 229.918 75.505 L 229.918 75.505 L 229.918 75.505 Q 231.457 72.774 231.457 69.287 L 231.457 69.287 L 231.457 69.287 Q 231.457 65.859 229.918 63.098 L 229.918 63.098 L 229.918 63.098 Q 228.377 60.338 225.733 58.769 L 225.733 58.769 L 225.733 58.769 Q 223.089 57.2 219.719 57.2 L 219.719 57.2 L 219.719 57.2 Q 216.406 57.2 213.733 58.769 L 213.733 58.769 L 213.733 58.769 Q 211.06 60.338 209.491 63.098 L 209.491 63.098 L 209.491 63.098 Q 207.922 65.859 207.922 69.287 L 207.922 69.287 L 207.922 69.287 Q 207.922 72.774 209.491 75.505 L 209.491 75.505 L 209.491 75.505 Q 211.06 78.236 213.733 79.834 L 213.733 79.834 L 213.733 79.834 Q 216.406 81.432 219.719 81.432 Z  M 249.53 85.21 L 249.53 85.21 L 249.53 85.21 Q 248.484 85.21 247.874 84.599 L 247.874 84.599 L 247.874 84.599 Q 247.264 83.989 247.264 82.943 L 247.264 82.943 L 247.264 55.689 L 247.264 55.689 Q 247.264 54.643 247.874 54.033 L 247.874 54.033 L 247.874 54.033 Q 248.484 53.422 249.53 53.422 L 249.53 53.422 L 249.53 53.422 Q 250.518 53.422 251.128 54.033 L 251.128 54.033 L 251.128 54.033 Q 251.738 54.643 251.738 55.689 L 251.738 55.689 L 251.738 82.943 L 251.738 82.943 Q 251.738 83.989 251.128 84.599 L 251.128 84.599 L 251.128 84.599 Q 250.518 85.21 249.53 85.21 Z  M 249.472 47.379 L 249.472 47.379 L 249.472 47.379 Q 248.193 47.379 247.264 46.449 L 247.264 46.449 L 247.264 46.449 Q 246.334 45.519 246.334 44.183 L 246.334 44.183 L 246.334 44.183 Q 246.334 42.73 247.292 41.888 L 247.292 41.888 L 247.292 41.888 Q 248.252 41.045 249.53 41.045 L 249.53 41.045 L 249.53 41.045 Q 250.75 41.045 251.709 41.888 L 251.709 41.888 L 251.709 41.888 Q 252.668 42.73 252.668 44.183 L 252.668 44.183 L 252.668 44.183 Q 252.668 45.519 251.738 46.449 L 251.738 46.449 L 251.738 46.449 Q 250.808 47.379 249.472 47.379 Z  M 277.132 85.5 L 277.132 85.5 L 277.132 85.5 Q 272.658 85.5 269.113 83.379 L 269.113 83.379 L 269.113 83.379 Q 265.568 81.258 263.506 77.597 L 263.506 77.597 L 263.506 77.597 Q 261.443 73.936 261.443 69.345 L 261.443 69.345 L 261.443 69.345 Q 261.443 64.696 263.564 61.035 L 263.564 61.035 L 263.564 61.035 Q 265.685 57.374 269.346 55.253 L 269.346 55.253 L 269.346 55.253 Q 273.007 53.132 277.598 53.132 L 277.598 53.132 L 277.598 53.132 Q 282.189 53.132 285.82 55.253 L 285.82 55.253 L 285.82 55.253 Q 289.453 57.374 291.574 61.035 L 291.574 61.035 L 291.574 61.035 Q 293.694 64.696 293.753 69.345 L 293.753 69.345 L 291.951 70.74 L 291.951 70.74 Q 291.951 74.924 290.005 78.265 L 290.005 78.265 L 290.005 78.265 Q 288.058 81.607 284.716 83.553 L 284.716 83.553 L 284.716 83.553 Q 281.375 85.5 277.132 85.5 Z  M 277.598 81.432 L 277.598 81.432 L 277.598 81.432 Q 280.968 81.432 283.612 79.863 L 283.612 79.863 L 283.612 79.863 Q 286.256 78.294 287.796 75.534 L 287.796 75.534 L 287.796 75.534 Q 289.336 72.774 289.336 69.345 L 289.336 69.345 L 289.336 69.345 Q 289.336 65.859 287.796 63.127 L 287.796 63.127 L 287.796 63.127 Q 286.256 60.396 283.612 58.798 L 283.612 58.798 L 283.612 58.798 Q 280.968 57.2 277.598 57.2 L 277.598 57.2 L 277.598 57.2 Q 274.286 57.2 271.612 58.798 L 271.612 58.798 L 271.612 58.798 Q 268.939 60.396 267.37 63.127 L 267.37 63.127 L 267.37 63.127 Q 265.801 65.859 265.801 69.345 L 265.801 69.345 L 265.801 69.345 Q 265.801 72.774 267.37 75.534 L 267.37 75.534 L 267.37 75.534 Q 268.939 78.294 271.612 79.863 L 271.612 79.863 L 271.612 79.863 Q 274.286 81.432 277.598 81.432 Z  M 291.486 85.21 L 291.486 85.21 L 291.486 85.21 Q 290.499 85.21 289.859 84.599 L 289.859 84.599 L 289.859 84.599 Q 289.22 83.989 289.22 83.001 L 289.22 83.001 L 289.22 73.065 L 290.324 68.474 L 293.753 69.345 L 293.753 83.001 L 293.753 83.001 Q 293.753 83.989 293.114 84.599 L 293.114 84.599 L 293.114 84.599 Q 292.474 85.21 291.486 85.21 Z " />
+        <path id="shape" fill="rgb(55,55,55)" d=" M 314.53 93.065 C 286.923 51.036 334.758 18.535 368.368 7.863 C 445.002 -16.471 511.069 18.476 497.581 74.179 C 471.43 182.169 334.571 123.573 314.53 93.065 Z " />
+        <path id="loop" fill="rgb(255,255,255)" d=" M 352.155 85.21 L 351.399 85.21 L 351.399 85.21 Q 349.074 85.21 347.244 83.931 L 347.244 83.931 L 347.244 83.931 Q 345.413 82.653 344.397 80.386 L 344.397 80.386 L 344.397 80.386 Q 343.379 78.12 343.379 75.156 L 343.379 75.156 L 343.379 42.033 L 343.379 42.033 Q 343.379 41.045 343.99 40.434 L 343.99 40.434 L 343.99 40.434 Q 344.6 39.825 345.588 39.825 L 345.588 39.825 L 345.588 39.825 Q 346.576 39.825 347.186 40.434 L 347.186 40.434 L 347.186 40.434 Q 347.796 41.045 347.796 42.033 L 347.796 42.033 L 347.796 75.156 L 347.796 75.156 Q 347.796 77.655 348.813 79.224 L 348.813 79.224 L 348.813 79.224 Q 349.83 80.793 351.399 80.793 L 351.399 80.793 L 352.852 80.793 L 352.852 80.793 Q 353.723 80.793 354.246 81.403 L 354.246 81.403 L 354.246 81.403 Q 354.77 82.014 354.77 83.001 L 354.77 83.001 L 354.77 83.001 Q 354.77 83.989 354.043 84.599 L 354.043 84.599 L 354.043 84.599 Q 353.316 85.21 352.155 85.21 L 352.155 85.21 Z  M 373.656 85.5 L 373.656 85.5 L 373.656 85.5 Q 369.007 85.5 365.346 83.408 L 365.346 83.408 L 365.346 83.408 Q 361.685 81.316 359.592 77.655 L 359.592 77.655 L 359.592 77.655 Q 357.501 73.994 357.501 69.345 L 357.501 69.345 L 357.501 69.345 Q 357.501 64.638 359.592 60.977 L 359.592 60.977 L 359.592 60.977 Q 361.685 57.316 365.346 55.224 L 365.346 55.224 L 365.346 55.224 Q 369.007 53.132 373.656 53.132 L 373.656 53.132 L 373.656 53.132 Q 378.304 53.132 381.937 55.224 L 381.937 55.224 L 381.937 55.224 Q 385.568 57.316 387.66 60.977 L 387.66 60.977 L 387.66 60.977 Q 389.753 64.638 389.811 69.345 L 389.811 69.345 L 389.811 69.345 Q 389.811 73.994 387.689 77.655 L 387.689 77.655 L 387.689 77.655 Q 385.568 81.316 381.937 83.408 L 381.937 83.408 L 381.937 83.408 Q 378.304 85.5 373.656 85.5 Z  M 373.656 81.432 L 373.656 81.432 L 373.656 81.432 Q 377.026 81.432 379.699 79.863 L 379.699 79.863 L 379.699 79.863 Q 382.372 78.294 383.883 75.563 L 383.883 75.563 L 383.883 75.563 Q 385.394 72.832 385.394 69.345 L 385.394 69.345 L 385.394 69.345 Q 385.394 65.859 383.883 63.098 L 383.883 63.098 L 383.883 63.098 Q 382.372 60.338 379.699 58.769 L 379.699 58.769 L 379.699 58.769 Q 377.026 57.2 373.656 57.2 L 373.656 57.2 L 373.656 57.2 Q 370.285 57.2 367.612 58.769 L 367.612 58.769 L 367.612 58.769 Q 364.939 60.338 363.399 63.098 L 363.399 63.098 L 363.399 63.098 Q 361.859 65.859 361.859 69.345 L 361.859 69.345 L 361.859 69.345 Q 361.859 72.832 363.399 75.563 L 363.399 75.563 L 363.399 75.563 Q 364.939 78.294 367.612 79.863 L 367.612 79.863 L 367.612 79.863 Q 370.285 81.432 373.656 81.432 Z  M 412.997 85.5 L 412.997 85.5 L 412.997 85.5 Q 408.348 85.5 404.687 83.408 L 404.687 83.408 L 404.687 83.408 Q 401.026 81.316 398.934 77.655 L 398.934 77.655 L 398.934 77.655 Q 396.842 73.994 396.842 69.345 L 396.842 69.345 L 396.842 69.345 Q 396.842 64.638 398.934 60.977 L 398.934 60.977 L 398.934 60.977 Q 401.026 57.316 404.687 55.224 L 404.687 55.224 L 404.687 55.224 Q 408.348 53.132 412.997 53.132 L 412.997 53.132 L 412.997 53.132 Q 417.646 53.132 421.278 55.224 L 421.278 55.224 L 421.278 55.224 Q 424.91 57.316 427.002 60.977 L 427.002 60.977 L 427.002 60.977 Q 429.094 64.638 429.152 69.345 L 429.152 69.345 L 429.152 69.345 Q 429.152 73.994 427.031 77.655 L 427.031 77.655 L 427.031 77.655 Q 424.91 81.316 421.278 83.408 L 421.278 83.408 L 421.278 83.408 Q 417.646 85.5 412.997 85.5 Z  M 412.997 81.432 L 412.997 81.432 L 412.997 81.432 Q 416.367 81.432 419.041 79.863 L 419.041 79.863 L 419.041 79.863 Q 421.714 78.294 423.224 75.563 L 423.224 75.563 L 423.224 75.563 Q 424.736 72.832 424.736 69.345 L 424.736 69.345 L 424.736 69.345 Q 424.736 65.859 423.224 63.098 L 423.224 63.098 L 423.224 63.098 Q 421.714 60.338 419.041 58.769 L 419.041 58.769 L 419.041 58.769 Q 416.367 57.2 412.997 57.2 L 412.997 57.2 L 412.997 57.2 Q 409.626 57.2 406.953 58.769 L 406.953 58.769 L 406.953 58.769 Q 404.28 60.338 402.741 63.098 L 402.741 63.098 L 402.741 63.098 Q 401.2 65.859 401.2 69.345 L 401.2 69.345 L 401.2 69.345 Q 401.2 72.832 402.741 75.563 L 402.741 75.563 L 402.741 75.563 Q 404.28 78.294 406.953 79.863 L 406.953 79.863 L 406.953 79.863 Q 409.626 81.432 412.997 81.432 Z  M 440.135 98.808 L 440.135 98.808 L 440.135 98.808 Q 439.089 98.808 438.479 98.197 L 438.479 98.197 L 438.479 98.197 Q 437.869 97.587 437.869 96.541 L 437.869 96.541 L 437.869 69.113 L 437.869 69.113 Q 437.927 64.58 440.048 60.948 L 440.048 60.948 L 440.048 60.948 Q 442.169 57.316 445.801 55.224 L 445.801 55.224 L 445.801 55.224 Q 449.433 53.132 453.965 53.132 L 453.965 53.132 L 453.965 53.132 Q 458.614 53.132 462.276 55.253 L 462.276 55.253 L 462.276 55.253 Q 465.937 57.374 468.058 61.035 L 468.058 61.035 L 468.058 61.035 Q 470.179 64.696 470.179 69.345 L 470.179 69.345 L 470.179 69.345 Q 470.179 73.936 468.116 77.597 L 468.116 77.597 L 468.116 77.597 Q 466.052 81.258 462.507 83.379 L 462.507 83.379 L 462.507 83.379 Q 458.963 85.5 454.488 85.5 L 454.488 85.5 L 454.488 85.5 Q 450.595 85.5 447.428 83.844 L 447.428 83.844 L 447.428 83.844 Q 444.261 82.188 442.343 79.456 L 442.343 79.456 L 442.343 96.541 L 442.343 96.541 Q 442.343 97.587 441.733 98.197 L 441.733 98.197 L 441.733 98.197 Q 441.123 98.808 440.135 98.808 Z  M 453.965 81.432 L 453.965 81.432 L 453.965 81.432 Q 457.336 81.432 460.009 79.863 L 460.009 79.863 L 460.009 79.863 Q 462.682 78.294 464.222 75.534 L 464.222 75.534 L 464.222 75.534 Q 465.762 72.774 465.762 69.345 L 465.762 69.345 L 465.762 69.345 Q 465.762 65.859 464.222 63.127 L 464.222 63.127 L 464.222 63.127 Q 462.682 60.396 460.009 58.798 L 460.009 58.798 L 460.009 58.798 Q 457.336 57.2 453.965 57.2 L 453.965 57.2 L 453.965 57.2 Q 450.653 57.2 447.98 58.798 L 447.98 58.798 L 447.98 58.798 Q 445.307 60.396 443.796 63.127 L 443.796 63.127 L 443.796 63.127 Q 442.285 65.859 442.285 69.345 L 442.285 69.345 L 442.285 69.345 Q 442.285 72.774 443.796 75.534 L 443.796 75.534 L 443.796 75.534 Q 445.307 78.294 447.98 79.863 L 447.98 79.863 L 447.98 79.863 Q 450.653 81.432 453.965 81.432 Z " />  
+</svg>
\ No newline at end of file
diff --git a/components/Accordion.vue b/components/Accordion.vue
index 993b264..8e68ec7 100644
--- a/components/Accordion.vue
+++ b/components/Accordion.vue
@@ -4,6 +4,7 @@
       v-for="(item, i) in items"
       :key="i"
       class="accordion-item"
+      :class="{ open: openIndex === i }"
     >
       <!-- Header  --------------------------------------------------->
       <button
@@ -44,6 +45,18 @@ const toggle = (i: number) =>
   .accordion-item
     border-bottom: 1px solid $lightgrey
     width: 100%
+    transition: .8s
+
+    &.open
+      background-image: linear-gradient(to right, $lightgrey, white)      
+      padding: 1rem
+
+      .accordion-header
+        background: transparent
+        font-size: 120%
+        
+        &:hover
+          background: transparent
 
     .accordion-header
       all: unset
@@ -93,6 +106,16 @@ const toggle = (i: number) =>
     .accordion-content
       padding: 0 1rem 1rem
 
+      h3
+        font-size: 1rem
+        margin: 1.2rem 0 .6rem 0
+      p
+        font-size: 1rem
+      ul
+        li
+          line-height: 140%
+          margin-bottom: 1rem
+
 // simple height-fade transition
 .accordion-enter-from,
 .accordion-leave-to
diff --git a/components/BackToTopBtn.vue b/components/BackToTopBtn.vue
index c5eff32..61f1947 100644
--- a/components/BackToTopBtn.vue
+++ b/components/BackToTopBtn.vue
@@ -1,7 +1,7 @@
 <template>
     <transition name="fade">
-      <button class="back-to-top" v-show="isVisible" @click="scrollToTop" aria-label="Zurück nach oben">
-        <span class="arrow-up"></span>
+      <button v-show="isVisible" class="back-to-top" aria-label="Zurück nach oben" @click="scrollToTop">
+        <span class="arrow-up"/>
       </button>
     </transition>
   </template>
diff --git a/components/CallToActionBox.vue b/components/CallToActionBox.vue
index 0c64158..054b41e 100644
--- a/components/CallToActionBox.vue
+++ b/components/CallToActionBox.vue
@@ -2,7 +2,7 @@
     <div class="ctaBox">
       <h3>{{ headline }}</h3>
       <p>{{ text }}</p>
-      <button class="pinkBtn mt-1" @click.prevent="toggleContactBubble" role="button">
+      <button class="pinkBtn mt-1" role="button" @click.prevent="toggleContactBubble">
         {{ buttonText }}
       </button>
     </div>
diff --git a/components/ContactForm.vue b/components/ContactForm.vue
index 21aba50..895b947 100644
--- a/components/ContactForm.vue
+++ b/components/ContactForm.vue
@@ -47,8 +47,8 @@
             <div v-if="screenWidth > 768" class="pt-3">
               <h3>{{ $t('contactForm.ourOffice') }}</h3>
               <p class="address">
-                {{ companyinfo.company }}<br />
-                {{ companyinfo.street }} <br />
+                {{ companyinfo.company }}<br >
+                {{ companyinfo.street }} <br >
                 {{ companyinfo.postalcode }} {{ companyinfo.city }}
               </p>
               <p class="aspProf">{{ $t('contactForm.yourcontactperson') }} <b>Sabrina Hennrich</b></p>
@@ -68,21 +68,21 @@
           <!-- Rechte Seite -->
           <div class="col-md-6">
             <div v-if="!formSent">
-              <form @submit.prevent="submitForm" novalidate>
+              <form novalidate @submit.prevent="submitForm">
                 <div class="form-group">
                   <label for="name">{{ $t('contactForm.name') }}</label>
                   <input
                     id="name"
-                    class="form-control"
                     v-model="form.name"
+                    class="form-control"
                     type="text"
                     name="name"
                     required
                     autocomplete="name"
-                    @blur="validateName"
                     :aria-invalid="!!errors.name"
                     :aria-describedby="errors.name ? 'error-name' : null"
-                  />
+                    @blur="validateName"
+                  >
                   <span
                     v-if="errors.name"
                     id="error-name"
@@ -97,16 +97,16 @@
                   <label for="email">{{ $t('contactForm.email') }}</label>
                   <input
                     id="email"
-                    class="form-control"
                     v-model="form.email"
+                    class="form-control"
                     type="email"
                     name="email"
                     required
                     autocomplete="email"
-                    @blur="validateEmail"
                     :aria-invalid="!!errors.email"
                     :aria-describedby="errors.email ? 'error-email' : null"
-                  />
+                    @blur="validateEmail"
+                  >
                   <span
                     v-if="errors.email"
                     id="error-email"
@@ -121,15 +121,15 @@
                   <label for="phone">{{ $t('contactForm.phone') }}</label>
                   <input
                     id="phone"
-                    class="form-control"
                     v-model="form.phone"
+                    class="form-control"
                     type="tel"
                     name="phone"
                     autocomplete="tel"
-                    @blur="validatePhone"
                     :aria-invalid="!!errors.phone"
                     :aria-describedby="errors.phone ? 'error-phone' : null"
-                  />
+                    @blur="validatePhone"
+                  >
                   <span
                     v-if="errors.phone"
                     id="error-phone"
@@ -144,19 +144,19 @@
                   <label for="message">{{ $t('contactForm.message') }}</label>
                   <textarea
                     id="message"
-                    class="form-control mt-4"
                     v-model="form.message"
+                    class="form-control mt-4"
                     name="message"
                     rows="4"
                     required
-                  ></textarea>
+                  />
                 </div>
   
                 <p class="smallText">
                   <span class="check">✔</span>
                   {{ $t('contactForm.privacyInfotextBeforeLink') }}
                   <NuxtLinkLocale
-                    :to="getRoute('privacy')"
+                    :to="'privacy'"
                     :aria-label="$t('privacy')"
                   >
                     {{ $t('contactForm.privacyInfotextLinkText') }}
@@ -191,7 +191,7 @@ import { useMainStore } from '@/stores/main';
 import { ref, reactive, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
-const { getRoute } = useI18nPages()
+
 
 // i18n Setup
 const { t } = useI18n();
diff --git a/components/HeroBox.vue b/components/HeroBox.vue
index ddebf74..d2e90a0 100644
--- a/components/HeroBox.vue
+++ b/components/HeroBox.vue
@@ -1,6 +1,6 @@
 // components/HeroBox.vue
 <template>
-  <section class="heroBox" :aria-label="ariaLabel">
+  <section ref="heroBoxRef" class="heroBox" :aria-label="ariaLabel">
     <NuxtImg
       provider="strapi"
       :src="image"
@@ -13,6 +13,20 @@
       preload
       fetchpriority="high"
     />
+    <!-- Optionales Overlay-Bild -->
+    <NuxtImg
+      v-if="overlayImage"
+      provider="strapi"
+      :src="overlayImage"
+      class="overlay-img"
+      :alt="overlayAltText"
+      :style="{
+        ...overlayPosition,
+        width: typeof overlayWidth === 'number' ? overlayWidth + 'px' : overlayWidth,
+        transform: `translate3d(0, ${parallaxY}px, 0)`
+      }"
+      aria-hidden="true"
+    />
     <div class="container-10 content">
       <h1>{{ $t(content.headline1) }}</h1>
       <h2>{{ $t(content.headline2) }}</h2>
@@ -25,14 +39,78 @@
 </template>
 
 <script setup>
-defineProps({
+// Parallax Overlay-Image
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useMainStore } from '@/stores/main'
+const mainStore = useMainStore()
+const props = defineProps({
   image: String,
   ariaLabel: String,
   content: {
     type: Object,
     required: true
+  },
+  overlayImage: {
+    type: String,
+    default: null
+  },
+  overlayAltText: {
+    type: String,
+    default: ''
+  },
+  overlayWidth: {
+    type: [String, Number],
+    default: '200px'
+  },
+  darkBackground: {
+    type: Boolean,
+    default: false
+  },
+
+  overlayPosition: {
+    type: Object,
+    default: () => ({
+    bottom: '0px',
+    right: '0px'
+  })
   }
 })
+const parallaxY = ref(0)
+const heroBoxRef = ref(null)
+let targetY = 0
+let animationFrame
+const updateParallax = () => {
+  // Ease: Linear interpolation (lerp) zwischen aktuellem Wert und Zielwert
+  parallaxY.value += (targetY - parallaxY.value) * 0.1
+  animationFrame = requestAnimationFrame(updateParallax)
+}
+
+const onScroll = () => {
+    targetY = window.scrollY * 0.3 // oder was dir gefällt
+  }
+
+  const updateHeight = () => {
+    if (heroBoxRef.value) {
+      mainStore.setHeroBoxHeight(heroBoxRef.value.offsetHeight)
+      mainStore.setDarkHeroBack(props.darkBackground)
+    }
+  }
+onMounted(() => {
+  
+  window.addEventListener('scroll', onScroll, { passive: true })
+  updateParallax()
+  // HeroBoxHeight for Logo
+  
+  updateHeight()
+  window.addEventListener('resize', updateHeight)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll)
+  cancelAnimationFrame(animationFrame)
+  window.removeEventListener('resize', updateHeight)
+})
+
 </script>
 
 <style lang="sass" scoped>
@@ -71,13 +149,22 @@ defineProps({
     object-position: center top
     z-index: -1
 
+  .overlay-img
+    position: absolute
+    bottom: 0
+    right: 0
+    z-index: 1
+    height: auto
+    max-height: 100%
+    object-fit: contain
+
   .content, h1, h2, h3
     position: relative
-    z-index: 1
+    z-index: 2
 
   h1, h2, h3
     color: white
-    z-index: 2
+    z-index: 3
     line-height: 1.5
     max-width: 70%
     @media (max-width: 768px)
diff --git a/components/LanguageBox.vue b/components/LanguageBox.vue
index a91c203..0a8f98e 100644
--- a/components/LanguageBox.vue
+++ b/components/LanguageBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="languageBox" v-if="locales.length >=2" @click="toggleOpen">
+  <div v-if="locales.length >=2" class="languageBox" @click="toggleOpen">
     <div v-if="!open" class="current">{{ currentLanguage }}</div>
 
     <transition name="slide">
diff --git a/components/PageContent.vue b/components/PageContent.vue
index af54f32..520028f 100644
--- a/components/PageContent.vue
+++ b/components/PageContent.vue
@@ -1,10 +1,10 @@
 <template>
-    <section class="topSpace" v-if="currentPage">
+    <section v-if="currentPage" class="topSpace">
       <div v-if="currentPage.pageSections[0].sectionText">
-        <div class="container content" v-html="htmlContent(currentPage.pageSections[0].sectionText)"></div>
+        <div class="container content" v-html="htmlContent(currentPage.pageSections[0].sectionText)"/>
       </div>
     </section>
-    <section class="topSpace" v-else>
+    <section v-else class="topSpace">
       <h1>Seite nicht gefunden</h1>
       <p>Die angeforderte Seite existiert nicht.</p>
     </section>
diff --git a/components/Recommendations.vue b/components/Recommendations.vue
index 3130ec4..3db06e2 100644
--- a/components/Recommendations.vue
+++ b/components/Recommendations.vue
@@ -2,11 +2,11 @@
     <section class="recommendations">
         <!-- Vor dem Container: Welle oben -->
         <svg class="sectionWave wave-top" :style="`height: ${waveHeight};top:-${waveHeight-2}`" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
-            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#EEEBE5"></path>
+            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#EEEBE5"/>
         </svg>
         <div class="container">
             <h2>Das sagen andere Designer und Kreative über digimedialoop</h2>
-            <div class="personBox" v-for="person, index in persons" :key="index" :class="person.active ? 'active' : ''" @click="setActive(index)">
+            <div v-for="person, index in persons" :key="index" class="personBox" :class="person.active ? 'active' : ''" @click="setActive(index)">
                 <img :src="person.image" alt="">
                 <div class="infoBox">
                     <h3>{{ person.name }}</h3>
@@ -17,7 +17,7 @@
 
         <!-- Nach dem Container: Spiegelwelle unten -->
         <svg class="sectionWave wave-bottom" :style="`height: ${waveHeight};bottom:-${waveHeight-2}`" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
-            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#EEEBE5"></path>
+            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#EEEBE5"/>
         </svg>    
     </section>
 </template>
diff --git a/components/SchemaCoder.vue b/components/SchemaCoder.vue
new file mode 100644
index 0000000..b15b3a3
--- /dev/null
+++ b/components/SchemaCoder.vue
@@ -0,0 +1,180 @@
+<template>
+    <div class="schema-typer">
+      <span class="token-tag">&lt;<span class="token-tag-name">script</span> <span class="token-attr">type</span>=<span class="token-string">"application/ld+json"</span>&gt;</span><br >
+      <span
+        v-for="(line, lineIndex) in displayedLines"
+        :key="lineIndex"
+        class="code-line"
+      >
+        <template v-for="(segment, index) in line" :key="index">
+          <span :class="segment.class">{{ segment.text }}</span>
+        </template>
+        <template v-if="(lineIndex === currentLine || (isTypingDone && lineIndex === displayedLines.length - 1)) && showCursor">
+          <span class="cursor">|</span>
+        </template>
+        <br >
+      </span>
+      <span class="token-tag">&lt;/<span class="token-tag-name">script</span>&gt;</span>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted } from 'vue'
+  
+  const schema = `{
+  "@context": "https://schema.org",
+  "@type": "HowTo",
+  "name": "So machen wir deine Website KI-kompatibel",
+  "description": "Wir optimieren deine Website gezielt für künstliche Intelligenz. Strukturiert, effizient und zukunftssicher.",
+  "step1": "Wir integrieren strukturierte Daten nach schema.org, damit KI-Systeme Inhalte korrekt interpretieren können.",
+  "step2": "Wir überarbeiten den Quellcode mit semantischem HTML und klaren Überschriften zur besseren maschinellen Lesbarkeit.",
+  "step3": "Wir stellen relevante Inhalte zusätzlich in maschinenfreundlichen Formaten wie JSON-LD oder über APIs bereit.",
+  "step4": "Wir sorgen für barrierefreie Gestaltung und klare Sprache, so verstehen auch KI-Sprachmodelle deine Inhalte besser.",
+  "step5": "Wir ergänzen deine Seiten mit Metadaten wie OpenGraph, Twitter Cards und Robots-Tags für optimalen Kontext.",
+  "estimatedTime": "ca. 45 Minuten Analyse + Umsetzung je nach Umfang",
+  "image": "/images/ki-optimierung.jpg"
+  }`
+  
+  function parseLine(line) {
+    const segments = []
+    const regex = /("[^"]+":)|("[^"]+")|(\d+)|(true|false|null)|(\s+|[{}[\],:])/g
+    let match
+    let lastIndex = 0
+  
+    while ((match = regex.exec(line)) !== null) {
+      const start = match.index
+      if (start > lastIndex) {
+        segments.push({ text: line.slice(lastIndex, start), class: 'token-text' })
+      }
+  
+      const [matched, key, str, num, bool, symbol] = match
+      let cls = 'token-text'
+      if (key) cls = 'token-key'
+      else if (str) cls = 'token-string'
+      else if (num) cls = 'token-number'
+      else if (bool) cls = 'token-boolean'
+      else if (symbol) cls = 'token-text'
+  
+      segments.push({ text: matched, class: cls })
+      lastIndex = start + matched.length
+    }
+  
+    if (lastIndex < line.length) {
+      segments.push({ text: line.slice(lastIndex), class: 'token-text' })
+    }
+  
+    return segments
+  }
+  
+  const lines = schema.split('\n').map(parseLine)
+  const displayedLines = ref([])
+  const showCursor = ref(true)
+  const currentLine = ref(0)
+  const isTypingDone = ref(false)
+  
+  const startTyping = () => {
+    let lineIndex = 0
+    let charIndex = 0
+    displayedLines.value.push([])
+  
+    const typeChar = () => {
+      if (lineIndex >= lines.length) {
+        isTypingDone.value = true
+        return
+      }
+  
+      const segment = lines[lineIndex][charIndex]
+      if (segment) {
+        displayedLines.value[lineIndex].push(segment)
+        charIndex++
+      } else {
+        lineIndex++
+        charIndex = 0
+        currentLine.value = lineIndex
+        if (lineIndex < lines.length) displayedLines.value.push([])
+      }
+  
+      setTimeout(typeChar, Math.random() * 80 + 40)
+    }
+  
+    typeChar()
+    setInterval(() => (showCursor.value = !showCursor.value), 500)
+  }
+  
+  onMounted(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        observer.disconnect()
+        startTyping()
+      }
+    }, { threshold: 0.3 })
+  
+    const el = document.querySelector('.schema-typer')
+    if (el) observer.observe(el)
+  })
+  </script>
+  
+  
+  <style lang="sass" scoped>
+  .schema-typer
+    background-color: #1e1e1e
+    padding: 1.5rem
+    margin: 2rem
+    border-radius: 0.5rem
+    font-family: monospace
+    font-size: 0.7rem
+    color: #ffffff
+    overflow-x: auto
+    overflow-y: auto
+    line-height: 1.4
+    height: auto
+    min-height: 450px
+    width: 400px
+    transform: rotate(6deg)
+    box-shadow: -3px 3px 6px 4px grey
+  
+  span
+    margin: 0
+    padding: 0
+  
+  .code-line
+    display: block
+    line-height: 1.2
+  
+  .token-tag
+    color: #569cd6
+  
+  .token-tag-name
+    color: #4ec9b0
+  
+  .token-attr
+    color: #c586c0
+  
+  .token-key
+    color: #9cdcfe
+    margin-left: 1rem
+  
+  .token-string
+    color: #ce9178
+  
+  .token-number
+    color: #b5cea8
+  
+  .token-boolean
+    color: #dcdcaa
+  
+  .token-text
+    color: #d4d4d4
+    margin-left: .2rem
+  
+  .cursor
+    display: inline-block
+    width: 1ch
+    background-color: white
+    animation: blink 1s steps(2, start) infinite
+  
+  @keyframes blink
+    to
+      visibility: hidden
+  </style>
+  
\ No newline at end of file
diff --git a/components/SideBarNaviSlider.vue b/components/SideBarNaviSlider.vue
index 98c60e9..bbe35d3 100644
--- a/components/SideBarNaviSlider.vue
+++ b/components/SideBarNaviSlider.vue
@@ -1,8 +1,9 @@
 <template>
-    <div class="sideBarNaviSlider" 
+    <div
+class="sideBarNaviSlider" 
          :class="{ 'slide-in': showSideBar }"
          @click="navigate">
-      <slot></slot>
+      <slot/>
     </div>
 </template>
   
diff --git a/components/template/PageHeader.vue b/components/template/PageHeader.vue
index 3c5a531..851c7fc 100644
--- a/components/template/PageHeader.vue
+++ b/components/template/PageHeader.vue
@@ -1,17 +1,26 @@
 <template>
     <header
-    :class="[{ mobile: screenWidth < 1350, desk: screenWidth >= 1350 }, { active: scrollPosition > 50 }]"
+    :class="{
+      mobile: screenWidth < 1350,
+      desk: screenWidth >= 1350,
+      active: scrollPosition > 50
+    }"
     role="banner"
   >
   <SettingsPanel v-if="screenWidth >= 1350" />  
   <div class="headContent">
       <div class="logoBox" role="button" tabindex="0" aria-label="Startseite" @click="navigateTo('/')">
-        <NuxtImg
+        <!-- <NuxtImg
           provider="strapi"
           src="/uploads/DML_Logo_grey_2024_c51210b70c.svg"
           alt="digimedialoop Logo"
           loading="eager"   
-        />
+        /> -->
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 499.34 136.563">
+          <path ref="logoLettering" fill="rgb(55,55,55)" d=" M 16.155 85.5 L 16.155 85.5 L 16.155 85.5 Q 11.564 85.5 7.903 83.379 L 7.903 83.379 L 7.903 83.379 Q 4.242 81.258 2.121 77.597 L 2.121 77.597 L 2.121 77.597 Q 0 73.936 0 69.287 L 0 69.287 L 0 69.287 Q 0 64.696 2.063 61.035 L 2.063 61.035 L 2.063 61.035 Q 4.126 57.374 7.67 55.253 L 7.67 55.253 L 7.67 55.253 Q 11.215 53.132 15.69 53.132 L 15.69 53.132 L 15.69 53.132 Q 19.583 53.132 22.722 54.788 L 22.722 54.788 L 22.722 54.788 Q 25.859 56.444 27.777 59.176 L 27.777 59.176 L 27.777 42.091 L 27.777 42.091 Q 27.777 41.045 28.416 40.434 L 28.416 40.434 L 28.416 40.434 Q 29.056 39.825 30.043 39.825 L 30.043 39.825 L 30.043 39.825 Q 31.031 39.825 31.671 40.434 L 31.671 40.434 L 31.671 40.434 Q 32.31 41.045 32.31 42.091 L 32.31 42.091 L 32.31 69.519 L 32.31 69.519 Q 32.194 74.052 30.073 77.684 L 30.073 77.684 L 30.073 77.684 Q 27.952 81.316 24.319 83.408 L 24.319 83.408 L 24.319 83.408 Q 20.688 85.5 16.155 85.5 Z  M 16.155 81.432 L 16.155 81.432 L 16.155 81.432 Q 19.525 81.432 22.17 79.834 L 22.17 79.834 L 22.17 79.834 Q 24.813 78.236 26.353 75.505 L 26.353 75.505 L 26.353 75.505 Q 27.894 72.774 27.894 69.287 L 27.894 69.287 L 27.894 69.287 Q 27.894 65.859 26.353 63.098 L 26.353 63.098 L 26.353 63.098 Q 24.813 60.338 22.17 58.769 L 22.17 58.769 L 22.17 58.769 Q 19.525 57.2 16.155 57.2 L 16.155 57.2 L 16.155 57.2 Q 12.843 57.2 10.17 58.769 L 10.17 58.769 L 10.17 58.769 Q 7.497 60.338 5.927 63.098 L 5.927 63.098 L 5.927 63.098 Q 4.358 65.859 4.358 69.287 L 4.358 69.287 L 4.358 69.287 Q 4.358 72.774 5.927 75.505 L 5.927 75.505 L 5.927 75.505 Q 7.497 78.236 10.17 79.834 L 10.17 79.834 L 10.17 79.834 Q 12.843 81.432 16.155 81.432 Z  M 45.966 85.21 L 45.966 85.21 L 45.966 85.21 Q 44.92 85.21 44.31 84.599 L 44.31 84.599 L 44.31 84.599 Q 43.7 83.989 43.7 82.943 L 43.7 82.943 L 43.7 55.689 L 43.7 55.689 Q 43.7 54.643 44.31 54.033 L 44.31 54.033 L 44.31 54.033 Q 44.92 53.422 45.966 53.422 L 45.966 53.422 L 45.966 53.422 Q 46.954 53.422 47.564 54.033 L 47.564 54.033 L 47.564 54.033 Q 48.174 54.643 48.174 55.689 L 48.174 55.689 L 48.174 82.943 L 48.174 82.943 Q 48.174 83.989 47.564 84.599 L 47.564 84.599 L 47.564 84.599 Q 46.954 85.21 45.966 85.21 Z  M 45.908 47.379 L 45.908 47.379 L 45.908 47.379 Q 44.629 47.379 43.7 46.449 L 43.7 46.449 L 43.7 46.449 Q 42.77 45.519 42.77 44.183 L 42.77 44.183 L 42.77 44.183 Q 42.77 42.73 43.729 41.888 L 43.729 41.888 L 43.729 41.888 Q 44.688 41.045 45.966 41.045 L 45.966 41.045 L 45.966 41.045 Q 47.186 41.045 48.145 41.888 L 48.145 41.888 L 48.145 41.888 Q 49.104 42.73 49.104 44.183 L 49.104 44.183 L 49.104 44.183 Q 49.104 45.519 48.174 46.449 L 48.174 46.449 L 48.174 46.449 Q 47.244 47.379 45.908 47.379 Z  M 73.569 85.5 L 73.569 85.5 L 73.569 85.5 Q 68.978 85.5 65.433 83.437 L 65.433 83.437 L 65.433 83.437 Q 61.889 81.374 59.884 77.713 L 59.884 77.713 L 59.884 77.713 Q 57.879 74.052 57.879 69.345 L 57.879 69.345 L 57.879 69.345 Q 57.879 64.58 59.971 60.919 L 59.971 60.919 L 59.971 60.919 Q 62.063 57.258 65.724 55.195 L 65.724 55.195 L 65.724 55.195 Q 69.385 53.132 74.034 53.132 L 74.034 53.132 L 74.034 53.132 Q 78.741 53.132 82.372 55.195 L 82.372 55.195 L 82.372 55.195 Q 86.005 57.258 88.068 60.919 L 88.068 60.919 L 88.068 60.919 Q 90.13 64.58 90.189 69.345 L 90.189 69.345 L 87.574 70.74 L 87.574 70.74 Q 87.574 75.04 85.772 78.381 L 85.772 78.381 L 85.772 78.381 Q 83.971 81.723 80.804 83.611 L 80.804 83.611 L 80.804 83.611 Q 77.636 85.5 73.569 85.5 Z  M 74.15 97.762 L 74.15 97.762 L 74.15 97.762 Q 69.559 97.762 66.072 96.047 L 66.072 96.047 L 66.072 96.047 Q 62.586 94.333 60.32 91.369 L 60.32 91.369 L 60.32 91.369 Q 59.68 90.672 59.768 89.859 L 59.768 89.859 L 59.768 89.859 Q 59.855 89.045 60.61 88.522 L 60.61 88.522 L 60.61 88.522 Q 61.365 87.999 62.295 88.173 L 62.295 88.173 L 62.295 88.173 Q 63.225 88.347 63.748 89.045 L 63.748 89.045 L 63.748 89.045 Q 65.433 91.137 68.077 92.415 L 68.077 92.415 L 68.077 92.415 Q 70.721 93.693 74.208 93.693 L 74.208 93.693 L 74.208 93.693 Q 77.462 93.693 80.078 92.125 L 80.078 92.125 L 80.078 92.125 Q 82.693 90.556 84.232 87.708 L 84.232 87.708 L 84.232 87.708 Q 85.772 84.861 85.772 81.026 L 85.772 81.026 L 85.772 72.192 L 87.457 68.822 L 90.189 69.345 L 90.189 81.2 L 90.189 81.2 Q 90.189 85.907 88.097 89.655 L 88.097 89.655 L 88.097 89.655 Q 86.005 93.403 82.402 95.582 L 82.402 95.582 L 82.402 95.582 Q 78.799 97.762 74.15 97.762 Z  M 74.034 81.432 L 74.034 81.432 L 74.034 81.432 Q 77.462 81.432 80.106 79.892 L 80.106 79.892 L 80.106 79.892 Q 82.751 78.353 84.261 75.621 L 84.261 75.621 L 84.261 75.621 Q 85.772 72.89 85.772 69.345 L 85.772 69.345 L 85.772 69.345 Q 85.772 65.801 84.261 63.04 L 84.261 63.04 L 84.261 63.04 Q 82.751 60.28 80.106 58.74 L 80.106 58.74 L 80.106 58.74 Q 77.462 57.2 74.034 57.2 L 74.034 57.2 L 74.034 57.2 Q 70.605 57.2 67.932 58.74 L 67.932 58.74 L 67.932 58.74 Q 65.259 60.28 63.748 63.04 L 63.748 63.04 L 63.748 63.04 Q 62.237 65.801 62.237 69.345 L 62.237 69.345 L 62.237 69.345 Q 62.237 72.89 63.748 75.621 L 63.748 75.621 L 63.748 75.621 Q 65.259 78.353 67.932 79.892 L 67.932 79.892 L 67.932 79.892 Q 70.605 81.432 74.034 81.432 Z  M 102.102 85.21 L 102.102 85.21 L 102.102 85.21 Q 101.055 85.21 100.445 84.599 L 100.445 84.599 L 100.445 84.599 Q 99.835 83.989 99.835 82.943 L 99.835 82.943 L 99.835 55.689 L 99.835 55.689 Q 99.835 54.643 100.445 54.033 L 100.445 54.033 L 100.445 54.033 Q 101.055 53.422 102.102 53.422 L 102.102 53.422 L 102.102 53.422 Q 103.09 53.422 103.7 54.033 L 103.7 54.033 L 103.7 54.033 Q 104.309 54.643 104.309 55.689 L 104.309 55.689 L 104.309 82.943 L 104.309 82.943 Q 104.309 83.989 103.7 84.599 L 103.7 84.599 L 103.7 84.599 Q 103.09 85.21 102.102 85.21 Z  M 102.043 47.379 L 102.043 47.379 L 102.043 47.379 Q 100.765 47.379 99.835 46.449 L 99.835 46.449 L 99.835 46.449 Q 98.906 45.519 98.906 44.183 L 98.906 44.183 L 98.906 44.183 Q 98.906 42.73 99.864 41.888 L 99.864 41.888 L 99.864 41.888 Q 100.823 41.045 102.102 41.045 L 102.102 41.045 L 102.102 41.045 Q 103.322 41.045 104.281 41.888 L 104.281 41.888 L 104.281 41.888 Q 105.239 42.73 105.239 44.183 L 105.239 44.183 L 105.239 44.183 Q 105.239 45.519 104.309 46.449 L 104.309 46.449 L 104.309 46.449 Q 103.38 47.379 102.043 47.379 Z  M 158.644 85.21 L 158.644 85.21 L 158.644 85.21 Q 157.656 85.21 157.017 84.599 L 157.017 84.599 L 157.017 84.599 Q 156.377 83.989 156.377 83.001 L 156.377 83.001 L 156.377 66.265 L 156.377 66.265 Q 156.377 62.14 154.228 59.728 L 154.228 59.728 L 154.228 59.728 Q 152.077 57.316 148.707 57.316 L 148.707 57.316 L 148.707 57.316 Q 145.104 57.316 142.808 59.728 L 142.808 59.728 L 142.808 59.728 Q 140.513 62.14 140.571 66.149 L 140.571 66.149 L 136.561 66.149 L 136.561 66.149 Q 136.619 62.256 138.247 59.292 L 138.247 59.292 L 138.247 59.292 Q 139.874 56.328 142.722 54.701 L 142.722 54.701 L 142.722 54.701 Q 145.569 53.074 149.171 53.074 L 149.171 53.074 L 149.171 53.074 Q 152.601 53.074 155.244 54.701 L 155.244 54.701 L 155.244 54.701 Q 157.889 56.328 159.37 59.292 L 159.37 59.292 L 159.37 59.292 Q 160.852 62.256 160.852 66.265 L 160.852 66.265 L 160.852 83.001 L 160.852 83.001 Q 160.852 83.989 160.242 84.599 L 160.242 84.599 L 160.242 84.599 Q 159.632 85.21 158.644 85.21 Z  M 117.966 85.21 L 117.966 85.21 L 117.966 85.21 Q 116.92 85.21 116.31 84.599 L 116.31 84.599 L 116.31 84.599 Q 115.7 83.989 115.7 83.001 L 115.7 83.001 L 115.7 55.689 L 115.7 55.689 Q 115.7 54.701 116.31 54.062 L 116.31 54.062 L 116.31 54.062 Q 116.92 53.422 117.966 53.422 L 117.966 53.422 L 117.966 53.422 Q 118.954 53.422 119.564 54.062 L 119.564 54.062 L 119.564 54.062 Q 120.174 54.701 120.174 55.689 L 120.174 55.689 L 120.174 83.001 L 120.174 83.001 Q 120.174 83.989 119.564 84.599 L 119.564 84.599 L 119.564 84.599 Q 118.954 85.21 117.966 85.21 Z  M 138.363 85.21 L 138.363 85.21 L 138.363 85.21 Q 137.375 85.21 136.736 84.599 L 136.736 84.599 L 136.736 84.599 Q 136.097 83.989 136.097 83.001 L 136.097 83.001 L 136.097 66.265 L 136.097 66.265 Q 136.097 62.14 133.946 59.728 L 133.946 59.728 L 133.946 59.728 Q 131.797 57.316 128.426 57.316 L 128.426 57.316 L 128.426 57.316 Q 124.823 57.316 122.498 59.67 L 122.498 59.67 L 122.498 59.67 Q 120.174 62.023 120.174 65.801 L 120.174 65.801 L 116.978 65.801 L 116.978 65.801 Q 117.094 62.081 118.634 59.204 L 118.634 59.204 L 118.634 59.204 Q 120.174 56.328 122.847 54.701 L 122.847 54.701 L 122.847 54.701 Q 125.521 53.074 128.891 53.074 L 128.891 53.074 L 128.891 53.074 Q 132.319 53.074 134.964 54.701 L 134.964 54.701 L 134.964 54.701 Q 137.607 56.328 139.089 59.292 L 139.089 59.292 L 139.089 59.292 Q 140.571 62.256 140.571 66.265 L 140.571 66.265 L 140.571 83.001 L 140.571 83.001 Q 140.571 83.989 139.961 84.599 L 139.961 84.599 L 139.961 84.599 Q 139.351 85.21 138.363 85.21 Z  M 185.142 85.5 L 185.142 85.5 L 185.142 85.5 Q 180.435 85.5 176.804 83.437 L 176.804 83.437 L 176.804 83.437 Q 173.172 81.374 171.108 77.713 L 171.108 77.713 L 171.108 77.713 Q 169.046 74.052 169.046 69.345 L 169.046 69.345 L 169.046 69.345 Q 169.046 64.58 170.993 60.948 L 170.993 60.948 L 170.993 60.948 Q 172.939 57.316 176.368 55.224 L 176.368 55.224 L 176.368 55.224 Q 179.796 53.132 184.271 53.132 L 184.271 53.132 L 184.271 53.132 Q 188.687 53.132 191.971 55.137 L 191.971 55.137 L 191.971 55.137 Q 195.254 57.142 197.055 60.686 L 197.055 60.686 L 197.055 60.686 Q 198.857 64.231 198.857 68.764 L 198.857 68.764 L 198.857 68.764 Q 198.857 69.694 198.276 70.246 L 198.276 70.246 L 198.276 70.246 Q 197.694 70.798 196.765 70.798 L 196.765 70.798 L 172.068 70.798 L 172.068 67.079 L 197.23 67.079 L 194.731 68.88 L 194.731 68.88 Q 194.789 65.51 193.511 62.837 L 193.511 62.837 L 193.511 62.837 Q 192.232 60.164 189.878 58.653 L 189.878 58.653 L 189.878 58.653 Q 187.525 57.142 184.271 57.142 L 184.271 57.142 L 184.271 57.142 Q 180.959 57.142 178.46 58.711 L 178.46 58.711 L 178.46 58.711 Q 175.961 60.28 174.595 63.04 L 174.595 63.04 L 174.595 63.04 Q 173.23 65.801 173.23 69.345 L 173.23 69.345 L 173.23 69.345 Q 173.23 72.89 174.77 75.621 L 174.77 75.621 L 174.77 75.621 Q 176.31 78.353 178.983 79.921 L 178.983 79.921 L 178.983 79.921 Q 181.656 81.49 185.142 81.49 L 185.142 81.49 L 185.142 81.49 Q 187.235 81.49 189.356 80.764 L 189.356 80.764 L 189.356 80.764 Q 191.477 80.038 192.755 78.934 L 192.755 78.934 L 192.755 78.934 Q 193.394 78.411 194.208 78.381 L 194.208 78.381 L 194.208 78.381 Q 195.021 78.353 195.603 78.817 L 195.603 78.817 L 195.603 78.817 Q 196.358 79.514 196.387 80.328 L 196.387 80.328 L 196.387 80.328 Q 196.416 81.141 195.719 81.723 L 195.719 81.723 L 195.719 81.723 Q 193.801 83.35 190.838 84.425 L 190.838 84.425 L 190.838 84.425 Q 187.874 85.5 185.142 85.5 Z  M 219.719 85.5 L 219.719 85.5 L 219.719 85.5 Q 215.128 85.5 211.467 83.379 L 211.467 83.379 L 211.467 83.379 Q 207.806 81.258 205.685 77.597 L 205.685 77.597 L 205.685 77.597 Q 203.564 73.936 203.564 69.287 L 203.564 69.287 L 203.564 69.287 Q 203.564 64.696 205.627 61.035 L 205.627 61.035 L 205.627 61.035 Q 207.69 57.374 211.234 55.253 L 211.234 55.253 L 211.234 55.253 Q 214.779 53.132 219.254 53.132 L 219.254 53.132 L 219.254 53.132 Q 223.148 53.132 226.285 54.788 L 226.285 54.788 L 226.285 54.788 Q 229.424 56.444 231.341 59.176 L 231.341 59.176 L 231.341 42.091 L 231.341 42.091 Q 231.341 41.045 231.98 40.434 L 231.98 40.434 L 231.98 40.434 Q 232.619 39.825 233.607 39.825 L 233.607 39.825 L 233.607 39.825 Q 234.595 39.825 235.234 40.434 L 235.234 40.434 L 235.234 40.434 Q 235.874 41.045 235.874 42.091 L 235.874 42.091 L 235.874 69.519 L 235.874 69.519 Q 235.758 74.052 233.637 77.684 L 233.637 77.684 L 233.637 77.684 Q 231.515 81.316 227.883 83.408 L 227.883 83.408 L 227.883 83.408 Q 224.252 85.5 219.719 85.5 Z  M 219.719 81.432 L 219.719 81.432 L 219.719 81.432 Q 223.089 81.432 225.733 79.834 L 225.733 79.834 L 225.733 79.834 Q 228.377 78.236 229.918 75.505 L 229.918 75.505 L 229.918 75.505 Q 231.457 72.774 231.457 69.287 L 231.457 69.287 L 231.457 69.287 Q 231.457 65.859 229.918 63.098 L 229.918 63.098 L 229.918 63.098 Q 228.377 60.338 225.733 58.769 L 225.733 58.769 L 225.733 58.769 Q 223.089 57.2 219.719 57.2 L 219.719 57.2 L 219.719 57.2 Q 216.406 57.2 213.733 58.769 L 213.733 58.769 L 213.733 58.769 Q 211.06 60.338 209.491 63.098 L 209.491 63.098 L 209.491 63.098 Q 207.922 65.859 207.922 69.287 L 207.922 69.287 L 207.922 69.287 Q 207.922 72.774 209.491 75.505 L 209.491 75.505 L 209.491 75.505 Q 211.06 78.236 213.733 79.834 L 213.733 79.834 L 213.733 79.834 Q 216.406 81.432 219.719 81.432 Z  M 249.53 85.21 L 249.53 85.21 L 249.53 85.21 Q 248.484 85.21 247.874 84.599 L 247.874 84.599 L 247.874 84.599 Q 247.264 83.989 247.264 82.943 L 247.264 82.943 L 247.264 55.689 L 247.264 55.689 Q 247.264 54.643 247.874 54.033 L 247.874 54.033 L 247.874 54.033 Q 248.484 53.422 249.53 53.422 L 249.53 53.422 L 249.53 53.422 Q 250.518 53.422 251.128 54.033 L 251.128 54.033 L 251.128 54.033 Q 251.738 54.643 251.738 55.689 L 251.738 55.689 L 251.738 82.943 L 251.738 82.943 Q 251.738 83.989 251.128 84.599 L 251.128 84.599 L 251.128 84.599 Q 250.518 85.21 249.53 85.21 Z  M 249.472 47.379 L 249.472 47.379 L 249.472 47.379 Q 248.193 47.379 247.264 46.449 L 247.264 46.449 L 247.264 46.449 Q 246.334 45.519 246.334 44.183 L 246.334 44.183 L 246.334 44.183 Q 246.334 42.73 247.292 41.888 L 247.292 41.888 L 247.292 41.888 Q 248.252 41.045 249.53 41.045 L 249.53 41.045 L 249.53 41.045 Q 250.75 41.045 251.709 41.888 L 251.709 41.888 L 251.709 41.888 Q 252.668 42.73 252.668 44.183 L 252.668 44.183 L 252.668 44.183 Q 252.668 45.519 251.738 46.449 L 251.738 46.449 L 251.738 46.449 Q 250.808 47.379 249.472 47.379 Z  M 277.132 85.5 L 277.132 85.5 L 277.132 85.5 Q 272.658 85.5 269.113 83.379 L 269.113 83.379 L 269.113 83.379 Q 265.568 81.258 263.506 77.597 L 263.506 77.597 L 263.506 77.597 Q 261.443 73.936 261.443 69.345 L 261.443 69.345 L 261.443 69.345 Q 261.443 64.696 263.564 61.035 L 263.564 61.035 L 263.564 61.035 Q 265.685 57.374 269.346 55.253 L 269.346 55.253 L 269.346 55.253 Q 273.007 53.132 277.598 53.132 L 277.598 53.132 L 277.598 53.132 Q 282.189 53.132 285.82 55.253 L 285.82 55.253 L 285.82 55.253 Q 289.453 57.374 291.574 61.035 L 291.574 61.035 L 291.574 61.035 Q 293.694 64.696 293.753 69.345 L 293.753 69.345 L 291.951 70.74 L 291.951 70.74 Q 291.951 74.924 290.005 78.265 L 290.005 78.265 L 290.005 78.265 Q 288.058 81.607 284.716 83.553 L 284.716 83.553 L 284.716 83.553 Q 281.375 85.5 277.132 85.5 Z  M 277.598 81.432 L 277.598 81.432 L 277.598 81.432 Q 280.968 81.432 283.612 79.863 L 283.612 79.863 L 283.612 79.863 Q 286.256 78.294 287.796 75.534 L 287.796 75.534 L 287.796 75.534 Q 289.336 72.774 289.336 69.345 L 289.336 69.345 L 289.336 69.345 Q 289.336 65.859 287.796 63.127 L 287.796 63.127 L 287.796 63.127 Q 286.256 60.396 283.612 58.798 L 283.612 58.798 L 283.612 58.798 Q 280.968 57.2 277.598 57.2 L 277.598 57.2 L 277.598 57.2 Q 274.286 57.2 271.612 58.798 L 271.612 58.798 L 271.612 58.798 Q 268.939 60.396 267.37 63.127 L 267.37 63.127 L 267.37 63.127 Q 265.801 65.859 265.801 69.345 L 265.801 69.345 L 265.801 69.345 Q 265.801 72.774 267.37 75.534 L 267.37 75.534 L 267.37 75.534 Q 268.939 78.294 271.612 79.863 L 271.612 79.863 L 271.612 79.863 Q 274.286 81.432 277.598 81.432 Z  M 291.486 85.21 L 291.486 85.21 L 291.486 85.21 Q 290.499 85.21 289.859 84.599 L 289.859 84.599 L 289.859 84.599 Q 289.22 83.989 289.22 83.001 L 289.22 83.001 L 289.22 73.065 L 290.324 68.474 L 293.753 69.345 L 293.753 83.001 L 293.753 83.001 Q 293.753 83.989 293.114 84.599 L 293.114 84.599 L 293.114 84.599 Q 292.474 85.21 291.486 85.21 Z " />
+          <path ref="logoShape" fill="rgb(55,55,55)" d=" M 314.53 93.065 C 286.923 51.036 334.758 18.535 368.368 7.863 C 445.002 -16.471 511.069 18.476 497.581 74.179 C 471.43 182.169 334.571 123.573 314.53 93.065 Z " />
+          <path ref="logoLoop" fill="rgb(255,255,255)" d=" M 352.155 85.21 L 351.399 85.21 L 351.399 85.21 Q 349.074 85.21 347.244 83.931 L 347.244 83.931 L 347.244 83.931 Q 345.413 82.653 344.397 80.386 L 344.397 80.386 L 344.397 80.386 Q 343.379 78.12 343.379 75.156 L 343.379 75.156 L 343.379 42.033 L 343.379 42.033 Q 343.379 41.045 343.99 40.434 L 343.99 40.434 L 343.99 40.434 Q 344.6 39.825 345.588 39.825 L 345.588 39.825 L 345.588 39.825 Q 346.576 39.825 347.186 40.434 L 347.186 40.434 L 347.186 40.434 Q 347.796 41.045 347.796 42.033 L 347.796 42.033 L 347.796 75.156 L 347.796 75.156 Q 347.796 77.655 348.813 79.224 L 348.813 79.224 L 348.813 79.224 Q 349.83 80.793 351.399 80.793 L 351.399 80.793 L 352.852 80.793 L 352.852 80.793 Q 353.723 80.793 354.246 81.403 L 354.246 81.403 L 354.246 81.403 Q 354.77 82.014 354.77 83.001 L 354.77 83.001 L 354.77 83.001 Q 354.77 83.989 354.043 84.599 L 354.043 84.599 L 354.043 84.599 Q 353.316 85.21 352.155 85.21 L 352.155 85.21 Z  M 373.656 85.5 L 373.656 85.5 L 373.656 85.5 Q 369.007 85.5 365.346 83.408 L 365.346 83.408 L 365.346 83.408 Q 361.685 81.316 359.592 77.655 L 359.592 77.655 L 359.592 77.655 Q 357.501 73.994 357.501 69.345 L 357.501 69.345 L 357.501 69.345 Q 357.501 64.638 359.592 60.977 L 359.592 60.977 L 359.592 60.977 Q 361.685 57.316 365.346 55.224 L 365.346 55.224 L 365.346 55.224 Q 369.007 53.132 373.656 53.132 L 373.656 53.132 L 373.656 53.132 Q 378.304 53.132 381.937 55.224 L 381.937 55.224 L 381.937 55.224 Q 385.568 57.316 387.66 60.977 L 387.66 60.977 L 387.66 60.977 Q 389.753 64.638 389.811 69.345 L 389.811 69.345 L 389.811 69.345 Q 389.811 73.994 387.689 77.655 L 387.689 77.655 L 387.689 77.655 Q 385.568 81.316 381.937 83.408 L 381.937 83.408 L 381.937 83.408 Q 378.304 85.5 373.656 85.5 Z  M 373.656 81.432 L 373.656 81.432 L 373.656 81.432 Q 377.026 81.432 379.699 79.863 L 379.699 79.863 L 379.699 79.863 Q 382.372 78.294 383.883 75.563 L 383.883 75.563 L 383.883 75.563 Q 385.394 72.832 385.394 69.345 L 385.394 69.345 L 385.394 69.345 Q 385.394 65.859 383.883 63.098 L 383.883 63.098 L 383.883 63.098 Q 382.372 60.338 379.699 58.769 L 379.699 58.769 L 379.699 58.769 Q 377.026 57.2 373.656 57.2 L 373.656 57.2 L 373.656 57.2 Q 370.285 57.2 367.612 58.769 L 367.612 58.769 L 367.612 58.769 Q 364.939 60.338 363.399 63.098 L 363.399 63.098 L 363.399 63.098 Q 361.859 65.859 361.859 69.345 L 361.859 69.345 L 361.859 69.345 Q 361.859 72.832 363.399 75.563 L 363.399 75.563 L 363.399 75.563 Q 364.939 78.294 367.612 79.863 L 367.612 79.863 L 367.612 79.863 Q 370.285 81.432 373.656 81.432 Z  M 412.997 85.5 L 412.997 85.5 L 412.997 85.5 Q 408.348 85.5 404.687 83.408 L 404.687 83.408 L 404.687 83.408 Q 401.026 81.316 398.934 77.655 L 398.934 77.655 L 398.934 77.655 Q 396.842 73.994 396.842 69.345 L 396.842 69.345 L 396.842 69.345 Q 396.842 64.638 398.934 60.977 L 398.934 60.977 L 398.934 60.977 Q 401.026 57.316 404.687 55.224 L 404.687 55.224 L 404.687 55.224 Q 408.348 53.132 412.997 53.132 L 412.997 53.132 L 412.997 53.132 Q 417.646 53.132 421.278 55.224 L 421.278 55.224 L 421.278 55.224 Q 424.91 57.316 427.002 60.977 L 427.002 60.977 L 427.002 60.977 Q 429.094 64.638 429.152 69.345 L 429.152 69.345 L 429.152 69.345 Q 429.152 73.994 427.031 77.655 L 427.031 77.655 L 427.031 77.655 Q 424.91 81.316 421.278 83.408 L 421.278 83.408 L 421.278 83.408 Q 417.646 85.5 412.997 85.5 Z  M 412.997 81.432 L 412.997 81.432 L 412.997 81.432 Q 416.367 81.432 419.041 79.863 L 419.041 79.863 L 419.041 79.863 Q 421.714 78.294 423.224 75.563 L 423.224 75.563 L 423.224 75.563 Q 424.736 72.832 424.736 69.345 L 424.736 69.345 L 424.736 69.345 Q 424.736 65.859 423.224 63.098 L 423.224 63.098 L 423.224 63.098 Q 421.714 60.338 419.041 58.769 L 419.041 58.769 L 419.041 58.769 Q 416.367 57.2 412.997 57.2 L 412.997 57.2 L 412.997 57.2 Q 409.626 57.2 406.953 58.769 L 406.953 58.769 L 406.953 58.769 Q 404.28 60.338 402.741 63.098 L 402.741 63.098 L 402.741 63.098 Q 401.2 65.859 401.2 69.345 L 401.2 69.345 L 401.2 69.345 Q 401.2 72.832 402.741 75.563 L 402.741 75.563 L 402.741 75.563 Q 404.28 78.294 406.953 79.863 L 406.953 79.863 L 406.953 79.863 Q 409.626 81.432 412.997 81.432 Z  M 440.135 98.808 L 440.135 98.808 L 440.135 98.808 Q 439.089 98.808 438.479 98.197 L 438.479 98.197 L 438.479 98.197 Q 437.869 97.587 437.869 96.541 L 437.869 96.541 L 437.869 69.113 L 437.869 69.113 Q 437.927 64.58 440.048 60.948 L 440.048 60.948 L 440.048 60.948 Q 442.169 57.316 445.801 55.224 L 445.801 55.224 L 445.801 55.224 Q 449.433 53.132 453.965 53.132 L 453.965 53.132 L 453.965 53.132 Q 458.614 53.132 462.276 55.253 L 462.276 55.253 L 462.276 55.253 Q 465.937 57.374 468.058 61.035 L 468.058 61.035 L 468.058 61.035 Q 470.179 64.696 470.179 69.345 L 470.179 69.345 L 470.179 69.345 Q 470.179 73.936 468.116 77.597 L 468.116 77.597 L 468.116 77.597 Q 466.052 81.258 462.507 83.379 L 462.507 83.379 L 462.507 83.379 Q 458.963 85.5 454.488 85.5 L 454.488 85.5 L 454.488 85.5 Q 450.595 85.5 447.428 83.844 L 447.428 83.844 L 447.428 83.844 Q 444.261 82.188 442.343 79.456 L 442.343 79.456 L 442.343 96.541 L 442.343 96.541 Q 442.343 97.587 441.733 98.197 L 441.733 98.197 L 441.733 98.197 Q 441.123 98.808 440.135 98.808 Z  M 453.965 81.432 L 453.965 81.432 L 453.965 81.432 Q 457.336 81.432 460.009 79.863 L 460.009 79.863 L 460.009 79.863 Q 462.682 78.294 464.222 75.534 L 464.222 75.534 L 464.222 75.534 Q 465.762 72.774 465.762 69.345 L 465.762 69.345 L 465.762 69.345 Q 465.762 65.859 464.222 63.127 L 464.222 63.127 L 464.222 63.127 Q 462.682 60.396 460.009 58.798 L 460.009 58.798 L 460.009 58.798 Q 457.336 57.2 453.965 57.2 L 453.965 57.2 L 453.965 57.2 Q 450.653 57.2 447.98 58.798 L 447.98 58.798 L 447.98 58.798 Q 445.307 60.396 443.796 63.127 L 443.796 63.127 L 443.796 63.127 Q 442.285 65.859 442.285 69.345 L 442.285 69.345 L 442.285 69.345 Q 442.285 72.774 443.796 75.534 L 443.796 75.534 L 443.796 75.534 Q 445.307 78.294 447.98 79.863 L 447.98 79.863 L 447.98 79.863 Q 450.653 81.432 453.965 81.432 Z " />  
+        </svg>
       </div>
       <div
         class="navigationBox"
@@ -24,28 +33,71 @@
         tabindex="0"
       >
       <div
-class="closer"
+        class="closer"
+        role="button"
+        tabindex="0"
         @click="toggleMenu"
-        @keydown.enter="toggleMenu"/>
-        <nav v-if="isMenuOpen || screenWidth > 1350" aria-expanded="true">
-          <div class="mobilNavLogo" v-if="false">
+        @keydown.enter="toggleMenu"
+      />
+
+        <nav
+          v-if="isMenuOpen || screenWidth > 1350"
+          :aria-expanded="screenWidth < 1350 ? 'true' : undefined"
+          @mouseleave="screenWidth >= 1350 && hideSubNav()"
+          >
+
+          <div v-if="false" class="mobilNavLogo">
             <NuxtImg
+            v-if="screenWidth < 1350"
             provider="strapi"
             src="/uploads/DML_Logo_mint_negative_2024_9257db5430.svg"
             alt="digimedialoop Logo"
             width="120"
-            v-if="screenWidth < 1350"
           />
           </div>         
           
-          <NuxtLinkLocale
-            v-for="link in navigationLinks"
-            :key="link.routeKey"
-            :to="localePath(link.routeKey)"
-            @click="handleMobileClose"
-          >
-            {{ $t(link.label) }}
-          </NuxtLinkLocale>
+          <span class="main-nav">
+            <span
+              v-for="link in navigationLinks"
+              :key="link.routeKey"
+              class="main-nav-item"
+              @mouseenter="screenWidth >= 1350 && showSubNav(link.routeKey)"
+              @keydown.enter="showSubNav(link.routeKey)"
+            >
+              <NuxtLinkLocale
+                :to="link.routeKey"
+                class="main-nav-link"
+                :aria-haspopup="link.subNav && link.subNav.length > 0 ? 'true' : undefined"
+                :aria-expanded="isSubNavOpen === link.routeKey ? 'true' : 'false'"
+                @click="handleMobileClose"
+              >
+                {{ $t(link.label) }}
+              </NuxtLinkLocale>
+
+              <!-- Subnavigation -->
+              <ul
+                v-if="link.subNav && link.subNav.length > 0"
+                v-show="isSubNavOpen === link.routeKey || screenWidth < 1350"
+                class="sub-nav"
+              >
+
+                <li
+                  v-for="subLink in link.subNav"
+                  :key="subLink.routeKey"
+                  class="sub-nav-item"
+                >
+                  <NuxtLinkLocale
+                    :to="subLink.routeKey"
+                    class="sub-nav-link"
+                    @click="handleMobileClose"
+                  >
+                    {{ $t(subLink.label) }}
+                  </NuxtLinkLocale>
+                </li>
+              </ul>
+            </span>
+          </span>
+
           <a
               class="menu_link" href="#"
               role="button" 
@@ -62,25 +114,48 @@ class="closer"
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useMainStore } from '@/stores/main'
-import { useRuntimeConfig, navigateTo } from '#app'
-import { useLocalePath } from '#i18n'
 
 const localePath = useLocalePath()
 const mainStore = useMainStore()
-const config = useRuntimeConfig()
+
+const isSubNavOpen = ref(null) // speichert, welches Submenü auf Desktop offen ist
+
+// Funktionen zum Öffnen und Schließen der Subnavigation auf Desktop
+function showSubNav(routeKey) {
+  if (screenWidth.value >= 1350) {
+    isSubNavOpen.value = routeKey
+  }
+}
+
+function hideSubNav() {
+  if (screenWidth.value >= 1350) {
+    isSubNavOpen.value = null
+  }
+}
 
 const navigationLinks = [
-  { routeKey: 'webagency', label: 'webagency' },
-  { routeKey: 'services', label: 'services' },
+  { 
+    routeKey: 'webagency', 
+    label: 'webagency'
+  },
+  { 
+    routeKey: 'services', 
+    label: 'services', 
+    subNav: [
+    { routeKey: 'services-cms', label: 'menuCms' },
+    { routeKey: 'services-seo', label: 'menuSEO' },
+    { routeKey: 'services-accessibility', label: 'menuAccessibility' },
+    { routeKey: 'services-ai', label: 'menuAi' },
+    ] 
+  },
   { routeKey: 'references', label: 'references' }
 ]
 
 const isMenuOpen = computed(() => mainStore.menuOpen)
 const scrollPosition = computed(() => mainStore.scrollPosition)
 const screenWidth = computed(() => mainStore.screenWidth)
-const cmsUrl = computed(() => config.public.cmsBaseUrl)
 
 const toggleMenu = () => mainStore.toggleMenu()
 const toggleContactBubble = () => mainStore.toggleContactBubble()
@@ -88,9 +163,27 @@ const toggleContactBubble = () => mainStore.toggleContactBubble()
 const handleMobileClose = () => {
   if (screenWidth.value < 1350 && isMenuOpen.value) {
     toggleMenu()
+  } else {
+    hideSubNav()
   }
 }
 
+const logoLettering = ref(null)
+const logoShape = ref(null)
+const logoLoop = ref(null)
+
+// Reaktive Manipulation des SVG-Path-Fills
+watchEffect(() => {
+  const shouldBeWhite =
+    scrollPosition.value < (mainStore.heroBoxHeight -70) &&
+    mainStore.darkHeroBack
+
+  if (logoLettering.value) {
+    logoLettering.value.setAttribute('fill', shouldBeWhite ? 'rgb(255,255,255)' : 'rgb(55,55,55)')
+    //logoShape.value.setAttribute('fill', shouldBeWhite ? 'rgb(255,255,255)' : 'rgb(55,55,55)')
+    //logoLoop.value.setAttribute('fill', shouldBeWhite ? 'rgb(55,55,55)' : 'rgb(255,255,255)')
+  }
+})
 </script>
 
 <style lang="sass">
@@ -145,11 +238,11 @@ header
       .logoBox
         width: 50%
         z-index: 102
-        img
+        svg
           margin-top: 1.5rem //5rem
       &.active
         .logoBox
-          img
+          svg
             margin-top: 3rem
       .navigationBox
         display: block
@@ -186,6 +279,35 @@ header
           background: transparent
           border: none
           padding-top: 0rem !important
+
+          .sub-nav
+            list-style: none
+            padding-left: 1.8rem
+            margin: 0
+
+            .sub-nav-item              
+              padding-left: 1rem 
+              margin-bottom: 0.4rem
+
+              .sub-nav-link
+                color: white
+                font-size: 1rem !important
+                line-height: 1.5rem
+                padding: 0.5rem 1.5rem
+                &:hover
+                
+                &::before
+                  content: ''
+                  width: .5rem
+                  height: .4rem
+                  background-color: rgba($primaryColor, .9)
+                  border-radius: $loopShape
+                  position: absolute
+                  top: 1rem
+                  left: 0
+                  border-radius: 20px
+
+
           .menu_link
             margin-left: 1.5rem
             transition: .8s
@@ -193,19 +315,22 @@ header
               transform: scale(1.06)
               background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
               box-shadow: 0 0 0 0 transparent
-              border-radius: 20px
+              border-radius: 20px  
+            
+
           a, .menu_link
             display: block
             color: white
             text-align: left
-            margin-bottom: .5rem
-            padding: 1.6rem 2.8rem .4rem
+            margin-bottom: .2rem
+            padding: 1.4rem 2.8rem .5rem
             position: relative
-            font-size: 1.6rem !important
+            font-size: 1.4rem !important
             width: auto
             max-width: 18rem
             text-transform: uppercase
             font-family: 'Mainfont-Bold'
+            
             &::before
               content: ''
               width: 1rem
@@ -213,7 +338,7 @@ header
               background-color: rgba($primaryColor, .9)
               border-radius: $loopShape
               position: absolute
-              top: 2.4rem
+              top: 2rem
               left: 1rem
               border-radius: 20px
             &:hover
@@ -227,7 +352,7 @@ header
           height: 80vh
           border-radius: 5px
           margin: 0
-          background-color: rgba($darkgrey, .9)
+          background-color: rgba($darkgrey, .97)
           .closer
             &::before, &::after
               top: 2rem
@@ -262,7 +387,7 @@ header
       margin-top: 4.5rem
       @media(max-width: $breakPointMD)
         margin-top: 3rem
-      img
+      svg
         width: 80%
         max-width: 250px
         margin: 4rem 5vw 0 5vw
@@ -301,6 +426,42 @@ header
             background-image: radial-gradient(rgba(white, .5), rgba(white, .1))
             box-shadow: 0 0 10px 10px rgba(white, 0.2)
             border-radius: 10px
+      &.desk
+          .sub-nav
+            display: block
+            position: absolute
+            top: 3rem
+            right: 5%
+            background-color: rgba(white, .95)
+            padding: 2rem
+            text-align: left
+            cursor: pointer
+            border-bottom-left-radius: 1rem
+            border-bottom-right-radius: 1rem
+            list-style: none
+            
+            .sub-nav-item
+              padding: 0 0 1.5rem 0
+
+              .sub-nav-link
+                position: relative
+                margin-left: 1.2rem
+                
+                &::before
+                  content: ''
+                  width: .5rem
+                  height: .4rem
+                  background-color: rgba($primaryColor, .9)
+                  border-radius: $loopShape
+                  position: absolute
+                  top: .4rem
+                  left: -1.3rem
+                  border-radius: 20px
+
+                &:hover
+                  transform: scale(1.025)
+
+
   &.active
     &::before
       top: -13.5rem
@@ -327,7 +488,7 @@ header
             margin: 0 .8rem
       .logoBox
         align-items: left
-        img
+        svg
           margin-bottom: .5rem          
           width: 70%
           max-width: 200px
diff --git a/composables/useI18nPages.ts b/composables/useI18nPages.ts
index 6f7d08a..12fc019 100644
--- a/composables/useI18nPages.ts
+++ b/composables/useI18nPages.ts
@@ -1,4 +1,4 @@
-import { useI18n } from 'vue-i18n'
+/* import { useI18n } from 'vue-i18n'
 import { i18nPages } from '@/i18n/i18n-pages'
 
 export function useI18nPages () {
@@ -31,3 +31,4 @@ export function useI18nPages () {
     getArticleLink
   }
 }
+ */
\ No newline at end of file
diff --git a/i18n/i18n-pages.ts b/i18n/i18n-pages.ts
index ca31c00..9e19bbf 100644
--- a/i18n/i18n-pages.ts
+++ b/i18n/i18n-pages.ts
@@ -7,7 +7,7 @@ export const i18nPages = {
         es: '/inicio',
         tr: '/anasayfa'
       },
-      webagency: {
+    webagency: {
         de: '/webagentur',
         en: '/webagency',
         fr: '/agence-web',
@@ -15,7 +15,7 @@ export const i18nPages = {
         es: '/agencia-web',
         tr: '/web-ajansi'
       },
-      services: {
+    services: {
         de: '/leistungen',
         en: '/services',
         fr: '/services',
@@ -23,23 +23,39 @@ export const i18nPages = {
         es: '/servicios',
         tr: '/hizmetler'
       },    
-      'services/accessibility': {
-        de: '/leistungen/barrierefreiheit',
-        en: '/services/accessibility',
-        fr: '/services/accessibilite',
-        it: '/servizi/accessibilita',
-        es: '/servicios/accesibilidad',
-        tr: '/hizmetler/erisilebilirlik'
-      },    
-      'services/seo': {
-        de: '/leistungen/barrierefreiheit',
-        en: '/services/accessibility',
-        fr: '/services/accessibilite',
-        it: '/servizi/accessibilita',
-        es: '/servicios/accesibilidad',
-        tr: '/hizmetler/erisilebilirlik'
-      },    
-      references: {
+    'services-accessibility': {
+        de: '/leistungen/barrierefreie-webseiten',
+        en: '/services/accessible-websites',
+        fr: '/services/sites-accessibles',
+        it: '/servizi/siti-accessibili',
+        es: '/servicios/sitios-accesibles',
+        tr: '/hizmetler/erisilebilir-websiteler'
+      },
+    'services-seo': {
+        de: '/leistungen/suchmaschinenoptimierung',
+        en: '/services/search-engine-optimization',
+        fr: '/services/optimisation-pour-moteurs-de-recherche',
+        it: '/servizi/ottimizzazione-per-motori-di-ricerca',
+        es: '/servicios/optimizacion-en-buscadores',
+        tr: '/hizmetler/arama-motoru-optimizasyonu'
+      },
+      'services-cms': {
+        de: '/leistungen/headless-cms',
+        en: '/services/headless-cms',
+        fr: '/services/headless-cms',
+        it: '/servizi/headless-cms',
+        es: '/servicios/headless-cms',
+        tr: '/hizmetler/headless-cms'
+      }, 
+      'services-ai': {
+        de: '/leistungen/ki-kompatible-webseiten',
+        en: '/services/ai-compatible-websites',
+        fr: '/services/sites-compatibles-ia',
+        it: '/servizi/siti-compatibili-ai',
+        es: '/servicios/sitios-compatibles-ai',
+        tr: '/hizmetler/ai-uyumlu-websiteler'
+      },   
+    references: {
         de: '/referenzen',
         en: '/references',
         fr: '/références',
@@ -47,7 +63,7 @@ export const i18nPages = {
         es: '/referencias',
         tr: '/referanslar'
       },
-      imprint: {
+    imprint: {
         de: '/impressum',
         en: '/imprint',
         fr: '/mentions-legales',
@@ -55,17 +71,15 @@ export const i18nPages = {
         es: '/aviso-legal',
         tr: '/künye'
       },
-      'projekt___link': {
-        paths: {
-          de: '/projekt/:link',
-          en: '/projekt/:link',
-          fr: '/projekt/:link',
-          it: '/projekt/:link',
-          es: '/projekt/:link',
-          tr: '/projekt/:link'
-        }
+    'project-link': {
+        de: '/projekt/[link]',
+        en: '/project/[link]',
+        fr: '/projet/[link]',
+        it: '/progetto/[link]',
+        es: '/proyecto/[link]',
+        tr: '/proje/[link]'      
       },
-      designer: {
+    designer: {
         de: '/designer',
         en: '/designers',
         fr: '/createurs', 
@@ -73,7 +87,7 @@ export const i18nPages = {
         es: '/disenadores',
         tr: '/tasarimcilar'
       },     
-      privacy: {
+    privacy: {
         de: '/datenschutz',
         en: '/privacy',
         fr: '/confidentialite',
@@ -81,7 +95,7 @@ export const i18nPages = {
         es: '/privacidad',
         tr: '/gizlilik'
       },
-      terms: {
+    terms: {
         de: '/agb',
         en: '/terms',
         fr: '/conditions',
@@ -89,7 +103,7 @@ export const i18nPages = {
         es: '/condiciones',
         tr: '/kosullar'
       },
-      magazin: {
+    magazin: {
         de: '/wissenswertes',
         en: '/magazine',
         fr: '/magazine',
@@ -97,14 +111,12 @@ export const i18nPages = {
         es: '/revista',
         tr: '/dergi'
       },
-      'artikel___link': {
-        paths: {
-          de: '/artikel/:link',
-          en: '/artikel/:link',
-          fr: '/artikel/:link',
-          it: '/artikel/:link',
-          es: '/artikel/:link',
-          tr: '/artikel/:link'
-        }
-      },
+    'article-link': {
+          de: '/artikel/[link]',
+          en: '/article/[link]',
+          fr: '/article/[link]',
+          it: '/articolo/[link]',
+          es: '/articulo/[link]',
+          tr: '/makale/[link]'
+    },
 }
\ No newline at end of file
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 73bb605..881c7ca 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -4,6 +4,10 @@
     "upperBavaria": "Oberbayern",
     "webagency": "Webagentur",
     "services": "Leistungen",
+    "menuAi": "KI-kompatible Webseiten",
+    "menuCms": "Headless Content-Management-System (CMS)",
+    "menuAccessibility": "Barrierefeies Webdesign",
+    "menuSEO": "Suchmaschinen-Optimierung (SEO)",
     "contact": "Kontakt",
     "references": "Referenzen",
     "referenceoverview": "Referenzübersicht",
@@ -51,7 +55,7 @@
         }
     },
     "faqBox": {
-        "questions": "Fragen?",
+        "questions": "Weitere Fragen?",
         "faqsDefault": "Häufig gestellte Fragen (FAQs)",
         "btnDefault": "Sprechen Sie uns gerne an!"
     },
@@ -166,14 +170,71 @@
                 "hero": {
                     "headline1": "Barrierefeies Webdesign",
                     "headline2": "Zugänglichkeit für Mensch und Maschine nach den Standards WCAG und BITV",
-                    "headline3": "Verständlich, nutzbar und robust, für eine inklusive und zukunftssichere Webseite"
+                    "headline3": "Verständlich, nutzbar und robust, für eine inklusive und zukunftssichere Webseite",
+                    "ariaLabel": "Barrierefreies Webdesign"
                 }
             },
             "seo": {
                 "hero": {
                     "headline1": "Suchmaschinen-Optimierung",
                     "headline2": "mit strukturierten Daten, Meta-Tags und semantischem HTML",
-                    "headline3": "Mehr Sichbarkeit durch technische Exzellenz!"
+                    "headline3": "Mehr Sichbarkeit durch technische Exzellenz!",
+                    "ariaLabel": "Suchmaschinen-Optimierung"
+                }
+            },
+            "cms": {
+                "hero": {
+                    "headline1": "Flexibles Headless Content-Management-System",
+                    "headline2": "mit strukturierten Daten, Meta-Tags und semantischem HTML",
+                    "headline3": "Mehr Sichbarkeit durch technische Exzellenz",
+                    "ariaLabel": "Content-Management-System"
+                }
+            },
+            "ai": {
+                "hero": {
+                    "ariaLabel": "Hero-Bereich: KI-kompatible Webseiten",
+                    "headline1": "KI-kompatible Webseiten",
+                    "headline2": "Strukturierte, maschinenlesbare Inhalte für eine neue Generation digitaler Assistenten.",
+                    "headline3": "Bereit für Chatbots, Sprachsuche und generative KI-Systeme wie ChatGPT & Co.?"
+                },
+                "whyAI": {
+                    "headline": "Warum KI-Kompatibilität im Web immer wichtiger wird",
+                    "text1": "KI-Assistenten greifen heutzutage nicht nur auf strukturierte Inhalte im Web zu, um präzise Antworten zu liefern, sondern auch, um direkt mit Webseiten zu interagieren. Sie nehmen Buchungen vor, lösen Bestellungen aus oder vereinbaren Termine.",
+                    "text2": "Wer sicherstellen möchte, dass die eigene Webseite dabei berücksichtigt wird, muss eine technische Grundlage schaffen, um Sichtbarkeit zu sein und Interaktion zu ermöglichen."
+                },
+                "targetGroup": {
+                      "headline": "Für wen lohnt sich eine KI-kompatible Webseite?",
+                      "point1_headline": "Content-Ersteller & Medienunternehmen",
+                      "point1_description": "Maximieren Sie Ihre Reichweite, indem KI Ihre Inhalte intelligent versteht und verteilt.",
+                      "point2_headline": "Onlineshop-Betreiber",
+                      "point2_description": "Ermöglichen Sie Kunden, Ihre Produkte per Sprachbefehl zu finden und direkt zu kaufen.",
+                      "point3_headline": "Dienstleister & Freiberufler",
+                      "point3_description": "Werden Sie per Sprachsuche schnell gefunden und bieten Sie unkomplizierte Terminbuchungen an.",
+                      "point4_headline": "Unternehmen mit digitaler Wachstumsstrategie",
+                      "point4_description": "Bleiben Sie auf Suchmaschinen und bei KI-Assistenten an der Spitze der Sichtbarkeit."
+                },
+                "howItWorks": {
+                    "headline": "Was macht eine Webseite KI-kompatibel?",
+                    "pretext": "Damit künstliche Intelligenzen Webseiten richtig verstehen und Inhalte optimal nutzen können, braucht es mehr als nur gute Texte und schönes Design. Es braucht eine klar strukturierte, technisch saubere Basis.",
+                    "point1": "Strukturierte Daten via Schema.org & JSON-LD",
+                    "point2": "Semantisches HTML für kontextuelles Verständnis",
+                    "point3": "Logische Inhalts-Hierarchien",
+                    "point4": "Optimierung für Sprachsuche & Featured Snippets",
+                    "point5": "Content-Strategien für Large Language Models (LLMs)",
+                    "point6": "Maschinenlesbare Metadaten & Open Graph Tags",
+                    "posttext": "All diese maschinenlesbaren Strukturen integrieren wir direkt im Code. Ohne Plugins, ohne Umwege. So bleiben Performance und Kontrolle erhalten und die Basis der Website ist von Grund auf KI-optimiert."
+                },
+                "howWeDo": {
+                    "headline": "Wie wir KI-Kompatibilität mit Nuxt + Strapi umsetzen",
+                    "text": "Unser Headless-Ansatz mit Nuxt 3 und Strapi ermöglicht volle Kontrolle über Metadaten, Struktur und Performance.",
+                    "point1": "Integration strukturierter Daten direkt im CMS",
+                    "point2": "SEO-optimiertes Rendering durch SSR & SSG",
+                    "point3": "Zentrale Steuerung aller Meta- und JSON-LD-Daten",
+                    "point4": "Flexible Inhaltsmodelle für semantischen Aufbau",
+                    "point5": "Anpassung für Chatbots, Sprachassistenten und KI-Crawler"
+                },
+                "faq": {
+                    "headline": "Weitere Fragen zum Thema künstliche Intelligenz im Webdesign"
                 }
             }
         },
diff --git a/layouts/default.vue b/layouts/default.vue
index ee745f3..6d4bd0a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -17,11 +17,16 @@
   </template>
   
   <script setup>
-
+  import { useMainStore } from '@/stores/main'
+  const mainStore = useMainStore()
   import { usePageMeta } from '~/composables/usePageMeta'
   
   usePageMeta()
 
+  onBeforeMount(() => {
+    mainStore.setDarkHeroBack(false) // Standardmäßig false
+  })
+
   </script>
 
 <style lang="sass">
@@ -168,19 +173,22 @@ main
 
   .check
     list-style: none
-    padding: .2rem 1rem
-    margin: 0
-  
+    padding: 0 0 1rem 1rem
+
     li
-      position: relative
-      padding-left: 1.5em
-      margin: .8em 0
-  
-      &::before
-        content: "\2713"
-        position: absolute
-        left: 0
-        color: $primaryColor
+        position: relative
+        padding-left: 2rem
+        font-size: 1rem
+        margin-bottom: 1rem
+
+        &::before
+            content: "✔"
+            color: $primaryColor
+            font-weight: bold
+            position: absolute
+            font-size: 1.4rem
+            left: 0
+            top: 0
     
   section
     margin-bottom: 5vh
diff --git a/pages/artikel/[link].vue b/pages/article/[link].vue
similarity index 97%
rename from pages/artikel/[link].vue
rename to pages/article/[link].vue
index 89635e1..179dee6 100644
--- a/pages/artikel/[link].vue
+++ b/pages/article/[link].vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="article" v-if="article">
+  <div v-if="article" class="article">
     <SideBarNaviSlider link="/wissenswertes">
       {{ $t('pages.article.artikelUebersicht') }}
     </SideBarNaviSlider>
@@ -30,12 +30,12 @@
     </section>
 
     <section class="articleBox container">
-      <div v-html="htmlContent(article.content)" class="content"></div>
+      <div class="content" v-html="htmlContent(article.content)"/>
       <button
-        @click.prevent="toggleContactBubble"
         class="pinkBtn"
         role="button"
         aria-label="Kontakt aufnehmen"
+        @click.prevent="toggleContactBubble"
       >
         {{ $t('pages.article.kontaktieren') }}
       </button>
@@ -49,6 +49,9 @@
 
   
   <script setup>
+  definePageMeta({  
+    name: 'article-link'
+  })
   import { computed } from 'vue'
   import { useRoute } from 'vue-router'
   import { useMainStore } from '@/stores/main'
diff --git a/pages/designer/index.vue b/pages/designer/index.vue
index c74eebb..122410a 100644
--- a/pages/designer/index.vue
+++ b/pages/designer/index.vue
@@ -37,18 +37,18 @@
                 </ul>
                 <p><b>Du bleibst der kreative Kopf!</b><br>
                 Ich sorge dafür, dass dein Design genauso im Web erscheint, wie du es geplant hast – mit Top-Performance & perfekter technischer Umsetzung.</p>
-                <button class="pinkBtn" @click.prevent="toggleContactBubble" role="button">Lass uns kennenlernen</button>
+                <button class="pinkBtn" role="button" @click.prevent="toggleContactBubble">Lass uns kennenlernen</button>
             </div>
             
         </section>
-        <section class="deviceCheck" v-if="false">
+        <section v-if="false" class="deviceCheck">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6">
                         <p class="supheadlinePink">Responsive Check</p>
                         <h2>Wie sieht deine Webseite auf den verschiedenen Bildschirmbreiten aus?</h2>
                         <h3>Probiers einfach aus!</h3>
-                        <input type="text" placeholder="https://www.deinewebseite.de" v-model="weblink" @keyup.enter="updateIframe">
+                        <input v-model="weblink" type="text" placeholder="https://www.deinewebseite.de" @keyup.enter="updateIframe">
                     </div>
                     <div class="col-md-6">
                         <svg v-if="desk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 450">
@@ -81,7 +81,7 @@
                                 <rect id="deskScreenBlank" x="46" y="47.5" width="409.5" height="221.5" transform="matrix(1,0,0,1,0,0)" fill="rgb(0,0,0)"/>
                                 <g>
                                     <foreignObject v-if="isValidUrl(weblink)" id="deskScreen" x="46" y="47.5" width="409.5" height="221.5">
-                                        <iframe ref="iframeRef" :src="weblink" frameborder="0"></iframe>
+                                        <iframe ref="iframeRef" :src="weblink" frameborder="0"/>
                                     </foreignObject>   
                                 </g>     
                             </g>
@@ -119,19 +119,20 @@
             </div>
         </section>
         <Recommendations />
-        <section class="contrastCalcLink" v-if="false">
+        <section v-if="false" class="contrastCalcLink">
             <div class="container">
                         <img src="https://strapi.digimedialoop.de/uploads/wcag_kontrastrechner_77abf9d9be.png" alt="kontrast check" class="imgRight">
                         <p class="supheadlinePink">Barrierefreies Webdesign</p>
                         <h2>Hat Dein Design den richtigen Kontrast?</h2>
                         <p>Mit dem praktischen Kontrastchecker kannst Du herausfinden, ob die Schrift und der Hintergrund in Deinem Design den WCAG_Richtlinien entsprechen. So stellst Du sicher, dass Dein Design für alle gut lesbar ist.</p>
-                        <button class="mintBtn" @click.prevent="navigateTo('/toolbox/kontrastchecker')"
-            role="button"
-            aria-label="Zum Kontrastchecker">Jetzt kostenlos Konstrast prüfen</button>
+                        <button
+class="mintBtn" role="button"
+            aria-label="Zum Kontrastchecker"
+            @click.prevent="navigateTo('/toolbox/kontrastchecker')">Jetzt kostenlos Konstrast prüfen</button>
             </div>
         </section>
         <FAQArea 
-            pageLink="/webentwicklung-fuer-designer-und-mediengestalter" 
+            page-link="/webentwicklung-fuer-designer-und-mediengestalter" 
             headline="Wichtige Antworten zur Zusammenarbeit im Überblick für Dich" 
             button="Dann lass uns quatschen!"
         />
@@ -139,11 +140,11 @@
 </template>
 
 <script setup>
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
+import { useMainStore } from '@/stores/main';
 definePageMeta({
   name: 'designer'
 })
-import { ref, onMounted, onUnmounted, nextTick } from "vue";
-import { useMainStore } from '@/stores/main';
 // Lade diese Komponente synchron wegen SEO
 
 
diff --git a/pages/index.vue b/pages/index.vue
index d52adff..b5a054b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,6 +8,7 @@
         headline2: 'pages.services.hero.headline2',
         headline3: 'pages.services.hero.headline3'
       }"
+      :dark-background="true"
     /> 
 
     <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
@@ -32,7 +33,9 @@
           <li>{{ $t('pages.services.explain.bullet4') }}</li>
           <li>{{ $t('pages.services.explain.bullet5') }}</li>
         </ul>
+        <button @click="navigateTo(localePath('accessibility'))">Informationen zu barrierefreien Webseiten</button>
       </div>
+      
     </section>  
 
 
@@ -88,6 +91,10 @@ class="pinkBtn mt-3"
 import { useMainStore } from '@/stores/main';
 import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
+import { useRuntimeConfig, navigateTo } from '#app'
+import { useLocalePath } from '#i18n'
+
+const localePath = useLocalePath()
 
 const mainStore = useMainStore();
 const { customers } = storeToRefs(mainStore);
diff --git a/pages/magazin/index.vue b/pages/magazin/index.vue
index af831a8..f75c5e4 100644
--- a/pages/magazin/index.vue
+++ b/pages/magazin/index.vue
@@ -16,7 +16,7 @@
           class="article"
         >
         
-        <NuxtLink :to="getArticleLink(article.slug)" class="article-link">
+        <NuxtLinkLocale :to="localePath({ name: 'article-link', params: { link: article.slug } })" class="article-link">
           <div class="image-wrapper">
             <NuxtImg
               v-if="article.image?.url"
@@ -31,7 +31,7 @@
               <button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
             </div>
           </div>
-        </NuxtLink>
+        </NuxtLinkLocale>
 
 
         </div>
@@ -42,14 +42,14 @@
 
 
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { watch } from 'vue'
 import { useMainStore } from '@/stores/main'
 import { storeToRefs } from 'pinia'
+import { useLocalePath } from '#i18n'
+const localePath = useLocalePath()
 
 const mainStore = useMainStore()
-const { articles, cmsUrl } = storeToRefs(mainStore)
-
-const { getArticleLink } = useI18nPages()
+const { articles } = storeToRefs(mainStore)
 
 const truncateText = (text: string, length = 200) =>
   text?.length > length ? text.substring(0, length) + '…' : text
@@ -58,6 +58,7 @@ const currentDomain = typeof window !== 'undefined'
   ? window.location.origin
   : 'https://www.digimedialoop.de'
 
+
 // SEO: JSON-LD für Artikelübersicht
 watch(articles, (newVal) => {
   if (newVal?.length) {
diff --git a/pages/projekt/[link].vue b/pages/project/[link].vue
similarity index 98%
rename from pages/projekt/[link].vue
rename to pages/project/[link].vue
index efcbc7d..5eef9ff 100644
--- a/pages/projekt/[link].vue
+++ b/pages/project/[link].vue
@@ -46,8 +46,8 @@
               :src="img.url"
               :alt="img.alternativeText"
               provider="strapi"
-              @click="setCurrentImage(img)"
               :class="{ active: currentImage?.url === img.url }"
+              @click="setCurrentImage(img)"
             />
           </div>
          </div>
@@ -55,7 +55,7 @@
 
 
        <div class="col-lg-8 pt-4">
-         <span v-html="htmlContent(project.projectDescription)"></span>
+         <span v-html="htmlContent(project.projectDescription)"/>
 
 
          <h4>{{ t('project.detail.technologies', 'Verwendete Technologien') }}</h4>
@@ -68,7 +68,7 @@
              {{ tech.titel }}
            </span>
          </div>
-         <div class="row" v-if="project.webpage">
+         <div v-if="project.webpage" class="row">
            <div class="col-12 text-end">
              <a
                class="webPageBtn"
@@ -93,15 +93,20 @@
 </template>
 
 <script setup lang="ts">
+definePageMeta({  
+  name: 'project-link'
+})
 import { ref, computed, watch } from "vue"
 import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
-const localePath = useLocalePath()
 
 import { useRoute, useRouter } from 'vue-router'
-const route = useRoute()
 
 import { useMainStore } from '@/stores/main'
+
+import { useHtmlConverter } from '@/composables/useHTMLConverter'
+const { t } = useI18n()
+const localePath = useLocalePath()
+const route = useRoute()
 const mainStore = useMainStore()
 const project = computed(() => mainStore.getProjectByLink(route.params.link))
 const customer = computed(() => {
@@ -121,8 +126,6 @@ watch(project, (newProject) => {
     currentImage.value = null
   }
 })
-
-import { useHtmlConverter } from '@/composables/useHTMLConverter'
 const { convertToHTML } = useHtmlConverter()
 const htmlContent = (data: string) => {
  return convertToHTML(data)
diff --git a/pages/references/index.vue b/pages/references/index.vue
index eb16fc6..4db5b9f 100644
--- a/pages/references/index.vue
+++ b/pages/references/index.vue
@@ -3,18 +3,18 @@
     <section class="topSpace">
       <div class="container">
         <h1>{{ $t('pages.references.hero.h1') }}</h1>
-        <p v-html="$t('pages.references.hero.p')"></p>
+        <p v-html="$t('pages.references.hero.p')"/>
       </div>
     </section>
 
     <section>
-      <div class="referenceBox" v-if="projects && projects.length">
+      <div v-if="projects && projects.length" class="referenceBox">
         <slot>
-          <NuxtLink
-            class="reference"
+          <NuxtLinkLocale
             v-for="project in projects"
             :key="project.id"
-            :to="getProjectLink(project.link)"
+            class="reference"
+            :to="localePath({ name: 'project-link', params: { link: project.link } })"
           >
             <NuxtImg
               provider="strapi"
@@ -38,7 +38,7 @@
                 />
               </div>
             </div>
-          </NuxtLink>
+          </NuxtLinkLocale>
         </slot>
       </div>
     </section>
@@ -46,7 +46,7 @@
     <CallToActionBox
       :headline="$t('pages.references.ctaBox.headline')"
       :text="$t('pages.references.ctaBox.text')"
-      :buttonText="$t('pages.references.ctaBox.button')"
+      :button-text="$t('pages.references.ctaBox.button')"
     />
 
   </div>
@@ -55,6 +55,8 @@
 <script setup>
 import { useMainStore } from '@/stores/main'
 import { storeToRefs } from 'pinia'
+import { useLocalePath } from '#i18n'
+const localePath = useLocalePath()
 
 const runtimeConfig = useRuntimeConfig();
 const cmsUrl = runtimeConfig.public.cmsBaseUrl
@@ -62,8 +64,6 @@ const cmsUrl = runtimeConfig.public.cmsBaseUrl
 const mainStore = useMainStore()
 const { projects } = storeToRefs(mainStore)
 
-import { useI18nPages } from '@/composables/useI18nPages'
-const { getProjectLink } = useI18nPages()
 
 function getCustomerLogo(customerId) {
   if (!customerId) return ''
@@ -95,7 +95,7 @@ const jsonLdProjects = computed(() => {
       "position": index + 1,
       "item": {
         "@type": "CreativeWork", // alternativ "WebPage", wenn es sich um Projektseiten handelt
-        "@id": origin + (project.link ? getProjectLink(project.link) : ''),
+        "@id": origin + (project.link ? project.link : ''),
         "name": project.projectTitle || 'Projekt',
         "image": cmsUrl + (project.projectImages?.[0]?.url || ''),
         "description": project.projectDescription?.[0]?.children?.[0]?.text || ''
diff --git a/pages/services/accessibility/index.vue b/pages/services/accessibility/index.vue
index 48d868e..af3d9c4 100644
--- a/pages/services/accessibility/index.vue
+++ b/pages/services/accessibility/index.vue
@@ -8,11 +8,89 @@
                 headline2: 'pages.services.accessibility.hero.headline2',
                 headline3: 'pages.services.accessibility.hero.headline3'
             }"
+            overlay-image="/uploads/DML_Access_Key_3ccf07fbb4.webp"
+            overlay-alt-text="barrierefreiheit symbol"
+            :overlay-width="'30%'"
+            :overlay-position="{ bottom: '5%', right: '1vw' }"
+            :dark-background="true"
         /> 
+        <section class="targetGroup">
+            
+            <div class="container-10">
+                <NuxtImg
+                provider="strapi"
+                src="/uploads/rollstuhl_a67c73b6a9.webp"
+                alt="accessibility"
+                />
+                <h2>Für wen ist Barrierefreiheit wichtig?</h2>
+                <p>Barrierefreiheit macht Ihre Webseite nicht nur für alle Menschen, insbesondere für Menschen mit Einschränkungen zugänglich, sondern verbessert auch die Auffindbarkeit bei Suchmaschinen und die Nutzbarkeit durch moderne KI-Systeme.</p>
+                <h3>Auf was kommt es bei Barrierefreiheit im Web an?</h3>
+                <ul class="check">
+                    <li><b>Tastaturbedienbarkeit:</b> Alle Funktionen sind ohne Maus erreichbar.</li>
+                    <li><b>Kontraststarke Gestaltung:</b> Gute Lesbarkeit für alle Sehfähigkeiten.</li>
+                    <li><b>Screenreader-Kompatibilität:</b> Inhalte werden klar und verständlich vorgelesen.</li>
+                    <li><b>Logische Struktur:</b> Überschriften und Inhalte folgen einer nachvollziehbaren Reihenfolge.</li>
+                    <li><b>Barrierefreie Medien:</b> Texte als Alternativen, keine automatisch startenden Videos ohne Kontrolle.</li>
+                </ul>
+                <h3>Möchten Sie wissen, wie barrierefrei Ihre aktuelle Webseite ist?</h3>
+            <button
+class="pinkBtn" role="button"
+                aria-label="Barrierefreiheitscheck"
+                @click.prevent="toggleContactBubble">Kostenlosen Barrierefreiheits-Check anfordern!</button>
+            </div>
+            
+        </section>
+
+        <section class="legalBasis">
+            <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+                    <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+            </svg> 
+            <div class="container-10">
+                <h2>Rechtliche Grundlagen für Barrierefreiheit in Deutschland und der EU</h2>
+                <p>Barrierefreiheit im Web ist nicht nur eine gute Praxis, sondern in Deutschland und der Europäischen Union auch gesetzlich vorgeschrieben. Diese Vorgaben sollen sicherstellen, dass digitale Angebote für alle Menschen uneingeschränkt nutzbar sind.</p>
+
+                <h3>Wichtige Gesetze und Verordnungen:</h3>
+                <ul class="check">
+                    <li><b>Behindertengleichstellungsgesetz (BGG):</b> Regelt die Barrierefreiheit öffentlicher Einrichtungen und deren digitale Angebote in Deutschland.</li>
+                    <li><b>Barrierefreie-Informationstechnik-Verordnung (BITV 2.0):</b> Konkretisiert die Anforderungen des BGG für Webseiten und mobile Anwendungen öffentlicher Stellen.</li>
+                    <li><b>EU-Richtlinie 2016/2102:</b> Verpflichtet öffentliche Stellen der Mitgliedstaaten, ihre Websites und mobilen Apps barrierefrei zu gestalten.</li>
+                    <li><b>European Accessibility Act (EAA):</b> Richtlinie für barrierefreie Produkte und Dienstleistungen, inklusive digitaler Angebote.</li>
+                    <li><b>WCAG 2.1 (Web Content Accessibility Guidelines):</b> International anerkannte technische Standards, die als Basis für gesetzliche Vorgaben dienen.</li>
+                </ul>                
+                <p>Die Einhaltung dieser Regelungen schützt Sie vor Abmahnungen und verbessert Ihre Reichweite durch bessere Zugänglichkeit für alle Nutzer.</p>
+            </div>
+            <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+            </svg> 
+        </section>
+
+        <section class="implementation">
+            <div class="container-10">
+                <h2>Wie wir Barrierefreiheit für Sie umsetzen</h2>
+                <p>
+                Mit Nuxt im Front-End und Strapi als flexiblem Headless CMS im Back-End, realisieren wir barrierefreie Webseiten, die sowohl technisch sauber als auch leicht wartbar sind. 
+                Durch die Trennung von Front-End und Back-End können Inhalte effizient gepflegt und barrierefreie Standards systematisch umgesetzt werden.
+                </p>
+                <h3>Vorteile gegenüber klassischen CMS wie WordPress oder Contao</h3>
+                <ul class="check">
+                <li><b>Modulare Architektur:</b> Flexible Komponenten und wiederverwendbare Module erleichtern die Umsetzung von Barrierefreiheitsstandards.</li>
+                <li><b>Performance:</b> Nuxt generiert schnelle, serverseitig gerenderte Seiten, die für Nutzer und Suchmaschinen gleichermaßen optimal sind.</li>
+                <li><b>SEO & KI-Freundlichkeit:</b> Durch gezielte Meta-Tags und strukturierte Daten unterstützen wir bessere Auffindbarkeit und Kompatibilität mit KI-Systemen.</li>
+                <li><b>Content-Management:</b> Strapi ermöglicht barrierefreie Inhalte mit benutzerfreundlichen Editoren und unterstützt mehrsprachige Seiten einfach.</li>
+                <li><b>Zukunftssicherheit:</b> Moderne Technologien garantieren nachhaltige Wartbarkeit und Erweiterbarkeit der Webseite.</li>
+                </ul>
+                <button v-if="false" class="mintBtn">Mehr zum Thema Headless CMS</button>
+            </div>
+            
+            </section>
+
+            <FAQArea page-link="/leistungen/barrierefreie-webseiten" headline="Weitere Fragen zum Thema Barrierefreiheit im Web" />
+
     </div>
 </template>
 
 <script setup>
+import { useMainStore } from '@/stores/main';
 definePageMeta({
   alias: [
     '/leistungen/barrierefreie-webseiten', // Deutsch
@@ -21,11 +99,27 @@ definePageMeta({
     '/servizi/accessibilita',              // Italienisch
     '/servicios/accesibilidad',            // Spanisch
     '/hizmetler/erisilebilirlik'           // Türkisch
-  ]
+  ],
+  name: 'services-accessibility'
 })
-
+const mainStore = useMainStore();
+const toggleContactBubble = () => mainStore.toggleContactBubble();
 </script>
 
 <style lang="sass">
-
+.accessiblityPage
+    .legalBasis
+        background: linear-gradient(90deg, #39324A 0%, #403871 100%);
+        color: white
+        padding: 12vh 0
+        margin: 8vh 0
+    .targetGroup
+        img
+            float: left
+            width: 30%
+            max-width: 400px
+            margin: 1rem 2rem 2rem 0
+    .implementation
+        margin: 8vh 0
+        padding: 1vh 0 3vh 0
 </style>
\ No newline at end of file
diff --git a/pages/services/ai/index.vue b/pages/services/ai/index.vue
new file mode 100644
index 0000000..aad08bb
--- /dev/null
+++ b/pages/services/ai/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="aiPage">
+    <HeroBox
+      image="/uploads/DML_Service_Header_AI_639dd0d7b1.webp"
+      :aria-label="$t('pages.services.ai.hero.ariaLabel')"
+      :content="{
+        headline1: 'pages.services.ai.hero.headline1',
+        headline2: 'pages.services.ai.hero.headline2',
+        headline3: 'pages.services.ai.hero.headline3'
+      }"
+      overlay-image="/uploads/kirby_fly_3de66b2839.webp"
+      overlay-alt-text="ki roboter fliegt"
+      :overlay-width="'32%'"
+      :overlay-position="{ top: '28%', right: '3vw' }"
+      :dark-background="true"
+    /> 
+    <section class="whyAI">
+      <div class="container-10">
+        <NuxtImg
+          provider="strapi"
+          src="/uploads/AI_robot_67b96e6a17.webp"
+          alt="roboter sitzt auf mouse"
+          aria-hidden="true"
+        />
+        <h2>{{ $t('pages.services.ai.whyAI.headline') }}</h2>
+        <p>{{ $t('pages.services.ai.whyAI.text1') }}</p>
+        <p>{{ $t('pages.services.ai.whyAI.text2') }}</p>
+      </div>
+    </section>
+
+    <section class="targetGroup">
+      <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+      </svg> 
+      <div class="container-10">
+  <h2>{{ $t('pages.services.ai.targetGroup.headline') }}</h2>
+  <ul class="check">
+    <li>
+      <strong>{{ $t('pages.services.ai.targetGroup.point1_headline') }}</strong><br>
+      {{ $t('pages.services.ai.targetGroup.point1_description') }}
+    </li>
+    <li>
+      <strong>{{ $t('pages.services.ai.targetGroup.point2_headline') }}</strong><br>
+      {{ $t('pages.services.ai.targetGroup.point2_description') }}
+    </li>
+    <li>
+      <strong>{{ $t('pages.services.ai.targetGroup.point3_headline') }}</strong><br>
+      {{ $t('pages.services.ai.targetGroup.point3_description') }}
+    </li>
+    <li>
+      <strong>{{ $t('pages.services.ai.targetGroup.point4_headline') }}</strong><br>
+      {{ $t('pages.services.ai.targetGroup.point4_description') }}
+    </li>
+  </ul>
+</div>
+
+      <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+      </svg> 
+    </section>
+
+    <section class="howItWorks">
+      <div class="container-10">
+        <h2>{{ $t('pages.services.ai.howItWorks.headline') }}</h2>
+      </div>
+      
+      <div class="coderWrap">        
+        <div class="text">
+          
+          <p>{{ $t('pages.services.ai.howItWorks.pretext') }}</p>
+          <ul class="check">
+            <li>{{ $t('pages.services.ai.howItWorks.point1') }}</li>
+            <li>{{ $t('pages.services.ai.howItWorks.point2') }}</li>
+            <li>{{ $t('pages.services.ai.howItWorks.point3') }}</li>
+            <li>{{ $t('pages.services.ai.howItWorks.point4') }}</li>
+            <li>{{ $t('pages.services.ai.howItWorks.point5') }}</li>
+            <li>{{ $t('pages.services.ai.howItWorks.point6') }}</li>
+          </ul>
+          <p>{{ $t('pages.services.ai.howItWorks.posttext') }}</p>
+        </div>
+        <div class="coderArea">
+          <SchemaCoder />
+        </div>
+      </div>
+    </section>
+
+    <section class="howWeDo">
+      <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+      </svg> 
+      <div class="container-10">
+        <h2>{{ $t('pages.services.ai.howWeDo.headline') }}</h2>
+        <p>{{ $t('pages.services.ai.howWeDo.text') }}</p>
+        <ul class="check">
+          <li>{{ $t('pages.services.ai.howWeDo.point1') }}</li>
+          <li>{{ $t('pages.services.ai.howWeDo.point2') }}</li>
+          <li>{{ $t('pages.services.ai.howWeDo.point3') }}</li>
+          <li>{{ $t('pages.services.ai.howWeDo.point4') }}</li>
+          <li>{{ $t('pages.services.ai.howWeDo.point5') }}</li>
+        </ul>
+      </div>
+      <svg class="sectionWave wave-bottom" style="transform: scale(-1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+      </svg> 
+    </section>
+
+    <FAQArea
+      page-link="/leistungen/ki-kompatible-webseiten"
+      :headline="$t('pages.services.ai.faq.headline')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useMainStore } from '@/stores/main'
+const mainStore = useMainStore()
+definePageMeta({
+  alias: [
+    '/leistungen/ki-kompatible-webseiten', // Deutsch
+    '/services/ai-compatible-websites',    // Englisch
+    '/services/sites-compatibles-ia',      // Französisch
+    '/servizi/siti-compatibili-ai',        // Italienisch
+    '/servicios/sitios-compatibles-ai',    // Spanisch
+    '/hizmetler/ai-uyumlu-websiteler'      // Türkisch
+  ],
+  name: 'services-ai'
+})
+</script>
+
+<style lang="sass">
+.aiPage
+  .targetGroup
+    background: linear-gradient(90deg, #3A283E 0%, #6A3385 100%);
+    color: white
+    padding: 12vh 0
+    margin: 8vh 0
+    li
+      line-height: 1.5rem
+      margin-bottom: 1.5rem
+    strong
+      font-size: 110%
+      
+  .howWeDo
+    background: linear-gradient(90deg, #6A3385 0%, #3A283E 100%);
+    color: white
+    padding: 12vh 0
+    margin: 8vh 0
+  .whyAI
+    padding: 3% 0
+    img
+      width: 30%
+      max-width: 280px
+      float: left
+      margin: 1% 6vw 5% 0
+  .howItWorks
+    overflow: hidden
+    .coderWrap
+      display: flex
+      align-items: center
+      justify-content: flex-start
+      padding-left: 10%
+      position: relative
+    .text
+      flex: 0 0 auto
+      width: 50%
+      margin-left: 2%
+
+    .coderArea
+      flex: 0 0 auto
+      width: 60%
+      transform: translateX(10%)
+      overflow: hidden
+</style>
\ No newline at end of file
diff --git a/pages/services/cms/index.vue b/pages/services/cms/index.vue
new file mode 100644
index 0000000..6b19eb9
--- /dev/null
+++ b/pages/services/cms/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="cmsPage">
+        <HeroBox
+            image="/uploads/DML_Service_Header_CMS_a438599970.webp"
+            :aria-label="$t('pages.services.cms.hero.ariaLabel')"
+            :content="{
+                headline1: 'pages.services.cms.hero.headline1',
+                headline2: 'pages.services.cms.hero.headline2',
+                headline3: 'pages.services.cms.hero.headline3'
+            }"
+            :dark-background="true"
+        /> 
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+  alias: [
+    '/leistungen/headless-cms',                   // Deutsch
+    '/services/headless-cms',                     // Englisch
+    '/services/headless-cms',                     // Französisch
+    '/servizi/headless-cms',                      // Italienisch
+    '/servicios/headless-cms',                    // Spanisch
+    '/hizmetler/headless-cms'                     // Türkisch
+  ],
+  name: 'services-cms'
+})
+</script>
+
+<style lang="sass">
+
+</style>
\ No newline at end of file
diff --git a/pages/services/index.vue b/pages/services/index.vue
index bebe6ac..32e0780 100644
--- a/pages/services/index.vue
+++ b/pages/services/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="servicesPage">
     <section class="heroBox_service" aria-labelledby="hero-heading">
       <NuxtImg
         provider="strapi"
@@ -102,7 +102,7 @@ class="pinkBtn" role="button"
 
     <MarqueeBanner 
       :items="projectItems" 
-      :logoHeight="200" 
+      :logo-height="200" 
       :title="$t('pages.services.marquee.title')" 
       link="projekt" 
       :aria-label="$t('pages.services.marquee.title')"
@@ -112,7 +112,7 @@ class="pinkBtn" role="button"
     <CallToActionBox
       :headline="$t('pages.services.ctaBox.headline')"
       :text="$t('pages.services.ctaBox.text')"
-      :buttonText="$t('pages.services.ctaBox.button')"
+      :button-text="$t('pages.services.ctaBox.button')"
     />
 
   </div>
@@ -253,179 +253,180 @@ watchEffect(() => {
 </script>
 
 <style lang="sass">
-.heroBox_service
-  position: relative
-  min-height: 35rem
-  height: 70vh
-  display: flex
-  align-items: center
-  justify-content: center
-  overflow: hidden           
-
-  .hero-bg
-    position: absolute
-    inset: 0                 
-    width: 100%
-    height: 100%
-    object-fit: cover
-    object-position: center bottom
-    z-index: 0               
-
-  .container-10, h1, h2, h3
+.servicesPage
+  .heroBox_service
     position: relative
-    z-index: 1               
-
-  h1
-    margin-top: 3rem
-    z-index: 2      
-    color: mix(black, $pink, 2%)  
-    font-size: clamp(1rem, .8rem + 1vw, 1.2rem)
-    line-height: 1.5
-    margin-bottom: 0
-    max-width: 70%
-    @media (max-width: $breakPointMD)
-      max-width:  100%
-  h2
-    z-index: 2
-    font-size: clamp(1.4rem, .8rem + 2vw, 2.4rem)
-    line-height: 1.5
-    margin-top: 1rem
-    max-width: 55%
-    font-family: 'Comfortaa'
-    @media (max-width: $breakPointMD)
-      max-width:  90%
-  h3
-    max-width: 55%
-    line-height: 1.5
-    font-size: clamp(1rem, .8rem + 1vw, 1.6rem)
-    @media (max-width: $breakPointMD)
-      max-width:  90%
-  &::after
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    width: 50%
-    height: 100%
-    background-image: linear-gradient(to right, rgba(white, .3), transparent)
-    z-index: 1
-  .container
-    z-index: 2
-
-.webStrategy
-  padding: 4rem 0 3.5rem 0
-  h2
-    font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
-    line-height: 150%
-    font-family: 'Comfortaa'
-    margin-left: 30%
-  h3
-    font-size: clamp(1.1rem, .75rem + 1vw, 1.25rem)
-    line-height: 150%
-    margin-left: 30%
-  p
-    margin-left: 30%
-  button
-    margin-left: 30%
-  &::after
-    content: ''
-    position: absolute
-    top: 5%
-    left: -36vw
-    width: 60vw
-    height: 90%
-    min-height: 550px
-    max-height: 800px
-    background-image: url('https://strapi.digimedialoop.de/uploads/Net_f1020a2216.png')
-    background-repeat: no-repeat
-    background-position: center right
-    background-size: cover
-    border-radius: 42% 49% 52% 48% / 53% 38% 62% 47%
-    animation: bubble-wobble 25s infinite ease alternate, gradient-animation 70s infinite alternate ease-in-out
-    box-shadow: $innerShadow
-    @media(max-width: $breakPointMD)
-        right: -50vw
-.canDo
-  margin: 12vh 0
-  h2
-    margin-bottom: 3.5rem
-    font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
-  .canDoGrid
-    display: grid
-    gap: 2rem
+    min-height: 35rem
+    height: 70vh
+    display: flex
+    align-items: center
     justify-content: center
-    align-items: stretch
-    grid-template-columns: 1fr // Default: 1 Spalte
+    overflow: hidden           
 
-    @media (min-width: $breakPointMD) 
-      grid-template-columns: repeat(2, 1fr)
-
-    @media (min-width: $breakPointXL) 
-      grid-template-columns: repeat(4, 1fr)
-
-    .canDoBox
+    .hero-bg
+      position: absolute
+      inset: 0                 
       width: 100%
-      display: flex
-      flex-direction: column
-      align-items: center
-      justify-content: flex-start
-      background-image: linear-gradient(to bottom right, transparent , white)
-      box-shadow: 3px 3px 8px 1px $lightgrey
-      border-bottom-right-radius: 1rem
-      padding: 1rem 1.5rem
-      border-right: 1px solid lighten($beige, 0%)
-      border-bottom: 1px solid lighten($beige, 0%)
       height: 100%
+      object-fit: cover
+      object-position: center bottom
+      z-index: 0               
 
-    .canDoItem
-      width: 100%
-      
-      .imageBox
-        margin: 0rem auto 1rem auto
+    .container-10, h1, h2, h3
+      position: relative
+      z-index: 1               
+
+    h1
+      margin-top: 3rem
+      z-index: 2      
+      color: mix(black, $pink, 2%)  
+      font-size: clamp(1rem, .8rem + 1vw, 1.2rem)
+      line-height: 1.5
+      margin-bottom: 0
+      max-width: 70%
+      @media (max-width: $breakPointMD)
+        max-width:  100%
+    h2
+      z-index: 2
+      font-size: clamp(1.4rem, .8rem + 2vw, 2.4rem)
+      line-height: 1.5
+      margin-top: 1rem
+      max-width: 55%
+      font-family: 'Comfortaa'
+      @media (max-width: $breakPointMD)
+        max-width:  90%
+    h3
+      max-width: 55%
+      line-height: 1.5
+      font-size: clamp(1rem, .8rem + 1vw, 1.6rem)
+      @media (max-width: $breakPointMD)
+        max-width:  90%
+    &::after
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 50%
+      height: 100%
+      background-image: linear-gradient(to right, rgba(white, .3), transparent)
+      z-index: 1
+    .container
+      z-index: 2
+
+  .webStrategy
+    padding: 4rem 0 3.5rem 0
+    h2
+      font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
+      line-height: 150%
+      font-family: 'Comfortaa'
+      margin-left: 30%
+    h3
+      font-size: clamp(1.1rem, .75rem + 1vw, 1.25rem)
+      line-height: 150%
+      margin-left: 30%
+    p
+      margin-left: 30%
+    button
+      margin-left: 30%
+    &::after
+      content: ''
+      position: absolute
+      top: 5%
+      left: -36vw
+      width: 60vw
+      height: 90%
+      min-height: 550px
+      max-height: 800px
+      background-image: url('https://strapi.digimedialoop.de/uploads/Net_f1020a2216.png')
+      background-repeat: no-repeat
+      background-position: center right
+      background-size: cover
+      border-radius: 42% 49% 52% 48% / 53% 38% 62% 47%
+      animation: bubble-wobble 25s infinite ease alternate, gradient-animation 70s infinite alternate ease-in-out
+      box-shadow: $innerShadow
+      @media(max-width: $breakPointMD)
+          right: -50vw
+  .canDo
+    margin: 12vh 0
+    h2
+      margin-bottom: 3.5rem
+      font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
+    .canDoGrid
+      display: grid
+      gap: 2rem
+      justify-content: center
+      align-items: stretch
+      grid-template-columns: 1fr // Default: 1 Spalte
+
+      @media (min-width: $breakPointMD) 
+        grid-template-columns: repeat(2, 1fr)
+
+      @media (min-width: $breakPointXL) 
+        grid-template-columns: repeat(4, 1fr)
+
+      .canDoBox
         width: 100%
-        max-width: 180px
-        aspect-ratio: 5 / 4
-        object-fit: cover
-        border-radius: 1rem
-        display: block
-
-        &:nth-child(1) 
-          border-radius: $loopShape1
-        &:nth-child(2) 
-          border-radius: $loopShape2
-        &:nth-child(3) 
-          border-radius: $loopShape3
-        &:nth-child(4) 
-          border-radius: $loopShape4
-
-      h3
-        font-size: 1.2rem
-        line-height: 1.5rem
-        text-align: center
-        font-family: 'Mainfont-Bold'
-        color: darken($pink, 10%)
-        text-transform: uppercase
-        margin-bottom: .5rem
-
-      p
-        font-size: .9rem
-        text-align: left !important
+        display: flex
+        flex-direction: column
+        align-items: center
+        justify-content: flex-start
+        background-image: linear-gradient(to bottom right, transparent , white)
+        box-shadow: 3px 3px 8px 1px $lightgrey
+        border-bottom-right-radius: 1rem
+        padding: 1rem 1.5rem
+        border-right: 1px solid lighten($beige, 0%)
+        border-bottom: 1px solid lighten($beige, 0%)
+        height: 100%
 
+      .canDoItem
+        width: 100%
         
-.targetGroup
-  background-image: url('https://strapi.digimedialoop.de/uploads/smartphone_Contacts_40ae56a178.jpg') 
-  background-repeat: no-repeat
-  background-size: cover
-  background-position: center top
-  min-height: 70vh
-  display: flex
-  align-items: center
-  justify-content: center
-  position: relative
-  padding: 3rem 0    
-  h2
-    font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
-  h3
-    font-size: clamp(1.1rem, .8rem + 1vw, 1.2rem)
-    line-height: 150%        
+        .imageBox
+          margin: 0rem auto 1rem auto
+          width: 100%
+          max-width: 180px
+          aspect-ratio: 5 / 4
+          object-fit: cover
+          border-radius: 1rem
+          display: block
+
+          &:nth-child(1) 
+            border-radius: $loopShape1
+          &:nth-child(2) 
+            border-radius: $loopShape2
+          &:nth-child(3) 
+            border-radius: $loopShape3
+          &:nth-child(4) 
+            border-radius: $loopShape4
+
+        h3
+          font-size: 1.2rem
+          line-height: 1.5rem
+          text-align: center
+          font-family: 'Mainfont-Bold'
+          color: darken($pink, 10%)
+          text-transform: uppercase
+          margin-bottom: .5rem
+
+        p
+          font-size: .9rem
+          text-align: left !important
+
+          
+  .targetGroup
+    background-image: url('https://strapi.digimedialoop.de/uploads/smartphone_Contacts_40ae56a178.jpg') 
+    background-repeat: no-repeat
+    background-size: cover
+    background-position: center top
+    min-height: 70vh
+    display: flex
+    align-items: center
+    justify-content: center
+    position: relative
+    padding: 3rem 0    
+    h2
+      font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
+    h3
+      font-size: clamp(1.1rem, .8rem + 1vw, 1.2rem)
+      line-height: 150%        
 </style>
\ No newline at end of file
diff --git a/pages/services/seo/index.vue b/pages/services/seo/index.vue
index 5ef9543..59db32a 100644
--- a/pages/services/seo/index.vue
+++ b/pages/services/seo/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="accessiblityPage">
+    <div class="seoPage">
         <HeroBox
             image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp"
             :aria-label="$t('pages.services.seo.hero.ariaLabel')"
@@ -8,6 +8,7 @@
                 headline2: 'pages.services.seo.hero.headline2',
                 headline3: 'pages.services.seo.hero.headline3'
             }"
+            :dark-background="true"
         /> 
     </div>
 </template>
@@ -21,7 +22,8 @@ definePageMeta({
     '/servizi/ottimizzazione-motori-di-ricerca',// Italienisch
     '/servicios/optimizacion-motores-busqueda', // Spanisch
     '/hizmetler/arama-motoru-optimizasyonu'     // Türkisch
-  ]
+  ],
+  name: 'services-seo'
 })
 
 </script>
diff --git a/pages/webagency/index.vue b/pages/webagency/index.vue
index f092f78..8b143cf 100644
--- a/pages/webagency/index.vue
+++ b/pages/webagency/index.vue
@@ -10,9 +10,9 @@
           <p v-html="$t('pages.webagency.hero.text3')" />
           <button
             class="my-4 pinkBtn"
-            @click.prevent="toggleContactBubble"
             role="button"
             aria-label="Kontaktformular öffnen"
+            @click.prevent="toggleContactBubble"
           >
             {{ $t('pages.webagency.hero.button') }}
           </button>
@@ -75,9 +75,9 @@
 
           <button
             class="pinkBtn mt-4"
-            @click.prevent="toggleContactBubble"
             role="button"
             aria-label="Kontaktformular öffnen"
+            @click.prevent="toggleContactBubble"
           >
             {{ $t('pages.webagency.team.button') }}
           </button>
@@ -91,9 +91,9 @@
         <h2>{{ $t('pages.webagency.grafiker.title') }}</h2>
         <button
           class="mintBtn"
-          @click.prevent="navigateTo(designerLink)"
           role="button"
           aria-label="Zum Angebot für Kreative"
+          @click.prevent="navigateTo(designerLink)"
         >
           {{ $t('pages.webagency.grafiker.button') }}
         </button>
diff --git a/stores/main.ts b/stores/main.ts
index 98b98de..1ef0ae3 100644
--- a/stores/main.ts
+++ b/stores/main.ts
@@ -111,6 +111,8 @@ export const useMainStore = defineStore('main', {
     contactBoxOpen: false,
     scrollPosition: 0,
     screenWidth: 1440,
+    heroBoxHeight: 0,
+    darkHeroBack: false,
     companyinfo: null as CompanyInfo | null,
     pages: [] as Page[],
     customers: [] as Customer[],
@@ -162,6 +164,12 @@ export const useMainStore = defineStore('main', {
     setScreenWidth(width: number) {
       this.screenWidth = width
     },
+    setHeroBoxHeight(height: number) {
+      this.heroBoxHeight = height
+    },
+    setDarkHeroBack(value: boolean) {
+      this.darkHeroBack = value
+    },
 
     // SEND CONTACT REQUEST TO STRAPI