fix(phase-1): resolve preloader freeze, lock dark mode, perfectly center hamburger & mark complete

TODO.md

@@ -6,7 +6,7 @@ Dieses Dokument enthält den aktuellen Entwicklungsstand und detaillierte Aufgab
 
 ## 🚀 Übersicht der Entwicklungsphasen
 
-- [ ] **Phase 1: UI/UX Rebase & Globales Design-System (Fundament)**
+- [x] **Phase 1: UI/UX Rebase & Globales Design-System (Fundament)**
   - Globale CSS-Tokens & Farbpaletten-Setup
   - Atmosphärischer Stein-Hintergrund (`AuraMarbleBackground`)
   - Fullscreen Overlay-Navigation (`LiquidOverlayMenu` & `SlideUpTextHover`)

assets/style.css

@@ -460,23 +460,22 @@ img, picture { display: block; max-width: 100%; height: auto; }
 .nav-burger-lines {
   width: 22px;
   height: 16px;
-  position: relative;
+  display: flex;
-  display: block;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
 }
 .nav-line {
-  position: absolute;
   width: 100%;
   height: 2px;
   background-color: var(--color-bg-dark);
   transition: transform 0.4s var(--ease-fluid-slide),
               opacity 0.3s ease,
               background-color 0.3s ease;
+  transform-origin: center;
 }
 [data-theme="dark"] .nav-line { background-color: var(--color-light-gold); }
 .nav-trigger.active .nav-line { background-color: var(--color-white); }
-.nav-line--top { top: 0; }
-.nav-line--mid { top: 7px; }
-.nav-line--bot { top: 14px; }
 .nav-trigger.active .nav-line--top { transform: translateY(7px) rotate(45deg); }
 .nav-trigger.active .nav-line--mid { opacity: 0; transform: scaleX(0); }
 .nav-trigger.active .nav-line--bot { transform: translateY(-7px) rotate(-45deg); }

helpers.php

@@ -216,3 +216,16 @@ function lang_url(string $lang): string {
     $path = strtok($_SERVER['REQUEST_URI'], '?') ?: '/';
     return $path . '?' . http_build_query($params);
 }
+
+// Fallback polyfills for environments without mbstring extension
+if (!function_exists('mb_substr')) {
+    function mb_substr(string $string, int $start, ?int $length = null, ?string $encoding = null): string {
+        return substr($string, $start, $length ?? strlen($string));
+    }
+}
+
+if (!function_exists('mb_strlen')) {
+    function mb_strlen(string $string, ?string $encoding = null): int {
+        return strlen($string);
+    }
+}

partials/footer.php

@@ -24,10 +24,7 @@
 
 <button id="backToTop" aria-label="<?php echo $langCode === 'de' ? 'Nach oben' : 'Back to top'; ?>">↑</button>
 
-<!-- Fixed dark/light toggle -->
+
-<button class="theme-toggle" data-theme-toggle aria-label="Switch to dark mode">
-  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
-</button>
 
 <script>
 // ── Back to top ────────────────────────────────────────────────
@@ -46,35 +43,7 @@
   check();
 })();
 
-// ── Dark / light mode toggle ───────────────────────────────────
-(function(){
-  var r = document.documentElement;
-  var d = localStorage.getItem('fc-theme') || r.getAttribute('data-theme') || 'light';
-  r.setAttribute('data-theme', d);
 
-  var SUN  = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
-  var MOON = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
-
-  function setIcon() {
-    var icon  = d === 'dark' ? SUN : MOON;
-    var label = 'Switch to ' + (d === 'dark' ? 'light' : 'dark') + ' mode';
-    document.querySelectorAll('[data-theme-toggle]').forEach(function(t) {
-      t.innerHTML = icon;
-      t.setAttribute('aria-label', label);
-    });
-  }
-
-  document.addEventListener('click', function(e) {
-    if (e.target.closest('[data-theme-toggle]')) {
-      d = d === 'dark' ? 'light' : 'dark';
-      r.setAttribute('data-theme', d);
-      localStorage.setItem('fc-theme', d);
-      setIcon();
-    }
-  });
-
-  setIcon();
-})();
 </script>
 </body>
 </html>

partials/head.php

@@ -30,8 +30,8 @@ $description = $description ?? 'Seasonal recipes, tested tips, and approachable
   <!-- Set theme instantly to avoid flash -->
   <script>
     (function(){
-      var t = localStorage.getItem('fc-theme') || 'light';
+      document.documentElement.setAttribute('data-theme', 'dark');
-      document.documentElement.setAttribute('data-theme', t);
+      localStorage.setItem('fc-theme', 'dark');
     })();
   </script>
 </head>