Simplified the Signal Messenger integration

Made it more subtle and intuitive
Maintained consistency between footer and main contact section
Improved the overall contact section design

public/components/footer.html

@@ -2,18 +2,18 @@
     <div class="contact-block">
         <div class="contact-item">
             <i class="fas fa-envelope"></i>
-            <a href="mailto:info@7sys.de">kontakt@7sys.de</a>
+            <a href="mailto:info@7sys.de">info@7sys.de</a>
         </div>
         <div class="contact-item">
             <i class="fab fa-signal-messenger"></i>
-            <a href="https://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR">sieben.77</a>
+            <a href="signal://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR">Signal</a>
         </div>
     </div>
     <div class="social-links">
         <a href="https://github.com/ben7sys" target="_blank" rel="noopener noreferrer">
             <i class="fab fa-github"></i>
         </a>
-        <a href="https://twitter.com/ben7sys" target="_blank" rel="noopener noreferrer">
+        <a href="https://twitter.com/therealbaderb" target="_blank" rel="noopener noreferrer">
             <i class="fab fa-twitter"></i>
         </a>
         <a href="https://www.linkedin.com/in/badben/" target="_blank" rel="noopener noreferrer">

public/css/components.css

@@ -114,24 +114,47 @@
     border-radius: var(--border-radius);
     border: 1px solid var(--border-color);
     margin: var(--spacing-xl) 0;
+    text-align: center;
 }
 
 .contact-info:hover {
     border-color: var(--primary);
-    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
     transition: all 0.3s ease;
 }
 
-.contact-info a {
+.contact-info p {
-    color: var(--primary);
+    margin-bottom: var(--spacing-lg);
-    text-decoration: none;
+    color: var(--text);
-    display: block;
-    margin: var(--spacing-sm) 0;
-    transition: opacity var(--transition-speed) ease;
 }
 
-.contact-info a:hover {
+.contact-links {
-    opacity: 0.8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.contact-link {
+    color: var(--text) !important;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--border-radius);
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+}
+
+.contact-link:hover {
+    color: var(--primary) !important;
+    border-color: var(--primary);
+    opacity: 1;
+}
+
+.contact-link i {
+    font-size: 1.2em;
+    color: var(--primary);
 }
 
 /* Quote Styles */

public/index.html

@@ -74,8 +74,17 @@
                 <h2>Kontakt</h2>
                 <div class="contact-info">
                     <p>Ich freue mich darauf, Ihr Projekt kennenzulernen und Ihnen mein Wissen zu vermitteln.</p>
-                    <a href="mailto:kontakt@7sys.de">E-Mail: info@7sys.de</a>
+                    <div class="contact-links">
-                    <a href="https://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR">Signal: sieben.77</a>
+                        <a href="mailto:kontakt@7sys.de" class="contact-link">
+                            <i class="fas fa-envelope"></i>
+                            info@7sys.de
+                        </a>
+                        <a href="signal://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR" 
+                           class="contact-link">
+                            <i class="fab fa-signal-messenger"></i>
+                            Signal Messenger
+                        </a>
+                    </div>
                 </div>
             </section>
         </div>