itk-dev · yepzdk · Apr 22, 2026 · Apr 22, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+### Added — deltag.aarhus.dk Project
+- Hearing detail page prototype for Aarhus Kommune's citizen participation platform
+- Interactive mock with 784 simulated hearing responses, filtering, sorting, MitID login, submission form
+- Variant switching between open and closed hearing states
+- Statistics (SVG line chart, category breakdown), interactive map, glossary tooltips
+- Editor content requirements document (redaktionelt indhold)
+
 ### Changed
 - Migrated from MkDocs + Material theme to VitePress
 - Adopted ITK Dev brand colors (teal/cyan) replacing neutral black/grey palette

diff --git a/docs/.vitepress/sidebar.mts b/docs/.vitepress/sidebar.mts
@@ -37,11 +37,23 @@ const agenticOrchestration: DefaultTheme.SidebarItem[] = [
   },
 ]
 
+const deltagAarhus: DefaultTheme.SidebarItem[] = [
+  {
+    text: 'deltag.aarhus.dk',
+    items: [
+      { text: 'Overview', link: '/projects/deltag-aarhus/' },
+      { text: 'Redaktionelt indhold', link: '/projects/deltag-aarhus/editor-content-requirements' },
+      { text: 'Interactive Mocks', link: '/projects/deltag-aarhus/mocks' },
+    ],
+  },
+]
+
 export function sidebar(): DefaultTheme.Sidebar {
   return {
     '/projects/climate-nudging/': climateNudging,
     '/projects/salary-negotiation/': salaryNegotiation,
     '/projects/agentic-orchestration/': agenticOrchestration,
+    '/projects/deltag-aarhus/': deltagAarhus,
   }
 }
 

diff --git a/docs/index.md b/docs/index.md
@@ -18,4 +18,8 @@ features:
     details: Can we build a shared, open-source platform for mapping, automating, orchestrating, and measuring business processes?
     link: /projects/agentic-orchestration/
     linkText: View project
+  - title: deltag.aarhus.dk
+    details: Prototype af en høringsdetalje-side til Aarhus Kommunes borgerdeltagelsesplatform — med 784 simulerede høringssvar, MitID-login og variantskift.
+    link: /projects/deltag-aarhus/
+    linkText: View project
 ---
diff --git a/docs/projects/deltag-aarhus/editor-content-requirements.md b/docs/projects/deltag-aarhus/editor-content-requirements.md
@@ -0,0 +1,156 @@
+# Redaktionelt indhold — Høringsdetalje side
+
+Oversigt over indhold som redaktører skal bidrage med per høring, samt hvad der kan genereres automatisk fra eksisterende data.
+
+## Oversigt
+
+| Sektion | Redaktør | Automatisk | Bemærkning |
+|---------|:--------:|:----------:|------------|
+| Hero-billede | X | | Billede skal uploades per høring |
+| Afgørelsesbanner | X | delvist | Redaktør skriver tekst; dato kan trækkes fra dagsordensystem |
+| Afgørelsesdialog | X | delvist | Redaktør skriver resumé; links til referat/video kan trækkes fra byrådets dagsordensystem |
+| Overskrift og manchet | X | | Fritekst per høring |
+| Metadata (svarfrist, type, ID) | | X | Findes i høringsdata |
+| Tags/kategorier | X | | Redaktør vælger fra taksonomi |
+| Brødtekst | X | | Fritekst med mulighed for ordforklaringer |
+| Ordforklaringer (glossary) | X | delvist | Redaktør markerer termer; forklaringstekst kan trækkes fra central ordliste |
+| Materialer | X | | Redaktør uploader filer og angiver navne |
+| HTML-forhåndsvisning af materialer | | X | Kan genereres automatisk fra uploadet PDF |
+| Svarfrist og slettedato | | X | Findes i høringsdata |
+| Kontaktoplysninger | X | delvist | Redaktør vælger afdeling; kontaktdata kan trækkes fra kontaktregister |
+| Høringssvar | | X | Indsendt af borgere via formularen |
+| Høringssvar-kategorier | delvist | delvist | Kategori-taksonomi vedligeholdes af redaktør; tildeling kan evt. automatiseres med AI |
+| Kommentarer | | X | Indsendt af borgere |
+| Statistik — linjediagram | | X | Beregnes automatisk fra indkomne svar |
+| Statistik — kategorifordeling | | X | Beregnes automatisk fra kategoriserede svar |
+| Geografisk fordeling (kort) | | X | Beregnes fra afsenderadresse/postnummer |
+| Info-boks (Mere viden) | X | | Redaktør vælger links fra vidensbase |
+| Relaterede aktiviteter | X | delvist | Redaktør knytter relationer; billeder og metadata trækkes automatisk |
+| Projekter CTA | | X | Global komponent — konfigureres én gang |
+| Footer | | X | Global komponent |
+
+---
+
+## Detaljer per sektion
+
+### 1. Hero-billede
+
+**Redaktøropgave:** Upload et billede der repræsenterer høringsområdet.
+
+- Anbefalet størrelse: 1600 x 500 px
+- Alt-tekst skal udfyldes
+
+### 2. Afgørelsesbanner og -dialog
+
+**Redaktøropgave:**
+- Kort bannerbesked (1 sætning) med mødedato og udfald
+- Resumé af afgørelsen (2-3 afsnit) til afgørelsesdialogen
+
+**Automatisk:**
+- Mødedato kan trækkes fra byrådets dagsordensystem
+- Link til referat (PDF) og video kan trækkes automatisk, hvis byrådets system har en API
+- Link til vedtaget lokalplan kan genereres fra dokumentsystemet
+
+**Redaktøren skal levere:**
+- Link til hvidbog (behandling af høringssvar) — dette dokument produceres manuelt
+- Eventuelle tilpasninger af resuméteksten
+
+### 3. Overskrift, manchet og brødtekst
+
+**Redaktøropgave:** Fritekst. Ingen automatisering mulig — dette er det primære redaktionelle indhold.
+
+### 4. Ordforklaringer (glossary)
+
+**Redaktøropgave:** Markere fagtermer i brødteksten der skal have en forklaring.
+
+**Automatisk:**
+- Forklaringstekst og "læs mere"-link kan trækkes fra en **central ordliste/taksonomi** i CMS
+- Systemet kan evt. automatisk foreslå termer der bør markeres (baseret på ordlisten)
+- Kræver oprettelse og vedligeholdelse af en ordliste med fagtermer og forklaringer
+
+**Vedligeholdelse af ordliste:**
+- Ordlisten bør forvaltes centralt (ikke per høring)
+- Hver term: navn, kort forklaring (maks 2 sætninger), link til uddybende side
+- Eksempler: omdannelsesområde, boligbebyggelse, kommuneplan, rammeområde, bebyggelsesprocent, LAR-løsning
+
+### 5. Materialer
+
+**Redaktøropgave:**
+- Upload dokumenter (PDF, billeder)
+- Angiv dokumentnavn
+- Vælg om dokumentet skal have HTML-forhåndsvisning
+
+**Automatisk:**
+- Filtype og størrelse detekteres automatisk
+- HTML-forhåndsvisning kan genereres automatisk fra PDF (kræver PDF-til-HTML konvertering i backend)
+- Ikon vælges automatisk ud fra filtype
+
+### 6. Kontaktoplysninger
+
+**Redaktøropgave:** Vælg ansvarlig afdeling fra liste.
+
+**Automatisk:**
+- Adresse, telefon og e-mail trækkes fra kontaktregister baseret på valgt afdeling
+
+### 7. Høringssvar og kommentarer
+
+**Fuldt automatisk.** Borgere indsender via formularen. Kræver ingen redaktørindsats.
+
+**Redaktøropgave (valgfri):**
+- Moderation af upassende indhold
+- Tildeling af kategori til høringssvar (hvis ikke borgeren selv vælger)
+
+### 8. Statistik
+
+**Fuldt automatisk.** Alle tre statistiksektioner (linjediagram, kategorifordeling, kort) genereres fra de indkomne høringssvar.
+
+**Forudsætninger:**
+- Linjediagram: hvert svar har en indsendt-dato → aggregeres per dag
+- Kategorifordeling: hvert svar har en kategori → aggregeres per kategori
+- Kort: hvert svar har en afsender-lokation (postnummer eller adresse) → geokodes og vises
+
+### 9. Info-boks (Mere viden)
+
+**Redaktøropgave:** Vælg 2-4 links til relevante sider fra vidensbasen.
+
+**Mulighed for automatisering:** Links kan foreslås automatisk baseret på høringstype (fx "lokalplan" → vis altid links om lokalplanprocessen).
+
+### 10. Relaterede aktiviteter
+
+**Redaktøropgave:** Knyt høringen til relaterede dialoger, høringer eller aktiviteter.
+
+**Automatisk:**
+- Billede, titel, type, dato, svar-antal og lokation trækkes fra den relaterede aktivitets egen data
+- Redaktøren behøver kun at vælge relationen — resten vises automatisk
+
+---
+
+## Systembehov for automatisering
+
+For at maksimere den automatiske indholdsgenerering kræves:
+
+| System / data | Bruges til |
+|---------------|------------|
+| Byrådets dagsordensystem (API) | Afgørelsesdato, referat-PDF, video-link |
+| Dokumentsystem | Vedtagne lokalplaner, materialefiler |
+| Central ordliste i CMS | Glossary-forklaringer og links |
+| Kontaktregister | Afdelingsoplysninger |
+| PDF-til-HTML konvertering | Forhåndsvisning af materialer |
+| Geokodning af postnumre | Geografisk kort over høringssvar |
+| Aktivitets-/høringsregister | Relaterede aktiviteter, metadata |
+
+---
+
+## Estimeret redaktørtid per høring
+
+| Opgave | Estimat |
+|--------|---------|
+| Hero-billede og metadata | 5 min |
+| Overskrift, manchet, brødtekst | 30-60 min |
+| Markering af glossary-termer | 5-10 min |
+| Upload af materialer | 10-15 min |
+| Afgørelsestekst (efter vedtagelse) | 15-20 min |
+| Relationer og info-links | 5 min |
+| **Total** | **ca. 1-2 timer** |
+
+Resten genereres automatisk fra data.
diff --git a/docs/projects/deltag-aarhus/index.md b/docs/projects/deltag-aarhus/index.md
@@ -0,0 +1,82 @@
+<small>**Project:** deltag.aarhus.dk · **Status:** Draft · **Date:** April 2026</small>
+
+# deltag.aarhus.dk — Høringsdetalje
+
+**Prototype af en høringsdetalje-side til Aarhus Kommunes borgerdeltagelsesplatform.**
+
+---
+
+## Baggrund
+
+deltag.aarhus.dk skal give borgere mulighed for at deltage i offentlige høringer, dialoger og andre demokratiske processer. Denne prototype demonstrerer en høringsdetalje-side — den side borgerne ser når de klikker ind på en konkret høring.
+
+Prototypen bruger et realistisk scenarie: en høring om vindmøller ved Vosnæs (Lokalplan nr. 1237 med miljøvurderingsrapport), med 784 simulerede høringssvar.
+
+---
+
+## Hvad prototypen viser
+
+### Variantskift (åben/afsluttet)
+
+Prototypen kan skifte mellem to tilstande via mock-banneret:
+
+- **Åben høring** — borgere kan indsende høringssvar og kommentere andres svar
+- **Afsluttet høring** — svarfristen er udløbet, "Skriv et høringssvar"-knappen er deaktiveret, og afgørelsesbannerets vises
+
+### Høringssvar
+
+- 784 simulerede høringssvar i et responsivt 4-kolonne grid
+- Filtrering efter kategori (Miljø/Natur, Støj/Sundhed, Landskab/Visuel, Proces/Andet)
+- Sortering (Nyeste, Ældste, Flest synes om, Flest kommentarer)
+- Kontinuerlig "Vis flere"-indlæsning (16 ad gangen)
+- Modal med fuldt svarindhold, kommentarer og svar-formuler
+- Tastaturnavigation (piletaster, Escape)
+- URL-dyblink til individuelt svar (`#svar-{id}`)
+
+### MitID login og indsendelse
+
+- Mock MitID-loginflow (åben variant)
+- Indsendelsesformular med kategori, titel og brødtekst
+- Kommentarformular på individuelle høringssvar
+
+### Statistik og kort
+
+- SVG-linjediagram over indsendte svar pr. dag (10-ugers høringsperiode)
+- Kategorifordeling
+- Interaktivt kort (Leaflet.js) med Vosnæs-koordinater
+
+### Øvrige features
+
+- Ordforklaringer (glossary) med tooltips på fagtermer
+- Afgørelsesmodal med mødereferat, video og hvidbog
+- Materialeliste med dokumentforhåndsvisning
+- Relaterede aktiviteter (høringer og dialoger)
+- Fuldt responsivt layout (mobil, tablet, desktop)
+- Tilgængelig: ARIA-attributter, fokusstyring, tastaturnavigation
+
+---
+
+## Teknisk opbygning
+
+Prototypen er vanilla HTML/CSS/JS uden build-trin:
+
+- **HTML:** Én `index.html` med semantisk markup
+- **CSS:** 24 komponent-filer + designtokens med 93 custom properties
+- **JS:** 15 moduler med centraliseret state management (`window.DeltagMock.state`)
+- **Data:** 784 procedurelt genererede høringssvar med 15 kommentarer hver
+
+---
+
+## Redaktionelt indhold
+
+Se [Redaktionelt indhold — Høringsdetalje side](editor-content-requirements.md) for en oversigt over hvad redaktører skal levere per høring, og hvad der kan genereres automatisk.
+
+**Estimat:** ca. 1–2 timer redaktørtid per høring (efter systemintegrationer er bygget).
+
+---
+
+## Interaktiv prototype
+
+<a href="/research-projects/projects/deltag-aarhus/mocks/index.html" class="mock-button" target="_blank">Åbn prototypen ↗</a>
+
+Prøv at skifte mellem åben og afsluttet variant via linkene i det blå mock-banner øverst.
diff --git a/docs/projects/deltag-aarhus/mocks.md b/docs/projects/deltag-aarhus/mocks.md
@@ -0,0 +1,10 @@
+<small>**Project:** deltag.aarhus.dk</small>
+
+# Interaktive Mocks
+
+Interaktive HTML-prototyper der demonstrerer den foreslåede høringsdetalje-side. Åbn dem for at afprøve interaktionerne direkte i browseren.
+
+---
+
+**<a href="/research-projects/projects/deltag-aarhus/mocks/index.html" target="_blank">Høringsdetalje — Vindmøller ved Vosnæs ↗</a>**
+Komplet høringsdetalje-side med 784 simulerede høringssvar, filtrering, sortering, MitID-login, indsendelsesformular, statistik, kort, ordforklaringer og afgørelsesmodal. Skift mellem åben og afsluttet variant via mock-banneret.
diff --git a/docs/projects/salary-negotiation/estimeringsnotat.md b/docs/projects/salary-negotiation/estimeringsnotat.md
@@ -1,6 +1,6 @@
 ---
 protected: true
-passwordHash: "9bf67668583e1070cfecddfca89e1e67fcd583dfb43c3ea79ec63ecf598136ae"
+passwordHash: "92b0332dda228edf8ebd0208937b772f02625380fbb04a63d90b97662b183661"
 passwordGroup: "salary-negotiation"
 ---
 

diff --git a/docs/projects/salary-negotiation/index.md b/docs/projects/salary-negotiation/index.md
@@ -1,7 +1,7 @@
 ---
 title: Lønforhandlingssystem
 protected: true
-passwordHash: "9bf67668583e1070cfecddfca89e1e67fcd583dfb43c3ea79ec63ecf598136ae"
+passwordHash: "92b0332dda228edf8ebd0208937b772f02625380fbb04a63d90b97662b183661"
 passwordGroup: "salary-negotiation"
 ---
 

diff --git a/docs/projects/salary-negotiation/mocks.md b/docs/projects/salary-negotiation/mocks.md
@@ -1,6 +1,6 @@
 ---
 protected: true
-passwordHash: "9bf67668583e1070cfecddfca89e1e67fcd583dfb43c3ea79ec63ecf598136ae"
+passwordHash: "92b0332dda228edf8ebd0208937b772f02625380fbb04a63d90b97662b183661"
 passwordGroup: "salary-negotiation"
 ---