# experimenta Button Component

## Beschreibung

Der experimenta-Button ist eine spezielle Button-Variante, die das offizielle experimenta-Design umsetzt. Der Button verfügt über einen animierten Gradient-Effekt beim Hovern, der von Pink (#e6007e) zu Rot (#e40521) wechselt.

## Design-Eigenschaften

- **Farben**: Pink (#e6007e) zu Rot (#e40521) Gradient
- **Border-Radius**: 25px (abgerundete Ecken)
- **Padding**: 10px 30px (Desktop), 8px 24px (Mobile)
- **Font-Size**: 18px (Desktop), 16px (Mobile)
- **Hover-Effekt**: Animierter Gradient, der sich über 1 Sekunde von links nach rechts bewegt
- **Transition**: Smooth transition für alle Eigenschaften (0.3s ease)

## Verwendung

### Als Button

```vue
<UiButtonButton variant="experimenta" size="experimenta" @click="handleClick">
  Button Text
</UiButtonButton>
```

### Als Link

```vue
<UiButtonButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
  Zur experimenta Startseite
</UiButtonButton>
```

### Mit NuxtLink

```vue
<UiButtonButton variant="experimenta" size="experimenta" as="NuxtLink" to="/some-page">
  Interne Seite
</UiButtonButton>
```

## Props

- **variant**: `"experimenta"` (erforderlich für das experimenta-Design)
- **size**: `"experimenta"` (empfohlen für das richtige Padding und die Schriftgröße)
- **as**: `"button"` (Standard) | `"a"` | `"NuxtLink"` - Element-Typ
- **href** / **to**: URL/Route (wenn `as="a"` oder `as="NuxtLink"`)
- **@click**: Event-Handler (wenn `as="button"`)

## Responsive Verhalten

Der Button passt sich automatisch an mobile Geräte an:
- **Desktop**: 18px Schriftgröße, 10px 30px Padding
- **Mobile (≤480px)**: 16px Schriftgröße, 8px 24px Padding

## Beispiel

Live-Beispiel auf der Startseite: `app/pages/index.vue`

## Technische Details

### Implementierung

Die Button-Komponente verwendet:
- `class-variance-authority` (CVA) für Varianten-Management
- `reka-ui` Primitive für Flexibilität
- Custom CSS für den Gradient-Effekt (`assets/css/main.css`)
- CSS Custom Properties für Farben (`--color-pink`, `--color-pink-dark`)

### Dateien

- **Komponente**: `app/components/ui/button/Button.vue`
- **Varianten**: `app/components/ui/button/index.ts`
- **Styles**: `assets/css/main.css` (`.btn-experimenta`)

## CSS-Implementierung

Der Gradient-Effekt wird mit Custom CSS implementiert:

```css
.btn-experimenta {
  background: var(--color-pink);
  background-image: linear-gradient(to left, var(--color-pink), var(--color-pink), var(--color-pink-dark), var(--color-pink));
  background-size: 300%;
  background-position: 0%;
  transition: background-position 1s ease, all 0.3s ease;
  cursor: pointer;
}

.btn-experimenta:hover {
  background-position: 100%;
}
```

## Barrierefreiheit

Der Button unterstützt:
- ✅ Keyboard-Navigation (Tab, Enter, Space)
- ✅ Focus-Styles
- ✅ Screen-Reader (via Primitive-Komponente)
- ✅ Disabled-State