Team-Personendaten (role/bio/bioHtml/intro/quote) jetzt mehrsprachig

Bisher waren role/bio/bioHtml/intro/quote in data-scouts.js und
data-modis.js reine deutsche Strings — dadurch blieben z.B. Zitate
("Ein Mann, ein Wort.") und Kurzrollen auch bei gewählter Fremdsprache
Deutsch (siehe Screenshot-Hinweis: team-scouts.html in EN zeigte noch
deutsches Zitat).

- main.js: neuer window.dogiFeld()-Helper löst mehrsprachige Feld-Objekte
  { de, "de-CH", en, fr, pt } auf (rückwärtskompatibel zu reinen Strings).
- data-scouts.js: role (Patrick, Bananenstift) + bio (Patrick) + intro/
  bioHtml/quote (Bananenstift) vollständig in allen 5 Sprachen.
- data-modis.js: role (alle 7) + bio (VanVan/Funny/Marina/Michi) +
  bioHtml (Diene/Miss/Ghost) + rankLabel (Ghost) vollständig in allen
  5 Sprachen. Lange bioHtml-Texte von unabhängigen Übersetzer-Agenten
  erstellt, idiomatisch statt wörtlich.
- team-scouts.html, team-modis.html, index.html (Team-Vorschau),
  profil.html: Rendering nutzt jetzt durchgängig dogiFeld() und rendert
  bei Sprachwechsel (dogi-sprache-geaendert) neu — team-modis.html und
  die Team-Vorschau auf index.html haben vorher GAR NICHT auf Sprach-
  wechsel reagiert, das ist jetzt behoben. "Stufe"/"Profil ansehen" auf
  team-modis.html liefen bisher hart kodiert Deutsch, jetzt über
  i18n-team-modis.js.

team-modis.html

@@ -73,30 +73,37 @@ document.addEventListener("DOMContentLoaded", () => {
   if (!grid || !window.MODIS) return;
   const rest = window.MODIS.filter((m) => m.name !== "VanVan").sort((a, b) => a.rank - b.rank);
 
+  const feld = (x) => (window.dogiFeld ? window.dogiFeld(x) : x || "");
+  const t = (schluessel) => (window.dogiUebersetzen ? window.dogiUebersetzen(schluessel) : schluessel);
+
   // Pyramide: eine Ebene pro eindeutigem Rang, oben schmal/groß, nach
   // unten breiter/kompakter — genau wie ein Organigramm.
   const raenge = [...new Set(rest.map((m) => m.rank))];
   const MAX_STUFEN = 5; // fünf definierte Größenstufen im CSS
 
-  grid.innerHTML = raenge
-    .map((rang, i) => {
-      const stufe = Math.min(i + 1, MAX_STUFEN);
-      const personen = rest.filter((m) => m.rank === rang);
-      const karten = personen
-        .map(
-          (m) => `
-        <a class="profile-card" href="${m.page || `profil.html?p=${m.slug}`}">
-          <div class="avatar">${(m.avatar || m.photo) ? `<img src="${m.avatar || m.photo}" alt="${m.name}" loading="lazy">` : `<span class="avatar-initial">${m.name.charAt(0).toUpperCase()}</span>`}</div>
-          <span class="badge" style="margin-bottom:.5rem;">Stufe ${m.rankLabel || m.rank}</span>
-          <h3>${m.name}</h3>
-          <div class="role">${m.role}</div>
-          <span class="btn btn-outline" style="pointer-events:none;">Profil ansehen</span>
-        </a>`
-        )
-        .join("");
-      return `<div class="pyramid-tier" data-tier="${stufe}">${karten}</div>`;
-    })
-    .join("");
+  const renderModis = () => {
+    grid.innerHTML = raenge
+      .map((rang, i) => {
+        const stufe = Math.min(i + 1, MAX_STUFEN);
+        const personen = rest.filter((m) => m.rank === rang);
+        const karten = personen
+          .map(
+            (m) => `
+          <a class="profile-card" href="${m.page || `profil.html?p=${m.slug}`}">
+            <div class="avatar">${(m.avatar || m.photo) ? `<img src="${m.avatar || m.photo}" alt="${m.name}" loading="lazy">` : `<span class="avatar-initial">${m.name.charAt(0).toUpperCase()}</span>`}</div>
+            <span class="badge" style="margin-bottom:.5rem;">${t("tm_stufe_prefix")} ${feld(m.rankLabel) || m.rank}</span>
+            <h3>${m.name}</h3>
+            <div class="role">${feld(m.role)}</div>
+            <span class="btn btn-outline" style="pointer-events:none;">${t("tm_profil_ansehen")}</span>
+          </a>`
+          )
+          .join("");
+        return `<div class="pyramid-tier" data-tier="${stufe}">${karten}</div>`;
+      })
+      .join("");
+  };
+  renderModis();
+  document.addEventListener("dogi-sprache-geaendert", renderModis);
 });
 </script>
 </body>