/* Demobalk voor de drie Van Wijk Installatie-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.
   De balk (z 55) ligt boven de kop (Basis/Plus z 20, Compleet z 40); de kop plakt eronder en schuift
   bij verbergen helemaal achter de balk weg. Het telefoonmenu van Compleet begint onder de kop
   (inset 64px), dus dat schuift ook een balkhoogte omlaag. Op de telefoon zijn de sticky delen gewone blokken. */
html.has-zw-demobar { scroll-padding-top: calc(5rem + var(--demobar-h)); }
html.has-zw-demobar .top { top: var(--demobar-h); }
html.has-zw-demobar .top.is-hidden { transform: translateY(calc(-100% - var(--demobar-h))); }

/* Basis */
html.zw-basis .hero { min-height: calc(100svh - var(--demobar-h)); }
@media (min-width: 861px) {
  html.zw-basis .services__head,
  html.zw-basis .prices__head { top: calc(110px + var(--demobar-h)); }
}

/* Plus */
@media (min-width: 861px) {
  html.zw-plus .t-sum { top: calc(72px + var(--demobar-h)); }
}

/* Compleet */
@media (min-width: 861px) {
  html.zw-compleet .service__pic,
  html.zw-compleet .calc__in,
  html.zw-compleet .book__sum { top: calc(100px + var(--demobar-h)); }
}
@media (max-width: 860px) {
  html.zw-compleet .top__nav { top: calc(64px + var(--demobar-h)); }
}