function ScrollTop() {
  const [show, setShow] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 480);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const up = () => window.scrollTo({ top: 0, behavior: "smooth" });

  return (
    <React.Fragment>
      <button
        onClick={up}
        aria-label="Nach oben"
        className="scroll-top-btn"
        style={{
          position: "fixed",
          right: 16,
          bottom: 20,
          zIndex: 45,
          width: 46,
          height: 46,
          display: "grid",
          placeItems: "center",
          borderRadius: 999,
          background: "var(--ink)",
          color: "var(--cream)",
          boxShadow: "0 10px 28px rgba(28,24,21,.22), 0 2px 6px rgba(28,24,21,.14)",
          opacity: show ? 1 : 0,
          transform: show ? "translateY(0)" : "translateY(12px)",
          pointerEvents: show ? "auto" : "none",
          transition: "opacity .3s, transform .3s",
        }}
      >
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
          <path d="M7 11.5V2.5M7 2.5L2.5 7M7 2.5L11.5 7"
            stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>

      <style>{`
        @media (min-width: 720px) {
          .scroll-top-btn { right: 28px !important; bottom: 28px !important; width: 52px !important; height: 52px !important; }
        }
      `}</style>
    </React.Fragment>
  );
}

window.ScrollTop = ScrollTop;