+Das Menü (`nav#nav`) verfolgt gleichzeitig zwei Ziele:
+
+1. **Nutzer-Navigation**: Der Nutzer soll sich durch die Seite bewegen können und immer verstehen, wo er sich befindet.
+2. **SEO-Sitemap**: Alle Seiten sind in einem strukturierten HTML-Block verlinkt, damit Suchmaschinen die vollständige Seitenstruktur erfassen können.
+
+Aus diesen Zielen folgt ein Kernprinzip: **Das Menü-HTML ist auf jeder Seite vollständig** — es enthält alle Seiten der Site in ihrer vollständigen Hierarchie. Welche Einträge in einem gestalteten Layout sichtbar sind, steuert ausschließlich CSS. Das Layout `none` (kein CSS, Browser-Defaults) zeigt deshalb auf jeder Seite die vollständige Sitemap.
+
+Das Menü ist bewusst **am Ende des HTML** platziert (im `.marginal`-Bereich nach dem Hauptinhalt). In gestalteten Layouts erscheint es optisch neben dem Inhalt (float/grid), ohne die inhaltliche Lesereihenfolge zu unterbrechen. Suchmaschinen und Screen-Reader begegnen zuerst dem Inhalt.
+
+### Kanonischer Platz (Canonical Placement)
+
+Jede Seite erscheint im Menü **genau einmal**, an ihrem festen kanonischen Platz in der Hierarchie. Es gibt keine Duplikate:
+
+- Blog-Artikel erscheinen **nur unter dem Archiv** (ihr chronologischer Ablageort), niemals noch einmal unter Kategorien oder Tags.
+- Kategorien und Tags erscheinen als navigierbare Einträge im Menü, aber **ohne** die ihnen zugeordneten Artikel darunter. Die Artikel gehören ins Archiv, nicht in die Taxonomie.
+- Taxonomie-Seiten (Kategorien, Tags) sind aus Sicht des Menüs Inhalts-Seiten, die man besuchen kann — kein zweiter Weg zu denselben Artikeln.
+
+Diese Regel hält die Sitemap-Funktion des Menüs sauber: Es ist eine Karte der Inhalts-Hierarchie, keine mehrdimensionale Inhaltsindizierung.
+
+### NONE-Layout als semantische Baseline
+
+Das `none`-Layout ist **nicht** ein degradierter Fallback, sondern die **semantische Grundform** des Menü-HTML. Es zeigt:
+
+- Die vollständige Sitemap aller Seiten
+- Den aktiven Breadcrumb-Pfad durch fette Schrift (`<strong>` im HTML)
+- Die Hierarchie durch geschachtelte HTML-Listen
+
+Das Classic-Layout ist eine **gestaltete Interpretation** dieses HTML. Das Resurrection-Layout wird ebenfalls eine gestaltete Interpretation desselben HTML sein. Kein Layout soll das HTML verändern, um ein bestimmtes visuelles Ergebnis zu erreichen — das HTML drückt die Semantik aus, CSS die Gestaltung.
+
+**Konsequenz für die Implementierung**: Wenn eine CSS-Klasse für ein bestimmtes Layout benötigt wird, wird sie zum HTML hinzugefügt (als semantisch neutraler Marker). Wenn das `<strong>`-Element in einem Layout unerwünscht ist, wird es per CSS neutralisiert — nicht aus dem HTML entfernt.
+
+### Breadcrumb-Hervorhebung im Menü
+
+Der aktive Pfad — die aktuelle Seite und alle ihre Vorfahren bis Home — ist im Menü-HTML durch `<strong>` innerhalb des `<a>`-Elements markiert:
+
+```html
+<a href="/blog/archive/2021/" class="s selected"><strong>2021</strong></a>
+```
+
+Diese Markierung ist **semantisch**, nicht nur dekorativ: Sie drückt aus, dass dieser Eintrag Teil des aktuellen Kontexts ist. Im NONE-Layout rendert der Browser `<strong>` als fett — der Nutzer sieht ohne jedes CSS den kompletten Breadcrumb-Pfad fett hervorgehoben.
+
+In gestalteten Layouts wird `<strong>` je nach Bedarf neutralisiert oder anders gestaltet. Im Classic-Layout erfolgt die Neutralisierung über `display: contents` (s. Implementierungsabschnitt unten).
+
+---
+
+## Spec: Classic-Layout — Menü-Bildsprache
+
+### Überblick
+
+Das Classic-Layout zeigt das Menü als selektiv aufgeklappten Baum. Die visuelle Sprache kommuniziert auf einen Blick:
+- Wo man sich befindet (Breadcrumb-Pfad durch Farbe und Präfix)
+- Was man noch navigieren/aufklappen kann (Präfix `V` als Affordanz)
+- Welche Einträge Terminal-Links sind (Präfix `>` ohne Aufklapp-Option)
+
+### Präfix-System
+
+Vor jedem Eintrag kann ein Präfix erscheinen, der seinen Zustand kommuniziert:
+
+| Situation | Präfix | Wann |
+|---|---|---|
+| Eintrag hat sichtbare Untereinträge und man hovert darüber | `V ` | Hover/Fokus/Aktiv auf `li.sub > a` |
+| Eintrag liegt auf dem Breadcrumb-Pfad **und** hat sichtbare Untereinträge | `V ` | `li.sub > a.selected` |
+| Eintrag liegt auf dem Breadcrumb-Pfad, hat aber **keine** sichtbaren Untereinträge | `> ` | `li:not(.sub) > a.selected` |
+| Eintrag hat keine sichtbaren Untereinträge, man hovert darüber | `> ` | Hover/Fokus/Aktiv auf `li:not(.sub) > a` |
+
+**Das `V` signalisiert immer eine Möglichkeit**, entweder zu navigieren (Hover) oder eine bereits geöffnete Ebene (Selected mit sichtbaren Kindern). Das `>` zeigt, dass dieser Eintrag zwar ausgewählt oder navigierbar ist, aber keine weitere Ebene öffnet.
+
+### Sichtbarkeit und "Sub": die Bildsprache folgt dem tatsächlichen Verhalten
+
+Der Präfix `V` erscheint nur, wenn ein Eintrag **tatsächlich sichtbare** Untereinträge hat. Sind alle HTML-Untereinträge durch CSS unsichtbar (Klasse `nav-leaf`), gilt der Eintrag visuell als Terminal-Link — unabhängig davon, ob im HTML Sub-Elemente existieren.
+
+**Beispiel**: Jahres-Items (z.B. "2021") haben im HTML Artikel als Kinder. Im Classic-Layout sind diese Artikel aber alle `nav-leaf` und damit unsichtbar. Der Nutzer kann "2021" nicht "aufklappen" — es gibt nichts zu sehen. Deshalb hat "2021" keine `sub`-Klasse, und der Präfix ist `>` (ausgewählt, aber terminal) statt `V` (scheinbar aufklappbar).
+
+**Regel**: `sub` wird nur vergeben, wenn im Classic-Layout tatsächlich sichtbare Kinder existieren. Die Bildsprache darf den Nutzer nicht täuschen.
+
+### Sichtbarkeitslogik: der aktive Ast
+
+Das Classic-Menü zeigt immer genau den **aktiven Ast** — wie ein Dateimanager, der nur den aktuellen Ordner und seine direkten Geschwister anzeigt:
+
+- Einträge **außerhalb** des aktiven Pfads werden durch die CSS-Klasse `off` ausgeblendet (`display: none`)
+- Einträge **auf** dem aktiven Pfad sind immer sichtbar
+- Einträge, die im Menü strukturell vorhanden, aber prinzipiell nie sichtbar sein sollen (z.B. Blog-Artikel), erhalten `nav-leaf` (`display: none`)
+- Aufgeklappte Sub-Listen erhalten `active` und bekommen einen sichtbaren `margin-top` als visuellen Abstand zur übergeordneten Ebene
+
+### Besonderheit: Blog-Archiv
+
+Im Blog-Archiv-Bereich weicht die Sichtbarkeitslogik bewusst ab: **Alle Jahre sind immer sichtbar** (nie `off`), egal ob ein Jahr, ein Artikel darunter oder die Archiv-Übersicht aktiv ist. Der Nutzer kann jederzeit zwischen Jahrgängen wechseln, ohne zuerst zurücknavigieren zu müssen.
+
+Diese Ausnahme gilt nur für die **Jahre**. Die Artikel unter jedem Jahr sind immer `nav-leaf` (in Classic unsichtbar) — sie erscheinen nur im Inhaltsbereich der Seite, nicht im Menü.
+
+---
+
+## Implementierung: Menü-HTML und CSS-Klassen
+
+### CSS-Marker-Klassen
+
+Das HTML enthält **immer alle Einträge**. Die Sichtbarkeit im Classic-Layout wird ausschließlich über CSS-Klassen gesteuert:
projects / website / commitdiff