/* Onderdelen */

/* ---------- Liquid Glass ---------- */
/* Glas is de zwevende laag boven de inhoud: navigatie, bedieningselementen, labels, de vaste knop.
   De inhoud zelf (pijlers, tabellen, FAQ) blijft massief. */
.glas {
  position: relative;
  isolation: isolate;
  background: var(--glas-vlak);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-verzadiging));
  backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-verzadiging));
  box-shadow: inset 0 1px 0 var(--glas-glans), var(--glas-schaduw);
}
.glas--sterk { background: var(--glas-vlak-sterk); }
/* Lichtrand: helderst linksboven, zoals licht dat op glas valt */
.glas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* achter de inhoud van het glas, boven het glasvlak */
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(150deg, var(--glas-glans) 0%, var(--glas-rand) 30%, transparent 55%, var(--glas-rand) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Podium: de zachte achtergrond waar het glas overheen ligt */
.podium { position: relative; isolation: isolate; overflow: hidden; background: var(--podium-basis); }
.podium::before, .podium::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.podium::before { width: min(90vw, 44rem); top: -18%; right: -14%; background: radial-gradient(closest-side, var(--podium-1), transparent); }
.podium::after { width: min(110vw, 52rem); bottom: -38%; left: -20%; background: radial-gradient(closest-side, var(--podium-2), transparent); }

/* ---------- Logo (tijdelijk PNG zonder achtergrond, wordt SVG) ---------- */
.logo { height: 2.5rem; width: auto; }

/* Het woordmerk, logo A (gekozen 21 september). De vorm komt uit tools/maak-logo.py, hetzelfde
   bestand als assets/logo/viralsocials-logo-*.svg. De letters volgen de tekstkleur, dus op licht
   navy en op donker wit; de pijl is altijd oranje. */
.woordmerk { display: block; color: var(--kleur-tekst); line-height: 0; }
.woordmerk svg { height: 2.6rem; width: auto; }
.footer .woordmerk svg { height: 3.25rem; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.375rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pil);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duur), border-color var(--duur), transform var(--duur), box-shadow var(--duur);
}
.knop:active { transform: translateY(1px) scale(0.99); }
.knop svg { width: 1.125rem; height: 1.125rem; flex: none; }
.knop--primair {
  background: var(--kleur-accent);
  color: var(--kleur-op-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 16px -6px rgb(254 117 29 / 0.55);
}
.knop--primair:hover { background: var(--kleur-accent-hover); }
.knop--secundair { background: transparent; color: var(--kleur-tekst); border-color: var(--kleur-rand-sterk); }
.knop--secundair:hover { border-color: var(--kleur-tekst); }
.knop--klein { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }

.tekstlink {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--kleur-accent);
}
.tekstlink:hover { text-decoration-color: currentColor; }

/* ---------- Navigatie ---------- */
.nav { position: sticky; top: 0; z-index: 50; padding-block: 0.75rem; }
.nav__balk {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  border-radius: var(--radius-pil);
}
.nav__logo { flex: none; border-radius: var(--radius-s); }
.nav__links { display: none; list-style: none; gap: 0.25rem; margin-inline: auto; }
.nav__links a {
  display: block;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  border-radius: var(--radius-pil);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--duur);
}
.nav__links a:hover { background: var(--glas-vlak); }
.nav__acties { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.nav__icoon, .nav__taal {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius-pil);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.nav__icoon:hover, .nav__taal:hover { background: var(--glas-vlak); }
.nav__icoon svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 76rem) {
  .nav__links { display: flex; }
  .nav__acties { margin-left: 0; }
}

/* ---------- Hero ---------- */
.hero-podium { margin-top: -4.25rem; padding-top: 4.25rem; } /* laat het podium onder de zwevende navigatie doorlopen */
.hero {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 8vw, 6rem) clamp(3rem, 8vw, 6rem);
}
@media (min-width: 60rem) { .hero { grid-template-columns: 1.1fr 0.9fr; } }
.hero__tekst > * + * { margin-top: 1.5rem; }
.hero .kop-1 { max-width: 14ch; }

.tweesprong { display: grid; gap: 0.75rem; max-width: 40rem; }
@media (min-width: 40rem) { .tweesprong { grid-template-columns: 1fr 1fr; } }
.tweesprong__keuze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 1rem 1.125rem 1rem 1.375rem;
  border-radius: var(--radius-l);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: transform var(--duur);
}
.tweesprong__keuze:hover { transform: translateY(-2px); }
.tweesprong__pijl {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--kleur-accent);
  color: var(--kleur-op-accent);
  transition: transform var(--duur);
}
.tweesprong__pijl svg { width: 1.125rem; height: 1.125rem; }
.tweesprong__keuze:hover .tweesprong__pijl { transform: translate(2px, -2px); }

/* Zwevende reels met glazen labels */
.reels { position: relative; width: 100%; max-width: 30rem; height: clamp(23rem, 95vw, 32rem); margin-inline: auto; }
.reel {
  position: absolute;
  width: 44%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--glas-schaduw);
}
.reel--1 { left: 0; top: 14%; background: var(--reel-b); transform: rotate(var(--hoek)); }
.reel--2 { left: 28%; top: 0; z-index: 2; background: var(--reel-a); }
.reel--3 { right: 0; top: 18%; background: var(--reel-c); transform: rotate(6deg); }
/* Foto in een reelkaart. */
.reel__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel picture { display: contents; }
/* De video ligt boven de poster en komt pas tevoorschijn als hij echt speelt. */
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms ease; }
.reel.is-spelend .reel__video { opacity: 1; }

/* Sluier over de foto, in een merkkleur. Drie foto's uit drie situaties hebben elk hun
   eigen kleurtemperatuur; deze laag trekt ze naar elkaar toe en maakt de witte tekst
   onderin leesbaar. Zelfde opbouw als de banner die ViralSocials al gebruikt. */
.reel__sluier { position: absolute; inset: 0; pointer-events: none; }
.reel--1 .reel__sluier { background: linear-gradient(to top, rgb(6 0 46 / 0.50) 0%, rgb(6 0 46 / 0.08) 46%, rgb(6 0 46 / 0.02) 100%); }
.reel--2 .reel__sluier { background: linear-gradient(to top, rgb(254 117 29 / 0.88) 0%, rgb(254 117 29 / 0.30) 42%, rgb(254 117 29 / 0.04) 78%); }
.reel--3 .reel__sluier { background: linear-gradient(to top, rgb(6 0 46 / 0.68) 0%, rgb(6 0 46 / 0.14) 48%, rgb(6 0 46 / 0.02) 100%); }

/* Het aantal weergaven, linksonder in de kaart. Geen glas: witte tekst op de sluier
   leest beter en het glas zou hier over oranje komen te liggen. */
.reel__views {
  position: absolute;
  left: 0.875rem;
  bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgb(6 0 46 / 0.35);
}
.reel__views svg { width: 1rem; height: 1rem; flex: none; }
:root:not([data-weergave="placeholders"]) .reel__views .ph {
  min-width: 5ch;
  background: rgb(255 255 255 / 0.5);
}

.reel__speel {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--kleur-tekst);
}
.reel__speel svg { width: 1rem; height: 1rem; margin-left: 2px; }
.chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: var(--radius-pil);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
.chip__icoon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--kleur-accent); color: var(--kleur-op-accent); }
.chip__icoon svg { width: 1rem; height: 1rem; }
.chip--1 { left: 2%; bottom: 4%; }
.chip--2 { right: 0; top: 4%; }

/* ---------- Bewijs en cijfers ---------- */
.bewijs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; font-size: var(--fs-klein); color: var(--kleur-tekst-2); }
.bewijs li { display: flex; align-items: center; gap: 0.5rem; }
.bewijs li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 2px;
  background: var(--kleur-accent);
  transform: rotate(var(--hoek));
}

.cijfer {
  position: relative;
  display: inline-block;
  padding-bottom: 0.2em;
  font-size: var(--fs-cijfer);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cijfer::after {
  content: "";
  position: absolute;
  left: 0.05em;
  bottom: 0;
  width: min(100%, 1.4em);
  height: 0.12em;
  border-radius: 2px;
  background: var(--kleur-accent);
  transform: rotate(var(--hoek));
  transform-origin: left center;
}

/* Placeholder: alleen tijdens ontwikkeling, de build weigert pagina's waar dit nog in staat */
.ph {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.5em;
  border: 1.5px dashed var(--kleur-accent);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Kaarten ---------- */
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.kaart {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-l);
  background: var(--kleur-vlak);
}
.kaart__bewijs { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--kleur-rand); font-size: var(--fs-klein); }
.spoor { display: flex; flex-direction: column; gap: 1rem; }
.spoor .tekstlink { margin-top: auto; display: inline-flex; align-items: center; gap: 0.375rem; }
.spoor .tekstlink svg { width: 1.125rem; height: 1.125rem; }

/* Casekaart, met glazen label over het beeld */
.case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-l);
  background: var(--kleur-vlak);
  text-decoration: none;
  transition: border-color var(--duur), transform var(--duur);
}
.case:hover { border-color: var(--kleur-rand-sterk); transform: translateY(-2px); }
.case__beeld { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--reel-a); }
.case:nth-child(2n) .case__beeld { background: var(--reel-c); }
.case__label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pil);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--kleur-tekst);
}
.case__inhoud { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; }
.case__resultaat { font-size: var(--fs-kop-3); font-weight: 800; line-height: 1.2; }

/* ---------- Stappen ---------- */
.stappen { display: grid; gap: 1.5rem; counter-reset: stap; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.stap { counter-increment: stap; padding-top: 1.25rem; border-top: 2px solid var(--kleur-rand); }
.stap::before {
  content: counter(stap, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  color: var(--kleur-accent-tekst);
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stap h3 { margin-bottom: 0.5rem; }
.stap p { color: var(--kleur-tekst-2); }

/* ---------- Vergelijkingstabel ---------- */
.tabel { overflow-x: auto; border: 1px solid var(--kleur-rand); border-radius: var(--radius-l); }
.tabel table { width: 100%; min-width: 36rem; border-collapse: collapse; }
.tabel th, .tabel td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--kleur-rand); text-align: left; vertical-align: top; }
.tabel tr:last-child > * { border-bottom: 0; }
.tabel thead th { background: var(--kleur-vlak); font-size: 1.125rem; font-weight: 800; }
.tabel thead td { background: var(--kleur-vlak); }
.tabel tbody th { width: 28%; color: var(--kleur-tekst-2); font-weight: 600; }
.tabel .leeg { color: var(--kleur-tekst-2); }

/* ---------- Quote ---------- */
.quote { margin: 0; }
.quote blockquote { position: relative; margin: 0; padding-top: 2.5rem; font-size: var(--fs-intro); font-weight: 500; line-height: 1.5; }
.quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  left: -0.25rem;
  color: var(--kleur-accent);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
}
.quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; font-size: var(--fs-klein); }
.quote__foto { width: 3rem; height: 3rem; flex: none; border-radius: 50%; background: var(--kleur-vlak-2); border: 1px solid var(--kleur-rand); }
.quote__naam { display: block; color: var(--kleur-tekst); font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { max-width: 48rem; border-top: 1px solid var(--kleur-rand); }
.faq details { border-bottom: 1px solid var(--kleur-rand); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  flex: none;
  margin-top: 0.3rem;
  margin-right: 0.25rem;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duur);
}
.faq details[open] summary::after { transform: translate(0, 0.25rem) rotate(-135deg); }
.faq__antwoord { padding-bottom: 1.25rem; color: var(--kleur-tekst-2); }

/* ---------- Band: afsluiter, altijd donker ---------- */
.band, .sectie--donker, .donker-vlak {
  --kleur-tekst: var(--vs-wit);
  --kleur-tekst-2: var(--d-tekst-2);
  --kleur-vlak: var(--band-vlak);
  --kleur-rand: var(--d-rand);
  --kleur-rand-sterk: var(--d-rand-sterk);
  --kleur-focus: var(--vs-oranje);
  --kleur-accent-tekst: var(--vs-oranje);
  --logo-licht: none;
  --logo-donker: block;
  background: var(--band-achtergrond);
  color: var(--kleur-tekst);
}
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4.5rem);
  border-radius: var(--radius-xl);
  background: var(--band-achtergrond);
  color: var(--kleur-tekst);
}
.band__inhoud { position: relative; max-width: 36rem; }
.band__pijl { display: none; }
@media (min-width: 48rem) {
  /* Massief oranje, nooit als gloed: oranje gemengd met navy wordt paars */
  .band__pijl {
    display: block;
    position: absolute;
    right: clamp(2rem, 6vw, 5rem);
    top: 50%;
    width: clamp(7rem, 16vw, 12rem);
    height: auto;
    transform: translateY(-50%);
    color: var(--vs-oranje);
  }
}

/* ---------- Vaste WhatsApp-knop op mobiel: glazen balk ---------- */
.sticky-wa {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 60;
  padding: 0.375rem;
  border-radius: var(--radius-pil);
  transform: translateY(160%);
  transition: transform 250ms ease;
}
.sticky-wa.is-zichtbaar { transform: none; }
/* Twee knoppen naast elkaar: even appen en de resultaten. Op een telefoon vullen ze samen de breedte,
   op een groter scherm staat de balk gecentreerd en zo breed als de knoppen. */
.sticky-wa { display: flex; gap: 0.375rem; }
.sticky-wa .knop { flex: 1; min-width: 0; justify-content: center; white-space: nowrap; }
/* Op een smalle telefoon (tot 420 px) passen beide knoppen anders niet naast elkaar */
@media (max-width: 26.25rem) {
  .sticky-wa .knop { padding-inline: 0.75rem; font-size: 0.9375rem; gap: 0.375rem; }
}
@media (max-width: 22.5rem) {
  .sticky-wa .knop { padding-inline: 0.5rem; font-size: 0.875rem; }
  .sticky-wa .knop svg { display: none; }
}
/* De stille knop in de balk: alleen tekst, zonder vlak, zoals in het voorbeeld van Niek */
.knop--stil { background: transparent; border-color: transparent; color: var(--kleur-tekst); }
.knop--stil:hover { background: var(--glas-vlak); }
.sticky-wa .knop svg { width: 1.125rem; height: 1.125rem; margin-left: 0.125rem; }
@media (min-width: 48rem) {
  .sticky-wa { left: 50%; right: auto; transform: translate(-50%, 160%); }
  .sticky-wa.is-zichtbaar { transform: translate(-50%, 0); }
  .sticky-wa .knop { flex: none; }
}

/* ---------- Footer ---------- */
.footer { padding-block: 3rem 6rem; border-top: 1px solid var(--kleur-rand); background: var(--kleur-vlak); }
.footer__raster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.footer h2 { margin-bottom: 0.75rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; }
.footer ul { list-style: none; }
.footer li + li { margin-top: 0.375rem; }
.footer a { font-size: var(--fs-klein); color: var(--kleur-tekst-2); text-decoration: none; }
.footer a:hover { color: var(--kleur-tekst); text-decoration: underline; }
.footer__onder { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--kleur-rand); }
@media (min-width: 48rem) { .footer { padding-bottom: 3rem; } }

/* Minder beweging en geen glas voor wie dat heeft ingesteld */
@media (prefers-reduced-transparency: reduce) {
  .glas { background: var(--glas-vlak-sterk); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Mobiel menu ---------- */
.nav { position: sticky; }
.nav__menuknop { display: inline-grid; }
.nav__menu {
  position: absolute;
  top: calc(100% - 0.25rem);
  left: clamp(1rem, 4vw, 2rem);
  right: clamp(1rem, 4vw, 2rem);
  padding: 0.5rem;
  border-radius: var(--radius-l);
  list-style: none;
}
.nav__menu a, .nav__menu button {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 0;
  border-radius: var(--radius-m);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav__menu a:hover, .nav__menu button:hover { background: var(--glas-vlak); }
@media (max-width: 23.99rem) { .nav__acties .nav__icoon--thema { display: none; } }
@media (min-width: 76rem) {
  .nav__menuknop { display: none; }
  .nav__menu { display: none !important; }
}

/* ---------- Sectiekoppen ---------- */
.sectie--compact { padding-block: clamp(2rem, 5vw, 3.25rem); }
.sectie__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.sectie__kop > div > * + * { margin-top: 1rem; }

/* ---------- Logostrip ---------- */
/* Vaste maten, geen procenten: Safari negeert max-height in procenten binnen een grid-item,
   waardoor de logo's op ware grootte over elkaar heen vielen. */

/* ---------- Wie we zijn ---------- */
.wie { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 52rem) { .wie { grid-template-columns: 0.8fr 1.2fr; } }
.portret {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--reel-b);
  box-shadow: var(--glas-schaduw);
}
.portret--vierkant { max-width: 30rem; aspect-ratio: 1 / 1; }
.portret--vierkant .portret__label { left: auto; right: 1rem; }  /* Niek zit rechts op de foto */
.portret img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portret__label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pil);
  color: var(--kleur-tekst);
  font-size: 0.9375rem;
  font-weight: 700;
}
.wie__tekst > * + * { margin-top: 1.25rem; }

/* ---------- Drie stromen en de verdeling ---------- */

.stroom__icoon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-m);
  background: var(--kleur-accent);
  color: var(--kleur-op-accent);
}
.stroom__icoon svg { width: 1.5rem; height: 1.5rem; }
.stroom p { color: var(--kleur-tekst-2); }

.verdeling { margin-top: clamp(2rem, 5vw, 3rem); }
.verdeling__balk { display: flex; gap: 4px; height: 0.875rem; margin-top: 1rem; overflow: hidden; border-radius: var(--radius-pil); }
.verdeling__deel { flex: var(--aandeel, 1); background: var(--kleur); }
.verdeling__legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; list-style: none; font-size: var(--fs-klein); }
.verdeling__legenda li { display: flex; align-items: center; gap: 0.5rem; }
.verdeling__legenda li::before { content: ""; width: 0.75rem; height: 0.75rem; flex: none; border-radius: 3px; background: var(--kleur); }

/* Mobiel: beeldvlakken minder hoog, zodat de tekst sneller in beeld komt */
@media (max-width: 51.99rem) {
  .portret { aspect-ratio: 4 / 3; max-width: 100%; }
}
@media (max-width: 39.99rem) {
  .case__beeld { aspect-ratio: 16 / 10; }
}

/* ---------- Adaptief glas ----------
   Boven een donkere sectie wordt de zwevende laag donker glas met het witte logo.
   Zo ligt er nooit wit glas over navy (dat wordt grauw paars). site.js zet data-glas. */
[data-glas="donker"] {
  --glas-vlak: rgb(30 37 80 / 0.55);
  --glas-vlak-sterk: rgb(20 26 66 / 0.85);
  --glas-rand: rgb(200 215 240 / 0.14);
  --glas-glans: rgb(200 215 240 / 0.38);
  --glas-verzadiging: 1;
  --kleur-tekst: var(--vs-wit);
  --kleur-focus: var(--vs-oranje);
  --logo-licht: none;
  --logo-donker: block;
  color: var(--kleur-tekst);
}
.nav__balk, .sticky-wa { transition: background-color 200ms ease, box-shadow 200ms ease, transform 250ms ease; }

/* =====================================================================
   Homepage, opgemaakte versie
   ===================================================================== */

/* Presentatieweergave: placeholders als rustige grijze vlakken. Met de ontwikkelknop weer zichtbaar als ID. */
:root:not([data-weergave="placeholders"]) .ph {
  min-width: 7ch;
  min-height: 1em;
  border: 0;
  border-radius: 0.4em;
  background: var(--kleur-rand);
  color: transparent;
  vertical-align: middle;
  user-select: none;
}

.dev-schakel {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 70;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: var(--radius-pil);
  color: var(--kleur-tekst);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 47.99rem) { .dev-schakel { bottom: 5.25rem; } }

/* Onthullen bij scrollen */
@media (prefers-reduced-motion: no-preference) {
  .js .onthul { opacity: 0; translate: 0 24px; transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--vertraging, 0ms); }
  .js .onthul.is-zichtbaar { opacity: 1; translate: 0 0; }
}

/* Kleine labels */
.bovenkop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-radius: var(--radius-pil);
  font-size: 0.875rem;
  font-weight: 600;
}
.bovenkop::after, .bovenkop-tekst::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 2px;
  background: var(--kleur-accent);
  transform: rotate(var(--hoek));
}
.bovenkop::after { order: -1; } /* ::after omdat ::before de glansrand van het glas is */
.bovenkop-tekst { display: flex; align-items: center; gap: 0.5rem; color: var(--kleur-tekst-2); font-size: 0.875rem; font-weight: 700; }
.sectie__kop .bovenkop-tekst + h2 { margin-top: 0.75rem; }

/* Oranje onderstreping onder een kernwoord, in de hoek van het logo */
.markeer { position: relative; isolation: isolate; white-space: nowrap; }
.markeer::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.03em;
  right: -0.03em;
  bottom: 0.04em;
  height: 0.2em;
  border-radius: 0.1em;
  background: var(--kleur-accent);
  transform: rotate(var(--hoek-klein));
  transform-origin: left bottom;
}

/* Stippenpatroon in de hero */
.stippen {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--stip) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 72% 42%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 72% 42%, #000 15%, transparent 72%);
  pointer-events: none;
}
.hero { padding-block: clamp(2rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem); }
.hero .kop-1 { max-width: 12ch; }
.hero__tekst .bovenkop + .kop-1 { margin-top: 1.25rem; }

/* Werkwijze in de hero: de stappen die we uit handen nemen, met vooraan een pil. */
/* De pil staat altijd op zijn eigen regel, met de stappen eronder. Anders valt er bij
   een smal scherm één losse stap onder de pil, en dat oogt rommelig. */
.werkwijze {
  display: grid;
  justify-items: start;
  gap: 0.625rem;
  color: var(--kleur-tekst-2);
  font-size: 0.8125rem;
  font-weight: 600;
}
.werkwijze__stappen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.875rem;
  list-style: none;
}
.werkwijze__label {
  margin: 0;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pil);
  background: var(--kleur-achtergrond);
  box-shadow: var(--glas-schaduw);
  color: var(--kleur-tekst);
  font-weight: 700;
}
.werkwijze li { display: flex; align-items: center; gap: 0.875rem; }
.werkwijze li + li::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 2px;
  background: var(--kleur-accent);
  transform: rotate(var(--hoek));
}

/* Reels die op echte telefoonvideo's lijken */
.reel__balkjes { position: absolute; top: 0.75rem; left: 0.75rem; right: 0.75rem; display: flex; gap: 4px; }
.reel__balkjes i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.45); }
.reel__balkjes i:first-child { background: #fff; }
.reel__acties { position: absolute; right: 0.625rem; bottom: 3.5rem; display: grid; gap: 0.875rem; color: #fff; }
.reel__acties svg { width: 1.25rem; height: 1.25rem; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }

/* Lager dan het midden: over een foto hoort de knop niet op iemands gezicht te liggen. */
.reels .reel__speel { left: 50%; top: 68%; bottom: auto; width: 2.75rem; height: 2.75rem; translate: -50% -50%; }
@media (prefers-reduced-motion: no-preference) {
  .reel--1 { animation: zweef 7s ease-in-out infinite; }
  .reel--2 { animation: zweef 6s ease-in-out -2s infinite; }
  .reel--3 { animation: zweef 8s ease-in-out -4s infinite; }
  .chip { animation: zweef 6.5s ease-in-out -1s infinite; }
}
@keyframes zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Wie we zijn */
.feiten { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.feiten li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-pil);
  background: var(--kleur-achtergrond);
  font-size: 0.875rem;
  font-weight: 600;
}
.feiten li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 2px; background: var(--kleur-accent); transform: rotate(var(--hoek)); }
.wie__tekst h2 { margin-top: 0.75rem; }

/* Resultaten: casekaarten in reelvorm */



/* Framework: drie stromen als flow */
.stromen { display: grid; gap: 1rem; list-style: none; }
@media (min-width: 52rem) { .stromen { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.stroomkaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-l);
  background: var(--kleur-vlak);
}
.stroomkaart__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.stroomkaart__doel { color: var(--kleur-accent-tekst); font-size: 0.8125rem; font-weight: 700; }
.stroomkaart p { color: var(--kleur-tekst-2); }
.videokop { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; max-width: 46rem; }

/* De uitlegvideo boven aan voor personal brands. Zolang de opname er niet is, staat hier
   een kader met wat er nodig is, en die hele sectie blijft uit de live-versie. */
.uitlegvideo__kader {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 2rem;
  border: 1px dashed var(--kleur-rand-sterk);
  border-radius: var(--radius-l);
  background: var(--kleur-vlak);
  text-align: center;
}
.uitlegvideo__wacht { color: var(--kleur-tekst-2); font-size: var(--fs-klein); line-height: 1.6; }
.uitlegvideo video, .uitlegvideo img { width: 100%; height: auto; border-radius: var(--radius-l); display: block; }

/* Bewijs in het kort: één cijfer per klant, hoog op de pagina */
.bewijsstrip { display: grid; gap: 1rem; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.bewijsstrip li {
  display: grid;
  gap: 0.25rem;
  padding: 1.5rem 1.375rem;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-l);
  background: var(--kleur-achtergrond);
  box-shadow: var(--schaduw);
}
.bewijsstrip b {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.bewijsstrip span { color: var(--kleur-tekst-2); font-size: 0.9375rem; }
.bewijsstrip a { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--kleur-tekst); text-decoration: none; }
.bewijsstrip a:hover { text-decoration: underline; }

/* De contentfunnel op voor personal brands, nagebouwd naar het schema van Niek.
   Eén doorlopende trechter: de vorm erachter loopt taps toe, de fases erin worden mee smaller. */
.funnel { position: relative; padding-block: 1rem 2rem; }
.funnel__vorm {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* De trechter zelf: breed bovenin, smal onderin, met warme gloed bovenaan zoals in het schema */
  clip-path: polygon(0 0, 100% 0, 68% 100%, 32% 100%);
  background:
    radial-gradient(120% 45% at 50% 0%, rgb(254 117 29 / 0.16), transparent 70%),
    linear-gradient(to bottom, rgb(30 37 80 / 0.55), rgb(6 0 46 / 0.2));
}
.funnel__inhoud { position: relative; z-index: 1; display: grid; gap: 2.5rem; }
.funnel__fase { width: min(100%, var(--fase-breedte, 100%)); margin-inline: auto; display: grid; gap: 0.625rem; }

/* De scheidingslijn met de naam van de fase erin, zoals in het schema */
.funnel__label { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.25rem; }
.funnel__label::before, .funnel__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--kleur-rand-sterk) 0 6px, transparent 6px 12px);
}
.funnel__label span {
  flex: none;
  padding: 0.375rem 1rem;
  border: 1px solid var(--kleur-rand-sterk);
  border-radius: var(--radius-pil);
  color: var(--kleur-tekst);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
.funnel__waarom { margin: 0 auto 0.75rem; max-width: 34rem; color: var(--kleur-tekst-2); font-size: 0.9375rem; text-align: center; }

.funnel__rij { display: grid; gap: 0.625rem; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.funnelkaart {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  /* Eigen donker vlak: var(--kleur-achtergrond) blijft wit en dan valt witte tekst weg */
  background: var(--d-vlak-3);
}
.funnelkaart b { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.funnelkaart span { color: var(--kleur-tekst-2); font-size: 0.8125rem; line-height: 1.4; }
.funnelkaart--accent { border-color: transparent; background: var(--vs-oranje); }
.funnelkaart--accent b { color: var(--vs-navy); }
.funnelkaart--accent span { color: rgb(6 0 46 / 0.75); }

/* Op een telefoon vervalt het versmallen: anders wordt de tekst onleesbaar klein. */
@media (max-width: 47.99rem) {
  .funnel__fase { width: 100%; }
  .funnel__vorm { clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
  .funnel__waarom { text-align: left; }
}

/* De stromen uit het contentecosysteem: wat er binnen elke stroom gemaakt wordt */
.stroomkaart__lijst { display: grid; gap: 0.5rem; margin-top: auto; padding-top: 1.125rem; border-top: 1px solid var(--kleur-rand); list-style: none; color: var(--kleur-tekst-2); font-size: var(--fs-klein); }
.stroomkaart__lijst li { display: flex; align-items: baseline; gap: 0.625rem; }
.stroomkaart__lijst li::before { content: ""; width: 0.375rem; height: 0.375rem; flex: none; border-radius: 50%; background: var(--kleur-accent); }
@media (min-width: 52rem) {
  /* Massief oranje verbindingslijn tussen de stromen */
  .stroomkaart:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.25rem;
    right: -1.5rem;
    width: 1.5rem;
    height: 2px;
    background: var(--kleur-accent);
  }
}
.verdeling__kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.verdeling__legenda .ph { margin-left: 0.25rem; }

/* Twee sporen */
.sporen { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .sporen { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.spoorkaart {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-xl);
  background: var(--kleur-vlak);
}
.spoorkaart h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.spoorkaart > p { color: var(--kleur-tekst-2); }
.spoorkaart .knop { align-self: flex-start; margin-top: auto; }
.spoorkaart .knop svg { width: 1.125rem; height: 1.125rem; }
.vinklijst { display: grid; gap: 0.7rem; margin-bottom: 0.5rem; list-style: none; }
.vinklijst li { display: flex; align-items: flex-start; gap: 0.7rem; font-weight: 600; }
.vinklijst li::before {
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--kleur-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306002e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

/* Sterkere afsluiter: koelblauwe gloed in de band (nooit oranje gloed op navy) */
.band::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  right: -15%;
  width: min(48rem, 120%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--d-staal), transparent);
  pointer-events: none;
}
.band .klein { color: var(--d-tekst-2); }

/* ---------- Cookiebanner ---------- */
/* Onderin, links, smal. Hij legt de pagina niet plat en hij blokkeert niets:
   de site werkt volledig zonder toestemming. Accepteren en weigeren staan naast
   elkaar, even groot en even zichtbaar. */
.toestemming {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  gap: 0.875rem;
  max-width: 30rem;
  padding: 1.25rem;
  border-radius: var(--radius-l);
}
.toestemming[hidden] { display: none; }
.toestemming p { max-width: none; }
.toestemming__keuzes { display: grid; gap: 0.75rem; border: 0; margin: 0; padding: 0; }
.toestemming__keuzes[hidden] { display: none; }
.toestemming__keuze {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: var(--fs-klein);
  line-height: 1.45;
}
.toestemming__keuze input { margin-top: 0.15rem; width: 1.125rem; height: 1.125rem; accent-color: var(--vs-navy); flex: none; }
.toestemming__knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.toestemming__knoppen .knop { flex: 1 1 auto; }
.knop--stil { background: transparent; color: var(--kleur-tekst-2); border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; }
.knop--stil:hover { color: var(--kleur-tekst); }
@media (min-width: 48rem) {
  .toestemming { left: 1.5rem; right: auto; bottom: 1.5rem; }
}
/* Op mobiel staat de vaste WhatsApp-knop onderin. Zolang de banner er staat, blijft die weg. */
body.heeft-banner .sticky-wa { display: none; }

/* =====================================================================
   Binnenpagina's
   ===================================================================== */

/* Kop van een binnenpagina: zelfde podium als de homepage, zonder de reels */
.paginahero { padding-block: clamp(2.5rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); max-width: 46rem; }
.paginahero > * + * { margin-top: 1.25rem; }
.paginahero .kop-1 { max-width: 14ch; }
.paginahero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

/* Twee kolommen: tekst naast een kaart of lijst */
.tweeluik { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .tweeluik { grid-template-columns: 1fr 1fr; } }
.tweeluik > div > * + * { margin-top: 1rem; }

/* Het aanbod in één kaart */
.aanbod { display: grid; gap: 1.25rem; }
.aanbod__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.aanbod__label { color: var(--kleur-tekst-2); font-size: var(--fs-klein); font-weight: 700; }
.aanbod .vinklijst { margin: 0; }

/* Kleine feitenrij, bijvoorbeeld onder het aanbod */
.feitenrij { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.feitenrij li { padding: 0.375rem 0.875rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil); font-size: var(--fs-klein); font-weight: 600; }

/* Genummerde lijst, voor de tien lagen van de Brand Broncode en de vier opdrachten */
.lagen { display: grid; gap: 0.75rem; counter-reset: laag; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.lagen li { counter-increment: laag; display: flex; gap: 0.875rem; align-items: flex-start; padding: 1rem 1.125rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius-m); background: var(--kleur-achtergrond); font-weight: 600; line-height: 1.4; }
.lagen li::before { content: counter(laag); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; background: var(--vs-navy); color: var(--vs-wit); font-size: 0.8125rem; font-weight: 800; }
:root[data-thema="donker"] .lagen li::before, .sectie--donker .lagen li::before { background: var(--vs-oranje); color: var(--vs-navy); }
.lagen li span { display: block; margin-top: 0.125rem; color: var(--kleur-tekst-2); font-weight: 500; font-size: var(--fs-klein); }

/* Tijdlijn van de eerste weken */
.tijdlijn { display: grid; gap: 0; list-style: none; max-width: 48rem; }
.tijdlijn > li { position: relative; padding: 0 0 2rem 2.25rem; }
.tijdlijn > li::before { content: ""; position: absolute; left: 0.4375rem; top: 0.5rem; bottom: -0.5rem; width: 2px; background: var(--kleur-rand); }
.tijdlijn > li:last-child::before { display: none; }
.tijdlijn > li::after { content: ""; position: absolute; left: 0; top: 0.3rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--vs-oranje); box-shadow: 0 0 0 4px var(--kleur-achtergrond); }
.tijdlijn > li > h3 { margin-bottom: 0.375rem; }
.tijdlijn > li > p { color: var(--kleur-tekst-2); }
.tijdlijn__wanneer { display: inline-block; margin-bottom: 0.375rem; color: var(--kleur-tekst-2); font-size: 0.8125rem; font-weight: 700; }

/* Drie keuzes naast elkaar, bijvoorbeeld hoe we toegang krijgen */
.keuzes { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); list-style: none; }
.keuzes li { padding: 1rem 1.125rem; border-radius: var(--radius-m); background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand); font-weight: 600; }
.keuzes li span { display: block; margin-top: 0.25rem; color: var(--kleur-tekst-2); font-size: var(--fs-klein); font-weight: 500; }

/* Team zonder foto's: een monogram in plaats van een portret */
.team { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); list-style: none; }
.teamkaart { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; padding: 1.5rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius-l); background: var(--kleur-achtergrond); box-shadow: var(--schaduw); }
.teamkaart__letter { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: var(--radius-m); background: var(--vs-navy); color: var(--vs-wit); font-size: 1.25rem; font-weight: 800; transform: rotate(var(--hoek-klein)); }
.teamkaart__letter svg { width: 1.375rem; height: 1.375rem; }
.teamkaart:first-child .teamkaart__letter { background: var(--vs-oranje); color: var(--vs-navy); }
:root[data-thema="donker"] .teamkaart__letter { background: var(--d-vlak-3); }
:root[data-thema="donker"] .teamkaart:first-child .teamkaart__letter { background: var(--vs-oranje); }
.teamkaart h3, .teamkaart h4 { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 800; line-height: 1.25; }
.teamkaart p { color: var(--kleur-tekst-2); font-size: 0.9375rem; line-height: 1.5; }

/* Contactgegevens */
.gegevens { display: grid; gap: 0.25rem; font-style: normal; }
.gegevens a { font-weight: 700; }

/* Juridische pagina's: rustige lopende tekst, smal genoeg om te lezen */
.juridisch { max-width: 44rem; }
.juridisch > * + * { margin-top: 1rem; }
.juridisch h2 { margin-top: 2.5rem; font-size: var(--fs-kop-3); }
.juridisch h3 { margin-top: 1.75rem; font-size: 1.0625rem; }
.juridisch ul { padding-left: 1.25rem; display: grid; gap: 0.375rem; }
.juridisch p, .juridisch li { color: var(--kleur-tekst-2); }
.juridisch b { color: var(--kleur-tekst); }
.juridisch code { font-family: var(--font-mono); font-size: 0.875em; }
.juridisch .tabel { margin-top: 1.25rem; }
.juridisch .tabel th, .juridisch .tabel td { font-size: var(--fs-klein); }

/* Het vlak in de hero van de live-versie, zolang er geen eigen beeld en geen klantvideo's op mogen.
   In de preview staat het uit, daar staan de video's. tools/maak-live.py zet het aan. */
[data-alleen-live] { display: none !important; }
.hero-vlak {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--vs-navy);
  color: var(--vs-wit);
  box-shadow: var(--glas-schaduw);
  transform: rotate(var(--hoek-klein));
}
.hero-vlak__pijl { position: absolute; top: 12%; right: 10%; width: 58%; color: var(--vs-oranje); }
.hero-vlak__regel { position: relative; max-width: none; text-wrap: balance; font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }

/* Smalle schermen: lange knopteksten mogen breken in plaats van de kaart uit beeld te duwen,
   en kolommen in een raster mogen smaller worden dan hun inhoud (de tabel scrolt dan zelf). */
.spoorkaart .knop { white-space: normal; text-align: left; line-height: 1.25; max-width: 100%; }
.tweeluik > *, .sporen > *, .raster > * { min-width: 0; }

/* ---------- Resultaten ---------- */
/* Strook bovenaan elke pagina die nog niet live mag */
.preview-banner { margin-bottom: 1.5rem; background: var(--kleur-vlak-2); border-block: 1px solid var(--kleur-rand); color: var(--kleur-tekst); font-size: 0.8125rem; font-weight: 600; line-height: 1.45; }
.preview-banner .container { padding-block: 0.625rem; }

/* Filter boven het overzicht */
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter__knop { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1.05rem; border: 1px solid var(--kleur-rand-sterk); border-radius: var(--radius-pil); background: var(--kleur-achtergrond); color: var(--kleur-tekst); font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: background var(--duur), color var(--duur), border-color var(--duur); }
.filter__knop span { color: var(--kleur-tekst-2); font-weight: 600; }
.filter__knop:hover { border-color: var(--kleur-tekst); }
.filter__knop[aria-pressed="true"] { background: var(--vs-navy); border-color: var(--vs-navy); color: var(--vs-wit); }
.filter__knop[aria-pressed="true"] span { color: var(--n-300); }
:root[data-thema="donker"] .filter__knop[aria-pressed="true"] { background: var(--vs-oranje); border-color: var(--vs-oranje); color: var(--vs-navy); }
:root[data-thema="donker"] .filter__knop[aria-pressed="true"] span { color: var(--vs-navy); }

/* Raster met klantkaarten */
.cases-raster { display: grid; gap: 1rem; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.cases-raster--drie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.casekaart-item[hidden] { display: none; }
.casekaart { position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-l); background: var(--vs-navy); color: var(--vs-wit); text-decoration: none; box-shadow: var(--schaduw); }
:root[data-thema="donker"] .casekaart { box-shadow: inset 0 0 0 1px var(--d-rand); }
.casekaart__media { position: absolute; inset: 0; z-index: -2; }
.casekaart__media picture { display: contents; }
.casekaart__beeld { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.casekaart__sluier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(6 0 46 / 0.94) 0%, rgb(6 0 46 / 0.55) 38%, rgb(6 0 46 / 0.05) 70%); }
.casekaart__label { position: absolute; top: 0.875rem; left: 0.875rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-pil); font-size: 0.75rem; font-weight: 700; }
.casekaart__pijl { position: absolute; top: 0.875rem; right: 0.875rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--vs-oranje); color: var(--vs-navy); transition: transform var(--duur); }
.casekaart__pijl svg, .casekaart__verder svg, .terug svg, .volgende svg { width: 1.1rem; height: 1.1rem; }
.casekaart__onder { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.25rem; padding: 1.25rem; transition: opacity 250ms, transform 250ms; }
.casekaart__naam { font-size: 1.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.casekaart__sector { color: var(--n-300); font-size: 0.8125rem; font-weight: 500; line-height: 1.35; }
.casekaart__hoofd { margin-top: 0.5rem; color: var(--n-200); font-size: 0.875rem; font-weight: 600; }
.casekaart__hoofd b { display: block; color: var(--vs-oranje); font-size: 2rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }

/* Wat je ziet als je eroverheen gaat: de kerncijfers */
.casekaart__meer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: 4rem 1.25rem 1.25rem; z-index: 1; background: linear-gradient(to top, rgb(6 0 46) 0%, rgb(6 0 46 / 0.96) 60%, rgb(6 0 46 / 0.9) 100%); opacity: 0; transform: translateY(12px); transition: opacity 280ms ease, transform 280ms ease; }
.casekaart__meernaam { margin-bottom: -0.75rem; color: var(--n-300); font-size: 0.8125rem; font-weight: 700; }
.casekaart__meerkop { font-size: 1.125rem; font-weight: 800; line-height: 1.2; }
.casekaart__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1rem; list-style: none; }
.casekaart__stats li { display: grid; gap: 0.125rem; }
.casekaart__stats b { color: var(--vs-oranje); font-size: 1.375rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.casekaart__stats span { color: var(--n-200); font-size: 0.8125rem; line-height: 1.3; }
.casekaart__verder { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 700; }
.casekaart:hover .casekaart__meer, .casekaart:focus-visible .casekaart__meer { opacity: 1; transform: none; }
.casekaart:hover .casekaart__onder, .casekaart:focus-visible .casekaart__onder { opacity: 0; }
.casekaart:hover .casekaart__beeld, .casekaart:focus-visible .casekaart__beeld { transform: scale(1.05); }
.casekaart:hover .casekaart__pijl { transform: rotate(45deg); }
.casekaart:focus-visible { outline: 3px solid var(--kleur-focus); outline-offset: 3px; }
/* De cijfers ook zonder muis: op een telefoon staan ze onder de kaart */
.casekaart__stats--los { margin-top: 0.875rem; padding: 0 0.25rem; }
.casekaart__stats--los b { color: var(--kleur-tekst); font-size: 1.25rem; }
.casekaart__stats--los span { color: var(--kleur-tekst-2); }
@media (hover: hover) and (pointer: fine) {
  .casekaart__stats--los { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
}
@media (hover: none) {
  .casekaart__meer { display: none; }
  .casekaart__stats--los li:first-child { display: none; }
}
@media (max-width: 34rem) { .casekaart { aspect-ratio: 1 / 1; } }

/* Kaart zonder beeld: typografisch */
.casekaart__typo, .casereel--typo .casekaart__typo { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 80% 0%, #1e2550 0%, var(--vs-navy) 60%); overflow: hidden; }
.casekaart__letters { font-size: clamp(5rem, 22vw, 8.5rem); font-weight: 800; letter-spacing: -0.05em; color: var(--d-vlak-3); line-height: 1; transform: translateY(-14%) rotate(var(--hoek)); }
.casekaart__typo svg { position: absolute; right: -8%; bottom: 18%; width: 62%; height: auto; opacity: 1; transform: rotate(0deg); }
.casekaart__typo svg path { fill: var(--vs-oranje); }

/* ---------- Casepagina ---------- */
.casehero { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(1rem, 3vw, 2rem); }
@media (min-width: 56rem) { .casehero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 4rem; } }
.casehero__tekst { display: grid; gap: 1.125rem; justify-items: start; }
.casehero__kop { font-size: var(--fs-kop-3); font-weight: 800; line-height: 1.2; }
.terug { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--kleur-tekst-2); font-size: 0.9375rem; font-weight: 700; text-decoration: none; }
.terug svg { transform: rotate(-135deg); }
.terug:hover { color: var(--kleur-tekst); }
.casehero__media { display: grid; justify-items: center; }
.reel.casereel { position: relative; left: auto; top: auto; width: min(72%, 19rem); background: var(--reel-c); transform: rotate(var(--hoek-klein)); }
.casereel .reel__sluier { background: linear-gradient(to top, rgb(6 0 46 / 0.35) 0%, rgb(6 0 46 / 0) 40%); }
.casereel--typo .casekaart__typo { border-radius: inherit; }
.reel.casereel--typo { aspect-ratio: 4 / 5; }
@media (min-width: 56rem) { .reel.casereel { width: min(100%, 19rem); } }

.casecijfers { display: grid; gap: 1rem; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.casecijfer { position: relative; display: grid; align-content: start; gap: 0.375rem; padding: 1.5rem 1.375rem 1.25rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius-l); background: var(--kleur-achtergrond); box-shadow: var(--schaduw); }
.casecijfer::before { content: ""; width: 2.25rem; height: 4px; margin-bottom: 0.5rem; border-radius: 2px; background: var(--vs-oranje); transform: rotate(var(--hoek)); transform-origin: left; }
.casecijfer__waarde { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.casecijfer__label { font-weight: 700; line-height: 1.3; }
.casecijfer__toelichting { color: var(--kleur-tekst-2); font-size: 0.9375rem; line-height: 1.45; }
.casecijfer__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.25rem; color: var(--kleur-tekst-2); font-size: 0.8125rem; font-weight: 600; }
.casecijfer__meta:empty { display: none; }

.verhaal { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .verhaal { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
.verhaalblok { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.verhaalblok > p { color: var(--kleur-tekst-2); max-width: var(--breedte-tekst); }
.verhaalblok .tijdlijn > li { padding-bottom: 1.25rem; }
.galerij { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.galerij picture { display: contents; }
.galerij__beeld { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--schaduw); }

.volgende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius-l); color: var(--kleur-tekst); text-decoration: none; transition: border-color var(--duur); }
.volgende span { color: var(--kleur-tekst-2); font-size: 0.875rem; font-weight: 600; }
.volgende b { flex: 1; font-size: 1.25rem; font-weight: 800; }
.volgende svg { width: 1.5rem; height: 1.5rem; transition: transform var(--duur); }
.volgende:hover { border-color: var(--kleur-tekst); }
.volgende:hover svg { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .casekaart__beeld, .casekaart__meer, .casekaart__onder, .casekaart__pijl { transition: none; }
}


/* ---------- Versie 3 ---------- */
/* Onder de twee keuzes in de hero: voor wie nog twijfelt */
.twijfel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.twijfel__link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; border: 1px dashed var(--kleur-rand-sterk); border-radius: var(--radius-pil); color: var(--kleur-tekst); font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: border-color var(--duur), background var(--duur); }
.twijfel__link svg { width: 1rem; height: 1rem; transition: transform var(--duur); }
.twijfel__link:hover { border-style: solid; border-color: var(--kleur-tekst); }
.twijfel__link:hover svg { transform: translateX(3px); }

/* Team met foto's */
.team--fotos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 0.75rem; }
@media (max-width: 34rem) { .team--fotos { grid-template-columns: 1fr 1fr; } }
.teamkaart--foto { padding: 0.75rem 0.75rem 1.25rem; gap: 0.875rem; }
.teamkaart--foto > div { padding-inline: 0.5rem; }
.teamkaart__beeld { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-m); background: radial-gradient(120% 90% at 80% 0%, #1e2550 0%, var(--vs-navy) 65%); }
.teamkaart__beeld picture { display: contents; }
.teamkaart__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.teamkaart__initiaal { position: absolute; inset: 0; display: grid; place-items: center; color: var(--vs-oranje); font-size: 4rem; font-weight: 800; letter-spacing: -0.04em; }
.teamkaart__extra { display: block; margin-top: 0.125rem; color: var(--kleur-tekst-2); font-size: 0.875rem; }
.teamkaart--foto p { font-size: 0.9375rem; }

/* Het klantdashboard, als voorbeeld. Altijd donker, zoals het echte dashboard. */
.dash { --dash-vlak: #0c1036; --dash-kaart: #141a42; --dash-rand: #2c3560; --dash-tekst-2: #aeb6c8;
  display: grid; gap: 1rem; padding: clamp(0.875rem, 2vw, 1.25rem); border-radius: var(--radius-xl); background: var(--vs-navy); color: var(--vs-wit); box-shadow: 0 24px 60px rgb(6 0 46 / 0.28); }
.dash__balk { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.625rem; border: 1px solid var(--dash-rand); border-radius: var(--radius-pil); background: var(--dash-vlak); font-size: 0.8125rem; }
.dash__balk p { flex: 1; min-width: 0; color: var(--dash-tekst-2); }
.dash__balk b { padding: 0.1rem 0.5rem; border-radius: var(--radius-pil); background: var(--vs-oranje); color: var(--vs-navy); }
.dash__merk { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; background: var(--vs-wit); color: var(--vs-navy); font-size: 0.625rem; font-weight: 800; }
.dash__merk img { width: 1.125rem; height: auto; display: block; }
.dash__voorbeeld { flex: none; padding: 0.15rem 0.6rem; border: 1px solid var(--dash-rand); border-radius: var(--radius-pil); color: var(--dash-tekst-2); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.dash__kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem 1rem; padding-inline: 0.25rem; }
.dash__titel { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; }
.dash__sub { color: var(--vs-oranje); font-size: 0.8125rem; font-weight: 600; }
.dash__tabs { display: flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--dash-rand); border-radius: var(--radius-pil); background: var(--dash-vlak); }
.dash__tabs button { min-height: 2.25rem; padding: 0.375rem 0.875rem; border: 0; border-radius: var(--radius-pil); background: transparent; color: var(--dash-tekst-2); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.dash__tabs button[aria-selected="true"] { background: var(--vs-oranje); color: var(--vs-navy); }
.dash__tabs button:focus-visible, .dash__kaart:focus-visible, .dash__knop:focus-visible { outline: 2px solid var(--vs-oranje); outline-offset: 2px; }
.dash__paneel[hidden] { display: none; }
.dash__paneel--cijfers { display: grid; gap: 0.75rem; }
@media (min-width: 52rem) { .dash__paneel--cijfers { grid-template-columns: 14rem 1fr; } .dash__grafiek { grid-column: 1 / -1; } }
.dash__profiel { display: grid; gap: 0.25rem; align-content: start; justify-items: center; padding: 1.25rem 1rem; border: 1px solid var(--dash-rand); border-radius: var(--radius-l); background: var(--dash-vlak); text-align: center; }
.dash__avatar { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: 0.5rem; border-radius: 50%; background: linear-gradient(145deg, var(--vs-oranje), #b44f0f); color: var(--vs-navy); font-size: 1.375rem; font-weight: 800; box-shadow: 0 0 0 4px var(--dash-kaart); }
.dash__handle { font-weight: 800; }
.dash__lijst { display: grid; gap: 0.375rem; width: 100%; margin-top: 0.875rem; font-size: 0.8125rem; }
.dash__lijst div { display: flex; justify-content: space-between; gap: 0.5rem; padding-top: 0.375rem; border-top: 1px solid var(--dash-rand); }
.dash__lijst dt { color: var(--dash-tekst-2); }
.dash__lijst dd { color: var(--vs-oranje); font-weight: 700; }
.dash__kaarten { display: grid; gap: 0.75rem; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .dash__kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dash__kaart { position: relative; display: grid; gap: 0.375rem; padding: 0.875rem 1rem 0.75rem; border: 1px solid var(--dash-rand); border-radius: var(--radius-m); background: var(--dash-kaart); cursor: default; transition: border-color var(--duur), transform var(--duur); }
.dash__kaart:hover, .dash__kaart:focus-visible { border-color: var(--vs-oranje); transform: translateY(-2px); }
.dash__kaartkop { color: var(--vs-wit); font-size: 0.8125rem; font-weight: 700; }
.dash__kaartkop span { color: var(--dash-tekst-2); font-weight: 500; }
.dash__waarde { font-size: 1.75rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.dash__spark { width: 100%; height: 2.25rem; }
.dash__spark path { fill: none; stroke: var(--vs-oranje); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dash__uitleg { position: absolute; left: 0.5rem; right: 0.5rem; bottom: calc(100% + 0.5rem); z-index: 2; padding: 0.625rem 0.75rem; border-radius: var(--radius-s); background: var(--vs-wit); color: var(--vs-navy); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; box-shadow: 0 8px 24px rgb(6 0 46 / 0.3); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--duur), transform var(--duur); }
.dash__kaart:hover .dash__uitleg, .dash__kaart:focus-visible .dash__uitleg { opacity: 1; transform: none; }
.dash__grafiek { margin: 0; padding: 1rem 1rem 0.75rem; border: 1px solid var(--dash-rand); border-radius: var(--radius-l); background: var(--dash-vlak); }
.dash__grafiek figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 700; }
.dash__hover { color: var(--dash-tekst-2); font-weight: 600; }
.dash__grafiek svg { display: block; width: 100%; height: clamp(8rem, 18vw, 12rem); cursor: crosshair; }
.dash__lijn { fill: none; stroke: var(--vs-oranje); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.dash__cursor { stroke: var(--vs-wit); stroke-opacity: 0; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.dash__grafiek.is-actief .dash__cursor { stroke-opacity: 0.6; }
.dash__maanden { display: flex; justify-content: space-between; margin-top: 0.375rem; color: var(--dash-tekst-2); font-size: 0.75rem; }
.dash__paneelkop { padding-inline: 0.25rem; color: var(--dash-tekst-2); font-size: 0.9375rem; }
.dash__posts { display: grid; gap: 0.5rem; margin-top: 0.75rem; list-style: none; }
.dash__post { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.5rem 0.875rem; padding: 0.625rem; border: 1px solid var(--dash-rand); border-radius: var(--radius-m); background: var(--dash-kaart); }
.dash__duim { display: grid; place-items: end start; width: 3rem; aspect-ratio: 9 / 16; padding: 0.25rem; border-radius: 8px; font-size: 0.5625rem; font-weight: 800; color: var(--vs-navy); }
.dash__duim span { padding: 0 0.25rem; border-radius: 4px; background: var(--vs-wit); }
.dash__duim--0 { background: linear-gradient(165deg, #ffb27d, #fe751d); }
.dash__duim--1 { background: linear-gradient(165deg, #dfe4ec, #6b7587); }
.dash__duim--2 { background: linear-gradient(165deg, #414b7a, #1e2550); }
.dash__posttitel { display: grid; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.dash__posttitel span { color: var(--dash-tekst-2); font-size: 0.75rem; font-weight: 500; }
.dash__status { justify-self: end; padding: 0.2rem 0.625rem; border-radius: var(--radius-pil); background: var(--d-vlak-3); color: var(--dash-tekst-2); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.dash__post[data-status="Klaar voor review"] .dash__status { background: var(--vs-oranje); color: var(--vs-navy); }
.dash__post[data-status="Goedgekeurd"] .dash__status, .dash__post[data-status="Live"] .dash__status { background: var(--vs-wit); color: var(--vs-navy); }
.dash__postacties { grid-column: 2 / -1; display: flex; gap: 0.5rem; }
.dash__postacties:empty { display: none; }
.dash__knop { min-height: 2rem; padding: 0.25rem 0.875rem; border: 0; border-radius: var(--radius-pil); background: var(--vs-oranje); color: var(--vs-navy); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.dash__knop--rustig { background: transparent; box-shadow: inset 0 0 0 1px var(--dash-rand); color: var(--vs-wit); }
.dash__stappen { display: grid; gap: 0; margin-top: 0.75rem; padding: 0.5rem 0.25rem; list-style: none; }
.dash__stap { position: relative; display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: 0.75rem; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--dash-rand); font-size: 0.9375rem; }
.dash__stap span:last-child { color: var(--dash-tekst-2); font-size: 0.8125rem; }
.dash__stapstip { width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 2px solid var(--dash-rand); }
.dash__stap--klaar .dash__stapstip { border-color: var(--vs-oranje); background: var(--vs-oranje); }
.dash__stap--bezig .dash__stapstip { border-color: var(--vs-oranje); box-shadow: 0 0 0 4px rgb(254 117 29 / 0.25); }
.dash__stap--bezig b { color: var(--vs-oranje); }
@media (max-width: 34rem) { .dash__balk p { font-size: 0.75rem; } .dash__tabs { width: 100%; } .dash__tabs button { flex: 1; padding-inline: 0.5rem; } }
@media (prefers-reduced-motion: reduce) { .dash__kaart, .dash__uitleg { transition: none; } }

/* Wie ben jij: twee keuzekaarten naast elkaar */
.keuzekaarten { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .keuzekaarten { grid-template-columns: 1fr 1fr; } }
.keuzekaart { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--kleur-rand); border-radius: var(--radius-xl); background: var(--kleur-vlak); }
.keuzekaart .vinklijst { flex: 1; }
.keuzekaart .knop { align-self: flex-start; white-space: normal; text-align: left; }
.keuzekaart__uitleg { padding: 0.875rem 1rem; border-left: 3px solid var(--vs-oranje); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--kleur-achtergrond); color: var(--kleur-tekst-2); font-size: 0.9375rem; }
.keuzekaart__uitleg b { color: var(--kleur-tekst); }
.keuzekaart--donker { border-color: var(--d-rand); background: var(--vs-navy); color: var(--vs-wit); }
.keuzekaart--donker .intro, .keuzekaart--donker .vinklijst, .keuzekaart--donker .bovenkop-tekst { color: var(--d-tekst-2); }
.keuzekaart--donker .keuzekaart__uitleg { background: var(--d-vlak-2); color: var(--d-tekst-2); }
.keuzekaart--donker .keuzekaart__uitleg b { color: var(--vs-wit); }

/* Hero met een klantvideo op de achtergrond (voor ondernemers) */
.videohero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(7.5rem, 16vw, 11rem) clamp(4rem, 9vw, 6.5rem); background: var(--vs-navy); color: var(--vs-wit); }
.videohero__achtergrond { position: absolute; inset: 0; z-index: -1; }
.videohero__achtergrond picture { display: contents; }
.videohero__achtergrond img, .videohero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.videohero__video { opacity: 0; transition: opacity 600ms ease; }
.videohero.is-spelend .videohero__video { opacity: 1; }
.videohero__achtergrond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(6 0 46 / 0.94) 0%, rgb(6 0 46 / 0.82) 45%, rgb(6 0 46 / 0.45) 100%), linear-gradient(0deg, rgb(6 0 46 / 0.6), rgb(6 0 46 / 0) 40%); }
.videohero .intro { color: var(--d-tekst-2); }
.videohero .paginahero { max-width: 44rem; }
.tekstlink--licht { color: var(--vs-wit); }

/* Videomuur: klantvideo's direct onder de hero */
.videomuur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); gap: 0.875rem; overflow-x: auto; padding-bottom: 0.5rem; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.muurkaart { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-l); background: var(--vs-navy); color: var(--vs-wit); text-decoration: none; scroll-snap-align: start; box-shadow: var(--schaduw); }
.muurkaart picture { display: contents; }
.muurkaart img, .muurkaart__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.muurkaart__video { opacity: 0; transition: opacity 400ms ease; }
.muurkaart.is-spelend .muurkaart__video { opacity: 1; }
.muurkaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 0 46 / 0.92) 0%, rgb(6 0 46 / 0.2) 45%, rgb(6 0 46 / 0) 70%); }
.muurkaart__tekst { position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.875rem; z-index: 1; display: grid; gap: 0.125rem; }
.muurkaart__tekst b { color: var(--vs-oranje); font-size: 1.375rem; font-weight: 800; line-height: 1.1; }
.muurkaart__tekst span { color: var(--n-200); font-size: 0.8125rem; line-height: 1.3; }
.muurkaart__tekst strong { font-size: 0.9375rem; }
.muurkaart:focus-visible { outline: 3px solid var(--kleur-focus); outline-offset: 3px; }
@media (min-width: 64rem) { .videomuur { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } }

/* De sneeuwbal: een illustratie van groei per maand, zonder getallen */
.sneeuwbal { margin: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--d-rand); border-radius: var(--radius-xl); background: var(--d-vlak-1); }
.sneeuwbal__balken { display: flex; align-items: flex-end; gap: 0.625rem; height: 16rem; list-style: none; }
.sneeuwbal__balken li { position: relative; flex: 1; height: var(--h); border-radius: 10px 10px 4px 4px; background: linear-gradient(to top, rgb(254 117 29 / 0.55), var(--vs-oranje)); transform-origin: bottom; }
.sneeuwbal__balken li span { position: absolute; left: 50%; bottom: -1.5rem; translate: -50% 0; color: var(--d-tekst-2); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.sneeuwbal figcaption { margin-top: 2.25rem; color: var(--d-tekst-3); font-size: 0.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .sneeuwbal.onthul .sneeuwbal__balken li { transform: scaleY(0.05); transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
  .js .sneeuwbal.onthul.is-zichtbaar .sneeuwbal__balken li { transform: none; }
  .js .sneeuwbal.onthul.is-zichtbaar .sneeuwbal__balken li:nth-child(2) { transition-delay: 80ms; }
  .js .sneeuwbal.onthul.is-zichtbaar .sneeuwbal__balken li:nth-child(3) { transition-delay: 160ms; }
  .js .sneeuwbal.onthul.is-zichtbaar .sneeuwbal__balken li:nth-child(4) { transition-delay: 240ms; }
  .js .sneeuwbal.onthul.is-zichtbaar .sneeuwbal__balken li:nth-child(5) { transition-delay: 320ms; }
  .js .sneeuwbal.onthul.is-zichtbaar .sneeuwbal__balken li:nth-child(6) { transition-delay: 400ms; }
  .js .sneeuwbal.onthul.is-zichtbaar .sneeuwbal__balken li:nth-child(7) { transition-delay: 480ms; }
}
.videomuur--case { grid-auto-columns: minmax(10rem, 1fr); }
@media (min-width: 64rem) { .videomuur--case { grid-template-columns: repeat(4, 1fr); } }
.videomuur--case .muurkaart::after { background: linear-gradient(to top, rgb(6 0 46 / 0.35), rgb(6 0 46 / 0) 40%); }

/* Story sequences op een casepagina */
.storyrij { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; list-style: none; scroll-snap-type: x mandatory; }
.storyrij li { scroll-snap-align: start; }
.storyrij picture { display: contents; }
.storyrij__beeld { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--schaduw); }
@media (min-width: 64rem) { .storyrij { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); } }

/* Long-form: links naar YouTube */
.longrij { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); list-style: none; }
.longkaart { position: relative; display: grid; gap: 0.25rem; padding: 1.25rem 1.25rem 1.25rem 4.5rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius-l); color: var(--kleur-tekst); text-decoration: none; }
.longkaart span:last-child { color: var(--kleur-tekst-2); font-size: 0.875rem; }
.longkaart__speel { position: absolute; left: 1.25rem; top: 50%; width: 2.25rem; height: 2.25rem; translate: 0 -50%; border-radius: 50%; background: var(--vs-navy); }
.longkaart__speel::after { content: ""; position: absolute; left: 0.85rem; top: 0.65rem; border-left: 0.75rem solid var(--vs-oranje); border-block: 0.5rem solid transparent; }
.longkaart:hover { border-color: var(--kleur-tekst); }

/* Vijf stappen (zo werkt het): op desktop op één rij */
@media (min-width: 64rem) { .stappen:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* De videotestimonial op een casepagina: liggend beeld, met bediening, laadt pas bij klikken */
.testimonial { display: grid; }
.testimonial__video { width: 100%; max-width: 48rem; margin-inline: auto; display: block; border-radius: var(--radius-l); background: var(--vs-navy); box-shadow: var(--schaduw); }

/* MKB-kaarten: het logo of de profielfoto staat stil, de video komt bij hover. Op een
   telefoon bestaat hover niet, dus daar blijft het beeld staan (feedback Niek, 29 september). */
.casekaart__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--duur); }
/* Zodra de video speelt, komt hij over de poster heen te liggen */
.casekaart.is-spelend .casekaart__video { opacity: 1; }
@media (hover: hover) {
  .casekaart:hover .casekaart__video, .casekaart:focus-visible .casekaart__video { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .casekaart__video { display: none; } }

/* MKB-kaart met logo: het logo staat op een witte tegel op een navy vlak, niet uitgerekt.
   Zo blijft het scherp, ook als het bronbeeld klein is, en werkt het voor elk logo. */
.casekaart__logovlak { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, var(--d-vlak-3), var(--vs-navy)); }
/* Staat er beeld van de klant achter, dan wordt het vlak een sluier: het logo blijft leesbaar
   en je ziet het werk erachter bewegen (feedback Niek, 29 september). */
.casekaart__logovlak--opbeeld { background: linear-gradient(to bottom, rgb(6 0 46 / 0.55), rgb(6 0 46 / 0.3) 45%, rgb(6 0 46 / 0.7)); }
.casekaart__logovlak--opbeeld .casekaart__logotegel { width: 38%; box-shadow: 0 10px 30px rgb(6 0 46 / 0.45); }
.casekaart__logotegel { display: grid; place-items: center; width: 46%; aspect-ratio: 1; padding: 0.75rem; border-radius: var(--radius-l); background: var(--vs-wit); box-shadow: var(--schaduw); }
.casekaart__logotegel img { width: 100%; height: auto; display: block; border-radius: var(--radius-s); }