Major redesign: white nav, project lightbox with gallery + before/after slider

- Nav: white background, logo image (MarszalekLogoGrau.jpg) replaces text
- Projekte: removed filter bar (Alle/Wohnen/etc.), plain grid
- Lightbox: click any project to open modal with full image gallery,
  thumbnail strip, description, keyboard/touch navigation
- Before/after drag slider for 5 renovation projects:
  Sanierung, Landhaus, Winzerhaus Neusiedlersee, Dachausbau,
  Winzerhaus 14. Jhdt.
- Downloaded 108 extra gallery images locally (no CDN dependency)
- Über uns: removed Herbert Marszalek, Florian more prominent
- CLAUDE.md updated to reflect all changes

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

CLAUDE.md

@@ -21,6 +21,12 @@ node generate-favicons.js
 ```
 Reads `favicon.svg` and exports `favicon-16x16.png`, `favicon-32x32.png`, and `apple-touch-icon.png` via puppeteer. Run this whenever `favicon.svg` changes.
 
+### Download gallery images from old site
+```
+node download-gallery-images.js
+```
+Downloads all extra project gallery images from `old.marszalekarchitekten.at` into `images/`. Safe to re-run — skips files that already exist.
+
 ### Build and run via Docker
 ```
 docker compose up --build -d   # build image and start on port 8082
@@ -36,7 +42,7 @@ npm install
 
 ```
 index.html                           ← entire website (HTML + CSS + JS)
-images/                              ← all portfolio photos, self-hosted (15 JPEGs)
+images/                              ← all portfolio photos, self-hosted (120+ JPEGs)
 favicon.svg                          ← master favicon (M monogram, green #99cc00 bg)
 favicon-16x16.png                    ← ┐
 favicon-32x32.png                    ← ├ generated from favicon.svg via generate-favicons.js
@@ -44,6 +50,7 @@ apple-touch-icon.png                 ← ┘
 infosheet-template.html              ← HTML source rendered to PDF by Puppeteer
 generate-pdf.js                      ← Node script: opens template in Chrome → exports A4 PDF
 generate-favicons.js                 ← Node script: renders favicon.svg → PNG at 3 sizes
+download-gallery-images.js           ← Node script: fetches gallery images from old WP site
 marszalek-architekten-infosheet.pdf  ← pre-generated output; committed to repo
 nginx.conf                           ← caching, gzip, PDF download header
 Dockerfile                           ← nginx:alpine; copies all static assets
@@ -54,18 +61,38 @@ docker-compose.yml                   ← single service, host port 8082 → cont
 `infosheet-template.html` is a self-contained 2-page A4 HTML document (mm units, `print-color-adjust: exact`, `page-break-after: always` between pages). `generate-pdf.js` loads it via a `file:///` URL in headless Chrome, waits 1.5 s for Google Fonts, then calls `page.pdf()`. The output PDF is committed — Docker does **not** regenerate it at build time.
 
 ### Website structure
-`index.html` is a single-page site with five anchor-linked sections: `#home` (hero), `#projekte` (portfolio grid with JS category filter), `#leistungen` (services), `#ueber-uns` (team), `#kontakt` (contact + Google Maps iframe + PDF download banner). Portfolio images are served from the local `images/` folder — **do not revert to the WordPress CDN URLs**, as the WordPress server blocks hotlinking on mobile. Google Fonts (Cormorant Garamond + Inter) are the only remaining external dependency.
+`index.html` is a single-page site with five anchor-linked sections:
+
+- **`#home`** — hero with full-viewport background photo
+- **`#projekte`** — 3-column portfolio grid; clicking a card opens the lightbox
+- **`#leistungen`** — services (2-column grid)
+- **`#ueber-uns`** — single team member (Florian Marszalek)
+- **`#kontakt`** — contact details + Google Maps iframe + PDF download banner
+
+All images are served from the local `images/` folder — **do not use WordPress CDN URLs**, as the WordPress server blocks hotlinking on mobile.
+
+### Project lightbox
+Clicking any `.p-item[data-project]` in the portfolio grid opens a modal (`#lightbox`). All project data (title, description, image list, optional before/after pair) lives in the `projects` object in the inline `<script>`. The lightbox has:
+- A main image stage with `‹` / `›` arrow navigation and keyboard arrow-key support
+- A scrollable thumbnail strip
+- A **before/after comparison slider** (`#ba-section`) shown only for projects that define `beforeAfter: { before, after }` — currently 5 renovation projects: Sanierung, Landhaus, Winzerhaus Neusiedlersee, Dachausbau, Winzerhaus 14. Jhdt.
+
+To add a new project: add a `.p-item` card with `data-project="slug"` in the HTML grid, and add a matching entry to the `projects` JS object.
+
+### Navigation
+The nav bar has a **white** (`#ffffff`) background with the logo image (`images/MarszalekLogoGrau.jpg`). The green accent (`#99cc00`) is used only in the PDF header and favicon — not in the nav.
 
 ### Third-party integrations
-- **Analytics**: Matomo at `analytics.stranto.com`, site ID `3` — snippet is in `<head>` of `index.html`.
-- **Map**: Google Maps iframe embed (no API key) in the `#kontakt` section, centred on `48.1176923, 16.2631144` (Elisabethstraße 14, Perchtoldsdorf).
+- **Analytics**: Matomo at `analytics.stranto.com`, site ID `3` — snippet in `<head>` of `index.html`.
+- **Map**: Google Maps iframe embed (no API key) in `#kontakt`, centred on `48.1176923, 16.2631144` (Elisabethstraße 14, Perchtoldsdorf).
+- **Fonts**: Google Fonts (Cormorant Garamond + Inter) — the only remaining external dependency.
 
 ### Brand colours
-- Green accent: `#99cc00` — nav bar background, PDF header, favicon background
+- Green accent: `#99cc00` — PDF header, favicon background
 - Near-black: `#0f0f0f` — body text, footer, favicon M lettermark
-- Grey-mid: `#999` — used for secondary labels; defined as `--grey-mid` in `index.html`
+- Grey-mid: `#999` — secondary labels; CSS var `--grey-mid`
 
 ## Deployment (Portainer)
 Stack points at `https://git.stranto.com/cgasser/web_marszalekarchitekten`, branch `master`. Site is available on the host at port **8082**.
 
-When content changes: edit `index.html` and/or `infosheet-template.html`, regenerate the PDF with `node generate-pdf.js`, commit all changed files, and redeploy the stack in Portainer.
+When content changes: edit `index.html` and/or `infosheet-template.html`, regenerate the PDF with `node generate-pdf.js`, commit all changed files (including any new images), and redeploy the stack in Portainer.