# UI Component

Erstelle eine neue React-Komponente im Mitai Jinkendo Design-System.

## Design-Regeln:
- Hintergrund: `var(--bg)` oder `var(--surface)`
- Akzentfarbe: `var(--accent)` = #1D9E75
- Text: `var(--text1)` (primary), `var(--text2)` (secondary), `var(--text3)` (muted)
- Border: `var(--border)`
- Border-Radius: 12px für Cards, 8px für Buttons/Inputs
- Kein TypeScript – reines JavaScript/JSX
- Inline-Styles bevorzugt, keine externen CSS-Dateien
- Keine neuen npm-Pakete ohne Absprache

## Komponenten-Struktur:
```jsx
function MeineKomponente({ prop1, prop2 }) {
  const [state, setState] = useState(null)
  
  return (
    <div className="card" style={{padding:16}}>
      ...
    </div>
  )
}
```

## Vorhandene CSS-Klassen:
- `.card` – weißer Container mit Schatten
- `.btn .btn-primary` – grüner Button
- `.btn .btn-secondary` – grauer Button  
- `.btn-full` – volle Breite
- `.form-input` – Eingabefeld
- `.form-label` – Label
- `.form-row` – Label + Input + Unit nebeneinander
- `.section-gap` – vertikaler Abstand
- `.spinner` – Ladeindikator

## API-Calls:
- Immer über `import { api } from '../utils/api'`
- Nie direktes `fetch()` verwenden
- Token wird automatisch injiziert