From 4b3b09b70b99c9a650106ee19191531e9db9e3b5 Mon Sep 17 00:00:00 2001
From: 3015418 <3015418@stud.th-mannheim.de>
Date: Mon, 28 Sep 2026 15:43:03 +0200
Subject: [PATCH] docs: add simplified integration review

---
 docs/integration-review.md | 105 +++++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 docs/integration-review.md

diff --git a/docs/integration-review.md b/docs/integration-review.md
new file mode 100644
index 0000000..dfcfd3b
--- /dev/null
+++ b/docs/integration-review.md
@@ -0,0 +1,105 @@
+# Ernährungsseite – Integrationsänderungen
+
+## Dateien und Zuständigkeiten
+
+Die Bereiche stehen gemeinsam in [index.html](../index.html), in dieser Reihenfolge: Produktübersicht → Pakete → Berater → Beratungsinformationen mit Footer.
+
+| Bereich | CSS | JavaScript | Daten |
+| --- | --- | --- | --- |
+| Shahnam: Produktübersicht | [produktuebersicht.css](../css/produktuebersicht.css) | – | Direkt im HTML |
+| Vincent: Pakete | [leistungen.css](../css/leistungen.css) | [leistungen.js](../js/leistungen.js) | [pakete.json](../json/pakete.json) |
+| Ahmad: Berater | [berater.css](../css/berater.css) | [berater.js](../js/berater.js) | [berater.json](../json/berater.json) |
+| Dennis: Beratung und Footer | [beratung.css](../css/beratung.css) | [beratung.js](../js/beratung.js) | Direkt im HTML |
+
+[site.css](../css/site.css) enthält nur die gemeinsame Seitengrundlage: Hintergrund, Textfarbe, Standardschrift und den entfernten Außenabstand des `body`.
+
+### Umbenannte und verschobene Dateien
+
+Die alten Pfade beziehen sich auf den jeweiligen Quellbranch.
+
+| Bereich | Vorher | Jetzt |
+| --- | --- | --- |
+| Shahnam | `css/style.css` | `css/produktuebersicht.css` |
+| Vincent | `css/style.css` | `css/leistungen.css` |
+| Vincent | `js/script.js` | `js/leistungen.js` |
+| Ahmad | `css/style.css` | `css/berater.css` |
+| Dennis | `style.css` | `css/beratung.css` |
+| Dennis | `script.js` | `js/beratung.js` |
+| Beraterbilder | `img/relindis_agethen.png` | `images/relindis_agethen.png` |
+| Beraterbilder | `img/relindis_agethen_1.jpg` | `images/relindis_agethen_1.jpg` |
+
+Die Bildpfade in `json/berater.json` wurden entsprechend angepasst.
+
+## Gemeinsames HTML und CSS
+
+**HTML:** Die unterschiedlichen `index.html`-Versionen wurden zu einem Dokument mit einem `head`, einem `body` und einem übergeordneten `main` zusammengesetzt. Alle benötigten CSS- und JS-Dateien sind dort eingebunden; die Skripte laden mit `defer`. Die Schriftarten werden einmal im gemeinsamen Head angefordert.
+
+**CSS:** Regeln für `body`, Überschriften, `.container` und Farbvariablen waren ursprünglich teilweise seitenweit gültig. Sie sind jetzt auf die jeweiligen Bereiche begrenzt:
+
+| Bereich | Äußerer Selektor |
+| --- | --- |
+| Produktübersicht | `.produktuebersicht` |
+| Pakete | `.pakete` |
+| Berater | `.berater-section` |
+| Beratung einschließlich Footer | `.beratung-bereich` |
+
+Beispiel: `.produktuebersicht .container` gilt nur im Produktbereich, `.beratung-bereich .container` nur im Beratungsbereich. Gleichnamige Klassen und Variablen können dadurch in beiden Bereichen bestehen bleiben.
+
+**Beim Ergänzen von Styles:** Den jeweiligen äußeren Selektor beibehalten. Neue globale Regeln wie `h2 { ... }`, `.container { ... }` oder Variablen in `:root` können wieder andere Bereiche beeinflussen. Ein anderer CSS-Dateiname allein verhindert das nicht.
+
+## Änderungen je Bereich
+
+### Shahnam – Produktübersicht
+
+- Der gesamte Bereich liegt jetzt innerhalb von `.produktuebersicht`; die Styles und Variablen wurden entsprechend begrenzt.
+- Das bisherige innere `main` wurde zu `div.produktuebersicht__main`, damit es nur einen übergeordneten `main` gibt. Der innere `.hero` ist ebenfalls ein `div`.
+
+### Vincent – Pakete
+
+| Stelle | Änderung | Grund |
+| --- | --- | --- |
+| Datenabruf in `js/leistungen.js` | `data/pakete.json` → `json/pakete.json` | Der bisherige Pfad passte nicht zum vorhandenen Ordner. |
+| Initialisierung | Prüfung auf `#leistungen`; Elementsuche innerhalb dieses Bereichs | Das Skript greift nur auf seinen eigenen Bereich zu. |
+| Datenabruf | HTTP-Statusprüfung und `try/catch` mit sichtbarer Fehlermeldung | Ein Ladefehler soll nicht als leerer Paketbereich enden. |
+| Paketbuttons | Klickfunktion wieder angeschlossen | Die Auswahl aus der ersten Umsetzung fehlte nach der Umstellung auf JSON. |
+| Auswahlstatus | Genau eine markierte Karte und `aria-pressed` für die Buttons | Auswahl sichtbar und für Hilfstechnologien erkennbar halten. |
+
+Nach einer Auswahl wird auf `document` das Event `paket:ausgewaehlt` ausgelöst. `event.detail.paket` enthält den `dataPaket`-Wert aus der JSON-Datei. Eine spätere Buchungsfunktion kann daran anschließen; der Button führt aktuell keine Buchung aus.
+
+### Ahmad – Berater
+
+- Kartenbreite von `380px` auf `min(380px, 100%)` angepasst; der Kartencontainer erhält `width: 100%` bei weiterhin maximal `1000px`. So passen die Karten auf schmale Displays.
+- CSS auf `.berater-section` begrenzt. Die HTML-Sektion erhielt `id="berater"` und eine zugängliche Bereichsbezeichnung.
+- `json/berater.json`: die beiden Bildpfade auf `images/` umgestellt.
+
+### Dennis – Beratung und Footer
+
+- CSS auf `.beratung-bereich` begrenzt. Die vorhandenen allgemeinen Klassennamen bleiben innerhalb dieses Containers nutzbar.
+- Der dekorative Hintergrund ist jetzt innerhalb des Bereichs absolut positioniert und durch `isolation: isolate` begrenzt. Er liegt nicht mehr fest hinter der gesamten Seite.
+- Scroll-Reveal sucht in `js/beratung.js` nach `.beratung-bereich .reveal` statt seitenweit nach `.reveal`.
+- Grid-Spalten verwenden `minmax(0, 1fr)`. Die Karten erhalten `min-width: 0`, `overflow-wrap: anywhere` und `hyphens: auto`. Das behebt den beim 320-Pixel-Test festgestellten horizontalen Überlauf durch lange Wörter.
+
+## Lokal starten und prüfen
+
+`index.html` über einen lokalen HTTP-Server öffnen, zum Beispiel VS Code Live Server. Beim direkten Öffnen als `file://` können die JSON-Abfragen scheitern.
+
+Die vollständige Integrationsprüfung erfolgte automatisiert in Chrome, ergänzt durch die Ansicht von Screenshots:
+
+- Breiten: **320, 390, 768, 1366 und 1920 px**; nach den Korrekturen kein horizontaler Überlauf.
+- **3 Pakete und 2 Beraterkarten**, funktionierende Bilder und eindeutige IDs.
+- Paketwechsel: genau eine Auswahl und korrektes `paket:ausgewaehlt`-Event.
+- Sichtbare Fehlermeldungen bei fehlender Paket- beziehungsweise Berater-JSON.
+- Sichtbare Beratungsinhalte bei aktivierter Einstellung für reduzierte Bewegung.
+- Keine unbehandelten JavaScript-Fehler oder fehlgeschlagenen lokalen Ressourcen im normalen Testlauf.
+
+Die Browserprüfung fand vor dem Verschieben der Bilder statt; danach wurden die Bildpfade und Dateiinhalte geprüft. Andere Browser und echte Mobilgeräte wurden nicht getestet.
+
+## Offene Punkte für das Team
+
+| Bereich | Noch zu prüfen |
+| --- | --- |
+| Produktübersicht | Platzhalter durch endgültige Texte ersetzen. |
+| Pakete | Bezeichnung `STANDART`, Preise und Paketangaben prüfen; Buchungsfunktion noch offen. |
+| Berater | Zwei gleich benannte Profile mit gleichen Informationen und unterschiedlichen Bildern sind aus dem Quellstand übernommen. Prüfen, ob das so vorgesehen ist. |
+| Kontakt und externe Links | Ziele und Angaben fachlich prüfen. |
+| Gesamtgestaltung | Unterschiede bei Farben, Abständen und Schriftgrößen gemeinsam bewerten. |