/* Vaste knop rechtsonder (Atse, 09-10): in rust alleen de molen. Muis erop (of Tab erheen): hij schuift open naar
   "Laten we praten"; muis eraf: terug naar de molen. Op een aanraakscherm opent de eerste tik hem, de tweede gaat naar /boek.
   Verschijnt pas voorbij het eerste scherm en verdwijnt zodra er een andere CTA of de footer in beeld is
   (menu.js zet .zichtbaar, .draait en .open). Niet op de boekpagina. */
.molenknop {
  position: fixed; z-index: 50;
  right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; height: 52px; padding: 0 15px;
  border-radius: 12px; background: #142B1E; color: #FAFAF9;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 15px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(15, 14, 13, .18), 0 2px 6px rgba(15, 14, 13, .12);
  opacity: 0; transform: translateY(16px); visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background-color .2s ease, padding .5s cubic-bezier(.2, .8, .2, 1);
}
.molenknop.zichtbaar { opacity: 1; transform: none; visibility: visible; transition: opacity .3s ease, transform .3s ease, visibility 0s, background-color .2s ease, padding .5s cubic-bezier(.2, .8, .2, 1); }
.molenknop span { max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; transition: max-width .5s cubic-bezier(.2, .8, .2, 1), margin-left .5s cubic-bezier(.2, .8, .2, 1), opacity .3s ease .12s; }
.molenknop.open { padding-right: 20px; }
.molenknop.open span { max-width: 180px; margin-left: 10px; opacity: 1; }
.molenknop.draait .molen { animation: molen-draai .8s cubic-bezier(.3, .7, .2, 1); }
.molenknop:focus-visible { outline: 2px solid #142B1E; outline-offset: 3px; }
.molenknop .molen { width: 22px; height: 22px; flex-shrink: 0; }
/* Bij hover draait de molen een kwartslag: met vier gelijke wieken eindigt hij weer in dezelfde stand.
   Alleen op apparaten met een echte muis, anders blijft een tik op de telefoon in de hoverstand hangen. */
@media (hover: hover) {
  .molenknop:hover { background: #1d3d2b; }
  .molenknop:hover .molen { animation: molen-draai .7s cubic-bezier(.3, .7, .2, 1); }
}
.molenknop:focus-visible .molen { animation: molen-draai .7s cubic-bezier(.3, .7, .2, 1); }
@keyframes molen-draai { to { transform: rotate(90deg); } }
body.menu-open .molenknop { display: none; }
/* Op de telefoon beter zichtbaar (Atse, 09-10): groter, met een lichte rand, zodat hij ook op donkere foto's opvalt */
@media (max-width: 767px) {
  .molenknop { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); height: 56px; padding: 0 17px; font-size: 16px; box-shadow: 0 0 0 3px rgba(250, 250, 249, .92), 0 12px 32px rgba(15, 14, 13, .28); }
  .molenknop .molen { width: 22px; height: 22px; }
  .molenknop.open { padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .molenknop { transition: opacity .01s, visibility 0s; transform: none; }
  .molenknop:hover .molen, .molenknop:focus-visible .molen, .molenknop.draait .molen { animation: none; }
  .molenknop span { transition: none; }
}