style: style email link in footer as icon badge similar to Ko-Fi badge

client/src/App.css

@@ -5642,6 +5642,27 @@ html.theme-cupertino .events-scroll-container {
   border-color: rgba(255, 94, 91, 0.32);
 }
 
+.mail-footer-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #94a3b8;
+  text-decoration: none;
+  background: rgba(56, 189, 248, 0.08);
+  border: 1px solid rgba(56, 189, 248, 0.18);
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+.mail-footer-badge:hover {
+  color: #bae6fd;
+  background: rgba(56, 189, 248, 0.14);
+  border-color: rgba(56, 189, 248, 0.32);
+}
+
 .demo-badge {
   display: inline-flex;
   align-items: center;

client/src/components/AppFooter.tsx

@@ -1,4 +1,4 @@
-import { Coffee } from 'lucide-react'
+import { Coffee, Mail } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 
@@ -15,17 +15,22 @@ export default function AppFooter() {
         ·
       </span>
       <span className="app-version-footer__copyright">
-        © 2026 KnorrLabs/
-        <a
-          href="mailto:moin@kapteins-daagbok.eu"
-          onClick={() => trackPlausibleEvent(PlausibleEvents.FOOTER_LINK_CLICKED)}
-        >
-          Markus F.J. Busche
-        </a>
+        © 2026 KnorrLabs
       </span>
       <span className="app-version-footer__sep" aria-hidden="true">
         ·
       </span>
+      <a
+        className="mail-footer-badge"
+        href="mailto:moin@kapteins-daagbok.eu"
+        onClick={() => trackPlausibleEvent(PlausibleEvents.FOOTER_LINK_CLICKED)}
+      >
+        <Mail size={14} aria-hidden="true" />
+        <span>Markus F.J. Busche</span>
+      </a>
+      <span className="app-version-footer__sep" aria-hidden="true">
+        ·
+      </span>
       <a
         className="kofi-footer-badge"
         href={KOFI_URL}