<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.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
            &: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: 1.4rem 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: 1rem
              height: .6rem
              background-color: rgba($primaryColor, .9)
              border-radius: $loopShape
              position: absolute
              top: 2rem
              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
            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
      .logoBox
        align-items: left
        svg
          margin-bottom: .5rem          
          width: 70%
          max-width: 200px
</style>