/* Demobalk voor de drie Sintel-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 z 20, Compleet z 50); de kop plakt eronder en schuift
   bij verbergen helemaal achter de balk weg. Het telefoonmenu van Compleet (z 60) gaat over alles heen.
   Plus heeft geen kop. Op de telefoon (tot 860px) zijn de meeste sticky delen gewoon blokken. */
html.has-zw-demobar { scroll-padding-top: calc(5rem + var(--demobar-h)); }

/* Basis: de kop komt pas in beeld na de hero (.is-on) */
html.zw-basis .top { top: var(--demobar-h); }
html.zw-basis .top:not(.is-on) { transform: translateY(calc(-100% - var(--demobar-h))); }
html.zw-basis .hero { min-height: calc(100svh - var(--demobar-h)); }
@media (min-width: 861px) {
  html.zw-basis .fade { top: calc(var(--m) + var(--demobar-h)); height: calc(100svh - 2 * var(--m) - var(--demobar-h)); }
  html.zw-basis.js .spines__stage, html.zw-basis .js .spines__stage { top: var(--demobar-h); height: calc(100svh - var(--demobar-h)); }
}

/* Plus */
@media (min-width: 861px) {
  html.zw-plus .pic { top: calc(var(--m) + var(--demobar-h)); height: calc(100svh - 2 * var(--m) - var(--demobar-h)); }
  html.zw-plus .sheet,
  html.zw-plus .foot { min-height: calc(100svh - 2 * var(--m) - var(--demobar-h)); }
}

/* Compleet */
html.zw-compleet .site-header { top: var(--demobar-h); }
html.zw-compleet .site-header.is-hidden { transform: translateY(calc(-100% - var(--demobar-h))); }
html.zw-compleet .hero { height: calc(100svh - var(--demobar-h)); }
@media (min-width: 861px) {
  html.zw-compleet .page-head.full,
  html.zw-compleet .page-head.sub,
  html.zw-compleet .over,
  html.zw-compleet .visit { min-height: calc(100svh - var(--demobar-h)); }
  html.zw-compleet .pinned__layer,
  html.zw-compleet .cross__stage { top: var(--demobar-h); height: calc(100svh - var(--demobar-h)); }
  html.zw-compleet .active-list__pic,
  html.zw-compleet .heat__pic { top: calc(12vh + var(--demobar-h)); }
  html.zw-compleet .visit__card { top: calc(90px + var(--demobar-h)); }
  html.zw-compleet .book__plan { top: calc(var(--header-h) + 16px + var(--demobar-h)); }
}
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
  html.zw-compleet .cross__stage { top: 0; height: auto; }
}