Init

2025-10-30 08:24:44 +01:00
commit 6e50ec7034
73 changed files with 27355 additions and 0 deletions
--- a/docs/DESIGN_SYSTEM.md
+++ b/docs/DESIGN_SYSTEM.md
@@ -0,0 +1,923 @@
+# experimenta Design System
+
+**Version:** 1.0
+**Letzte Aktualisierung:** 2025-10-29
+**Font:** Roboto (Open Source Alternative zu DIN OT)
+
+Dieses Design System definiert die visuelle Identität und Komponenten-Bibliothek für **my.experimenta.science**. Es basiert auf dem Corporate Design der experimenta Science Center Website und den bereitgestellten Design-Vorlagen.
+
+---
+
+## Inhaltsverzeichnis
+
+1. [Farbpalette](#farbpalette)
+2. [Typografie](#typografie)
+3. [Spacing & Layout](#spacing--layout)
+4. [Komponenten](#komponenten)
+5. [Animationen & Transitions](#animationen--transitions)
+6. [Accessibility](#accessibility)
+
+---
+
+## Farbpalette
+
+### Primärfarben
+
+**Experimenta Magenta** (Hauptfarbe)
+
+```css
+--color-primary: #e6007e;
+--color-primary-hover: #c2006a;
+--color-primary-light: #ff4081;
+```
+
+**Verwendung:** Primary Buttons, Links, aktive Zustände, Brand-Elemente
+
+**Experimenta Pink**
+
+```css
+--color-secondary: #e91e63;
+--color-secondary-dark: #c2185b;
+```
+
+**Verwendung:** Secondary Buttons, Footer Headings, Social Media Icons
+
+**Experimenta Orange** (Akzent)
+
+```css
+--color-accent: #f59d24;
+--color-accent-hover: #ffb347;
+```
+
+**Verwendung:** Border-Akzente (links), Hover-Effekte, Highlights, Labels
+
+**Experimenta Rot** (Button-Gradient)
+
+```css
+--color-red: #e40521;
+```
+
+**Verwendung:** Button-Gradienten, Error-Zustände (zusammen mit Magenta)
+
+### Background-Farben
+
+**Dark Gradient** (Haupt-Background)
+
+```css
+--bg-gradient-primary: linear-gradient(135deg, #2e1065 0%, #1a0a3a 50%, #0f051d 100%);
+```
+
+**Purple Variants**
+
+```css
+--color-purple-dark: #2e1065; /* Start des Gradienten */
+--color-purple-deeper: #1a0a3a; /* Mitte des Gradienten */
+--color-purple-darkest: #0f051d; /* Ende des Gradienten */
+```
+
+**Header Background**
+
+```css
+--bg-header: rgba(46, 16, 101, 0.95); /* Mit backdrop-filter: blur(10px) */
+```
+
+**Footer Background**
+
+```css
+--bg-footer: linear-gradient(135deg, #1a0a3a 0%, #0f051d 100%);
+```
+
+### Glassmorphism (Cards & Containers)
+
+```css
+--glass-background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+--glass-backdrop: blur(15px);
+--glass-border: 1px solid rgba(255, 255, 255, 0.2);
+--glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+```
+
+**Section Backgrounds (auf Glassmorphism Cards)**
+
+```css
+--bg-section: rgba(255, 255, 255, 0.08); /* Leicht heller als Card */
+--bg-section-hover: rgba(255, 255, 255, 0.15);
+```
+
+### Semantische Farben
+
+**Success**
+
+```css
+--color-success: #46c74a;
+--color-success-dark: #3ba83e;
+--color-success-gradient: linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%);
+```
+
+**Error**
+
+```css
+--color-error: #e53e3e;
+--color-error-dark: #c53030;
+```
+
+**Warning**
+
+```css
+--color-warning: #f59d24;
+--color-warning-dark: #dd8a1e;
+```
+
+**Info**
+
+```css
+--color-info: #4299e1;
+--color-info-dark: #3182ce;
+```
+
+### Text-Farben
+
+```css
+--text-primary: #ffffff; /* Haupt-Text auf dunklem BG */
+--text-secondary: rgba(255, 255, 255, 0.9); /* Sekundär-Text */
+--text-muted: rgba(255, 255, 255, 0.8); /* Footer, Labels */
+--text-disabled: rgba(255, 255, 255, 0.5); /* Disabled Elemente */
+
+/* Text auf hellem Background (falls benötigt) */
+--text-dark: #333333;
+--text-dark-secondary: #666666;
+```
+
+### Border-Farben
+
+```css
+--border-accent: 4px solid #f59d24; /* Links-Border für Sections */
+--border-light: 1px solid rgba(255, 255, 255, 0.2); /* Card Borders */
+--border-footer: 1px solid rgba(255, 255, 255, 0.1); /* Footer Divider */
+```
+
+---
+
+## Typografie
+
+### Font-Family
+
+**Roboto** (Open Source, ähnlich zu DIN OT)
+
+```css
+font-family: 'Roboto', sans-serif;
+```
+
+**Import:**
+
+```html
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+  rel="stylesheet"
+/>
+```
+
+**Gewichte:**
+
+- `300` - Light (Headlines)
+- `400` - Regular (Body Text)
+- `500` - Medium (Buttons, Labels)
+- `700` - Bold (Footer Links, Strong Text)
+
+### Font-Scale (Desktop)
+
+| Element        | Size | Weight | Line Height | Letter Spacing |
+| -------------- | ---- | ------ | ----------- | -------------- |
+| **H1**         | 36px | 300    | 1.2         | -1px           |
+| **H2**         | 30px | 300    | 1.3         | -0.5px         |
+| **H3**         | 24px | 400    | 1.4         | 0              |
+| **H4**         | 20px | 500    | 1.4         | 0              |
+| **H5**         | 18px | 500    | 1.5         | 0.5px          |
+| **H6**         | 16px | 600    | 1.5         | 0.5px          |
+| **Body**       | 18px | 400    | 1.7         | 0              |
+| **Body Small** | 16px | 400    | 1.6         | 0              |
+| **Caption**    | 14px | 400    | 1.6         | 0              |
+| **Tiny**       | 12px | 400    | 1.5         | 0              |
+
+### Responsive Font-Scale
+
+**Tablet (≤768px):**
+
+```css
+H1: 28px
+H2: 24px
+H3: 20px
+Body: 16px
+```
+
+**Mobile (≤480px):**
+
+```css
+H1: 24px
+H2: 20px
+H3: 18px
+Body: 14px
+```
+
+### Tailwind Klassen
+
+```html
+<!-- Headlines -->
+<h1 class="text-4xl md:text-3xl sm:text-2xl font-light tracking-tight">
+  <h2 class="text-3xl md:text-2xl sm:text-xl font-light">
+    <h3 class="text-2xl md:text-xl sm:text-lg font-normal">
+      <!-- Body Text -->
+      <p class="text-lg md:text-base sm:text-sm leading-relaxed">
+        <!-- Labels -->
+        <span class="text-lg md:text-base sm:text-sm font-medium tracking-wide"></span>
+      </p>
+    </h3>
+  </h2>
+</h1>
+```
+
+---
+
+## Spacing & Layout
+
+### Spacing-System (8px Grid)
+
+```css
+--space-1: 4px;
+--space-2: 8px;
+--space-3: 12px;
+--space-4: 16px;
+--space-5: 20px;
+--space-6: 24px;
+--space-8: 30px;
+--space-10: 40px;
+--space-15: 60px;
+--space-20: 80px;
+```
+
+### Container Max-Widths
+
+```css
+--container-main: 800px; /* Main Content (forms, text) */
+--container-wide: 1200px; /* Footer, wide sections */
+--container-full: 1760px; /* Full-width content (aus Website) */
+```
+
+### Border-Radius
+
+```css
+--radius-sm: 6px; /* Small elements (badges) */
+--radius-md: 12px; /* Sections, Info-Cards */
+--radius-lg: 15px; /* Standard Cards (mobile) */
+--radius-xl: 20px; /* Standard Cards (desktop) */
+--radius-2xl: 25px; /* Buttons */
+--radius-full: 100%; /* Icons, Avatar */
+```
+
+### Breakpoints
+
+```css
+/* Mobile First */
+--breakpoint-sm: 480px; /* Small phones */
+--breakpoint-md: 768px; /* Tablets */
+--breakpoint-lg: 1024px; /* Small desktops */
+--breakpoint-xl: 1280px; /* Large desktops */
+```
+
+**Verwendung in Tailwind:**
+
+```html
+<!-- Mobile First: base = mobile, md = tablet, lg = desktop -->
+<div class="p-4 md:p-8 lg:p-15"></div>
+```
+
+### Standard Paddings
+
+**Cards:**
+
+```css
+/* Desktop */
+padding: 60px 40px;
+
+/* Tablet */
+@media (max-width: 768px) {
+  padding: 40px 20px;
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  padding: 30px 15px;
+}
+```
+
+**Sections:**
+
+```css
+padding: 30px;
+
+/* Tablet */
+@media (max-width: 768px) {
+  padding: 25px 20px;
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  padding: 20px 15px;
+}
+```
+
+---
+
+## Komponenten
+
+### 1. Buttons
+
+#### Primary Button
+
+**Style:**
+
+```css
+background: #e6007e;
+background-image: linear-gradient(to left, #e6007e, #e6007e, #e40521, #e6007e);
+background-size: 300%;
+color: #ffffff;
+padding: 10px 30px;
+border-radius: 25px;
+font-size: 18px;
+font-weight: 500;
+transition:
+  background-position 1s,
+  all 0.3s ease;
+
+/* Hover */
+background-position: 100%;
+```
+
+**Tailwind:**
+
+```html
+<button class="btn-primary">Zur experimenta Startseite</button>
+```
+
+**CSS Klasse (Tailwind Config):**
+
+```css
+.btn-primary {
+  @apply bg-gradient-to-l from-primary via-red to-primary;
+  @apply bg-[length:300%] bg-left;
+  @apply text-white px-8 py-2.5 rounded-full;
+  @apply text-lg font-medium;
+  @apply transition-all duration-300;
+  @apply hover:bg-right;
+}
+```
+
+#### Secondary Button
+
+```html
+<button class="btn-secondary">Abbrechen</button>
+```
+
+```css
+.btn-secondary {
+  @apply bg-transparent border-2 border-accent text-accent;
+  @apply px-8 py-2.5 rounded-full;
+  @apply text-lg font-medium;
+  @apply transition-all duration-300;
+  @apply hover:bg-accent hover:text-white;
+}
+```
+
+#### Button Sizes
+
+```html
+<!-- Large (default) -->
+<button class="btn-primary text-lg px-8 py-2.5">
+  <!-- Medium -->
+  <button class="btn-primary text-base px-6 py-2">
+    <!-- Small (mobile) -->
+    <button class="btn-primary text-base px-6 py-2 md:px-8 md:py-2.5"></button>
+  </button>
+</button>
+```
+
+---
+
+### 2. Cards
+
+#### Glass-morphism Card (Main Pattern)
+
+**Style:**
+
+```css
+background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+backdrop-filter: blur(15px);
+border-radius: 20px;
+border: 1px solid rgba(255, 255, 255, 0.2);
+box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+padding: 60px 40px;
+```
+
+**Tailwind:**
+
+```html
+<div class="card-glass">
+  <!-- Content -->
+</div>
+```
+
+**CSS Klasse:**
+
+```css
+.card-glass {
+  @apply bg-gradient-to-br from-white/10 to-white/5;
+  @apply backdrop-blur-xl;
+  @apply rounded-2xl border border-white/20;
+  @apply shadow-2xl;
+  @apply p-15 md:p-10 sm:p-8;
+}
+```
+
+#### Info Section Card
+
+**Style:**
+
+```css
+background: rgba(255, 255, 255, 0.08);
+border-radius: 12px;
+padding: 30px;
+border-left: 4px solid #f59d24;
+```
+
+**Tailwind:**
+
+```html
+<div class="card-info">
+  <h3 class="text-accent font-medium mb-4">Überschrift</h3>
+  <p class="text-white/90">Inhalt...</p>
+</div>
+```
+
+**CSS Klasse:**
+
+```css
+.card-info {
+  @apply bg-white/8 rounded-xl;
+  @apply p-8 md:p-6 sm:p-5;
+  @apply border-l-4 border-accent;
+}
+```
+
+---
+
+### 3. Status Messages
+
+#### Success Message
+
+```html
+<div class="status-message status-success">
+  <div class="status-icon">✓</div>
+  <h1>Verlängerung erfolgreich!</h1>
+  <p>Ihre Jahreskarte wurde verlängert.</p>
+</div>
+```
+
+**CSS:**
+
+```css
+.status-icon {
+  @apply flex items-center justify-center;
+  @apply w-25 h-25 rounded-full;
+  @apply text-6xl text-white;
+  @apply mb-8;
+  @apply animate-pulse;
+}
+
+.status-success .status-icon {
+  @apply bg-success;
+}
+```
+
+#### Error Message
+
+```html
+<div class="status-message status-error">
+  <div class="status-icon">✖</div>
+  <h1>Ein Fehler ist aufgetreten</h1>
+  <p>Bitte versuchen Sie es erneut.</p>
+</div>
+```
+
+```css
+.status-error .status-icon {
+  @apply bg-error;
+}
+```
+
+---
+
+### 4. Progress Bar
+
+```html
+<div class="progress-container">
+  <div class="progress-header">
+    <h3 class="progress-title">Verlängerungsfortschritt</h3>
+    <div class="progress-stats">5 / 10</div>
+  </div>
+
+  <div class="progress-bar-wrapper">
+    <div class="progress-bar" style="width: 50%"></div>
+    <div class="progress-percentage">50%</div>
+  </div>
+</div>
+```
+
+**CSS:**
+
+```css
+.progress-container {
+  @apply bg-white/8 rounded-2xl;
+  @apply p-8 md:p-6;
+  @apply border-l-4 border-accent;
+}
+
+.progress-bar-wrapper {
+  @apply relative w-full h-8;
+  @apply bg-white/10 rounded-full;
+  @apply overflow-hidden;
+  @apply shadow-inner;
+}
+
+.progress-bar {
+  @apply h-full rounded-full;
+  @apply bg-gradient-to-r from-success via-[#66d96a] to-success;
+  @apply bg-[length:200%] animate-shimmer;
+  @apply transition-all duration-500;
+}
+
+.progress-percentage {
+  @apply absolute inset-0;
+  @apply flex items-center justify-center;
+  @apply text-base font-semibold text-white;
+  @apply drop-shadow-lg;
+}
+```
+
+---
+
+### 5. Forms
+
+#### Input Field
+
+```html
+<div class="form-field">
+  <label for="email" class="form-label">E-Mail-Adresse</label>
+  <input type="email" id="email" class="form-input" placeholder="ihre.email@example.com" />
+</div>
+```
+
+**CSS:**
+
+```css
+.form-label {
+  @apply block text-lg font-medium text-white/90;
+  @apply mb-3;
+}
+
+.form-input {
+  @apply w-full px-4 py-3;
+  @apply bg-white/10 border border-white/20;
+  @apply rounded-xl;
+  @apply text-white placeholder:text-white/50;
+  @apply focus:outline-none focus:ring-2 focus:ring-accent;
+  @apply transition-all duration-300;
+}
+
+.form-input:hover {
+  @apply bg-white/15;
+}
+```
+
+#### Checkbox
+
+```html
+<label class="form-checkbox">
+  <input type="checkbox" class="checkbox-input" />
+  <span class="checkbox-label">Adresse für zukünftige Bestellungen speichern</span>
+</label>
+```
+
+**CSS:**
+
+```css
+.form-checkbox {
+  @apply flex items-start gap-3 cursor-pointer;
+}
+
+.checkbox-input {
+  @apply w-5 h-5 mt-0.5;
+  @apply rounded border-2 border-white/30;
+  @apply bg-white/10;
+  @apply checked:bg-accent checked:border-accent;
+  @apply focus:ring-2 focus:ring-accent;
+  @apply cursor-pointer;
+}
+
+.checkbox-label {
+  @apply text-base text-white/90;
+}
+```
+
+---
+
+### 6. Links
+
+```html
+<a href="#" class="link-primary">Mehr erfahren</a> <a href="#" class="link-accent">Hier klicken</a>
+```
+
+**CSS:**
+
+```css
+.link-primary {
+  @apply text-primary underline;
+  @apply font-medium;
+  @apply transition-colors duration-300;
+  @apply hover:text-primary-light;
+}
+
+.link-accent {
+  @apply text-accent underline;
+  @apply font-medium;
+  @apply transition-colors duration-300;
+  @apply hover:text-accent-hover;
+}
+```
+
+---
+
+### 7. Logo
+
+**SVG Logo** (Experimenta X-Logo)
+
+Wird in den Design-Vorlagen verwendet. Sollte als Vue-Komponente gespeichert werden:
+
+```vue
+<!-- components/ExperimentaLogo.vue -->
+<template>
+  <svg
+    class="logo"
+    viewBox="0 0 382.94 87.17"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <!-- SVG paths from design examples -->
+  </svg>
+</template>
+
+<style scoped>
+.logo {
+  width: 300px;
+  height: auto;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+}
+
+/* Tablet */
+@media (max-width: 768px) {
+  .logo {
+    width: 250px;
+  }
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  .logo {
+    width: 200px;
+  }
+}
+</style>
+```
+
+---
+
+## Animationen & Transitions
+
+### Pulse (für Status Icons)
+
+```css
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+```
+
+### Shimmer (für Progress Bars)
+
+```css
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 3s ease-in-out infinite;
+}
+```
+
+### Button Gradient Animation
+
+```css
+.btn-primary {
+  background-size: 300%;
+  background-position: left;
+  transition:
+    background-position 1s ease,
+    all 0.3s ease;
+}
+
+.btn-primary:hover {
+  background-position: right;
+}
+```
+
+### Hover Transitions
+
+```css
+/* Standard Hover */
+.hover-scale {
+  @apply transition-transform duration-300;
+  @apply hover:scale-105;
+}
+
+/* Logo Hover */
+.logo:hover {
+  transform: scale(1.05);
+  transition: all 0.3s ease;
+}
+
+/* Social Links Hover */
+.social-link:hover {
+  transform: translateY(-3px);
+  transition: all 0.3s ease;
+}
+```
+
+---
+
+## Accessibility
+
+### Farb-Kontraste
+
+Alle Text-Farben wurden auf **WCAG AA Standard** getestet:
+
+- **Weiß auf Dark Purple**: ✅ AAA (Kontrast > 7:1)
+- **Magenta Buttons**: ✅ AA (Kontrast > 4.5:1)
+- **Orange Akzente**: ✅ AA (Kontrast > 4.5:1)
+
+### Focus States
+
+```css
+/* Alle interaktiven Elemente */
+.focus-visible {
+  @apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-purple-darkest;
+}
+```
+
+### Screen Reader Support
+
+```html
+<!-- Buttons -->
+<button aria-label="Zur experimenta Startseite zurückkehren">Zurück</button>
+
+<!-- Status Messages -->
+<div role="alert" aria-live="polite">
+  <p>Ihre Jahreskarte wurde erfolgreich verlängert.</p>
+</div>
+```
+
+### Keyboard Navigation
+
+- **Tab-Reihenfolge**: Logisch von oben nach unten
+- **Focus Indicators**: Sichtbarer Fokus-Ring auf allen interaktiven Elementen
+- **Skip Links**: "Zum Hauptinhalt springen" Link am Anfang
+
+---
+
+## Verwendung in Nuxt 4
+
+### 1. Tailwind Config importieren
+
+Siehe `tailwind.config.ts` für die vollständige Theme-Konfiguration.
+
+### 2. Komponenten verwenden
+
+```vue
+<template>
+  <div class="card-glass">
+    <div class="status-icon bg-success">✓</div>
+    <h1 class="text-4xl md:text-3xl sm:text-2xl font-light tracking-tight mb-8">Erfolgreich!</h1>
+    <p class="text-lg md:text-base leading-relaxed text-white/90">Ihre Aktion war erfolgreich.</p>
+
+    <button class="btn-primary mt-8">Weiter</button>
+  </div>
+</template>
+```
+
+### 3. shadcn-nuxt Komponenten anpassen
+
+Die shadcn-nuxt Komponenten können mit den experimenta-Farben überschrieben werden:
+
+```vue
+<!-- components/ui/button/Button.vue -->
+<Button class="btn-primary">Click me</Button>
+```
+
+---
+
+## Beispiel: Complete Page Layout
+
+```vue
+<template>
+  <div class="min-h-screen bg-gradient-primary">
+    <!-- Header -->
+    <header class="bg-header backdrop-blur-lg sticky top-0 z-50 py-8">
+      <div class="container-wide mx-auto px-5">
+        <ExperimentaLogo />
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="container-main mx-auto px-5 py-10">
+      <div class="card-glass">
+        <!-- Success Icon -->
+        <div class="status-icon bg-success">✓</div>
+
+        <!-- Headline -->
+        <h1 class="text-4xl md:text-3xl sm:text-2xl font-light tracking-tight mb-8">
+          Verlängerung erfolgreich!
+        </h1>
+
+        <!-- Body Text -->
+        <p class="text-lg md:text-base leading-relaxed text-white/90 mb-6">
+          Ihre Pädagogische Jahreskarte wurde erfolgreich verlängert.
+        </p>
+
+        <!-- Info Section -->
+        <div class="card-info mt-8">
+          <h3 class="text-accent font-medium text-lg mb-4">Ihre Vorteile</h3>
+          <p class="text-white/90">
+            Mit der Jahreskarte erhalten Sie ein Jahr lang freien Eintritt...
+          </p>
+        </div>
+
+        <!-- Button -->
+        <button class="btn-primary mt-8">Zur experimenta Startseite</button>
+      </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-footer mt-20">
+      <div class="container-wide mx-auto px-5 py-15">
+        <div
+          class="border-t border-white/10 pt-8 flex flex-wrap justify-between items-center gap-5"
+        >
+          <p class="text-white/80">
+            © 2025 experimenta gGmbH – Das Science Center. Alle Rechte vorbehalten.
+          </p>
+          <div class="flex gap-8">
+            <a href="#" class="link-primary">Kontakt</a>
+            <a href="#" class="link-primary">Impressum</a>
+            <a href="#" class="link-primary">Datenschutz</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+```
+
+---
+
+## Weiterführende Ressourcen
+
+- **Roboto Font:** [Google Fonts](https://fonts.google.com/specimen/Roboto)
+- **Tailwind CSS v4:** [Tailwind Docs](https://tailwindcss.com/docs)
+- **shadcn-nuxt:** [shadcn-nuxt Docs](https://www.shadcn-vue.com/docs/installation/nuxt.html)
+- **WCAG Accessibility:** [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+
+---
+
+**Maintainer:** Experimenta Team
+**Fragen?** → `docs@experimenta.science`