# NuNaBu · Optische Weiterentwicklung der modernen Home-Seite

Stand: 22. September 2026. Ergebnis: Gestaltungsvorschlag, keine Änderung der App.

## Grundlage und Grenzen

Geprüft wurden die aktuelle SwiftUI-Implementierung unter `ios/NuNaBu/Views/Home/Modern/`, `AppTheme.swift`, die Einbettung in `AppViews.swift` und der bestehende Modernisierungsplan. Der Knowledge-Graph wurde zur Orientierung gelesen; ein Wiki-Index ist nicht vorhanden.

Der aktuelle Projektstand wurde erfolgreich für den Simulator gebaut, im iPhone-17-Pro-Max-Simulator installiert und mit dem Demo-Konto angemeldet. Die moderne Home-Seite wurde im Hell- und Dunkelmodus sowie mit geöffneter und geschlossener Wasser-/Aktivitätssektion angesehen. Der aktuelle Demotag enthält keine Mahlzeiten. Gefüllte Mahlzeiten, kleine Geräte und native Dynamic-Type-Stufen sind deshalb noch keine visuell abgenommenen Zustände. Die älteren Dashboard-Screenshots im Repository zeigen die klassische Oberfläche und wurden nicht als Beleg für Modern verwendet.

Direkt in der laufenden App bestätigt:

- Zwischen Energie und Makros stehen im Demo-Layout fünf Nebenbereiche: 7-Tage-Bilanz, Medikamente, Wasser & Aktivität, Etappenziel, Tagesziele. Die Makros beginnen dadurch erst am unteren Bildschirmrand.
- Das Kalorienziel erscheint im Resttext, im Verhältniswert und nochmals als Ziel-Badge.
- Bei null Kalorien bleibt ein grüner Punkt im Fortschrittsbalken; Wasser und Schritte zeigen ebenfalls eine kleine Füllung trotz null.
- Die Zusammenfassung von Wasser & Aktivität springt beim Öffnen von unterhalb des Titels nach rechts.
- Im Hellmodus wirken kleine helle Akzenttexte schwächer als die dunklen Inhaltsbeschriftungen. Die vorgeschlagenen Textfarben müssen in der nativen Umsetzung noch anhand tatsächlicher Hintergrundfarben auf Kontrast geprüft werden.

Der begleitende [interaktive Entwurf](home-modern-concept.html) zeigt das vorgeschlagene Layout mit erfundenen Beispieldaten. Er bietet Hell/Dunkel, kompakte Breite, große Schrift, mehrere Tagesstände und aufklappbare Sektionen. Er ist kein pixelgenauer SwiftUI- oder iOS-26-Nachbau; Systemnavigation und Symbole sind schematisch.

## Gestaltungsrichtung

**Ein ruhiges, präzises Tagesjournal mit Emerald als wiedererkennbarem Akzent.** Die freistehende Energieanzeige, der Verzicht auf schwere Karten und die konfigurierbaren Sektionen bleiben die Basis. Mehr Qualität entsteht durch Gewichtung, Ausrichtung und konsistente Zustände.

## Verbindliche Vorgabe: vollständiger Funktionserhalt

Die Gestaltung darf Abläufe vereinfachen und Zugänge verbessern. Bestehende Fähigkeiten dürfen dabei weder entfallen noch durch schlecht auffindbare Bedienelemente praktisch unbenutzbar werden. Alle 17 Home-Bereiche bleiben verfügbar. Die kompakte Darstellung ist eine zusätzliche Übersicht, keine Reduktion der Funktionen.

Die dritte Version des HTML-Entwurfs zeigt alle Bereiche mit ausgearbeiteten Inhalten anstelle von Buttons zu Ablaufbeschreibungen: Wochenbalken, Schlafphasen, Profilkalender, Zyklusverlauf, Einnahmeliste, Gewichtstrend, Ziele und Übungen. Einträge lassen sich mit lokalen Beispieldaten bearbeiten, Getränke hinzufügen, Einnahmen markieren, Profile zuordnen und Ziele abhaken. Details öffnen konkrete Ansichten; Texte und Buttons ersetzen nicht mehr den eigentlichen Sektionsinhalt.

Diese Interaktionen verändern nur den flüchtigen Zustand der Vorschau. Neuladen setzt ihn zurück. Echte Speicherung, KI, Health-Synchronisierung und die vollständigen nativen Spezialfunktionen sind nicht angebunden. Die folgende Matrix bleibt die Anforderung für die SwiftUI-Umsetzung; die Vorschau ist kein Nachweis vollständiger Funktionsparität.

| Bereich / Zugang | Muss weiterhin gut möglich sein | Gestaltungsvorgabe |
|---|---|---|
| Tagesnavigation | Vorheriger/nächster zulässiger Tag, Kalender, zurück zu heute, Randwischen, Aktualisieren und Health-Synchronisierung | Datum bleibt erreichbar; historische Tage eindeutig kennzeichnen. |
| Tagesenergie | Verbrauch, Ziel, Rest, Aktivitäts- und Zyklusanpassung verstehen; Streak-Details öffnen | Zusammenfassen ohne Informationen oder Streak-Aktion zu verlieren. |
| 7-Tage-Bilanz | Zeitraum, Bilanz und vorhandene Detailwerte ansehen | Eigene aufklappbare Sektion bleibt verfügbar. |
| Nährstoffe | Alle sechs Werte und Ziele ansehen; für jeden Nährstoff die Lebensmittel-Aufschlüsselung öffnen | Die drei Hauptwerte sind direkt antippbar; Ballaststoffe, Zucker und Salz bleiben explizit benannt und können auf Wunsch dauerhaft offen sein. Vorhandene Zielabweichungen nicht verschweigen. |
| Mahlzeiten | Gruppen und Einträge öffnen, Menge/Mahlzeit bearbeiten, speichern, Favoriten setzen, löschen, Mahlzeiten-Check-in verwenden | Interaktive Einträge statt rein dekorativer Zusammenfassung. Swipe-to-delete bleibt; eine zusätzlich sichtbare Menüaktion kann die Auffindbarkeit verbessern. Getränke und optional freies Obst erhalten. |
| Erfassung und Navigation | KI-Erfassung und bestehende Wege zu Suche, Favoriten und Log erreichen; Statistik öffnen | Kein Weg darf durch die neue Home-Gestaltung verloren gehen. Ein direkter Erfassungszugang auf Home ist eine erlaubte Optimierung. |
| Wasser & Aktivität | Getränkeübersicht und vorhandene Trink-Erfassung öffnen; Schritte und zusätzliche Aktivitäten samt Werten ansehen | Wasser bleibt antippbar. Eingeklappte Summary enthält beide Tageswerte. |
| Schlaf | Dauer, Zeitbereich und Schlafphasen ansehen | Die kleine Summary ersetzt nicht die Phasendarstellung. |
| Stimmung & Wohlbefinden | Stimmung, Bewertung, Notiz, Labels und Zusammenhänge erfassen bzw. ansehen | Vollständiger Editor bleibt erreichbar; Schreibschutz fremder Profile respektieren. |
| Empfehlungen | Neu laden, Vorschläge öffnen, Menge und Mahlzeit wählen, eintragen; bestehende Fastenabfrage beachten | Vorschlag mit klarer Aktion; keine reine Textliste ohne Übernahmemöglichkeit. |
| Fasten | Aktuelle Phase, Wechselzeit, Fenster und Fortschritt ansehen | Aktivierungslogik und Warnungen bei Erfassung bleiben erhalten. |
| Tagesziele | Abhaken, bestätigtes Zurücksetzen, Erinnerungen und Status erkennen | Sichtbare Erledigen-Aktion; bestehende Rücksetzbestätigung und Berechtigungen erhalten. |
| Profilkalender | Aktives Profil, Energieziel und kommende Profile ansehen | Horizontaler Kalender bleibt vollständig nutzbar. |
| Zyklus | Phase und Anpassung ansehen, bestehendes Detail-Sheet öffnen | Kontext und Detailzugang bleiben erhalten; nur bei aktivierter Funktion zeigen. |
| Medikamente | Den bestehenden Tageskarten-Ablauf einschließlich Einnahmeaktionen und weiterführender Verwaltung erhalten | Sichtbare eigene Sektion und bestehende Datums-/Profilzuordnung. Beim Umgestalten keine Einnahmeaktion entfernen. |
| Etappenziel | Gewicht, Ziel, verbleibende Strecke und Fortschritt ansehen | Kompakte Summary plus vollständiger Inhalt. |
| Übungen | Angepinnte Übungen, Timer, Abschluss/Bewertung, Rücknahme und Fortschritt verwenden | Start-/Fortsetzen-Aktion bleibt klar; historische Tagesansicht respektieren. |
| KI-Kontext | Kontext lesen, aktualisieren und kopieren | Beide Aktionen bleiben sichtbar, Lade-/Fehlerzustände erkennbar. |
| Tagesfeedback | Bestehende Analyse lesen und neu erzeugen | Volltext zugänglich, Aktualisieren bleibt erhalten. |
| Personalisierung / Profil | Bereiche sortieren, aus-/einblenden, zurücksetzen; Expansion merken; Einstellungen und Profilwechsel nutzen | Bestehende Nutzerreihenfolge nicht überschreiben. „Heute anpassen“ darf als direkter zusätzlicher Zugang erscheinen. |

### Abnahme pro Ablauf

- Für jede Zeile der Matrix wird der bestehende Weg mit dem neuen Weg verglichen: Einstieg finden → Aktion ausführen → Ergebnis sehen → zur Übersicht zurückkehren.
- Häufige Aktionen bekommen keinen zusätzlichen Pflichtschritt. Tiefere optionale Details bleiben klar beschriftet; reine Gesten sind nicht der einzige neu eingeführte Zugang.
- Schreibschutz, ausgewähltes Profil/Datum, Fastenabfragen, Bestätigungen, Fehlerbehandlung und vorhandene Datenspeicherung bleiben erhalten.
- Kompaktere Nährwerte sind nur dann akzeptabel, wenn alle sechs Aufschlüsselungen gut erreichbar bleiben. Persönlich wichtige Details können dauerhaft offen bleiben.
- Die neue Anordnung gilt als Vorschlag für den Standard; Nutzer können beispielsweise Medikamente weiterhin an die erste Stelle setzen.
- Als abgeschlossen gilt die native Überarbeitung erst nach Prüfung dieser Abläufe. Eine hübsche Vorschau allein erfüllt diese Vorgabe nicht.

## Priorisierte Verbesserungen

| Priorität | Befund im aktuellen Code | Konkrete Änderung | Wirkung |
|---|---|---|---|
| P1 | Der Energieblock zeigt Nettozahl, Resttext, denselben Netto-/Zielwert nochmals und ein Ziel-Badge. Der Rest steht als kompletter Satz neben der 56-pt-Zahl. | Große Nettozahl beibehalten; rechts Restzahl und kleine separate Beschriftung. Ziel genau einmal unter dem Balken. Streak separat als dezente Textaktion. Aktivitäts- und Zyklusgutschrift in einer gemeinsamen erklärenden Zeile. | Klarer Blickpfad: Verbrauch → Rest → Grundlage. Weniger Textkompression. |
| P1 | `CollapsibleHomeSection` verschiebt die Summary beim Öffnen von unterhalb des Titels nach rechts. Lange Titel konkurrieren dann mit 12-pt-Summaries, die auf 75 % schrumpfen dürfen. | Summary in beiden Zuständen unter dem Titel lassen; Chevron fest rechts. Im offenen Zustand eine kurze sinnvolle Zusammenfassung oder denselben Text zeigen. | Stabile Ausrichtung und weniger visuelles Springen. |
| P1 | Sechs Nährstoffe stehen standardmäßig als gleich gewichtete Zeilen mit Balken und zusätzlichen Trennern untereinander. | Protein, Kohlenhydrate und Fett als drei kompakte Wertspalten mit Mini-Balken. Ballaststoffe, Zucker, Salz in einer zweiten, aufklappbaren Ebene; auffällige Grenzüberschreitungen auch geschlossen als Text anzeigen. Bei großer Schrift auf vertikale Zeilen wechseln. | Mahlzeiten werden früher sichtbar; Details bleiben erreichbar. |
| P1 | Kleine Akzenttexte verwenden `AppTheme.emerald` = `#10b981`, auch auf dem hellen Hintergrund. Amber wird ebenfalls als kleine Textfarbe verwendet. | Separate adaptive Textfarben verwenden. Vorschlag: Emerald `#047857` hell / `#6ee7b7` dunkel; Amber `#92400e` hell / `#fbbf24` dunkel. Bestehendes helles Emerald für Balken behalten. | Bessere Lesbarkeit bei gleicher Markenwirkung. |
| P2 | Bis zu 17 Sektionen nutzen fast dieselbe Header- und Iconbehandlung. Die Erstsortierung kann aus der klassischen Kachelreihenfolge stammen. | Einheitliche 20-pt-Außenkante und 8/12/16/24-pt-Abstände; offene Inhaltsbereiche etwas mehr Luft, geschlossene Zeilen kompakt. Als neue Standardreihenfolge Energie → Nährstoffe → Mahlzeiten → Wasser & Bewegung → weitere Bereiche anbieten. Gespeicherte Nutzerreihenfolgen respektieren. | Klarere Tagesgeschichte ohne Eingriff in bestehende Personalisierung. |
| P2 | Alle Mahlzeitengruppen starten offen; Unterzeilen haben feste Höhen von 76 bzw. 334 pt. | Gruppenheader als ruhige Zwischenüberschriften; kcal rechts, Eintragszahl sekundär. Intrinsische bzw. dynamisch ermittelte Zeilenhöhe prüfen, damit lange Namen und große Schrift Platz bekommen. Standardmäßig nur die jüngste Gruppe zu öffnen wäre eine gesonderte UX-Entscheidung. | Ruhigere Einträge und weniger starre Leerflächen. |
| P2 | Neutrale Kategorien und Warnzustände teilen sich teilweise dieselbe Farbe. Protein wird unter 75 % des Ziels bereits Amber; Zucker ist auch unter seinem Grenzwert rot. | Kategorie und Zustand trennen: normaler Fortschritt in neutralen/Markenfarben; Warnfarbe mit explizitem Text nur bei einer tatsächlich relevanten Überschreitung. Keine rote Darstellung allein wegen der Nährstoffart. | Weniger Alarmwirkung, klarere Bedeutung von Farbe. |
| P2 | Fortschrittsbalken erhalten auch bei null einen Mindestfüllstand von 5 bzw. 8 pt. | Bei null keine Füllung; unbekannte Daten als unbekannt anzeigen. Oberhalb des Ziels begrenzter Balken plus ausgeschriebener Überschreitungswert. | Die Visualisierung erzählt denselben Zustand wie die Zahl. |

## Energieanzeige: Werte müssen zusammenpassen

`DashboardViewModel.kcalRemaining` und `kcalProgress` rechnen mit `effectiveKcalGoal + activityCredit`. Die aktuelle Zielbeschriftung zeigt nur `effectiveKcalGoal`. Beispiel: 1.360 kcal erfasst, 2.000 kcal Ziel und 180 kcal Aktivitätsgutschrift ergeben 820 kcal verbleibend und rund 62 % Fortschritt. Ohne Erklärung wirkt der Balken widersprüchlich zur sichtbaren Zielzahl.

Vorschlag im Entwurf: „Tagesbudget 2.180 kcal“, darunter „Ziel 2.000 + Aktivität 180“. Das vorhandene effektive Ziel enthält gegebenenfalls bereits die Zyklusanpassung. In der Umsetzung Zyklusanteil getrennt ausweisen, ohne ihn doppelt zu addieren. Die Berechnung selbst bleibt unverändert.

## Konkrete Gestaltungsvorgaben

- Tageswert: etwa 48–52 pt, gerundete Systemschrift, tabellarische Ziffern; Restwert etwa 28–30 pt, Beschriftung separat.
- Sektionsüberschrift: semibold, etwa 17 pt; Inhalt 15–17 pt; sekundäre Angaben 13–14 pt. Das sind Ausgangsgrößen, keine festen Obergrenzen.
- Zusammenfassungen ausgeschrieben und mit Einheiten: „84 g Protein“ statt „84g P“; „Ballaststoffe“ statt „Ballast.“ bei ausreichendem Platz.
- Hintergrund: vorhandenes Slate als Basis; Grün gezielt für wichtige Zahlen, Auswahl und Fortschritt. Keine zusätzlichen Schatten oder farbigen Karten im Feed.
- Iconplätze 28–32 pt; Farbe sparsam, geschlossene Nebensektionen neutraler. Mindestens 44 × 44 pt große interaktive Trefferflächen.
- Ausklappen verändert den Inhalt, nicht die Position von Titel und Summary. Kurze Animation; reduzierte Bewegung berücksichtigen.
- SwiftUI: semantische Textstile bzw. `@ScaledMetric` und adaptives Layout statt immer kleiner werdender Schrift. Apple empfiehlt skalierbare Typografie und eine lesbare Informationshierarchie: [Typography](https://developer.apple.com/design/human-interface-guidelines/typography), [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility).

## Umsetzung in zwei überschaubaren Schritten

1. **Visuelles Feintuning:** Energiehierarchie, stabile Sektionsköpfe, adaptive Textfarben, Abstände, korrekte Nullbalken. Betroffene Dateien: `ModernHomeSectionsPrimary.swift`, `ModernHomeChrome.swift`, `DashboardModernView.swift`; neue Farbwerte möglichst zunächst lokal für Modern halten. Bestehende Sheet-Aktionen beibehalten.
2. **Informationsdichte:** kompakte Makroübersicht samt Detailzugang und Überlaufhinweisen, adaptive Mahlzeitenhöhen, optional neue Standardreihenfolge für unkonfigurierte Nutzer. Klick auf einen Nährstoff öffnet weiterhin das bestehende Breakdown-Sheet. Änderungen an gemeinsam genutztem `FoodLogCard` separat auf klassische Ansicht, Suche und Favoriten prüfen.

## Visuelle Abnahme vor Übernahme in die App

- Kleines iPhone und großes iPhone, Light/Dark, normale und sehr große Dynamic-Type-Stufen.
- Tagesstart mit echten Nullwerten; Ladezustand und Ladefehler davon unterscheiden.
- Normaler Tag, Aktivitätsgutschrift, Zyklusanpassung, Budgetüberschreitung, ungewöhnlich lange Zahlen.
- Lange deutsche und englische Sektionsnamen, Mahlzeitennamen und Zusammenfassungen.
- Alle Sektionen geöffnet/geschlossen, persönliche Reihenfolge, historische Tage, leere Mahlzeiten.
- Tippen, Ausklappen und Swipe-to-delete; keine Inhalte unter Tabbar oder Safe Area abgeschnitten.

Der HTML-Entwurf hilft bei der Designentscheidung. Er ersetzt nicht diese native Prüfung.

## Bisherige Prüfung

- Aktueller unveränderter iOS-App-Code: Simulator-Build erfolgreich.
- Anmeldung mit dem Demo-Konto erfolgreich; moderne Home-Seite in Light/Dark und Expansion von Wasser & Aktivität direkt geprüft. Ausgangszustand der Expansion wiederhergestellt.
- HTML-Entwurf: normale helle Darstellung sowie kompakte dunkle Darstellung visuell geprüft; Zustandswechsel zu Budgetüberschreitung und großer Schrift funktioniert.
- Version 3: Profilkalender mit Tagen und Profilinformationen, Zyklusphasen und Medikamentenliste visuell geprüft. Auswahl eines Trainingstags zeigt 2.300 kcal; Markieren einer Beispieleinnahme erhöht den Status von 1/2 auf 2/2.
- Version 3: Portionsmenge von 300 auf 150 g geändert; Eintrag sinkt von 380 auf 190 kcal und der Tageswert von 1.360 auf 1.170 kcal. Hinzufügen von 250 ml erhöht die Trinkmenge von 1.550 auf 1.800 ml.
- Version 3: Bei 390 px Browserbreite, kompakter Vorschau und großer Schrift kein horizontaler Überlauf von Seite oder Feed gemessen. Kalenderleisten bleiben absichtlich horizontal scrollbar. JavaScript-Syntaxprüfung bestanden.
- App-Implementierung wurde nicht geändert. Neue Dateien sind ausschließlich diese Ausarbeitung und der HTML-Entwurf mit seinen CSS-/JavaScript-Dateien.
- `graphify update .` wurde versucht; das Kommando ist in dieser Umgebung nicht verfügbar. Bereits vorhandene Änderungen in `graphify-out/` wurden nicht bearbeitet.