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:
-    radial-gradient(circle at 28% 25%, color-mix(in srgb, var(--sprach-glut) 30%, transparent), transparent 65%),
-    rgba(255, 255, 255, .04);
+  background: rgba(10, 11, 15, .55);
   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:
-    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%);
+  overflow: hidden;
+  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) —