I've enhanced the Vision and Mission sections by adding detailed explanations that appear as tooltips when hovering over each section. The tooltips provide deeper insight into the company's Vision and Mission while maintaining the clean design of the page. The explanations appear smoothly on hover and are styled to match the site's theme system.

public/README.md

@@ -0,0 +1,11 @@
+Der Default-Theme-Modus wird durch zwei Faktoren bestimmt:
+
+Wenn ein Theme bereits im localStorage gespeichert wurde (unter dem Key 'theme'), wird dieses verwendet
+Ansonsten wird das System-Theme des Betriebssystems verwendet:
+Wenn das System auf "Dark Mode" eingestellt ist, wird Dark Mode aktiviert
+Wenn das System auf "Light Mode" eingestellt ist, wird Light Mode aktiviert
+Um den Default-Modus zu ändern, gibt es zwei Möglichkeiten:
+
+Direkt im Code: In der Konstante DEFAULT_THEME in theme.js kann der Wert von 'light' auf 'dark' geändert werden
+Im Browser: Den localStorage-Eintrag 'theme' auf 'dark' oder 'light' setzen
+Das Theme wird beim Laden der Seite sofort initialisiert (durch initThemeEarly()), um ein Flackern zu vermeiden. Danach wird ein Event-Listener eingerichtet, der auf Systemänderungen reagiert und das Theme automatisch anpasst, falls kein benutzerdefiniertes Theme gesetzt wurde.

public/components/footer.html

@@ -14,10 +14,10 @@
         </div>
     </div>
     <div class="social-links">
-        <a href="https://github.com/7sys" target="_blank" rel="noopener noreferrer">
+        <a href="https://github.com/ben7sys" target="_blank" rel="noopener noreferrer">
             <i class="fab fa-github"></i>
         </a>
-        <a href="https://twitter.com/7sys" target="_blank" rel="noopener noreferrer">
+        <a href="https://twitter.com/ben7sys" target="_blank" rel="noopener noreferrer">
             <i class="fab fa-twitter"></i>
         </a>
         <a href="https://linkedin.com/company/7sys" target="_blank" rel="noopener noreferrer">

public/css/components.css

@@ -20,12 +20,21 @@
     margin: var(--spacing-xl) 0;
 }
 
-.mission-vision div {
+.mission-vision .tooltip-container {
     background: var(--bg-card);
     padding: var(--spacing-xl);
     border-radius: var(--border-radius);
     border: 1px solid var(--border-color);
     text-align: center;
+    position: relative;
+    cursor: pointer;
+    transition: transform var(--transition-speed) ease, 
+                border-color var(--transition-speed) ease;
+}
+
+.mission-vision .tooltip-container:hover {
+    transform: translateY(-5px);
+    border-color: var(--primary);
 }
 
 .mission-vision h3 {
@@ -33,6 +42,49 @@
     margin-bottom: var(--spacing-md);
 }
 
+/* Tooltip Styles */
+.tooltip-container {
+    position: relative;
+}
+
+.tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    bottom: 120%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-card);
+    color: var(--text);
+    padding: var(--spacing-lg);
+    border-radius: var(--border-radius);
+    width: 300px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    text-align: left;
+    z-index: 100;
+    transition: opacity var(--transition-speed) ease,
+                visibility var(--transition-speed) ease;
+}
+
+.tooltip::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 10px 10px 0;
+    border-style: solid;
+    border-color: var(--bg-card) transparent transparent transparent;
+}
+
+.tooltip-container:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
 /* Service Cards */
 .service-card {
     background: var(--bg-card);
@@ -45,8 +97,9 @@
 }
 
 .service-card:hover {
-    transform: translateY(-5px);
     border-color: var(--primary);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
 }
 
 .service-card h3 {
@@ -63,6 +116,12 @@
     margin: var(--spacing-xl) 0;
 }
 
+.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 {
     color: var(--primary);
     text-decoration: none;

public/index.html

@@ -27,13 +27,19 @@
                 <p class="welcome-quote">Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.</p>
                 <span class="logo-sub">Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better.</span>
                 <div class="mission-vision">
-                    <div>
+                    <div class="tooltip-container">
                         <h3>Vision</h3>
                         <p>Digitale Souveränität</p>
+                        <div class="tooltip">
+                            Wir streben eine Zukunft an, in der Unternehmen die volle Kontrolle über ihre digitalen Ressourcen haben. Digitale Souveränität bedeutet für uns, dass Sie selbstbestimmt und unabhängig über Ihre IT-Infrastruktur entscheiden können, während Sie gleichzeitig von modernsten Technologien profitieren.
                         </div>
-                    <div>
+                    </div>
+                    <div class="tooltip-container">
                         <h3>Mission</h3>
                         <p>Sichere und nachhaltige IT-Lösungen</p>
+                        <div class="tooltip">
+                            Durch maßgeschneiderte IT-Lösungen ermöglichen wir es unseren Kunden, ihre digitale Infrastruktur sicher und zukunftsfähig zu gestalten. Wir setzen dabei auf nachhaltige Technologien, die sowohl ressourceneffizient als auch langfristig wartbar sind. Unser Ziel ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten.
+                        </div>
                     </div>
                 </div>
             </section>