/* Pantelco: knop "naar boven", volledig zonder JavaScript */

@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

.ppd-top{
  position:fixed; right:24px; bottom:24px; z-index:9990;
  width:48px; height:48px; border-radius:50%;
  background:#ffb300; color:#1f2751;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; border:0;
  box-shadow:0 8px 24px rgba(31,39,81,.30);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ppd-top:hover,.ppd-top:focus-visible{
  background:#e9a825; color:#111734; transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(31,39,81,.36);
}
.ppd-top:focus-visible{ outline:3px solid #1f2751; outline-offset:3px }
.ppd-top svg{
  width:19px; height:19px; display:block;
  fill:none !important;
  stroke:#1f2751 !important;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.ppd-top svg path{ fill:none !important; stroke:#1f2751 !important }
.ppd-top:hover svg, .ppd-top:hover svg path,
.ppd-top:focus-visible svg, .ppd-top:focus-visible svg path{ stroke:#111734 !important }
.ppd-top .vb{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* Pas tonen na wat scrollen, in browsers die scroll-gestuurde animatie kennen.
   Kan de browser dat niet, dan staat de knop er gewoon altijd. */
@supports (animation-timeline: scroll()){
  .ppd-top{
    opacity:0; visibility:hidden;
    animation:ppd-top-in linear both;
    animation-timeline:scroll(root block);
    animation-range:280px 560px;
  }
  @keyframes ppd-top-in{
    0%{ opacity:0; visibility:hidden }
    1%{ visibility:visible }
    100%{ opacity:1; visibility:visible }
  }
}

@media (prefers-reduced-motion:reduce){ .ppd-top{transition:none} .ppd-top:hover{transform:none} }
@media (max-width:600px){ .ppd-top{ right:14px; bottom:14px; width:44px; height:44px } }
@media print{ .ppd-top{ display:none } }