/* Zählwiese v32 · premium storybook cover; keeps five original learning games.
   Scoped to the homepage, respecting the notch and real viewport size. */
.intro-content{
 position:relative!important;display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:center!important;gap:0!important;
 padding:clamp(2px,.7dvh,8px) 12px max(7px,env(safe-area-inset-bottom,0px))!important;
 flex:1 1 auto!important;min-height:0!important;width:100%!important;
 overflow:visible!important;background:transparent!important;
}
.intro-content .rainbow-title{
 position:relative!important;flex:0 0 auto;margin:0 auto!important;padding:0 5px!important;
 font-size:clamp(33px,min(11vw,5.7dvh),53px)!important;line-height:1.12!important;
 z-index:3;filter:drop-shadow(0 3px 0 #fff4cb99);
}
.intro-content .intro-scene{
 position:relative!important;flex:0 0 auto!important;
 width:min(100%,405px)!important;max-width:405px!important;
 height:clamp(123px,23dvh,212px)!important;margin:0 auto!important;
 overflow:visible!important;animation:none!important;
}
.zw-hero-art{position:absolute;inset:0;isolation:isolate;overflow:visible}
.zw-hero-ground{position:absolute;left:2%;right:2%;height:25%;bottom:6%;z-index:-2;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,#f7e7a4ba,#a7c78aa9 52%,transparent 75%)}
.zw-hero-sun{position:absolute;z-index:-1;left:45%;top:2%;width:clamp(33px,9vw,46px);height:clamp(33px,9vw,46px);display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b9,#f5cb72);border:3px solid #cba56b;box-shadow:0 0 0 6px #f8dc9370;font-size:24px;color:#fff3be}
.zw-hero-cloud{position:absolute;display:block;z-index:-1;border:2px solid #fffdf0;border-radius:60% 50% 55% 50%;background:#fffaf1c4;height:15px;width:43px;opacity:.9;box-shadow:15px 2px 0 -2px #fffaf1c4}
.zw-cloud-left{top:22%;left:3%;transform:rotate(-7deg)}
.zw-cloud-right{top:12%;right:10%;transform:rotate(6deg) scale(.8)}
.zw-hero-daisy{position:absolute;z-index:4;font-size:clamp(21px,5vw,29px);text-shadow:1px 2px #6e84543d;pointer-events:none}
.zw-flower-a{left:3%;bottom:17%;color:#efa6ad;transform:rotate(-9deg)}
.zw-flower-b{right:1%;bottom:19%;color:#f1d07b;transform:rotate(11deg)}
.zw-hero-butterfly{position:absolute;left:49%;top:23%;z-index:5;font-size:clamp(20px,5.4vw,28px);pointer-events:none;transform-origin:center}
.zw-hero-sparkle{position:absolute;z-index:5;font-size:20px;color:#f1c879;text-shadow:1px 1px #fff9d8;pointer-events:none}
.zw-sparkle-left{left:5%;top:20%}
.zw-sparkle-right{right:10%;top:34%;color:#e5a7af}
.zw-character{
 position:absolute;bottom:0;z-index:2;
 width:48%;height:100%;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;
 padding:0;border:0;background:transparent;border-radius:30px;
 min-width:0;user-select:none;-webkit-user-select:none;touch-action:manipulation;
 transform-origin:50% 88%;filter:drop-shadow(1px 3px 1px #69593d52);
}
.zw-character-moritz{left:3%;transform:rotate(-3deg)}
.zw-character-igor{right:3%;transform:rotate(3deg)}
.zw-character img{display:block;width:100%;height:calc(100% - 23px);max-height:100%;object-fit:contain;object-position:center bottom;pointer-events:none;-webkit-user-drag:none}
.zw-character-caption{
 flex:0 0 22px;font:900 clamp(14px,4vw,21px) "Chalkboard SE","Marker Felt","Comic Sans MS",system-ui,sans-serif;
 color:#436f86;text-shadow:1.3px 1.5px #fff9e3,-1px -1px #fff2d9;
 white-space:nowrap;line-height:22px;
}
.zw-character-igor .zw-character-caption{color:#4e7c4e}
.zw-character:focus-visible{outline:4px solid #315e9a;outline-offset:1px}
.zw-character:active{filter:drop-shadow(0 2px 0 #5b7a5166)}
.zw-character.zw-wave-moritz,.zw-character.zw-wave-igor{animation:zw-hello .75s cubic-bezier(.32,1.25,.5,1)}
@keyframes zw-hello{0%,100%{rotate:0deg;scale:1}30%{rotate:-9deg;scale:1.05}62%{rotate:6deg;scale:1.02}85%{rotate:-2deg;scale:1}}
.intro-content .welcome-subtitle{
 flex:0 0 auto;position:relative;z-index:2;max-width:360px;
 font-size:clamp(16px,4.5vw,21px)!important;line-height:1.13!important;
 margin:3px auto 8px!important;padding:0 9px!important;
 color:#557b55;text-shadow:1px 1px #fff5d2;text-align:center;
}
.intro-content .mode-choices{
 display:grid!important;flex:0 1 auto;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 width:min(100%,402px)!important;max-width:402px!important;
 justify-items:center;align-items:start;column-gap:4px!important;row-gap:7px!important;
 margin:0 auto!important;padding:0 0 0!important;
}
.intro-content .mode-choice{
 width:100%;min-width:0;gap:1px!important;
 align-items:center;justify-content:flex-start;
}
.intro-content .mode-round{
 width:clamp(77px,23.2vw,111px)!important;height:clamp(77px,23.2vw,111px)!important;
 flex:0 0 auto;border-radius:50%;
 filter:drop-shadow(1px 4px 2px #77634757);transition:transform .2s cubic-bezier(.2,.95,.25,1);
}
.intro-content .mode-choice:focus-visible{outline:4px solid #315e9a;outline-offset:3px}
.intro-content .mode-choice:active .mode-round{transform:scale(.92) translateY(3px)}
.intro-content .mode-label{
 padding:2px 0 0!important;text-align:center;white-space:normal!important;
 font-size:clamp(12px,3.6vw,17px)!important;line-height:1.06!important;
 font-weight:950;text-wrap:balance;max-width:124px;
}
.intro-content .mode-choice:nth-child(4){grid-column:1/3;justify-self:end;width:min(100%,128px)}
.intro-content .mode-choice:nth-child(5){grid-column:3;justify-self:start;width:min(100%,128px)}
.intro-content .welcome-footer{margin:5px auto 0!important;padding:0!important;font-size:clamp(10px,2.8vw,12px)!important;line-height:1.1!important}
@media(max-width:365px){
 .intro-content .intro-scene{height:clamp(103px,20dvh,155px)!important}
 .intro-content .rainbow-title{font-size:clamp(32px,10.6vw,42px)!important}
 .intro-content .mode-round{width:clamp(72px,23vw,89px)!important;height:clamp(72px,23vw,89px)!important}
 .intro-content .mode-label{font-size:clamp(12px,3.6vw,14px)!important}
 .intro-content .welcome-subtitle{margin-bottom:4px!important}
 .intro-content .mode-choices{row-gap:3px!important}
 .intro-content .welcome-footer{display:none!important}
}
@media(max-height:715px) and (orientation:portrait){
 .intro-content{justify-content:flex-start!important}
 .intro-content .intro-scene{height:clamp(100px,20dvh,148px)!important}
 .intro-content .mode-round{width:clamp(71px,21vw,91px)!important;height:clamp(71px,21vw,91px)!important}
 .intro-content .mode-label{font-size:clamp(12px,3.4vw,15px)!important}
 .intro-content .welcome-footer{display:none!important}
}
@media(orientation:landscape) and (max-height:520px){
 .intro-content{
  display:grid!important;
  grid-template-columns:minmax(165px,36%) minmax(0,64%)!important;
  grid-template-rows:43px minmax(100px,1fr) 28px!important;
  width:100%!important;min-height:0!important;
  height:calc(100dvh - 50px)!important;max-height:none!important;
  align-content:center!important;align-items:center!important;
  column-gap:10px!important;row-gap:0!important;
  padding:0 max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))!important
 }
 .intro-content .rainbow-title{grid-column:1!important;grid-row:1!important;font-size:clamp(31px,4.8vw,46px)!important;align-self:end}
 .intro-content .intro-scene{grid-column:1!important;grid-row:2/4!important;height:clamp(115px,30dvh,179px)!important;width:100%!important;max-width:230px!important}
 .intro-content .welcome-subtitle{grid-column:2!important;grid-row:1!important;align-self:end;font-size:clamp(15px,2.1vw,20px)!important;margin:0!important}
 .intro-content .mode-choices{
  grid-column:2!important;grid-row:2/4!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  max-width:100%!important;width:100%!important;gap:4px!important;align-items:center!important
 }
 .intro-content .mode-choice:nth-child(4),.intro-content .mode-choice:nth-child(5){
  grid-column:auto!important;justify-self:center!important;width:100%!important
 }
 .intro-content .mode-round{width:clamp(61px,8.8vw,91px)!important;height:clamp(61px,8.8vw,91px)!important}
 .intro-content .mode-label{font-size:clamp(11px,1.55vw,15px)!important}
 .intro-content .welcome-footer{display:none!important}
 .zw-character-caption{font-size:clamp(11px,1.7vw,16px)}
 .zw-character img{height:calc(100% - 20px)}
}
/* One fixed, high contrast exit control on every non-home screen. */
.app-header:not(.home-header){position:relative;z-index:50;min-height:clamp(67px,10.4dvh,84px)!important;box-sizing:border-box!important;
 padding:calc(env(safe-area-inset-top,0px) + 7px) max(15px,env(safe-area-inset-right,0px)) 5px max(15px,env(safe-area-inset-left,0px))!important;overflow:visible!important}
.app-header:not(.home-header) .header-tools{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important}
.app-header:not(.home-header) #homeBtn{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
 width:clamp(86px,24vw,113px)!important;min-width:86px!important;height:clamp(48px,7dvh,61px)!important;
 border-radius:24px!important;border:3px solid #8e684b!important;padding:2px 8px!important;
 background:linear-gradient(#fff0c1 0%,#f1c87a 100%)!important;
 box-shadow:inset 0 3px #fff9de,1px 4px #7d6749a6!important;
 color:#755233!important;filter:none!important;
 font:900 clamp(12px,3.5vw,16px) "Chalkboard SE","Marker Felt",system-ui,sans-serif!important;
 -webkit-tap-highlight-color:transparent
}
.app-header:not(.home-header) #homeBtn svg{width:clamp(25px,6.8vw,32px)!important;height:clamp(25px,6.8vw,32px)!important;flex-shrink:0!important}
.app-header:not(.home-header) #homeBtn:focus-visible{outline:4px solid #315d92!important;outline-offset:3px}
.app-header:not(.home-header) #homeBtn:active{transform:translateY(3px)!important;box-shadow:inset 0 2px #fff7d6!important}
@media(orientation:landscape) and (max-height:520px){
 .app-header:not(.home-header){min-height:54px!important;height:54px!important;padding:max(2px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 2px max(8px,env(safe-area-inset-left,0px))!important}
 .app-header:not(.home-header) #homeBtn{height:44px!important;width:90px!important;min-width:90px!important}
 .app-header:not(.home-header) #homeBtn svg{width:26px!important;height:26px!important}
}

/* Stable touch target while idle artwork moves; greeting sparkles do not shift layout */
.zw-character img{transform-origin:50% 90%}
.zw-hello-star{position:absolute;right:15%;top:4%;z-index:6;font-size:29px;color:#f7c97f;text-shadow:1px 2px #fff7d5;pointer-events:none;animation:zw-star-pop .9s ease-out both}
@keyframes zw-star-pop{0%{opacity:0;transform:scale(.4) translateY(10px)}45%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.9) translateY(-16px)}}
@media(max-height:715px) and (orientation:portrait){
.intro-content .intro-scene{height:clamp(134px,24dvh,165px)!important}
.intro-content .mode-round{height:clamp(80px,25vw,98px)!important;width:clamp(80px,25vw,98px)!important}
}