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.

assets/js/data-scouts.js

@@ -40,11 +40,16 @@ const SCOUTS = [
     role: "Scout (Manager) — Linke Hand",
     photo: "assets/img/card-bananenstift.jpg",
     avatar: "assets/img/avatar-bananenstift.jpg",
+    // Kurzer Einstiegstext, wird direkt neben dem großen Foto angezeigt
+    // (siehe profil.html / person.intro). Die ausführliche Vorstellung
+    // (bioHtml) folgt zusätzlich weiter unten auf der Seite.
+    intro: `
+      <p>Hallo, mein Name ist <strong>Bananenstift</strong>. Ich bin 36 Jahre alt, verheiratet, Vater von fünf Kindern und komme aus der Region Hannover. Meine Frau und ich sind beide berufstätig – unser Alltag ist also meistens ziemlich lebendig und abwechslungsreich.</p>
+      <p>TikTok ist für mich kein Beruf und auch kein Wettbewerb. Es ist meine Freizeit, mein persönlicher Ausgleich und eine willkommene Ablenkung vom Alltag. Wenn es die Zeit erlaubt, gehe ich auch selbst live. Dabei habe ich jedoch nicht das Ziel, ein großer Streamer zu werden. Mir ist es viel wichtiger, andere Menschen auf ihrem Weg zu unterstützen.</p>
+    `,
     // Ausführliche eigene Vorstellung von Bananenstift — wird auf der
     // Profilseite als formatierter Text angezeigt (siehe profil.html / bioHtml).
     bioHtml: `
-      <p>Hallo, mein Name ist <strong>Bananenstift</strong>. Ich bin 36 Jahre alt, verheiratet, Vater von fünf Kindern und komme aus der Region Hannover. Meine Frau und ich sind beide berufstätig – unser Alltag ist also meistens ziemlich lebendig und abwechslungsreich.</p>
-      <p>TikTok ist für mich kein Beruf und auch kein Wettbewerb. Es ist meine Freizeit, mein persönlicher Ausgleich und eine willkommene Ablenkung vom Alltag. Wenn es die Zeit erlaubt, gehe ich auch selbst live. Dabei habe ich jedoch nicht das Ziel, ein großer Streamer zu werden. Mir ist es viel wichtiger, andere Menschen auf ihrem Weg zu unterstützen.</p>
       <h3>Meine Aufgabe als Scout</h3>
       <p>Als Scout von <strong>Dogfather</strong> möchte ich Menschen finden, begleiten und fördern, die Unterstützung benötigen oder sich auf TikTok weiterentwickeln möchten.</p>
       <p>Dabei helfe ich unter anderem bei:</p>

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>