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

assets/css/main.css

@@ -248,7 +248,9 @@ header.site-header {
   position: relative;
   padding: clamp(4rem, 10vw, 7rem) 0;
   text-align: center;
+  overflow: hidden;
 }
+.hero > .container { position: relative; z-index: 1; }
 .hero .worlds {
   margin: .6rem 0 1.2rem;
   color: var(--text-muted);
@@ -503,6 +505,77 @@ footer.site-footer {
   .collage-item, .collage-item:nth-child(2) { width: 140px; }
 }
 
+/* ---------- Hero-Atmosphäre (Startseite): Polarlicht + Rauch + Tier-Silhouetten ---------- */
+.hero-atmosphere {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* Polarlicht-Bänder */
+.aurora-band {
+  position: absolute;
+  width: 140%;
+  height: 55%;
+  left: -20%;
+  border-radius: 50%;
+  filter: blur(70px);
+  opacity: .14;
+  mix-blend-mode: screen;
+  animation: aurora-drift 30s ease-in-out infinite;
+}
+.aurora-band.a1 { top: -12%; background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); animation-duration: 26s; }
+.aurora-band.a2 { top: 18%; background: radial-gradient(ellipse at center, var(--accent-2) 0%, transparent 70%); animation-duration: 36s; animation-delay: -9s; opacity: .12; }
+.aurora-band.a3 { top: 42%; background: radial-gradient(ellipse at center, #6ee7d8 0%, transparent 70%); animation-duration: 44s; animation-delay: -18s; opacity: .09; }
+
+@keyframes aurora-drift {
+  0%, 100% { transform: translateX(-4%) translateY(0) scaleY(1); }
+  50%      { transform: translateX(4%) translateY(-3%) scaleY(1.18); }
+}
+
+/* Rauch/Schatten-Schwaden */
+.smoke-blob {
+  position: absolute;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%);
+  filter: blur(35px);
+  animation: smoke-float 32s ease-in-out infinite;
+}
+@keyframes smoke-float {
+  0%, 100% { transform: translate(0,0) scale(1); }
+  50%      { transform: translate(3%, -4%) scale(1.1); }
+}
+
+/* Husky- & Hasen-Silhouetten mit leuchtenden blauen Augen */
+.animal-silhouette {
+  position: absolute;
+  opacity: .06;
+  animation: silhouette-breathe 20s ease-in-out infinite;
+}
+.animal-silhouette.husky { color: var(--accent); }
+.animal-silhouette.rabbit { color: #9aa6b2; }
+@keyframes silhouette-breathe {
+  0%, 100% { opacity: .045; transform: scale(1); }
+  50%      { opacity: .09; transform: scale(1.035); }
+}
+.eye-glow {
+  filter: drop-shadow(0 0 4px var(--accent));
+  animation: eye-pulse 4.5s ease-in-out infinite;
+}
+@keyframes eye-pulse {
+  0%, 100% { opacity: .45; }
+  50%      { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aurora-band, .smoke-blob, .animal-silhouette, .eye-glow { animation: none; opacity: .07; }
+}
+@media (max-width: 700px) {
+  .animal-silhouette.rabbit { display: none; } /* auf kleinen Screens nur Husky, damit es nicht zu voll wird */
+}
+
 /* ---------- Live-Status-Punkt ---------- */
 .live-dot {
   display: inline-block;

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>