streamer.html: neuer "Casperlino"-Button unter dem Casper-Text, verlinkt zu casper.html

Neue CSS-Klasse .btn-legendary: eigener, besonders edler Button-Stil in
Babyblau + Silber (Chrome-Textglanz, rotierender Rand, Sparkles,
pulsierender Halo-Glow) — gleiche Machart wie .btn-silver, aber in der
Marken-Akzentfarbe und größer/kräftiger für einen "legendären" Auftritt.
Neuer i18n-Key str_casperlino_btn (Name bleibt in allen 5 Sprachen gleich).

assets/css/main.css

@@ -705,6 +705,105 @@ header.site-header {
   }
 }
 
+/* "Legendärer" Button (z.B. Casperlino-Link auf streamer.html): babyblau
+   + Silber, gleiche edle Machart wie .btn-silver (Chrome-Textglanz,
+   rotierender Rand, Sparkles, pulsierender Halo), aber größer, kräftiger
+   und in der Marken-Akzentfarbe --accent (Babyblau) statt neutralem Grau —
+   soll bewusst wie ein besonderes, "episches" Highlight wirken. */
+.btn-legendary {
+  position: relative;
+  isolation: isolate;
+  overflow: visible;
+  display: inline-flex;
+  align-items: center;
+  gap: .6rem;
+  padding: 1.05rem 2.7rem;
+  border-radius: 999px;
+  color: #fff;
+  font-weight: 800;
+  font-size: 1.18rem;
+  letter-spacing: .02em;
+  background: linear-gradient(160deg, #101b20, #0b0e14 55%, #16232a);
+  border: 1px solid rgba(143, 217, 234, .35);
+  text-decoration: none;
+  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, .45),
+              0 0 0 1px rgba(143, 217, 234, .06) inset;
+  animation: btn-legendary-halo 3s ease-in-out infinite;
+}
+.btn-legendary-text {
+  position: relative;
+  z-index: 2;
+  background: linear-gradient(100deg, #8fd9ea 0%, #ffffff 26%, #c7ccd1 42%, #8fd9ea 58%, #ffffff 76%, #c7ccd1 100%);
+  background-size: 260% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
+  animation: btn-legendary-text-shine 3.4s linear infinite;
+}
+.btn-legendary-spark {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  font-size: .95em;
+  filter: drop-shadow(0 0 5px rgba(143, 217, 234, .9));
+  animation: btn-legendary-twinkle 1.7s ease-in-out infinite;
+}
+.btn-legendary-spark:last-child { animation-delay: .85s; }
+.btn-legendary::before {
+  content: "";
+  position: absolute;
+  inset: -1.5px;
+  z-index: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: conic-gradient(from 0deg, #8fd9ea, #eef1f5, #c7ccd1, #ffffff, #8fd9ea, #7d8794, #8fd9ea);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: btn-legendary-shine-rotate 4.5s linear infinite;
+}
+.btn-legendary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  background: linear-gradient(115deg, transparent 32%, rgba(143, 217, 234, .55) 49%, transparent 66%);
+  background-size: 240% 100%;
+  mix-blend-mode: overlay;
+  animation: nav-cta-shimmer 4s linear infinite;
+  pointer-events: none;
+}
+.btn-legendary:hover {
+  transform: translateY(-2px) scale(1.03);
+  border-color: rgba(143, 217, 234, .55);
+  box-shadow: 0 14px 34px rgba(0, 0, 0, .5),
+              0 0 30px rgba(143, 217, 234, .5),
+              0 0 30px rgba(199, 204, 209, .35);
+}
+@keyframes btn-legendary-shine-rotate {
+  to { transform: rotate(360deg); }
+}
+@keyframes btn-legendary-text-shine {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 260% 50%; }
+}
+@keyframes btn-legendary-twinkle {
+  0%, 100% { opacity: .5; transform: scale(.85) rotate(0deg); }
+  50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
+}
+@keyframes btn-legendary-halo {
+  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 16px rgba(143, 217, 234, .22); }
+  50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 32px rgba(143, 217, 234, .5); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn-legendary, .btn-legendary::before, .btn-legendary::after, .btn-legendary-text, .btn-legendary-spark {
+    animation: none;
+  }
+}
+
 /* Kompakter Polarlicht-Button für Karten (z.B. Marinas Team-Modi-Karte →
    direkter Link zur Manager-Seite): exakt derselbe Mechanismus wie
    .btn-tiktok, nur kleiner und in den Spicy-Media-Markenfarben

assets/js/i18n-streamer.js

@@ -155,6 +155,10 @@ window.I18N_PAGE = {
     fr: "Sur bien des points, Casper ressemble beaucoup à son papa : calme, gentil, parfois complètement tête en l'air et toujours partant pour des bêtises. Mais dès qu'il s'agit de personnes ou de choses qu'il aime, il montre son côté protecteur.",
     pt: "Em muitos aspectos, Casper é igualzinho ao papai dele: calmo, amoroso, às vezes completamente distraído e sempre disposto a fazer travessuras. Mas assim que se trata de pessoas ou coisas que ele ama, ele mostra seu lado protetor.",
   },
+  str_casperlino_btn: {
+    de: "Casperlino", "de-CH": "Casperlino",
+    en: "Casperlino", fr: "Casperlino", pt: "Casperlino",
+  },
   str_casper_quote: {
     de: "Was Casper liebt, beschützt er mit seinem Leben.",
     "de-CH": "Was de Casper liebt, beschützt er mit sim Läbe.",

streamer.html

@@ -81,6 +81,7 @@
         <p data-i18n="str_casper_1">Ein ganz besonderer Teil meines Lebens und auch meiner Community ist mein Husky <a href="casper.html"><strong>Casper</strong></a>.</p>
         <p data-i18n="str_casper_2">Casper wurde adoptiert und stammt aus einem Kriegsgebiet in der Ukraine. Trotz allem, was er erlebt hat, besitzt er ein unglaublich großes und liebevolles Herz.</p>
         <p data-i18n="str_casper_3">In vielen Dingen ist Casper genauso wie sein Papa: ruhig, lieb, manchmal völlig verpeilt und immer für Dummheiten zu haben. Doch sobald es um Menschen oder Dinge geht, die er liebt, zeigt er seine beschützende Seite.</p>
+        <a class="btn-legendary" href="casper.html" style="margin-top:.8rem;"><span class="btn-legendary-spark" aria-hidden="true">✨</span><span class="btn-legendary-text" data-i18n="str_casperlino_btn">Casperlino</span><span class="btn-legendary-spark" aria-hidden="true">✨</span></a>
       </div>
     </div>
   </section>