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 ---------- */

index.html

@@ -44,35 +44,27 @@
       <!-- Zone 3: Nebel unten -->
       <span class="fog-ground"></span>
 
-      <!-- Husky #1 -->
-      <svg class="animal-silhouette husky n1" viewBox="0 0 200 200" style="top:10%;right:5%;width:min(26vw,230px);" xmlns="http://www.w3.org/2000/svg">
-        <path fill="currentColor" d="M100 18 L68 2 L74 46 Q48 58 43 92 Q39 132 68 162 Q100 184 132 162 Q161 132 157 92 Q152 58 126 46 L132 2 Z" />
-        <circle class="eye-glow" cx="80" cy="92" r="7" fill="var(--accent)" />
-        <circle class="eye-glow" cx="120" cy="92" r="7" fill="var(--accent)" />
-      </svg>
+      <!-- Husky #1 (Hauptfigur, mit Namen) -->
+      <div class="hero-critter husky main" style="top:8%;right:3%;">
+        <img src="assets/img/hero-husky.png" alt="Husky im Dogfather-Look" />
+        <span class="critter-label">DOGFATHER</span>
+      </div>
 
-      <!-- Hase #1 -->
-      <svg class="animal-silhouette rabbit n2" viewBox="0 0 200 220" style="bottom:20%;left:4%;width:min(20vw,180px);" xmlns="http://www.w3.org/2000/svg">
-        <path stroke="currentColor" stroke-width="20" stroke-linecap="round" fill="none" d="M84 8 Q72 60 78 104 M116 8 Q128 60 122 104" />
-        <ellipse cx="100" cy="146" rx="58" ry="52" fill="currentColor" />
-        <circle class="eye-glow" cx="80" cy="136" r="7" fill="var(--accent)" />
-        <circle class="eye-glow" cx="120" cy="136" r="7" fill="var(--accent)" />
-      </svg>
+      <!-- Hase #1 (Hauptfigur, mit Namen) -->
+      <div class="hero-critter rabbit main" style="bottom:16%;left:3%;">
+        <img src="assets/img/hero-rabbit.png" alt="Grauer Hase im HasiDog-Look" />
+        <span class="critter-label">HASIDOG</span>
+      </div>
 
       <!-- Husky #2 (kleiner, weiter hinten) -->
-      <svg class="animal-silhouette husky n3" viewBox="0 0 200 200" style="top:34%;left:10%;width:min(15vw,130px);animation-delay:-7s;" xmlns="http://www.w3.org/2000/svg">
-        <path fill="currentColor" d="M100 18 L68 2 L74 46 Q48 58 43 92 Q39 132 68 162 Q100 184 132 162 Q161 132 157 92 Q152 58 126 46 L132 2 Z" />
-        <circle class="eye-glow" cx="80" cy="92" r="7" fill="var(--accent)" />
-        <circle class="eye-glow" cx="120" cy="92" r="7" fill="var(--accent)" />
-      </svg>
+      <div class="hero-critter husky small" style="top:40%;left:9%;">
+        <img src="assets/img/hero-husky.png" alt="Husky im Dogfather-Look" />
+      </div>
 
       <!-- Hase #2 (kleiner, weiter hinten) -->
-      <svg class="animal-silhouette rabbit n4" viewBox="0 0 200 220" style="bottom:26%;right:14%;width:min(13vw,120px);animation-delay:-15s;" xmlns="http://www.w3.org/2000/svg">
-        <path stroke="currentColor" stroke-width="20" stroke-linecap="round" fill="none" d="M84 8 Q72 60 78 104 M116 8 Q128 60 122 104" />
-        <ellipse cx="100" cy="146" rx="58" ry="52" fill="currentColor" />
-        <circle class="eye-glow" cx="80" cy="136" r="7" fill="var(--accent)" />
-        <circle class="eye-glow" cx="120" cy="136" r="7" fill="var(--accent)" />
-      </svg>
+      <div class="hero-critter rabbit small" style="bottom:32%;right:11%;">
+        <img src="assets/img/hero-rabbit.png" alt="Grauer Hase im HasiDog-Look" />
+      </div>
     </div>
     <div class="container">
       <span class="eyebrow">🩵 DOGFATHER UNIVERSE</span>