From 7682e371286932a7540f09ed97e2277bdb17f415 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 11 Aug 2026 21:31:44 +0000
Subject: [PATCH] fix(ui): Rundgang-Stapelung, Fuss der statischen Seiten, Hero
 geteilt (v66)

Rundgang: das hervorgehobene Zielelement zeichnete IN die Karte hinein.
Bei Schritt 3 stand der Fragebogentext ueber Titel und Knoepfen, und Klicks
dort trafen den Fragebogen statt "Weiter". Ursache ist eine Eigenheit von
`position: fixed`: der Layer bildet einen eigenen Stapelkontext, die Karte
darin kann dessen z-index nie ueberbieten. Ein hoeherer Wert an der Karte
waere wirkungslos geblieben - das Abdunkeln musste aus dem Layer heraus
(jetzt body.tour-on::before), damit die Reihenfolge Abdunkeln < Hervorhebung
< Karte ueberhaupt darstellbar ist.

Statische Seiten: der Generator schrieb `<footer class="footer">`, wofuer es
im Stylesheet gar keine Regel gibt - die App heisst `site-footer`. Die neun
Seiten trugen ihre Linkzeile also ungestylt am unteren Rand. Jetzt dieselbe
Leiste wie in der App, samt Marke, Trennern und GitHub-Zeichen.

Startseite: der Hero trug sieben Bausteine (Logo, Titel, Einleitung, Chips,
Zusage, Aktion, Import-Zeile). Die vier Schritte und die Local-First-Zusage
stehen jetzt in einem eigenen Abschnitt mit eigener h2.

Titel, Einleitung und die drei Meta-Beschreibungen sagten "Datenmanagement" -
wofuer das Werkzeug gebaut ist, naemlich Daten zu oeffnen, kam nirgends vor.
Alle vier benennen jetzt Open Data.

showView() fuehrte eine Liste von IDs plus einen Sonderfall fuer .consult-cta;
der neue Abschnitt waere auf allen sechs Unterseiten stehen geblieben, ohne
dass etwas rot geworden waere. Jetzt entscheidet die Klasse .home-only.

5 neue Tests (376 gesamt), sechs Mutationen einzeln geprueft.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011QxDJcLg9h8zdL9ZpTTty7
---
 CLAUDE.md                                  | 18 +++--
 README.md                                  |  4 +-
 css/styles.css                             | 56 +++++++++++++--
 datenschutz/index.html                     | 12 +++-
 index.html                                 | 79 ++++++++++++----------
 js/app.js                                  | 18 ++---
 tests/seo.spec.js                          | 13 ++++
 tests/smoke.spec.js                        | 49 ++++++++++++++
 tests/tour.spec.js                         | 61 +++++++++++++++++
 tools/generate-wissen.js                   | 12 +++-
 wissen/glossar/index.html                  | 12 +++-
 wissen/index.html                          | 12 +++-
 wissen/kommunale-satzungen/index.html      | 12 +++-
 wissen/lizenzen/index.html                 | 12 +++-
 wissen/pruefwerkzeuge/index.html           | 12 +++-
 wissen/rechtsgrundlagen-laender/index.html | 12 +++-
 wissen/rechtsgrundlagen/index.html         | 12 +++-
 wissen/reifegrad-modelle/index.html        | 12 +++-
 18 files changed, 344 insertions(+), 74 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index b400b67..17c0ee9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -11,7 +11,7 @@ Dieses Dokument beschreibt Architektur, Konventionen und wichtige Implementierun
 - **Einstiegspunkt:** `index.html`
 - **Styles:** `css/styles.css` (Layout & Komponenten) + `css/tokens.css` (Design-Tokens)
 - **Logik:** `js/app.js` (eine einzige Datei)
-- **Aktuelle Version:** `v65` (Script-Tag: `<script src="js/app.js?v=65">`)
+- **Aktuelle Version:** `v66` (Script-Tag: `<script src="js/app.js?v=66">`)
 
 ---
 
@@ -26,7 +26,7 @@ python3 -m http.server 8080
 
 **Cache-Busting:** Nach Änderungen an `app.js` die Versionsnummer im Script-Tag in `index.html` erhöhen und die sichtbare `v{N}` im Footer mitziehen. **Auch die CSS-Links (`css/tokens.css?v=N`, `css/styles.css?v=N`) tragen denselben `?v=N`** – bei reinen CSS-/Layout-Änderungen unbedingt mitziehen, sonst liefert GitHub Pages das alte Stylesheet:
 ```html
-<script src="js/app.js?v=65"></script>
+<script src="js/app.js?v=66"></script>
 ```
 
 ### Externe Aufrufe
@@ -66,7 +66,7 @@ Die App hat keinen Build-Schritt – getestet wird **die ausgelieferte App**, al
 ```bash
 npm install                      # nur Dev: @playwright/test (exakt gepinnt)
 npx playwright install chromium  # einmalig
-npm test                         # 371 Tests, ~145 s
+npm test                         # 376 Tests, ~150 s
 npm run test:ui                  # interaktiver Modus
 ```
 
@@ -116,7 +116,9 @@ Spätere Module hängen sich an `inventory` an: Modul 3a (Clearing) bewertet die
 
 ### View-Umschaltung
 
-Sieben Views: `home` (Hero + Akkordeon + Modul-Grid), `kompass` (Daten-Kompass), `inventory` (Inventar/Clearing/Qualität-Tabs), `governance` (RACI + Reifegrad), `pseudo` (Textbereinigung, drei Tabs), `wissen` (Wissens- & Methodik-Center) und `vorlagen` (Vorlagen & Musterdokumente). Zentral über `showView(name)` umgeschaltet (blendet die Home-Elemente per `style.display` aus, toggelt `.hidden` an `#kompass-view`/`#inventory-view`/`#governance-view`/`#pseudo-view`/`#wissen-view`/`#vorlagen-view`, blendet den Phase-4&5-Beratungsblock `.consult-cta` außerhalb von `home` aus, scrollt nach oben). `navTo(target)` kapselt die Navigations-Einstiege (Topbar-Brand → home, Hero-CTA + Topbar-„Loslegen" → kompass, Sidebar-Links `data-view`, Modul-Buttons; „Dateninventar" öffnet ohne Daten das Erklär-Modal, `kompass`/`governance`/`pseudo`/`wissen`/`vorlagen` jederzeit).
+**Startseiten-Abschnitte tragen `.home-only`.** `showView()` blendet sie über genau eine Abfrage aus (`document.querySelectorAll('.home-only')`) statt über eine Liste von IDs plus einen Sonderfall für `.consult-cta` – bis v65 wäre ein neuer Startseiten-Abschnitt auf allen Unterseiten stehen geblieben, ohne dass etwas rot geworden wäre. Aktuell: `#hero`, `#hero-steps`, `#about-accordion`, `#module-grid`, `.consult-cta`. Ein Test geht alle sechs Unterseiten durch und verlangt, dass keines davon sichtbar bleibt.
+
+Sieben Views: `home` (Hero + Schritte + Akkordeon + Modul-Grid), `kompass` (Daten-Kompass), `inventory` (Inventar/Clearing/Qualität-Tabs), `governance` (RACI + Reifegrad), `pseudo` (Textbereinigung, drei Tabs), `wissen` (Wissens- & Methodik-Center) und `vorlagen` (Vorlagen & Musterdokumente). Zentral über `showView(name)` umgeschaltet (blendet die Home-Elemente per `style.display` aus, toggelt `.hidden` an `#kompass-view`/`#inventory-view`/`#governance-view`/`#pseudo-view`/`#wissen-view`/`#vorlagen-view`, blendet den Phase-4&5-Beratungsblock `.consult-cta` außerhalb von `home` aus, scrollt nach oben). `navTo(target)` kapselt die Navigations-Einstiege (Topbar-Brand → home, Hero-CTA + Topbar-„Loslegen" → kompass, Sidebar-Links `data-view`, Modul-Buttons; „Dateninventar" öffnet ohne Daten das Erklär-Modal, `kompass`/`governance`/`pseudo`/`wissen`/`vorlagen` jederzeit).
 
 **Status-Dashboard (Startseite):** `#dashboard` erscheint auf `home`, sobald Daten vorliegen (`hasAnyData()`), sonst bleibt es per `.hidden` ausgeblendet (Erstnutzer sehen Hero + Module). `refreshDashboard()` (in `showView('home')` und beim Laden nach `loadState()`) toggelt Sichtbarkeit und ruft `renderDashboard()`, das vier Live-Kennzahl-Karten füllt: Daten-Kompass (`kompassOverall()` % + `kompassAmpel`), Governance (`reifegrad().score` % + `reifeAmpel`, „offen" ohne Antworten), Inventar (Anzahl + Ø `completeness`), Risiko-Clearing (Ampelverteilung via `ensureAllClearing()`). Jede Karte ist ein `[data-go]`-Schnellsprung. **Wichtig:** `[data-go]` ist **delegiert** an `document` gebunden (nicht pro Element), damit dynamisch gerenderte Dashboard-Karten ebenfalls greifen.
 
@@ -446,6 +448,8 @@ Der Verlauf steckt **additiv** in `buildProjectJSON()` (kein Schema-Bump – äl
 
 Geführter Durchlauf durch die Bausteine (`TOUR_STEPS`, `tour = { i, active }`). `startTour()` / `tourGo(±1)` / `endTour()`; `renderTour()` navigiert je Schritt via `navTo()`, hebt ein Ziel per `.tour-highlight` hervor (z-index über dem abdunkelnden `#tour-layer`) und baut die Karte `#tour-card` (`role="dialog"`, `aria-modal`). Escape und Pfeiltasten sind gebunden. **`trapFocus()` greift auch hier** – die Funktion sucht in `.modal-backdrop` *und* `.tour-layer`: `aria-modal` blendet den Rest für Screenreader aus, per Tab konnte man ihn vorher trotzdem verlassen und landete in einer Seite, die für sie gar nicht existiert.
 
+> ⚠️ **Die Stapelreihenfolge ist dreiteilig und hängt an einer Eigenheit von `position: fixed`.** Ein fixiertes Element bildet einen **eigenen Stapelkontext** – die Karte in `#tour-layer` kann dessen `z-index` also nie überbieten, egal welchen Wert sie selbst trägt. Bis v65 stand das Abdunkeln am Layer (1200) und `.tour-highlight` darüber (1201); das hervorgehobene Zielelement zeichnete damit **in die Karte hinein** (bei Schritt 3 stand der Fragebogentext über Titel und Knöpfen) und fing dort auch die Klicks ab. Seit v66 gilt: **Abdunkeln `body.tour-on::before` (1200) < Hervorhebung (1201) < Layer mit Karte (1202)**. Das Abdunkeln muss dafür *außerhalb* des Layers liegen – daher die Body-Klasse, die `startTour()` setzt und `endTour()` entfernt (sonst bliebe die Seite dauerhaft dunkel).
+
 **Bewusst kein Auto-Start als Modal beim ersten Laden** – das nimmt Erstnutzern die Kontrolle. Stattdessen ein wegklickbarer Hinweis `#tour-hint` auf der Startseite (`refreshTourHint()` in `showView('home')` + beim Laden) und ein Dauer-Einstieg `#sidebar-tour`. Gesehen-Status unter `datenlotse_tour` (`'done'`).
 
 Schritte mit `needsData` brauchen ein Inventar. Statt still Beispieldaten zu laden – eine Nebenwirkung, die niemand bestellt hat – bietet der Schritt den Import an (`#tour-sample`) und lässt die Entscheidung beim Menschen. Ein Test prüft, dass jedes `target` in der jeweiligen View wirklich existiert; sonst zeigt der Rundgang ins Leere, sobald sich Markup ändert.
@@ -511,7 +515,9 @@ Jede Unterseite trägt ihren Kopf in einem eigenen weißen Container; die Starts
 
 - **`.view-hero`** umschließt `.inventory-header` **und** den direkt folgenden `.inventory-hint`. Der Hinweis verliert darin seinen eigenen Kasten (sonst stünde Weiß in Weiß) und wird nur durch eine Linie abgesetzt.
 - **Die Aktionsbuttons bekommen im Hero eine eigene Zeile** (`flex-direction: column`). Nebeneinander hingen sie je nach Länge des Untertitels auf halber Höhe – jede Unterseite sah anders aus. Der Rhythmus ist jetzt überall: Badge → Titel → Untertitel → Aktionen → Einleitung.
-- **Die statischen Seiten teilen den Kopf** (`.static-hero`, erzeugt in `tools/generate-wissen.js`): Brotkrumen, Titel und Lead stehen im selben weißen Container. Sie sind aus dem Fuß und aus dem Wissens-Center verlinkt und sollen wie dasselbe Produkt aussehen, nicht wie ein angehängtes Dokument. Ein Test prüft den Container je Seite.
+- **Der Hero der Startseite trägt seit v66 nur noch den Einstieg**: Logo, Titel, Einleitung, Aktion und die Import-Zeile. Die vier Schritt-Chips und die Local-First-Zusage stehen darunter in einem **eigenen Abschnitt** (`#hero-steps`, `.steps-section`/`.steps-panel`, Überschrift als `<h2>` – je Ansicht bleibt genau eine `<h1>`). Vorher waren es sieben Bausteine in einem Container, die einander die Aufmerksamkeit nahmen.
+- **Titel und Einleitung benennen den Zweck.** Bis v65 stand dort „Datenmanagement verstehen, aufbauen, vertiefen" – wofür das Werkzeug gebaut ist, nämlich Daten zu **öffnen**, kam weder in der Überschrift noch im Einleitungssatz vor. Beides sagt es jetzt ausdrücklich (und die Meta-Beschreibungen ebenso); ein Test hält Titel *und* Einleitungssatz fest, weil eine Überschrift ohne den Satz darunter nur die halbe Aussage wäre.
+- **Die statischen Seiten teilen den Kopf** (`.static-hero`, erzeugt in `tools/generate-wissen.js`) – und seit v66 auch den **Fuß**: der Generator schrieb `class="footer"`, wofür es gar keine Regel gibt, die Linkzeile stand also ungestylt am unteren Rand. Es ist dieselbe Leiste wie in der App, also dieselbe Klasse `.site-footer` samt Marke, Trennern und GitHub-Zeichen. Ein Test prüft je Seite Grundfarbe, obere Linie und die Marke.: Brotkrumen, Titel und Lead stehen im selben weißen Container. Sie sind aus dem Fuß und aus dem Wissens-Center verlinkt und sollen wie dasselbe Produkt aussehen, nicht wie ein angehängtes Dokument. Ein Test prüft den Container je Seite.
 - Der Seitentitel bleibt das **einzige `<h1>`** der Ansicht (ein Test prüft genau eine sichtbare `h1` je View) – der Hero ist ein Container, keine zusätzliche Überschrift.
 
 ---
@@ -635,6 +641,7 @@ Nach Änderungen an `app.js` `?v=N` im Script-Tag **und** die `v{N}` im Footer e
 | Kompass-Verlauf | `kompassSnapshot()`, `kompassTrend()`, `renderKompassHistory()`, `loadKompassHistory()`, `clearKompassHistory()`, `kompassHistory` (State) | `#kompass-history`, `#kompass-snap`, `#kompass-hist-clear`, `.khist-bar`, `datenlotse_kompass_verlauf` |
 | Prüfwerkzeuge & Normtexte | `PRUEF_WERKZEUGE`, `renderWissen()` | `#wissen-sec-tools`, `#wissen-tools` |
 | Hero je Ansicht | `.view-hero` (App), `.hero-panel` (Start), `.static-hero` (erzeugte Seiten) | `.inventory-header`, `.inventory-hint`, `.static-crumbs` |
+| Startseite: Hero + Schritte getrennt | `showView()` über `.home-only` | `#hero`, `#hero-steps`, `.steps-panel`, `.steps-title`, `.hero-steps`, `.hero-trust` |
 | Statische Seiten & Datenschutz | `tools/generate-wissen.js`: `seite()`, `seiten()`, `eigenstaendigeSeiten()` | `/wissen/…`, `/datenschutz/`, `sitemap.xml` |
 | Anonyme Seitenzählung | GoatCounter – einziger externer Aufruf, im Test abgeklemmt | `gc.zgo.at`, `datenlotse.goatcounter.com` |
 | Persistenz | `saveState()`, `loadState()`, `clearState()` | `datenlotse_*`, `#reset-data-btn` |
@@ -679,6 +686,7 @@ Nach Änderungen an `app.js` `?v=N` im Script-Tag **und** die `v{N}` im Footer e
 | v16 | Daten-Kompass (Herzstück) – eigene View + Hero-Haupt-CTA (Topbar-„Loslegen" zeigt ebenfalls darauf): ausführliche Open-Data-Reifegrad-Checkliste nach ODRA / EU Open Data Maturity / 5-Sterne / DCAT-AP.de / DSGVO·FAIR (7 Dimensionen, Quellenangaben), Status je Item mit Score & Ampel, Vorbelegung aus dem App-Stand, adaptive Sprünge in die passenden Bausteine, Persistenz (`datenlotse_kompass`) und PDF-Export; leeres „Loslegen"-Platzhalter-Modal entfernt |
 | v17 | Weiterer Ausbau (1/4) – Inventar Suche, Filter & Sortierung: `renderInventory()` in `renderInventory()` + `renderInventoryBody()` aufgeteilt; `.inv-controls` (Volltextsuche + Schutzbedarf-/Clearing-Ampel-Filter + Sortierung Titel/Vollständigkeit) über `invFilter`-State und `filteredInventory()`; der echte `idx` wird durch den Filter mitgeführt, sodass Editieren über gefilterten Teilmengen weiterhin den richtigen Datensatz trifft; Live-Meta „X von Y" + Empty-State |
 | v18 | Weiterer Ausbau (2/4) – Pseudonymisierung erweitert: drei neue Muster (Sozialversicherungsnummer, Steuer-ID *kontextgetriggert*, Kfz-Kennzeichen), Aktenzeichen um Geschäftszeichen/„Gz." und buchstabenhaltige Kerne erweitert, zusätzliche Geburtsdatum-Trigger („Geburtsdatum"/„Geburtstag"); Mapping-Export als CSV (`buildPseudoMappingCSV` + Button im Mapping-Kopf); Demo-Text und Grenzen-Liste aktualisiert; verifiziert auf Determinismus, Platzhalter-Konsistenz und Null-Falschtreffer auf neutralem Verwaltungstext |
+| v66 | **Ein Darstellungs-Durchgang – und dreimal dieselbe Lehre: eine Regel, die nicht greift, fällt niemandem auf.** Der auffälligste Fund kam aus der Benutzung: im Rundgang zeichnete das hervorgehobene Zielelement **in die Karte hinein** – bei Schritt 3 stand der Fragebogentext über Titel und Knöpfen, und Klicks dort trafen den Fragebogen statt „Weiter". Ursache ist eine Eigenheit von `position: fixed`: der Layer bildet einen **eigenen Stapelkontext**, die Karte darin kann dessen `z-index` also nie überbieten, egal welchen Wert man ihr gibt. Ein höherer Wert an der Karte wäre wirkungslos geblieben – das Abdunkeln musste **aus dem Layer heraus** (jetzt `body.tour-on::before`), damit die Reihenfolge Abdunkeln < Hervorhebung < Karte überhaupt darstellbar ist. Zweiter Fund derselben Art: der Wissens-Generator schrieb `<footer class="footer">`, und **eine solche Regel gibt es im Stylesheet gar nicht** – die App heißt `site-footer`. Die neun statischen Seiten trugen ihre Linkzeile also seit jeher ungestylt und ohne Grund am unteren Rand. Dritter: `showView()` führte eine **Liste von IDs** plus einen Sonderfall für `.consult-cta`; der neue Startseiten-Abschnitt wäre auf allen sechs Unterseiten stehen geblieben, ohne dass etwas rot geworden wäre – jetzt entscheidet die Klasse `.home-only`, und ein Test geht alle Unterseiten durch. Dazu der inhaltliche Teil: der Hero trug sieben Bausteine (Logo, Titel, Einleitung, Chips, Zusage, Aktion, Import-Zeile) und sagte in Titel wie Einleitung „Datenmanagement" – **wofür das Werkzeug gebaut ist, nämlich Daten zu öffnen, kam nirgends vor**. Die vier Schritte stehen jetzt in einem eigenen Abschnitt, Titel, Einleitung und die drei Meta-Beschreibungen benennen Open Data. 5 neue Tests, sechs Mutationen einzeln geprüft. |
 | v65 | **Die Initiative Transparente Zivilgesellschaft – mit sichtbar gemachter Quellenlage.** Nachgezogen auf Wunsch: die freiwillige Selbstverpflichtung ist strukturell dasselbe wie ein Transparenzgesetz – ein fester Katalog, den man abarbeitet, nur eben freiwillig – und damit der passendste Anker für gemeinnützige Organisationen. Dazu der Praxisleitfaden von Bernhard Krabina (Bertelsmann Stiftung), der ausdrücklich für zivilgesellschaftliche Akteure geschrieben ist. **Beide haben die schwächste Quellenlage im ganzen Werkzeug:** die Angaben stammen aus Suchergebnissen, nicht aus dem Volltext, weil die Netzwerkrichtlinie beide Seiten sperrt. Belegt sind fünf der zehn Punkte. Der Eintrag behauptet deshalb keine Vollständigkeit, sondern nennt sie als Ausschnitt und verweist für den Wortlaut auf die Quelle – und **drei Tests halten genau diese Zurückhaltung fest**, damit sie beim nächsten Bearbeiten nicht verlorengeht. Beim Schreiben fiel auf, dass ich die Lizenz des Leitfadens in einer früheren Auswertung mit „CC BY 4.0" angegeben hatte, obwohl die Suche das nie hergab; der Eintrag führt deshalb keine Lizenzangabe, und ein Test verbietet sie. **Dazu ein Doku-Abgleich gegen den Code** nach der Methode aus v52 (Zahlen im Browser ausgelesen, nicht aus dem Gedächtnis geschrieben): die Zählwerte stimmten alle, die *Beschreibungen* nicht. In CLAUDE.md stand die Sektion „Vollständigkeit (Ampel)" seit v63 im Widerspruch zur MQA-Sektion drei Absätze darüber – sie behauptete weiter das Zählen gefüllter Pflichtfelder; die Rechtspflicht-Sektion kündigte „genau zwei" Stellen an und führte dann drei auf (v56 hatte die dritte ergänzt, ohne den Satz mitzuziehen); die Feature-Tabelle hatte keine MQA-Zeile. Im README fehlten `sample-verein.csv` (v58) sowie `risiko.spec.js` und `tour.spec.js` in der Dateistruktur, Font Awesome stand noch mit „solid, regular, brands", obwohl v45 die Brands-Familie ganz entfernt hat, an drei Stellen war von „Verwaltungstexten" die Rede, die v58 gerade aufgelöst hatte, und die Prüfwerkzeuge nannten vier von neun. Nebenbei kam heraus, dass **`REQUIRED_FIELDS` von der App gar nicht mehr gelesen wird** – seit v63 greift die Qualitätsprüfung direkt auf `DCAT_REQUIRED` zu, die Konstante steht nur noch als Handgriff für `tests/inventory.spec.js`; das ist jetzt an der Stelle vermerkt, statt als stille Falle liegen zu bleiben. |
 | v64 | **Der zivilgesellschaftliche Anknüpfungspunkt – aus den Quellen, die wirklich vorlagen.** Die auffälligste Lücke war keine fehlende Liste, sondern eine fehlende Leserichtung: die 16 Landesgesetze standen nur als Pflicht der informationspflichtigen Stelle da. Für einen Verein sind dieselben Gesetze das Werkzeug, um an Daten zu kommen – der Lead benennt jetzt beide Richtungen und verweist auf FragDenStaat. Dazu drei Werkzeuge aus dem Bericht: der **Musterdatenkatalog** als Antwort auf „was veröffentlichen andere?", **ARX** als das, was DatenLotse bewusst nicht tut (generalisieren und unterdrücken statt nur messen), und **OParl 1.1** für Ratsinformationen. **DigComp** kommt als frei lizenzierte Ergänzung zu Data Orchard dazu – ausdrücklich nicht als Ersatz, denn es beschreibt einzelne Personen, während die Dimension nach der Organisation fragt. Nicht übernommen: die geplante IFG-Einschränkung (im Bericht selbst nur advocacy-belegt, kein amtlicher Entwurf) und die Initiative Transparente Zivilgesellschaft (stammte aus einer eigenen Suche, nicht aus dem Bericht). Beim Einfügen fiel auf, dass der Bestandstest für die Werkzeugliste eine **Host-Liste** kodierte; die eigentliche Regel ist „jede Adresse zeigt auf die herausgebende Stelle selbst" – der Test führt jetzt eine Zuordnung Name → Host, sodass ein neuer Eintrag eine Entscheidung erzwingt. 6 neue Tests. Ein Mutationslauf lief zunächst wirkungslos durch, weil das deutsche Schlusszeichen den Python-String beendete, ein zweiter blieb grün, weil mein Test auf „ergänzt" prüfte – das steht auch im mutierten Text. Erst die Prüfung auf „statt sie zu ersetzen" machte ihn rot. |
 | v63 | **Die Vollständigkeits-Zahl war zu freundlich.** `completeness()` zählte gefüllte Pflichtfelder – ein Datensatz mit allen Pflichtangaben stand auf 100 %, auch ohne Schlagwörter, ohne Zeitraum und nur als PDF. Genau dagegen richtet sich der Leitgedanke der Metadata Quality Assurance von data.europa.eu. Die Zahl folgt jetzt deren Schema: fünf FAIR-Dimensionen, 405 Punkte, 18 Einzelprüfungen. **Ersatz statt drittes Maß** – der Funktionsname bleibt, damit Badge, Durchschnitt, Sortierung, Dashboard und Bericht weiter an genau einer graduellen Zahl hängen. Ein frischer Import fällt damit von ~83 % auf ~46 %; das ist der Zweck. Sauber getrennt ist, was übernommen wurde: die **Dimensionsgewichte** stammen aus der Methodik, die **Zuordnung der Einzelprüfungen** ist eigene Zutat – ein Test pinnt die Gewichte wörtlich und prüft, dass jede Dimension ihr Maximum ausschöpft. Ausdrücklich benannt ist auch, was der Wert **nicht** ist: die MQA ruft URLs ab, DatenLotse macht keine Netzaufrufe und prüft nur Vorhandensein und Wohlgeformtheit. Der stärkste Test geht die 18 Prüfungen einzeln durch und misst, ob jede ihre vollen Punkte ausmacht – eine wirkungslose Prüfung fällt sofort auf. Beim Bauen zeigte sich nebenbei, dass `empty()` zweimal wortgleich als lokale Hilfe existierte; jetzt einmal modulweit. 8 neue Tests, drei bestehende auf die neue Semantik umgeschrieben statt gelockert. Ein erster Mutationsversuch war zu schwach gewählt und lief grün durch – erst die schärfere Fassung (Positivliste akzeptiert alles) machte ihn rot. |
diff --git a/README.md b/README.md
index 15b16bb..bc2960b 100644
--- a/README.md
+++ b/README.md
@@ -116,7 +116,7 @@ Die App selbst bleibt abhängigkeitsfrei; für die Tests wird einmalig Playwrigh
 ```bash
 npm install                      # nur Dev: @playwright/test
 npx playwright install chromium
-npm test                         # 371 Tests, ~145 s
+npm test                         # 376 Tests, ~150 s
 npm run test:ui                  # interaktiver Modus
 ```
 
@@ -309,7 +309,7 @@ datenlotse/
 │   ├── sample-landesbehoerde.csv # Beispiel: fiktive Landesebene (12 Datensätze)
 │   ├── sample-verein.csv       # Beispiel: fiktiver gemeinnütziger Träger (12 Datensätze)
 │   └── template.csv            # Leere Vorlage zum eigenen Befüllen
-├── tests/                      # Playwright-End-to-End-Tests (371 Tests in 14 Dateien)
+├── tests/                      # Playwright-End-to-End-Tests (376 Tests in 14 Dateien)
 │   ├── helpers.js              # openApp/loadSample/Download-Helfer
 │   ├── smoke.spec.js           # Views, Routing, Dashboard, HTML-Validität, Anrede
 │   ├── import.spec.js          # CSV-Parser, Ableitung, Formel-Injection
diff --git a/css/styles.css b/css/styles.css
index db2e58e..cd7cdba 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -147,6 +147,39 @@ a { color: var(--c-accent); }
   max-width: 620px;
   margin: 0 auto;
 }
+/* ── „So kommen Sie zu offenen Daten" ────────────────────────────
+   Eigener Abschnitt unter dem Hero. Vorher steckten Logo, Titel, Einleitung,
+   Chips, Zusage, Aktion und Import-Zeile alle im Hero-Container – sieben
+   Bausteine, die einander die Aufmerksamkeit nahmen. */
+.steps-section {
+  max-width: 940px;
+  margin: var(--home-gap) auto 0;
+  padding: 0 24px;
+  text-align: center;
+}
+.steps-panel {
+  background: #fff;
+  border: 1px solid var(--glass-border);
+  border-radius: 18px;
+  box-shadow: var(--shadow-md);
+  padding: 32px 32px 30px;
+}
+.steps-title {
+  font-size: 21px;
+  font-weight: 800;
+  color: var(--c-accent);
+  margin: 0 0 8px;
+  letter-spacing: -0.4px;
+}
+.steps-title i { margin-right: 8px; }
+.steps-lead {
+  font-size: 14.5px;
+  color: var(--c-muted);
+  line-height: 1.6;
+  max-width: 560px;
+  margin: 0 auto;
+}
+
 /* Die vier Schritte als scannbare Chips statt eines langen grauen Fließtexts.
    Jeder Chip springt direkt in den passenden Baustein. */
 .hero-steps {
@@ -155,7 +188,7 @@ a { color: var(--c-accent); }
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
-  margin: 30px auto 0;
+  margin: 24px auto 0;
   max-width: 760px;
 }
 .hero-step {
@@ -1418,17 +1451,29 @@ a { color: var(--c-accent); }
 }
 .tour-hint-close:hover { background: rgba(66, 0, 147, 0.07); color: var(--c-accent); }
 
-.tour-layer.hidden { display: none; }
-.tour-layer {
+/* Das Abdunkeln liegt UNTER der hervorgehobenen Stelle (1201) und deshalb
+   an body::before, nicht am Layer: `position: fixed` macht den Layer zum
+   eigenen Stapelkontext, aus dem die Karte nicht herauskommt – sie stünde
+   sonst dauerhaft unter dem Zielelement. */
+body.tour-on::before {
+  content: '';
   position: fixed;
   inset: 0;
   z-index: 1200;
   background: rgba(30, 27, 46, 0.42);
+  pointer-events: none;
+}
+.tour-layer.hidden { display: none; }
+.tour-layer {
+  position: fixed;
+  inset: 0;
+  /* über der hervorgehobenen Stelle: sonst zeichnet das Zielelement in die Karte */
+  z-index: 1202;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding: 20px;
-  /* Der Layer dunkelt ab, blockiert aber nicht die hervorgehobene Stelle */
+  /* Der Layer blockiert die hervorgehobene Stelle nicht – nur die Karte fängt Klicks */
   pointer-events: none;
 }
 .tour-card {
@@ -2547,6 +2592,9 @@ details[open] > .about-summary .about-caret { transform: rotate(180deg); }
   /* Auf schmalen Geräten wird die Luft im Container zur Platzverschwendung */
   .hero { padding: 26px 16px 4px; }
   .hero-panel { padding: 26px 18px 24px; border-radius: 14px; }
+  .steps-section { padding: 0 16px; }
+  .steps-panel { padding: 22px 18px 22px; border-radius: 14px; }
+  .steps-title { font-size: 18px; }
   .view-hero { padding: 22px 18px 20px; margin: 22px 0 22px; border-radius: 14px; }
   .view-hero .inventory-title { font-size: 27px; }
   .view-hero .inventory-hint { padding-top: 14px; margin-top: 16px; }
diff --git a/datenschutz/index.html b/datenschutz/index.html
index 907927b..18245f6 100644
--- a/datenschutz/index.html
+++ b/datenschutz/index.html
@@ -42,7 +42,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -164,12 +164,20 @@ <h1 class="static-title">Datenschutzerklärung</h1>
 
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/index.html b/index.html
index 03da27f..24c3679 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DatenLotse – Von der Datenökosystem-Map zur Open-Data-Umsetzung</title>
-  <meta name="description" content="DatenLotse führt Organisationen von der kartierten Datenökosystem-Map zur operativen Umsetzung: Dateninventar nach DCAT-AP.de, Risiko-Clearing und datenschutzkonforme Pseudonymisierung – lokal im Browser.">
+  <meta name="description" content="DatenLotse führt Organisationen von der kartierten Datenökosystem-Map zur Veröffentlichung als Open Data: Dateninventar nach DCAT-AP.de, Risiko-Clearing und datenschutzkonforme Pseudonymisierung – lokal im Browser.">
   <meta name="author" content="nozilla">
   <meta name="robots" content="index, follow">
 
@@ -21,7 +21,7 @@
 
   <!-- Open Graph -->
   <meta property="og:title"       content="DatenLotse – Von der Map zur Open-Data-Umsetzung">
-  <meta property="og:description" content="Dateninventar nach DCAT-AP.de, Risiko-Clearing und datenschutzkonforme Pseudonymisierung – lokal im Browser, ohne Server.">
+  <meta property="og:description" content="Daten öffnen statt nur verwalten: Dateninventar nach DCAT-AP.de, Risiko-Clearing und datenschutzkonforme Pseudonymisierung – lokal im Browser, ohne Server.">
   <meta property="og:type"        content="website">
   <meta property="og:url"         content="https://datenlotse.nozilla.net/">
   <meta property="og:image"       content="https://datenlotse.nozilla.net/social-preview.png">
@@ -35,7 +35,7 @@
   <!-- Twitter Card -->
   <meta name="twitter:card"        content="summary_large_image">
   <meta name="twitter:title"       content="DatenLotse – Von der Map zur Open-Data-Umsetzung">
-  <meta name="twitter:description" content="Dateninventar nach DCAT-AP.de, Risiko-Clearing und datenschutzkonforme Pseudonymisierung – lokal im Browser, ohne Server.">
+  <meta name="twitter:description" content="Daten öffnen statt nur verwalten: Dateninventar nach DCAT-AP.de, Risiko-Clearing und datenschutzkonforme Pseudonymisierung – lokal im Browser, ohne Server.">
   <meta name="twitter:image"       content="https://datenlotse.nozilla.net/social-preview.png">
   <meta name="twitter:image:alt"   content="DatenLotse – Von der Map zur Open-Data-Umsetzung">
 
@@ -125,10 +125,10 @@
   <link rel="stylesheet" href="assets/fonts/inter/inter.css">
   <!-- Zugeschnitten auf die verwendeten Icons (tools/build-icons.py) – das
        vollstaendige all.min.css bleibt als Quelle im Repo, wird aber nicht geladen. -->
-  <link rel="stylesheet" href="assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="assets/fonts/fa/icons.min.css?v=66">
 
-  <link rel="stylesheet" href="css/tokens.css?v=65">
-  <link rel="stylesheet" href="css/styles.css?v=65">
+  <link rel="stylesheet" href="css/tokens.css?v=66">
+  <link rel="stylesheet" href="css/styles.css?v=66">
 </head>
 <body>
 
@@ -181,32 +181,11 @@
   <main id="main-content" tabindex="-1">
 
   <!-- ── Hero ──────────────────────────────────────────────────── -->
-  <section class="hero" id="hero">
+  <section class="hero home-only" id="hero">
     <div class="hero-panel">
     <img src="logo.svg" alt="DatenLotse" class="hero-logo">
-    <h1 class="hero-headline">DatenLotse: Datenmanagement verstehen, aufbauen, vertiefen</h1>
-    <p class="hero-sub">Der <strong>DatenLotse</strong> begleitet Ihre Organisation dabei, ein umfassendes <strong>Datenmanagement zu verstehen</strong> und <strong>aufzubauen</strong> – und den <strong>Ist-Zustand</strong> Ihrer Datenlandschaft vertiefend einzusehen.</p>
-
-    <ol class="hero-steps" aria-label="Die vier Schritte des DatenLotsen">
-      <li><button class="hero-step" data-go="kompass">
-        <span class="hero-step-ic"><i class="fas fa-compass"></i></span>
-        <span class="hero-step-text"><strong>Überblick</strong><span>Daten-Kompass</span></span>
-      </button></li>
-      <li><button class="hero-step" data-go="inventory">
-        <span class="hero-step-ic"><i class="fas fa-boxes-stacked"></i></span>
-        <span class="hero-step-text"><strong>Inventar</strong><span>nach DCAT-AP.de</span></span>
-      </button></li>
-      <li><button class="hero-step" data-go="clearing">
-        <span class="hero-step-ic"><i class="fas fa-traffic-light"></i></span>
-        <span class="hero-step-text"><strong>Risiko-Clearing</strong><span>Rot · Gelb · Grün</span></span>
-      </button></li>
-      <li><button class="hero-step" data-go="pseudo">
-        <span class="hero-step-ic"><i class="fas fa-user-shield"></i></span>
-        <span class="hero-step-text"><strong>Pseudonymisierung</strong><span>Texte bereinigen</span></span>
-      </button></li>
-    </ol>
-
-    <p class="hero-trust"><i class="fas fa-lock"></i> Ihre Daten bleiben im Browser · kein Konto · keine Übertragung von Inhalten</p>
+    <h1 class="hero-headline">DatenLotse: Daten verstehen, ordnen und als Open Data ver&ouml;ffentlichen</h1>
+    <p class="hero-sub">Vom <strong>Ist-Zustand</strong> Ihrer Datenlandschaft bis zur Ver&ouml;ffentlichung als <strong>Open Data</strong>: Welche Best&auml;nde lassen sich <strong>&ouml;ffnen</strong>, wie werden sie nach dem Standard <strong>DCAT-AP.de</strong> beschrieben &ndash; und was muss vorher gekl&auml;rt oder gesch&uuml;tzt werden?</p>
 
     <button class="btn btn-primary hero-cta" id="hero-kompass-btn"><i class="fas fa-compass"></i> Daten-Kompass starten</button>
     <p class="hero-from-graf">
@@ -216,6 +195,36 @@ <h1 class="hero-headline">DatenLotse: Datenmanagement verstehen, aufbauen, verti
     </div>
   </section>
 
+  <!-- ── Der Weg in vier Schritten ──────────────────────────────
+       Bewusst ein eigener Abschnitt statt eines weiteren Blocks im Hero:
+       Logo, Titel, Einleitung, Chips, Zusage, Aktion und Import-Zeile
+       standen sonst als sieben Bausteine in einem Container. -->
+  <section class="steps-section home-only" id="hero-steps">
+    <div class="steps-panel">
+      <h2 class="steps-title"><i class="fas fa-route"></i> So kommen Sie zu offenen Daten</h2>
+      <p class="steps-lead">Vier Schritte, jeder f&uuml;r sich nutzbar. Wenn Sie nicht wissen, wo Sie anfangen sollen: Der Daten-Kompass sagt es Ihnen.</p>
+      <ol class="hero-steps" aria-label="Die vier Schritte des DatenLotsen">
+        <li><button class="hero-step" data-go="kompass">
+          <span class="hero-step-ic"><i class="fas fa-compass"></i></span>
+          <span class="hero-step-text"><strong>Überblick</strong><span>Daten-Kompass</span></span>
+        </button></li>
+        <li><button class="hero-step" data-go="inventory">
+          <span class="hero-step-ic"><i class="fas fa-boxes-stacked"></i></span>
+          <span class="hero-step-text"><strong>Inventar</strong><span>nach DCAT-AP.de</span></span>
+        </button></li>
+        <li><button class="hero-step" data-go="clearing">
+          <span class="hero-step-ic"><i class="fas fa-traffic-light"></i></span>
+          <span class="hero-step-text"><strong>Risiko-Clearing</strong><span>Rot · Gelb · Grün</span></span>
+        </button></li>
+        <li><button class="hero-step" data-go="pseudo">
+          <span class="hero-step-ic"><i class="fas fa-user-shield"></i></span>
+          <span class="hero-step-text"><strong>Pseudonymisierung</strong><span>Texte bereinigen</span></span>
+        </button></li>
+      </ol>
+      <p class="hero-trust"><i class="fas fa-lock"></i> Ihre Daten bleiben im Browser · kein Konto · keine &Uuml;bertragung von Inhalten</p>
+    </div>
+  </section>
+
   <!-- ── Akkordeon: Über den DatenLotsen ───────────────────────── -->
   <div class="tour-hint hidden" id="tour-hint">
     <span class="tour-hint-text"><i class="fas fa-route"></i> Zum ersten Mal hier? Ein kurzer Rundgang zeigt, wof&uuml;r die Bausteine da sind.</span>
@@ -225,7 +234,7 @@ <h1 class="hero-headline">DatenLotse: Datenmanagement verstehen, aufbauen, verti
     </span>
   </div>
 
-  <section class="about-accordion" id="about-accordion">
+  <section class="about-accordion home-only" id="about-accordion">
     <details class="about-details">
       <summary class="about-summary">
         <span><i class="fas fa-compass"></i> Mehr über den DatenLotsen erfahren</span>
@@ -281,7 +290,7 @@ <h2 class="dashboard-title" id="dashboard-title"><i class="fas fa-gauge-high"></
   </section>
 
   <!-- ── Modul-Grid ────────────────────────────────────────────── -->
-  <section class="module-grid" id="module-grid">
+  <section class="module-grid home-only" id="module-grid">
 
     <!-- Modul 1 – Governance -->
     <article class="module-card">
@@ -858,7 +867,7 @@ <h3 class="view-next-title"><i class="fas fa-diagram-successor"></i> Woraus ents
   </section>
 
   <!-- ── Beratungs-CTA (Phase 4–5) ─────────────────────────────── -->
-  <section class="consult-cta">
+  <section class="consult-cta home-only">
     <div class="consult-cards">
       <div class="consult-card consult-card-info">
         <h2 class="consult-card-headline">Phase 4 &amp; 5: Pipeline &amp; zirkuläres Ökosystem</h2>
@@ -893,7 +902,7 @@ <h2 class="consult-card-headline">Umsetzung besprechen</h2>
            Brands-Familie und h&auml;tte daf&uuml;r 116 KB Schrift nachgeladen. -->
       <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
-    <span class="footer-version">v65</span>
+    <span class="footer-version">v66</span>
   </footer>
 
   <!-- ── FAQ-Modal ─────────────────────────────────────────────── -->
@@ -1109,7 +1118,7 @@ <h2 id="license-title"><i class="fas fa-id-card"></i> Lizenz-Wegweiser</h2>
     </div>
   </div>
 
-  <script src="js/app.js?v=65"></script>
+  <script src="js/app.js?v=66"></script>
 
   <!-- Anonyme Seitenzählung (GoatCounter). Der EINZIGE externe Aufruf der
        Seite: keine Cookies, kein LocalStorage, keine Kennung, kein
diff --git a/js/app.js b/js/app.js
index 99cca96..51fd9b7 100644
--- a/js/app.js
+++ b/js/app.js
@@ -515,7 +515,7 @@ function clearState() {
    Teile defensiv. grafRows wird mitgesichert (anders als im
    LocalStorage), damit der Import-Kontext vollständig ist. */
 const PROJECT_SCHEMA = 1;
-const APP_VERSION = 'v65';
+const APP_VERSION = 'v66';
 
 function buildProjectJSON() {
   return JSON.stringify({
@@ -1019,11 +1019,13 @@ function startTour() {
   tour.i = 0;
   tour.active = true;
   document.getElementById('tour-layer')?.classList.remove('hidden');
+  document.body.classList.add('tour-on');
   renderTour();
 }
 function endTour() {
   tour.active = false;
   document.getElementById('tour-layer')?.classList.add('hidden');
+  document.body.classList.remove('tour-on');
   document.querySelectorAll('.tour-highlight').forEach(el => el.classList.remove('tour-highlight'));
   closeSidebar();
   markTourSeen();
@@ -2950,9 +2952,11 @@ document.addEventListener('keydown', e => {
 
 /* ── View-Umschaltung (home / inventory / governance / pseudo) ── */
 function showView(name) {
-  ['hero', 'about-accordion', 'module-grid'].forEach(id => {
-    const el = document.getElementById(id);
-    if (el) el.style.display = (name === 'home') ? '' : 'none';
+  // Alles, was nur auf die Startseite gehört, trägt `.home-only` – vorher stand
+  // dafür eine Liste von IDs plus ein Sonderfall für `.consult-cta`; ein neuer
+  // Startseiten-Abschnitt wäre auf den Unterseiten stehen geblieben.
+  document.querySelectorAll('.home-only').forEach(el => {
+    el.style.display = (name === 'home') ? '' : 'none';
   });
   document.getElementById('inventory-view')?.classList.toggle('hidden', name !== 'inventory');
   document.getElementById('governance-view')?.classList.toggle('hidden', name !== 'governance');
@@ -2960,10 +2964,8 @@ function showView(name) {
   document.getElementById('kompass-view')?.classList.toggle('hidden', name !== 'kompass');
   document.getElementById('wissen-view')?.classList.toggle('hidden', name !== 'wissen');
   document.getElementById('vorlagen-view')?.classList.toggle('hidden', name !== 'vorlagen');
-  // Der Phase-4&5-Beratungsblock gehört auf die Startseite; Unterseiten bekommen
-  // stattdessen ihren eigenen, kontextpassenden „Wie geht es weiter?"-Block.
-  const cta = document.querySelector('.consult-cta');
-  if (cta) cta.style.display = (name === 'home') ? '' : 'none';
+  // Der Phase-4&5-Beratungsblock (`.consult-cta`) trägt dieselbe Klasse: Unterseiten
+  // bekommen stattdessen ihren eigenen, kontextpassenden „Wie geht es weiter?"-Block.
   if (name === 'home') { refreshDashboard(); refreshTourHint(); }
   else { const dash = document.getElementById('dashboard'); if (dash) dash.classList.add('hidden'); }
   window.scrollTo({ top: 0 });
diff --git a/tests/seo.spec.js b/tests/seo.spec.js
index f0416b2..b91d288 100644
--- a/tests/seo.spec.js
+++ b/tests/seo.spec.js
@@ -47,6 +47,19 @@ test.describe('Statische Wissensseiten', () => {
       // Seiten aus wie ein angehängtes Dokument statt wie dasselbe Produkt.
       await expect(page.locator('.static-hero h1')).toHaveCount(1);
       await expect(page.locator('.static-hero .static-crumbs')).toBeVisible();
+      // Regression v66: der Generator schrieb `class="footer"`, wofür es gar
+      // keine Regel gibt – die Linkzeile stand ungestylt und ohne Grund am
+      // unteren Rand. Es ist dieselbe Leiste wie in der App, also dieselbe Klasse.
+      const fuss = await page.evaluate(() => {
+        const f = document.querySelector('footer.site-footer');
+        if (!f) return null;
+        const cs = getComputedStyle(f);
+        return { grund: cs.backgroundColor, rahmen: cs.borderTopWidth, marke: !!f.querySelector('.footer-brand') };
+      });
+      expect(fuss).not.toBeNull();
+      expect(fuss.grund).toBe('rgb(255, 255, 255)');
+      expect(fuss.rahmen).not.toBe('0px');
+      expect(fuss.marke).toBe(true);
       expect(fehler).toEqual([]);
     });
   }
diff --git a/tests/smoke.spec.js b/tests/smoke.spec.js
index 79d219c..9c6fcb5 100644
--- a/tests/smoke.spec.js
+++ b/tests/smoke.spec.js
@@ -9,6 +9,55 @@ test.describe('Grundgerüst & Navigation', () => {
     expect(errors).toEqual([]);
   });
 
+  /* v66: Der Hero sagte „Datenmanagement verstehen, aufbauen, vertiefen" und
+     verschwieg damit, wofür das Werkzeug gebaut ist – Daten zu öffnen. Titel
+     UND Einleitung benennen den Zweck jetzt; ein Test hält beides fest, weil
+     eine Überschrift ohne den Satz darunter nur die halbe Aussage wäre. */
+  test('Hero benennt Open Data als Zweck – in Titel und Einleitung', async ({ page }) => {
+    await openApp(page);
+    await expect(page.locator('#hero h1')).toContainText(/Open Data/i);
+    const sub = await page.locator('.hero-sub').innerText();
+    expect(sub).toMatch(/Open Data/i);
+    expect(sub).toMatch(/öffnen/i);
+  });
+
+  /* v66: Der Hero trug sieben Bausteine (Logo, Titel, Einleitung, Chips,
+     Zusage, Aktion, Import-Zeile). Die vier Schritte stehen jetzt in einem
+     eigenen Abschnitt – mit `<h2>`, denn je Ansicht bleibt genau eine `<h1>`. */
+  test('die vier Schritte stehen in einem eigenen Abschnitt unter dem Hero', async ({ page }) => {
+    await openApp(page);
+    const steps = page.locator('#hero-steps');
+    await expect(steps).toBeVisible();
+    await expect(steps.locator('h2')).toBeVisible();
+    expect(await steps.locator('h1').count()).toBe(0);
+    // die Chips liegen nicht mehr im Hero
+    expect(await page.locator('#hero .hero-step').count()).toBe(0);
+    expect(await steps.locator('.hero-step').count()).toBe(4);
+    // und navigieren weiterhin
+    await steps.locator('.hero-step[data-go="kompass"]').click();
+    await expect(page.locator('#kompass-view')).toBeVisible();
+  });
+
+  /* v66: `showView()` führte eine Liste von IDs plus einen Sonderfall für
+     `.consult-cta`. Ein neuer Startseiten-Abschnitt wäre auf allen Unterseiten
+     stehen geblieben – jetzt entscheidet die Klasse `.home-only`. */
+  test('kein Startseiten-Abschnitt bleibt auf einer Unterseite stehen', async ({ page }) => {
+    await openApp(page);
+    await loadSample(page);
+    const stehen = [];
+    for (const view of ['kompass', 'inventory', 'governance', 'pseudo', 'wissen', 'vorlagen']) {
+      await page.evaluate(v => navTo(v), view);
+      stehen.push(...await page.evaluate(v => Array.from(document.querySelectorAll('.home-only'))
+        .filter(el => el.offsetParent !== null)
+        .map(el => `${v}: ${el.id || el.className}`), view));
+    }
+    expect(stehen).toEqual([]);
+    // …und auf der Startseite sind sie alle wieder da
+    await page.evaluate(() => navTo('home'));
+    expect(await page.evaluate(() => Array.from(document.querySelectorAll('.home-only'))
+      .filter(el => el.offsetParent === null).length)).toBe(0);
+  });
+
   /* Genau ein externer Aufruf ist erlaubt: die anonyme Seitenzählung.
      Alles andere – Schriften, Icons, Bibliotheken, Karten – wird lokal
      ausgeliefert, und genau das prüft dieser Test weiterhin. Die Liste ist
diff --git a/tests/tour.spec.js b/tests/tour.spec.js
index a362e16..458857e 100644
--- a/tests/tour.spec.js
+++ b/tests/tour.spec.js
@@ -156,6 +156,67 @@ test.describe('Onboarding-Rundgang', () => {
     expect(befunde).toEqual([]);
   });
 
+  // Regression v66: `.tour-highlight` lag auf z-index 1201, die Karte steckte in
+  // `#tour-layer` (position: fixed = eigener Stapelkontext) auf 1200. Das
+  // Zielelement zeichnete dadurch IN die Karte hinein – bei Schritt 3 stand der
+  // Fragebogentext über Titel und Knöpfen, und Klicks dort trafen den Fragebogen.
+  test('kein Seiteninhalt zeichnet in die Rundgang-Karte hinein', async ({ page }) => {
+    await openApp(page);
+    await loadSample(page);
+    await page.evaluate(() => startTour());
+
+    const gesamt = await page.evaluate(() => TOUR_STEPS.length);
+    const verdeckt = [];
+    for (let i = 0; i < gesamt; i++) {
+      await page.evaluate(n => { tour.i = n; renderTour(); }, i);
+      await page.waitForTimeout(450);   // scrollIntoView ist smooth
+      const treffer = await page.evaluate(() => {
+        const card = document.getElementById('tour-card');
+        const b = card.getBoundingClientRect();
+        const raus = [];
+        for (const dx of [0.1, 0.3, 0.5, 0.7, 0.9]) {
+          for (const dy of [0.06, 0.2, 0.5, 0.8, 0.94]) {
+            const x = b.left + b.width * dx, y = b.top + b.height * dy;
+            const oben = document.elementFromPoint(x, y);
+            if (!card.contains(oben)) {
+              raus.push(`Schritt ${tour.i + 1}: ${oben ? (oben.id || oben.className || oben.tagName) : 'nichts'}`);
+            }
+          }
+        }
+        return raus;
+      });
+      verdeckt.push(...treffer);
+    }
+    expect(verdeckt).toEqual([]);
+  });
+
+  test('das Abdunkeln liegt unter der hervorgehobenen Stelle und geht wieder weg', async ({ page }) => {
+    await openApp(page);
+    await page.evaluate(() => { startTour(); tour.i = 2; renderTour(); });
+    await page.waitForTimeout(450);
+
+    const an = await page.evaluate(() => {
+      const hl = document.querySelector('.tour-highlight');
+      const b = hl.getBoundingClientRect();
+      const oben = document.elementFromPoint(b.left + 20, b.top + 12);
+      return {
+        klasse: document.body.classList.contains('tour-on'),
+        grund: getComputedStyle(document.body, '::before').backgroundColor,
+        // die hervorgehobene Stelle bleibt bedienbar, das Abdunkeln liegt darunter
+        erreichbar: hl.contains(oben) || oben === hl,
+      };
+    });
+    expect(an.klasse).toBe(true);
+    expect(an.grund).not.toBe('rgba(0, 0, 0, 0)');
+    expect(an.erreichbar).toBe(true);
+
+    // Ohne das Entfernen bliebe die Seite nach dem Rundgang dauerhaft abgedunkelt
+    await page.evaluate(() => endTour());
+    expect(await page.evaluate(() => document.body.classList.contains('tour-on'))).toBe(false);
+    expect(await page.evaluate(() =>
+      getComputedStyle(document.body, '::before').backgroundColor)).toBe('rgba(0, 0, 0, 0)');
+  });
+
   test('Rundgang-Text wird escaped in die Karte geschrieben', async ({ page }) => {
     await openApp(page);
     await page.evaluate(() => {
diff --git a/tools/generate-wissen.js b/tools/generate-wissen.js
index 656d3a0..c2c3a88 100644
--- a/tools/generate-wissen.js
+++ b/tools/generate-wissen.js
@@ -91,7 +91,7 @@ function seite({ slug, title, description, lead, bodyHTML, jsonld, pfad, eigenst
   <meta name="twitter:image" content="${BASE}/social-preview.png">
 ${daten.map(d => `  <script type="application/ld+json">\n  ${JSON.stringify(d, null, 2).replace(/\n/g, '\n  ')}\n  </script>`).join('\n')}
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -126,12 +126,20 @@ ${eigenstaendig ? '' : `    <aside class="static-cta">
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>`}
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/wissen/glossar/index.html b/wissen/glossar/index.html
index c75fe11..bde0bcd 100644
--- a/wissen/glossar/index.html
+++ b/wissen/glossar/index.html
@@ -158,7 +158,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -193,12 +193,20 @@ <h2>Im Werkzeug anwenden</h2>
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/wissen/index.html b/wissen/index.html
index ef51255..f11012d 100644
--- a/wissen/index.html
+++ b/wissen/index.html
@@ -42,7 +42,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -105,12 +105,20 @@ <h2>Im Werkzeug anwenden</h2>
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/wissen/kommunale-satzungen/index.html b/wissen/kommunale-satzungen/index.html
index fe2ba7b..3b16880 100644
--- a/wissen/kommunale-satzungen/index.html
+++ b/wissen/kommunale-satzungen/index.html
@@ -48,7 +48,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -103,12 +103,20 @@ <h2>Im Werkzeug anwenden</h2>
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/wissen/lizenzen/index.html b/wissen/lizenzen/index.html
index e27c32e..78cfa2f 100644
--- a/wissen/lizenzen/index.html
+++ b/wissen/lizenzen/index.html
@@ -48,7 +48,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -177,12 +177,20 @@ <h2>Im Werkzeug anwenden</h2>
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/wissen/pruefwerkzeuge/index.html b/wissen/pruefwerkzeuge/index.html
index ce5a4e6..21b93e5 100644
--- a/wissen/pruefwerkzeuge/index.html
+++ b/wissen/pruefwerkzeuge/index.html
@@ -48,7 +48,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -128,12 +128,20 @@ <h2>Im Werkzeug anwenden</h2>
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/wissen/rechtsgrundlagen-laender/index.html b/wissen/rechtsgrundlagen-laender/index.html
index 995c31a..5319272 100644
--- a/wissen/rechtsgrundlagen-laender/index.html
+++ b/wissen/rechtsgrundlagen-laender/index.html
@@ -48,7 +48,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -163,12 +163,20 @@ <h2>Im Werkzeug anwenden</h2>
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/wissen/rechtsgrundlagen/index.html b/wissen/rechtsgrundlagen/index.html
index 871eae3..f23e2b7 100644
--- a/wissen/rechtsgrundlagen/index.html
+++ b/wissen/rechtsgrundlagen/index.html
@@ -48,7 +48,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -138,12 +138,20 @@ <h2>Im Werkzeug anwenden</h2>
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>
diff --git a/wissen/reifegrad-modelle/index.html b/wissen/reifegrad-modelle/index.html
index 83382dc..1ca2042 100644
--- a/wissen/reifegrad-modelle/index.html
+++ b/wissen/reifegrad-modelle/index.html
@@ -48,7 +48,7 @@
   }
   </script>
   <link rel="stylesheet" href="/assets/fonts/inter/inter.css">
-  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=65">
+  <link rel="stylesheet" href="/assets/fonts/fa/icons.min.css?v=66">
   <link rel="stylesheet" href="/css/tokens.css">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
@@ -160,12 +160,20 @@ <h2>Im Werkzeug anwenden</h2>
        <strong>keine Rechtsberatung</strong>. Maßgeblich ist immer der verlinkte amtliche Text.</p>
   </main>
 
-  <footer class="footer">
+  <footer class="site-footer">
+    <a class="footer-brand" href="https://nozilla.de/" target="_blank" rel="noopener">nozilla | bits &amp; bytes mit ❤</a>
     <nav class="footer-links">
       <a href="/">Werkzeug</a>
+      <span class="footer-sep">·</span>
       <a href="/wissen/">Wissen &amp; Methodik</a>
+      <span class="footer-sep">·</span>
       <a href="https://nozilla.de/impressum/" target="_blank" rel="noopener">Impressum</a>
+      <span class="footer-sep">·</span>
       <a href="/datenschutz/">Datenschutz</a>
+      <span class="footer-sep">·</span>
+      <a href="https://nozilla.de/kontakt/" target="_blank" rel="noopener">Kontakt</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/daimpad/datenlotse" target="_blank" rel="noopener" title="GitHub Repository" aria-label="DatenLotse auf GitHub"><svg class="footer-github" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
     </nav>
   </footer>
 </body>