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/css/main.css

@@ -209,9 +209,7 @@ header.site-header {
   padding: .4rem 1rem .4rem .55rem;
   border-radius: 999px;
   border: 1px solid color-mix(in srgb, var(--sprach-glut) 55%, rgba(255, 255, 255, .18));
-  background:
+  background: rgba(10, 11, 15, .55);
-    radial-gradient(circle at 28% 25%, color-mix(in srgb, var(--sprach-glut) 30%, transparent), transparent 65%),
-    rgba(255, 255, 255, .04);
   box-shadow:
     inset 0 0 0 1px rgba(255, 255, 255, .05),
     0 3px 10px rgba(0, 0, 0, .35),
@@ -227,6 +225,25 @@ header.site-header {
     0 6px 16px rgba(0, 0, 0, .4),
     0 0 24px color-mix(in srgb, var(--sprach-glut) 60%, transparent);
 }
+/* Ebene: die "Landesflagge" als weiche, wandernde Aurora-Wolke im
+   Hintergrund des Knopfs — mehrere Farbflecken statt nur eines Farbtons,
+   dieselbe Machart wie beim Bewerben-Knopf, nur mit den 2-3 echten
+   Farben DIESER Sprache (siehe SPRACHEN.farbstopps in main.js). */
+.sprach-schalter > button::before {
+  content: "";
+  position: absolute;
+  inset: -65%;
+  z-index: -2;
+  background: var(--sprach-aurora);
+  filter: blur(8px) saturate(1.3);
+  opacity: .85;
+  animation: sprach-aurora-drift 7s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+@keyframes sprach-aurora-drift {
+  from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
+  to   { transform: translate(3%, 3%) rotate(8deg) scale(1.12); }
+}
 /* Ebene: ein schmales Lichtband, das einmal quer durch den Knopf läuft —
    dieselbe Machart wie beim Bewerben-Knopf, nur in der Sprachfarbe. */
 .sprach-schalter > button::after {
@@ -297,14 +314,20 @@ header.site-header {
    Flaggen-Emojis grundsätzlich nicht als Bild dar (siehe SPRACHEN oben in
    main.js). Ein außermittiges Glanzlicht + langsame Drehung lassen sie
    wie eine echte, beleuchtete Kugel wirken statt einer flachen Fläche. */
+/* Kugel-Grundfarbe: conic-gradient aus den 2-3 echten Landesfarben
+   dieser Sprache (--sprach-stopps, siehe SPRACHEN.farbstopps in
+   main.js) — wirkt wie eine kleine, marmoriert eingefärbte Kugel statt
+   nur einem Farbton, plus Eigendrehung, damit die Farbmischung sichtbar
+   "lebt". Glanzlicht kommt separat über ::before oben drauf. */
 .sprach-kugel {
+  position: relative;
   display: inline-block;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   vertical-align: -4px;
-  background:
+  overflow: hidden;
-    radial-gradient(circle at 32% 26%, #fff 0%, color-mix(in srgb, var(--sprach-glut) 85%, white 15%) 16%, var(--sprach-glut) 52%, color-mix(in srgb, var(--sprach-glut) 55%, black 45%) 100%);
+  background: conic-gradient(from 0deg, var(--sprach-stopps));
   box-shadow:
     inset -3px -3px 5px rgba(0, 0, 0, .5),
     0 0 8px 2px color-mix(in srgb, var(--sprach-glut) 75%, transparent),
@@ -312,6 +335,14 @@ header.site-header {
   flex-shrink: 0;
   animation: sprach-glut-puls 3.2s ease-in-out infinite, sprach-kugel-dreh 7s linear infinite;
 }
+.sprach-kugel::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 16%, transparent 55%);
+  mix-blend-mode: overlay;
+}
 .sprach-schalter .nav-dropdown a .sprach-kugel { width: 16px; height: 16px; }
 /* Die Sprachfarbe zieht sich auch über die Schrift — kräftiger,
    leuchtender Text statt neutralem Weiß, plus ein sanft pulsierender
@@ -334,7 +365,7 @@ header.site-header {
   to   { transform: rotate(360deg); }
 }
 @media (prefers-reduced-motion: reduce) {
-  .sprach-kugel, .sprach-kurz, .sprach-schalter > button::after, .sprach-schalter .nav-dropdown { animation: none; }
+  .sprach-kugel, .sprach-kurz, .sprach-schalter > button::before, .sprach-schalter > button::after, .sprach-schalter .nav-dropdown { animation: none; }
 }
 
 /* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —

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" },
+    // "glut" = einzelne Leuchtfarbe (Text-Glow, Dropdown-Zeile).
-    { code: "de-CH", kurz: "CH", name: "Schwiizerdütsch", glut: "#ff3b3b" },
+    // "farbstopps" = mehrere Landesfarben, aus denen Knopf-Aurora und
-    { code: "en", kurz: "EN", name: "English", glut: "#2f6bff" },
+    // Kugel-Verlauf gemischt werden — daher wirklich "gemischte Farben
-    { code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff" },
+    // wie bei den jeweiligen Nationalflaggen", nicht nur ein Farbton.
-    { code: "pt", kurz: "PT", name: "Português", glut: "#20d97a" },
+    { 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>`;