feat: implement blog section with first article

Add blog functionality to the Hugo site:
- Create blog content structure (content/blog/)
- Add blog list and single templates (layouts/blog/)
- Add blog navigation to menu
- Publish first article: "KI Generierte Website - ein Praxisbeispiel"
- Support multilingual structure (German/English)
- Add code block styling for blog posts

The blog section is now accessible at /de/blog/ and /en/blog/
with proper navigation, responsive design, and semantic HTML.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

openspec/changes/add-blog-section/tasks.md

@@ -3,12 +3,12 @@
 ## Implementation Tasks
 
 ### 1. Create blog content structure
-- [ ] Create `content/blog/` directory for German blog posts
-- [ ] Create `content/blog/_index.de.md` for German blog section metadata
-- [ ] Create `content/blog/_index.en.md` for English blog section metadata
-- [ ] Convert Notion article "KI Generierte Website - ein Praxisbeispiel" to Markdown format
-- [ ] Create `content/blog/ki-generierte-website-praxisbeispiel/index.de.md` with article content
-- [ ] Add proper front matter (title, date, description) to blog post
+- [x] Create `content/blog/` directory for German blog posts
+- [x] Create `content/blog/_index.de.md` for German blog section metadata
+- [x] Create `content/blog/_index.en.md` for English blog section metadata
+- [x] Convert Notion article "KI Generierte Website - ein Praxisbeispiel" to Markdown format
+- [x] Create `content/blog/ki-generierte-website-praxisbeispiel/index.de.md` with article content
+- [x] Add proper front matter (title, date, description) to blog post
 
 **Validation:** Files exist in correct locations, front matter is properly formatted
 
@@ -19,12 +19,12 @@
 ---
 
 ### 2. Create blog list template
-- [ ] Create `layouts/blog/list.html` template for blog listing page
-- [ ] Display blog post titles, dates, and excerpts/summaries
-- [ ] Add proper semantic HTML structure
-- [ ] Apply Bootstrap styling for consistent look
-- [ ] Ensure responsive design (mobile-first)
-- [ ] Add pagination structure (even if not needed yet, for future)
+- [x] Create `layouts/blog/list.html` template for blog listing page
+- [x] Display blog post titles, dates, and excerpts/summaries
+- [x] Add proper semantic HTML structure
+- [x] Apply Bootstrap styling for consistent look
+- [x] Ensure responsive design (mobile-first)
+- [x] Add pagination structure (even if not needed yet, for future)
 
 **Validation:** Running `hugo server` shows blog list page at `/de/blog/` with article listed
 
@@ -35,12 +35,12 @@
 ---
 
 ### 3. Create blog post single template
-- [ ] Create `layouts/blog/single.html` template for individual blog posts
-- [ ] Display post title, date, and full content
-- [ ] Add article metadata (author, date, reading time if desired)
-- [ ] Style content appropriately (headings, paragraphs, code blocks, etc.)
-- [ ] Ensure responsive design
-- [ ] Add navigation back to blog list
+- [x] Create `layouts/blog/single.html` template for individual blog posts
+- [x] Display post title, date, and full content
+- [x] Add article metadata (author, date, reading time if desired)
+- [x] Style content appropriately (headings, paragraphs, code blocks, etc.)
+- [x] Ensure responsive design
+- [x] Add navigation back to blog list
 
 **Validation:** Blog post accessible at `/de/blog/ki-generierte-website-praxisbeispiel/` with proper formatting
 
@@ -51,10 +51,10 @@
 ---
 
 ### 4. Add blog navigation
-- [ ] Add "Blog" link to navigation menu (German: "Blog", English: "Blog")
-- [ ] Update `config.toml` with blog menu items for both languages
-- [ ] Verify navigation links work correctly
-- [ ] Ensure active state highlighting works on blog pages
+- [x] Add "Blog" link to navigation menu (German: "Blog", English: "Blog")
+- [x] Update `hugo.toml` with blog menu items for both languages
+- [x] Verify navigation links work correctly
+- [x] Ensure active state highlighting works on blog pages
 
 **Validation:** Blog link appears in navigation, clicking it navigates to blog list page
 
@@ -65,12 +65,12 @@
 ---
 
 ### 5. Verify and test
-- [ ] Build site with `hugo` command (no errors)
-- [ ] Test blog list page rendering
-- [ ] Test blog post page rendering
-- [ ] Verify multilingual structure (German blog accessible, English structure ready)
-- [ ] Test navigation and links
-- [ ] Verify responsive design on mobile/tablet/desktop viewports
+- [x] Build site with `hugo` command (no errors)
+- [x] Test blog list page rendering
+- [x] Test blog post page rendering
+- [x] Verify multilingual structure (German blog accessible, English structure ready)
+- [x] Test navigation and links
+- [x] Verify responsive design on mobile/tablet/desktop viewports
 - [ ] Run Lighthouse audit (score should remain >90)
 - [ ] Check accessibility (WCAG 2.1 AA compliance)