CLAUDE.md

@@ -176,3 +176,120 @@ PHOTOS_DIR=/app/photos
 - API-Calls: immer über `api.js` (injiziert Token automatisch)
 - Kein TypeScript (bewusst, für Einfachheit)
 - Python: keine Type-Hints Pflicht, aber bei neuen Funktionen erwünscht
+
+## Design-System
+
+### Farben (CSS-Variablen)
+```css
+--accent:       #1D9E75   /* Jinkendo Grün – Buttons, Links, Akzente */
+--accent-dark:  #085041   /* Dunkelgrün – Icon-Hintergrund, Header */
+--accent-light: #E1F5EE   /* Hellgrün – Hintergründe, Badges */
+--bg:           /* Seitenhintergrund (hell/dunkel auto) */
+--surface:      /* Card-Hintergrund */
+--surface2:     /* Sekundäre Fläche */
+--border:       /* Rahmen */
+--text1:        /* Primärer Text */
+--text2:        /* Sekundärer Text */
+--text3:        /* Muted Text, Labels */
+--danger:       #D85A30   /* Fehler, Warnungen */
+```
+
+### CSS-Klassen
+```css
+.card           /* Weißer Container, border-radius 12px, box-shadow */
+.btn            /* Basis-Button */
+.btn-primary    /* Grüner Button (#1D9E75) */
+.btn-secondary  /* Grauer Button */
+.btn-full       /* 100% Breite */
+.form-input     /* Eingabefeld, volle Breite */
+.form-label     /* Feldbezeichnung, klein, uppercase */
+.form-row       /* Label + Input + Unit nebeneinander */
+.form-unit      /* Einheit rechts (kg, cm, etc.) */
+.section-gap    /* margin-bottom zwischen Sektionen */
+.spinner        /* Ladekreis, animiert */
+```
+
+### Abstände & Größen
+```
+Seiten-Padding:    16px seitlich
+Card-Padding:      16-20px
+Border-Radius:     12px (Cards), 8px (Buttons/Inputs), 50% (Avatare)
+Icon-Größe:        16-20px inline, 24px standalone
+Font-Größe:        12px (Labels), 14px (Body), 16-18px (Subtitel), 20-24px (Titel)
+Font-Weight:       400 (normal), 600 (semi-bold), 700 (bold)
+Bottom-Padding:    80px (für Mobile-Navigation)
+```
+
+### Komponenten-Muster
+
+**Titelzeile einer Seite:**
+```jsx
+<div style={{display:'flex',alignItems:'center',
+  justifyContent:'space-between',marginBottom:20}}>
+  <div style={{fontSize:20,fontWeight:700,color:'var(--text1)'}}>
+    Seitentitel
+  </div>
+  <button className="btn btn-primary">Aktion</button>
+</div>
+```
+
+**Ladezustand:**
+```jsx
+if (loading) return (
+  <div style={{display:'flex',justifyContent:'center',padding:40}}>
+    <div className="spinner"/>
+  </div>
+)
+```
+
+**Fehlerzustand:**
+```jsx
+if (error) return (
+  <div style={{color:'var(--danger)',padding:16,textAlign:'center'}}>
+    {error}
+  </div>
+)
+```
+
+**Leerer Zustand:**
+```jsx
+{items.length === 0 && (
+  <div style={{textAlign:'center',padding:40,color:'var(--text3)'}}>
+    <div style={{fontSize:32,marginBottom:8}}>📭</div>
+    <div>Noch keine Einträge</div>
+  </div>
+)}
+```
+
+**Metric Card:**
+```jsx
+<div className="card" style={{padding:16,textAlign:'center'}}>
+  <div style={{fontSize:12,color:'var(--text3)',marginBottom:4}}>LABEL</div>
+  <div style={{fontSize:24,fontWeight:700,color:'var(--accent)'}}>
+    {value}
+  </div>
+  <div style={{fontSize:12,color:'var(--text3)'}}>Einheit</div>
+</div>
+```
+
+### Jinkendo Logo-System
+```
+Grundelement:  Ensō-Kreis (offen, Lücke 4-5 Uhr)
+Farbe Ensō:    #1D9E75
+Hintergrund:   #085041 (dunkelgrün)
+Kern-Symbol:   #5DCAA5 (mintgrün)
+Wortmarke:     Jin(light) + ken(bold #1D9E75) + do(light)
+```
+
+### Verfügbare Custom Commands
+```
+/deploy          → Commit + Push vorbereiten
+/merge-to-prod   → develop → main mergen
+/test            → Manuelle Tests durchführen
+/new-feature     → Neues Feature-Template
+/ui-component    → Neue Komponente erstellen
+/ui-page         → Neue Seite erstellen
+/fix-bug         → Bug analysieren und beheben
+/add-endpoint    → Neuen API-Endpoint hinzufügen
+/db-add-column   → Neue DB-Spalte hinzufügen
+```