Mehrsprachigkeit: Sprachumschalter in der Navigation (DE/CH/EN/FR/PT)

Neues i18n-System, komplett clientseitig (kein Build-Tool):
- main.js: I18N_CORE übersetzt Navigation, Fußzeile und Musik-Widget auf
  JEDER Seite (Markennamen wie DogFather/HasiDog/Casper/Team Dogi bleiben
  bewusst in jeder Sprache gleich). Sprachumschalter (Flagge + Kürzel) neu
  im Nav-Bar, per Klick wählbar, Wahl landet in localStorage und bleibt
  beim Klicken durch die Seite erhalten.
- Jeder komplett neue Besuch (kein gespeicherter Wert) startet IMMER auf
  Deutsch - keine automatische Browsersprache-Erkennung, wie gewünscht.
- assets/js/i18n-index.js: vollständiges Wörterbuch für die Startseite
  (Hero, Charaktere, Foto-Collage, Stats, "Was dich erwartet",
  Team-Vorschau, Aktionen, Galerie, Testimonial, finaler CTA) inkl. der
  dynamischen Live-Status-Texte.
- Schweizer Hochdeutsch (de-CH) korrekt mit ss statt ß angelegt (z.B.
  "Musik-Feld schliessen").
- Weitere Unterseiten (streamer.html, vanvan.html, ...) bekommen ihr
  eigenes Wörterbuch schrittweise in künftigen Runden - Navigation/
  Fußzeile/Musik-Widget sind aber schon jetzt überall mehrsprachig.

index.html

@@ -49,34 +49,34 @@
     </div>
     <div class="container">
       <span class="eyebrow">🩵 DOGFATHER UNIVERSE</span>
-      <h1>Streamer. Community. HasiDog. Manager.<br>Gemeinsam stark.</h1>
-      <p class="lead worlds">Drei Welten, eine Familie: Team Dogi.</p>
+      <h1 data-i18n="idx_hero_h1">Streamer. Community. HasiDog. Manager.<br>Gemeinsam stark.</h1>
+      <p class="lead worlds" data-i18n="idx_hero_lead">Drei Welten, eine Familie: Team Dogi.</p>
 
       <div class="card" style="max-width:420px;margin:1.4rem auto 0;padding:1rem 1.4rem;">
-        <span class="badge rank-1"><span class="live-dot is-unknown" id="live-dot"></span><span id="live-text">Status wird geladen …</span></span>
-        <p class="small" style="margin:.5rem 0 0;">DogFather geht <strong>jeden Tag ab 20 Uhr</strong> live — oft schon tagsüber, zu wechselnden Zeiten. <a href="streamplan.html">Streamplan ansehen →</a></p>
+        <span class="badge rank-1"><span class="live-dot is-unknown" id="live-dot"></span><span id="live-text" data-i18n="idx_live_loading">Status wird geladen …</span></span>
+        <p class="small" data-i18n="idx_live_info" style="margin:.5rem 0 0;">DogFather geht <strong>jeden Tag ab 20 Uhr</strong> live — oft schon tagsüber, zu wechselnden Zeiten. <a href="streamplan.html">Streamplan ansehen →</a></p>
       </div>
 
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-primary" href="links.html">Alle Links 🩵</a>
-        <a class="btn btn-outline" href="bewerben.html">Teil vom Team werden</a>
+        <a class="btn btn-primary" href="links.html" data-i18n="idx_hero_btn_links">Alle Links 🩵</a>
+        <a class="btn btn-outline" href="bewerben.html" data-i18n="idx_hero_btn_team">Teil vom Team werden</a>
       </div>
 
       <div class="hero-grid">
         <a class="card" href="dogfather.html" data-theme="dogfather">
-          <span class="tag">Welt 1</span>
+          <span class="tag" data-i18n="idx_hero_card1_tag">Welt 1</span>
           <h3>DogFather</h3>
-          <p>Streamer, Entertainer, das Herz hinter dem Kanal. Halligalli, Humor und ein offenes Ohr für die Community.</p>
+          <p data-i18n="idx_hero_card1_desc">Streamer, Entertainer, das Herz hinter dem Kanal. Halligalli, Humor und ein offenes Ohr für die Community.</p>
         </a>
         <a class="card" href="hasidog.html" data-theme="hasidog">
-          <span class="tag">Welt 2</span>
+          <span class="tag" data-i18n="idx_hero_card2_tag">Welt 2</span>
           <h3>HasiDog</h3>
-          <p>Die Community, das Maskottchen und Husky Casper — die verspielte, familiäre Seite von Team Dogi.</p>
+          <p data-i18n="idx_hero_card2_desc">Die Community, das Maskottchen und Husky Casper — die verspielte, familiäre Seite von Team Dogi.</p>
         </a>
         <a class="card" href="manager.html" data-theme="spicymedia">
-          <span class="tag">Welt 3</span>
+          <span class="tag" data-i18n="idx_hero_card3_tag">Welt 3</span>
           <h3>Manager DogFather</h3>
-          <p>Als Manager bei Spicy Media: Scouts, Creator und faire Zusammenarbeit auf Augenhöhe.</p>
+          <p data-i18n="idx_hero_card3_desc">Als Manager bei Spicy Media: Scouts, Creator und faire Zusammenarbeit auf Augenhöhe.</p>
         </a>
       </div>
     </div>
@@ -85,9 +85,9 @@
   <!-- ================= CHARAKTERE: DOGFATHER-HUSKY & HASIDOG-HASE ================= -->
   <section class="section-tight">
     <div class="container text-center">
-      <span class="eyebrow">🩵 Die Gesichter der Welten</span>
+      <span class="eyebrow" data-i18n="idx_char_eyebrow">🩵 Die Gesichter der Welten</span>
       <h2>DogFather &amp; HasiDog</h2>
-      <p class="lead" style="max-width:52ch;margin:0 auto 2.4rem;">Zwei Charaktere, ein Universum — klick dich in ihre Welt.</p>
+      <p class="lead" data-i18n="idx_char_lead" style="max-width:52ch;margin:0 auto 2.4rem;">Zwei Charaktere, ein Universum — klick dich in ihre Welt.</p>
 
       <div class="char-showcase">
         <a class="char-card dogfather" href="streamer.html">
@@ -95,8 +95,8 @@
                alt="DogFather — Husky mit blauem Hoodie und Cap" />
           <span class="char-meta">
             <span class="char-name">DogFather</span>
-            <span class="char-sub">Streamer · Entertainer · Welt 1</span>
-            <span class="char-go">Zur Welt →</span>
+            <span class="char-sub" data-i18n="idx_char1_sub">Streamer · Entertainer · Welt 1</span>
+            <span class="char-go" data-i18n="idx_char_go">Zur Welt →</span>
           </span>
         </a>
         <a class="char-card hasidog" href="hasidog.html">
@@ -104,8 +104,8 @@
                alt="HasiDog — grauer Hase mit schwarzem Hoodie und Cap" />
           <span class="char-meta">
             <span class="char-name">HasiDog</span>
-            <span class="char-sub">Community · Maskottchen · Welt 2</span>
-            <span class="char-go">Zur Welt →</span>
+            <span class="char-sub" data-i18n="idx_char2_sub">Community · Maskottchen · Welt 2</span>
+            <span class="char-go" data-i18n="idx_char_go">Zur Welt →</span>
           </span>
         </a>
       </div>
@@ -115,7 +115,7 @@
   <!-- ================= FOTO-COLLAGE: DOGFATHER & CASPER ================= -->
   <section class="section-tight">
     <div class="container text-center">
-      <span class="eyebrow">🩵 Gesichter hinter dem Universum</span>
+      <span class="eyebrow" data-i18n="idx_collage_eyebrow">🩵 Gesichter hinter dem Universum</span>
       <h2>DogFather &amp; Casper</h2>
       <div class="collage-wrap" id="collage-wrap">
         <div class="collage-item">
@@ -128,18 +128,18 @@
         </div>
         <div class="collage-item">
           <div class="collage-photo frame-silver"><img class="collage-img" data-fallback="DogFather &amp; Casper" src="assets/img/dogfather-casper-1.jpg" alt="DogFather und Casper zusammen" style="object-position:center 18%;"></div>
-          <p class="collage-caption">Team 🩵🐾</p>
+          <p class="collage-caption" data-i18n="idx_collage_cap_team">Team 🩵🐾</p>
         </div>
         <div class="collage-item">
           <div class="collage-photo frame-gold"><img class="collage-img" data-fallback="Casper" src="assets/img/casper-2.jpg" alt="Casper"></div>
-          <p class="collage-caption">Husky-Life</p>
+          <p class="collage-caption" data-i18n="idx_collage_cap_huskylife">Husky-Life</p>
         </div>
         <div class="collage-item">
           <div class="collage-photo frame-tuerkis"><img class="collage-img" data-fallback="DogFather &amp; Casper" src="assets/img/dogfather-casper-2.jpg" alt="DogFather und Casper Nase an Nase"></div>
-          <p class="collage-caption">Nase an Nase 🩵</p>
+          <p class="collage-caption" data-i18n="idx_collage_cap_nose">Nase an Nase 🩵</p>
         </div>
       </div>
-      <p class="small muted" style="max-width:50ch;margin:0 auto;">DogFather &amp; Casper — die zwei Gesichter hinter dem ganzen Universum. 🩵🐾</p>
+      <p class="small muted" data-i18n="idx_collage_footer" style="max-width:50ch;margin:0 auto;">DogFather &amp; Casper — die zwei Gesichter hinter dem ganzen Universum. 🩵🐾</p>
     </div>
   </section>
 
@@ -147,10 +147,10 @@
   <section class="section-tight">
     <div class="container">
       <div class="grid grid-4" id="stats-bar">
-        <div class="card text-center"><h3 id="stat-team">–</h3><p class="small muted">Menschen im Team Dogi</p></div>
-        <div class="card text-center"><h3>Täglich</h3><p class="small muted">live ab 20 Uhr</p></div>
-        <div class="card text-center"><h3>3</h3><p class="small muted">Welten, eine Familie</p></div>
-        <div class="card text-center"><h3>🩵</h3><p class="small muted">Team Dogi ist Familie</p></div>
+        <div class="card text-center"><h3 id="stat-team">–</h3><p class="small muted" data-i18n="idx_stats_team">Menschen im Team Dogi</p></div>
+        <div class="card text-center"><h3 data-i18n="idx_stats_daily_label">Täglich</h3><p class="small muted" data-i18n="idx_stats_daily_desc">live ab 20 Uhr</p></div>
+        <div class="card text-center"><h3>3</h3><p class="small muted" data-i18n="idx_stats_worlds">Welten, eine Familie</p></div>
+        <div class="card text-center"><h3>🩵</h3><p class="small muted" data-i18n="idx_stats_family">Team Dogi ist Familie</p></div>
       </div>
     </div>
   </section>
@@ -158,17 +158,17 @@
   <!-- ================= WAS DICH ERWARTET ================= -->
   <section>
     <div class="container">
-      <span class="eyebrow text-center" style="display:block;text-align:center;">Ein bisschen von allem</span>
-      <h2 class="text-center">Was dich im Universum erwartet</h2>
+      <span class="eyebrow text-center" data-i18n="idx_expect_eyebrow" style="display:block;text-align:center;">Ein bisschen von allem</span>
+      <h2 class="text-center" data-i18n="idx_expect_h2">Was dich im Universum erwartet</h2>
       <div class="grid grid-4">
-        <a class="card" href="streamer.html"><h3>🎥 Streamer</h3><p class="small">Halligalli, Humor &amp; Hasencontent.</p></a>
-        <a class="card" href="zeitreise.html"><h3>🕰️ Zeitreise</h3><p class="small">Die Geschichte von DogFather &amp; Team Dogi.</p></a>
-        <a class="card" href="community.html"><h3>🩵 Community</h3><p class="small">Team Dogi ist Familie.</p></a>
-        <a class="card" href="casper.html"><h3>🐾 Casper</h3><p class="small">Der Husky an DogFathers Seite.</p></a>
-        <a class="card" href="team-modis.html"><h3>🧑‍🤝‍🧑 Modi-Team</h3><p class="small">VanVan, Diene &amp; Co.</p></a>
-        <a class="card" href="medien-dogfather.html"><h3>🖼️ Medien: DogFather</h3><p class="small">Fotos, Videos &amp; Events.</p></a>
-        <a class="card" href="medien-hasidog.html"><h3>🐰 Medien: HasiDog</h3><p class="small">Fotos, Videos &amp; Events.</p></a>
-        <a class="card" href="medien-casper.html"><h3>🐺 Medien: Casper</h3><p class="small">Fotos, Videos &amp; Events.</p></a>
+        <a class="card" href="streamer.html"><h3 data-i18n="idx_expect_c1_h3">🎥 Streamer</h3><p class="small" data-i18n="idx_expect_c1_p">Halligalli, Humor &amp; Hasencontent.</p></a>
+        <a class="card" href="zeitreise.html"><h3 data-i18n="idx_expect_c2_h3">🕰️ Zeitreise</h3><p class="small" data-i18n="idx_expect_c2_p">Die Geschichte von DogFather &amp; Team Dogi.</p></a>
+        <a class="card" href="community.html"><h3 data-i18n="idx_expect_c3_h3">🩵 Community</h3><p class="small" data-i18n="idx_expect_c3_p">Team Dogi ist Familie.</p></a>
+        <a class="card" href="casper.html"><h3 data-i18n="idx_expect_c4_h3">🐾 Casper</h3><p class="small" data-i18n="idx_expect_c4_p">Der Husky an DogFathers Seite.</p></a>
+        <a class="card" href="team-modis.html"><h3 data-i18n="idx_expect_c5_h3">🧑‍🤝‍🧑 Modi-Team</h3><p class="small" data-i18n="idx_expect_c5_p">VanVan, Diene &amp; Co.</p></a>
+        <a class="card" href="medien-dogfather.html"><h3 data-i18n="idx_expect_c6_h3">🖼️ Medien: DogFather</h3><p class="small" data-i18n="idx_expect_media_p">Fotos, Videos &amp; Events.</p></a>
+        <a class="card" href="medien-hasidog.html"><h3 data-i18n="idx_expect_c7_h3">🐰 Medien: HasiDog</h3><p class="small" data-i18n="idx_expect_media_p">Fotos, Videos &amp; Events.</p></a>
+        <a class="card" href="medien-casper.html"><h3 data-i18n="idx_expect_c8_h3">🐺 Medien: Casper</h3><p class="small" data-i18n="idx_expect_media_p">Fotos, Videos &amp; Events.</p></a>
       </div>
     </div>
   </section>
@@ -176,12 +176,12 @@
   <!-- ================= TEAM PREVIEW ================= -->
   <section class="section-tight team-bg">
     <div class="container">
-      <h2 class="text-center">Team Dogi 🩵</h2>
-      <p class="lead text-center" style="max-width:60ch;margin:0 auto;">Von VanVan bis zu den Scouts — die Menschen, die DOGFATHER UNIVERSE tragen.</p>
+      <h2 class="text-center" data-i18n="idx_team_h2">Team Dogi 🩵</h2>
+      <p class="lead text-center" data-i18n="idx_team_lead" style="max-width:60ch;margin:0 auto;">Von VanVan bis zu den Scouts — die Menschen, die DOGFATHER UNIVERSE tragen.</p>
       <div id="team-preview" class="grid grid-4"></div>
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-outline" href="team-modis.html">Modi-Team ansehen</a>
-        <a class="btn btn-outline" href="team-scouts.html">Scout-Team ansehen</a>
+        <a class="btn btn-outline" href="team-modis.html" data-i18n="idx_team_btn_modi">Modi-Team ansehen</a>
+        <a class="btn btn-outline" href="team-scouts.html" data-i18n="idx_team_btn_scouts">Scout-Team ansehen</a>
       </div>
     </div>
   </section>
@@ -189,10 +189,10 @@
   <!-- ================= AKTIONEN TEASER ================= -->
   <section>
     <div class="container">
-      <h2 class="text-center">Was gerade läuft</h2>
+      <h2 class="text-center" data-i18n="idx_aktionen_h2">Was gerade läuft</h2>
       <div id="aktionen-teaser" class="grid grid-3"></div>
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-outline" href="medien-dogfather.html#events">Alle Aktionen &amp; Projekte</a>
+        <a class="btn btn-outline" href="medien-dogfather.html#events" data-i18n="idx_aktionen_btn">Alle Aktionen &amp; Projekte</a>
       </div>
     </div>
   </section>
@@ -200,7 +200,7 @@
   <!-- ================= GALERIE TEASER ================= -->
   <section class="section-tight">
     <div class="container">
-      <h2 class="text-center">Impressionen</h2>
+      <h2 class="text-center" data-i18n="idx_galerie_h2">Impressionen</h2>
       <div class="grid grid-4">
         <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-3.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:center 20%;" /></div>
         <div class="collage-photo frame-lila" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-vanvan.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" /></div>
@@ -208,7 +208,7 @@
         <div class="collage-photo frame-gold" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-dogfather.jpg" alt="DogFather" style="width:100%;height:100%;object-fit:cover;" /></div>
       </div>
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-outline" href="medien-dogfather.html">Zur ganzen Galerie</a>
+        <a class="btn btn-outline" href="medien-dogfather.html" data-i18n="idx_galerie_btn">Zur ganzen Galerie</a>
       </div>
     </div>
   </section>
@@ -216,13 +216,13 @@
   <!-- ================= TESTIMONIAL ================= -->
   <section>
     <div class="container text-center">
-      <span class="eyebrow">Was andere sagen</span>
+      <span class="eyebrow" data-i18n="idx_testimonial_eyebrow">Was andere sagen</span>
       <div class="card" style="max-width:640px;margin:1rem auto 0;">
-        <p class="quote" style="font-size:1.15rem;">„Hier stehen bald echte Stimmen aus der Community. 🩵"</p>
-        <p class="small muted">— Team Dogi</p>
+        <p class="quote" data-i18n="idx_testimonial_quote" style="font-size:1.15rem;">„Hier stehen bald echte Stimmen aus der Community. 🩵"</p>
+        <p class="small muted" data-i18n="idx_testimonial_attrib">— Team Dogi</p>
       </div>
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-outline" href="stimmen.html">Mehr Stimmen</a>
+        <a class="btn btn-outline" href="stimmen.html" data-i18n="idx_testimonial_btn">Mehr Stimmen</a>
       </div>
     </div>
   </section>
@@ -232,12 +232,12 @@
   <!-- ================= FINALER CTA ================= -->
   <section class="hero">
     <div class="container text-center">
-      <span class="eyebrow">🩵 Bereit?</span>
-      <h2>Werde Teil von DOGFATHER UNIVERSE</h2>
-      <p class="lead" style="max-width:56ch;margin:0 auto;">Als Zuschauer:in, Creator, Scout oder Kooperationspartner — hier ist für jeden Platz.</p>
+      <span class="eyebrow" data-i18n="idx_cta_eyebrow">🩵 Bereit?</span>
+      <h2 data-i18n="idx_cta_h2">Werde Teil von DOGFATHER UNIVERSE</h2>
+      <p class="lead" data-i18n="idx_cta_lead" style="max-width:56ch;margin:0 auto;">Als Zuschauer:in, Creator, Scout oder Kooperationspartner — hier ist für jeden Platz.</p>
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-primary" href="links.html">Alle Links 🩵</a>
-        <a class="btn btn-secondary" href="bewerben.html">Jetzt bewerben</a>
+        <a class="btn btn-primary" href="links.html" data-i18n="idx_cta_btn_links">Alle Links 🩵</a>
+        <a class="btn btn-secondary" href="bewerben.html" data-i18n="idx_cta_btn_bewerben">Jetzt bewerben</a>
       </div>
     </div>
   </section>
@@ -247,6 +247,7 @@
 <script src="assets/js/data-modis.js"></script>
 <script src="assets/js/data-scouts.js"></script>
 <script src="assets/js/data-aktionen.js"></script>
+<script src="assets/js/i18n-index.js"></script>
 <script src="assets/js/main.js"></script>
 <script>
 // Gleiche Worker-URL wie in assets/js/forms.js / postfach.html eintragen,
@@ -277,19 +278,36 @@ document.addEventListener("DOMContentLoaded", () => {
   const liveText = document.getElementById("live-text");
 
   if (API_BASE_URL && liveDot && liveText) {
+    // Übersetzter Text hängt vom Live-Zustand ab (nicht per data-i18n
+    // abbildbar) — letzten bekannten Zustand merken, damit ein
+    // Sprachwechsel den Text sofort neu übersetzen kann, ohne auf den
+    // nächsten 30s-Poll warten zu müssen.
+    let letzterZustand = { status: "loading" };
+
+    const texteNeuSetzen = () => {
+      if (letzterZustand.status === "live") {
+        liveText.textContent = letzterZustand.titel
+          ? window.dogiUebersetzen("idx_live_now", { titel: letzterZustand.titel })
+          : window.dogiUebersetzen("idx_live_now_generic");
+      } else if (letzterZustand.status === "offline") {
+        liveText.textContent = window.dogiUebersetzen("idx_live_offline");
+      } else if (letzterZustand.status === "error") {
+        liveText.textContent = window.dogiUebersetzen("idx_live_error");
+      } else {
+        liveText.textContent = window.dogiUebersetzen("idx_live_loading");
+      }
+    };
+
     liveDot.classList.add("is-unknown");
-    liveText.textContent = "Status wird geladen …";
+    texteNeuSetzen();
+    document.addEventListener("dogi-sprache-geaendert", texteNeuSetzen);
 
     const applyLiveStatus = (data) => {
       const isLive = !!(data && data.live);
       liveDot.classList.remove("is-unknown");
       liveDot.classList.toggle("is-live", isLive);
-
-      if (isLive) {
-        liveText.textContent = data.title ? `Jetzt live: ${data.title}` : "Jetzt live!";
-      } else {
-        liveText.textContent = "Gerade offline";
-      }
+      letzterZustand = isLive ? { status: "live", titel: data.title } : { status: "offline" };
+      texteNeuSetzen();
     };
 
     const refreshLiveStatus = () =>
@@ -299,7 +317,8 @@ document.addEventListener("DOMContentLoaded", () => {
         .catch(() => {
           liveDot.classList.remove("is-live");
           liveDot.classList.add("is-unknown");
-          liveText.textContent = "Status gerade nicht abrufbar";
+          letzterZustand = { status: "error" };
+          texteNeuSetzen();
         });
 
     refreshLiveStatus();