diff --git a/assets/css/main.css b/assets/css/main.css
index a7b27c1..869707b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -113,7 +113,13 @@ header.site-header {
   margin: 0 auto;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  /* Bewusst NICHT space-between: sonst landet der ganze freie Platz auf
+     großen Bildschirmen als große Lücke zwischen Logo und "Start", und
+     das Menü wirkt an die rechte Kante gepresst. Stattdessen rückt das
+     Menü mit festem Abstand direkt ans Logo heran, der übrige Platz
+     bleibt rechts nach dem Bewerben-Knopf. */
+  justify-content: flex-start;
+  gap: clamp(2rem, 5vw, 4.5rem);
   padding: .9rem 0;
   flex-wrap: nowrap;
 }
@@ -150,12 +156,16 @@ header.site-header {
 .nav-links {
   display: flex;
   align-items: center;
-  gap: 2.1rem;
+  gap: 2.4rem;
 }
 .nav-group { position: relative; }
 .nav-group > button {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
   background: none;
   border: none;
+  border-radius: 999px;
   color: var(--text);
   font-weight: 600;
   font-size: 1.14rem;
@@ -163,11 +173,55 @@ header.site-header {
   display: flex;
   align-items: center;
   gap: .3rem;
-  padding: .5rem 0;
+  padding: .5rem .8rem;
+  transition: color .2s ease;
 }
 .nav-group > button:hover, .nav-group.open > button { color: var(--accent); }
-.nav-flat { font-weight: 600; font-size: 1.14rem; padding: .5rem 0; }
+.nav-flat {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 1.14rem;
+  padding: .5rem .8rem;
+  transition: color .2s ease;
+}
 .nav-flat:hover, .nav-flat.active { color: var(--accent); }
+
+/* Augenschonende Polarlicht-Schimmer je Kategorie, in den echten Farben
+   der jeweiligen Welt (siehe theme-dogfather/-hasidog/-spicymedia.css) —
+   sehr dezent im Ruhezustand, etwas kräftiger bei Hover/offenem Dropdown.
+   Bewusst subtil (niedrige Deckkraft), damit die Kopfzeile ruhig bleibt. */
+.nav-group > button::before, .nav-flat::before {
+  content: "";
+  position: absolute;
+  inset: -70% -35%;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 28% 30%, var(--brand-1, transparent), transparent 62%),
+    radial-gradient(circle at 74% 72%, var(--brand-2, transparent), transparent 62%);
+  filter: blur(9px) saturate(1.25);
+  opacity: .22;
+  animation: nav-cta-aurora 11s ease-in-out infinite alternate;
+  pointer-events: none;
+  transition: opacity .3s ease;
+}
+.nav-group:hover > button::before,
+.nav-group.open > button::before,
+.nav-flat:hover::before,
+.nav-flat.active::before {
+  opacity: .5;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nav-group > button::before, .nav-flat::before { animation: none; }
+}
+
+.nav-item-dogfather { --brand-1: rgba(143, 217, 234, .9); --brand-2: rgba(139, 92, 246, .85); }
+.nav-item-hasidog   { --brand-1: rgba(143, 217, 234, .9); --brand-2: rgba(199, 204, 209, .8); }
+.nav-item-manager   { --brand-1: rgba(217, 74, 92, .85);  --brand-2: rgba(232, 147, 58, .8); }
+.nav-item-medien    { --brand-1: rgba(143, 217, 234, .7); --brand-2: rgba(217, 74, 92, .6); }
+.nav-item-start     { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(139, 92, 246, .5); }
 .nav-dropdown {
   position: absolute;
   top: 100%;
diff --git a/assets/js/main.js b/assets/js/main.js
index e1865ea..731d192 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -238,14 +238,28 @@
     return href === currentFile;
   }
 
+  /* Ordnet jedem Nav-Punkt die Farbklasse SEINER Welt zu (siehe
+     .nav-item-* in main.css, Farben aus theme-dogfather/-hasidog/
+     -spicymedia.css) — für den augenschonenden Polarlicht-Schimmer pro
+     Kategorie. "Links" bekommt bewusst keine Farbe (keine eigene Welt,
+     sitzt direkt neben dem schon bunten Bewerben-Knopf). */
+  const NAV_FARBKLASSE = {
+    nav_start: "nav-item-start",
+    nav_dogfather: "nav-item-dogfather",
+    nav_hasidog: "nav-item-hasidog",
+    nav_manager: "nav-item-manager",
+    nav_medien: "nav-item-medien",
+  };
+
   function renderNavItem(item) {
+    const farbklasse = NAV_FARBKLASSE[item.key] ? ` ${NAV_FARBKLASSE[item.key]}` : "";
     if (!item.children) {
-      return `<a class="nav-flat${isActive(item.href) ? " active" : ""}" href="${item.href}">${t(item.key)}</a>`;
+      return `<a class="nav-flat${farbklasse}${isActive(item.href) ? " active" : ""}" href="${item.href}">${t(item.key)}</a>`;
     }
     const activeChild = item.children.some((c) => isActive(c.href));
     return `
       <div class="nav-group${activeChild ? " open-hint" : ""}">
-        <button type="button" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
+        <button type="button" class="${farbklasse.trim()}" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
         <div class="nav-dropdown">
           ${item.children
             .map(