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;