/* Zählwiese v232: user-approved applause illustration at EXACT phone width.
   Preserve original aspect ratio, no cover crop, no upscaling to screen height.
   The hands themselves stay static: only the entire image fades and glides. */
html body .zw229-applause,
html body .zw222-celebration .zw229-applause,
html body #app .zw223-finger .zw229-applause {
  position:fixed!important;
  top:auto!important;
  right:auto!important;
  bottom:0!important;
  left:50%!important;
  width:min(100vw, 430px)!important;
  height:auto!important;
  aspect-ratio:500 / 485!important;
  max-width:min(100vw, 430px)!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  display:block!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
  transform:translate3d(-50%,25px,0);
  z-index:9998!important;
}
html body .zw229-applause .zw229-applause-art {
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  aspect-ratio:500 / 485!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
}
html body .zw229-applause .zw229-sparkles {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}
html body .zw229-applause.zw229-show {
  animation:zw232-phone-applause-float 2.55s ease-in-out both!important;
}
@keyframes zw232-phone-applause-float {
  0%   {opacity:0;transform:translate3d(-50%,32px,0)}
  20%  {opacity:1;transform:translate3d(-50%,10px,0)}
  60%  {opacity:1;transform:translate3d(-50%,0,0)}
  78%  {opacity:1;transform:translate3d(-50%,-12px,0)}
  100% {opacity:0;transform:translate3d(-50%,-42px,0)}
}
/* Even the largest phones get exactly their viewport width. */
@media (max-width:600px) and (orientation:portrait) {
 html body .zw229-applause,
 html body .zw222-celebration .zw229-applause,
 html body #app .zw223-finger .zw229-applause {
   width:100vw!important;
   max-width:100vw!important;
 }
}
/* In landscape fit the natural 500:485 illustration below the shorter edge;
   keep its proportions instead of cropping or distorting it. */
@media (orientation:landscape) {
 html body .zw229-applause,
 html body .zw222-celebration .zw229-applause,
 html body #app .zw223-finger .zw229-applause {
   width:min(100vw,430px,calc(96dvh * 500 / 485))!important;
   max-width:min(100vw,430px,calc(96dvh * 500 / 485))!important;
 }
}
@media (prefers-reduced-motion:reduce) {
 html body .zw229-applause.zw229-show {
   animation:zw232-phone-reduced 2.55s linear both!important;
 }
}
@keyframes zw232-phone-reduced {
 0%,100%{opacity:0;transform:translate3d(-50%,0,0)}
 16%,80%{opacity:1;transform:translate3d(-50%,0,0)}
}