/* Demobalk voor de drie Fysio Eemkade-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 (z 40); de kop plakt eronder en schuift bij verbergen helemaal
   achter de balk weg. Het telefoonmenu van Compleet (z 39) begint onder de balk, zodat de kop en de
   menulinks zichtbaar blijven. De lightbox (z 60) gaat over alles heen. */
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)); }

/* Plus */
html.zw-plus .hero { height: calc(100svh - var(--demobar-h)); }
@media (min-width: 1101px) {
  html.zw-plus .wa__out { top: calc(100px + var(--demobar-h)); }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html.zw-plus .triptych__stage { top: var(--demobar-h); height: calc(100svh - var(--demobar-h)); }
}

/* Compleet */
html.zw-compleet .menu { top: var(--demobar-h); }
html.zw-compleet .hero,
html.zw-compleet .visit { height: calc(100svh - var(--demobar-h)); }
@media (prefers-reduced-motion: no-preference) {
  html.zw-compleet .steps__stage { top: var(--demobar-h); height: calc(100svh - var(--demobar-h)); }
}
@media (min-width: 861px) {
  html.zw-compleet .person__img,
  html.zw-compleet .book__sum { top: calc(100px + var(--demobar-h)); }
}