body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
}

#toast-toggle {
  position: absolute;
  opacity: 0;
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #888;
  border-radius: 999px;
  cursor: pointer;
}

.toast {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  max-width: 24rem;
  background: #1a1a1a;
  color: #eee;
  border-radius: 0.5rem;
  opacity: 0;
  translate: 0 0.75rem;
}

#toast-toggle:checked ~ .toast {
  display: block;
  opacity: 1;
  translate: 0 0;
}

/* @starting-style: 88.8% global (caniuse, 2026-07-22), Lücke ältere Safari/
   Firefox — ohne Support erscheint der Toast einfach ohne Übergang, nichts
   bricht. "allow-discrete" auf display sorgt dafür, dass auch das
   Verschwinden (display:none beim Abwählen) fadet statt hart abzuschneiden.
   Für das Erscheinen selbst braucht es @starting-style, weil ein Element
   mit display:none keine vorherige Box hat, von der aus normal transitioniert
   werden könnte. */
@media (prefers-reduced-motion: no-preference) {
  .toast {
    transition: opacity 0.3s ease, translate 0.3s ease, display 0.3s allow-discrete;
  }

  #toast-toggle:checked ~ .toast {
    @starting-style {
      opacity: 0;
      translate: 0 0.75rem;
    }
  }
}