Sprachschalter: Knopf + Kugel jetzt mit echten gemischten Flaggenfarben

Statt nur einem Farbton (glut) je Sprache gibt es jetzt 2-3 echte
Landesfarben (farbstopps) pro Sprache: DE schwarz-rot-gold, CH rot-weiß,
EN blau-weiß-rot, FR blau-weiß-rot, PT grün-gold-rot. Der Knopf-
Hintergrund ist jetzt eine wandernde Aurora-Wolke aus genau diesen
Farben (analog zum Bewerben-Knopf), die Kugel ein rotierender
conic-gradient aus denselben Farben mit Glanzlicht obendrauf - wirkt
wie eine kleine, echt gemischt eingefärbte Kugel statt einer flachen
Einzelfarbe.

assets/js/main.js

@@ -43,11 +43,15 @@
      aber bewusst gesättigter/heller (nicht die originalen, oft eher
      stumpfen Flaggenfarben), damit der Polarlicht-Effekt gut trägt. */
   const SPRACHEN = [
-    { code: "de", kurz: "DE", name: "Deutsch", glut: "#ffb300" },
-    { code: "de-CH", kurz: "CH", name: "Schwiizerdütsch", glut: "#ff3b3b" },
-    { code: "en", kurz: "EN", name: "English", glut: "#2f6bff" },
-    { code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff" },
-    { code: "pt", kurz: "PT", name: "Português", glut: "#20d97a" },
+    // "glut" = einzelne Leuchtfarbe (Text-Glow, Dropdown-Zeile).
+    // "farbstopps" = mehrere Landesfarben, aus denen Knopf-Aurora und
+    // Kugel-Verlauf gemischt werden — daher wirklich "gemischte Farben
+    // wie bei den jeweiligen Nationalflaggen", nicht nur ein Farbton.
+    { code: "de", kurz: "DE", name: "Deutsch", glut: "#ffb300", farbstopps: ["#1a1a1a", "#dd0000", "#ffce00"] },
+    { code: "de-CH", kurz: "CH", name: "Schwiizerdütsch", glut: "#ff3b3b", farbstopps: ["#d52b1e", "#ffffff", "#d52b1e"] },
+    { code: "en", kurz: "EN", name: "English", glut: "#2f6bff", farbstopps: ["#00247d", "#ffffff", "#cf142b"] },
+    { code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff", farbstopps: ["#0055a4", "#ffffff", "#ef4135"] },
+    { code: "pt", kurz: "PT", name: "Português", glut: "#20d97a", farbstopps: ["#046a38", "#ffcc00", "#da291c"] },
   ];
   const SPRACHE_SCHLUESSEL = "dogi-sprache";
 
@@ -256,11 +260,27 @@
   /* Sprachumschalter — eigener nav-group-artiger Dropdown, zeigt die
      aktuell gewählte Sprache (Flagge + Kürzel) und listet beim Klick die
      übrigen 4 Sprachen auf. */
+  /* Aus den 2-3 Landesfarben einer Sprache ein Aurora-Wolkenbild bauen
+     (mehrere versetzte, weiche Farbflecken — dieselbe Machart wie beim
+     Bewerben-Knopf, nur mit den Farben DIESER Sprache) plus eine
+     Stopp-Liste für den conic-gradient der Kugel. */
+  function sprachAurora(farben) {
+    const positionen = ["22% 30%", "72% 28%", "48% 78%"];
+    return farben
+      .map((f, i) => `radial-gradient(circle at ${positionen[i % positionen.length]}, ${f}, transparent 60%)`)
+      .join(", ");
+  }
+  function sprachKugelStopps(farben) {
+    return [...farben, farben[0]].join(", ");
+  }
+
   function renderSprachSchalter() {
     const aktuell = getSprache();
     const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0];
+    const styleFuer = (s) =>
+      `--sprach-glut:${s.glut};--sprach-aurora:${sprachAurora(s.farbstopps)};--sprach-stopps:${sprachKugelStopps(s.farbstopps)};`;
     return `
-      <div class="nav-group sprach-schalter" style="--sprach-glut:${aktiv.glut};">
+      <div class="nav-group sprach-schalter" style="${styleFuer(aktiv)}">
         <button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">
           <span class="sprach-kugel" aria-hidden="true"></span>
           <span class="sprach-kurz">${aktiv.kurz}</span> <span aria-hidden="true">▾</span>
@@ -268,7 +288,7 @@
         <div class="nav-dropdown">
           ${SPRACHEN.map(
             (s) =>
-              `<a href="#" data-sprache="${s.code}" style="--sprach-glut:${s.glut};"${s.code === aktuell ? ' class="active"' : ""}><span class="sprach-kugel" aria-hidden="true"></span>${s.name}</a>`
+              `<a href="#" data-sprache="${s.code}" style="${styleFuer(s)}"${s.code === aktuell ? ' class="active"' : ""}><span class="sprach-kugel" aria-hidden="true"></span>${s.name}</a>`
           ).join("")}
         </div>
       </div>`;