diff --git a/README.md b/README.md
index 9e2ef26..ab041bf 100644
--- a/README.md
+++ b/README.md
@@ -21,17 +21,24 @@ https://isa##.edumake.de
├── index.html # Startseite
├── ueber_uns.html # Über uns & Dozenten
├── eis_projekt.html # Projektdetails
+├── team.html # Team-Seite
+├── galerie.html # Bildergalerie (Lightbox)
+├── notenrechner.html # Notenrechner (DOM-basiert)
+├── textanalyse.html # Textanalyse-Tool
+├── api.html # fetch & API Demo (JSONPlaceholder)
+├── kanban.html # Kanban-Board (Drag & Drop)
├── kontakt.html # Kontaktformular
├── impressum.html # Rechtliche Infos
├── css/
-│ └── style.css # Zentrale Stylesheet
+│ └── style.css # Zentrale Stylesheet (~3600 Zeilen)
├── js/
-│ └── script.js # JavaScript für Interaktivität
+│ ├── script.js # Dark Mode, Hamburger-Nav, Formular, Lightbox
+│ ├── api-demo.js # fetch() API Demo
+│ └── kanban.js # Kanban-Board Logik
├── img/
-│ ├── logo.svg # PH-Logo
-│ └── favicon.svg # Browser-Icon
-├── assets/
-│ └── projektinfo.pdf # Downloadbereich
+│ ├── logo.png # Projekt-Logo
+│ ├── gruppenbild.jpg # Team-Gruppenbild
+│ └── teambild.jpeg # Teambild
└── README.md # Diese Datei
```
@@ -39,19 +46,26 @@ https://isa##.edumake.de
### Frontend
- **HTML5** – Semantisches Markup
-- **CSS3** – Responsive Design mit Grid & Flexbox
+- **CSS3** – Responsive Design mit Grid & Flexbox (~3600 Zeilen)
- **JavaScript (ES6+)** – Interaktive Elemente
+ - Dark Mode mit localStorage-Persistenz
+ - Hamburger-Navigation (Mobile)
- Lightbox-Galerie
- - Formularvalidierung
- - Navigation-Highlighting
+ - Formularvalidierung (feldspezifisch)
+ - fetch() API Demo
+ - Kanban-Board (Drag & Drop)
### Features
- ✅ Responsive Design (Mobile, Tablet, Desktop)
-- ✅ Einheitliche Navigation
-- ✅ Kontaktformular mit Validierung
+- ✅ Dark Mode (Toggle + localStorage)
+- ✅ Hamburger-Menü (Mobile)
+- ✅ Einheitliche Navigation (11 Seiten)
+- ✅ Kontaktformular mit feldspezifischer JS-Validierung
- ✅ Bildergalerie mit Lightbox
-- ✅ Download-Bereich
-- ✅ Impressum & rechtliche Hinweise
+- ✅ Notenrechner (DOM-basiert, Tabs, Fortschrittsbalken)
+- ✅ Textanalyse-Tool (Wörter, Zeichen, Sätze, Metriken)
+- ✅ fetch & API Demo (JSONPlaceholder, DOM-Rendering, Fehlerbehandlung, Filter)
+- ✅ Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export)
- ✅ SEO-freundliches Markup
## 🖥️ SSH-Zugang
@@ -105,46 +119,68 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
## 🔧 JavaScript-Funktionen
-### 1. Navigation-Highlighting
-- Automatisches Markieren des aktiven Links basierend auf URL
+### script.js (Basis)
+- **Dark Mode** – Toggle + sofortige Wiederherstellung via localStorage (IIFE)
+- **Hamburger-Navigation** – Mobile Menü mit aria-Attributen
+- **Navigation-Highlighting** – Aktiver Link basierend auf URL
+- **Lightbox-Galerie** – Klick auf Bilder öffnet vergrößerte Ansicht (ESC/Overlay zum Schließen)
+- **Kontaktformular** – Feldspezifische Validierung, Erfolgsmeldung im DOM
-### 2. Lightbox-Galerie
-- Klick auf Bilder öffnet eine vergrößerte Ansicht
-- ESC-Taste zum Schließen
-- Overlay-Klick zum Schließen
+### api-demo.js
+- `fetch('https://jsonplaceholder.typicode.com/users')` – automatischer Aufruf
+- `.then(r => r.json())` – JSON-Parsing mit HTTP-Status-Prüfung
+- `console.log()` + `console.table()` – strukturierte Ausgabe
+- `createElement` + `DocumentFragment` – performantes DOM-Rendering
+- `.catch(err)` – Fehlermeldung + „Erneut versuchen"-Button
+- Client-seitiger Live-Filter (Name, Stadt, Firma, E-Mail)
-### 3. Kontaktformular
-- Email-Validierung
-- Erfolgs-/Fehlermeldungen
-- Automatisches Zurücksetzen nach Absenden
+### kanban.js
+- Spalten anlegen (`prompt` → `createElement` + `appendChild`)
+- Karten anlegen / löschen / editieren (`contenteditable`)
+- Drag & Drop (`dragstart`, `dragover`, `drop`, `dragenter`, `dragleave`)
+- Präzise Reihenfolge via `getBoundingClientRect` + Drop-Placeholder
+- Farbige Labels per Rechtsklick-Kontextmenü
+- Vollständige Persistenz in `localStorage` als JSON
+- Export als JSON-Datei (`Blob` + `URL.createObjectURL`)
## 📚 Inhaltsseiten
### index.html
- Hero-Abschnitt mit Projekt-Übersicht
- Info-Karten mit Links zu anderen Seiten
-- Updates-Liste
### ueber_uns.html
- Veranstaltungsinformationen
- Dozenten-Profile
-- Projektstruktur (U1-U4+)
### eis_projekt.html
-- Technologie-Stack
-- Projektstruktur
-- Design-Prinzipien
-- Deployment-Infos
+- Technologie-Stack & Projektstruktur
+
+### team.html
+- Teammitglieder-Profile mit Beschreibung & Skill-Tags
+
+### galerie.html
+- Bildergalerie mit Lightbox (Teambild, Gruppenbild)
+
+### notenrechner.html
+- DOM-basierter Notenrechner mit Tabs & Fortschrittsbalken
+
+### textanalyse.html
+- Textanalyse: Wörter, Zeichen, Sätze, Lesbarkeit, häufigste Wörter
+
+### api.html
+- Live-Datenabruf von jsonplaceholder.typicode.com/users
+- DOM-Rendering, Filter, Fehlerbehandlung
+
+### kanban.html
+- Trello-ähnliches Kanban-Board
+- Drag & Drop, Labels, localStorage-Persistenz, JSON-Export
### kontakt.html
-- Kontaktinformationen
-- Kontaktformular
-- FAQ-Sektion
+- Kontaktformular mit feldspezifischer JavaScript-Validierung
### impressum.html
-- Rechtliche Hinweise
-- Datenschutzerklärung
-- Haftungsausschluss
+- Rechtliche Hinweise & Datenschutzerklärung
## 🚀 Entwicklungsschritte (Lernpfad)
@@ -152,18 +188,19 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
|------|-------|---------|
| **U1** | Grundlagen | SSH, Linux, erste HTML-Seite |
| **U2** | Styling & Interaktion | CSS, JavaScript, Events |
-| **U3** | Website-Architektur | Navigation, mehrere Seiten (aktuell) |
-| **U4** | Backend-Integration | Python, Flask, APIs |
-| **U5+** | Erweitert | Datenbanken, Authentifizierung |
+| **U3** | Website-Architektur | Navigation, mehrere Seiten |
+| **U4** | DOM & APIs | Notenrechner, Textanalyse, fetch & API Demo |
+| **Bonus** | Erweitert | Kanban-Board (Drag & Drop, localStorage) |
-## 🎯 Nächste Schritte
+## 🗓️ Änderungsprotokoll
-- [ ] Logo durch echte PH-Weingarten-Logo ersetzen
-- [ ] Bilder hochladen und in Galerie einbinden
-- [ ] Backend mit Flask entwickeln (U4)
-- [ ] Formular-Backend-Integration
-- [ ] Datenbank-Verbindung
-- [ ] User-Authentifizierung
+| Datum | Änderung |
+|-------|----------|
+| 20.05.2026 | Dark Mode: Beschreibungstexte Team/Notenrechner/Textanalyse in dunkelblau |
+| 20.05.2026 | Galerie: teambild.jpeg eingefügt |
+| 20.05.2026 | Mega-Bonus: Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export) |
+| 20.05.2026 | Bonus: fetch & API Demo (JSONPlaceholder, DOM-Rendering, Filter) |
+| vor 20.05.2026 | Dark Mode, Hamburger-Navigation, Kontaktformular-Validierung, Notenrechner, Textanalyse |
## 📧 Support
@@ -178,4 +215,4 @@ Dieses Projekt ist ein Lernprojekt der PH Weingarten und dient zu Ausbildungszwe
---
-**Zuletzt aktualisiert:** 22. April 2026
+**Zuletzt aktualisiert:** 20. Mai 2026
diff --git a/galerie.html b/galerie.html
index d0b6121..ca30c96 100644
--- a/galerie.html
+++ b/galerie.html
@@ -52,7 +52,6 @@
🖼️ Unser Team
Hier findet ihr Bilder aus unserem Team und vom Projekt:
-
