# Stylesheets (Benutzerdefinierte Stile)

Mit **Stylesheets** kannst du eigenes **CSS** einbinden.  
Wichtig: **Stylesheets sind konstant** – einmal geladen, wirken sie **im ganzen Spiel** (alle Szenen). Plane also **global** und arbeite bevorzugt mit **Klassen**, nicht mit generischen Element-Selektoren.

---

## Grundprinzipien

- **Global & dauerhaft**: Regeln gelten szenenübergreifend, bis du sie änderst oder entfernst.
- **Mit Klassen arbeiten**: Viele Features (z. B. 360°-Hotspot) haben ein Feld **„CSS-Klasse“** – dort trägst du Klassen wie `hs-primary` ein und definierst sie hier im Stylesheet.
- **Schonend stylen**: Keine globalen Resets wie `*{ margin:0 }` oder `button{… }`, das kann UI-Elemente der App unerwartet verändern.
- **Spezifität niedrig halten**: Lieber `.hs-primary` als `div .container .hs-primary`. So bleibt es wartbar.

---

## Beispiele

### 1) Eigene Hotspot-/Button-Stile

<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary" id="bkmrk--2"><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">  
</div></div>```
/* im Feature als CSS-Klasse: hs-primary */ .hs-primary{ background: #3faace; color:#fff; border:1px solid rgba(0,0,0,.25); border-radius:10px; padding:.5rem .75rem; box-shadow:0 6px 16px rgba(0,0,0,.15); } .hs-primary:hover{ transform:translateY(-1px); }
```

### 2) Utility-Klassen für Inhalte

Nutze sie in Textblöcken, Dialogen, etc. (wo Klassen gesetzt werden können).

<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary" id="bkmrk--3"><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">  
</div></div>```
.u-shadow { box-shadow:0 8px 24px rgba(0,0,0,.18); } .u-round { border-radius:16px; } .u-muted { opacity:.75 } .u-center { text-align:center } .u-spacious { padding:1rem } 
```

### 3) Farb-Theme per CSS-Variablen

<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary" id="bkmrk--4"><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">  
</div></div>```
:root{ --brand:#68bfdd; --brand-ink:#fff; } .btn-primary{ background:var(--brand); color:var(--brand-ink); }
```

### 4) Sanfte Szene-Einstiegsanimation (klasse auf Container setzen)

<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary" id="bkmrk--5"><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">  
</div></div>```
.scene-fadein{ animation:scnFade .45s ease-out both; } 
@keyframes scnFade{ from{ opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } 
```

---

## Best Practices

- **Scoping**: Wenn möglich, gib Szenen/Features eigene Klassen und style **nur** diese (`.quiz-intro .u-muted`).
- **Kontrast &amp; Lesbarkeit**: Farben so wählen, dass AA-Kontrast (≥ 4.5:1) erreicht wird – besonders bei Buttons/Links.
- **Animationen sparsam**: Kurze, dezente Effekte (≤ 500 ms, `ease-out`).
- **Testen auf Geräten**: Unterschiedliche Displays, Dark-Mode und Zoomstufen durchprobieren.
- **Rollback**: Wenn etwas „zu global“ wirkt, überschreibe gezielt oder entferne die Regel (Stylesheets wirken sofort in allen Szenen).

---

## Mini-Checkliste

1. Klassen in Features vergeben (z. B. **CSS-Klasse** im Hotspot-Editor).
2. Passende Regeln hier definieren (keine globalen Tag-Selektoren).
3. Responsiv &amp; kontrastreich gestalten.
4. Auf mehreren Geräten testen.

So bleibt dein Look konsistent – und trotzdem präzise steuerbar pro Feature/Szene.