# PowerOn CSS Architektur

## Datei-Struktur

Die CSS-Dateien sind in drei Ebenen organisiert:

### 1. `styles_variables.css` (Grundlage)
- **Zweck**: Zentrale Definition aller CSS-Variablen und Design-Tokens
- **Enthält**: Farben, Spacing, Border-Radius, Shadows, etc.
- **Wird geladen**: Als erste CSS-Datei

### 2. `styles_base.css` (Basis-Komponenten)
- **Zweck**: Zentrale Definition aller wiederkehrenden Basis-Styles
- **Enthält**:
  - Typography (h1-h6, section-header)
  - Button-Varianten (primary, secondary, danger, outline, icon, etc.) mit allen States (hover, active, disabled)
  - Input-Felder (text, number, email, password, etc.) mit focus/disabled states
  - Cards (card, card-header, card-body, card-footer)
  - Labels und Form-Groups
  - Links, Lists, Badges
  - Utility Classes
- **Wird geladen**: Nach `styles_variables.css`

### 3. Spezifische Styles-Dateien
- `styles.css`: Layout, Authentication, spezifische Overrides
- `styles_navigation.css`: Navigation und Sidebar
- `styles_form.css`: Entity-Forms, Tabellen, Modals
- `styles_workflow_*.css`: Workflow-spezifische Styles
- `styles_icons.css`: Icon-Styles

## Verwendung

### Button verwenden

```html
<!-- Primary Button (Standard) -->
<button class="btn">Klick mich</button>
<!-- oder -->
<button class="btn-primary">Klick mich</button>

<!-- Secondary Button -->
<button class="btn-secondary">Sekundär</button>

<!-- Danger/Alert Button -->
<button class="btn-danger">Löschen</button>

<!-- Outline Buttons -->
<button class="btn-outline">Outline</button>
<button class="btn-outline-secondary">Outline Secondary</button>

<!-- Icon Button -->
<button class="btn-icon"><i class="fas fa-trash"></i></button>
```

### Input-Felder verwenden

```html
<!-- Standard Input - nutzt automatisch Basis-Styles -->
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<textarea></textarea>
<select></select>

<!-- Mit Label -->
<label>Name</label>
<input type="text">
```

### Cards verwenden

```html
<div class="card">
  <div class="card-header">
    <h3>Titel</h3>
  </div>
  <div class="card-body">
    Inhalt
  </div>
  <div class="card-footer">
    <button class="btn">Aktion</button>
  </div>
</div>
```

## Button States

Alle Buttons haben automatisch:
- **:hover** - Hover-Effekt
- **:active** - Active-State mit leichter Translation
- **:disabled** - Disabled-State mit reduzierter Opacity
- **:focus** - Focus-State (bei Tastaturnavigation)

## Anpassungen

### Neue Button-Variante erstellen

```css
/* In der spezifischen CSS-Datei */
.my-custom-btn {
  /* Nutzt Basis-Styles von .btn */
  background-color: var(--color-custom);
  /* Weitere Anpassungen */
}
```

### Spezifisches Override

```css
/* In der spezifischen CSS-Datei */
.login-btn {
  /* Override nur was nötig ist */
  width: 100%;
  font-size: 1rem;
  /* Rest nutzt Basis-Styles */
}
```

## Vorteile

1. **Konsistenz**: Alle Komponenten nutzen dieselben Basis-Styles
2. **Wartbarkeit**: Änderungen nur an einer Stelle
3. **Schlankheit**: Spezifische CSS-Dateien enthalten nur wirklich spezifische Styles
4. **Wiederverwendbarkeit**: Basis-Komponenten können überall verwendet werden
5. **Performance**: Reduzierte CSS-Größe durch zentrale Definitionen