Busfahrt: Auftrags-Card tiefer, EN-Button -> Onboarding Seite 2, Texte

- ggs-quick-intro.js: optionale zweite Seite (config.page2 {title, html})
  mit Weiter/Zurueck-Navigation. Rueckwaertskompatibel (ohne page2 = 1 Seite).
- Busfahrt: EN-Button entfernt; die "Warum Englisch?"-Erklaerung liegt jetzt
  auf Onboarding-Seite 2 + Satz zur mehrsprachigen Hintergrundmusik.
- Onboarding-Schritte ohne lange "-" ausformuliert.
- Auftrags-Card (.bf-order) 20px tiefer (top 84).

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

App/assets/js/ggs-quick-intro.js

@@ -85,6 +85,7 @@
 
   var _config = null;
   var _back = null;
+  var _page = 1;
 
   function lsKey()    { return _config && _config.simId ? 'ggs.intro.' + _config.simId : null; }
   function markSeen() { try { var k = lsKey(); if (k) localStorage.setItem(k, '1'); } catch (_) {} }
@@ -98,41 +99,68 @@
   }
   function onKey(e) { if (e.key === 'Escape') close(); }
 
-  function open() {
+  function onBackClick(e) {
-    if (!_config) return;
+    if (e.target === _back) { markSeen(); close(); return; }
+    var a = e.target && e.target.dataset && e.target.dataset.action;
+    if (a === 'next')  { _page = 2; render(); }
+    else if (a === 'back')  { _page = 1; render(); }
+    else if (a === 'start') { markSeen(); close(); }
+  }
+
+  function render() {
     injectCss();
-    close();
+    var p2 = _config.page2 || null;
-    var steps = (_config.steps || []).map(function (s) {
+    var hasP2 = !!(p2 && (p2.html || p2.body));
-      return '<li>' + (s.indexOf('<') >= 0 ? s : escapeHtml(s)) + '</li>';
+
-    }).join('');
+    var headTitle, headLead, body, foot;
-    var goals = (_config.goals || []).map(function (g) {
+    if (_page === 2 && hasP2) {
-      return '<li>' + escapeHtml(g) + '</li>';
+      headTitle = p2.title || _config.title || 'Mehr dazu';
-    }).join('');
+      headLead  = '';
+      body      = (p2.html || p2.body || '');
+      foot = '<button type="button" class="ggs-qi-btn" data-action="back" style="background:#e8e4d8;color:#2a2a2a">← Zurück</button>'
+           + '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>';
+    } else {
+      var steps = (_config.steps || []).map(function (s) {
+        return '<li>' + (s.indexOf('<') >= 0 ? s : escapeHtml(s)) + '</li>';
+      }).join('');
+      var goals = (_config.goals || []).map(function (g) {
+        return '<li>' + escapeHtml(g) + '</li>';
+      }).join('');
+      headTitle = _config.title || 'Anleitung';
+      headLead  = _config.lead ? '<p class="ggs-qi-lead">' + escapeHtml(_config.lead) + '</p>' : '';
+      body = (steps ? '<div class="ggs-qi-h3">Was tust du?</div><ol class="ggs-qi-steps">' + steps + '</ol>' : '')
+           + (goals ? '<div class="ggs-qi-h3">Was lernst du?</div><ul class="ggs-qi-goals">' + goals + '</ul>' : '');
+      foot = hasP2
+        ? '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="next">Weiter →</button>'
+        : '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>';
+    }
 
     var html = ''
       + '<div class="ggs-qi-modal" role="dialog" aria-modal="true" aria-labelledby="ggs-qi-title">'
       +   '<div class="ggs-qi-head">'
-      +     '<h2 id="ggs-qi-title" class="ggs-qi-title">' + escapeHtml(_config.title || 'Anleitung') + '</h2>'
+      +     '<h2 id="ggs-qi-title" class="ggs-qi-title">' + escapeHtml(headTitle) + '</h2>'
-      +     (_config.lead ? '<p class="ggs-qi-lead">' + escapeHtml(_config.lead) + '</p>' : '')
+      +     headLead
-      +   '</div>'
-      +   '<div class="ggs-qi-body">'
-      +     (steps ? '<div class="ggs-qi-h3">Was tust du?</div><ol class="ggs-qi-steps">' + steps + '</ol>' : '')
-      +     (goals ? '<div class="ggs-qi-h3">Was lernst du?</div><ul class="ggs-qi-goals">' + goals + '</ul>' : '')
-      +   '</div>'
-      +   '<div class="ggs-qi-foot">'
-      +     '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>'
       +   '</div>'
+      +   '<div class="ggs-qi-body">' + body + '</div>'
+      +   '<div class="ggs-qi-foot">' + foot + '</div>'
       + '</div>';
 
-    _back = document.createElement('div');
+    if (!_back) {
-    _back.className = 'ggs-qi-back';
+      _back = document.createElement('div');
+      _back.className = 'ggs-qi-back';
+      _back.addEventListener('click', onBackClick);
+      document.body.appendChild(_back);
+      document.addEventListener('keydown', onKey);
+    }
     _back.innerHTML = html;
-    _back.addEventListener('click', function (e) {
+    var m = _back.querySelector('.ggs-qi-modal'); if (m) m.scrollTop = 0;
-      if (e.target === _back) { markSeen(); close(); }
+  }
-      if (e.target && e.target.dataset && e.target.dataset.action === 'start') { markSeen(); close(); }
+
-    });
+  function open() {
-    document.body.appendChild(_back);
+    if (!_config) return;
-    document.addEventListener('keydown', onKey);
+    close();
+    _page = 1;
+    render();
   }
 
   window.GgsQuickIntro = {

App/sims/busfahrt/game.html

@@ -115,7 +115,7 @@
 
   /* ===== Auftrags-Card (oben rechts) ===== */
   .bf-order {
-    position: absolute; top: 64px; right: 8px; z-index: 1000;
+    position: absolute; top: 84px; right: 8px; z-index: 1000;
     background: #fff; border-radius: 12px;
     box-shadow: var(--bf-shadow);
     padding: 12px 14px;
@@ -626,7 +626,6 @@
     <button class="bf-toggle active" id="audio-toggle" onclick="toggleAudio()" title="Ton (SFX) ein/aus" aria-label="Ton umschalten">🔊</button>
     <button class="bf-toggle" id="btn-info" onclick="if(window.GGS_TUTORIAL&&typeof window.GGS_TUTORIAL.replay==='function')window.GGS_TUTORIAL.replay();" title="Anleitung nochmal zeigen" aria-label="Anleitung">ℹ</button>
     <button class="bf-toggle" id="black-map-toggle" onclick="toggleBlackMap()" title="Beschriftung ein/aus" aria-label="Beschriftung umschalten"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12.6 4H18a2 2 0 0 1 2 2v5.4a2 2 0 0 1-.6 1.4l-6.6 6.6a2 2 0 0 1-2.8 0l-4.4-4.4a2 2 0 0 1 0-2.8L11.2 4.6a2 2 0 0 1 1.4-.6z"/><circle cx="15.7" cy="8.3" r="1.4"/></svg></button>
-    <button class="bf-toggle" id="map-en-info" onclick="showMapEnglishInfo()" title="Warum ist die Karte auf Englisch?" aria-label="Karte auf Englisch — Erklärung" style="width:auto;padding:0 10px">ℹ️ EN</button>
   </div>
 </div>
 
@@ -843,18 +842,30 @@
     if (window.GgsQuickIntro) GgsQuickIntro.init({
       simId: 'busfahrt',
       title: '🚌 Busfahrt',
-      lead:  'Du fährst Aufträge durch Europa. Wähl gut — Zeit, Distanz und Bezahlung wollen abgewogen werden.',
+      lead:  'Du fährst mit dem Reisebus Aufträge quer durch Europa. Wäge gut ab: Zeit, Distanz und Bezahlung entscheiden über deinen Gewinn.',
       steps: [
-        'Auftrag auswählen — du siehst Stadt, Distanz und Marge.',
+        'Wähle links einen Auftrag aus. Du siehst die Zielstadt, die Distanz und deine Marge.',
-        'Auf der Karte das richtige Ziel-Land/-Stadt anklicken. Genauigkeit zählt.',
+        'Tippe auf der Karte das richtige Ziel-Land oder die richtige Stadt an. Je genauer du triffst, desto besser.',
-        'Hauptstadt-Quiz beantworten — Bonus auf den Auftrag.',
+        'Beantworte die Hauptstadt-Frage richtig und sichere dir einen Bonus auf den Auftrag.',
-        'Budget hochhalten, Aufträge gewinnen, Stufen freischalten.',
+        'Halte dein Budget hoch, gewinne Aufträge und schalte nach und nach neue Stufen frei.',
       ],
       goals: [
         'Europäische Hauptstädte und Länder zuordnen',
         'Distanzen auf der Europa-Karte einschätzen',
-        'Wirtschaftlich planen — Marge, Treibstoff, Nachtfahrt',
+        'Wirtschaftlich planen: Marge, Treibstoff und Nachtfahrt im Blick behalten',
       ],
+      page2: {
+        title: '🗺 Warum ist die Karte auf Englisch?',
+        html: ''
+          + '<p style="margin:0 0 .8rem">Die Städtenamen auf der Karte stehen auf <strong>Englisch</strong>, und das mit Absicht: es ist ein echter Lernvorteil.</p>'
+          + '<ul style="margin:0 0 1rem;padding-left:1.2rem;line-height:1.5">'
+          +   '<li style="margin:.3rem 0"><strong>Namen unterscheiden sich international:</strong> auf der Karte steht „Vienna", im Quiz „Wien". So lernst du nebenbei, wie deine Heimat weltweit heißt.</li>'
+          +   '<li style="margin:.3rem 0"><strong>Englisch ist die Sprache der Geographie:</strong> Reiseplanung, Tourismus und Karten-Apps nutzen es überall.</li>'
+          +   '<li style="margin:.3rem 0"><strong>Übersetzen im Kopf</strong> („Munich" wird zu „München") trainiert geographisches Denken besser als reines Ablesen.</li>'
+          +   '<li style="margin:.3rem 0"><strong>Endonym und Exonym:</strong> viele Orte haben mehrere Namen: einheimisch „Lisboa", englisch „Lisbon", deutsch „Lissabon".</li>'
+          + '</ul>'
+          + '<div style="background:#eef4ec;border:1px solid #cfe0cf;border-radius:8px;padding:.7rem .9rem;font-size:.94rem;line-height:1.5">🎧 <strong>Ohren auf:</strong> Die Hintergrundmusik wird in verschiedenen europäischen Sprachen gesungen. Errätst du, welche Sprache gerade läuft?</div>',
+      },
     });
   });
 </script>