Hero-Tiere durch echte Artworks ersetzt: Husky + grauer Hase aus vorhandenem Stream-Layout-Material (blaue Augen, Rüstung), mit DOGFATHER/HASIDOG-Labels, sanftes Schweben statt grober SVG-Silhouetten

assets/css/main.css

@@ -590,38 +590,55 @@ footer.site-footer {
   50%      { transform: translateX(3%); }
 }
 
-/* ---- Husky- & Hasen-Silhouetten mit leuchtenden blauen Augen ---- */
-.animal-silhouette {
+/* ---- Husky- & Hasen-Charaktere (echte Artworks) mit sanftem Schweben ---- */
+.hero-critter {
   position: absolute;
-  opacity: .16;
-  animation: silhouette-breathe 20s ease-in-out infinite;
+  pointer-events: none;
+  filter: drop-shadow(0 0 22px rgba(143, 217, 234, .5)) drop-shadow(0 0 46px rgba(139, 92, 246, .25));
+  animation: critter-float 9s ease-in-out infinite;
 }
-.animal-silhouette path,
-.animal-silhouette ellipse {
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-opacity: .5;
+.hero-critter img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 14px;
 }
-.animal-silhouette.husky { color: var(--accent); }
-.animal-silhouette.rabbit { color: #b7c0c9; }
-@keyframes silhouette-breathe {
-  0%, 100% { opacity: .12; transform: scale(1); }
-  50%      { opacity: .24; transform: scale(1.04); }
+.hero-critter.main {
+  width: min(16vw, 175px);
+  opacity: .95;
 }
-.eye-glow {
-  filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 2px #fff);
-  animation: eye-pulse 4.5s ease-in-out infinite;
+.hero-critter.small {
+  width: min(9vw, 105px);
+  opacity: .55;
+  animation-duration: 12s;
+  filter: drop-shadow(0 0 14px rgba(143, 217, 234, .35));
 }
-@keyframes eye-pulse {
-  0%, 100% { opacity: .55; }
-  50%      { opacity: 1; }
+.hero-critter.rabbit { animation-delay: -5s; }
+
+@keyframes critter-float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50%      { transform: translateY(-12px) rotate(-1.4deg); }
+}
+
+.critter-label {
+  position: absolute;
+  left: 50%;
+  bottom: -1.5rem;
+  transform: translateX(-50%);
+  font-family: var(--font-head);
+  font-weight: 800;
+  font-size: .68rem;
+  letter-spacing: .14em;
+  color: var(--accent);
+  text-shadow: 0 0 10px rgba(143, 217, 234, .7);
+  white-space: nowrap;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .aurora-band, .smoke-blob, .fog-ground, .animal-silhouette, .eye-glow { animation: none; opacity: .16; }
+  .aurora-band, .smoke-blob, .fog-ground, .hero-critter { animation: none; }
 }
 @media (max-width: 700px) {
-  .animal-silhouette.n3, .animal-silhouette.n4 { display: none; } /* auf kleinen Screens nur 2 Tiere, damit es nicht zu voll wird */
+  .hero-critter.small { display: none; } /* auf kleinen Screens nur die 2 Hauptfiguren */
 }
 
 /* ---------- Live-Status-Punkt ---------- */