theme toggle problems

public/components/header.html

@@ -11,6 +11,7 @@
             <a href="#services" id="expertise-link">Expertise</a>
             <a href="#contact" id="contact-link">Kontakt</a>
             <button class="theme-toggle" aria-label="Theme Toggle">
+                <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
         </nav>

public/css/header.css

@@ -71,10 +71,15 @@ header {
     justify-content: center;
     transition: var(--theme-transition);
     border-radius: var(--border-radius);
+    position: relative;
+    width: 40px;
+    height: 40px;
+    margin-left: var(--spacing-sm);
 }
 
 .theme-toggle:hover {
     color: var(--primary);
+    background-color: var(--bg-card);
 }
 
 .theme-toggle:focus-visible {
@@ -83,6 +88,41 @@ header {
     border-radius: var(--border-radius);
 }
 
+.theme-toggle i {
+    font-size: 1.2rem;
+    position: absolute;
+    transition: opacity var(--transition-speed) ease,
+                transform var(--transition-speed) ease;
+    transform: var(--gpu-accelerated);
+}
+
+/* Light Theme Icon States */
+[data-theme="light"] .theme-toggle .fa-moon {
+    opacity: 1;
+    transform: rotate(0) var(--gpu-accelerated);
+}
+
+[data-theme="light"] .theme-toggle .fa-sun {
+    opacity: 0;
+    transform: rotate(-90deg) var(--gpu-accelerated);
+}
+
+/* Dark Theme Icon States */
+[data-theme="dark"] .theme-toggle .fa-moon {
+    opacity: 0;
+    transform: rotate(90deg) var(--gpu-accelerated);
+}
+
+[data-theme="dark"] .theme-toggle .fa-sun {
+    opacity: 1;
+    transform: rotate(0) var(--gpu-accelerated);
+}
+
+/* Hover Animation */
+.theme-toggle:hover i {
+    transform: rotate(15deg) var(--gpu-accelerated);
+}
+
 .mobile-menu-toggle {
     display: none;
     background: none;