fix | landingpage nav-bar

index.html

@@ -29,19 +29,59 @@
         }
 
         /* Navigation oben rechts */
-        .nav-bar {
+        .top-nav {
             position: absolute;
             top: 20px;
             right: 20px;
+            display: flex;
+            gap: 15px;
         }
 
         .nav-link {
-            color: #888;
+            color: var(--text-color);
-            font-size: 24px;
+            font-size: 1.5rem;
+            padding: 10px;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            position: relative;
+            display: flex; /* Zum Zentrieren des Icons */
+            align-items: center;
+            justify-content: center;
+            width: 50px;
+            height: 50px;
+            background-color: rgba(255, 255, 255, 0.05);
             text-decoration: none;
-            transition: color 0.3s;
         }
-        .nav-link:hover { color: #1793d1; }
+
+        .nav-link:hover {
+            background-color: var(--accent-color);
+            color: #fff;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(23, 147, 209, 0.4);
+        }
+
+        .nav-link::after {
+            content: attr(data-tooltip); /* Holt Text aus HTML attribute */
+            position: absolute;
+            bottom: -35px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #333;
+            color: #fff;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s;
+            white-space: nowrap;
+            pointer-events: none;
+        }
+
+        .nav-link:hover::after {
+            opacity: 1;
+            visibility: visible;
+        }
 
         /* Texte */
         h1 { font-size: 3rem; margin-bottom: 10px; color: #fff; letter-spacing: 2px; }