miriamgemeinde/docs/DESIGN-UND-BEDIENBARKEIT-KONZEPT.md

# Konzept: Modernisierung von Design und Bedienbarkeit

**Projekt:** Evangelische Miriamgemeinde Frankfurt (Vue.js-Webauftritt)  
**Stand:** April 2026  
**Ziel:** Zeitgemäße, klare Oberfläche mit hoher Vertrauenswürdigkeit; kirchlich-seriös, ohne „Startup-Optik“.

---

## 1. Zielbild und Leitlinien

### 1.1 Positionierung

Die Website ist **Informations- und Gemeinschaftsangebot** einer evangelischen Gemeinde. Sie soll:

- **verlässlich und ruhig** wirken (kein visuelles „Rauschen“),
- **inhaltlich im Vordergrund** stehen (Typografie, Lesbarkeit, klare Hierarchie),
- **digital souverän** wirken (gute Struktur, schnelle Orientierung, respektvolle Hilfen für alle Nutzergruppen).

### 1.2 Nicht verhandelbar: EKHN-Violett

Die **Grundfarbe EKHN-Violett** bleibt die primäre Markenfarbe. Im Code aktuell u. a. als `#9400ff` mit Hover `#7a00d1` genutzt (Navigation). Diese Farbe wird **nicht ersetzt oder „neu interpretiert“**.

- Sie wird als **CSS-Design-Token** zentral definiert (z. B. `--color-ekhn-violet`, `--color-ekhn-violet-hover`), damit alle Komponenten konsistent darauf zugreifen.
- **Abstufungen** (heller für Hintergründe, transparenter für Overlays) sind **zulässig**, solange die wahrgenommene Marke **dieselbe Violett-Identität** bleibt.
- Kontrast zu Text und Icons muss **WCAG-konform** sein (siehe Abschnitt 7).

### 1.3 Seriosität vs. Modernität

| Modern (gewünscht) | Vermeiden (für kirchlichen Kontext) |
|--------------------|-------------------------------------|
| Klares Raster, viel Weißraum | Neon-Verläufe, Spielereien |
| Ruhige, lesbare Schrift | Display-Fonts, übertriebene Größen |
| Deutliche Fokuszustände (Tastatur) | Aggressive Animationen |
| Einheitliche Komponenten | Zufällige Abstände und Stile pro Seite |
| Verständliche Navigation | „Experimentelle“ Menüs ohne klare Labels |

**Leitmotiv:** *Ruhige Sachlichkeit mit warmer, einladender Sprache in der UI (Beschriftungen, Fehlermeldungen, leere Zustände).*

---

## 2. Kurze Ist-Analyse (Ausgangslage)

Aus dem aktuellen Aufbau (u. a. `AppComponent.vue`, `NavbarComponent.vue`, `HeaderComponent.vue`, `FooterComponent.vue`):

- **Typografie:** durchgängig `Arial, sans-serif` – funktional, aber wenig Profil; keine skalierbare Typo-Skala.
- **Layout:** starre `min-width: 1000px` in der Hauptspalte begünstigt horizontales Scrollen auf Tablets/kleineren Viewports; Zwei-Spalten-Logik mit Breakpoints ist vorhanden, sollte aber **inhaltlich und technisch** weiterentwickelt werden.
- **Farben:** Violett in der Navigation; Footer dunkelblau (`#0b1735`); rechte Spalte hellblau (`#d9e2f3`); Header mit Schlagschatten in Lavendeltönen – teils **uneinheitlich** zur Markenfarbe.
- **Navigation:** Hamburger/Menü-Button unter 768px; Dropdowns mit Hover – auf Touch-Geräten und für Tastaturnutzer ist hier **Verbesserungspotenzial** (Fokus, ARIA, Touch-Targets).
- **Footer:** Login-Link in Grau auf dunklem Grund – **Kontrast** prüfen und ggf. anpassen (ohne Marke zu verändern).

Diese Punkte fließen als konkrete Maßnahmen in die Phasenplanung (Abschnitt 9) ein.

---

## 3. Design-System: Farben

### 3.1 Primär (unverändert)

| Token (Vorschlag) | Verwendung | Hex (Ist) |
|-------------------|------------|-----------|
| `--color-brand-primary` | Navigationsleiste, primäre Buttons, aktive Zustände | `#9400ff` |
| `--color-brand-primary-hover` | Hover, aktive Menüpunkte | `#7a00d1` |

*Hinweis:* Falls das offizielle EKHN-Handbuch eine minimal abweichende Hex-Angabe vorsieht, **eine** kanonische Quelle festlegen und nur diese verwenden – weiterhin **kein** Wechsel zu einer anderen Farbfamilie.

### 3.2 Neutrale Flächen (ergänzend, nicht markenersetzend)

- **Hintergrund Seite:** `#ffffff` oder sehr helles Neutral (`#f8f9fb`), konsistent.
- **Sekundärflächen** (Karten, rechte Spalte, Infoboxen): dezentes Grau oder ein **sehr zurückhaltendes Violett-Grau** (z. B. Mischung aus Weiß mit 3–6 % Primärfarbe), damit die Seite **ruhig** bleibt und nicht „bunt“ wirkt.
- **Text:** nahezu schwarz für Fließtext (`#1a1a1a` bis `#222`), sekundäre Texte etwas heller – immer mit Kontrastprüfung.

### 3.3 Akzent (optional, sparsam)

- **Links** im Fließtext: z. B. unterstrichen oder klar farbig abgesetzt; Primärviolett oder eine **eine** abgestimmte dunklere Violett-Nuance für Lesbarkeit auf Weiß.
- **Erfolg/Warnung/Fehler:** Standard-Semantik (Grün/Gelb/Rot) nur für Status – **nicht** als neue Hauptfarbe neben dem Violett.

### 3.4 Footer

- Dunkler Footer kann bleiben; **Links und Fokus** müssen gut lesbar sein. Primärviolett für Hover/Fokus auf dunklem Grund nur, wenn der Kontrast stimmt – sonch neutrale helle Linkfarbe + sichtbarer Fokusring.

---

## 4. Typografie

### 4.1 Schriftwahl

- **Primärschrift:** eine gut lesbare **System- oder Webschrift** mit neutral-seriösem Charakter, z. B.:
  - *Source Sans 3*, *Inter*, *Open Sans* oder **beibehaltene Arial** nach einheitlicher Skala – Entscheidung in Phase 1 an **Performance** und **Corporate-Vorgaben** binden.
- **Überschriften:** dieselbe Familie mit klarer Gewichtsstaffelung (z. B. 600/700), keine verspielten Display-Schnitte.

### 4.2 Skala (Beispiel)

| Stufe | Verwendung | Größe (Orientierung, rem) |
|-------|------------|---------------------------|
| H1 | Seitentitel (nicht auf jeder Unterseite doppelt mit Logo-Text kollidieren) | `1.75–2rem` |
| H2 | Abschnitte | `1.35–1.5rem` |
| H3 | Unterabschnitte | `1.15–1.25rem` |
| Body | Fließtext | `1rem`, Zeilenlänge max. ca. 65–75 Zeichen |
| Klein | Meta, Fußnoten | `0.875rem` mit ausreichend Kontrast |

### 4.3 Regeln

- **Keine** reine Großschreibung für lange Menütexte.
- **Zeilenabstand** für Fließtext mindestens ca. 1,5.
- **Kontrast** von Überschriften und Text zu Hintergrund einhalten (WCAG 2.1 AA).

---

## 5. Layout und Raster

### 5.1 Container

- Maximalbreite für Lesbarkeit (z. B. `min(100%, 72rem)`) mit **symmetrischem Innenabstand**.
- **Keine** feste `min-width` im vierstelligen Pixelbereich ohne Scroll-Alternative; stattdessen **flexibles Grid** + sinnvolle Mindestbreiten nur dort, wo nötig (Tabellen).

### 5.2 Breakpoints (Orientierung)

- **Mobil:** < 640px – eine Spalte, Navigation als klares Overlay oder ausklappbare Liste mit großen Touch-Zielen.
- **Tablet:** 640–1024px – ggf. weiterhin eine Spalte oder kompakte Sidebar.
- **Desktop:** > 1024px – Zwei-Spalten-Layout optional; rechte Spalte für Bilder/Termine **nicht** zwingend über volle Höhe „eingesperrt“, wenn das inhaltlich sinnvoller ist.

### 5.3 Weißraum

- Einheitliches Spacing-System (z. B. Vielfache von 4px oder 0,25rem): Abstände zwischen Blöcken, in Karten, zwischen Formularfeldern.

---

## 6. Navigation und Bedienung

### 6.1 Hauptnavigation

- **Desktop:** horizontale Leiste mit Vollfarbe EKHN-Violett; aktiver Eintrag **deutlich** (Unterstreichung, Hintergrund oder starker Kontrast – weiterhin im Violett-System).
- **Touch:** Menüpunkte mindestens ca. **44×44 px** Klickfläche.
- **Untermenüs:** Hover für Maus; für Tastatur **Escape** schließt; **Fokus** sichtbar im gesamten Menübaum.
- **Mobile:** „Menü“-Button durch **Icon + Text** oder klares Label; Animationen **kurz** (< 200ms).

### 6.2 Orientierung

- Optional: **Brotkrumen** bei tieferen Seiten (Gemeindeleben → Gruppen → …), dezent unterhalb des Headers.
- Seitentitel konsistent: eine H1 pro Seite, semantisch korrekt.

### 6.3 Footer

- Impressum/Datenschutz bleiben gut auffindbar; gleiche visuelle Gewichtung wie bisher, mit verbessertem Kontrast und Fokus.

---

## 7. Barrierefreiheit (WCAG 2.1 Level AA als Ziel)

- **Kontrast:** Text auf Violett/Weiß/Grau messen (Tools: axe, Lighthouse, WebAIM Contrast Checker).
- **Tastatur:** alle interaktiven Elemente erreichbar; sichtbarer `:focus-visible`.
- **Screenreader:** Landmarks (`header`, `nav`, `main`, `footer`), Überschriftenhierarchie, `aria-expanded` für Untermenüs, sinnvolle `alt`-Texte bei Bildern.
- **Bewegung:** `prefers-reduced-motion` respektieren (Animationen abschwächen oder deaktivieren).

---

## 8. Komponentenbibliothek (schrittweise)

Einheitliche Bausteine reduzieren Streuung und erleichtern Wartung:

| Komponente | Anforderungen |
|------------|----------------|
| **Primärbutton** | Violett-Hintergrund, weißer Text, Hover, disabled-Zustand, Fokusring |
| **Sekundärbutton** | Outline in Violett oder neutral, gleiche Höhe wie Primär |
| **Karte** (Termine, News) | Klarer Titel, Datum, Link „weiterlesen“, ruhiger Schatten oder Rahmen |
| **Formularfelder** | Labels sichtbar, Fehler näch am Feld, keine rein farblichen Fehlerhinweise |
| **Tabellen** (Admin) | Zeilenwechsel, ausreichend Zellpadding, horizontales Scrollen auf schmalen Screens |

Technisch: zentrale **CSS-Variablen** + ggf. wiederverwendbare Vue-Komponenten oder Utility-Klassen – ohne das Projekt unnötig zu überfrachten.

---

## 9. Umsetzung in Phasen

### Phase 1 – Fundament (geringes Risiko, hoher Nutzen)

- Design-Tokens (Farben, Abstände, Schriftgrößen) in einer **globalen** Styleschicht.
- Entfernen/Ersetzen problematischer Layout-Regeln (`min-width` Hauptspalte), **Responsive** testen.
- Typografie-Skala und Basisabstände vereinheitlichen.
- Kontrast Footer/Links prüfen und anpassen.

### Phase 2 – Navigation & Chrome

- Navbar optisch verfeinern (Padding, aktive Zustände, Touch) bei **unverändertem** `#9400ff` / Hover.
- Header (Titelzeile): Schlagschatten/Lavendel **an Markensystem anbinden** oder reduzieren für seriösere Wirkung.
- Optional Brotkrumen für tiefe Seiten.

### Phase 3 – Inhaltsmodule

- Termine, Gottesdienste, Kontakt: Kartenlayout, konsistente Datumdarstellung (`date-fns` ist bereits im Projekt).
- Bilder: feste Aspect-Ratios oder `object-fit`, damit keine Layout-Sprünge entstehen.

### Phase 4 – Feinschliff

- Mikro-Interaktionen (Hover, Fokus) konsistent.
- Performance: Schriftarten, Bildgrößen, Lazy Loading wo sinnvoll.
- Finale Accessibility-Prüfung.

---

## 10. Erfolgskriterien (messbar / reviewbar)

- Keine horizontale Scrollbarkeit bei Standard-Viewports durch feste Mindestbreiten.
- Lighthouse-Accessibility-Score deutlich verbessert (Ziel: **≥ 90**, wo technisch möglich).
- **Manuelle** Tastatur- und Screenreader-Stichprobe auf Startseite, Navigation, einem Formular.
- **Visuelles Review** mit 2–3 Stakeholdern: „wirkt seriös, klar, kirchlich passend“ – **ohne** neue Hauptfarbe neben EKHN-Violett.

---

## 11. Explizite Nicht-Ziele

- Kein Rebranding und kein Ersatz der Primärfarbe.
- Kein „Gamification“-Design oder verspielte Illustrationen als Hauptstil.
- Keine Einführung schwerer UI-Frameworks nur wegen Optik, wenn das Projekt schlank bleiben soll (abwägen mit Wartbarkeit).

---

## 12. Nächster Schritt

Umsetzung beginnt mit **Phase 1**: globale Tokens + Layout-Fixes + Kontrast. Dieses Dokument dient als **Referenz** für alle weiteren UI-Änderungen und sollte bei größeren Designentscheidungen aktualisiert werden.

---

*Dokument erstellt als Arbeitsgrundlage für die Modernisierung; bei Abweichungen von offiziellen EKHN-CD-Vorgaben immer die gültige kirchliche Markenrichtlinie Vorrang haben.*