redesigned imprint footer

assets/css/style.css

@@ -33,15 +33,33 @@ body {
 
 .footer-container {
     position: absolute;
-    bottom: 0;
-    right: 0;
+    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+    right: 12px;
 
-    font-size: 0.9em;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 
-    padding: 3px 10px;
-    opacity: 0.8;
-    background-color: darkgray;
-    box-shadow: -1px -1px 5px darkgray;
+    font-size: 0.8em;
+    padding: 5px 14px;
+    border-radius: 999px;
+    color: rgba(255, 255, 255, 0.7);
+    background-color: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(6px);
+}
+
+.footer-container a {
+    color: inherit;
+    transition: color 0.15s;
+}
+
+.footer-container a:hover {
+    color: white;
+}
+
+.footer-container .separator {
+    opacity: 0.5;
 }
 
 .card-container {

index.html

@@ -91,7 +91,7 @@
         </div>
         <div class="footer-container">
             <a href="https://mhsl.eu/id.html">Impressum</a>
-            |
+            <span class="separator">|</span>
             <a href="https://mhsl.eu/datenschutz.html">Datenschutz</a>
         </div>
     </body>