/* Zählwiese 77 — completely independent, responsive home.
   No legacy .intro-content/.mode-choice/home-header selectors or baked tile art. */
html:has(.zw77-home),body:has(.zw77-home){margin:0!important;min-width:0!important;width:100%!important;min-height:100dvh!important;overflow-x:hidden!important}
#app:has(>.zw77-home){
 position:relative!important;isolation:isolate!important;
 display:block!important;width:100%!important;max-width:none!important;
 min-height:100dvh!important;height:100dvh!important;max-height:none!important;
 margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
 overflow:hidden!important;background:#8bc3bd!important;
 box-shadow:none!important;transform:none!important;
}
#app:has(>.zw77-home)::before,#app:has(>.zw77-home)::after{display:none!important}
#app>.zw77-home,#app>.zw77-home *{box-sizing:border-box}
#app>.zw77-home{
 --zw77-ink:#513c30;
 --zw77-wood:#ebc28a;
 position:relative;display:flex;flex-direction:column;
 align-items:center;justify-content:flex-start;
 width:100%;height:100%;min-height:0;max-width:none;
 overflow:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
 color:var(--zw77-ink);font-family:"Trebuchet MS",system-ui,sans-serif;
 background:#a0d6d7 url('/home-v77-meadow-portrait.webp') center center/100% 100% no-repeat;
}
.zw77-home .zw77-header{
 flex:0 0 auto;display:flex;align-items:center;justify-content:center;
 position:relative;width:min(100%,1140px);height:clamp(74px,11dvh,104px);
 padding:6px 12px 4px;z-index:5;
}
.zw77-home .zw77-settings{
 position:absolute;left:clamp(8px,2.5vw,24px);top:50%;
 transform:translateY(-50%);width:clamp(44px,11vw,55px);height:clamp(44px,11vw,55px);
 display:grid;place-items:center;padding:0;
 border:3px solid #8e6a49;border-radius:50%;
 background:linear-gradient(150deg,#fff3d0,#e6b878);
 color:#76563a;box-shadow:inset 0 1px #fff9e7,0 3px 0 #6c543c75;
 cursor:pointer;touch-action:manipulation;
}
.zw77-home .zw77-settings svg{width:63%;height:63%;display:block}
.zw77-home .zw77-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:calc(100% - 116px);padding:0 10px}
.zw77-home .zw77-title{
 display:block;margin:0;padding:2px 17px 3px;
 font-family:"Trebuchet MS",system-ui,sans-serif;font-size:clamp(29px,8vw,49px);
 font-weight:1000;line-height:1.06;letter-spacing:-1.7px;
 white-space:nowrap;text-align:center;color:#bf6558;
 -webkit-text-stroke:.7px #845b48;
 background:linear-gradient(160deg,rgba(255,250,230,.97),rgba(245,220,178,.97));
 border:3px solid #a87b4b;border-radius:23px 20px 24px 18px;
 text-shadow:1px 2px #fff1c5;box-shadow:inset 0 2px #fff9e7,0 4px 1px #85694d78;
}
.zw77-home .zw77-lead{
 text-align:center;font-size:clamp(11px,2.8vw,16px);
 line-height:1.1;font-weight:900;letter-spacing:.05px;
 margin:7px 0 0;padding:0 3px;
 color:#624b36;text-shadow:1px 1px #fff8da,0 0 8px #fff2ce;
}
.zw77-home .zw77-body{
 position:relative;z-index:2;flex:1 1 auto;min-height:0;
 width:min(100%,1120px);max-width:1120px;
 display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:clamp(3px,1.25dvh,13px);
 padding:2px clamp(9px,2.5vw,25px) 0;
}
.zw77-home .zw77-hero{
 flex:0 0 clamp(122px,23dvh,256px);
 min-height:0;width:100%;
 display:flex;align-items:center;justify-content:center;
 position:relative;z-index:1;
}
.zw77-home .zw77-seesaw{
 display:flex;align-items:center;justify-content:center;
 width:min(95%,540px);height:100%;
 padding:0;border:0;outline-offset:3px;border-radius:20px;
 background:transparent;box-shadow:none;
 cursor:pointer;touch-action:manipulation;
}
.zw77-home .zw77-seesaw img{
 display:block;width:100%;height:100%;
 object-fit:contain;object-position:center center;
 filter:drop-shadow(1px 3px 2px #567b4f66);
 transform:rotate(-1deg);transform-origin:50% 72%;
 animation:zw77-seesaw-idle 5s ease-in-out infinite;
 pointer-events:none;
}
.zw77-home .zw77-seesaw.zw-seesaw-tapped img{animation:zw77-seesaw-tap 2.3s ease-out 1!important}
@keyframes zw77-seesaw-idle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes zw77-seesaw-tap{0%{transform:rotate(-2deg)}20%{transform:rotate(8deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-4deg)}100%{transform:rotate(-2deg)}}
.zw77-home .zw77-grid{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 grid-template-rows:repeat(3,minmax(0,1fr));
 justify-items:stretch;align-items:stretch;column-gap:clamp(3px,1.3vw,15px);row-gap:clamp(3px,.8dvh,10px);
 height:clamp(267px,44dvh,440px);width:min(100%,590px);
 min-height:0;max-height:55%;
 margin:0;flex:0 1 auto;
}
.zw77-home .zw77-tile{
 all:unset;box-sizing:border-box;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 position:relative;min-width:0;min-height:0;
 width:100%;height:100%;
 padding:0 1px;gap:2px;
 border:0!important;outline-offset:2px;
 background:transparent!important;box-shadow:none!important;
 color:var(--zw77-ink);cursor:pointer;touch-action:manipulation;
}
.zw77-home .zw77-tile:focus-visible{outline:3px solid #fff5b0;outline-offset:1px;border-radius:15px}
.zw77-home .zw77-tile .zw77-icon{
 width:auto;max-width:min(100%,140px);height:calc(100% - 29px);
 min-height:0;max-height:136px;aspect-ratio:1;flex:0 1 auto;
 display:block;border:0;box-shadow:none;
 background:transparent;
 transition:transform .15s ease-out;
}
.zw77-home .zw77-tile .zw77-icon img{
 display:block;width:100%;height:100%;max-width:100%;
 object-fit:contain;border:0;box-shadow:none;
 filter:drop-shadow(0 3px 1px #6b5c4680);
 pointer-events:none;
}
.zw77-home .zw77-tile:active .zw77-icon{transform:translateY(2px) scale(.95)}
.zw77-home .zw77-plaque{
 flex:0 0 auto;display:flex;align-items:center;justify-content:center;
 width:min(100%,172px);height:clamp(24px,3.7dvh,31px);
 padding:1px 2px;margin:0;
 background:linear-gradient(173deg,#fff5cf 0%,#f2d09b 46%,#d8a572 100%);
 border:2px solid #916744;border-radius:10px 11px 9px 12px;
 box-shadow:inset 0 1px #fff8d5,0 2px 1px #61452f6b;
 font-size:clamp(10px,2.9vw,15px);font-weight:900;letter-spacing:-.35px;
 line-height:1.02;white-space:nowrap;text-align:center;
 color:#4d3828;text-shadow:0 1px #fff9df;
}
.zw77-home .zw77-footer{
 flex:0 0 auto;display:flex;align-items:center;justify-content:center;
 width:max-content;max-width:calc(100% - 34px);height:clamp(24px,4.7dvh,33px);
 padding:3px 22px;margin:clamp(1px,.7dvh,6px) auto clamp(4px,1dvh,12px);
 font-size:clamp(11px,2.6vw,13px);font-weight:900;white-space:nowrap;
 color:#624a34;text-shadow:0 1px #fff4d4;
 border:2px solid #9b744e;border-radius:12px 11px 13px 12px;
 background:linear-gradient(165deg,#fcf1c9,#e8c28c);
 box-shadow:0 2px 0 #72553c62;
}
@media (max-width:359px) and (orientation:portrait){
 .zw77-home .zw77-header{height:68px}
 .zw77-home .zw77-title{font-size:29px;padding:2px 10px}
 .zw77-home .zw77-lead{font-size:11px;margin-top:4px}
 .zw77-home .zw77-grid{height:267px;row-gap:2px}
 .zw77-home .zw77-plaque{height:24px;font-size:10px;letter-spacing:-.5px}
 .zw77-home .zw77-body{gap:2px}
 .zw77-home .zw77-hero{flex-basis:clamp(116px,23dvh,150px)}
 .zw77-home .zw77-footer{height:23px;margin:2px auto 5px}
}
@media (orientation:landscape) and (max-height:630px){
 #app>.zw77-home{background-image:url('/home-v77-meadow-landscape.webp')}
 .zw77-home .zw77-header{height:clamp(47px,14dvh,66px);padding:3px 8px}
 .zw77-home .zw77-title{font-size:clamp(25px,5.1vh,38px);padding:1px 16px;border-width:2px}
 .zw77-home .zw77-lead{font-size:11px;margin-top:2px}
 .zw77-home .zw77-settings{width:44px;height:44px}
 .zw77-home .zw77-body{
  display:grid;grid-template-columns:minmax(0,41%) minmax(0,59%);
  align-items:center;justify-content:center;
  width:min(100%,1100px);gap:8px;
  padding:1px 12px;
 }
 .zw77-home .zw77-hero{height:100%;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
 .zw77-home .zw77-seesaw{width:100%;height:100%}
 .zw77-home .zw77-grid{
  width:100%;height:100%;max-height:100%;
  gap:2px 6px;
 }
 .zw77-home .zw77-tile .zw77-icon{height:calc(100% - 21px);max-height:74px}
 .zw77-home .zw77-plaque{height:21px;font-size:clamp(9.5px,1.7vw,12px);padding:0 1px;letter-spacing:-.25px}
 .zw77-home .zw77-footer{height:20px;font-size:10px;padding:1px 15px;margin:1px auto 3px;border-width:1px}
}
@media (min-width:680px) and (min-height:631px){
 #app>.zw77-home{background-image:url('/home-v77-meadow-landscape.webp');background-size:cover}
 .zw77-home .zw77-header{height:clamp(100px,13dvh,142px)}
 .zw77-home .zw77-title{font-size:clamp(43px,4.2vw,62px)}
 .zw77-home .zw77-lead{font-size:clamp(15px,1.5vw,20px)}
 .zw77-home .zw77-body{
  width:min(95%,1160px);height:auto;
  display:grid;grid-template-columns:minmax(0,41%) minmax(0,59%);
  align-items:center;justify-content:center;gap:24px;
 }
 .zw77-home .zw77-hero{width:100%;height:min(70dvh,510px);min-height:220px}
 .zw77-home .zw77-seesaw{width:100%;height:100%}
 .zw77-home .zw77-grid{width:min(100%,620px);height:min(66dvh,620px);max-height:none;margin:0 auto;gap:clamp(8px,1.3vw,16px)}
 .zw77-home .zw77-tile .zw77-icon{height:calc(100% - 33px);max-height:154px}
 .zw77-home .zw77-plaque{height:32px;font-size:clamp(12px,1.25vw,17px)}
 .zw77-home .zw77-footer{height:33px;margin-bottom:clamp(8px,2dvh,28px)}
}
@media(prefers-reduced-motion:reduce){
 .zw77-home *{transition:none!important}
 .zw77-home .zw77-seesaw img{animation:none!important}
 .zw77-home .zw77-seesaw.zw-seesaw-tapped img{animation:zw77-seesaw-tap 1s ease-out 1!important}
}