Abzeichen: thematische Sim-Abzeichen + saubere Icons + Lehreransicht

- badges.js: 5 Basis-Abzeichen + je Sim 1 thematisches (Vier-Jahreszeiten,
  Sterne-Koch, Alpen-Pilot …), 19 sauber generierte Flat-Emblem-Icons (keine Emojis)
- Erfolge-Tab: Sammlung mit Bild-Icons, gesperrte grau = Ziele; alte Emoji-Badges raus
- Lehrer-Matrix: neue Spalte „Abzeichen" (freigeschaltet von gesamt) pro Schüler:in

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

App/assets/js/badges.js

@@ -1,44 +1,63 @@
 /* ============================================================================
  * GeoGraSim — gemeinsame Abzeichen-Bibliothek
  * ----------------------------------------------------------------------------
- * Ein einheitliches Set von 5 Abzeichen pro Simulation, dessen Freischalt-
- * Bedingungen sich aus den ALLGEMEINEN Leistungsdaten (plays, best_stars,
- * level) berechnen. Dadurch gelten die Abzeichen SOFORT für JEDE Sim — auch
- * für die ohne eigenen Achievement-Code — und sind über alle Sims vergleichbar.
+ * Zwei Ebenen, für alle Sims einheitlich strukturiert:
+ *  1) BASIS — 5 Abzeichen, in jeder Sim identisch, Bedingung aus allgemeinen
+ *     Leistungsdaten (plays / best_stars / level) → gelten sofort für JEDE Sim.
+ *  2) THEMATISCH — je Sim ein eigenes, thematisch benanntes Abzeichen.
  *
- * Abzeichen sind bewusst auch im GESPERRTEN Zustand sichtbar (Zielvorstellung),
- * die Beschreibung ist zugleich das Ziel. Sterne laufen parallel (Qualität pro
- * Durchlauf); ggsErfolgToStars() bildet den normierten Erfolg (0–100) auf
- * 0–5 Sterne ab.
+ * Icons sind sauber generierte Emblems (Flat-Scandinavian, keine Emojis) unter
+ * assets/img/badges/. Gesperrte Abzeichen bleiben sichtbar (Zielvorstellung),
+ * die Beschreibung ist das Ziel. Sterne laufen parallel; ggsErfolgToStars()
+ * bildet den normierten Erfolg (0–100) auf 0–5 Sterne ab.
  *
- * Verwendung (Client):
- *   GGS_BADGES.forEach(b => { var earned = b.cond(progressObj); ... });
- *   progressObj = { plays, best_stars, level }  (pro Sim)
+ * progressObj (pro Sim): { plays, best_stars, level }
  * ==========================================================================*/
 (function (root) {
   'use strict';
+  var IMG = 'assets/img/badges/';
 
-  // Fünf Abzeichen-Typen, für alle Sims identisch. cond(p) wird pro Sim geprüft.
+  // 1) BASIS — 5 Abzeichen, überall gleich.
   var GGS_BADGES = [
-    { id: 'einstieg',       icon: '🌱', name: 'Einstieg',
-      desc: 'Ersten Durchlauf geschafft',
-      cond: function (p) { return (p && p.plays || 0) >= 1; } },
-    { id: 'fortgeschritten', icon: '📈', name: 'Fortgeschritten',
-      desc: 'Level 2 erreicht',
-      cond: function (p) { return (p && p.level || 1) >= 2; } },
-    { id: 'koenner',        icon: '⭐', name: 'Könner',
-      desc: 'Vier Sterne geschafft',
-      cond: function (p) { return (p && p.best_stars || 0) >= 4; } },
-    { id: 'meister',        icon: '🏆', name: 'Meister',
-      desc: 'Fünf Sterne — Bestleistung',
-      cond: function (p) { return (p && p.best_stars || 0) >= 5; } },
-    { id: 'ausdauer',       icon: '🔥', name: 'Ausdauer',
-      desc: 'Acht Durchläufe',
-      cond: function (p) { return (p && p.plays || 0) >= 8; } }
+    { id: 'einstieg',        icon: IMG + 'bg-einstieg.webp',        name: 'Einstieg',
+      desc: 'Ersten Durchlauf geschafft',  cond: function (p) { return (p && p.plays || 0) >= 1; } },
+    { id: 'fortgeschritten', icon: IMG + 'bg-fortgeschritten.webp', name: 'Fortgeschritten',
+      desc: 'Level 2 erreicht',             cond: function (p) { return (p && p.level || 1) >= 2; } },
+    { id: 'koenner',         icon: IMG + 'bg-koenner.webp',         name: 'Könner',
+      desc: 'Vier Sterne geschafft',        cond: function (p) { return (p && p.best_stars || 0) >= 4; } },
+    { id: 'meister',         icon: IMG + 'bg-meister.webp',         name: 'Meister',
+      desc: 'Fünf Sterne — Bestleistung',   cond: function (p) { return (p && p.best_stars || 0) >= 5; } },
+    { id: 'ausdauer',        icon: IMG + 'bg-ausdauer.webp',        name: 'Ausdauer',
+      desc: 'Acht Durchläufe',              cond: function (p) { return (p && p.plays || 0) >= 8; } }
   ];
 
+  // Bedingungs-Bausteine für thematische Abzeichen
+  function lvl3(p)     { return (p && p.level || 1) >= 3; }
+  function star5(p)    { return (p && p.best_stars || 0) >= 5; }
+  function played6(p)  { return (p && p.plays || 0) >= 6; }
+  function b(sim, name, desc, cond) {
+    return { id: 'th-' + sim, icon: IMG + 'th-' + sim + '.webp', name: name, desc: desc, cond: cond, thematic: true };
+  }
+
+  // 2) THEMATISCH — je Sim ein eigenes Abzeichen (Name/Icon sim-spezifisch).
+  var GGS_SIM_BADGES = {
+    'tourismustal':    b('tourismustal',    'Vier-Jahreszeiten', 'Level 3 im Tourismustal',        lvl3),
+    'tourismusregion': b('tourismusregion', 'Regionen-Meister',  'Fünf Sterne in der Region',      star5),
+    'kofferdetektiv':  b('kofferdetektiv',  'Welt-Detektiv',     'Sechs Fälle gelöst',             played6),
+    'busfahrt':        b('busfahrt',        'Europa-Kenner',     'Fünf Sterne auf der Tour',       star5),
+    'logistik':        b('logistik',        'Lieferketten-Profi','Level 3 in der Logistik',        lvl3),
+    'weltkueche':      b('weltkueche',      'Sterne-Koch',       'Fünf Sterne in der Weltküche',   star5),
+    'farmer':          b('farmer',          'Ernte-Meister',     'Sechs Ernten eingefahren',       played6),
+    'klima':           b('klima',           '1,5-Grad-Held',     'Fünf Sterne im Klimaschutz',     star5),
+    'klima-3d':        b('klima-3d',        'Küstenwächter',     'Level 3 im Küstenschutz',        lvl3),
+    'fluss':           b('fluss',           'Renaturierer',      'Fünf Sterne am Fluss',           star5),
+    'energiemanager':  b('energiemanager',  'Grundlast-Profi',   'Level 3 im Energienetz',         lvl3),
+    'heli':            b('heli',            'Alpen-Pilot',       'Sechs Einsätze geflogen',        played6),
+    'sonnensystem':    b('sonnensystem',    'Astronom',          'Fünf Sterne am Himmel',          star5),
+    'eu-werkstatt':    b('eu-werkstatt',    'Gesetzgeber:in',    'Level 3 in der EU-Werkstatt',    lvl3)
+  };
+
   // Spielbare Simulationen (aktiv/beta) — Reihenfolge wie im Schulbuch.
-  // Auch ungespielte erscheinen in der Sammlung: alle 5 Abzeichen gesperrt = Ziel.
   var GGS_SIMS = [
     { id: 'tourismustal',    title: 'Tourismustal',    icon: '🏔️' },
     { id: 'tourismusregion', title: 'Tourismusregion', icon: '🗺️' },
@@ -56,21 +75,26 @@
     { id: 'eu-werkstatt',    title: 'EU-Werkstatt',    icon: '🏛️' }
   ];
 
-  // Normierter Erfolg (0–100) → 0–5 Sterne. Ein Rechenweg für alle Sims.
+  // Alle Abzeichen einer Sim = 5 Basis + (falls vorhanden) 1 thematisches.
+  function ggsSimBadges(simId) {
+    var out = GGS_BADGES.slice();
+    if (GGS_SIM_BADGES[simId]) out.push(GGS_SIM_BADGES[simId]);
+    return out;
+  }
+  function ggsBadgeCount(p, simId) {
+    var list = simId ? ggsSimBadges(simId) : GGS_BADGES, n = 0;
+    for (var i = 0; i < list.length; i++) if (list[i].cond(p)) n++;
+    return n;
+  }
   function ggsErfolgToStars(pct) {
     if (pct == null || isNaN(pct)) return 0;
     return Math.max(0, Math.min(5, Math.round(pct / 20)));
   }
 
-  // Wie viele der 5 Abzeichen sind für ein Progress-Objekt freigeschaltet?
-  function ggsBadgeCount(p) {
-    var n = 0;
-    for (var i = 0; i < GGS_BADGES.length; i++) if (GGS_BADGES[i].cond(p)) n++;
-    return n;
-  }
-
-  root.GGS_BADGES        = GGS_BADGES;
-  root.GGS_SIMS          = GGS_SIMS;
-  root.ggsErfolgToStars  = ggsErfolgToStars;
-  root.ggsBadgeCount     = ggsBadgeCount;
+  root.GGS_BADGES       = GGS_BADGES;
+  root.GGS_SIM_BADGES   = GGS_SIM_BADGES;
+  root.GGS_SIMS         = GGS_SIMS;
+  root.ggsSimBadges     = ggsSimBadges;
+  root.ggsBadgeCount    = ggsBadgeCount;
+  root.ggsErfolgToStars = ggsErfolgToStars;
 })(typeof window !== 'undefined' ? window : this);