diff --git a/css/beratung.css b/css/beratung.css index f6df2bd..e47de39 100644 --- a/css/beratung.css +++ b/css/beratung.css @@ -164,11 +164,15 @@ .beratung-bereich .grid-2 { display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .beratung-bereich .box { + /* Lange Woerter duerfen die Karten auf kleinen Displays nicht verbreitern. */ + min-width: 0; + overflow-wrap: anywhere; + hyphens: auto; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); @@ -380,7 +384,7 @@ @media (max-width: 760px) { .beratung-bereich .grid-2 { - grid-template-columns: 1fr; + grid-template-columns: minmax(0, 1fr); } .beratung-bereich .section { diff --git a/docs/integration-review.md b/docs/integration-review.md new file mode 100644 index 0000000..9382c4a --- /dev/null +++ b/docs/integration-review.md @@ -0,0 +1,65 @@ +# Integration der Ernährungsseite + +Review-Branch: `integration/ernaehrung-review`, erstellt aus `main`. +Die vier Quellbranches wurden mit Merge-Commits eingebunden. Ihre Historie +bleibt erhalten; die Quellbranches und `main` wurden nicht verändert. + +| Bereich | Quellbranch / Stand | CSS-Datei | CSS-Bereich | +| --- | --- | --- | --- | +| Shahnam | `S-Produktübersicht` / `f7605d8` | `css/produktuebersicht.css` | `.produktuebersicht` | +| Vincent | `feature/V-US-01-02-leistungsuebersicht` / `312e788` | `css/leistungen.css` | `.pakete` | +| Ahmad | `A-Berater-und-Qualifikationen` / `d945d0a` | `css/berater.css` | `.berater-section` | +| Dennis | `D-info-ueber-beratung` / `6b2bcb4` | `css/beratung.css` | `.beratung-bereich` | + +`css/site.css` enthält nur die gemeinsame Seitengrundlage. Gleiche Dateinamen +an unterschiedlichen Pfaden wären technisch erlaubt. Gegen Stilkonflikte +helfen jedoch die begrenzten Selektoren und Variablen, nicht der Dateiname. +Beispiel: `.produktuebersicht .container` betrifft nur Shahnam. +Neue Regeln bitte innerhalb des jeweiligen CSS-Bereichs halten. + +## Aufgelöste Konflikte und Fehler + +- `index.html`: ein Dokument mit einem `main`; alle vier Beiträge erhalten. +- Gleichnamige CSS-Dateien: getrennte Namen, lokale Variablen und Selektoren. +- Dennis' `style.css` / `script.js`: Modify/Delete-Konflikte durch Übernahme + nach `css/beratung.css` / `js/beratung.js` aufgelöst. +- Pakete: falscher JSON-Pfad von `data/` auf `json/` korrigiert; + Fehleranzeige ergänzt. Die in Vincents erstem Commit vorhandene Auswahl + samt Event `paket:ausgewaehlt` funktioniert wieder mit den JSON-Karten. +- Berater: Kartenbreite für kleine Displays begrenzt; JS nur von überflüssigen + Leerzeichen bereinigt, Daten und Rendering-Logik unverändert. +- Beratung: Hintergrund und Scroll-Reveal auf den eigenen Bereich begrenzt; + Grid und lange Wörter verursachen auf kleinen Displays keinen Überlauf. +- Schriftarten einmal im gemeinsamen Head eingebunden; `.DS_Store` entfernt. + +JSON-Inhalte, Bilder, Preise, Links und Texte wurden nicht redaktionell geändert. +Zur fachlichen Prüfung bleiben unter anderem die zwei gleich benannten +Beraterprofile, die Paketbezeichnung `STANDART`, Platzhalter und Buchungslinks. +Die Paketauswahl ist noch keine Buchungsfunktion. + +## Lokal prüfen + +`index.html` über VS Code Live Server öffnen, nicht direkt als `file://`; +die beiden JSON-Dateien werden per `fetch` geladen. + +Geprüft in Chrome bei 320, 390, 768, 1366 und 1920 px: alle vier Bereiche, +3 Pakete, 2 Berater, Bilder, eindeutige IDs und kein horizontaler Überlauf. +Zusätzlich: Paketwechsel mit genau einer Auswahl und korrektem Event, +reduzierte Bewegung, Fehleranzeigen bei fehlenden JSON-Dateien sowie keine +unbehandelten JavaScript-Fehler oder fehlgeschlagenen lokalen Ressourcen im Normalbetrieb. + +## Weitere Änderungen zusammenführen + +1. Auf diesen Integrationsbranch wechseln und `git fetch origin` ausführen. +2. Den aktualisierten Quellbranch mit `git merge origin/BRANCHNAME` einbinden. +3. Bei Konflikten mit `git status` die betroffenen Dateien prüfen. + `<<<<<<<`, `=======` und `>>>>>>>` markieren die beiden Versionen. + In der gemeinsamen HTML-Datei beide benötigten Bereiche zusammensetzen; + nicht pauschal eine komplette Seite mit „ours“ oder „theirs“ ersetzen. +4. Marker entfernen, Pfade und CSS-Bereiche prüfen und im Browser testen. +5. Aufgelöste Dateien mit `git add DATEIPFAD` markieren, `git commit` ausführen + und ausschließlich diesen Integrationsbranch pushen. + +Ein noch laufender Merge lässt sich mit `git merge --abort` abbrechen. +Bereits abgeschlossene Merges bleiben bestehen. Erst nach Team-Review soll +ein Pull Request von diesem Branch nach `main` zusammengeführt werden.