/* Adventsstube (Oma vs. Opa): was sich bewegt und wo die Punkte sitzen.
   Positionen in % des Bildes stube.jpg (1536 × 1024). */

/* Schneefall – nur im Fenster */
.schnee { position: absolute; left: 27.3%; top: 1.6%; width: 24.6%; height: 32.8%; overflow: hidden; pointer-events: none; }
.schnee i { position: absolute; top: -4%; width: .5cqw; height: .5cqw; min-width: 3px; min-height: 3px; border-radius: 50%; background: #fff; opacity: .9; animation: schnee 9s linear infinite; }
.schnee i:nth-child(1)  { left: 4%;  animation-delay: 0s; }
.schnee i:nth-child(2)  { left: 12%; animation-delay: -1.5s; animation-duration: 11s; }
.schnee i:nth-child(3)  { left: 19%; animation-delay: -3s; width: .35cqw; height: .35cqw; }
.schnee i:nth-child(4)  { left: 26%; animation-delay: -4.5s; animation-duration: 8s; }
.schnee i:nth-child(5)  { left: 33%; animation-delay: -6s; }
.schnee i:nth-child(6)  { left: 40%; animation-delay: -7.5s; animation-duration: 12s; width: .35cqw; height: .35cqw; }
.schnee i:nth-child(7)  { left: 47%; animation-delay: -2s; }
.schnee i:nth-child(8)  { left: 54%; animation-delay: -5s; animation-duration: 10s; }
.schnee i:nth-child(9)  { left: 61%; animation-delay: -8s; width: .35cqw; height: .35cqw; }
.schnee i:nth-child(10) { left: 68%; animation-delay: -1s; animation-duration: 11s; }
.schnee i:nth-child(11) { left: 75%; animation-delay: -3.5s; }
.schnee i:nth-child(12) { left: 82%; animation-delay: -6.5s; animation-duration: 9.5s; }
.schnee i:nth-child(13) { left: 89%; animation-delay: -0.5s; width: .35cqw; height: .35cqw; }
.schnee i:nth-child(14) { left: 95%; animation-delay: -4s; animation-duration: 12s; }
.schnee i:nth-child(15) { left: 8%;  animation-delay: -7s; animation-duration: 13s; width: .3cqw; height: .3cqw; }
.schnee i:nth-child(16) { left: 37%; animation-delay: -9s; animation-duration: 13s; width: .3cqw; height: .3cqw; }
.schnee i:nth-child(17) { left: 64%; animation-delay: -11s; animation-duration: 14s; width: .3cqw; height: .3cqw; }
.schnee i:nth-child(18) { left: 86%; animation-delay: -2.5s; animation-duration: 13s; width: .3cqw; height: .3cqw; }
@keyframes schnee {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1cqw, 7cqw); }
  50%  { transform: translate(-.6cqw, 14cqw); }
  75%  { transform: translate(.8cqw, 21cqw); }
  100% { transform: translate(0, 28cqw); }
}

/* Glut im Kachelofen */
.ofenglut { position: absolute; left: 0%; top: 26%; width: 17%; height: 26%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,150,40,.6), rgba(255,110,20,.2) 60%, rgba(255,110,20,0));
  mix-blend-mode: screen; animation: glut 3.2s ease-in-out infinite; }
@keyframes glut { 0%, 100% { opacity: .65; transform: scale(1); } 30% { opacity: 1; transform: scale(1.05); } 55% { opacity: .75; } 80% { opacity: .95; transform: scale(1.02); } }

/* Hängelampe */
.lampenschein { position: absolute; left: 36%; top: -8%; width: 26%; height: 36%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,214,130,.5), rgba(255,190,90,.15) 55%, rgba(255,190,90,0));
  mix-blend-mode: screen; animation: lampe 6s ease-in-out infinite; }
@keyframes lampe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* Kerzenflammen am Adventskranz */
.flamme { position: absolute; width: 5cqw; height: 6cqw; margin: -4cqw 0 0 -2.5cqw; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,240,180,.9), rgba(255,190,80,.35) 45%, rgba(255,160,60,0));
  mix-blend-mode: screen; transform-origin: 50% 90%; animation: flackern 1.7s ease-in-out infinite; }
.f1 { left: 39.8%; top: 70.5%; }
.f2 { left: 45.1%; top: 69.5%; animation-delay: -.4s; animation-duration: 1.9s; }
.f3 { left: 52.5%; top: 69.5%; animation-delay: -.9s; animation-duration: 1.5s; }
.f4 { left: 50.3%; top: 76%;   animation-delay: -1.2s; animation-duration: 2.1s; }
@keyframes flackern {
  0%, 100% { opacity: .85; transform: scale(1, 1); }
  20% { opacity: 1; transform: scale(.95, 1.08) translateX(.1cqw); }
  40% { opacity: .75; transform: scale(1.04, .96); }
  60% { opacity: .95; transform: scale(.97, 1.05) translateX(-.1cqw); }
  80% { opacity: .8; transform: scale(1.02, .98); }
}

/* Lichter am Christbaum funkeln */
.baumlichter { position: absolute; inset: 0; pointer-events: none; }
.baumlichter i { position: absolute; width: 1.6cqw; height: 1.6cqw; margin: -.8cqw 0 0 -.8cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,250,210,1), rgba(255,210,120,.45) 45%, rgba(255,210,120,0)); mix-blend-mode: screen; animation: funkeln 2.6s ease-in-out infinite; }
.baumlichter i:nth-child(1) { left: 95.6%; top: 8.5%; }
.baumlichter i:nth-child(2) { left: 97.1%; top: 11.3%; animation-delay: -.7s; }
.baumlichter i:nth-child(3) { left: 91.7%; top: 18%;  animation-delay: -1.3s; animation-duration: 3.1s; }
.baumlichter i:nth-child(4) { left: 97.5%; top: 22%;  animation-delay: -2s; }
.baumlichter i:nth-child(5) { left: 92%;   top: 33.5%; animation-delay: -.4s; animation-duration: 2.2s; }
.baumlichter i:nth-child(6) { left: 99.4%; top: 32%;  animation-delay: -1.7s; }
.baumlichter i:nth-child(7) { left: 98%;   top: 43.5%; animation-delay: -1s; animation-duration: 3.4s; }
@keyframes funkeln { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }

/* Dampf aus den Punschgläsern */
.dampf-oma { left: 24.9%; top: 48.8%; }
.dampf-opa { left: 68.5%; top: 45.4%; }

/* Sprechblasen */
.blase-oma   { left: 6%;  top: 9%;  transform-origin: 80% 100%; }
.blase-opa   { left: 61%; top: 4%;  transform-origin: 10% 100%; }
.blase-enkel { left: 39%; top: 14%; transform-origin: 10% 100%; }

/* Punkte */
.p-buch    { left: 48.5%; top: 61%; }
.p-tafel   { left: 83.7%; top: 19%; }
.p-joker   { left: 55.6%; top: 36.5%; }
.p-flieger { left: 72%;   top: 50.8%; }
.p-kekse   { left: 74.2%; top: 85%; }
.p-ofen    { left: 8.5%;  top: 39%; }

@media (prefers-reduced-motion: reduce) {
  .schnee i, .ofenglut, .lampenschein, .flamme, .baumlichter i { animation: none; }
  .schnee { display: none; }
}