diff --git a/assets/logo-black.png b/assets/logo-black.png
new file mode 100644
index 0000000..7dc1f3a
Binary files /dev/null and b/assets/logo-black.png differ
diff --git a/assets/logo-old.png b/assets/logo-old.png
new file mode 100644
index 0000000..b6d90c4
Binary files /dev/null and b/assets/logo-old.png differ
diff --git a/assets/logo-white.png b/assets/logo-white.png
new file mode 100644
index 0000000..3835b2f
Binary files /dev/null and b/assets/logo-white.png differ
diff --git a/assets/logo.png b/assets/logo.png
deleted file mode 100644
index c93e949..0000000
Binary files a/assets/logo.png and /dev/null differ
diff --git a/assets/style.css b/assets/style.css
index 6b0852d..f3a53d3 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -429,7 +429,7 @@ img, picture { display: block; max-width: 100%; height: auto; }
 .site-header {
   max-width: 1200px;
   margin: 24px auto 12px;
-  padding: 14px 20px;
+  padding: 10px 20px;
   border: 1px solid rgba(28,32,52,0.08);
   border-radius: 14px;
   background: rgba(255,255,255,0.9);
@@ -449,7 +449,10 @@ img, picture { display: block; max-width: 100%; height: auto; }
   gap: 12px;
 }
 .site-header .logo { display: inline-flex; align-items: center; }
-.site-header .logo img { display: block; height: clamp(28px,5vw,48px); width: auto; }
+.site-header .logo img { display: block; height: clamp(56px,8vw,96px); width: auto; }
+.site-header .logo .logo--dark { display: none; }
+[data-theme="dark"] .site-header .logo .logo--light { display: none; }
+[data-theme="dark"] .site-header .logo .logo--dark { display: block; }
 .header-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
 .lang-toggle {
   padding: 8px 12px;
@@ -968,8 +971,8 @@ img, picture { display: block; max-width: 100%; height: auto; }
 
 @media (max-width: 900px) {
   #recipes { padding: 0 14px 40px; }
-  .site-header { padding: 12px 14px; gap: 10px; border-radius: 18px; }
-  .site-header .logo img { height: clamp(32px,12vw,56px); }
+  .site-header { padding: 10px 14px; gap: 10px; border-radius: 18px; }
+  .site-header .logo img { height: clamp(64px,20vw,112px); }
   .menu-toggle { display: inline-flex !important; }
   .menu-toggle__label { display: inline; }
   .site-nav {
diff --git a/partials/header.php b/partials/header.php
index 866b4cb..256ab4b 100644
--- a/partials/header.php
+++ b/partials/header.php
@@ -1,7 +1,8 @@
 <header class="site-header">
   <div class="site-header__top">
     <a class="logo" href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>">
-      <img src="/assets/logo.png" alt="FlixCooks">
+      <img class="logo--light" src="/assets/logo-white.png" alt="FlixCooks">
+      <img class="logo--dark" src="/assets/logo-black.png" alt="FlixCooks">
     </a>
     <div class="header-actions">
       <a class="lang-toggle" href="<?php echo e($langSwitchHref ?? '#'); ?>"><?php echo e($langSwitchLabel ?? 'DE/EN'); ?></a>