flixcooks-website/partials/footer.php

<?php
  $langCode   = (isset($lang) && $lang === 'de') ? 'de' : 'en';
  $langSuffix = $langCode === 'de' ? '?lang=de' : '';
  $settings   = function_exists('load_site_settings') ? load_site_settings() : null;
  $contactEmail = $settings['imprint'][$langCode]['email'] ?? 'contact@flixcooks.at';
?>
<footer class="site-footer" role="contentinfo">
  <div class="footer-meta">
    <p><?php echo $langCode === 'de' ? 'Designed &amp; entwickelt von Felix Brockers' : 'Designed &amp; built by Felix Brockers'; ?></p>
    <a class="contact-link underline-link" href="mailto:<?php echo e($contactEmail); ?>">
      <?php echo e($contactEmail); ?>
    </a>
    <small>© <?php echo date('Y'); ?> FlixCooks</small>
  </div>
  <div class="footer-links">
    <a class="underline-link" href="/impressum.php<?php echo $langSuffix; ?>">
      <?php echo $langCode === 'de' ? 'Impressum' : 'Imprint'; ?>
    </a>
    <a class="underline-link" href="/datenschutz.php<?php echo $langSuffix; ?>">
      <?php echo $langCode === 'de' ? 'Datenschutz' : 'Privacy'; ?>
    </a>
  </div>
</footer>

<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 ────────────────────────────────────────────────
(function(){
  var btn = document.getElementById('backToTop');
  if (!btn) return;
  var check = function() { btn.classList.toggle('show', window.scrollY > 280); };
  window.addEventListener('scroll', check, { passive: true });
  btn.addEventListener('click', function() {
    if (window.lenis) {
      window.lenis.scrollTo(0, { duration: 1.4 });
    } else {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  });
  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>