/* ============================================================
   NONIUS — case-template (master base)
   Laadt bovenop home.css. Alles hier is klantonafhankelijk:
   elke case-pagina en de case-index gebruiken exact deze regels.
   ============================================================ */

.case-hero{ padding-block:clamp(2.4rem,6vw,4.4rem) clamp(1.4rem,3vw,2.2rem); }
.case-hero h1{ font-size:clamp(2.1rem,5.2vw,3.7rem); margin:.9rem 0 0; max-width:18ch; }
.case-hero .lead{ font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--muted);
  max-width:56ch; margin:1.1rem 0 0; }

.case-meta{ display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem; margin:2rem 0 0;
  padding-top:1.4rem; border-top:1px solid var(--line-soft); }
.case-meta div{ min-width:0; }
.case-meta dt{ font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.case-meta dd{ margin:.35rem 0 0; font-weight:600; font-size:.96rem; max-width:34ch; }
.case-meta a{ color:var(--goud-deep); text-decoration:none; border-bottom:1px solid currentColor; }

/* Fijndruk in de vertoner: staand tegen de linkerrand, zoals in de banner op
   de homepage. Staat het beeld hier, dan staat de regel die erbij hoort er ook. */
/* Rechts, niet links: linksonder staat de titel van de case al. Een dun donker
   plaatje eronder, want een campagnebeeld kan net zo goed licht als donker zijn
   en dan verdwijnt witte fijndruk. */
.stage-fijn{
  position:absolute; right:.45rem; bottom:.8rem; z-index:4; margin:0;
  writing-mode:vertical-rl;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,239,225,.82); max-height:min(80%,26rem); overflow:hidden;
  padding:.55rem .3rem; border-radius:.3rem; background:rgba(8,6,4,.42);
  text-shadow:0 1px 5px rgba(0,0,0,.8); pointer-events:none;
}
@media (max-width:760px){ .stage-fijn{ font-size:.48rem; right:.25rem; max-height:60%; } }

/* ---- het vertoon-slot: slideshow over de volle vensterbreedte --------- */
/* <main class="case"> is zelf niet begrensd — de .wrap binnen elke sectie doet
   dat. Deze sectie laat de wrap weg en loopt dus vanzelf van rand tot rand,
   zonder 100vw-trucs die op de scrollbar stuklopen. */
.case-stage-wrap{ margin-block:0 clamp(1.4rem,3vw,2.4rem); }
.case-stage{ position:relative; width:100%; overflow:hidden;
  height:clamp(320px,58vw,760px);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:color-mix(in srgb,var(--ink) 10%,transparent); }

.stage-track{ position:absolute; inset:0; }
.stage-track img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0; transition:opacity .7s ease; }
.stage-track img.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .stage-track img{ transition:none; } }

.stage-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(20,15,9,.42);
  color:#fff; font-size:1.7rem; line-height:1; padding:0 0 .18em;
  backdrop-filter:blur(3px); transition:background .16s, transform .16s; }
.stage-nav:hover{ background:rgba(20,15,9,.72); }
.stage-nav:focus-visible{ outline:3px solid var(--goud); outline-offset:2px; }
.stage-nav.prev{ left:clamp(.6rem,2vw,1.6rem); }
.stage-nav.next{ right:clamp(.6rem,2vw,1.6rem); }

.stage-dots{ position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  z-index:4; display:flex; gap:.5rem; }
.stage-dots button{ width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.6); background:transparent; transition:background .16s; }
.stage-dots button.on{ background:#fff; }
.stage-dots button:focus-visible{ outline:2px solid var(--goud); outline-offset:3px; }

/* Subtiele klantnaam linksonder: fluistert tot je erover gaat, dan licht hij op. */
.stage-title{ position:absolute; left:clamp(1rem,4vw,2.4rem); bottom:1.1rem; z-index:4;
  font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1.1rem,2.4vw,1.9rem); color:#fff; opacity:.34;
  text-shadow:0 2px 14px rgba(0,0,0,.55); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease; }
.case-stage:hover .stage-title{ opacity:.95; transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .stage-title{ transition:none; } }

.stage-label{ position:absolute; right:1rem; top:.9rem; z-index:4;
  font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#f6efe1; opacity:.85; pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* ---- lopende tekst --------------------------------------------------- */
.case-body .case-sec{ display:grid; gap:.4rem 3rem; padding-block:clamp(1.1rem,2.4vw,1.8rem);
  border-top:1px solid var(--line-soft); }
.case-body .case-sec:first-child{ border-top:0; padding-top:0; }
@media (min-width:820px){ .case-body .case-sec{ grid-template-columns:minmax(0,15ch) minmax(0,1fr); } }
.case-body .case-sec h2{ font-size:clamp(1.05rem,1.5vw,1.2rem); margin:0; color:var(--goud-deep);
  font-family:var(--mono); letter-spacing:.04em; }
.case-body .case-sec p{ margin:0; color:var(--ink); font-size:clamp(1rem,1.25vw,1.12rem);
  line-height:1.72; max-width:64ch; }

.case-palette{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.case-palette .sw{ display:flex; flex-direction:column; gap:.35rem; min-width:112px; }
.case-palette .sw span{ height:56px; border-radius:12px; border:1px solid var(--line-soft); }
.case-palette .sw b{ font-size:.82rem; }
.case-palette .sw code{ font-family:var(--mono); font-size:.7rem; color:var(--muted); }

/* Techniek — leesbare tekst, geen beeld, zodat het meetelt voor zoekmachines. */
.case-stack{ margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); }
.case-stack h2{ font-family:var(--mono); font-size:1rem; letter-spacing:.04em;
  color:var(--goud-deep); margin:0 0 .9rem; }
.case-stack ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.case-stack li{ font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.03em;
  padding:.42rem .8rem; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink); }
.case-stack li:first-child{ border-color:var(--goud); color:var(--goud-deep);
  background:color-mix(in srgb,var(--goud) 10%,transparent); }

/* ---- beeldblokken ---------------------------------------------------- */
.case-gallery .wrap{ display:grid; gap:clamp(1.2rem,3vw,2.2rem); }
@media (min-width:860px){ .case-gallery .wrap{ grid-template-columns:1fr 1fr; } }
.case-fig{ margin:0; }
.case-fig.wide{ grid-column:1/-1; }
.case-fig img{ width:100%; height:auto; display:block; border-radius:var(--r-lg);
  border:1px solid var(--line-soft); background:var(--bg-2); }
.case-fig figcaption{ margin-top:.7rem; font-size:.86rem; color:var(--muted);
  line-height:1.6; max-width:60ch; }

/* Het beeld is een knop: zichtbaar niets, maar wel bereikbaar met tab. */
.case-fig .fig-open{ display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; border-radius:var(--r-lg); }
.case-fig .fig-open:focus-visible{ outline:2px solid var(--goud); outline-offset:3px; }
.case-fig .fig-open img{ transition:transform .28s ease, box-shadow .28s ease; }
@media (hover:hover){
  .case-fig .fig-open:hover img{ transform:translateY(-2px); box-shadow:0 18px 40px -26px rgba(0,0,0,.45); }
}

/* ---- vergroter ------------------------------------------------------- */
.lightbox{ position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem); background:rgba(12,10,7,.92);
  backdrop-filter:blur(3px); animation:lb-in .18s ease-out; }
.lightbox[hidden]{ display:none; }
@keyframes lb-in{ from{ opacity:0; } to{ opacity:1; } }
.lightbox figure{ margin:0; display:grid; gap:.9rem; justify-items:center;
  max-width:min(1500px,100%); max-height:100%; }
.lightbox img{ display:block; max-width:100%; max-height:78vh; width:auto; height:auto;
  border-radius:var(--r-lg); background:var(--bg-2); }
.lightbox figcaption{ color:#E8DFCE; font-size:.9rem; line-height:1.6; max-width:70ch;
  text-align:center; }
.lightbox button{ position:absolute; border:0; cursor:pointer; color:#F6EEDD;
  background:rgba(255,255,255,.08); border-radius:999px; line-height:1;
  display:grid; place-items:center; transition:background .16s; }
.lightbox button:hover{ background:rgba(255,255,255,.2); }
.lightbox button:focus-visible{ outline:2px solid var(--goud); outline-offset:2px; }
.lb-sluit{ top:1.1rem; right:1.1rem; width:2.7rem; height:2.7rem; font-size:1.7rem; }
.lb-vorige, .lb-volgende{ top:50%; transform:translateY(-50%); width:3rem; height:3rem;
  font-size:2rem; padding-bottom:.22rem; }
.lb-vorige{ left:1.1rem; }
.lb-volgende{ right:1.1rem; }
/* Eén beeld in de galerij: dan hebben pijlen geen zin. */
.lightbox.solo .lb-vorige, .lightbox.solo .lb-volgende{ display:none; }
body.lb-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .lightbox{ animation:none; }
  .case-fig .fig-open img{ transition:none; }
}

/* ---- resultaat ------------------------------------------------------- */
.case-result ul{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.7rem; }
@media (min-width:820px){ .case-result ul{ grid-template-columns:1fr 1fr; gap:.7rem 2.4rem; } }
.case-result li{ position:relative; padding-left:1.7rem; font-size:1rem; line-height:1.65; }
.case-result li::before{ content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--goud); }

/* ---- volgende case + cta --------------------------------------------- */
.case-next .wrap{ display:grid; gap:1.4rem; }
@media (min-width:820px){ .case-next .wrap{ grid-template-columns:1.3fr .9fr; align-items:stretch; } }
.next-card{ display:flex; flex-direction:column; gap:.45rem; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.9rem); transition:transform .18s, border-color .18s, box-shadow .18s; }
.next-card:hover{ transform:translateY(-3px); border-color:var(--goud);
  box-shadow:0 10px 30px rgba(33,28,21,.09); }
.next-card strong{ font-size:clamp(1.3rem,2.4vw,1.8rem); }
.next-card .t{ color:var(--muted); max-width:44ch; }
.next-card .open{ margin-top:.6rem; font-weight:700; font-size:.92rem; color:var(--goud-deep); }
.next-card .arw{ display:inline-block; transition:transform .18s; }
.next-card:hover .arw{ transform:translateX(4px); }

.case-cta{ display:flex; flex-direction:column; justify-content:center; gap:.8rem;
  border:1px dashed var(--line); border-radius:var(--r-lg); padding:clamp(1.3rem,2.6vw,1.9rem); }
.case-cta p{ margin:0; font-size:1.15rem; font-weight:600; }

/* ---- overzichtspagina ------------------------------------------------ */
.case-index{ display:grid; gap:clamp(1.1rem,2.4vw,1.8rem); margin-top:2rem; }
@media (min-width:760px){ .case-index{ grid-template-columns:1fr 1fr; } }
.case-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .18s, border-color .18s, box-shadow .18s; }
.case-card:hover{ transform:translateY(-3px); border-color:var(--goud);
  box-shadow:0 10px 30px rgba(33,28,21,.09); }
/* Screenshot binnen een rand: tegen de kaarthoek aan sneed de ronding de
   header van de site eraf. 16/10 = de verhouding waarin geschoten wordt,
   dus er valt verticaal ook niets meer weg. */
.case-card .ct{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:var(--bg); padding:.6rem .6rem .9rem; }
.case-card .ct img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block; border-radius:10px; border:1px solid var(--line-soft); }
/* Klantnaam over de beeldhoek: fluistert tot je de kaart aanraakt, dan licht hij op.
   De verloop erachter houdt hem leesbaar, ook op een licht screenshot. */
.case-card .ct-title{ position:absolute; left:1.25rem; right:1.25rem; bottom:1.5rem;
  font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1rem,1.9vw,1.45rem); line-height:1.15; color:#fff; opacity:.38;
  text-shadow:0 2px 12px rgba(0,0,0,.75); pointer-events:none;
  transition:opacity .28s ease, transform .28s ease; }
.case-card:hover .ct-title,
.case-card:focus-visible .ct-title{ opacity:1; transform:translateY(-3px); }
@media (prefers-reduced-motion:reduce){ .case-card .ct-title{ transition:none; } }
.case-card .cb{ display:flex; flex-direction:column; gap:.4rem; padding:1.2rem 1.35rem 1.4rem; flex:1; }
.case-card strong{ font-size:1.35rem; }
.case-card .t{ color:var(--muted); font-size:.94rem; }
.case-card .open{ margin-top:auto; padding-top:.7rem; font-weight:700; font-size:.9rem; color:var(--goud-deep); }
.case-card .arw{ display:inline-block; transition:transform .18s; }
.case-card:hover .arw{ transform:translateX(4px); }

/* ============================================================
   WERKINDEX — het uitstalraam. Hoort bij case_index() in
   public/case.php. Alles hier begint met .wi- of hangt aan
   .werkindex, zodat het de casepagina's niet raakt.
   ============================================================ */

.wi-kop{ padding-block:clamp(2.6rem,6vw,5rem) clamp(1.4rem,3vw,2.2rem); }
.wi-kop h1{ font-size:clamp(2.2rem,5.6vw,4rem); margin:.9rem 0 0; max-width:17ch; line-height:1.02; }
.wi-kop .lead{ font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--muted); max-width:60ch; margin:1.2rem 0 0; }

/* Cijfers: geen versiering maar het bewijs onder de kop. */
.wi-cijfers{ display:flex; flex-wrap:wrap; gap:1.4rem 3rem; margin:clamp(1.8rem,4vw,2.8rem) 0 0;
  padding-top:1.5rem; border-top:1px solid var(--line-soft); }
.wi-cijfers dt{ font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.02em;
  color:var(--goud-deep); line-height:1; }
.wi-cijfers dd{ margin:.35rem 0 0; font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Filter: chips die blijven plakken onder de nav, zodat je bij het scrollen
   nooit terug hoeft om van discipline te wisselen. */
.wi-filter{ position:sticky; top:calc(var(--navh,64px) - 1px); z-index:8;
  padding-block:.7rem; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px); border-block:1px solid var(--line-soft); }
.wi-filter .wrap{ display:flex; gap:.5rem; flex-wrap:wrap; }
.wi-chip{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted);
  font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; transition:color .16s, border-color .16s, background .16s; }
.wi-chip i{ font-style:normal; opacity:.55; font-size:.66rem; }
.wi-chip:hover{ color:var(--ink); border-color:var(--goud); }
.wi-chip.on{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.wi-chip.on i{ opacity:.7; }
.wi-chip:focus-visible{ outline:2px solid var(--goud); outline-offset:2px; }

/* Uitgelicht: één case over de volle breedte, met zijn eigen bannerbeeld. */
.wi-groot{ position:relative; display:block; margin:clamp(1.4rem,3vw,2.4rem) 0 0;
  min-height:clamp(300px,42vh,460px); overflow:hidden; text-decoration:none; color:#fff;
  background:#0C0A07 var(--doek) center 60%/cover no-repeat; isolation:isolate; }
.wi-groot::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, rgba(6,4,3,.95) 0%, rgba(6,4,3,.62) 42%, rgba(6,4,3,.1) 80%),
             linear-gradient(to right, rgba(6,4,3,.85) 0%, rgba(6,4,3,.35) 46%, rgba(6,4,3,0) 78%); }
.wi-groot-in{ position:relative; z-index:1; display:block;
  width:min(1180px,92vw); margin:0 auto; padding:clamp(2.4rem,6vw,4rem) 0 clamp(1.6rem,3.4vw,2.6rem);
  min-height:inherit; display:flex; flex-direction:column; justify-content:flex-end; }
.wi-groot .eyebrow{ color:#E8DCC6; }
.wi-groot strong{ display:block; font-family:var(--disp); font-weight:800;
  font-size:clamp(1.9rem,4.6vw,3.2rem); line-height:1.02; margin:.5rem 0 .4rem;
  text-shadow:0 4px 30px rgba(0,0,0,.5); }
.wi-groot .t{ display:block; max-width:52ch; color:#EDE3D2; line-height:1.55;
  text-shadow:0 2px 14px rgba(0,0,0,.6); }
.wi-groot .open{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem;
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--goud); }
.wi-groot:hover .arw{ transform:translateX(4px); }
.wi-groot .arw{ transition:transform .18s ease; }

/* De rij eronder */
.werkindex .case-card[hidden]{ display:none; }
.werkindex .cb .ceyebrow{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.werkindex .cjaar{ font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.12em;
  color:var(--muted); opacity:.8; }
.werkindex .case-card.zonder-beeld .cb{ padding-top:1.4rem; }
.wi-leeg{ margin:2rem 0 0; color:var(--muted); font-size:.95rem; }

/* De vraag onderaan. Eén veld: alles wat er meer op staat, wordt niet ingevuld. */
.wi-cta{ margin-top:clamp(1rem,3vw,2rem); padding-block:clamp(2.6rem,6vw,4.4rem);
  background:linear-gradient(160deg, color-mix(in srgb,var(--goud) 16%,transparent), transparent 62%),
             var(--bg-2); border-top:1px solid var(--line-soft); }
.wi-cta .wrap{ display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
@media (min-width:900px){ .wi-cta .wrap{ grid-template-columns:1.05fr .95fr; } }
.wi-cta h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); margin:.6rem 0 .8rem; max-width:16ch; line-height:1.05; }
.wi-cta p{ color:var(--muted); max-width:52ch; line-height:1.65; margin:0; }
.wi-form{ display:grid; gap:.9rem; padding:clamp(1.2rem,2.6vw,1.8rem);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 20px 50px -40px rgba(33,28,21,.5); }
.wi-veld{ display:grid; gap:.45rem; }
.wi-veld span{ font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.wi-veld input{ width:100%; padding:.85rem 1rem; border-radius:.5rem;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; }
.wi-veld input:focus-visible{ outline:2px solid var(--goud); outline-offset:1px; border-color:var(--goud); }
.wi-form .btn{ justify-self:start; }
.wi-klein{ margin:0; font-size:.82rem; color:var(--muted); }
.wi-klein a{ color:var(--goud-deep); font-weight:600; }

@media (prefers-reduced-motion:reduce){ .wi-groot .arw{ transition:none; } }

/* ============================================================
   STROOM — hoe iets door het systeem loopt, als schema.
   Hoort bij case_stroom() in app/case_shell.php.
   ============================================================ */
.case-stroom .stroom{ list-style:none; margin:0; padding:0; display:grid; gap:0; }

.stroom-stap{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  padding-bottom:clamp(1.1rem,2.4vw,1.7rem); position:relative;
  opacity:0; translate:0 10px;
  transition:opacity .5s ease, translate .5s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i) * .09s);
}
.reveal.in .stroom-stap, .reveal.in .stroom-tak{ opacity:1; translate:0 0; }

/* De lijn tussen de bollen. Hij tekent zichzelf van boven naar onder. */
.stroom-stap::before{
  content:""; position:absolute; left:calc(1.4rem - 1px); top:2.8rem; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--goud), color-mix(in srgb,var(--goud) 22%,transparent));
  transform-origin:top; scale:1 0;
  animation:stroom-lijn .5s ease-out forwards; animation-delay:calc(var(--i) * .09s + .2s);
}
.reveal:not(.in) .stroom-stap::before{ animation:none; scale:1 0; }
@keyframes stroom-lijn{ to{ scale:1 1; } }
.stroom-stap:last-child::before, .stroom-stap:has(+ .stroom-tak)::before{ bottom:.2rem; }

.stroom-bol{
  position:relative; z-index:1; width:2.8rem; height:2.8rem; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.86rem; font-weight:700;
  background:var(--bg); color:var(--goud-deep);
  border:2px solid var(--goud); box-shadow:0 0 0 5px var(--bg);
}
/* De puls die langs de lijn loopt: één punt, traag, oneindig. Dat is wat een
   schema van een lijstje onderscheidt — er gaat iets doorheen. */
.stroom-bol::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--goud); opacity:0;
  animation:stroom-puls 3.4s ease-out infinite;
  animation-delay:calc(var(--i) * .45s);
}
@keyframes stroom-puls{
  0%  { opacity:.8; scale:1; }
  40% { opacity:0; scale:1.7; }
  100%{ opacity:0; scale:1.7; }
}

.stroom-tekst b{ display:block; font-size:1.05rem; }
.stroom-tekst span{ display:block; color:var(--muted); line-height:1.6; margin-top:.2rem; max-width:56ch; }
.stroom-tekst i{ display:block; font-style:normal; margin-top:.4rem;
  font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--goud-deep); opacity:.85; }

/* De vertakking: hier splitst het. Twee vakken naast elkaar, elk met hun eigen
   afloop, want dát is de mechaniek. */
.stroom-tak{
  display:grid; gap:1rem; margin:.2rem 0 0 0; padding-left:calc(2.8rem + 1.1rem);
  opacity:0; translate:0 10px;
  transition:opacity .5s ease, translate .5s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i) * .09s);
}
@media (min-width:720px){ .stroom-tak{ grid-template-columns:1fr 1fr; } }
.tak-vak{
  padding:1rem 1.2rem; border-radius:var(--r); border:1px solid var(--line);
  background:var(--card); position:relative;
}
.tak-vak::before{
  content:""; position:absolute; left:-1px; top:.9rem; bottom:.9rem; width:3px; border-radius:3px;
}
.tak-vak.ja::before { background:#7BA05B; }
.tak-vak.nee::before{ background:#B4553F; }
.tak-vak b{ display:block; font-size:1rem; }
.tak-vak span{ display:block; color:var(--muted); line-height:1.6; margin-top:.25rem; }
.tak-vak i{ display:block; font-style:normal; margin-top:.5rem;
  font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }

@media (prefers-reduced-motion:reduce){
  .stroom-stap, .stroom-tak{ opacity:1; translate:0 0; transition:none; }
  .stroom-stap::before{ animation:none; scale:1 1; }
  .stroom-bol::after{ animation:none; }
}