502 lines
35 KiB
Vue
502 lines
35 KiB
Vue
<template>
|
|
<header
|
|
: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
|
|
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"
|
|
:class="[
|
|
isMenuOpen ? 'menu-active' : '',
|
|
screenWidth < 1350 ? 'mobile' : 'desk'
|
|
]"
|
|
role="navigation"
|
|
aria-label="Hauptnavigation"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="closer"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="toggleMenu"
|
|
@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"
|
|
/>
|
|
</div>
|
|
|
|
<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"
|
|
aria-label="Kontaktformular öffnen"
|
|
@click="toggleContactBubble"
|
|
>
|
|
{{ $t('contact') }}
|
|
</a>
|
|
<SettingsPanel v-if="screenWidth < 1350" />
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { useMainStore } from '@/stores/main'
|
|
|
|
const localePath = useLocalePath()
|
|
const mainStore = useMainStore()
|
|
|
|
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',
|
|
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 toggleMenu = () => mainStore.toggleMenu()
|
|
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">
|
|
header
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
margin: 0
|
|
width: 100%
|
|
background-image: linear-gradient(to bottom, rgba(white, 1), rgba(white, 1), rgba(white, 1), rgba(white, 0))
|
|
box-sizing: border-box
|
|
z-index: 20
|
|
&::before, &::after
|
|
content: ''
|
|
position: absolute
|
|
z-index: 90
|
|
backdrop-filter: blur(10px) brightness(1.05) // Glaseffekt: Unschärfe + leicht erhöhte Helligkeit
|
|
-webkit-backdrop-filter: blur(10px) brightness(1.05)
|
|
border: 1px solid rgba(255, 255, 255, 0.2) // leichte Transparenz des Randes
|
|
background: radial-gradient(circle, rgba(103, 202, 172, 0.8), rgba(103, 202, 172, 0.6), rgba(103, 202, 172, 0.4))
|
|
background-size: 150% 150%
|
|
opacity: 0.85 // Sichtbarkeit anpassen, aber noch leicht transparent
|
|
z-index: 6
|
|
transition: .8s
|
|
box-shadow: $innerShadow
|
|
overflow: hidden
|
|
&::before
|
|
width: 60vw
|
|
height: 18rem
|
|
border-radius: $loopShape
|
|
top: -12rem
|
|
right: -5vw
|
|
animation: bubble-wobble 8s infinite ease alternate, gradient-animation 20s infinite alternate ease-in-out
|
|
z-index: 6
|
|
@media(max-width: $breakPointMD)
|
|
height: 15rem
|
|
&::after
|
|
width: 28vw
|
|
height: 12rem
|
|
border-radius: $loopShape
|
|
top: -2rem
|
|
right: -6vw
|
|
animation: bubble-wobble 7s infinite ease alternate, gradient-animation 12s infinite alternate ease-in-out
|
|
@media(max-width: $breakPointMD)
|
|
height: 8rem
|
|
right: -10vw
|
|
// MOBILE NAVIGATION
|
|
&.mobile
|
|
top: 0
|
|
.headContent
|
|
padding: 0
|
|
.logoBox
|
|
width: 50%
|
|
z-index: 102
|
|
svg
|
|
margin-top: 1.5rem //5rem
|
|
&.active
|
|
.logoBox
|
|
svg
|
|
margin-top: 3rem
|
|
.navigationBox
|
|
display: block
|
|
position: relative
|
|
background-color: $darkgrey
|
|
width: 4rem
|
|
height: 4rem
|
|
z-index: 8
|
|
border-radius: 50%
|
|
margin-right: 5vw
|
|
margin-top: 2rem
|
|
.closer
|
|
position: relative
|
|
width: 100%
|
|
height: 4rem
|
|
&::after, &::before
|
|
position: absolute
|
|
content: ''
|
|
width: 2rem
|
|
z-index: 12
|
|
height: 5px
|
|
border-radius: 4px
|
|
background-color: white
|
|
right: 75%
|
|
transform: translateX(100%)
|
|
transition: .8s
|
|
&::before
|
|
top: 35%
|
|
&::after
|
|
top: 55%
|
|
nav
|
|
display: none
|
|
background-image: none
|
|
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.2rem
|
|
|
|
.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
|
|
&:hover
|
|
transform: scale(1.06)
|
|
background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
|
|
box-shadow: 0 0 0 0 transparent
|
|
border-radius: 20px
|
|
|
|
|
|
a, .menu_link
|
|
display: block
|
|
color: white
|
|
text-align: left
|
|
margin-bottom: .2rem
|
|
padding: 1rem 2.8rem .5rem
|
|
position: relative
|
|
font-size: 1.4rem !important
|
|
width: auto
|
|
max-width: 18rem
|
|
text-transform: uppercase
|
|
font-family: 'Mainfont-Bold'
|
|
|
|
&::before
|
|
content: ''
|
|
width: .8rem
|
|
height: .6rem
|
|
background-color: rgba($primaryColor, .9)
|
|
border-radius: $loopShape
|
|
position: absolute
|
|
top: 1.5rem
|
|
left: 1rem
|
|
border-radius: 20px
|
|
&:hover
|
|
transform: scale(1.06)
|
|
background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
|
|
box-shadow: 0 0 0 0 transparent
|
|
border-radius: 20px
|
|
|
|
&.menu-active
|
|
width: 100vw
|
|
height: 80vh
|
|
border-radius: 5px
|
|
margin: 0
|
|
background-color: rgba($darkgrey, .97)
|
|
.closer
|
|
&::before, &::after
|
|
top: 2rem
|
|
right: 1rem
|
|
&::before
|
|
transform: rotate(45deg)
|
|
&::after
|
|
transform: rotate(-45deg)
|
|
nav
|
|
display: block
|
|
padding: 10vh 0
|
|
margin: 0 5vw
|
|
|
|
.headContent
|
|
display: flex
|
|
align-items: top
|
|
justify-content: space-between
|
|
width: 100%
|
|
padding: 0 2rem
|
|
box-sizing: border-box
|
|
transition: .8s
|
|
z-index: 7
|
|
margin: 0
|
|
height: 0 //4rem
|
|
.logoBox
|
|
display: flex
|
|
align-self: center
|
|
justify-content: left
|
|
width: 33%
|
|
transition: .8s
|
|
background-color: transparent
|
|
margin-top: 4.5rem
|
|
@media(max-width: $breakPointMD)
|
|
margin-top: 3rem
|
|
svg
|
|
width: 80%
|
|
max-width: 250px
|
|
margin: 4rem 5vw 0 5vw
|
|
transition: .8s
|
|
.navigationBox
|
|
position: relative
|
|
display: flex
|
|
align-items: center
|
|
justify-content: flex-end
|
|
width: 80%
|
|
transition: .8s
|
|
margin-top: 1.2rem //-1rem
|
|
nav
|
|
display: block
|
|
z-index: 102
|
|
//background: linear-gradient(to right, rgba($lightgrey, 0.8), rgba(white, 0.9), rgba(white, 0.9))
|
|
background: white
|
|
border: 1px solid adjust-color($beige, $lightness: 5%)
|
|
padding: 1rem 2rem
|
|
text-align: center
|
|
border-radius: 1rem
|
|
margin: 4.8rem 1rem 0 1rem
|
|
transition: .8s
|
|
a
|
|
margin: 0 1.2rem
|
|
text-decoration: none
|
|
color: $darkgrey
|
|
text-transform: uppercase
|
|
font-family: 'Comfortaa-Bold'
|
|
font-size: 1.1rem
|
|
letter-spacing: .05rem
|
|
transition: .6s
|
|
display: inline-block
|
|
&:hover
|
|
transform: scale(1.15)
|
|
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 2rem 1rem 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
|
|
&::after
|
|
top: -5rem
|
|
.headContent
|
|
padding: 0 //0 0 2.5rem 0
|
|
.navigationBox
|
|
margin-top: .5rem
|
|
nav
|
|
display: flex
|
|
margin: 2.5rem 0 0 0
|
|
padding: 1rem .5rem
|
|
border-top-right-radius: 0
|
|
border-top-left-radius: 0
|
|
border-bottom-left-radius: 50px
|
|
border-bottom-right-radius: 0
|
|
background: transparent
|
|
border: 1px solid transparent
|
|
|
|
a
|
|
font-size: 1rem
|
|
font-weight: bold
|
|
margin: 0 .8rem
|
|
&.desk
|
|
.sub-nav
|
|
top: 1.5rem
|
|
right: 2%
|
|
background-color: transparent
|
|
background-image: linear-gradient(to bottom, transparent 0%, white 15%)
|
|
|
|
.logoBox
|
|
align-items: left
|
|
svg
|
|
margin-bottom: .5rem
|
|
width: 70%
|
|
max-width: 200px
|
|
</style> |