/* Zaehlwiese Finger Rechner 2.0 – image-led storybook layout.
   Art: individual illustrated WebP images. No runtime canvas, SVG or emoji graphics. */
body:has(.zw223-finger){margin:0!important;overflow:hidden!important;background:#78b7c9!important}
#app:has(.zw223-finger){position:relative!important;display:block!important;isolation:isolate!important;overflow:hidden!important;width:100vw!important;max-width:none!important;min-width:0!important;height:100dvh!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important}
#app .main-content.zw223-finger{position:absolute!important;inset:0!important;z-index:1!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;background:transparent!important;box-shadow:none!important;touch-action:manipulation!important;user-select:none!important;-webkit-user-select:none!important}
.zw223-finger,.zw223-finger *{box-sizing:border-box}
.zw223-finger button{appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.zw223-finger button:focus-visible{outline:4px solid #fff4b1!important;outline-offset:2px}
.zw223-world{position:absolute;inset:0;z-index:-1;background:#8bc9bb url('/home-v123/background-portrait.webp') center/cover no-repeat}
.zw223-stage{position:relative;z-index:2;display:grid;grid-template-rows:12% 4.5% 18% 32% 17.5% 16%;width:min(100%,680px);height:100%;min-height:0;margin:auto;padding:max(5px,env(safe-area-inset-top)) 6px max(5px,env(safe-area-inset-bottom))}
.zw223-top{position:relative;display:flex;justify-content:center;align-items:center;min-height:0;z-index:4}
.zw223-title{display:block;width:63%;height:94%;object-fit:contain;filter:drop-shadow(0 3px 2px #775b3660)}
.zw223-home,.zw223-round{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;flex-direction:column;width:17%;max-width:104px;min-width:48px;height:70%;min-height:38px;border:0;background:url('/finger-v223/button-4.webp') center/contain no-repeat;color:#4a482c;font:800 clamp(11px,2.8vw,16px)/1.05 'Chalkboard SE','Segoe Print',system-ui,sans-serif;text-shadow:0 1px #fff8df70;text-align:center;box-shadow:none}
.zw223-home{left:1.4%;padding:2px 0 3px}
.zw223-home span{font:900 clamp(25px,7vw,41px)/.8 Georgia,serif;transform:translateY(2px)}
.zw223-home small{font:inherit;font-size:clamp(9px,2.4vw,12px);margin-top:2px}
.zw223-round{right:1.4%;background-image:url('/finger-v223/button-2.webp');font-size:clamp(16px,4vw,24px)}
.zw223-progress{display:flex;gap:clamp(3px,1vw,8px);align-items:center;justify-content:center;min-height:0}
.zw223-progress i{display:block;flex:none;width:clamp(9px,2.5vw,17px);height:clamp(9px,2.5vw,17px);border-radius:50%;background:#faedcf;border:2px solid #937953;box-shadow:0 1px 1px #6b714c45,inset 0 1px #fff;transform:rotate(8deg)}
.zw223-progress i:nth-child(2n){transform:rotate(-12deg) scale(.93)}
.zw223-progress i.done{background:#76bf76;border-color:#538955}
.zw223-progress i.current{background:#ffce51;border-color:#a1763b;box-shadow:0 0 0 2px #fff3bb,0 2px 2px #7a7554;transform:scale(1.15)}
.zw223-board{align-self:center;justify-self:center;display:flex;align-items:center;justify-content:center;width:min(100%,600px);height:100%;max-height:178px;min-height:0;background:url('/finger-v223/chalkboard.webp') center/100% 100% no-repeat;filter:drop-shadow(0 2px 2px #4b553861);padding:7% 8% 8%}
.zw223-math{display:flex;align-items:center;justify-content:center;gap:clamp(5px,3.5vw,22px);width:100%;white-space:nowrap;color:#fff7d8;font:900 clamp(31px,10.2vw,65px)/1 'Chalkboard SE','Marker Felt','Segoe Print',system-ui,sans-serif;letter-spacing:-.04em;text-shadow:1px 2px #648378,0 0 2px #fcf3dc}
.zw223-math b{color:#fbeab6;font-size:.8em;line-height:1;font-weight:700}
.zw223-math strong{color:#ffde78;font-size:1.13em}
.zw223-math strong.zw223-known{animation:zw223-bounce .62s cubic-bezier(.19,.9,.2,1.2) both}
.zw223-hands{position:relative;display:flex;align-items:center;justify-content:space-around;gap:0;width:100%;height:100%;min-height:0}
.zw223-hand-slot{position:relative;display:block;flex:0 0 44%;height:94%;min-width:0;min-height:0;border:0;background:none;box-shadow:none;padding:0;overflow:visible;transform-origin:center 78%;transition:filter .15s}
.zw223-hand-slot .zw223-paper{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 2px 3px #725e475a);pointer-events:none}
.zw223-slot-number{position:absolute;top:4%;left:9%;z-index:4;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#6d4c31;font:900 clamp(19px,4vw,31px)/1 'Chalkboard SE','Segoe Print',sans-serif;text-shadow:1px 1px #fff5d4}
.zw223-hand-image{position:absolute;z-index:3;left:7%;top:14%;display:block;width:86%;height:79%;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 2px 1px #7b644b45);pointer-events:none;transform-origin:50% 87%;animation:zw223-breathe 3.5s ease-in-out infinite}
.zw223-hand-slot:nth-of-type(3) .zw223-hand-image{animation-delay:-1.7s}
.zw223-empty-count{position:absolute;z-index:3;inset:20% 5% 12%;display:flex;align-items:center;justify-content:center;font:900 clamp(58px,15vw,102px)/1 'Chalkboard SE','Segoe Print',sans-serif;color:#bc9e72;opacity:.75;pointer-events:none}
.zw223-plus{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%) rotate(-9deg);width:clamp(32px,10%,61px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:url('/finger-v223/button-1.webp') center/contain no-repeat;color:#684a30;font:900 clamp(32px,8vw,56px)/1 'Chalkboard SE','Segoe Print',sans-serif;filter:drop-shadow(0 2px 1px #775d444d);pointer-events:none}
.zw223-hand-slot.zw223-touched .zw223-hand-image{animation:zw223-hand-tap .55s ease-out both!important}
.zw223-answers{display:flex;justify-content:space-evenly;align-items:center;gap:1.5%;width:100%;height:100%;min-height:0}
.zw223-answer{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:min(23%,116px);max-height:96%;aspect-ratio:1;border:0!important;border-radius:50%;background:var(--paint) center/100% 100% no-repeat!important;box-shadow:none!important;padding:2px 0 6px;color:#65432c!important;font:900 clamp(33px,9vw,59px)/1 'Chalkboard SE','Segoe Print','Marker Felt',sans-serif;letter-spacing:-.06em;text-shadow:1px 2px #fff8de,-1px -1px #805e3d5b;transition:transform .15s ease,filter .15s ease}
button.zw223-answer:active{transform:scale(.91)}
.zw223-answer.is-wrong,.zw223-answer.wrong{animation:zw223-no .36s ease-in-out;border-radius:50%;filter:saturate(1.5) sepia(.16)}
.zw223-answer.is-correct{filter:drop-shadow(0 0 7px #fff5a5);animation:zw223-bounce .55s ease-out both;color:#275c31!important}
.zw223-answer:not(.is-correct):is(span){opacity:.5}
.zw223-footer{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:0;height:100%;overflow:visible}
.zw223-friend{position:relative;align-self:end;display:block;width:23%;height:96%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 2px #3d65444a);pointer-events:none}
.zw223-moritz{transform:rotate(-4deg)}
.zw223-igor{transform:rotate(3deg)}
.zw223-footer-center{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-width:0;height:100%;padding:0 1%;text-align:center}
.zw223-instruction,.zw223-success-message{display:block;border-radius:17px;padding:8px 13px;background:#fff2d1e3;color:#63472d;font:900 clamp(13px,3.3vw,22px)/1.2 'Chalkboard SE','Segoe Print',system-ui,sans-serif;text-shadow:0 1px #fff9e6;box-shadow:0 2px 3px #4b6c4636;white-space:normal}
.zw223-success-message{color:#387348;background:#fff5d9e8;font-size:clamp(16px,4.1vw,25px);padding:3px 8px;box-shadow:none}
.zw223-next{display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(62px,18vw,100px);height:clamp(64px,18vw,102px);padding:0;border:0!important;background:transparent!important;position:relative;filter:drop-shadow(0 2px 2px #71594765);animation:zw223-bounce .5s ease-out both}
.zw223-next img{display:block;width:100%;height:80%;object-fit:contain;pointer-events:none}
.zw223-next span{font:900 clamp(11px,2.5vw,17px)/1 'Chalkboard SE','Segoe Print',system-ui,sans-serif;color:#4f372b;background:#fff0c5dd;border-radius:12px;padding:1px 6px;margin-top:-6px}
.zw223-next:active{transform:scale(.92)}
#app:has(.zw223-finger)>#zw95Restart{position:absolute!important;top:11.5%!important;left:2%!important;right:auto!important;z-index:12!important;width:clamp(40px,10vw,57px)!important;height:clamp(40px,10vw,57px)!important;min-width:0!important;min-height:0!important;opacity:.95!important}
#app:has(.zw223-finger)>#zw95Restart img{width:100%!important;height:100%!important;object-fit:contain!important}
.zw223-paper-rain{position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none}
.zw223-spark{position:absolute;left:var(--x);top:-12%;width:clamp(7px,1.4vw,13px);height:clamp(13px,2vw,22px);border-radius:3px 5px 2px 4px;background:#f1cb55;box-shadow:inset 2px 0 #fff9bd7c,1px 1px #7b7b6a48;animation:zw223-confetti var(--dur) ease-in var(--delay) both}
.zw223-spark:nth-child(5n){background:#f09cb3}
.zw223-spark:nth-child(5n + 1){background:#88c2ed}
.zw223-spark:nth-child(5n + 2){background:#c6a5d6}
.zw223-spark:nth-child(5n + 3){background:#9ccc8f}
.zw223-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.zw223-result .zw223-hand-slot:first-child .zw223-hand-image{animation:zw223-clap-left 1.15s ease-in-out 1 both}
.zw223-result .zw223-hand-slot:last-child .zw223-hand-image{animation:zw223-clap-right 1.15s ease-in-out 1 both}
@keyframes zw223-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3%) rotate(-1.5deg)}}
@keyframes zw223-hand-tap{0%,100%{transform:rotate(0)}40%{transform:rotate(-8deg) translateY(-5%)}75%{transform:rotate(4deg)}}
@keyframes zw223-bounce{0%{transform:scale(.82)}65%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes zw223-no{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes zw223-clap-left{0%,100%{transform:translateX(0) rotate(0)}38%,70%{transform:translateX(23%) rotate(9deg)}}
@keyframes zw223-clap-right{0%,100%{transform:translateX(0) rotate(0)}38%,70%{transform:translateX(-23%) rotate(-9deg)}}
@keyframes zw223-confetti{0%{transform:translate(0,0) rotate(0);opacity:0}9%{opacity:1}95%{opacity:1}100%{transform:translate(var(--drift),110dvh) rotate(var(--turn));opacity:0}}
@media (orientation:landscape){
  .zw223-world{background-image:url('/home-v123/background-landscape.webp')}
  .zw223-stage{width:min(100%,1200px);height:min(100%,720px);top:50%;transform:translateY(-50%);grid-template-columns:32% 40% 28%;grid-template-rows:17% 65% 18%;padding:3px max(8px,env(safe-area-inset-right)) 3px max(8px,env(safe-area-inset-left))}
  .zw223-top{grid-column:1/4;grid-row:1}
  .zw223-title{width:37%;height:98%}
  .zw223-home,.zw223-round{width:10%;max-width:110px;height:78%;font-size:clamp(12px,2vw,19px)}
  .zw223-home span{font-size:clamp(26px,4vw,38px)}
  .zw223-progress{grid-column:1;grid-row:3;align-self:end;justify-self:center;margin-bottom:8%;gap:4px}
  .zw223-progress i{width:clamp(8px,1.2vw,13px);height:clamp(8px,1.2vw,13px)}
  .zw223-board{grid-column:1;grid-row:2;width:98%;height:57%;min-height:108px;max-height:180px;align-self:center;padding:6%}
  .zw223-math{font-size:clamp(26px,4vw,52px);gap:clamp(3px,1vw,12px)}
  .zw223-hands{grid-column:2;grid-row:2}
  .zw223-hand-slot{flex-basis:47%;height:95%}
  .zw223-plus{width:12%;font-size:clamp(29px,4vw,47px)}
  .zw223-slot-number{font-size:clamp(18px,3vw,28px)}
  .zw223-answers{grid-column:3;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:1% 3%;padding:2%}
  .zw223-answer{width:min(91%,113px);height:auto;max-height:98%;font-size:clamp(31px,5.4vw,55px)}
  .zw223-footer{grid-column:2/4;grid-row:3;height:100%;align-self:end;justify-self:stretch}
  .zw223-friend{width:18%;height:100%}
  .zw223-footer-center{max-width:none}
  .zw223-instruction{font-size:clamp(12px,1.6vw,18px)}
  .zw223-success-message{font-size:clamp(13px,1.9vw,21px);padding:1px 8px}
  .zw223-next{width:clamp(51px,9vh,76px);height:clamp(46px,9vh,70px)}
  .zw223-next span{font-size:clamp(10px,1.5vw,13px)}
  #app:has(.zw223-finger)>#zw95Restart{top:auto!important;bottom:2%!important;left:1%!important;right:auto!important;width:42px!important;height:42px!important}
}
@media (orientation:landscape) and (max-height:430px){
  .zw223-stage{grid-template-rows:17% 66% 17%}
  .zw223-board{height:68%;min-height:95px}
  .zw223-hands .zw223-hand-image{top:13%;height:80%}
  .zw223-footer .zw223-instruction{padding:4px 8px}
  .zw223-title{width:34%}
}
@media (prefers-reduced-motion:reduce){
  .zw223-finger *, .zw223-finger *::before,.zw223-finger *::after{animation:none!important;transition:none!important}
}


/* v223 QA polish: the one-finger introduction has one centered paper card. */
.zw223-hands.zw223-one-hand{justify-content:center}
.zw223-one-hand .zw223-hand-slot{flex:0 0 64%;max-width:290px;height:97%}
.zw223-one-hand .zw223-slot-number{left:11%}
.zw223-result .zw223-one-hand .zw223-hand-image{animation:zw223-hand-tap 1.1s ease-out both}
#app .zw223-finger #nextBtn.zw223-next{background:none!important;border:none!important;box-shadow:none!important;opacity:1!important;transform:none}
#app .zw223-finger #nextBtn.zw223-next:before,#app .zw223-finger #nextBtn.zw223-next:after{content:none!important;display:none!important}
#app .zw223-finger #nextBtn.zw223-next img{display:block!important;position:relative!important;opacity:1!important;visibility:visible!important;width:100%!important;max-width:100%!important;height:75%!important;object-fit:contain!important;filter:none!important;transform:none!important}
@media(orientation:landscape){.zw223-one-hand .zw223-hand-slot{flex-basis:58%;max-width:235px}}


/* The shared app replaces the contents of #nextBtn with a generic SVG.
   Render the illustrated image as a CSS background so the button stays hand-painted. */
#app .zw223-finger button#nextBtn.zw223-next,
#app .zw223-finger button#nextBtn.zw223-next[data-zw-icon]{
  background:url('/bakery-v166/next.webp') center center / contain no-repeat!important;
  border:0!important;box-shadow:none!important;min-height:60px!important;
}
#app .zw223-finger button#nextBtn.zw223-next svg{display:none!important}