/* Effecten uit NorthByte Lab (lab.northbyte.online), ongewijzigd overgenomen.
   Gebundeld door build.py: E100, E161, E306, E357, E401, E504, E506. */
/* ==========================================================================
   E100 · Kop die woord voor woord binnenkomt
   Elk woord schuift uit een onzichtbaar masker omhoog, in een vast ritme.
   Alleen transform en opacity, geen blur. Beweging is opt-in: alleen bij
   prefers-reduced-motion: no-preference en zonder data-rm op <html>.
   Instellen per kop met CSS-variabelen:
     --e100-stap     vertraging per woord   (standaard 70ms)
     --e100-duur     duur per woord         (standaard 900ms)
     --e100-afstand  hoe ver het woord zakt (standaard 108%)
   ========================================================================== */

.e100-w {
  display: inline-block;
  vertical-align: top;
  /* Masker met wat lucht voor schuine letters en onderkasten; de marge compenseert */
  overflow: hidden;
  padding: .12em .08em .18em;
  margin: -.12em -.08em -.18em;
}
.e100-b { display: inline-block; transform-origin: 0 100%; }
.e100-nb { white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  /* Tot effect.js de woorden heeft gesplitst: onzichtbaar, met een vangnet na 2 s */
  .js:not([data-rm]) .e100:not(.e100-klaar) { visibility: hidden; animation: e100-vangnet 0s 2s forwards; }

  html:not([data-rm]) .e100-klaar .e100-b {
    opacity: 0;
    transform: translate3d(0, var(--e100-afstand, 108%), 0) rotate(3deg);
    transition:
      transform var(--e100-duur, 900ms) cubic-bezier(.22, 1, .36, 1),
      opacity calc(var(--e100-duur, 900ms) * .7) ease;
    transition-delay: calc(var(--i, 0) * var(--e100-stap, 70ms));
  }
  html:not([data-rm]) .e100-aan .e100-b { opacity: 1; transform: none; }
}

@keyframes e100-vangnet { to { visibility: visible; } }

/* ==========================================================================
   E161 · Teamkaarten met onthulling
   Portretkaarten van het team. Wijs een kaart aan, tik erop of druk op de
   knop: van onderen schuift een gekleurd paneel omhoog met specialisaties,
   een persoonlijke zin en een knop om bij die persoon te boeken. De foto
   zoomt een klein beetje in. Alleen transform en opacity.
   Instellen op .e161 met CSS-variabelen:
     --e161-min     minimale kaartbreedte  (standaard 220px)
     --e161-ratio   verhouding van de kaart (standaard 3 / 4)
   Per kaart: --e161-kleur (paneel) en --e161-inkt (tekst op het paneel).
   ========================================================================== */

.e161-team {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--e161-min, 220px)), 1fr));
}
.e161-kaart { position: relative; overflow: hidden; border-radius: 20px; background: var(--e161-kleur, #0f5c5c); color: var(--e161-inkt, #fff); isolation: isolate; }
.e161-foto { display: block; width: 100%; height: auto; aspect-ratio: var(--e161-ratio, 3 / 4); object-fit: cover; }
.e161-naam { display: grid; gap: 2px; padding: 14px 16px 0; }
.e161-naam strong { font-size: 18px; line-height: 1.2; }
.e161-naam span { font-size: 14px; opacity: .8; }
.e161-paneel { display: grid; gap: 12px; padding: 14px 16px 18px; background: var(--e161-kleur, #0f5c5c); }
.e161-paneel h3 { font-size: 20px; line-height: 1.2; }
.e161-paneel h3 span { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; opacity: .8; }
.e161-zin { font-size: 15px; line-height: 1.5; }
.e161-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.e161-tags li { padding: 4px 10px; border-radius: 99px; border: 1px solid currentColor; font-size: 12px; font-weight: 600; }
.e161-paneel a { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 99px; background: var(--e161-inkt, #fff); color: var(--e161-kleur, #0f5c5c); font-weight: 600; font-size: 14px; text-decoration: none; }
.e161-meer { display: none; }
.e161-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----- Met JavaScript: paneel schuift over de foto ----- */
.js .e161-kaart { aspect-ratio: var(--e161-ratio, 3 / 4); }
.js .e161-foto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; z-index: -1; }
.js .e161-kaart::before {
  content: ""; position: absolute; inset: 45% 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .78));
}
.js .e161-naam { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 16px; }
.js .e161-paneel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; min-height: 62%; align-content: start; padding-top: 20px;
  border-radius: 20px 20px 0 0; transform: translate3d(0, 101%, 0);
}
.js .e161-meer {
  display: grid; place-items: center; position: absolute; right: 12px; top: 12px; z-index: 3;
  width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #161616;
}
.js .e161-meer::after { content: ""; position: absolute; inset: -12px; }
.js .e161-meer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.js .e161-meer:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.js .e161-kaart.is-open .e161-paneel { transform: none; }
.js .e161-kaart.is-open .e161-naam { opacity: 0; }
.js .e161-kaart.is-open .e161-foto { transform: scale(1.06); }
.js .e161-kaart.is-open .e161-meer svg { transform: rotate(45deg); }

/* Beweging is opt-in */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e161-paneel { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
  html:not([data-rm]) .e161-paneel > * { transition: opacity .4s ease .12s, transform .5s cubic-bezier(.22, 1, .36, 1) .12s; }
  html:not([data-rm]).js .e161-kaart:not(.is-open) .e161-paneel > * { opacity: 0; transform: translate3d(0, 14px, 0); }
  html:not([data-rm]) .e161-foto { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
  html:not([data-rm]) .e161-naam { transition: opacity .3s ease; }
  html:not([data-rm]) .e161-meer svg { transition: transform .35s ease; }
}

/* ==========================================================================
   E306 · Golven onder een sectie
   Drie lagen golven aan de onderrand van een sectie die elk in hun eigen tempo
   heen en weer deinen. De voorste laag heeft de kleur van de volgende sectie,
   zodat de golven de overgang vormen. Elke laag is een herhalend SVG-masker dat
   precies één golflengte opschuift (transform) en zachtjes op en neer gaat
   (translate). Pauzeert buiten beeld en bij een verborgen tab.
   Instellen op .e306 met CSS-variabelen:
     --e306-hoogte     hoogte van de golfstrook        (standaard 120px)
     --e306-achter     kleur van de achterste golf     (standaard #7fb3c2)
     --e306-midden     kleur van de middelste golf     (standaard #cfe3e6)
     --e306-volgende   kleur van de voorste golf; zet hier de achtergrond van de volgende sectie (standaard #f1e6d0)
     --e306-tempo      vermenigvuldiger voor de duur   (standaard 1)
   ========================================================================== */

.e306 { position: relative; isolation: isolate; overflow: hidden; padding-bottom: var(--e306-hoogte, 120px); }
.e306-golven { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--e306-hoogte, 120px); overflow: hidden; pointer-events: none; }
.e306-golf {
  position: absolute; left: 0; bottom: 0;
  width: calc(100% + var(--e306-p)); height: var(--e306-h);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: var(--e306-p) 100%; mask-size: var(--e306-p) 100%;
  -webkit-mask-position: var(--e306-start, 0) 0; mask-position: var(--e306-start, 0) 0;
}
.e306-golf:nth-child(1) { --e306-p: 720px; --e306-h: 120px; --e306-t: 26s; --e306-bob: 7px; --e306-start: 0; background-color: var(--e306-achter, #7fb3c2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='120' viewBox='0 0 720 120'%3E%3Cpath d='M0 22.0C131.1 -4.6 228.9 -4.6 360.0 22.0S588.9 48.6 720 22.0V120H0Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='120' viewBox='0 0 720 120'%3E%3Cpath d='M0 22.0C131.1 -4.6 228.9 -4.6 360.0 22.0S588.9 48.6 720 22.0V120H0Z' fill='black'/%3E%3C/svg%3E"); }
.e306-golf:nth-child(2) { --e306-p: 540px; --e306-h: 96px; --e306-t: 18s; --e306-bob: 5px; --e306-start: -170px; background-color: var(--e306-midden, #cfe3e6);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='96' viewBox='0 0 540 96'%3E%3Cpath d='M0 17.0C98.3 -3.0 171.7 -3.0 270.0 17.0S441.7 37.0 540 17.0V96H0Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='96' viewBox='0 0 540 96'%3E%3Cpath d='M0 17.0C98.3 -3.0 171.7 -3.0 270.0 17.0S441.7 37.0 540 17.0V96H0Z' fill='black'/%3E%3C/svg%3E"); }
.e306-golf:nth-child(3) { --e306-p: 900px; --e306-h: 70px; --e306-t: 34s; --e306-bob: 4px; --e306-start: -320px; background-color: var(--e306-volgende, #f1e6d0);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='70' viewBox='0 0 900 70'%3E%3Cpath d='M0 13.0C163.9 -1.6 286.1 -1.6 450.0 13.0S736.1 27.6 900 13.0V70H0Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='70' viewBox='0 0 900 70'%3E%3Cpath d='M0 13.0C163.9 -1.6 286.1 -1.6 450.0 13.0S736.1 27.6 900 13.0V70H0Z' fill='black'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e306-golf {
    will-change: transform;
    animation:
      e306-schuif calc(var(--e306-t) * var(--e306-tempo, 1)) linear infinite,
      e306-deining calc(var(--e306-t) * var(--e306-tempo, 1) / 4) ease-in-out infinite alternate;
    animation-play-state: paused;
  }
  html:not([data-rm]) .e306-golf:nth-child(2) { animation-direction: reverse, alternate-reverse; }
  html:not([data-rm]) .e306-speelt .e306-golf { animation-play-state: running; }
}

@keyframes e306-schuif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--e306-p) * -1), 0, 0); }
}
@keyframes e306-deining {
  from { translate: 0 0; }
  to   { translate: 0 var(--e306-bob); }
}

/* ==========================================================================
   E357 · Stappen met een doorlopende lijn
   Genummerde stappen die één voor één aangaan: een lijn loopt van cirkel naar
   cirkel, elke cirkel vult zich als de lijn hem bereikt en de tekst schuift
   erbij. Op een groot scherm naast elkaar, op de telefoon onder elkaar.
   Alleen transform en opacity; de cirkelrand en de lege lijn staan stil.
   Instellen op .e357 met CSS-variabelen:
     --e357-accent   kleur van lijn en cirkels (standaard currentColor)
     --e357-leeg     kleur van de lege lijn (standaard rgba(0,0,0,.12))
     --e357-stap     tijd per stap (standaard 650ms)
     --e357-op-accent  kleur van het cijfer in een gevulde cirkel (standaard #fff)
   ========================================================================== */

.e357 {
  --e357-cirkel: 56px; --e357-gat: 24px;
  display: grid; gap: var(--e357-gat); margin: 0; padding: 0; list-style: none; counter-reset: e357;
}
@media (min-width: 860px) { .e357 { grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; } }

.e357-stap { position: relative; display: grid; grid-template-columns: var(--e357-cirkel) 1fr; gap: 0 18px; counter-increment: e357; }
@media (min-width: 860px) { .e357-stap { grid-template-columns: 1fr; justify-items: center; gap: 18px; } }

.e357-cirkel {
  position: relative; z-index: 1; width: var(--e357-cirkel); height: var(--e357-cirkel); border-radius: 50%;
  border: 2px solid var(--e357-accent, currentColor); background: var(--e357-ondergrond, #fff);
  color: var(--e357-accent, currentColor); font-size: 20px; font-weight: 700; line-height: calc(var(--e357-cirkel) - 4px); text-align: center;
}
.e357-cirkel::before { content: counter(e357); }
.e357-vulling {
  position: absolute; inset: -2px; border-radius: 50%; background: var(--e357-accent, currentColor);
  color: var(--e357-op-accent, #fff); line-height: var(--e357-cirkel);
}
.e357-vulling::before { content: counter(e357); }

/* Verbinding naar de volgende stap: lege lijn met daarin de vulling */
.e357-lijn { position: absolute; background: var(--e357-leeg, rgba(0, 0, 0, .12)); overflow: hidden; }
.e357-lijn::after { content: ""; position: absolute; inset: 0; background: var(--e357-accent, currentColor); }
.e357-stap:last-child .e357-lijn { display: none; }
.e357-lijn { left: calc(var(--e357-cirkel) / 2 - 1px); width: 2px; top: var(--e357-cirkel); bottom: calc(var(--e357-gat) * -1); }
.e357-lijn::after { transform-origin: 50% 0; }
@media (min-width: 860px) {
  .e357-lijn { top: calc(var(--e357-cirkel) / 2 - 1px); bottom: auto; height: 2px; left: calc(50% + var(--e357-cirkel) / 2); width: calc(100% + var(--e357-gat) - var(--e357-cirkel)); }
  .e357-lijn::after { transform-origin: 0 50%; }
}

.e357-inhoud { padding-bottom: 6px; }
.e357-titel { margin: 12px 0 6px; font-size: 18px; line-height: 1.3; }
@media (min-width: 860px) { .e357-titel { margin-top: 0; } }
.e357-tekst { font-size: 15px; line-height: 1.55; opacity: .78; }
.e357-duur { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; opacity: .7; }

/* Met JavaScript en beweging: alles begint leeg en gaat stap voor stap aan */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e357-klaar .e357-vulling { transform: scale(0); opacity: 0; }
  html:not([data-rm]) .e357-klaar .e357-lijn::after { transform: scaleY(0); }
  html:not([data-rm]) .e357-klaar .e357-inhoud { opacity: 0; transform: translate3d(0, 12px, 0); }
  @media (min-width: 860px) { html:not([data-rm]) .e357-klaar .e357-lijn::after { transform: scaleX(0); } }

  html:not([data-rm]) .e357-aan .e357-vulling {
    transform: none; opacity: 1;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
    transition-delay: calc(var(--e357-i, 0) * var(--e357-stap, 650ms));
  }
  html:not([data-rm]) .e357-aan .e357-lijn::after {
    transform: none;
    /* Begint net na het vullen van deze cirkel en is er precies als de volgende cirkel vult */
    transition: transform calc(var(--e357-stap, 650ms) - 200ms) linear;
    transition-delay: calc(var(--e357-i, 0) * var(--e357-stap, 650ms) + 200ms);
  }
  html:not([data-rm]) .e357-aan .e357-inhoud {
    opacity: 1; transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--e357-i, 0) * var(--e357-stap, 650ms) + 120ms);
  }
}

/* ==========================================================================
   E401 · Stappenformulier met voortgang
   Een lang aanvraagformulier in vier korte stappen, met genummerde stippen en
   een balk die meegroeit. Elke stap schuift in vanuit de richting waarin je gaat.
   Alleen transform en opacity bewegen. Zonder JavaScript staan alle stappen
   onder elkaar als één gewoon formulier.
   Instellen op .e401 met CSS-variabelen:
     --e401-accent   kleur van balk, stippen en knop (standaard #ff7a3d)
     --e401-vlak     achtergrond van velden en tegels (standaard rgba(255,255,255,.06))
     --e401-lijn     randkleur                        (standaard rgba(255,255,255,.16))
     --e401-fout     kleur van foutmeldingen          (standaard #ff9c8a)
     --e401-duur     duur van een stapwissel          (standaard 420ms)
   ========================================================================== */

.e401 { position: relative; }

/* ----- Voortgang: stippen met een balk erachter ----- */
.e401-kop { position: relative; margin-bottom: 28px; }
html:not(.js) .e401 [data-alleen-js] { display: none; }
.e401-stippen {
  position: relative; display: grid; grid-template-columns: repeat(var(--e401-n, 4), 1fr);
  margin: 0; padding: 0; list-style: none; text-align: center;
}
.e401-stippen li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: 13px; line-height: 1.2; color: var(--e401-zacht, rgba(255, 255, 255, .6)); }
.e401-nr {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--e401-bg, #0f1b2d); border: 2px solid var(--e401-lijn, rgba(255, 255, 255, .16));
  font-weight: 700; font-size: 14px;
}
.e401-nr::after {
  /* vinkje voor een afgeronde stap: twee balkjes, alleen transform */
  content: ""; position: absolute; left: 10px; top: 9px; width: 12px; height: 7px;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg) scale(0); opacity: 0;
}
.e401-stippen li.is-nu { color: inherit; }
.e401-stippen li.is-nu .e401-nr { border-color: var(--e401-accent, #ff7a3d); color: var(--e401-accent, #ff7a3d); }
.e401-stippen li.is-klaar { color: inherit; }
.e401-stippen li.is-klaar .e401-nr { background: var(--e401-accent, #ff7a3d); border-color: var(--e401-accent, #ff7a3d); color: var(--e401-op-accent, #1a0f08); }
.e401-stippen li.is-klaar .e401-nr span { opacity: 0; }
.e401-stippen li.is-klaar .e401-nr::after { transform: rotate(-45deg) scale(1); opacity: 1; }

.e401-balk {
  position: absolute; z-index: 0; top: 16px; height: 2px;
  left: calc(100% / var(--e401-n, 4) / 2); right: calc(100% / var(--e401-n, 4) / 2);
  background: var(--e401-lijn, rgba(255, 255, 255, .16)); overflow: hidden;
}
.e401-balk span {
  position: absolute; inset: 0; background: var(--e401-accent, #ff7a3d);
  transform: scaleX(var(--e401-p, 0)); transform-origin: 0 50%;
}
.e401-teller { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--e401-zacht, rgba(255, 255, 255, .6)); }
html:not(.js) .e401-teller { display: none; }

/* ----- Stappen ----- */
.e401-deel { margin: 0; padding: 0; border: 0; min-width: 0; }
html:not(.js) .e401-deel + .e401-deel { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--e401-lijn, rgba(255, 255, 255, .16)); }
.e401-legend { padding: 0; margin-bottom: 18px; font-size: clamp(22px, 3vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.e401-legend:focus { outline: none; }
.e401-legend:focus-visible { outline: 2px solid var(--e401-accent, #ff7a3d); outline-offset: 4px; }
.e401-vraag { margin: 18px 0 10px; font-weight: 600; font-size: 15px; }
.e401-vraag:first-of-type { margin-top: 0; }

.e401-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.e401-tegel { position: relative; display: block; cursor: pointer; }
.e401-tegel input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.e401-tegel span {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border-radius: 12px;
  background: var(--e401-vlak, rgba(255, 255, 255, .06)); border: 1.5px solid var(--e401-lijn, rgba(255, 255, 255, .16));
  font-size: 15px; line-height: 1.3;
}
.e401-tegel span::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--e401-lijn, rgba(255, 255, 255, .3)); background: transparent;
}
.e401-tegel input[type="checkbox"] + span::before { border-radius: 5px; }
.e401-tegel input:checked + span { border-color: var(--e401-accent, #ff7a3d); background: var(--e401-vlak-aan, rgba(255, 122, 61, .12)); }
.e401-tegel input:checked + span::before { border-color: var(--e401-accent, #ff7a3d); background: var(--e401-accent, #ff7a3d); box-shadow: inset 0 0 0 3px var(--e401-bg, #0f1b2d); }
.e401-tegel input:focus-visible + span { outline: 2px solid var(--e401-accent, #ff7a3d); outline-offset: 2px; }

.e401-velden { display: grid; gap: 14px; }
@media (min-width: 600px) { .e401-velden { grid-template-columns: 1fr 1fr; } .e401-velden .e401-breed { grid-column: 1 / -1; } }
.e401-veld label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.e401-veld input, .e401-veld select {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px; margin: 0;
  font: inherit; font-size: max(16px, 1rem); color: inherit;
  background: var(--e401-vlak, rgba(255, 255, 255, .06)); border: 1.5px solid var(--e401-lijn, rgba(255, 255, 255, .16)); border-radius: 10px;
}
.e401-veld select option { color: #111; }
.e401-veld input:focus, .e401-veld select:focus { outline: 2px solid var(--e401-accent, #ff7a3d); outline-offset: 1px; border-color: transparent; }
.e401-veld input[aria-invalid="true"] { border-color: var(--e401-fout, #ff9c8a); }

.e401-fout { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--e401-fout, #ff9c8a); }
.e401-fout:empty { display: none; }

.e401-overzicht { display: grid; gap: 0; margin: 0 0 8px; }
.e401-overzicht:empty { display: none; }
.e401-overzicht div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--e401-lijn, rgba(255, 255, 255, .16)); }
.e401-overzicht dt { font-size: 13px; color: var(--e401-zacht, rgba(255, 255, 255, .6)); }
.e401-overzicht dd { margin: 0; grid-column: 1; font-weight: 500; overflow-wrap: anywhere; }
.e401-overzicht button { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 2px; border: 0; background: none; color: var(--e401-accent, #ff7a3d); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.e401-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 26px; }
.e401-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--e401-accent, #ff7a3d); background: var(--e401-accent, #ff7a3d); color: var(--e401-op-accent, #1a0f08);
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
}
.e401-knop-rand { background: transparent; color: inherit; border-color: var(--e401-lijn, rgba(255, 255, 255, .25)); }
.e401-knop:focus-visible { outline: 2px solid var(--e401-accent, #ff7a3d); outline-offset: 3px; }
.e401-knop[hidden] { display: none; }
.e401-knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.e401-verstuur { margin-top: 18px; }
.e401-status { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--e401-vlak-aan, rgba(255, 122, 61, .12)); line-height: 1.5; }
.e401-status:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e401-balk span { transition: transform var(--e401-duur, 420ms) cubic-bezier(.65, 0, .35, 1); }
  html:not([data-rm]) .e401-nr::after { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1) .15s, opacity .2s ease .15s; }
  html:not([data-rm]) .e401-deel.e401-in-vooruit { animation: e401-vooruit var(--e401-duur, 420ms) cubic-bezier(.2, .8, .2, 1) both; }
  html:not([data-rm]) .e401-deel.e401-in-terug { animation: e401-terug var(--e401-duur, 420ms) cubic-bezier(.2, .8, .2, 1) both; }
  html:not([data-rm]) .e401-knop { transition: transform .15s ease; }
  html:not([data-rm]) .e401-knop:active { transform: scale(.97); }
}
@keyframes e401-vooruit { from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes e401-terug { from { opacity: 0; transform: translate3d(-32px, 0, 0); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   E504 · Google-reviews als slider met sterren
   Zelf ingevoerde reviews (geen widget, geen script van Google) in een rij om
   door te vegen, met knoppen en stippen. Bovenaan het gemiddelde met sterren
   en het aantal reviews, onderaan een gewone link naar alle reviews.
   Komt een kaart in beeld, dan ploppen de sterren één voor één op (transform).
   Zonder JavaScript is het een gewone rij met scroll-snap.
   Instellen op .e504 met CSS-variabelen:
     --e504-ster     kleur van de sterren          (standaard #f4b400)
     --e504-kaart    achtergrond van een kaart     (standaard #fff)
     --e504-inkt     tekstkleur in een kaart       (standaard #182235)
     --e504-per-rij  kaarten naast elkaar vanaf 900px (standaard 3)
   ========================================================================== */

.e504 { --e504-gat: 14px; position: relative; }

/* Kop met het gemiddelde */
.e504-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 22px; }
.e504-cijfer { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.e504-gem { display: grid; gap: 4px; }
.e504-gem small { font-size: 14px; opacity: .75; }
.e504-sterren { position: relative; display: inline-flex; gap: 2px; line-height: 0; }
.e504-sterren svg { width: 18px; height: 18px; flex: none; }
.e504-sterren.e504-groot svg { width: 24px; height: 24px; }
.e504-leeg svg { fill: rgba(127, 127, 127, .3); }
.e504-vol { position: absolute; inset: 0 auto 0 0; overflow: hidden; display: inline-flex; gap: 2px; white-space: nowrap; }
.e504-vol svg, .e504-kaart .e504-sterren svg { fill: var(--e504-ster, #f4b400); }

/* De rij */
.e504-baan {
  display: flex; gap: var(--e504-gat); margin: 0; padding: 4px 2px 14px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.e504-baan:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; }
.e504-kaart {
  flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px;
  padding: 22px 22px 20px; border-radius: 20px;
  background: var(--e504-kaart, #fff); color: var(--e504-inkt, #182235);
  border: 1px solid rgba(24, 34, 53, .1);
}
@media (min-width: 600px) { .e504-kaart { flex-basis: calc((100% - var(--e504-gat)) / 2); } }
@media (min-width: 900px) {
  .e504-kaart { flex-basis: calc((100% - (var(--e504-per-rij, 3) - 1) * var(--e504-gat)) / var(--e504-per-rij, 3)); }
}
.e504-kaart blockquote { margin: 0; font-size: 16px; line-height: 1.55; flex: 1; }
.e504-kaart blockquote::before { content: "\201C"; display: block; height: 30px; font: 400 64px/1 Georgia, serif; opacity: .25; }
.e504-wie { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.e504-wie b { display: block; font-size: 15px; }
.e504-wie small { opacity: .65; }
.e504-letter { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; color: #fff; background: var(--e504-kleur, #3b6fd8); }

/* Bediening */
.e504-onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
.e504-knoppen { display: flex; align-items: center; gap: 10px; }
.e504-pijl {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 1px solid currentColor; background: transparent; color: inherit; opacity: .85;
}
.e504-pijl:hover, .e504-pijl:focus-visible { opacity: 1; }
.e504-pijl[disabled] { opacity: .25; cursor: default; }
.e504-pijl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.e504-stippen { display: inline-flex; gap: 8px; }
.e504-stip { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: currentColor; opacity: .25; }
.e504-stip::after { content: ""; position: absolute; inset: -12px -5px; }
.e504-stip[aria-current="true"] { opacity: 1; }
.e504-google { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: inherit; }
.e504-google[hidden], .e504-knoppen[hidden] { display: none; }
.e504-noot { margin-top: 10px; font-size: 12.5px; opacity: .6; }

/* Sterren ploppen op als een kaart in beeld komt (alleen met beweging) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e504-klaar .e504-kaart .e504-sterren svg { transform: scale(0); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease; }
  html:not([data-rm]) .e504-klaar .e504-gezien .e504-sterren svg { transform: none; opacity: 1; }
  html:not([data-rm]) .e504-klaar .e504-gezien .e504-sterren svg:nth-child(2) { transition-delay: .07s; }
  html:not([data-rm]) .e504-klaar .e504-gezien .e504-sterren svg:nth-child(3) { transition-delay: .14s; }
  html:not([data-rm]) .e504-klaar .e504-gezien .e504-sterren svg:nth-child(4) { transition-delay: .21s; }
  html:not([data-rm]) .e504-klaar .e504-gezien .e504-sterren svg:nth-child(5) { transition-delay: .28s; }
  html:not([data-rm]) .e504-baan { scroll-behavior: smooth; }
}

/* ==========================================================================
   E506 · Veelgestelde vragen met zoeken
   Gewone <details>-vragen (werken zonder JavaScript) met een zoekveld dat
   meteen filtert en treffers markeert, plus knoppen per onderwerp. Het
   antwoord schuift zacht in en het plusje draait naar een kruisje; alleen
   transform en opacity, de hoogte springt gewoon.
   Instellen op .e506 met CSS-variabelen:
     --e506-accent   kleur van accenten en markering   (standaard #e2603f)
     --e506-vlak     achtergrond van een open vraag    (standaard rgba(226,96,63,.07))
     --e506-lijn     scheidingslijnen                  (standaard rgba(0,0,0,.12))
   ========================================================================== */

.e506 { color: inherit; }
.e506-zoek[hidden], .e506-filters[hidden], .e506-niets[hidden], .e506-vraag[hidden] { display: none; }

.e506-zoek { position: relative; margin: 0 0 14px; }
.e506-zoek label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.e506-zoek svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .55; pointer-events: none; }
.e506-zoek input {
  width: 100%; min-height: 54px; padding: 0 16px 0 48px; border-radius: 16px;
  border: 1.5px solid var(--e506-lijn, rgba(0, 0, 0, .14)); background: rgba(255, 255, 255, .7); color: inherit; font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.e506-zoek input:focus { outline: none; border-color: var(--e506-accent, #e2603f); }
.e506-zoek input:focus-visible { outline: 2px solid var(--e506-accent, #e2603f); outline-offset: 2px; }

.e506-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.e506-filters button {
  min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--e506-lijn, rgba(0, 0, 0, .14));
  background: transparent; color: inherit; font-size: 14px; font-weight: 600;
}
.e506-filters button[aria-pressed="true"] { background: var(--e506-accent, #e2603f); border-color: var(--e506-accent, #e2603f); color: #fff; }
.e506-teller { min-height: 1.4em; margin: 8px 0 4px; font-size: 13px; opacity: .7; }

.e506-lijst { border-top: 1px solid var(--e506-lijn, rgba(0, 0, 0, .12)); }
.e506-vraag { border-bottom: 1px solid var(--e506-lijn, rgba(0, 0, 0, .12)); }
.e506-vraag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 6px; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; line-height: 1.35;
}
.e506-vraag summary::-webkit-details-marker { display: none; }
.e506-vraag summary:focus-visible { outline: 2px solid var(--e506-accent, #e2603f); outline-offset: 2px; border-radius: 8px; }
.e506-plus { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; }
.e506-plus::before, .e506-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; border-radius: 1px; }
.e506-plus::after { transform: rotate(90deg); }
.e506-vraag[open] .e506-plus { transform: rotate(45deg); opacity: 1; color: var(--e506-accent, #e2603f); }
.e506-vraag[open] { background: var(--e506-vlak, rgba(226, 96, 63, .07)); }
.e506-antwoord { padding: 0 6px 20px; max-width: 64ch; line-height: 1.6; }
.e506-antwoord p + p { margin-top: 10px; }
.e506-mark { background: transparent; color: inherit; box-shadow: inset 0 -.5em 0 rgba(226, 96, 63, .28); border-radius: 2px; }

.e506-niets { margin-top: 18px; padding: 20px; border-radius: 18px; border: 1.5px dashed var(--e506-lijn, rgba(0, 0, 0, .2)); }
.e506-niets p { margin: 0 0 12px; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e506-plus { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease; }
  html:not([data-rm]) .e506-vraag[open] .e506-antwoord { animation: e506-in .45s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes e506-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }