Startseiten-Hero: animierte Atmosphäre (Polarlicht + Rauch + Husky/Hasen-Silhouetten mit leuchtenden blauen Augen), dezent und augenschonend

index.html

@@ -28,6 +28,26 @@
 <main>
   <!-- ================= HERO ================= -->
   <section class="hero">
+    <div class="hero-atmosphere" aria-hidden="true">
+      <span class="aurora-band a1"></span>
+      <span class="aurora-band a2"></span>
+      <span class="aurora-band a3"></span>
+      <span class="smoke-blob" style="width:340px;height:340px;top:8%;left:6%;"></span>
+      <span class="smoke-blob" style="width:260px;height:260px;bottom:10%;right:10%;animation-delay:-14s;"></span>
+
+      <svg class="animal-silhouette husky" viewBox="0 0 200 200" style="top:6%;right:4%;width:min(30vw,260px);" 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="6" fill="var(--accent)" />
+        <circle class="eye-glow" cx="120" cy="92" r="6" fill="var(--accent)" />
+      </svg>
+
+      <svg class="animal-silhouette rabbit" viewBox="0 0 200 220" style="bottom:4%;left:3%;width:min(24vw,210px);" 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="6" fill="var(--accent)" />
+        <circle class="eye-glow" cx="120" cy="136" r="6" fill="var(--accent)" />
+      </svg>
+    </div>
     <div class="container">
       <span class="eyebrow">🩵 DOGFATHER UNIVERSE</span>
       <h1>Streamer. Community. HasiDog. Manager.<br>Gemeinsam stark.</h1>