Ok, here is a short summary about how I did it:
Step 1: Content
First, I used WordPress to create a blog, customized the design, created entries, etc. The blogs URL is: http://www.smartinnovation.de/blog. This also is the starting URL for all blog entries, the result shown in google searches etc. I removed the standard blog search button so I can use the brain search function later.
Then, I chose a background image and split it into two images: the top one is 200 pixels high and the bottom one shows the rest. I then selected the bottom one as blog background image. Note that the blog uses a fixed width of 985 pixels.
Step 2: Navigation
Then, I created a Brain in PB with one thought for each blog entry. I attached the URLs of the corresponding blog entries to each thought. Some thoughts don't have a blog entry (like general parent thoughts), so I linked these to a page stating "No articles for this subject". It is important to have one URL attachement per thought, otherwise you will destroy the illusion (because then the notes section will show without any design).
After that, I exported the SiteBrain and uploaded it to http://www.smartinnovation.de
Step 3: Tweaking:
To make everything look nice, I needed to edit the files layout.css and settings.js (make sure you backup these files because the SiteBrain export overrides them.
In layout.css, I added some lines to the #plexDiv section, mainly these:
width: 1002px; /* somehow 985 didn't work */
background-image: url(bg_top.jpg); /* This is the upper part of my split background image*/
In settings.js, I changed some values:
// instant search
var showSearchButton = true;
// search settings
var searchPrefix = "http://www.smartinnovation.de/blog/?s=";
This will show a search button right next to the quicksearch field. Since SiteBrain doesn't come with an own search function, I just use the search function of my blog.
If you use web search engines, the resulting URL will always start with http://www.smartinnovation.de/blog/ This of course has no brain navigation whatsoever, so I needed a way to show this manually. I just created a link to "open the smart navigation" at the top of my blog that just links to the address http://www.smartinnovation.de. This will result in showing the brain navigation at the top which will open the blog's homepage at the bottom. I know this is not the best solution but it works. If anyone has a better idea to link the two, please post here!