Minecraft-Modern-Theme/style.css aktualisiert

Minecraft-Modern-Theme/style.css

@@ -73,7 +73,7 @@ a:hover { color: #fff; }
 .site-header {
     background-color: var(--header-bg);
     backdrop-filter: blur(10px);
-    padding: 15px 0;
+    padding: 30px 0; /* FIX: Mehr vertikaler Platz im Header */
     position: sticky;
     top: 0;
     z-index: 1000;
@@ -87,10 +87,15 @@ a:hover { color: #fff; }
 .header-main {
     display: flex;
     align-items: center;
-    justify-content: flex-start; 
-    gap: 120px; /* Gleichmäßiger Abstand zwischen den Elementen */
+    justify-content: space-between; /* FIX: Logo Links, Menü Mitte, Info Rechts */
+    gap: 40px; /* Flexiblerer Abstand */
 }
 
+/* WICHTIG: Typo im Header.html korrigieren! 
+   HTML: <div class="site-branding">
+   CSS: .site-branding
+   Sie müssen die 'g' im HTML oder CSS angleichen, sonst ist das Layout kaputt.
+*/
 .site-branding {
     display: flex;
     align-items: center;
@@ -117,12 +122,13 @@ a:hover { color: #fff; }
 /* === NEUE DROPDOWN NAVIGATION ======================================= */
 /* =================================================================== */
 
-.main-navigation {
+#site-navigation {
     position: relative;
-    flex-grow: 1;
+    flex-grow: 1; /* FIX: Navigation nimmt den gesamten Platz in der Mitte ein */
     display: flex;
-    justify-content: center; /* Zentriert das Menü */
+    justify-content: center; /* Zentriert das Menü innerhalb seines Raums */
     align-items: center;
+    padding: 0 30px; /* Mindestabstand zu Logo und Socials */
 }
 
 /* Hauptliste (Top Level) */
@@ -132,7 +138,7 @@ a:hover { color: #fff; }
     list-style: none;
     margin: 0;
     padding: 0;
-    gap: 25px;
+    gap: 20px; /* Abstand zwischen Menüpunkten horizontal */
 }
 
 /* Menüpunkte */
@@ -142,12 +148,12 @@ a:hover { color: #fff; }
 
 /* Links in der Navigation */
 .main-navigation a {
-    display: block;
+    display: inline-block;
     font-size: 15px;
     font-weight: 600;
     color: var(--text-muted);
     text-decoration: none;
-    padding: 10px 0;
+    padding: 20px 0; /* FIX: Mehr vertikaler Platz (Oben/Unten) ohne horizontales Padding */
     transition: color 0.3s ease;
     position: relative;
 }
@@ -209,6 +215,12 @@ a:hover { color: #fff; }
     border-bottom: 1px solid rgba(255,255,255,0.05);
     font-size: 14px;
     white-space: nowrap;
+    
+    /* FIX: Vollständige Hintergrund-Markierung */
+    display: block;
+    width: 100%;
+    box-sizing: border-box; /* Padding wird zur Breite hinzugezählt */
+    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
 }
 
 .sub-menu li:last-child a {
@@ -658,7 +670,7 @@ html.light-mode .icon-sun { opacity: 1; }
 }
 .faq-answer p { margin-bottom: 20px; font-size: 0.9rem; }
 .faq-item.active .faq-answer {
-    padding: 0 20px 20px 20px;
+    padding: 0 20px 20px;
     max-height: 1000px;
     transition: max-height 0.4s ease-in, padding 0.4s ease-in;
 }
@@ -881,7 +893,7 @@ main#primary.site-main {
     
     .site-branding { flex-grow: 1; }
     .header-info { order: 2; } /* Social rechts */
-    .main-navigation { order: 3; width: 100%; }
+    #site-navigation { order: 3; width: 100%; }
 
     .menu-toggle {
         display: block;
@@ -902,13 +914,13 @@ main#primary.site-main {
     }
 
     /* Wenn .toggled aktiv ist, zeigen */
-    .main-navigation.toggled .primary-menu {
+    #site-navigation.toggled .primary-menu {
         display: flex;
         animation: slideDown 0.3s ease forwards;
     }
 
     .menu-item { width: 100%; text-align: left; }
-    .main-navigation a { padding: 15px 20px; }
+    #site-navigation a { padding: 15px 20px; }
 
     /* Submenus mobil - Akkordeon Style */
     .sub-menu {
@@ -949,8 +961,8 @@ main#primary.site-main {
     .custom-logo-link img, .custom-logo { max-height: 50px; }
 
     /* Hero */
-    .hero-title, .slider-title { font-size: 32px; }
-    .hero-subtitle, .slider-subtitle { font-size: 18px; }
+    .slider-title { font-size: 32px; }
+    .slider-subtitle { font-size: 18px; }
     .hero-buttons a { display: block; margin: 10px auto; width: 80%; }
     
     /* Footer Responsive */