trihub-ernaehrung-advinters/docs/integration-review.md

Ernährungsseite – Integrationsänderungen

Dateien und Zuständigkeiten

Die Bereiche stehen gemeinsam in index.html, in dieser Reihenfolge: Produktübersicht → Pakete → Berater → Beratungsinformationen mit Footer.

Bereich	CSS	JavaScript	Daten
Shahnam: Produktübersicht	produktuebersicht.css	–	Direkt im HTML
Vincent: Pakete	leistungen.css	leistungen.js	pakete.json
Ahmad: Berater	berater.css	berater.js	berater.json
Dennis: Beratung und Footer	beratung.css	beratung.js	Direkt im HTML

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.