Style-Guide (Admin)

Style-Guide

Verbindliche Stil-Referenz für alle GeoGraSim-Module. Klick auf Farbfelder oder „Kopieren" überträgt den Wert in die Zwischenablage. Diese Seite ist die Single-Source-of-Truth — wenn du etwas änderst, musst du es hier auch aktualisieren.

Offizieller Prompt-Block

Verbatim verwenden, NICHT umformulieren. Bei jedem Bild diesen Block voranstellen, danach nur den Szenen-Teil ergänzen.

Flat Scandinavian illustration, wide panoramic landscape filling the entire 16:9 frame edge-to-edge, painted style with clean vector shapes, dark forest green (#1f4b37) and sage green (#4a7c4e) tones, yellow-mustard (#e8c547) accents, beige (#e8e4d8) buildings and valleys, white highlights. No text, no watermark, no logos, no borders, no frame.

Eckdaten

Tabu

keine Schrift im Bild keine Logos keine Wasserzeichen keine Rahmen / Borders

Single-Source-of-Truth

Lauffähiger Referenz-Generator: App/sims/logistik/scripts/generate-splash-images.sh (Variable PROMPT_BASE). Bei Pipeline-Fragen dort als Vorlage abschauen.

Why

Konsistenz über alle Module. Die Sims stehen auf der Schülerseite nebeneinander; wenn ein Modul aus dem Stil ausbricht, fällt es sofort auf. Gilt nicht nur für Splashes, sondern auch für Spielfeld-Hintergründe, Sprites, Marker-Icons, Bewertungs-Visuals.

Klick auf eine Karte kopiert den Hex-Wert.

Diese Tokens nutzen alle Plattform-UIs (Cockpits, Admin, Wrapper, Modale). In Sims als var(--ggs-fjord) referenzieren.

Akzent (Fjord)

Erfolg (Moss)

Warnung & Fehler

Neutral & Sand

Text

Komplette CSS-Variable als Block

--ggs-fjord:        #4a7c8a;
--ggs-fjord-dark:   #1f4e5a;
--ggs-fjord-light:  #dae8ec;
--ggs-moss:         #5a8a5e;
--ggs-moss-dark:    #3a6b3e;
--ggs-moss-light:   #dcead0;
--ggs-sand:         #e8d5b5;
--ggs-sand-dark:    #c4a97a;
--ggs-coral:        #c85c4a;
--ggs-coral-light:  #f0d0ca;
--ggs-orange:       #e8833a;
--ggs-bg:           #f5f2eb;
--ggs-bg-dark:      #e8e4d8;
--ggs-white:        #ffffff;
--ggs-text:         #2a2a2a;
--ggs-text-muted:   #8a8a8a;
--ggs-text-light:   #b0b0b0;
--ggs-border:       #e0ddd4;
--ggs-success:      #5a8a5e;
--ggs-warning:      #e8833a;
--ggs-danger:       #c85c4a;
--ggs-info:         #4a7c8a;

EINE Skala für Schülerleistung überall im Programm: Prozentwert (0–100) + dünner Balken in der Ampelfarbe. Sterne entfallen. Die Grenzen 50 / 80 / 90 sind zugleich die Triage-Grenzen (ab 90 % „Fordern", ab 80 % „Läuft gut", ab 50 % „Begleiten", darunter „Fördern"), damit Balkenfarbe und Feld immer übereinstimmen. Quelle in Code: pctColor() = _tagTraffic().

Triage-Felder (aus % × Fleiß)

< 50 % → Fördern (Hilfe) · 50–79 % → Begleiten · 80–89 % → Läuft gut · ≥ 90 % → Fordern (mehr herausfordern) — jeweils nur, wenn aktiv gearbeitet wurde, sonst „inaktiv".

CSS-Variablen

--ggs-perf-5: #1f7a3d;  /* ≥ 90 %  sehr gut  */
--ggs-perf-4: #7cb342;  /* 80–89 % gut       */
--ggs-perf-3: #f9c33b;  /* 60–79 % solide    */
--ggs-perf-2: #ef8b2c;  /* 50–59 % wackelig  */
--ggs-perf-1: #d8453a;  /* < 50 %  kritisch  */
/* Triage */
--ggs-triage-foerdern:  #b04a3e;
--ggs-triage-begleiten: #9a6a12;
--ggs-triage-gut:       #3a6b3e;
--ggs-triage-inaktiv:   #8a8a8a;

Vorschau der Zuordnung je Sim: Lehrer-View Parameter-Überblick.

Standard-Kopfzeile für ALLE Sims: Kreis-Logo · Titel · Level als eine schwebende Pille — Home und rechts die Steuerung: Tempo (nur Echtzeit-Sims) · Musik · Ton · Neustart · Hilfe · Glossar (target="_blank"). Eigene Icons im App-Stil statt Emojis, alle Elemente auf gleicher Höhe. Lehrplan entfällt. Musik überall (Klima-Track als Platzhalter).

Die Stufen hinter der Zeile deuten den Sim-Inhalt an — so sieht man, wie wenig die schwebende Zeile verdeckt. Logo, Titel und Level sitzen in einer Pille auf gleicher Höhe wie die Buttons.

📱 iPad-Landscape (~1024 px)

SIM-INHALT

KlimawächterLevel 2

🖥️ Full-HD PC (1920 px — mehr Platz zwischen den Elementen)

SIM-INHALT

KlimawächterLevel 2

Klick öffnet das Tempo-Panel und lässt es offen bis zum erneuten Klick (Toggle) — genauso beim Musik-Player. Der Button selbst zeigt jederzeit den Speed: 1×, 2×, 8× Auto (z. B. Logistik) oder ⏸ Pause. So bleibt der Zustand sichtbar, ohne dass das Panel offen bleiben muss.

Größenrichtlinien

• 0.62 rem — Card-Header (uppercase, letter-spacing .05em)
• 0.7 rem — Hilfstexte, Subtitles
• 0.78 rem — Body-Text in Karten
• 0.85 rem — Modul-Namen, Tabs
• 0.95 rem — H3 / Section-Titel
• 1.15 rem — H2 / Page-Titel

Avatar-Slugs (30 Stück, 3 Gruppen)

• Geo-Welt: pilotin · pilot · kartografin · geologe · meteorologin · stadtplaner · forscherin · forscher · taucherin · astronaut
• Cool & lustig: coole-girl · coole-boy · lustige-girl · lustige-boy · nerd-girl · sportlich-boy · kuenstlerin · musiker · gaertnerin · abenteurer
• Tier-Begleiter: fuchs-explorer · eule-prof · baer-foerster · pinguin-polar · affe-tropen · delfin-meer · adler-pilot · schildkroete-w · katze-stadt · biene-natur

• Touch-Ziele ≥ 36 px Höhe, idealerweise 44 px für primäre Aktionen
• Kein Hover-Kleber — alle Interaktionen müssen ohne Hover funktionieren
• Modale nutzen height: 100dvh + safe-area-inset-bottom
• Sticky Aktions-Buttons unten im Modal — nicht außerhalb scrollen lassen
• Float-✕ oben rechts bei Modalen, damit „Schließen" immer erreichbar ist
• Layout breit statt hoch — Badges horizontal, 2-Spalten-Grids wo möglich
• viewport-fit=cover + 100dvh für Vollbild-Sims

Niemals „spielen / Spiel / Spieler*in" verwenden. GeoGraSim ist Lernarbeit nach Wygotski, kein Spiel.

Ausnahme: in Code-Variablen (state.gameOver, player_progress) ist „game/player" als technischer Begriff unkritisch — Hauptsache an der UI nicht sichtbar.