/* Zwevende Bereken-knop linksonder, op elke sectiedemo en elke pagina. Gedeeld onderdeel: nooit per sectie restylen.
   Bron: pro.draagbalken.nl heeft een zwevende rekentool-knop (rekenmachine-icoon, aria-label "Bereken direct uw prijs", links naast de chatwidget).
   Hier in Draagbalken-stijl: zwart vlak met witte tekst, 5px hoeken, roze alleen als dunne accentring bij focus/hover. Spiegelbeeld van de WhatsApp-knop (zelfde hoogte en rand). */
.db-bereken{position:fixed;z-index:50;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--db-zweef-h,3.5rem);min-width:44px;padding:0 1.15rem 0 1rem;
  border-radius:var(--db-radius,5px);background:var(--db-zwart,#0c0c0c);color:var(--db-puurwit,#fff);
  font-family:"Lexend Deca",system-ui,sans-serif;font-size:1rem;font-weight:600;line-height:1;text-decoration:none;
  box-shadow:0 4px 14px rgb(0 0 0 / .28),0 1px 3px rgb(0 0 0 / .2),0 0 0 1px rgb(255 255 255 / .35)}
.db-bereken[hidden]{display:none}
.db-bereken[data-content-overlap]{visibility:hidden}
.db-bereken svg{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.db-bereken:hover{background:#404040}
/* focus: witte ring met een donkere buitenring, zichtbaar op lichte en donkere pagina's */
.db-bereken:focus-visible{outline:0;box-shadow:0 0 0 3px var(--db-puurwit,#fff),0 0 0 6px var(--db-zwart,#0c0c0c),0 4px 14px rgb(0 0 0 / .28)}
/* smal scherm: ruimte onder de pagina is al gereserveerd door whatsapp.css (--db-zweef-h); de knop blijft even hoog als de WhatsApp-knop */
@media (max-width:560px){.db-bereken{padding:0 1rem 0 .85rem;font-size:.95rem}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.db-bereken{transition:transform .2s ease,background-color .2s ease}.db-bereken:is(:hover,:focus-visible){transform:scale(1.04)}}