i18n: aktion-detail, community, creator, kontakt, links — alle 5 Sprachen

Vollständige data-i18n-Abdeckung + Wörterbücher (de, de-CH echter Dialekt,
en, fr, pt) für die ersten 5 der ~22 noch fehlenden Seiten.

creator.html

@@ -29,9 +29,9 @@
   <section class="hero page-bg">
     <div class="hero-banner"><img src="/assets/img/bg-creator.jpg" alt="" loading="eager" /></div>
     <div class="container">
-      <span class="eyebrow">Manager DogFather — Team</span>
-      <h1>Creator im Team</h1>
-      <p class="lead worlds">Content Creator, die bei DogFather / Spicy Media mitmachen.</p>
+      <span class="eyebrow" data-i18n="crt_eyebrow">Manager DogFather — Team</span>
+      <h1 data-i18n="crt_h1">Creator im Team</h1>
+      <p class="lead worlds" data-i18n="crt_lead">Content Creator, die bei DogFather / Spicy Media mitmachen.</p>
     </div>
   </section>
 
@@ -39,9 +39,18 @@
     <div class="container">
       <div class="filter-bar" id="creator-filters"></div>
       <div id="creator-grid" class="grid grid-4"></div>
+      <!-- Versteckte Textquelle für die JS-generierten Grid-/Filter-Texte:
+           main.js übersetzt data-i18n-Elemente automatisch (auch bei
+           Sprachwechsel), das Inline-Skript unten liest die fertigen Texte
+           von hier aus, statt sie selbst per JS zu übersetzen. -->
+      <div id="creator-i18n-strings" style="display:none;" aria-hidden="true">
+        <span data-i18n="crt_empty">Noch keine Creator-Profile veröffentlicht — bald verfügbar. 🩵</span>
+        <span data-i18n="crt_filter_alle">alle</span>
+        <span data-i18n="crt_profil_btn">Profil ansehen</span>
+      </div>
       <!-- TODO: Noch keine Creator-Profile final geklärt. Sobald Namen/Infos feststehen, in assets/js/data-creator.js ergänzen — diese Seite rendert automatisch. -->
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-primary" href="bewerben-creator.html">Als Creator bewerben</a>
+        <a class="btn btn-primary" href="bewerben-creator.html" data-i18n="crt_bewerben_btn">Als Creator bewerben</a>
       </div>
     </div>
   </section>
@@ -49,6 +58,7 @@
 
 <div id="site-footer"></div>
 <script src="assets/js/data-creator.js"></script>
+<script src="assets/js/i18n-creator.js"></script>
 <script src="assets/js/main.js"></script>
 <script>
 document.addEventListener("DOMContentLoaded", () => {
@@ -56,15 +66,33 @@ document.addEventListener("DOMContentLoaded", () => {
   const filterBar = document.getElementById("creator-filters");
   const list = window.CREATORS || [];
 
+  // Texte fürs JS-generierte Grid/Filter kommen aus den versteckten
+  // data-i18n-Elementen oben — main.js übersetzt sie ganz normal (auch bei
+  // Sprachwechsel per "dogi-sprache-geaendert"), wir lesen hier nur den
+  // fertig übersetzten Text aus.
+  const uebersetzen = (schluessel) => {
+    const quelle = [...document.querySelectorAll("#creator-i18n-strings [data-i18n]")]
+      .find((el) => el.getAttribute("data-i18n") === schluessel);
+    return quelle ? quelle.textContent : schluessel;
+  };
+
   if (!list.length) {
-    grid.innerHTML = `<p class="muted text-center" style="grid-column:1/-1;">Noch keine Creator-Profile veröffentlicht — bald verfügbar. 🩵</p>`;
+    const texteNeuSetzen = () => {
+      grid.innerHTML = `<p class="muted text-center" style="grid-column:1/-1;">${uebersetzen("crt_empty")}</p>`;
+    };
+    texteNeuSetzen();
+    document.addEventListener("dogi-sprache-geaendert", texteNeuSetzen);
     filterBar.style.display = "none";
     return;
   }
 
   const categories = ["alle", ...new Set(list.map((c) => c.category))];
-  filterBar.innerHTML = categories.map((c, i) =>
-    `<button class="filter-btn${i === 0 ? " active" : ""}" data-filter="${c}">${c}</button>`).join("");
+  let aktiverFilter = "alle";
+
+  function zeichneFilterbar() {
+    filterBar.innerHTML = categories.map((c) =>
+      `<button class="filter-btn${c === aktiverFilter ? " active" : ""}" data-filter="${c}">${c === "alle" ? uebersetzen("crt_filter_alle") : c}</button>`).join("");
+  }
 
   function draw(filter) {
     const items = filter === "alle" ? list : list.filter((c) => c.category === filter);
@@ -74,18 +102,25 @@ document.addEventListener("DOMContentLoaded", () => {
         <h3>${c.name}</h3>
         <div class="role">${c.role}</div>
         ${c.quote ? `<p class="quote">„${c.quote}"</p>` : ""}
-        <span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">Profil ansehen</span>
+        <span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">${uebersetzen("crt_profil_btn")}</span>
       </a>`).join("");
   }
 
   filterBar.addEventListener("click", (e) => {
     const btn = e.target.closest(".filter-btn");
     if (!btn) return;
+    aktiverFilter = btn.dataset.filter;
     filterBar.querySelectorAll(".filter-btn").forEach((b) => b.classList.remove("active"));
     btn.classList.add("active");
-    draw(btn.dataset.filter);
+    draw(aktiverFilter);
   });
 
+  document.addEventListener("dogi-sprache-geaendert", () => {
+    zeichneFilterbar();
+    draw(aktiverFilter);
+  });
+
+  zeichneFilterbar();
   draw("alle");
 });
 </script>