feat(legal): add legal notice link in the footer

Added a link to the legal notice in the footer and revised the layout of
the last footer segment: The segment is now a grid container and the
legal links (currently only the legal notice link) are displayed at the
end. The copyright notice remains centered. On small screens, the legal
links are displayed centered below the copyright notice.

src/features/footer/components/Footer.vue

@@ -40,9 +40,21 @@ const copyrightPeriod =
             </RouterLink>
             <LanguageSwitchButton />
         </div>
-        <div class="footer-segment">
+        <div class="footer-segment legal-segment">
+            <div></div>
+            <div class="copyright-notice">
                 &copy; {{ copyrightPeriod }} Seekra
             </div>
+            <div class="legal-links">
+                <RouterLink
+                    :to="{ name: 'legalNotice' }"
+                    class="link"
+                    :title="t('legal.notice.title')"
+                >
+                    {{ t('legal.notice.title') }}
+                </RouterLink>
+            </div>
+        </div>
     </footer>
 </template>
 
@@ -63,4 +75,31 @@ const copyrightPeriod =
 .global-footer a {
     color: var(--dark);
 }
+
+.legal-segment {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    text-align: center;
+}
+
+.copyright-notice {
+    justify-self: center;
+}
+
+.legal-links {
+    justify-self: end;
+}
+
+@media (max-width: 48rem) {
+    .legal-segment {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0;
+    }
+
+    .legal-links {
+        margin-top: 0.8em;
+    }
+}
 </style>