Rearrange README

README.md

@@ -20,6 +20,87 @@ Datumsrechner Live: [https://date.elpatron.me](https://date.elpatron.me)
 - Start-/Enddatum einer Kalenderwoche eines Jahres
 - Statistik-Dashboard mit Passwortschutz unter `/stats`
 
+## Installation (lokal)
+
+1. Python 3.8+ installieren
+2. Abhängigkeiten installieren:
+
+```bash
+pip install -r requirements.txt
+```
+
+## Starten der App
+
+```bash
+python app.py
+```
+
+Die App ist dann unter http://localhost:5000 erreichbar.
+
+## Statistik-Dashboard (/stats) & Passwortschutz
+
+Das Dashboard ist mit einem statischen Passwort geschützt, das über die Umgebungsvariable `STATS_PASSWORD` gesetzt wird.
+
+![image-20250725100127004](./assets/image-20250725100127004.png)
+
+Beispiel (PowerShell):
+
+```powershell
+$env:STATS_PASSWORD = "meinSicheresPasswort"
+python app.py
+```
+
+Für Docker:
+
+```powershell
+$env:STATS_PASSWORD = "meinSicheresPasswort"
+docker run -e STATS_PASSWORD=$env:STATS_PASSWORD -p 5000:5000 datumsrechner
+```
+
+## Docker (empfohlen für Produktion)
+
+Die App läuft im Container mit dem WSGI-Server **Gunicorn**:
+
+```bash
+docker build -t datumsrechner .
+docker run -p 5000:5000 datumsrechner
+```
+
+- Gunicorn startet automatisch (siehe Dockerfile)
+- Empfohlen für produktiven Einsatz
+
+### Log-Verzeichnis mounten (Logs auf dem Host speichern)
+
+Um die Logdateien außerhalb des Containers zu speichern, kannst du das log-Verzeichnis mounten:
+
+**PowerShell-Beispiel:**
+
+```powershell
+docker run -e STATS_PASSWORD=deinPasswort -p 5000:5000 -v ${PWD}/log:/app/log datumsrechner
+```
+
+### docker-compose Beispiel
+
+Erstelle eine Datei `docker-compose.yml`:
+
+```yaml
+services:
+  datumsrechner:
+    build: .
+    ports:
+      - "5000:5000"
+    environment:
+      - STATS_PASSWORD=deinPasswort
+    volumes:
+      - ./log:/app/log
+```
+
+Starte mit:
+
+```bash
+docker-compose up --build
+```
+
 ## REST API
 
 Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptiert und liefert JSON.  
@@ -194,87 +275,6 @@ curl http://localhost:5000/api/monitor
 { "error": "Ungültige Eingabe", "details": "..." }
 ```
 
-## Installation (lokal)
-
-1. Python 3.8+ installieren
-2. Abhängigkeiten installieren:
-
-```bash
-pip install -r requirements.txt
-```
-
-## Starten der App
-
-```bash
-python app.py
-```
-
-Die App ist dann unter http://localhost:5000 erreichbar.
-
-## Statistik-Dashboard (/stats) & Passwortschutz
-
-Das Dashboard ist mit einem statischen Passwort geschützt, das über die Umgebungsvariable `STATS_PASSWORD` gesetzt wird.
-
-![image-20250725100127004](./assets/image-20250725100127004.png)
-
-Beispiel (PowerShell):
-
-```powershell
-$env:STATS_PASSWORD = "meinSicheresPasswort"
-python app.py
-```
-
-Für Docker:
-
-```powershell
-$env:STATS_PASSWORD = "meinSicheresPasswort"
-docker run -e STATS_PASSWORD=$env:STATS_PASSWORD -p 5000:5000 datumsrechner
-```
-
-## Docker (empfohlen für Produktion)
-
-Die App läuft im Container mit dem WSGI-Server **Gunicorn**:
-
-```bash
-docker build -t datumsrechner .
-docker run -p 5000:5000 datumsrechner
-```
-
-- Gunicorn startet automatisch (siehe Dockerfile)
-- Empfohlen für produktiven Einsatz
-
-### Log-Verzeichnis mounten (Logs auf dem Host speichern)
-
-Um die Logdateien außerhalb des Containers zu speichern, kannst du das log-Verzeichnis mounten:
-
-**PowerShell-Beispiel:**
-
-```powershell
-docker run -e STATS_PASSWORD=deinPasswort -p 5000:5000 -v ${PWD}/log:/app/log datumsrechner
-```
-
-### docker-compose Beispiel
-
-Erstelle eine Datei `docker-compose.yml`:
-
-```yaml
-services:
-  datumsrechner:
-    build: .
-    ports:
-      - "5000:5000"
-    environment:
-      - STATS_PASSWORD=deinPasswort
-    volumes:
-      - ./log:/app/log
-```
-
-Starte mit:
-
-```bash
-docker-compose up --build
-```
-
 ## Progressive Web App (PWA)
 
 Elpatrons Datumsrechner ist als PWA installierbar (z.B. auf Android/iOS-Homescreen oder Desktop). Die App funktioniert offline für die Startseite und statische Ressourcen, die Datumsberechnung bleibt serverseitig.
@@ -293,11 +293,13 @@ Die App bietet einen Monitoring-Endpunkt unter `/monitor`, der Statusinformation
 - Pageviews der letzten 7 Tage
 
 Beispiel-Aufruf:
+
 ```
 GET https://date.elpatron.me/monitor
 ```
 
 Antwort:
+
 ```json
 {
   "status": "ok",
@@ -339,24 +341,24 @@ Dieses Projekt wurde zu nahezu 100% mit Unterstützung künsticher Intelligenz (
 
 Es werden keine IP-Adressen oder sonstigen persönlichen Daten gespeichert, lediglich die Zahl der Aufrufe der Funktionen in einer kumulierten Darstellung. Die Logdatei enthält nur Einträge der letzten sieben Tage.
 
+### Barrierefreiheit (Accessibility)
+
+*Elpatrons Datumsrechner* ist barrierefrei gestaltet und erfüllt zentrale Anforderungen an Accessibility (a11y):
+
+- *Semantische HTML-Struktur:* Überschriften, Labels und Formularelemente sind korrekt ausgezeichnet und verknüpft.
+- *ARIA-Attribute:* Accordion und Statusmeldungen sind mit ARIA-Attributen versehen, damit Screenreader die Struktur und Zustände erkennen.
+- *Tastaturbedienbarkeit:* Alle interaktiven Elemente (Accordion, Buttons, Formulare) sind vollständig per Tastatur bedienbar (inkl. Fokus-Indikator und Pfeiltasten-Navigation im Accordion).
+- *Fokus-Indikatoren:* Deutliche visuelle Hervorhebung des Fokus für alle Bedienelemente.
+- *Farbkontraste:* Hohe Kontraste für Texte, Buttons und Ergebnisboxen, geprüft nach WCAG-Richtlinien.
+- *Status- und Fehlermeldungen:* Ergebnisse und Fehler werden mit `aria-live` für Screenreader zugänglich gemacht.
+- *Mobile Optimierung:* Zusätzliche Meta-Tags für bessere Bedienbarkeit auf mobilen Geräten und Unterstützung von Screenreadern.
+- *SEO:* Das Thema Barrierefreiheit ist in den Meta-Tags für Suchmaschinen sichtbar.
+
+Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Sehbehinderung, motorische Einschränkungen) gut nutzbar und entspricht modernen Webstandards.
+
 ## Lizenz
 
 Dieses Projekt steht unter der [MIT-Lizenz](LICENSE).
 
 ---
 (c) 2025 [Markus Busche](https://digitalcourage.social/@elpatron)
-
-## Barrierefreiheit (Accessibility)
-
-Elpatrons Datumsrechner ist barrierefrei gestaltet und erfüllt zentrale Anforderungen an Accessibility (a11y):
-
-- **Semantische HTML-Struktur:** Überschriften, Labels und Formularelemente sind korrekt ausgezeichnet und verknüpft.
-- **ARIA-Attribute:** Accordion und Statusmeldungen sind mit ARIA-Attributen versehen, damit Screenreader die Struktur und Zustände erkennen.
-- **Tastaturbedienbarkeit:** Alle interaktiven Elemente (Accordion, Buttons, Formulare) sind vollständig per Tastatur bedienbar (inkl. Fokus-Indikator und Pfeiltasten-Navigation im Accordion).
-- **Fokus-Indikatoren:** Deutliche visuelle Hervorhebung des Fokus für alle Bedienelemente.
-- **Farbkontraste:** Hohe Kontraste für Texte, Buttons und Ergebnisboxen, geprüft nach WCAG-Richtlinien.
-- **Status- und Fehlermeldungen:** Ergebnisse und Fehler werden mit `aria-live` für Screenreader zugänglich gemacht.
-- **Mobile Optimierung:** Zusätzliche Meta-Tags für bessere Bedienbarkeit auf mobilen Geräten und Unterstützung von Screenreadern.
-- **SEO:** Das Thema Barrierefreiheit ist in den Meta-Tags für Suchmaschinen sichtbar.
-
-Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Sehbehinderung, motorische Einschränkungen) gut nutzbar und entspricht modernen Webstandards.