/* Zählwiese – anatomisch festgelegte Fingerposen, vollständig im Bild.
   Jede Pose ist eine eigenständige Illustration. Der Handgelenkbereich läuft weich aus. */
.visual-board:has(.original-hand){
  overflow:visible!important;
  align-items:stretch!important;
}
.count-card:has(.original-hand){
  overflow:visible!important;
  padding:15px 4px 3px!important;
  justify-content:flex-end!important;
  min-width:0!important;
}
.count-card:has(.original-hand):after{display:none!important}
.hand-set{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  gap:0!important;
}
.hand-set .hand-svg.original-hand{
  display:block!important;
  flex:0 1 auto!important;
  height:100%!important;
  width:auto!important;
  min-height:0!important;
  max-width:99%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  border:0!important;
  overflow:visible!important;
  filter:drop-shadow(1px 2px 1px #5e65432b)!important;
}
.hand-set.two .hand-svg.original-hand{
  width:49%!important;
  max-width:49%!important;
  height:100%!important;
  margin:0!important;
}
.result-visual:has(.original-hand){overflow:visible!important;padding:8px 10px 5px!important}
.result-hands{
  height:clamp(155px,27vh,216px)!important;
  max-height:216px!important;
  min-height:0!important;
  width:100%!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
}
.result-hands .hand-svg.original-hand,
.result-hands .hand-svg.original-hand:only-child{
  display:block!important;
  flex:0 1 auto!important;
  width:auto!important;
  height:100%!important;
  max-width:49%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
  filter:drop-shadow(1px 2px 1px #5e654329)!important;
}
.result-hands .hand-svg.original-hand:only-child{max-width:90%!important}
.mirror-hand{transform:scaleX(-1)!important}
@media (max-height:680px){
 .count-card:has(.original-hand){padding:10px 1px 2px!important}
 .result-hands{height:clamp(127px,23vh,166px)!important}
}
@media (max-width:360px){
 .hand-set .hand-svg.original-hand{max-width:98%!important}
 .result-hands{gap:0!important}
}
@media (prefers-reduced-motion:reduce){
 .original-hand{transition:none!important;animation:none!important}
}

/* Handgezeichnete Gesten: niemals Bild beschneiden oder im CSS seitlich abschneiden. */
.story-hand{object-fit:contain!important;object-position:center center!important;image-rendering:auto;clip-path:none!important;background:transparent!important;border:0!important;max-height:100%!important}
.hand-set,.result-hands{overflow:visible!important}
.count-card:has(.story-hand){overflow:visible!important;min-width:0!important}