--- /dev/null
+# CLAUDE.md – Theme `hugo-juplo`
+
+Diese Datei enthält Anweisungen für Claude Code beim Arbeiten mit diesem Theme-Branch (`frontend`).
+
+## Arbeitsregeln
+
+- Das Theme wird separat vom Content-Branch entwickelt.
+- Commits in diesem Repo erhalten zunächst immer die Message `WIP:hugo-juplo-theme` (der Verlauf wird später aufgeräumt).
+- Die `exampleSite` dient zum isolierten Testen des Themes ohne den Content-Branch.
+- Änderungen sollen rückwärtskompatibel sein, solange Theme und Content-Branch noch gleichzeitig entwickelt werden.
+
+## Verzeichnisstruktur
+
+```
+hugo-juplo/
+├── layouts/ ← Hugo-Templates
+│ ├── baseof.html ← Basis-Template (HTML-Gerüst aller Seiten)
+│ ├── _partials/ ← Wiederverwendbare Partials
+│ │ ├── head.html ← <head>-Element mit CSS/JS
+│ │ ├── header.html ← Site-Header (Logo, Slogan)
+│ │ ├── breadcrumb.html ← Standard-Breadcrumb
+│ │ ├── post_meta.html ← Metadaten für Blog-Artikel
+│ │ ├── terms.html ← Taxonomie-Terms in der Marginalspalte
+│ │ └── menu/
+│ │ ├── default.html ← Standard-Menü (nutzt tree.html)
+│ │ └── tree.html ← Rekursives Partial für den Seitenbaum
+│ ├── _shortcodes/ ← Shortcodes für Content-Dateien
+│ │ ├── marginalcontent-html.html ← HTML-Content in Marginalspalte
+│ │ ├── marginalcontent-md.html ← Markdown-Content in Marginalspalte
+│ │ ├── footerlinks.html ← Seitenspezifische Footer-Links
+│ │ └── recent-posts.html ← Liste der neuesten Blog-Artikel
+│ ├── blog/ ← Blog-spezifische Templates
+│ │ ├── section.html ← Blog-Startseite
+│ │ └── archive/ ← Blog-Archiv-Templates
+│ ├── categories/ ← Kategorie-Templates
+│ ├── tags/ ← Tag-Templates
+│ └── ... ← Weitere Layouts (section, page, article, taxonomy, term)
+├── assets/scss/ ← SCSS-Quellen
+│ ├── base.scss ← Basis-Styles (immer geladen)
+│ ├── screen.scss ← Desktop-Styles
+│ ├── tablet.scss ← Tablet-Breakpoint
+│ ├── phone.scss ← Mobil-Breakpoint
+│ ├── tiny.scss ← Kleinstgeräte
+│ └── print.scss ← Druck-Styles
+├── content/ ← Struktureller Theme-Content
+│ ├── about/ ← About-Sektion mit Unterseiten
+│ ├── blog/archive/ ← Blog-Archiv-Index
+│ ├── categories/ ← Kategorie-Taxonomy-Index
+│ └── tags/ ← Tag-Taxonomy-Index
+├── static/ ← Statische Assets (JS, vorcompiliertes CSS)
+│ └── js/prettify.js ← Syntax-Highlighting (Google Code Prettify)
+└── exampleSite/ ← Standalone-Testsite für Theme-Entwicklung
+```
+
+## Menü-System
+
+Das Menü (`nav#nav`) ist bewusst am HTML-Ende platziert und funktioniert gleichzeitig als SEO-Sitemap. Details zum Konzept: siehe CLAUDE.md im Content-Repo.
+
+**Aktueller Stand der Menü-Templates:**
+- `_partials/menu/default.html`: Generisches Menü für nicht-Blog-Seiten (nutzt `tree.html`)
+- `_partials/menu/tree.html`: Rekursives Partial für den Seitenbaum (mit Projects-Sichtbarkeitslogik)
+- Für Blog/Categories/Tags ist der Menü-Block direkt in den jeweiligen Layout-Dateien inline — das ist bewusstes technisches Debt, das konsolidiert werden soll.
+
+**Offene Aufgabe:** Den `menu`-Block aus den Einzeltemplates in ein einziges parametrisiertes Partial auslagern.
+
+## Shortcodes
+
+| Shortcode | Verwendung |
+|---|---|
+| `marginalcontent-html` | Injiziert HTML-Content in die Marginalspalte (über `.Page.Store`) |
+| `marginalcontent-md` | Injiziert Markdown-Content in die Marginalspalte (über `.Page.Store`) |
+| `footerlinks` | Setzt seitenspezifische Footer-Links (überschreibt den Standard-Fallback) |
+| `recent-posts` | Listet die neuesten 5 Blog-Artikel |
+
+## Hugo-Konfiguration (hugo.yaml im Content-Repo)
+
+Relevante Parameter für das Theme:
+
+| Parameter | Zweck |
+|---|---|
+| `params.author.name` | Autorenname für `post_meta.html` |
+| `params.copyrightShort` | Kurzname für Copyright-Zeile im Footer |
+| `params.dateFormat` | Datumsformat für Blog-Artikel (Standard: `":date_long"`) |
+| `mainSections` | Definiert die Hauptsektionen für das Section-Menu |