Klickbare Profilseiten fuer jedes Team-Mitglied

Wunsch: Klick auf eine Person (z.B. Bananenstift) oeffnet eine eigene
Seite mit grossem Foto und Vorstellungstext daneben - fuer jeden.

- Neue Seite profil.html: generische Profilseite, liest Person per
  ?p=<slug> aus MODIS/SCOUTS/CREATORS, zeigt grosses Foto (4:5, farbiger
  Rahmen passend zur Person), Name, Rolle, Vorstellungstext, optional
  Zitat und Social-Links. Welt/Theme (blau=Team Dogi, rot=Agentur) und
  Hintergrundmotiv passen sich automatisch an, ob die Person Modi,
  Scout oder Creator ist. Unbekannter Slug zeigt eine freundliche
  Fehlermeldung statt kaputter Seite.
- data-modis.js, data-scouts.js, data-creator.js: neues Feld "slug"
  (eindeutige ID fuer die URL) und "bio" (Vorstellungstext) fuer jede
  Person ergaenzt. VanVan behaelt ihre eigene, ausfuehrlichere Seite
  (vanvan.html) und wird nicht auf profil.html umgeleitet.
- team-modis.html, team-scouts.html, creator.html, index.html
  (Team-Vorschau): Karten sind jetzt komplett anklickbar (ganze Karte
  ist ein Link), nicht mehr nur ein kleiner Knopf.
- Bugfix: gerade curly quotes ("„...\"") mitten in einem doppelt
  angefuehrten JS-String schlossen den String vorzeitig ab und haetten
  main.js kaputt gemacht (per node --check gefunden, bevor es live ging).

Co-Authored-By: Claude Opus 5 <[email protected]>

team-modis.html

@@ -68,13 +68,13 @@ document.addEventListener("DOMContentLoaded", () => {
   if (!grid || !window.MODIS) return;
   const rest = window.MODIS.filter((m) => m.name !== "VanVan").sort((a,b) => a.rank - b.rank);
   grid.innerHTML = rest.map((m) => `
-    <div class="profile-card">
+    <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${m.rank === 1 ? " rank-1" : ""}" style="margin-bottom:.5rem;">Stufe ${m.rank}</span>
       <h3>${m.name}</h3>
       <div class="role">${m.role}</div>
-      ${m.page ? `<a class="btn btn-outline" style="margin-top:.7rem;" href="${m.page}">Profil ansehen</a>` : ""}
-    </div>`).join("");
+      <span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">Profil ansehen</span>
+    </a>`).join("");
 });
 </script>
 </body>