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

/* 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).

.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

:root{ --brand:#68bfdd; --brand-ink:#fff; } .btn-primary{ background:var(--brand); color:var(--brand-ink); }

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

.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 & 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 & kontrastreich gestalten.

4. Auf mehreren Geräten testen.

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