/* Round l2 (2026-10-12): version 5 with every service in it (vouw/l2.js writes the markup). Every colour and font is
   a site token; every class is sl2-…, every rule scoped to it, so the page without ?d=l2a…c is as it was.

   Shut, all three are the same: a tab hanging from the form card's foot, under its shadow, like the handle of a
   drawer. The tab is not positioned and comes 6 px up under the card (which is), so the card's edge and shadow lie
   over its top: one object. It hangs into the fold's own space under the card, so the fold grows by 4 px on a wide
   screen and 20 px on a phone, not by the tab's height.

   Open, the panel is the bar's Diensten dropdown (style.css .drop: white, the dakpan rule on top, shadow-2) in the
   top layer, hung under the tab; where the screen has more room above the tab it opens above. It stays clear of the
   phone's sticky bars (the call bar at the foot, the site's bar at the top) and scrolls inside when it is taller
   than the room it has. On a phone it is as wide as the card. */

/* ==================================================== shared: the tab */
.sl2-voet {
  --sl2-pad: clamp(18px, 2.4vw, 34px);        /* the card's own inner margin (g.css --pad) */
  anchor-name: --sl2-voet;
  margin: -6px 0 calc(16px - min(clamp(40px, 4.4vw, 64px), 60px));
  padding: 0 var(--sl2-pad);
}
.sl2-weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sl2-tab {
  anchor-name: --sl2-tab;
  display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 50px; margin: 0;
  padding: 16px 15px 10px 16px;
  border: 0; border-radius: 0 0 10px 10px; background: var(--kalk-wit);
  box-shadow: 0 10px 18px -12px rgba(38, 51, 58, .32);
  font-family: var(--f-sans); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--lood-zacht);
  text-align: left; cursor: pointer; transition: color .15s;
}
.sl2-tab__pijl { width: 13px; height: 13px; color: var(--dakpan); transition: transform .2s; }
.sl2-tab:hover { color: var(--dakpan); }
.sl2-tab:focus-visible { outline: 2px solid var(--dakpan); outline-offset: -4px; }
.sl2-voet:has(.sl2-paneel:popover-open) .sl2-tab { color: var(--dakpan); }
.sl2-voet:has(.sl2-paneel:popover-open) .sl2-tab__pijl { transform: rotate(180deg); }

/* ==================================================== shared: the panel */
.sl2-paneel {
  container: sl2-paneel / inline-size;
  position-anchor: --sl2-tab;
  position-area: bottom span-right;            /* under the tab, from its left edge on */
  inset: auto; margin: 8px 0 var(--sl2-vrij, 16px);
  position-try-fallbacks: flip-block; position-try-order: most-block-size;
  box-sizing: border-box; width: var(--sl2-breed, 320px); max-width: none; height: auto;
  max-height: calc(100% - 8px - var(--sl2-vrij, 16px));   /* the room under the tab (or over it), less the gaps */
  overflow: hidden auto; overscroll-behavior: contain;
  padding: 10px; border: 0; border-top: 4px solid var(--dakpan); border-radius: var(--r);
  background: var(--kalk-wit); color: var(--lood); box-shadow: var(--shadow-2);
  font-family: var(--f-sans); font-size: 15.5px; line-height: 1.35; text-align: left;
}
/* a phone: clear of the call bar at the foot (and, opening above, of the site's bar at the top); as wide as the card */
@media (max-width: 720px) { .sl2-paneel { --sl2-vrij: 84px; } }
@media (max-width: 560px) {
  .sl2-voet { --sl2-pad: 14px; }
  .sl2-paneel { position-anchor: --sl2-voet; position-area: bottom center; justify-self: stretch; width: auto; }
  /* 10-13, by hand, on a crop of the tab: "then just center this one on mobile please" (the panel was already hung
     from the whole foot here, so it opens as before) */
  .sl2-tab { margin-inline: auto; }
}
/* a browser without anchoring: the panel stands as a sheet at the foot of the screen */
@supports not (anchor-name: --a) {
  .sl2-paneel { inset: auto 12px 12px; width: auto; max-width: 560px; max-height: 75vh; margin: 0 auto; }
}

/* when the panel scrolls: a soft shade at the edge where more is hidden (top once it has scrolled, foot until the end),
   so a row cut by the edge reads as "more this way". Driven by the panel's own scroll; without scroll, no shade. */
.sl2-paneel::before, .sl2-paneel::after {
  content: ""; position: sticky; z-index: 2; display: block; height: 14px; pointer-events: none; opacity: 0;
  animation: linear both sl2-schaduw; animation-timeline: scroll(nearest block);
}
.sl2-paneel::before { top: 0; margin: 0 -10px -14px; background: linear-gradient(rgba(38, 51, 58, .14), rgba(38, 51, 58, 0)); animation-range: 0 28px; }
.sl2-paneel::after { bottom: 0; margin: -14px -10px 0; background: linear-gradient(rgba(38, 51, 58, 0), rgba(38, 51, 58, .14)); animation-direction: reverse; animation-range: calc(100% - 28px) 100%; }
@keyframes sl2-schaduw { from { opacity: 0; } to { opacity: 1; } }
.sl2-a__paneel::before, .sl2-a__paneel::after { content: none; }   /* the two columns are a grid: no shade (a phone: below) */
@media (max-width: 560px) { .sl2-a__paneel::before, .sl2-a__paneel::after { content: ""; margin-left: 0; margin-right: 0; } }

/* the small capitals of the dropdown's own head (the card's "Stap 1 van 3") */
.sl2-kop {
  margin: 4px 14px 6px; font-family: var(--f-tech); font-weight: 700; font-size: 12px; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dakpan);
}
.sl2-paneel p { margin-bottom: 0; }

/* the jobs: the dropdown's own rows */
.sl2-lijst { margin: 0; padding: 0; list-style: none; }
.sl2-klus {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 4px; text-decoration: none;
  font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--lood); transition: background-color .12s, color .12s;
}
a.sl2-klus:hover { background: var(--kalk); color: var(--dakpan); }
.sl2-klus__w { min-width: 0; }
.sl2-klus__naam { overflow-wrap: break-word; }
/* this page's job: where the reader is, not a link */
.sl2-klus--hier { color: var(--lood-zacht); font-weight: 500; }
.sl2-hier {
  display: inline-block; margin: 1px 0; padding: 1px 8px 2px; border-radius: 99px; vertical-align: 1px;
  background: var(--dakpan-wash); color: var(--dakpan-diep); font-weight: 600; font-size: 12px; line-height: 1.4;
  white-space: nowrap;
}
/* this page's service: a small dot after its name */
.sl2-stip {
  display: inline-block; width: 6px; height: 6px; margin: 0 0 0 7px; border-radius: 50%; vertical-align: 3px;
  background: var(--dakpan);
}
/* the service's own page, in the homepage's words */
.sl2-meer {
  display: flex; align-items: center; gap: 8px; width: fit-content; margin: 4px 0 0; padding: 10px 14px;
  border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--dakpan);
  transition: color .12s, background-color .12s;
}
.sl2-meer__pijl { width: 15px; height: 15px; transition: transform .15s; }
.sl2-meer:hover { color: var(--dakpan-diep); background: var(--kalk); }
.sl2-meer:hover .sl2-meer__pijl { transform: translateX(3px); }
.sl2-paneel a:focus-visible, .sl2-paneel button:focus-visible, .sl2-paneel summary:focus-visible {
  outline: 2px solid var(--dakpan); outline-offset: -2px;
}

/* ==================================================== l2a · two columns
   A rail of the services (the bar's dropdown rows on a sand ground) and beside it, on the panel's white, the jobs of
   the service that is chosen; the chosen row turns white, so it runs on into its column like a folder's tab. Every
   service's column stands in the same grid cell; only the chosen one is visible, so the panel keeps the height of the
   longest and does not jump under the pointer. On a phone (the panel as wide as the card) the rail becomes one row of chips over the
   jobs that scrolls sideways (the last chip fades out at the edge), so the jobs stay in sight under it. */
.sl2-a { --sl2-breed: min(600px, calc(100vw - 2 * var(--gut) - var(--sl2-pad))); }
.sl2-a__paneel { padding: 0; }
.sl2-a__paneel:popover-open { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: stretch; }   /* a phone: block, below */
.sl2-a__rail { min-width: 0; padding: 0 0 10px; background: var(--kalk); }
.sl2-a__kop { margin: 0; padding: 14px 18px 6px; color: var(--lood-zacht); }
.sl2-a__dienst {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0;
  padding: 10px 14px 10px 18px; border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--f-sans); font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--lood);
  transition: color .12s, background-color .12s;
}
.sl2-a__dienst:hover { color: var(--dakpan); }
.sl2-a__dienst[aria-expanded="true"] { background: var(--kalk-wit); color: var(--dakpan); }
.sl2-a__pijl { width: 13px; height: 13px; margin-left: auto; transform: rotate(-90deg); color: var(--lood-grijs); }
.sl2-a__dienst[aria-expanded="true"] .sl2-a__pijl { color: var(--dakpan); }
.sl2-a__vak { display: grid; min-width: 0; }
.sl2-a__klussen { grid-area: 1 / 1; min-width: 0; padding: 10px 10px 12px; }
.sl2-a__groep { margin-top: 8px; }
html.js .sl2-a__klussen:not(.sl2-nu) { visibility: hidden; }
html:not(.js) .sl2-a__paneel:popover-open { display: block; }

@media (max-width: 560px) {
  .sl2-a__paneel:popover-open { display: block; }
  .sl2-a__rail { padding: 12px 0 10px; border-bottom: 1px solid var(--kalk-diep); background: none; }
  .sl2-a__kop { padding: 0 14px 6px; }
  .sl2-a__knoppen {
    display: flex; gap: 6px; padding: 2px 30px 2px 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 30px), transparent);
            mask: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 30px), transparent);
  }
  .sl2-a__knoppen::-webkit-scrollbar { display: none; }
  .sl2-a__dienst {
    flex: none; width: auto; min-height: 38px; padding: 7px 13px; border-radius: 99px; font-size: 14.5px; white-space: nowrap;
    background: var(--kalk); box-shadow: inset 0 0 0 1.5px var(--kalk-rand);
  }
  .sl2-a__dienst[aria-expanded="true"] { background: var(--dakpan-wash); box-shadow: inset 0 0 0 1.5px var(--dakpan); color: var(--dakpan-diep); }
  .sl2-a__dienst:focus-visible { outline-offset: 2px; }
  .sl2-a__pijl { display: none; }
  .sl2-a__dienst .sl2-stip { margin-left: 6px; }
  .sl2-a__vak { display: block; }
  .sl2-a__klussen { padding: 4px 2px 10px; }
  .sl2-a__groep { margin-top: 10px; }
  html.js .sl2-a__klussen:not(.sl2-nu) { display: none; }
}

/* ==================================================== l2b · one level at a time
   The bar's dropdown at its own width, one list at a time: it opens on this page's service (its jobs, with the way
   up on top); "Alle diensten" shows the six with their counts, a tap on one goes down into its jobs. The new level
   slides in from the side it comes from. */
.sl2-b { --sl2-breed: 340px; }
.sl2-b__paneel { padding: 8px 10px 10px; }
/* one level shows; when the reader goes up or down, l2.js lets the panel's height follow in .22 s, so an edge that
   moves (the top one, when the panel opens above the tab) glides instead of jumping */
html.js .sl2-b__laag:not(.sl2-nu) { display: none; }
html:not(.js) .sl2-b__terug { display: none; }
.sl2-b__boven .sl2-kop { margin-top: 8px; }
.sl2-b__dienst {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px 10px 14px;
  border: 0; border-radius: 4px; background: none; text-align: left; cursor: pointer;
  font-family: var(--f-sans); font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--lood);
  transition: color .12s, background-color .12s;
}
.sl2-b__dienst:hover { background: var(--kalk); color: var(--dakpan); }
.sl2-b__n {
  margin-left: auto; font-family: var(--f-tech); font-weight: 600; font-size: 14px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--lood-grijs);
}
.sl2-b__pijl { width: 13px; height: 13px; transform: rotate(-90deg); color: var(--lood-grijs); }
.sl2-b__dienst:hover .sl2-b__pijl { color: var(--dakpan); }
.sl2-b__terug {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 4px; padding: 6px 12px 6px 8px;
  border: 0; border-radius: 4px; background: none; cursor: pointer;
  font-family: var(--f-sans); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--lood-zacht);
  transition: color .12s, background-color .12s;
}
.sl2-b__terug:hover { background: var(--kalk); color: var(--dakpan); }
.sl2-b__terugpijl { width: 14px; height: 14px; transform: rotate(90deg); color: var(--dakpan); }
.sl2-b__kop { margin-top: 2px; }
.sl2-b__laag.sl2-in-r { animation: sl2-in-r .22s cubic-bezier(.2, .7, .2, 1); }
.sl2-b__laag.sl2-in-l { animation: sl2-in-l .22s cubic-bezier(.2, .7, .2, 1); }
@keyframes sl2-in-r { from { transform: translateX(28px); opacity: 0; } }
@keyframes sl2-in-l { from { transform: translateX(-28px); opacity: 0; } }

/* ==================================================== l2c · one list of fold-outs, with the jobs' photos
   The six services as rows that fold open in place (the site's own question rows, .vr__item, in the dropdown's
   letters); this page's one is open. Opening another shuts the open one (<details name>), so one list of jobs shows
   at a time. A job is its photo, small, beside its name; two columns on a wide panel. */
.sl2-c { --sl2-breed: min(580px, calc(100vw - 2 * var(--gut) - var(--sl2-pad))); }
.sl2-c__paneel { padding: 4px 10px 8px; interpolate-size: allow-keywords; }
.sl2-c__dienst { border-bottom: 1px solid var(--kalk-diep); }
.sl2-c__dienst:last-child { border-bottom: 0; }
.sl2-c__kop {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 10px 12px 10px 14px;
  border-radius: 4px; list-style: none; cursor: pointer;
  font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--lood); transition: color .12s, background-color .12s;
}
.sl2-c__kop::-webkit-details-marker { display: none; }
.sl2-c__kop::marker { content: ""; }
.sl2-c__kop:hover { background: var(--kalk); color: var(--dakpan); }
.sl2-c__n { margin-left: auto; font-weight: 500; font-size: 13.5px; color: var(--lood-grijs); white-space: nowrap; }
.sl2-c__pijl { width: 13px; height: 13px; color: var(--lood-grijs); transition: transform .2s; }
.sl2-c__dienst[open] > .sl2-c__kop { color: var(--dakpan); }
.sl2-c__dienst[open] > .sl2-c__kop .sl2-c__pijl { transform: rotate(180deg); color: var(--dakpan); }
.sl2-c__dienst::details-content { block-size: 0; overflow: clip; transition: block-size .2s ease-out, content-visibility .2s allow-discrete; }
.sl2-c__dienst[open]::details-content { block-size: auto; }
.sl2-c__inhoud { padding: 0 0 10px; }
.sl2-c .sl2-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.sl2-c .sl2-klus { gap: 12px; padding: 6px 8px; font-size: 14.5px; line-height: 1.3; }
.sl2-foto { flex: none; width: 44px; height: 44px; border-radius: 4px; overflow: hidden; background: var(--kalk-rand); }
.sl2-foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sl2-foto--leeg { background: var(--kalk) radial-gradient(circle at 50% 50%, var(--kalk-rand) 0 2.5px, transparent 3px) 0 0 / 11px 11px; }
a.sl2-klus:hover .sl2-foto { box-shadow: 0 0 0 2px var(--dakpan); }
.sl2-c .sl2-klus--hier .sl2-foto { opacity: .7; }
.sl2-c .sl2-hier { display: table; margin: 3px 0 0; }
.sl2-c .sl2-meer { margin-top: 6px; }
@container sl2-paneel (max-width: 470px) {
  .sl2-c .sl2-lijst { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sl2-voet *, .sl2-voet *::details-content { transition: none !important; animation: none !important; }
}