/* ZÄHLWIESE V71 / ZAHLEN-PICKNICK: all-new illustrated, text-free play scene. */
#app:has(.zw-picnic-world){
 position:relative!important;
 display:block!important;
 height:100dvh!important;min-height:100dvh!important;
 max-height:100dvh!important;
 overflow:hidden!important;
 background:#8acb6c!important;
}
#app:has(.zw-picnic-world)>.app-header{
 position:absolute!important;inset:0 0 auto!important;
 height:0!important;min-height:0!important;
 margin:0!important;padding:0!important;border:0!important;
 z-index:50!important;pointer-events:none!important;
 background:transparent!important;box-shadow:none!important;
}
#app:has(.zw-picnic-world)>.app-header .brand{display:none!important}
#app:has(.zw-picnic-world)>.app-header .header-tools{
 display:block!important;position:absolute!important;
 top:max(8px,env(safe-area-inset-top))!important;
 right:max(10px,env(safe-area-inset-right))!important;
 pointer-events:auto!important;
}
#app:has(.zw-picnic-world)>.app-header #homeBtn{
 display:grid!important;place-items:center!important;
 width:49px!important;height:49px!important;
 min-width:49px!important;min-height:49px!important;
 background:radial-gradient(circle at 35% 18%,#fff7db,#edca91)!important;
 border:3px solid #956b43!important;
 border-radius:50%!important;
 box-shadow:inset 0 1px 2px #fff7e5,0 3px 1px #75563888!important;
 color:#684f34!important;pointer-events:auto!important;
}
#app:has(.zw-picnic-world)>.app-header .zw-home-label{display:none!important}
#app:has(.zw-picnic-world)>.app-header .zw-go-home svg{width:27px!important;height:27px!important}
#app .zw-picnic-world.main-content{
 position:absolute!important;inset:0!important;
 display:block!important;
 height:100%!important;max-height:100%!important;min-height:0!important;
 width:100%!important;max-width:none!important;
 padding:0!important;margin:0!important;
 overflow:hidden!important;border:0!important;
 isolation:isolate!important;
 background:#86c56f!important;
}
.zw-picnic-world *{box-sizing:border-box}
.zw-pic-background{
 position:absolute;inset:0;z-index:-1;
 background:url('/baby-meadow-portrait-v67.webp') center center/100% 100% no-repeat;
}
.zw-pic-modes{
 position:absolute;z-index:25;
 top:10.5%;left:22%;width:56%;height:7%;
 display:flex;justify-content:space-evenly;gap:5px;align-items:center;
 pointer-events:auto;
}
.zw-pic-mode{
 display:grid;place-items:center;
 width:clamp(44px,12vw,57px);height:clamp(44px,12vw,57px);
 border:3px solid #9b764d;border-radius:50%;
 background:radial-gradient(circle at 35% 25%,#fffae0,#e6c99d 78%);
 box-shadow:inset 0 0 0 2px #fff7d0,0 3px #865e4090;
 padding:7px;
 transition:transform .2s,filter .3s;
 transform:scale(.87);
}
.zw-pic-mode.is-current{
 transform:scale(1.09);
 border-color:#86673f;
 box-shadow:inset 0 0 0 2px #fffde9,0 0 0 3px #e3f4ad,0 4px #815f4290;
}
.zw-pic-mode:active{transform:scale(.94)}
.zw-pic-mode-art{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.zw-pic-mode-art svg{width:76%;height:80%;flex:0 0 76%}
.zw-pic-mode-art:has(svg+svg) svg{width:53%;flex:0 0 53%;margin:-9%}
.zw-pic-wishes{
 position:absolute;z-index:15;
 top:20.5%;left:4%;width:92%;height:15%;
 display:flex;align-items:center;justify-content:center;gap:6px;
}
.zw-pic-wish{
 flex:1 1 0;min-width:0;max-width:175px;
 height:95%;padding:4px 5px;
 display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
 gap:2px;position:relative;
 border:4px solid #a77c4d;border-radius:18px 19px 21px 17px;
 background:linear-gradient(157deg,#fff7d6,#f0d7a8 67%,#eac690);
 box-shadow:inset 0 1px #fff8e7,2px 4px 0 #865e3c6b;
 transition:transform .24s,filter .2s,opacity .2s;
 overflow:hidden;touch-action:manipulation;
}
.zw-pic-wish.is-current{transform:translateY(-3px);filter:drop-shadow(0 0 5px #fff6bd)}
.zw-pic-wish.is-complete{background:linear-gradient(#fcf6d0,#dbe3ad);border-color:#85a070}
.zw-pic-small-face{height:36%;width:25%;object-fit:contain;flex:0 0 25%}
.zw-pic-qty{
 font:900 clamp(20px,6.9vw,37px)/.98 'Trebuchet MS',system-ui,sans-serif;
 color:#7b5136;text-shadow:0 2px #fff7d3;
 margin-right:2px;flex:0 0 auto;
}
.zw-pic-picture{
 display:flex;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap;
 flex:1 1 62%;min-width:0;max-height:100%;overflow:hidden;
 gap:0 2px;
}
.zw-pic-mini{display:block;flex:0 0 auto;width:clamp(14px,4vw,24px);height:clamp(14px,4vw,24px)}
.zw-pic-mini svg{width:100%;height:100%}
.zw-pic-wish:has(.zw-pic-mini:first-child:nth-last-child(-n+3)) .zw-pic-mini{width:clamp(25px,7vw,37px);height:clamp(25px,7vw,37px)}
.zw-pic-wishes:has(.zw-pic-wish:nth-child(3)) .zw-pic-mini{width:clamp(16px,4vw,25px);height:clamp(16px,4vw,25px)}
.zw-pic-characters{
 position:absolute;z-index:9;
 top:33%;left:0;width:100%;height:32%;
 pointer-events:none;
}
.zw-pic-friend{
 position:absolute;bottom:0;
 width:33%;height:86%;
 transform-origin:50% 89%;
 animation:zw-pic-idle 3.8s ease-in-out infinite;
 filter:drop-shadow(2px 5px 2px #507a3b52);
}
.zw-pic-friend img{display:block;width:100%;height:100%;object-fit:contain}
.zw-pic-moritz{left:3%;animation-delay:-.4s}
.zw-pic-igor{right:3%;animation-delay:-1.9s}
.zw-pic-cloth{
 position:absolute;z-index:7;
 left:16%;top:56%;width:68%;height:25%;
 transform:perspective(380px) rotateX(17deg);
 border:6px solid #f5deb5;border-radius:26% 19% 24% 21% / 21% 25% 26% 23%;
 background-color:#f8d6ce;
 background-image:
 linear-gradient(90deg,transparent 47%,#fff8d176 49%,#fff8d176 54%,transparent 56%),
 repeating-linear-gradient(0deg,transparent 0 19px,#ef9796ba 20px 34px,transparent 35px 49px),
 repeating-linear-gradient(90deg,#ffebd7 0 27px,#e9a1a6 28px 53px);
 box-shadow:0 7px 6px #4472314a,inset 0 0 0 4px #fff4db,0 0 1px 1px #b7786955;
}
.zw-pic-seam{position:absolute;inset:6px;border:2px dashed #fff8df96;border-radius:inherit}
.zw-pic-plates{
 position:absolute;z-index:17;
 top:56.8%;left:19%;width:62%;height:19%;
 display:flex;align-items:center;justify-content:center;gap:4px;
 pointer-events:auto;
}
.zw-pic-plate{
 position:relative;display:grid;place-items:center;
 flex:1 1 0;min-width:0;max-width:155px;
 height:90%;
 border:5px solid #c0b79e;border-radius:50%;
 background:radial-gradient(ellipse at 42% 37%,#fffdf4 0 42%,#f5e7cf 69%,#ebd1bb 80%,#fdf8e9 86%);
 box-shadow:inset 0 0 0 4px #fff8e9,0 4px 2px #805c4770;
 transform:rotate(-3deg);
 transition:filter .19s,transform .25s;
}
.zw-pic-plate:nth-child(even){transform:rotate(3deg)}
.zw-pic-plate.is-target{box-shadow:0 0 0 3px #fff0ad,0 4px 4px #805c4770,inset 0 0 0 4px #fff8e9}
.zw-pic-plate.is-hover{transform:scale(1.1) rotate(0);filter:drop-shadow(0 0 7px #fff6b6)}
.zw-pic-plate.is-complete{box-shadow:0 0 0 3px #b7df9a,0 3px 4px #805c4770,inset 0 0 0 4px #fff8e9}
.zw-pic-plate-inner{
 display:flex;align-items:center;justify-content:center;flex-wrap:wrap;align-content:center;
 gap:0;position:absolute;inset:11% 5% 16%;
 overflow:hidden;
}
.zw-pic-placed{display:inline-flex;align-items:center;justify-content:center;width:clamp(22px,6vw,38px);height:clamp(22px,6vw,38px);transform:rotate(calc((var(--k) - 2)*8deg))}
.zw-pic-placed svg{width:100%;height:100%}
.zw-pic-placed-new{animation:zw-pic-drop .57s cubic-bezier(.21,1.5,.4,1) both}
.zw-pic-plate-dots{
 position:absolute;bottom:3%;left:8%;right:8%;
 display:flex;justify-content:center;gap:3px;flex-wrap:wrap;
}
.zw-pic-plate-dots i{width:clamp(5px,1.5vw,9px);height:clamp(5px,1.5vw,9px);border-radius:50%;border:1px solid #b69e84;background:#f0e2d0}
.zw-pic-plate-dots i.is-filled{background:#93c67c;border-color:#688e57}
.zw-pic-basket{
 position:absolute;z-index:12;
 top:58%;left:1%;width:22%;height:20%;
 transform:rotate(-8deg);
 pointer-events:none;
}
.zw-pic-handle{position:absolute;top:0;left:17%;width:66%;height:70%;border:7px solid #aa774f;border-radius:50% 50% 12px 12px;box-shadow:inset 0 0 0 3px #e5c38f}
.zw-pic-basket-lid{position:absolute;top:32%;left:6%;width:88%;height:27%;border:4px solid #956843;border-radius:50%;background:#f3c889}
.zw-pic-weave{
 position:absolute;top:47%;left:3%;width:94%;height:48%;border:4px solid #946845;border-radius:13% 13% 31% 31%;
 background:repeating-linear-gradient(0deg,transparent 0 8px,#a9754666 9px 12px),repeating-linear-gradient(90deg,#e3b981 0 9px,#c18c53 10px 13px,#e0ab74 14px 21px);
 box-shadow:0 4px 3px #5273426b,inset 0 2px 2px #ffe0a7;
}
.zw-pic-foods{
 position:absolute;z-index:25;
 left:4%;top:84%;width:92%;height:10%;
 display:flex;gap:clamp(3px,2vw,12px);
 justify-content:center;align-items:center;
 pointer-events:auto;
}
.zw-pic-food{
 display:grid;place-items:center;
 flex:0 1 clamp(56px,17.5vw,81px);
 width:clamp(56px,17.5vw,81px);
 height:clamp(56px,17.5vw,81px);
 max-width:23%;min-width:0;
 padding:11%;
 border:4px solid #a27650;border-radius:50%;
 background:radial-gradient(circle at 31% 21%,#fff7d9,#eac69a 74%,#d59a70);
 box-shadow:inset 0 0 0 2px #fff1d0,0 4px 1px #84644986;
 touch-action:none;-webkit-tap-highlight-color:transparent;
 transition:filter .15s,transform .16s;
 user-select:none;
}
.zw-pic-food:nth-child(even){background:radial-gradient(circle at 35% 20%,#fcf2df,#cce4be 76%,#a9c99f)}
.zw-pic-food:nth-child(3n){background:radial-gradient(circle at 35% 20%,#fff4e0,#eec3be 76%,#d69b98)}
.zw-pic-food svg{width:100%;height:100%;min-width:33px;min-height:33px;pointer-events:none}
.zw-pic-food:active{transform:scale(.93)}
.zw-pic-food.is-lifted{opacity:.45;filter:saturate(.65)}
.zw-pic-food.zw-pic-wrong{animation:zw-pic-wrong .58s ease-out}
.zw-pic-food:focus-visible,.zw-pic-mode:focus-visible,.zw-pic-wish:focus-visible{outline:4px solid #fff4ac;outline-offset:2px}
.zw-pic-ghost{
 position:fixed;z-index:9999;
 width:78px;height:78px;
 left:0;top:0;display:grid;place-items:center;
 transform:translate(-50%,-60%) rotate(-6deg) scale(1.09);
 filter:drop-shadow(0 8px 4px #7052397a);
 pointer-events:none;
}
.zw-pic-ghost svg{width:100%;height:100%}
.zw-pic-result-actions{
 position:absolute;z-index:31;right:3%;
 bottom:2%;width:60px;height:60px;display:grid;place-items:center;
 pointer-events:none;
}
#zwPicNext{
 pointer-events:auto;display:grid;place-items:center;
 width:56px;height:56px;border:4px solid #946d48;border-radius:50%;
 background:radial-gradient(#fff7d3,#e4bf87);
 box-shadow:inset 0 0 0 2px #fff5d4,0 4px 2px #7e5f466b;
}
#zwPicNext[hidden]{display:none!important}
#zwPicNext svg{width:65%;height:65%}
.zw-pic-announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zw-pic-butterfly{position:absolute;top:39%;left:65%;width:21px;height:23px;opacity:.87;animation:zw-pic-butterfly 9s ease-in-out infinite}
.zw-pic-butterfly:before,.zw-pic-butterfly:after{content:'';position:absolute;width:14px;height:18px;top:2px;background:#b9a4deaa;border:2px solid #7d83a5;border-radius:75% 35% 75% 35%}
.zw-pic-butterfly:before{left:-4px;transform:rotate(-35deg)}.zw-pic-butterfly:after{right:-4px;transform:rotate(40deg)}
.zw-pic-thinking{animation:zw-pic-thinking .58s ease-in-out!important}
.zw-pic-small-cheer{animation:zw-pic-cheer .95s ease-in-out 2!important}
.zw-pic-plate.zw-pic-pop{animation:zw-pic-plate-pop .48s ease-out}
.zw-pic-party .zw-pic-cloth{animation:zw-pic-cloth-pulse .95s ease-out 1}
.zw-pic-eating .zw-pic-friend{animation:zw-pic-chew .55s ease-in-out 3!important}
.zw-pic-dance .zw-pic-friend{animation:zw-pic-dance 1.1s ease-in-out infinite!important}
.zw-pic-flying-bite{position:absolute;top:0;left:45%;width:37px;height:37px;z-index:30;pointer-events:none;animation:zw-pic-food-flight 1.7s ease-in-out both}
.zw-pic-flying-bite svg{width:100%;height:100%}
.zw-pic-flying-bite[style*="--lane:1"]{animation-delay:.18s}.zw-pic-flying-bite[style*="--lane:2"]{animation-delay:.4s}
.zw-picnic-world{animation:none!important}
.zw-picnic-world .zw-pic-wishes,.zw-picnic-world .zw-pic-plates,.zw-picnic-world .zw-pic-foods,.zw-picnic-world .zw-pic-characters{animation:zw-pic-scene-enter .39s ease-out both}
.zw-picnic-world.zw-pic-leaving{pointer-events:none!important}
.zw-picnic-world.zw-pic-leaving .zw-pic-wishes,.zw-picnic-world.zw-pic-leaving .zw-pic-plates,.zw-picnic-world.zw-pic-leaving .zw-pic-foods,.zw-picnic-world.zw-pic-leaving .zw-pic-characters{animation:zw-pic-scene-leave .39s ease-in both!important}
.zw-pic-basket.zw-pic-basket-wiggle .zw-pic-basket-lid{animation:zw-pic-basket-lid .68s ease-in-out both}
@keyframes zw-pic-scene-enter{from{opacity:.45;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes zw-pic-scene-leave{from{opacity:1;translate:0 0}to{opacity:.08;translate:0 -8px}}
@keyframes zw-pic-basket-lid{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12px) rotate(-8deg)}64%{transform:translateY(-5px) rotate(4deg)}}
@keyframes zw-pic-idle{0%,65%,100%{transform:translateY(0) rotate(-1deg)}77%{transform:translateY(-4px) rotate(1.3deg)}91%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes zw-pic-drop{0%{transform:translateY(-37px) scale(.62) rotate(-15deg);opacity:.1}60%{transform:translateY(5px) scale(1.15) rotate(7deg);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes zw-pic-wrong{0%,100%{transform:translateX(0);filter:none}18%{transform:translateX(-5px);filter:drop-shadow(0 0 7px #ef707d)}35%{transform:translateX(6px)}56%{transform:translateX(-4px)}74%{transform:translateX(3px)}}
@keyframes zw-pic-plate-pop{0%,100%{scale:1}50%{scale:1.07}}
@keyframes zw-pic-thinking{0%,100%{rotate:0}26%{rotate:-6deg}53%{rotate:5deg}75%{rotate:-3deg}}
@keyframes zw-pic-cheer{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-14px) rotate(-7deg)}65%{transform:translateY(-6px) rotate(8deg)}}
@keyframes zw-pic-chew{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(3px) scale(1.04,.96)}}
@keyframes zw-pic-dance{0%,100%{transform:translateY(0) rotate(-2deg)}28%{transform:translateY(-13px) rotate(6deg)}55%{transform:translateY(-2px) rotate(-5deg)}78%{transform:translateY(-9px) rotate(4deg)}}
@keyframes zw-pic-cloth-pulse{0%,100%{scale:1}48%{scale:1.04}}
@keyframes zw-pic-butterfly{0%,100%{transform:translate(0,0) rotate(-5deg)}26%{transform:translate(-19px,-12px) rotate(8deg)}51%{transform:translate(8px,10px) rotate(-5deg)}76%{transform:translate(23px,-17px) rotate(10deg)}}
@keyframes zw-pic-food-flight{0%{transform:translate(0,0) scale(1);opacity:1}55%{transform:translate(var(--pic-mid-x,-30px),var(--pic-mid-y,-100px)) scale(.88);opacity:1}87%{transform:translate(var(--pic-dx,-60px),var(--pic-dy,-150px)) scale(.38);opacity:1}100%{transform:translate(var(--pic-dx,-60px),var(--pic-dy,-150px)) scale(.19);opacity:0}}
@media(max-width:359px) and (orientation:portrait){
 .zw-pic-wishes{top:21%;height:14%}.zw-pic-wish{padding:2px;border-width:3px}
 .zw-pic-qty{font-size:20px}.zw-pic-mini{width:15px;height:15px}
 .zw-pic-friend{width:34%}
 .zw-pic-plates{left:20%;width:60%}
 .zw-pic-food{width:56px;height:56px;padding:10px}
}
@media(orientation:landscape) and (max-height:620px){
 #app .zw-picnic-world.main-content{background:#8fcd7a!important}
 .zw-pic-background{background-image:url('/animal-meadow-land-v64.webp');background-size:100% 100%}
 .zw-pic-modes{left:6%;top:13%;width:25%;height:18%}
 .zw-pic-wishes{left:34%;top:10%;width:60%;height:25%}
 .zw-pic-wish{max-width:185px}
 .zw-pic-characters{top:23%;height:58%;width:100%}
 .zw-pic-friend{width:19%;height:81%;bottom:10%}
 .zw-pic-moritz{left:1%}.zw-pic-igor{right:1%}
 .zw-pic-cloth{left:25%;top:48%;width:50%;height:40%}
 .zw-pic-plates{left:31%;top:50%;width:39%;height:29%}
 .zw-pic-basket{left:14%;top:52%;width:12%;height:38%}
 .zw-pic-foods{left:31%;top:81%;width:40%;height:14%}
 .zw-pic-food{width:clamp(44px,12vh,64px);height:clamp(44px,12vh,64px);padding:7px;max-width:none}
 .zw-pic-mini{width:18px;height:18px}
 .zw-pic-qty{font-size:clamp(20px,4vw,29px)}
 .zw-pic-mode{width:48px;height:48px}
 .zw-pic-result-actions{right:5%;bottom:3%}
}
@media(prefers-reduced-motion:reduce){
 .zw-picnic-world *{animation-duration:.001ms!important;transition-duration:.001ms!important}
 .zw-pic-food.zw-pic-wrong{animation-duration:.25s!important}
}

/* V71 finishing: readable picture-only wishes and seamless motion. */
.zw-pic-wish.zw-pic-many .zw-pic-picture{gap:0 1px}
.zw-pic-wish.zw-pic-many .zw-pic-mini{width:clamp(13px,3.7vw,21px);height:clamp(13px,3.7vw,21px)}
.zw-pic-wishes:has(.zw-pic-wish:nth-child(3)) .zw-pic-wish.zw-pic-many .zw-pic-mini{width:clamp(12px,3.3vw,17px);height:clamp(12px,3.3vw,17px)}
.zw-pic-return-ghost{position:fixed;z-index:99998;display:grid;place-items:center;width:76px;height:76px;pointer-events:none}
.zw-pic-return-ghost svg{width:100%;height:100%}
.zw-pic-sipping .zw-pic-friend{animation:zw-pic-sip .68s ease-in-out 3!important}
@keyframes zw-pic-sip{
 0%,100%{transform:translateY(0) rotate(0deg)}
 38%{transform:translateY(2px) rotate(-7deg)}
 72%{transform:translateY(1px) rotate(3deg)}
}
