profil.html: neues intro-Feld für Kurztext neben großem Foto

Bananenstifts Einstiegstext (Name/Alter/Familie + TikTok-Haltung) steht
jetzt direkt neben seinem großen Profilfoto, wie gewünscht. Neues
optionales person.intro-Feld in profil.html ergänzt (wirkt nur, wenn
gesetzt — Diene/Miss unverändert). Die identischen Absätze wurden aus
bioHtml entfernt, um Dopplung auf der Seite zu vermeiden.

profil.html

@@ -106,6 +106,7 @@
 <script src="assets/js/data-modis.js"></script>
 <script src="assets/js/data-scouts.js"></script>
 <script src="assets/js/data-creator.js"></script>
+<script src="assets/js/i18n-profil.js"></script>
 <script src="assets/js/main.js"></script>
 <script>
 document.addEventListener("DOMContentLoaded", () => {
@@ -116,18 +117,29 @@ document.addEventListener("DOMContentLoaded", () => {
   const alle = [...modis, ...scouts, ...creators];
   const person = alle.find((p) => p.slug === slug);
 
+  // Für alle Rahmentexte, die rein per JS gesetzt werden (Name/Rolle/Bio
+  // der Person selbst kommen unverändert aus data-modis.js/data-scouts.js
+  // und werden NICHT übersetzt) — Wörterbuch kommt aus assets/js/i18n-profil.js.
+  const t = (schluessel) => (window.dogiUebersetzen ? window.dogiUebersetzen(schluessel) : schluessel);
+
   if (!person) {
-    document.getElementById("profil-root").innerHTML = `
-      <section class="section-tight">
-        <div class="container text-center">
-          <h2>Dieses Profil gibt's (noch) nicht 🤔</h2>
-          <p class="lead">Vielleicht ein alter Link — probier's über die Team-Seiten.</p>
-          <div class="btn-row" style="justify-content:center;">
-            <a class="btn btn-primary" href="team-modis.html">Zum Modi-Team</a>
-            <a class="btn btn-outline" href="team-scouts.html">Zum Scout-Team</a>
+    // Text kommt (auch bei Sprachwechsel) aus dem seiteneigenen
+    // i18n-Wörterbuch statt aus data-i18n, weil er per JS gesetzt wird.
+    const renderNichtGefunden = () => {
+      document.getElementById("profil-root").innerHTML = `
+        <section class="section-tight">
+          <div class="container text-center">
+            <h2>${t("pr_notfound_title")}</h2>
+            <p class="lead">${t("pr_notfound_lead")}</p>
+            <div class="btn-row" style="justify-content:center;">
+              <a class="btn btn-primary" href="team-modis.html">${t("pr_notfound_btn_modis")}</a>
+              <a class="btn btn-outline" href="team-scouts.html">${t("pr_notfound_btn_scouts")}</a>
+            </div>
           </div>
-        </div>
-      </section>`;
+        </section>`;
+    };
+    renderNichtGefunden();
+    document.addEventListener("dogi-sprache-geaendert", renderNichtGefunden);
     return;
   }
 
@@ -155,8 +167,6 @@ document.addEventListener("DOMContentLoaded", () => {
   const metaDesc = document.querySelector('meta[name="description"]');
   if (metaDesc) metaDesc.setAttribute("content", kurzbeschreibung);
 
-  document.getElementById("profil-eyebrow").textContent =
-    istScout ? "Manager DogFather — Spicy Media" : istCreator ? "Manager DogFather — Creator" : "🩵 Team Dogi";
   document.getElementById("profil-hero-name").textContent = person.name;
   document.getElementById("profil-hero-role").textContent = person.role || "";
 
@@ -184,27 +194,64 @@ document.addEventListener("DOMContentLoaded", () => {
   // Zwei Modi: entweder eine ausführliche, formatierte Vorstellung
   // (bioHtml — beliebig lang, mit Absätzen und Zwischenüberschriften),
   // oder der kurze einzeilige Standardtext (bio). bioHtml hat Vorrang.
+  // Optional: person.intro — ein kurzer Einstiegstext (1-2 Absätze), der
+  // direkt neben dem großen Foto angezeigt wird, auch wenn bioHtml gesetzt
+  // ist (die ausführliche Vorstellung erscheint zusätzlich weiter unten).
   if (person.bioHtml) {
-    document.getElementById("profil-bio").style.display = "none";
+    if (person.intro) {
+      document.getElementById("profil-bio").innerHTML = person.intro;
+      document.getElementById("profil-bio").style.display = "";
+    } else {
+      document.getElementById("profil-bio").style.display = "none";
+    }
     const richSection = document.getElementById("profil-bio-rich-section");
     document.getElementById("profil-bio-rich").innerHTML = person.bioHtml;
     richSection.style.display = "";
-  } else {
-    document.getElementById("profil-bio").textContent =
-      person.bio || `Mehr über ${person.name} folgt in Kürze. 🩵`;
   }
 
   if (person.rank) {
-    const badge = document.getElementById("profil-badge");
-    badge.textContent = `Stufe ${person.rankLabel || person.rank}`;
-    badge.style.display = "inline-block";
+    document.getElementById("profil-badge").style.display = "inline-block";
   }
   if (person.quote) {
-    const q = document.getElementById("profil-quote");
-    q.textContent = `„${person.quote}"`;
-    q.style.display = "block";
+    document.getElementById("profil-quote").style.display = "block";
   }
 
+  // Rahmentexte, die je nach Sprache und Team-Zugehörigkeit (Modi/Scout/
+  // Creator) unterschiedlich ausfallen — per JS statt data-i18n gesetzt,
+  // damit sie bei jedem Sprachwechsel (dogi-sprache-geaendert) sauber
+  // neu übersetzt werden, ohne die eigentlichen Personendaten anzufassen.
+  const renderStatischeTexte = () => {
+    document.getElementById("profil-eyebrow").textContent = istScout
+      ? t("pr_eyebrow_scout")
+      : istCreator
+      ? t("pr_eyebrow_creator")
+      : t("pr_eyebrow_default");
+
+    if (!person.bioHtml) {
+      document.getElementById("profil-bio").textContent =
+        person.bio || t("pr_bio_fallback").replace("{name}", person.name);
+    }
+
+    if (person.rank) {
+      document.getElementById("profil-badge").textContent = `${t("pr_badge_prefix")} ${person.rankLabel || person.rank}`;
+    }
+    if (person.quote) {
+      document.getElementById("profil-quote").textContent = `${t("pr_quote_open")}${person.quote}${t("pr_quote_close")}`;
+    }
+
+    const zurueck = document.getElementById("profil-back");
+    if (istScout) {
+      zurueck.href = "team-scouts.html";
+      zurueck.textContent = t("pr_back_scouts");
+    } else if (istCreator) {
+      zurueck.href = "creator.html";
+      zurueck.textContent = t("pr_back_creator");
+    } else {
+      zurueck.href = "team-modis.html";
+      zurueck.textContent = t("pr_back_modis");
+    }
+  };
+
   const socialLabels = { tiktok: "TikTok", instagram: "Instagram", spotify: "Spotify", discord: "Discord" };
   const socialWrap = document.getElementById("profil-social");
   Object.entries(person.social || {}).forEach(([plattform, url]) => {
@@ -218,17 +265,8 @@ document.addEventListener("DOMContentLoaded", () => {
     socialWrap.appendChild(a);
   });
 
-  const zurueck = document.getElementById("profil-back");
-  if (istScout) {
-    zurueck.href = "team-scouts.html";
-    zurueck.textContent = "← Zurück zum Scout-Team";
-  } else if (istCreator) {
-    zurueck.href = "creator.html";
-    zurueck.textContent = "← Zurück zu den Creatorn";
-  } else {
-    zurueck.href = "team-modis.html";
-    zurueck.textContent = "← Zurück zum Modi-Team";
-  }
+  renderStatischeTexte();
+  document.addEventListener("dogi-sprache-geaendert", renderStatischeTexte);
 });
 </script>
 </body>