/* ZÄHLWIESE V80 – The user's EXACT approved screenshot reassembled as
   responsive, accessible, real UI. Zero reused legacy home illustrations. */
html:has(.zw80-home),body:has(.zw80-home){
 margin:0!important;padding:0!important;min-width:0!important;width:100%!important;
 min-height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;
}
#app:has(>.zw80-home){
 position:relative!important;isolation:isolate!important;
 display:block!important;box-sizing:border-box!important;
 width:100%!important;max-width:none!important;
 height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
 padding:0!important;margin:0!important;
 overflow:hidden!important;border:0!important;border-radius:0!important;
 background:#8cbd69!important;box-shadow:none!important;transform:none!important;
}
#app:has(>.zw80-home)::before,#app:has(>.zw80-home)::after{display:none!important}
#app>.zw80-home,#app>.zw80-home *{box-sizing:border-box}
#app>.zw80-home{
 position:relative;display:flex;align-items:center;justify-content:center;
 width:100%;height:100%;max-height:100%;overflow:hidden;
 padding:max(2px,env(safe-area-inset-top,0px)) max(3px,env(safe-area-inset-right,0px))
         max(3px,env(safe-area-inset-bottom,0px)) max(3px,env(safe-area-inset-left,0px));
 background:#8bbc67 url('/reference-v80/landscape-painted.webp') center/cover no-repeat;
 font-family:"Trebuchet MS",sans-serif;
}
.zw80-home .zw80-scene{
 display:flex;flex-direction:column;align-items:center;justify-content:space-between;
 gap:clamp(2px,1.05dvh,14px);
 width:min(100%,1024px);
 height:100%;min-height:0;margin:0 auto;
 position:relative;z-index:1;
}
.zw80-home .zw80-hero{
 position:relative;flex:0 0 auto;
 display:block;width:min(100%,610px);max-width:100%;
 aspect-ratio:1024/614;
 padding:0;border:0;background:transparent;box-shadow:none;
 overflow:visible;
}
.zw80-home .zw80-hero-img{
 position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
 pointer-events:none;user-select:none;
 image-rendering:auto;display:block;
 filter:none;
}
.zw80-home .zw80-settings{
 position:absolute;top:2.3%;left:1.8%;
 width:13%;height:23%;
 border:0!important;outline-offset:1px!important;border-radius:50%!important;
 padding:0;margin:0;background:transparent!important;
 cursor:pointer;touch-action:manipulation;
}
.zw80-home .zw80-wippe{
 position:absolute;left:21%;top:54%;width:56%;height:46%;
 border:0!important;outline-offset:3px!important;
 border-radius:25%!important;background:transparent!important;
 cursor:pointer;touch-action:manipulation;padding:0;
}
.zw80-home .zw80-wippe::after{
 content:"";position:absolute;top:0;left:33%;
 width:30px;height:30px;opacity:0;pointer-events:none;
 background:url('/reference-v80/joy.svg') center/contain no-repeat;
 transform:scale(.1) translateY(20px);
}
.zw80-home .zw80-wippe.zw-seesaw-tapped::after{
 animation:zw80-joy 1.8s ease-out both;
}
@keyframes zw80-joy{
 0%{opacity:0;transform:translateY(12px) scale(.25) rotate(-15deg)}
 20%{opacity:1;transform:translateY(-8px) scale(.9) rotate(8deg)}
 70%{opacity:1;transform:translateY(-32px) scale(1.1) rotate(-12deg)}
 100%{opacity:0;transform:translateY(-56px) scale(.6) rotate(17deg)}
}
.zw80-home .zw80-hero button:focus-visible{
 outline:3px solid #fff0a6!important;
 outline-offset:2px!important;
}
.zw80-home .zw80-grid{
 width:min(100%,730px);
 height:min(53dvh,565px);min-height:0;
 display:grid;flex:0 1 auto;
 grid-template-columns:repeat(3,minmax(0,1fr));
 grid-template-rows:repeat(3,minmax(0,1fr));
 gap:clamp(1px,.5dvh,9px) clamp(0px,.45vw,8px);
 align-items:stretch;justify-items:stretch;
 margin:0;
}
.zw80-home .zw80-tile{
 all:unset;box-sizing:border-box;
 position:relative;
 display:flex;align-items:center;justify-content:center;
 height:100%;width:100%;min-height:0;min-width:0;
 cursor:pointer;touch-action:manipulation;
 padding:0;margin:0;border:0!important;
 border-radius:18px;overflow:visible;
 background:transparent!important;box-shadow:none!important;
 transition:transform .16s ease-out;
}
.zw80-home .zw80-tile img{
 display:block;width:100%;height:100%;
 object-fit:contain;object-position:center center;
 pointer-events:none;user-select:none;
 filter:drop-shadow(0 2px 1px #416d3652);
}
.zw80-home .zw80-tile:active{transform:translate3d(0,2px,0) scale(.95)}
.zw80-home .zw80-tile:focus-visible{
 outline:3px solid #fff3b1!important;outline-offset:2px!important;
}
.zw80-home .zw80-footer{
 width:min(71%,452px);height:clamp(31px,6dvh,65px);
 flex:0 0 auto;display:flex;align-items:center;justify-content:center;
 margin:0 auto clamp(3px,.9dvh,12px);padding:0;
}
.zw80-home .zw80-footer img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.zw80-home .zw80-sr{
 position:absolute!important;width:1px!important;height:1px!important;
 padding:0!important;margin:-1px!important;overflow:hidden!important;
 clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
/* Short devices prioritize button size over decorative margins. */
@media (max-width:359px) and (orientation:portrait){
 .zw80-home .zw80-grid{height:min(55dvh,326px);gap:0}
 .zw80-home .zw80-hero{width:100%}
 .zw80-home .zw80-footer{height:31px;width:min(76%,300px);margin-bottom:2px}
 .zw80-home .zw80-scene{gap:0}
}
/* Landscape/desktop: same source illustrations, correctly reflowed. */
@media(orientation:landscape) and (max-height:660px){
 #app>.zw80-home{
  background-image:url('/reference-v80/landscape-painted.webp');
 }
 .zw80-home .zw80-scene{
  width:min(100%,1440px);
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);
  grid-template-rows:minmax(0,1fr) auto;
  justify-content:center;align-items:center;
  gap:0 clamp(2px,.8vw,13px);
  padding:0 clamp(4px,.8vw,15px);
 }
 .zw80-home .zw80-hero{
  grid-column:1;grid-row:1;
  width:100%;max-width:none;max-height:100%;
  align-self:center;
 }
 .zw80-home .zw80-grid{
  grid-column:2;grid-row:1;
  height:min(100%,85dvh);
  max-height:100%;width:100%;margin:0;
  gap:0 clamp(0px,.6vw,9px);
 }
 .zw80-home .zw80-footer{
  grid-column:1/3;grid-row:2;align-self:center;
  height:clamp(21px,5.5dvh,37px);
  width:min(35%,325px);margin:0 auto 2px;
 }
}
/* Desktop and tablets get a spacious two-column composition. */
@media(min-width:680px) and (min-height:661px){
 .zw80-home .zw80-scene{
  width:min(96%,1540px);max-width:none;
  display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);
  grid-template-rows:minmax(0,1fr) clamp(40px,8dvh,78px);
  gap:0 clamp(8px,1.5vw,35px);
  padding:clamp(4px,1.2dvh,20px);
  justify-content:center;align-items:center;
 }
 .zw80-home .zw80-hero{
  grid-column:1;grid-row:1;
  width:100%;max-width:760px;align-self:start;
  margin-top:clamp(18px,9dvh,94px);
 }
 .zw80-home .zw80-grid{
  grid-column:2;grid-row:1;
  width:100%;height:min(72dvh,740px);
  max-height:100%;gap:clamp(4px,.7vw,13px);
 }
 .zw80-home .zw80-footer{
  grid-column:1/3;grid-row:2;
  width:min(34%,460px);height:100%;margin:0 auto;
 }
}
@media(prefers-reduced-motion:reduce){
 .zw80-home .zw80-tile{transition:none!important}
 .zw80-home .zw80-wippe.zw-seesaw-tapped::after{animation:none!important;opacity:1;transform:none}
}