App-Design-Politur: Papier-Look, Kacheln, Ampel-Streifen, großer Titel

- Theme: warmer Papier-Hintergrund (#FAF7F0) wie die Webseite, Inhalte
  als weiße Karten mit dezentem Schatten + warmem Rand; Marker-Gelb
  als Akzentfarbe für die Kernaussage
- Home: iOS-Großtitel (kollabiert beim Scrollen), Hero-Button mit
  Schatten, Kachel-Navigation statt halbbreiter Text-Buttons (behebt
  Umbruch "Einstellunge/n"), Abschnitts-Label, Brief-Karten mit
  Ampel-Farbstreifen links, freundlicher Leerzustand
- Analyse: Kernaussage als Textmarker-Karte (Markenzeichen), Frist/
  Termin-Karte in Ampel-Tönung mit Farbstreifen, einheitliche Karten
- Ampel-Banner: Streifen-Look statt Vollrahmen
- Layout-Fix: Home als FlatList-Wurzel mit automatischem Inset (vorher
  verdeckte der große Titel die Kopf-Buttons)

Barrierefreiheit unverändert: Schriftgrößen, Touch-Targets, Kontraste.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-16 21:14:11 +02:00
parent 7cfe830e9f
commit fdfd2d392a
7 changed files with 176 additions and 74 deletions

View File

@@ -5,14 +5,18 @@
* - Große Touch-Targets (min. 56px Höhe)
*/
export const farben = {
// Grundfarben
hintergrund: '#FFFFFF',
flaeche: '#F2F5F9',
// Grundfarben — warmer Papier-Ton als Markenzeichen (wie die Webseite):
// Inhalte liegen als weiße "Blätter" auf Papier
hintergrund: '#FAF7F0',
flaeche: '#FFFFFF',
primaer: '#1A365D', // dunkles, ruhiges Blau
primaerText: '#FFFFFF',
text: '#1A202C',
textSekundaer: '#4A5568',
rand: '#CBD5E0',
rand: '#E4DECF',
// Akzent: Textmarker-Gelb (sparsam einsetzen — nur für DIE Kernaussage)
markerHintergrund: '#FFF6D2',
markerRand: '#EBDD9A',
// Dringlichkeits-Ampel (kräftig, gut unterscheidbar)
ampelRot: '#C0392B',
@@ -43,3 +47,12 @@ export const abstand = {
/** Mindesthöhe für alle interaktiven Elemente (Barrierefreiheit). */
export const TOUCH_TARGET = 56;
/** Dezenter Schatten, damit weiße Karten sich vom Papier-Grund abheben. */
export const kartenSchatten = {
shadowColor: '#1A202C',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.07,
shadowRadius: 6,
elevation: 2,
} as const;