/* Demobalk voor de drie Hoekstra Bouw-sites (Basis, Plus, Compleet).
   De balk wordt door demobar.js toegevoegd, alleen als de site niet in een voorbeeld-iframe draait.
   Zolang er geen balk is, is --demobar-h 0 en blijven de sites precies zoals ze ontworpen zijn. */
:root { --demobar-h: 0px; }

.zw-demobar { position: sticky; top: 0; z-index: 55; background: #12211c; color: #e8efe9; font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; text-transform: none; }
.zw-demobar .zw-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px clamp(12px, 3vw, 32px); }
.zw-demobar a { color: inherit; text-decoration: none; }
.zw-demobar a:focus-visible { outline: 2px solid #ff8a61; outline-offset: 2px; border-radius: 6px; }
.zw-tag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.zw-tag i { width: 8px; height: 8px; border-radius: 50%; background: #e2572b; flex: none; }
.zw-tag b { color: #fff; font-weight: 700; }
.zw-pk { display: flex; gap: 4px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; }
.zw-pk a { padding: 6px 12px; border-radius: 999px; min-height: 30px; display: inline-flex; align-items: center; }
.zw-pk a:hover { background: rgba(255,255,255,.1); }
.zw-pk a[aria-current="page"] { background: #e2572b; color: #fff; font-weight: 700; }
.zw-back { white-space: nowrap; }
.zw-back a:hover { color: #fff; text-decoration: underline; }
.zw-short { display: none; }
@media (max-width: 760px) {
  .zw-tag, .zw-long { display: none; }
  .zw-short { display: inline; font-weight: 700; color: #fff; }
  .zw-back { order: -1; }
}

/* Sticky, vaste en schermhoge onderdelen van de sites een balkhoogte lager zetten.
   Alle drie: de kop staat vast (position: fixed) en schuift bij naar beneden scrollen weg.
   De balk (z 55) ligt boven de kop (Basis/Plus z 40, Compleet z 50), de kop plakt eronder
   en schuift helemaal achter de balk weg. Het telefoonmenu van Compleet (z 60) gaat over alles heen. */
html.has-zw-demobar { scroll-padding-top: calc(5rem + var(--demobar-h)); }
html.has-zw-demobar .top,
html.has-zw-demobar .site-header { top: var(--demobar-h); }
html.has-zw-demobar .top.is-hidden,
html.has-zw-demobar .site-header.is-hidden { transform: translateY(calc(-100% - var(--demobar-h))); }

/* Basis */
html.zw-basis .hero { min-height: calc(100svh - var(--demobar-h)); }
html.zw-basis .prices__photo { top: calc(6rem + var(--demobar-h)); }

/* Plus */
html.zw-plus .hero { min-height: calc(100svh - var(--demobar-h)); }
html.zw-plus .sheet { top: calc(5.5rem + var(--demobar-h)); }
html.zw-plus .leaf { top: calc(4.5rem + var(--n, 0) * 72px + var(--demobar-h)); }

/* Compleet */
html.zw-compleet .hero,
html.zw-compleet .page-head.full { min-height: calc(100svh - var(--demobar-h)); }
html.zw-compleet .seam__stage { top: var(--demobar-h); height: calc(100svh - var(--demobar-h)); }
html.zw-compleet .visit__card,
html.zw-compleet .calc__result,
html.zw-compleet .reviews__big,
html.zw-compleet .sheet { top: calc(6rem + var(--demobar-h)); }