/* =============================================================
   SM Uitkomsten (stapelende panelen)
   Vijf panelen die bij het scrollen over elkaar heen schuiven.
   Links de tekst, rechts een demo-kaartje.

   Maten komen uit de extractie van de bron (uxpeak.com, sectie
   #outcomes, 12-09-2026): paneel 900 hoog, padding 117/40/45,
   inhoud 1360 breed, sectie-padding 120/24, kop 34 eronder.
   Kleuren en letters zijn van Schrevemarketing, niet van de bron.

   Geen JavaScript. Het stapelen gebeurt met position:sticky, het
   wegzakken van het vorige paneel met een scroll-tijdlijn waar de
   browser die kent.
   ============================================================= */

.sm-uit {
  /* donker is de standaard */
  --uit-bg: #0a0909;
  --uit-ink: #ffffff;
  --uit-stil: rgba(255, 255, 255, .62);
  --uit-zwak: rgba(255, 255, 255, .42);
  --uit-rand: rgba(255, 255, 255, .10);
  --uit-vlak: #121111;
  --uit-vlak-2: rgba(255, 255, 255, .045);
  --uit-accent: #3DC78F;
  --uit-accent-2: #D2F65A;

  /* de bron meet 900 hoog bij een venster van 900: dat is één schermhoogte */
  --uit-breed: 1360px;

  box-sizing: border-box;
  background: var(--uit-bg);
  color: var(--uit-ink);
  padding: 120px 24px;
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sm-uit *, .sm-uit *::before, .sm-uit *::after { box-sizing: inherit; }

.sm-uit--licht {
  --uit-bg: #f4f6f5;
  --uit-ink: #0d1512;
  --uit-stil: rgba(13, 21, 18, .66);
  --uit-zwak: rgba(13, 21, 18, .46);
  --uit-rand: rgba(13, 21, 18, .13);
  --uit-vlak: #ffffff;
  --uit-vlak-2: rgba(13, 21, 18, .04);
  --uit-accent: #0f8f74;
}

/* ---------- het kopblok uit SM Resultaat ----------
   De widget zet het kopblok van SM Resultaat hier neer, met dezelfde klassen,
   zodat de kop op een pagina blijft zoals hij was. Twee dingen nodig:
   de --rs-tokens waar die stijlen op leunen, en de eigen achtergrond en
   ruimte van .sm-rs eraf, want die zit hier binnen onze eigen band. */
.sm-uit {
  --rs-ink: var(--uit-ink);
  --rs-tekst: var(--uit-stil);
  --rs-stil: var(--uit-zwak);
  --rs-rand: var(--uit-rand);
  --rs-accent: var(--uit-accent);
  --rs-mono: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;
  --sm-badge-accent: var(--uit-accent);
}
.sm-uit > .sm-rs {
  background: none;
  padding: 0;
  overflow: visible;
  color: inherit;
}
.sm-uit-kopblok { margin-bottom: 34px; }

/* ---------- de kop boven de stapel (alleen voor de losse demo) ---------- */
.sm-uit-kop {
  max-width: 880px;
  margin: 0 auto 34px;
  text-align: center;
}
.sm-uit-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--uit-accent);
  margin-bottom: 14px;
}
.sm-uit-h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.sm-uit-intro {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--uit-stil);
  margin: 0;
  text-wrap: pretty;
}

/* ---------- de stapel ---------- */
.sm-uit-stapel {
  position: relative;
  max-width: var(--uit-breed);
  margin: 0 auto;
  /* de tijdlijn voor het wegzakken hangt aan de hele stapel, niet aan een
     los paneel. Een paneel dat plakt komt zelf nooit in beweging, dus daar
     valt geen tijdlijn aan te hangen. */
  view-timeline-name: --sm-uit-stapel;
}

/* Elk paneel plakt bovenaan tot het volgende er overheen is geschoven.
   De panelen zijn directe kinderen van de stapel: een plakkend element
   kan alleen plakken binnen zijn eigen houder, en de stapel is hoog
   genoeg voor alle vijf. */
.sm-uit-paneel {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-items: center;
  padding: 117px 40px 45px;
  border-radius: 22px;
  border: 1px solid var(--uit-rand);
  background: var(--uit-bg);
  overflow: hidden;
}
/* een dun verloop bovenin, zodat je de naad tussen twee panelen ziet */
.sm-uit-paneel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--uit-accent), transparent);
  opacity: .5;
}

/* Gemeten in de bron: tekstkolom 400 breed, beeldkolom 500 breed en 470
   hoog, met 110 ertussen. Beide verticaal gecentreerd in het paneel. */
.sm-uit-binnen {
  display: grid;
  grid-template-columns: 400px 500px;
  gap: 110px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* ---------- het spoor rechts ----------
   Een dun lijntje dat meevult terwijl je door de stapel scrollt, met een
   gloed op de kop. Het ligt als laag over de panelen en telt niet mee voor
   de hoogte. Vangt geen muis, en schermlezers slaan het over. */
.sm-uit-spoor {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 20;
}
.sm-uit-spoor i {
  --spoor-h: 220px;
  position: sticky;
  top: calc(50svh - (var(--spoor-h) / 2));
  display: block;
  width: 2px;
  height: var(--spoor-h);
  margin: 0 auto;
  border-radius: 999px;
  background: var(--uit-rand);
  overflow: visible;
}
/* De vulling schaalt in plaats van dat hij hoger wordt. Schalen kost de
   browser geen nieuwe opmaak-ronde, hoogte wel. */
.sm-uit-spoor i::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(var(--uit-accent), var(--uit-accent-2));
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.sm-uit-spoor i::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--uit-accent);
  box-shadow:
    0 0 10px 2px color-mix(in srgb, var(--uit-accent) 75%, transparent),
    0 0 28px 6px color-mix(in srgb, var(--uit-accent) 38%, transparent);
  transform: translateY(0);
}
@supports (animation-timeline: view()) {
  .sm-uit-spoor i::after,
  .sm-uit-spoor i::before {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --sm-uit-stapel;
    animation-range: cover 6% cover 94%;
  }
  .sm-uit-spoor i::after  { animation-name: sm-uit-spoor-vullen; }
  .sm-uit-spoor i::before { animation-name: sm-uit-spoor-kop; }
  @keyframes sm-uit-spoor-vullen {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }
  @keyframes sm-uit-spoor-kop {
    from { transform: translateY(0); }
    to   { transform: translateY(var(--spoor-h)); }
  }
}

/* ---------- links: de tekst ---------- */
/* de typografie hieronder is gemeten in de bron */
.sm-uit-nr {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--uit-accent);
  margin: 0 0 16px;
}
.sm-uit-nr::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .35;
}
/* het thema geeft h3 een eigen kleur; hier volgt de titel de sectie.
   Alleen de kleur zit op de zwaardere selector, zodat de maten op mobiel blijven werken. */
.sm-uit .sm-uit-h3 { color: var(--uit-ink); }
.sm-uit-h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.sm-uit-tekst p {
  font-size: var(--sm-tekst, 16px);
  line-height: 27.2px;
  color: var(--uit-stil);
  margin: 0 0 22px;
  max-width: 440px;
  text-wrap: pretty;
}
.sm-uit-labels {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.sm-uit-labels li {
  font-size: 12px;
  line-height: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--uit-rand);
  background: var(--uit-vlak-2);
  color: var(--uit-zwak);
}

/* ---------- rechts: het demo-kaartje ---------- */
/* in de bron is dit vlak 500 bij 470 */
.sm-uit-beeld {
  display: grid;
  place-items: center;
  width: 500px;
  height: 470px;
  min-height: 0;
}
.sm-kaartje {
  width: 100%;
  max-width: 500px;
  background: var(--uit-vlak);
  border: 1px solid var(--uit-rand);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
.sm-kaartje-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sm-kaartje-naam { font-size: 14px; font-weight: 500; }
.sm-kaartje-bij { font-size: 12px; color: var(--uit-zwak); }

/* stip die aangeeft dat er iets leeft */
.sm-stip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--uit-accent);
}
.sm-stip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: sm-uit-puls 2.4s ease-out infinite;
}
@keyframes sm-uit-puls {
  0%   { box-shadow: 0 0 0 0 rgba(61, 199, 143, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(61, 199, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 199, 143, 0); }
}

/* een regel met een waarde rechts */
.sm-regel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--uit-rand);
  font-size: 13px;
}
.sm-regel span:first-child { color: var(--uit-zwak); }
.sm-regel span:last-child { font-weight: 500; }

/* een balkje dat vult */
.sm-balk {
  height: 8px;
  border-radius: 999px;
  background: var(--uit-vlak-2);
  overflow: hidden;
  margin: 6px 0 14px;
}
.sm-balk i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--uit-accent), var(--uit-accent-2));
  width: var(--vul, 60%);
}
/* het vullen loopt mee met het scrollen, niet met een klok */
@supports (animation-timeline: view()) {
  .sm-balk i {
    animation: sm-uit-vul 1s linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
  }
  @keyframes sm-uit-vul { from { width: 0; } to { width: var(--vul, 60%); } }
}

.sm-groot {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.sm-groot small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--uit-zwak);
  margin-top: 6px;
}
.sm-op { color: var(--uit-accent); }

.sm-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 14px;
}
.sm-week b {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--uit-rand);
  background: var(--uit-vlak-2);
  font-size: 11px;
  font-weight: 500;
  color: var(--uit-zwak);
}
.sm-week b.aan {
  background: color-mix(in srgb, var(--uit-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--uit-accent) 45%, transparent);
  color: var(--uit-ink);
}

/* ---------- het voor-en-na kaartje ---------- */
.sm-vn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.sm-vn-kolom {
  min-width: 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--uit-rand);
  background: var(--uit-vlak-2);
}
/* de rechterkolom is waar je heen wil, die krijgt de accentrand */
.sm-vn-na {
  border-color: color-mix(in srgb, var(--uit-accent) 38%, transparent);
  background: color-mix(in srgb, var(--uit-accent) 7%, transparent);
}
.sm-vn-kop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.sm-vn-label {
  align-self: start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--uit-rand);
  color: var(--uit-zwak);
}
.sm-vn-na .sm-vn-label {
  border-color: transparent;
  background: var(--uit-accent);
  color: #04261a;
}
.sm-vn-titel {
  font-size: 13px;
  font-weight: 500;
  color: var(--uit-ink);
  line-height: 1.3;
}
.sm-vn .sm-regel {
  gap: 8px;
  padding: 9px 0;
  font-size: 12px;
}
.sm-vn .sm-regel:first-of-type { border-top: 0; }
.sm-vn-na .sm-regel span:last-child { color: var(--uit-accent); font-weight: 600; }

/* het accentwoord in de kop */
.sm-uit-groen {
  background: linear-gradient(96deg, var(--uit-accent), color-mix(in srgb, var(--uit-accent) 55%, var(--uit-ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sm-uit-groen { background: none; color: var(--uit-accent); }
}

/* de kleine noot onder de sectie */
.sm-uit-noot {
  max-width: var(--uit-breed);
  margin: 22px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--uit-zwak);
}

/* ---------- het wegzakken van het paneel eronder ---------- */
/* Alleen waar de browser een scroll-tijdlijn kent. Zonder die
   ondersteuning blijft alles gewoon staan, niets valt weg. */
/* De stapel is vijf panelen hoog en elk paneel is één schermhoogte. De
   tijdlijn van de stapel loopt dus over zes schermhoogtes: vijf panelen
   plus de schermhoogte zelf. Elk paneel wordt bedekt gedurende precies
   één zesde daarvan, en dat zesde is zijn eigen bereik. */
/* STANDAARD UIT. De bron schuift de panelen alleen over elkaar, hij laat het
   onderste niet krimpen. Krimpen maakt de tekst eronder bovendien zichtbaar
   zachter: de browser tekent het paneel op ware grootte en schaalt dat beeld,
   en dan wordt letterwerk wazig.

   Wil je het toch, zet dan de class sm-uit--wegzakken op de sectie. */
@supports (animation-timeline: view()) {
  /* Elk paneel krijgt zijn eigen stuk van de tijdlijn mee als variabele,
     zodat het aantal panelen vrij is. De widget rekent dat uit: bij drie
     panelen is de tijdlijn vier delen, bij vijf panelen zes. */
  .sm-uit--wegzakken .sm-uit-paneel {
    animation: sm-uit-wegzakken linear both;
    animation-timeline: --sm-uit-stapel;
    animation-range: cover var(--bereik-start, 0%) cover var(--bereik-eind, 100%);
  }
  @keyframes sm-uit-wegzakken {
    to { opacity: .5; }
  }
  /* het laatste paneel zakt niet weg, daar komt niets overheen */
  .sm-uit--wegzakken .sm-uit-paneel--laatste { animation: none; }
}

/* ---------- tussenmaat: beeld boven de tekst, panelen blijven plakken ----------
   De bron schakelt hier ook om, op 1199px. */
/* Het stapelen blijft op elke maat werken. Wat er verandert is de indeling:
   het kaartje gaat boven de tekst staan en alles wordt compacter, zodat een
   paneel op een telefoon nog steeds in één schermhoogte past. */
@media (max-width: 1199px) {
  .sm-uit-paneel {
    padding: clamp(64px, 11vh, 117px) 24px clamp(24px, 5vh, 45px);
  }
  .sm-uit-binnen {
    grid-template-columns: minmax(0, 500px);
    gap: clamp(16px, 3.2vh, 30px);
    justify-content: center;
    align-content: center;
    height: 100%;
  }
  /* het kaartje eerst, dan de tekst: op een klein scherm kijk je eerst */
  .sm-uit-beeld {
    order: -1;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .sm-uit-tekst p { max-width: none; }
  .sm-uit-spoor i { --spoor-h: 180px; }
}

@media (max-width: 900px) {
  .sm-uit { padding: clamp(56px, 9vh, 90px) 8px; }
  .sm-uit-paneel {
    padding: clamp(48px, 8vh, 80px) 10px clamp(18px, 3.5vh, 30px);
    border-radius: 18px;
  }
  .sm-uit-nr { margin-bottom: 10px; }
  .sm-uit-h3 {
    font-size: clamp(19px, 5.4vw, 26px);
    line-height: 1.25;
    margin-bottom: 10px;
  }
  .sm-uit-tekst p {
    font-size: var(--sm-tekst, 16px); /* lopende tekst nooit onder 16 op de telefoon */
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .sm-uit-labels { gap: 6px; }
  .sm-uit-labels li { font-size: 11px; padding: 4px 10px; }

  .sm-kaartje { max-width: 100%; padding: 14px; border-radius: 14px; }
  /* twee kolommen naast elkaar wordt te krap op een telefoon */
  .sm-vn { grid-template-columns: 1fr; gap: 10px; }
  .sm-vn-kolom { padding: 12px; }
  .sm-vn .sm-regel { padding: 7px 0; }
  .sm-kaartje-kop { margin-bottom: 10px; }
  .sm-groot { font-size: clamp(24px, 7.6vw, 34px); }
  .sm-groot small { margin-top: 4px; }
  .sm-balk { margin: 5px 0 10px; }
  .sm-regel { padding: 8px 0; font-size: 12px; }
  .sm-week { gap: 4px; margin-top: 10px; }

  /* het spoor schuift dichter naar de rand en wordt korter */
  .sm-uit-spoor { right: -2px; width: 24px; }
  .sm-uit-spoor i { --spoor-h: 140px; }
  .sm-uit-spoor i::before { width: 7px; height: 7px; margin: -3px 0 0 -3.5px; }
}

/* Lage schermen: alles blijft staan, het wordt alleen compacter. Niets
   verbergen, want dan haal je inhoud weg die iemand op een grotere telefoon
   wel te zien krijgt. */
@media (max-width: 900px) and (max-height: 700px) {
  .sm-uit-paneel { padding: clamp(40px, 7vh, 60px) 10px clamp(14px, 2.5vh, 22px); }
  .sm-uit-h3 { font-size: clamp(18px, 5vw, 22px); margin-bottom: 8px; }
  .sm-uit-tekst p { font-size: 15px; line-height: 1.5; margin-bottom: 12px; } /* heel laag scherm: 15 zodat beeld en tekst samen passen */
  .sm-kaartje { padding: 12px; }
  .sm-groot { font-size: clamp(21px, 6.6vw, 28px); }
  .sm-regel { padding: 6px 0; }
  .sm-uit-spoor i { --spoor-h: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-uit-paneel { animation: none !important; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-stip::before { animation: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-balk i { animation: none !important; width: var(--vul, 60%); }
}

/* =============================================================
   SM Uitkomsten: voor-en-na beelden (code + foto)
   Omgezet uit projecten/johnschreve-uitkomsten/prototype-beelden.html.
   Alle klassen hebben smu- ervoor, zodat thema-css er niet aan komt.
   Het beeld is 500 x 470 (maat van het beeldvak). Op smallere schermen
   schaalt het mee via container queries, zonder JavaScript.
   De beweging start pas als sm-uitkomsten.js smu-speelt zet; zonder JS
   staat alles gewoon stil en zichtbaar.
   ============================================================= */
.smu-vn {
  /* het beeld is altijd een lichte UI, ook als de sectie donker is */
  --uit-bg: #f4f6f5; --uit-ink: #0d1512; --uit-stil: rgba(13,21,18,.66); --uit-zwak: rgba(13,21,18,.46);
  --uit-rand: rgba(13,21,18,.13); --uit-vlak: #ffffff; --uit-vlak-2: rgba(13,21,18,.04); --uit-accent: #0f8f74;
  --groen: #3DC78F; --groen-ink: #04261a; --rood: #C9492A; --ster: #E8A317;
  font-family: inherit; color: var(--uit-ink); line-height: 1.3; text-align: left;
}
.smu-vn, .smu-vn *, .smu-vn *::before, .smu-vn *::after{ box-sizing: border-box; margin: 0; padding: 0; }
.smu-vn img{ max-width: none; }
.smu-vn ul{ list-style: none; }
/* schaalhouder: het beeld blijft 500 x 470 en schaalt als geheel */
.smu-houder { container-type: inline-size; width: 100%; }
.smu-schaal{ width: 500px; height: 470px; transform-origin: 0 0; }
.smu-ruimte{ width: 100%; aspect-ratio: 500 / 470; overflow: hidden; }
@container (max-width: 499px) { .smu-schaal{ transform: scale(.96); } }
@container (max-width: 480px) { .smu-schaal{ transform: scale(.92); } }
@container (max-width: 460px) { .smu-schaal{ transform: scale(.88); } }
@container (max-width: 440px) { .smu-schaal{ transform: scale(.84); } }
@container (max-width: 420px) { .smu-schaal{ transform: scale(.8); } }
@container (max-width: 400px) { .smu-schaal{ transform: scale(.76); } }
@container (max-width: 380px) { .smu-schaal{ transform: scale(.72); } }
@container (max-width: 360px) { .smu-schaal{ transform: scale(.68); } }
@container (max-width: 340px) { .smu-schaal{ transform: scale(.64); } }
@container (max-width: 320px) { .smu-schaal{ transform: scale(.6); } }
@container (max-width: 300px) { .smu-schaal{ transform: scale(.56); } }
/* cijfers klein onder het beeld */
.smu-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.smu-cijfer{ padding: 8px 10px; border-radius: 10px; border: 1px solid var(--uit-rand); background: var(--uit-vlak); }
.smu-cijfer span{ display: block; font-size: 10.5px; color: var(--uit-zwak); line-height: 1.3; }
.smu-cijfer b{ font-size: 13px; font-weight: 600; color: var(--uit-ink); }
.smu-cijfer b i{ font-style: normal; color: var(--uit-zwak); font-weight: 400; margin: 0 4px; }
.smu-cijfer b em{ font-style: normal; color: var(--uit-accent); }
.smu-cijfer b{ white-space: nowrap; }
@container (max-width: 420px) { .smu-cijfers { gap: 6px; } .smu-cijfer { padding: 7px 8px; } .smu-cijfer span { font-size: 10.5px; } .smu-cijfer b { font-size: 12px; } .smu-cijfer b i { margin: 0 2px; } }
/* Drie gelijke vakjes, ook als een bedrag lang is (1fr alleen rekt mee met de inhoud). */
.smu-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Smal: label bovenin op een vaste hoogte, oude waarde klein en grijs, de nieuwe groot eronder.
   Zo passen ook "€ 1.900 → € 7.400" en staan de drie vakjes op dezelfde lijn. */
@container (max-width: 420px) {
  .smu-cijfer { display: flex; flex-direction: column; gap: 4px; }
  .smu-cijfer span { min-height: 2.6em; }
  .smu-cijfer b { display: flex; flex-wrap: wrap; align-items: baseline; white-space: normal; font-size: 11px; font-weight: 500; color: var(--uit-zwak); line-height: 1.2; }
  .smu-cijfer b i { margin: 0 3px; }
  .smu-cijfer b em { flex-basis: 100%; font-size: 16px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
}
.smu-vn{
  /* geen lichte kaart: de vensters en telefoons zweven los op de sectie.
     Alleen een zachte groene gloed eronder, zoals bij de bron. */
  position: relative; width: 500px; height: 470px; overflow: hidden;
  background: radial-gradient(60% 55% at 45% 62%, rgba(61,199,143,.14), transparent 72%);
  color: var(--uit-ink);
}
.smu-vn-pil{
  position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; line-height: 1.25; padding: 7px 11px 7px 9px; border-radius: 999px; white-space: nowrap;
}
.smu-vn-pil svg{ width: 13px; height: 13px; }
.smu-vn-pil--voor{ color: rgba(13,21,18,.6); background: #fff; border: 1px solid var(--uit-rand); }
.smu-vn-pil--na{ color: var(--groen-ink); background: var(--groen); box-shadow: 0 6px 14px -6px rgba(13,21,18,.35); }
.smu-vn-oud, .smu-vn-nieuw{ position: absolute; background: #fff; border-radius: 12px; overflow: hidden; }
.smu-vn-oud{
  width: 300px; left: 16px; top: 40px; transform: rotate(-4deg); transform-origin: 30% 30%;
  filter: grayscale(.85) opacity(.82); border: 1px solid var(--uit-rand);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.35);
}
.smu-vn-nieuw{
  width: 340px; right: 16px; bottom: 18px;
  border: 1px solid rgba(15,143,116,.35);
  box-shadow: 0 2px 6px -2px rgba(13,21,18,.12), 0 30px 60px -28px rgba(13,21,18,.45);
}
.smu-vn-pil--oud-plek{ left: 22px; top: 14px; }
.smu-vn-pil--na-plek{ left: 12px; top: -34px; }
.smu-vn-nieuw{ overflow: visible; }
.smu-vn-nieuw > :nth-child(2){ border-radius: 12px 12px 0 0; }
.smu-vn-nieuw > :last-child{ border-radius: 0 0 12px 12px; }
.smu-vn .smu-balk{ height: 20px; display: flex; align-items: center; gap: 4px; padding: 0 9px; background: #f1f3f2; border-bottom: 1px solid #e5e9e7; }
.smu-vn .smu-balk i{ width: 6px; height: 6px; border-radius: 50%; background: #d3d9d6; }
.smu-vn .smu-balk b{ margin-left: 8px; height: 9px; width: 110px; border-radius: 5px; background: #fff; border: 1px solid #e5e9e7; }
.smu-vn .smu-pg{ padding: 12px 14px 14px; display: grid; gap: 8px; }
.smu-vn .smu-nav{ display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: var(--uit-zwak); }
.smu-vn .smu-logo{ display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--uit-ink); }
.smu-vn .smu-logo span{ width: 15px; height: 15px; border-radius: 4px; background: #2F4E7E; }
.smu-vn .smu-knop{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1.25; padding: 10px 14px; border-radius: 999px; white-space: nowrap; }
.smu-vn .smu-knop--hoofd{ background: #0d4a3a; color: #fff; box-shadow: 0 8px 18px -10px rgba(13,74,58,.7); transition: transform .4s cubic-bezier(.165,.84,.44,1), box-shadow .4s cubic-bezier(.165,.84,.44,1); }
.smu-vn .smu-knop--hoofd .smu-ar{ width: 14px; height: 14px; flex: 0 0 auto; color: #9fe3c4; transition: padding .4s cubic-bezier(.165,.84,.44,1); }
.smu-vn .smu-knop--hoofd:hover{ transform: translateY(-6px); box-shadow: 0 14px 24px -12px rgba(13,74,58,.75); }
.smu-vn .smu-knop--hoofd:hover .smu-ar{ padding-left: 6px; }
.smu-vn .smu-knop--twee{ border: 1.5px solid #dfe5e2; color: var(--uit-ink); }
.smu-vn .smu-vinken{ list-style: none; display: grid; gap: 4px; }
.smu-vn .smu-vinken li{ display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #26332e; }
.smu-vn .smu-vinken li::before{ content: ""; flex: 0 0 15px; height: 15px; border-radius: 50%; background: var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%2304261a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.smu-vn .smu-lap{ font-size: 9px; line-height: 1.45; color: #6b7571; text-align: justify; }
.smu-vn .smu-lap-kop{ font-size: 13px; font-weight: 700; line-height: 1.25; color: #3c4541; }
.smu-vn .smu-grijs{ background: #eceeed; border-radius: 5px; }
.smu-vn .smu-kaart{ padding: 14px; display: grid; gap: 10px; }
.smu-vn .smu-kaart-kop{ display: flex; align-items: center; gap: 8px; }
.smu-vn .smu-avatar{ width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #cfd8d4, #aab7b1); }
.smu-vn .smu-kaart-kop b{ font-size: 12px; display: block; }
.smu-vn .smu-kaart-kop small{ font-size: 10.5px; color: var(--uit-zwak); }
.smu-vn .smu-veld{ font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--uit-zwak); }
.smu-vn .smu-saai{ display: grid; grid-template-columns: 70px 1fr; gap: 4px 8px; font-size: 10.5px; color: #6b7571; }
.smu-vn .smu-quote{ position: relative; font-size: 12px; font-weight: 600; line-height: 1.25; padding: 8px 10px 8px 30px; border-radius: 9px; background: #f2f6f4; }
.smu-vn .smu-quote::before{ content: ""; position: absolute; left: 10px; top: 9px; width: 13px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M0 22V12Q0 3 9 0l1.6 3Q6 5 6 10h5v12zm15 0V12q0-9 9-12l1.6 3Q21 5 21 10h5v12z' fill='%233DC78F'/%3E%3C/svg%3E") 0 0 / contain no-repeat; }
.smu-vn .smu-tag-rood{ display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #7a2e1c; background: #fbeee9; padding: 6px 9px; border-radius: 7px; }
.smu-vn .smu-hero-kop{ font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.smu-vn .smu-hero-sub{ font-size: 12px; line-height: 1.25; color: #3c4842; }
.smu-vn .smu-hero-foto{ position: relative; height: 74px; border-radius: 9px; overflow: hidden; }
.smu-vn .smu-hero-foto img, .smu-vn .smu-foto img, .smu-vn .smu-foto-oud img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.smu-vn .smu-ai-label{ position: absolute; right: 6px; bottom: 6px; font-size: 8px; font-weight: 600; letter-spacing: .02em; padding: 2px 5px; border-radius: 4px; background: rgba(13,21,18,.55); color: #fff; }
.smu-vn-nieuw--hero{ width: 350px; }
.smu-vn .smu-dh{ position: relative; height: 330px; border-radius: 12px; overflow: hidden; background: #1c2721; color: #fff; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.smu-vn .smu-dh-foto{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.smu-vn .smu-dh-verloop{ position: absolute; inset: 0; background: linear-gradient(270deg, rgba(28,39,33,.05) 0%, rgba(28,39,33,.88) 68%); }
.smu-vn .smu-dh-inhoud{ position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; gap: 6px; }
.smu-vn .smu-dh-top{ position: absolute; top: 10px; left: 18px; right: 12px; display: flex; justify-content: space-between; align-items: center; }
.smu-vn .smu-dh-logo{ height: 34px; width: auto; display: block; }
.smu-vn .smu-dh-eyebrow{ font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #cfe0cf; margin-top: 18px; }
.smu-vn .smu-dh-kop{ font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 19px; line-height: 1.15; letter-spacing: 0; color: #fff; }
.smu-vn .smu-dh-sub{ font-size: 10.5px; line-height: 1.45; color: rgba(255,255,255,.8); }
.smu-vn .smu-dh-knoppen{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.smu-vn .smu-pb{ display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; line-height: 1.45; padding: 8px 12px; border-radius: 100px; white-space: nowrap; }
.smu-vn .smu-pb .smu-ar{ width: 12px; height: 12px; }
.smu-vn .smu-pb--vol{ background: #b8d3bc; color: #13201a; }
.smu-vn .smu-pb--rand{ border: 1.5px solid rgba(255,255,255,.7); color: #fff; }
.smu-vn .smu-dh-ps{ font-family: Georgia, "Times New Roman", serif; font-size: 9px; line-height: 1.45; color: rgba(255,255,255,.75); padding-left: 8px; border-left: 2px solid #b8d3bc; max-width: 220px; }
.smu-vn .smu-p-eyebrow{ font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--uit-accent); }
.smu-vn .smu-p-ps{ font-size: 8px; line-height: 1.45; color: #4d5652; }
.smu-vn .smu-landing .smu-p-ps{ font-size: 9.5px; line-height: 1.4; }
.smu-vn .smu-keuze{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
.smu-vn .smu-keuze-optie{ position: relative; display: grid; gap: 0px; padding: 5px 7px; border-radius: 8px; border: 1.5px solid #e1e7e4; font-size: 9px; color: #3c4842; }
.smu-vn .smu-keuze-optie b{ font-size: 10.5px; color: var(--uit-ink); }
.smu-vn .smu-keuze-optie.smu-is-actief{ border-color: #0E8A6F; background: #f1f8f5; }
.smu-vn .smu-keuze-optie em{ position: absolute; top: -8px; right: 6px; font-style: normal; font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: #0E8A6F; color: #fff; }
.smu-vn .smu-extra{ display: grid; grid-template-columns: 13px 1fr auto; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 8px; background: #f5f8f6; font-size: 9px; color: #26332e; }
.smu-vn .smu-extra b{ font-size: 9px; }
.smu-vn .smu-vinkje{ width: 13px; height: 13px; border-radius: 3px; background: #0E8A6F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.smu-vn .smu-p-na .smu-cta .smu-knop{ font-size: 10.5px; }
.smu-vn .smu-serp-los{ display: grid; gap: 8px; margin: 2px -14px 0; padding: 10px 14px 0; border-top: 6px solid #f1f4f2; }
.smu-vn .smu-kop-rij{ display: flex; align-items: center; gap: 6px; }
.smu-vn .smu-badge-nieuw{ font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: #e7f4ee; color: #0b5e4b; }
.smu-vn .smu-smaak{ position: relative; margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 9px; color: #3c4842; }
.smu-vn .smu-smaak-label{ margin-right: 2px; }
.smu-vn .smu-bol{ width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; border: 1px solid #d7dfdb; }
.smu-vn .smu-bol.smu-is-actief{ border: 1.5px solid #0E8A6F; }
.smu-vn .smu-bol--mango{ background: #f2b544; } .smu-vn .smu-bol--bes{ background: #a3486b; } .smu-vn .smu-bol--munt{ background: #8fcfae; }
.smu-vn .smu-tip{ position: absolute; left: 44px; top: -19px; white-space: nowrap; font-size: 8px; font-weight: 600; padding: 3px 6px; border-radius: 6px; background: #0d1512; color: #fff; }
.smu-vn .smu-tip::before{ content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: #0d1512; }
.smu-vn .smu-keuze-optie small{ font-size: 8px; color: #5b6863; line-height: 1.25; }
.smu-vn .smu-cta--plak{ background: linear-gradient(transparent, #fff 22%); padding-top: 6px; }
.smu-vn .smu-tel{ position: absolute; width: 214px; height: 452px; border-radius: 30px; background: #15181a; padding: 7px; box-shadow: 0 26px 50px -24px rgba(0,0,0,.55); }
.smu-vn .smu-tel .smu-scherm{ width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: #fff; position: relative; }
.smu-vn .smu-tel--oud{ left: 26px; top: 12px; transform: rotate(-5deg); filter: grayscale(.9) opacity(.62); }
.smu-vn .smu-tel--nieuw{ right: 26px; top: 6px; box-shadow: 0 30px 60px -24px rgba(13,21,18,.5); outline: 2px solid rgba(61,199,143,.55); outline-offset: 0; }
.smu-vn .smu-p-oud{ padding: 22px 11px; display: grid; gap: 6px; font-size: 9px; color: #6b7571; }
.smu-vn .smu-p-oud .smu-t{ font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #3c4541; }
.smu-vn .smu-p-oud .smu-spec{ display: grid; grid-template-columns: 56px 1fr; gap: 2px 6px; }
.smu-vn .smu-p-oud .smu-knopje{ justify-self: start; margin-top: 26px; font-size: 8px; font-weight: 700; padding: 5px 8px; border-radius: 3px; background: #dde2df; color: #666; }
.smu-vn .smu-p-na .smu-foto{ height: 116px; position: relative; overflow: hidden; }
.smu-vn .smu-p-na .smu-foto img{ object-position: 58% 58%; }
.smu-vn .smu-foto-oud{ height: 118px; overflow: hidden; border-radius: 4px; }
.smu-vn .smu-foto-oud img{ object-position: 50% 45%; }
.smu-vn .smu-p-na .smu-body{ padding: 7px 11px; display: grid; gap: 3px; }
.smu-vn .smu-p-na .smu-t{ font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.smu-vn .smu-p-na .smu-rv{ font-size: 9px; color: var(--uit-zwak); }
.smu-vn .smu-pm{ list-style: none; display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid #e8ecea; }
.smu-vn .smu-pm li{ display: flex; gap: 6px; font-size: 10.5px; line-height: 1.45; color: #26332e; }
.smu-vn .smu-pm li::before{ flex: 0 0 12px; height: 12px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; line-height: 1.45; color: #fff; }
.smu-vn .smu-pm .smu-plus::before{ content: ""; background: #0E8A6F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 3v6M3 6h6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.smu-vn .smu-pm .smu-min::before{ content: ""; background: #9aa59f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.smu-vn .smu-bez{ display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #0E8A6F; }
.smu-vn .smu-p-na .smu-cta{ position: absolute; left: 9px; right: 9px; bottom: 11px; display: grid; gap: 4px; text-align: center; }
.smu-vn .smu-p-na .smu-cta .smu-knop{ width: 100%; font-size: 12px; padding: 10px; }
.smu-vn .smu-p-na .smu-cta small{ font-size: 8px; color: var(--uit-zwak); }
.smu-vn .smu-sterren{ display: inline-block; width: 55px; height: 10px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L10 14.8l-5.2 2.8 1-5.8L1.5 7.7l5.9-.8z' fill='%23E8A317'/%3E%3C/svg%3E") 0 0 / 11px 10px repeat-x; }
.smu-vn .smu-serp{ padding: 12px 14px; display: grid; gap: 10px; }
.smu-vn .smu-zoek{ display: flex; align-items: center; gap: 8px; height: 26px; border-radius: 13px; border: 1px solid #e0e5e2; padding: 0 10px; font-size: 10.5px; color: #26332e; }
.smu-vn .smu-zoek::before{ content: ""; width: 9px; height: 9px; border: 1.6px solid #9aa59f; border-radius: 50%; }
.smu-vn .smu-res{ display: grid; gap: 2px; }
.smu-vn .smu-res .smu-url{ display: flex; align-items: center; gap: 6px; font-size: 9px; color: #4d5652; }
.smu-vn .smu-res .smu-url i{ width: 14px; height: 14px; border-radius: 50%; background: #2F4E7E; }
.smu-vn .smu-res .smu-tt{ font-size: 13px; line-height: 1.25; color: #1a0dab; font-weight: 500; }
.smu-vn .smu-res .smu-ds{ font-size: 10.5px; line-height: 1.45; color: #4d5652; }
.smu-vn .smu-res--vaag .smu-tt{ color: #6a5fb5; }
.smu-vn .smu-res--ander{ opacity: .5; }
.smu-vn .smu-res--ander .smu-tt{ color: #5a6db8; }
.smu-vn .smu-links{ display: flex; flex-wrap: wrap; gap: 4px; padding-left: 20px; }
.smu-vn .smu-links span{ font-size: 10.5px; color: #1a0dab; padding: 4px 8px; border-radius: 999px; background: #f1f4ff; }
.smu-vn .smu-gevonden{ display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid #edf0ee; }
.smu-vn .smu-gevonden .smu-veld{ display: flex; justify-content: space-between; }
.smu-vn .smu-staven{ display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.smu-vn .smu-staven i{ flex: 1; border-radius: 3px 3px 0 0; background: var(--groen); }
.smu-vn .smu-staven i.smu-leeg{ background: #e4e9e6; }
.smu-vn .smu-ad{ padding: 10px 12px; display: grid; gap: 3px; border-bottom: 1px solid #edf0ee; }
.smu-vn .smu-ad .smu-spons{ font-size: 9px; font-weight: 700; color: #26332e; }
.smu-vn .smu-ad .smu-tt{ font-size: 12px; line-height: 1.25; color: #1a0dab; font-weight: 500; }
.smu-vn .smu-ad .smu-ds{ font-size: 10.5px; line-height: 1.45; color: #4d5652; }
.smu-vn .smu-match{ background: linear-gradient(transparent 58%, rgba(61,199,143,.45) 58%); border-radius: 2px; }
.smu-vn .smu-pijl{ display: flex; align-items: center; justify-content: center; gap: 4px; height: 26px; font-size: 10.5px; font-weight: 700; color: var(--uit-accent); }
.smu-vn .smu-landing{ padding: 10px 14px 12px; display: grid; gap: 6px; background: #fbfcfb; }
.smu-vn .smu-inbox{ padding: 12px 14px; display: grid; gap: 6px; }
.smu-vn .smu-inbox-kop{ display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; }
.smu-vn .smu-live{ display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--uit-accent); }
.smu-vn .smu-live::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.smu-vn .smu-melding{ display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 8px 9px; border-radius: 10px; background: #f5f8f6; }
.smu-vn .smu-melding .smu-ic{ width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; background: #fff; border: 1px solid #e3e8e5; }
.smu-vn .smu-melding b{ font-size: 12px; display: block; }
.smu-vn .smu-melding small{ font-size: 9px; color: var(--uit-zwak); }
.smu-vn .smu-bron{ font-size: 9px; font-weight: 700; padding: 4px 7px; border-radius: 999px; background: rgba(61,199,143,.18); color: #0b5e4b; white-space: nowrap; }
.smu-vn .smu-vraag{ padding: 26px 16px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.smu-vn .smu-vraag .smu-groot{ font-size: 34px; font-weight: 700; color: #b9c2be; line-height: 1; }
.smu-vn .smu-vraag p{ font-size: 10.5px; color: #6b7571; }
.smu-vn.smu-speelt .smu-vn-oud, .smu-vn.smu-speelt .smu-tel--oud{ animation: smu-zak 900ms cubic-bezier(.2,.7,.2,1) both; }
.smu-vn.smu-speelt .smu-vn-nieuw, .smu-vn.smu-speelt .smu-tel--nieuw{ animation: smu-kom 900ms 250ms cubic-bezier(.2,.8,.2,1) both; }
.smu-vn.smu-speelt .smu-vn-pil--na{ animation: smu-pop 500ms 900ms cubic-bezier(.16,1,.3,1) both; }
.smu-vn.smu-speelt .smu-stap{ animation: smu-stap 500ms both; animation-delay: calc(1000ms + var(--i, 0) * 180ms); }
@keyframes smu-zak { from { transform: rotate(0deg) translateY(0); filter: none; } }
.smu-vn .smu-tel--oud{ --rot: -5deg; }
@keyframes smu-kom { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes smu-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes smu-stap { from { opacity: 0; transform: translateY(6px); } }
.smu-vn .smu-klik{ position: relative; }
.smu-vn .smu-cursor{ position: absolute; z-index: 9; width: 18px; height: 18px; right: 16px; bottom: 2px; pointer-events: none; opacity: 0; }
.smu-vn.smu-speelt .smu-cursor{ animation: smu-cursor 1600ms 1900ms both; }
@keyframes smu-cursor {
  0% { opacity: 0; transform: translate(60px, 60px); }
  20% { opacity: 1; }
  70% { opacity: 1; transform: translate(0, 0); }
  80% { transform: translate(0, 0) scale(.85); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.smu-vn.smu-speelt .smu-klik{ animation: smu-klik 500ms 3000ms both; }
@keyframes smu-klik { 50% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(61,199,143,.35); } }
.smu-vn.smu-speelt .smu-hero-kop{ animation: smu-veeg 700ms 1000ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes smu-veeg { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.smu-vn .smu-toast{ position: absolute; left: 9px; right: 9px; top: 9px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #0d1512; color: #fff; font-size: 10.5px; font-weight: 600; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); opacity: 0; }
.smu-vn .smu-toast i{ width: 16px; height: 16px; border-radius: 50%; background: var(--groen); flex: 0 0 auto; }
.smu-vn.smu-speelt .smu-toast{ animation: smu-toast 3600ms 3300ms cubic-bezier(.16,1,.3,1) both; }
/* de melding komt binnen, blijft even staan en vervaagt weer, zodat de foto daarna vrij is */
@keyframes smu-toast { 0% { opacity: 0; transform: translateY(-14px); } 14% { opacity: 1; transform: none; } 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.smu-vn.smu-speelt .smu-klim{ animation: smu-klim 1200ms 900ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes smu-klim { 0% { opacity: .35; transform: translateY(150px); filter: grayscale(1); } 60% { opacity: 1; filter: none; } 100% { transform: none; } }
.smu-vn .smu-match{ background: linear-gradient(transparent 58%, rgba(61,199,143,.45) 58%) 0 0 / 100% 100% no-repeat; }
.smu-vn.smu-speelt .smu-match{ animation: smu-onderstreep 700ms both; }
.smu-vn.smu-speelt .smu-ad .smu-match{ animation-delay: 1100ms; }
.smu-vn.smu-speelt .smu-landing .smu-match{ animation-delay: 2000ms; }
@keyframes smu-onderstreep { from { background-size: 0% 100%; } }
.smu-vn.smu-speelt .smu-melding{ animation: smu-binnen 520ms both cubic-bezier(.16,1,.3,1); animation-delay: calc(900ms + var(--i, 0) * 420ms); }
@keyframes smu-binnen { from { opacity: 0; transform: translateX(30px) scale(.96); } }
.smu-vn .smu-live::before{ animation: smu-puls 2s ease-out infinite; }
@keyframes smu-puls { 0% { box-shadow: 0 0 0 0 rgba(15,143,116,.5); } 100% { box-shadow: 0 0 0 7px rgba(15,143,116,0); } }
@media (prefers-reduced-motion: reduce) { html:not(.sm-rustig):not(.sm-beweeg) .smu-vn.smu-speelt * { animation: none !important; } html:not(.sm-rustig):not(.sm-beweeg) .smu-vn .smu-cursor { display: none; } }

/* ---------- paneel 07: gevonden in AI-antwoorden en in Shopping ---------- */
.smu-vn[data-smu-beeld="geo"] .smu-vn-oud { width: 300px; left: 14px; top: 26px; }
.smu-vn[data-smu-beeld="geo"] .smu-vn-nieuw { width: 340px; right: 14px; bottom: 16px; padding-bottom: 2px; }
.smu-vn .smu-ai { padding: 12px 14px 10px; display: grid; gap: 6px; }
.smu-vn .smu-ai-kop { display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--uit-accent); }
.smu-vn .smu-ai-vonk { width: 12px; height: 12px; }
.smu-vn .smu-ai-vraag { font-size: 10.5px; font-weight: 600; color: #26332e; }
.smu-vn .smu-ai-tekst { font-size: 10.5px; line-height: 1.45; color: #3c4842; }
.smu-vn .smu-ai-tekst b { font-weight: 700; color: var(--uit-ink); }
.smu-vn .smu-ai-bronnen { display: flex; gap: 4px; flex-wrap: wrap; }
.smu-vn .smu-ai-bronnen span { font-size: 8px; padding: 3px 7px; border-radius: 999px; background: #f1f4f2; color: #5b6863; }
.smu-vn .smu-bron-mijn { background: rgba(61,199,143,.2) !important; color: #0b5e4b !important; font-weight: 700; }
.smu-vn .smu-sh { padding: 8px 14px 12px; border-top: 1px solid #eef1ef; display: grid; gap: 6px; }
.smu-vn .smu-sh-kop { font-size: 8px; font-weight: 700; letter-spacing: .06em; color: #5b6863; }
.smu-vn .smu-sh-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.smu-vn .smu-sh-kaart { display: grid; gap: 2px; padding: 5px; border-radius: 9px; border: 1px solid #e6eae8; background: #fff; }
.smu-vn .smu-sh-kaart b { font-size: 10.5px; }
.smu-vn .smu-sh-kaart span { font-size: 8px; color: #5b6863; }
.smu-vn .smu-sh-mijn { border-color: rgba(15,143,116,.45); background: #f4fbf8; box-shadow: 0 6px 14px -8px rgba(13,74,58,.45); }
.smu-vn .smu-sh-foto { height: 44px; border-radius: 6px; overflow: hidden; background: #f1f4f2; }
.smu-vn .smu-sh-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smu-vn .smu-sh-leeg { background: repeating-linear-gradient(135deg, #eef1ef 0 6px, #e7ebe9 6px 12px); }

/* ---------- paneel 01: zoekwoordenlijst links, wens rechts ---------- */
.smu-vn .smu-kw { display: grid; gap: 4px; }
.smu-vn .smu-kw li { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 8px; font-size: 10.5px; color: #5b6863; }
.smu-vn .smu-kw i { height: 5px; border-radius: 999px; background: #e2e7e4; position: relative; }
.smu-vn .smu-kw i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); border-radius: inherit; background: #b9c2be; }
.smu-vn .smu-tag-groen { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #0b5e4b; background: rgba(61,199,143,.16); padding: 6px 9px; border-radius: 7px; }

.smu-vn .smu-kop-rij .smu-rv{ display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 9px; color: var(--uit-zwak); }
.smu-vn .smu-kop-rij .smu-rv b{ font-size: 9px; color: var(--uit-ink); }

.smu-vn .smu-kern{ display: grid; gap: 4px; list-style: none; }
.smu-vn .smu-kern li{ display: flex; gap: 6px; font-size: 10.5px; line-height: 1.45; color: #26332e; }
.smu-vn .smu-kern li::before{ content: ""; flex: 0 0 12px; height: 12px; margin-top: 2px; border-radius: 50%; background: rgba(61,199,143,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%230b5e4b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat; }
.smu-vn .smu-praat{ display: grid; gap: 3px; list-style: none; }
.smu-vn .smu-praat li{ font-size: 10.5px; line-height: 1.45; color: #6b7571; }

/* ---------- uitlegvideo in een mockup ---------- */
.smu-vn .smu-video{ position: relative; height: 76px; border-radius: 9px; overflow: hidden; }
.smu-vn .smu-video img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.smu-vn .smu-video::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 38%, rgba(9,20,16,.72)); }
.smu-vn .smu-speel{ position: absolute; left: 50%; top: 44%; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255,255,255,.94); color: #0b5e4b; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.smu-vn .smu-speel svg{ width: 13px; height: 13px; margin-left: 1px; }
.smu-vn .smu-duur{ position: absolute; right: 6px; top: 6px; z-index: 2; font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 4px; background: rgba(9,20,16,.72); color: #fff; }
.smu-vn .smu-video-bij{ position: absolute; left: 8px; right: 8px; bottom: 12px; z-index: 2; font-size: 9px; font-weight: 600; line-height: 1.45; color: #fff; }
.smu-vn .smu-video-lijn{ position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 2; height: 2px; border-radius: 999px; background: rgba(255,255,255,.34); }
.smu-vn .smu-video-lijn i{ position: absolute; inset: 0 auto 0 0; width: 22%; border-radius: inherit; background: #3DC78F; }

/* ---------- merknaam in de productkop ---------- */
.smu-vn .smu-merk{ white-space: nowrap; flex: 0 0 auto; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #0b5e4b; background: rgba(61,199,143,.18); padding: 3px 6px; border-radius: 5px; }

/* ---------- aanbod-blok onder de video (paneel 05) ---------- */
.smu-vn .smu-aanbod{ display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; background: #eef7f2; border: 1px solid #cfe7db; }
.smu-vn .smu-aanbod > div:first-of-type{ flex: 1 1 auto; min-width: 0; }
.smu-vn .smu-aanbod b{ display: block; font-size: 10.5px; line-height: 1.25; color: var(--uit-ink); }
.smu-vn .smu-aanbod small{ display: block; font-size: 9px; line-height: 1.45; color: #4d5652; }
.smu-vn .smu-korting{ flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #fff; background: #0d4a3a; padding: 4px 6px; border-radius: 6px; }
.smu-vn .smu-prijs{ flex: 0 0 auto; text-align: right; white-space: nowrap; }
.smu-vn .smu-prijs s{ display: block; font-size: 9px; color: #8a938e; }
.smu-vn .smu-prijs b{ font-size: 13px; color: #0d4a3a; }
.smu-vn .smu-landing .smu-p-ps + .smu-p-ps{ margin-top: -2px; }


.smu-vn[data-smu-beeld="advertentie"] .smu-vn-nieuw{ bottom: 8px; }

.smu-vn .smu-sh-mijn .smu-sh-foto{ background: #fff; }
.smu-vn .smu-sh-mijn .smu-sh-foto img{ object-fit: contain; }

/* ---------- ronde 207: video 2,5:1, pil opzij in 05, korting in Shopping ---------- */
.smu-vn .smu-video{ height: auto; aspect-ratio: 5 / 2; }
.smu-vn[data-smu-beeld="advertentie"] .smu-vn-nieuw{ bottom: 4px; }
.smu-vn[data-smu-beeld="advertentie"] .smu-vn-pil--na-plek{ top: 12px; left: -64px; }
.smu-vn[data-smu-beeld="advertentie"] .smu-pijl{ height: 20px; }
.smu-vn .smu-sh-foto{ position: relative; }
.smu-vn .smu-sh-label{ position: absolute; left: 3px; top: 3px; font-style: normal; font-size: 8px; font-weight: 800; line-height: 1.25; color: #fff; background: #c2410c; padding: 1px 4px; border-radius: 4px; }
.smu-vn .smu-sh-kaart b s{ font-size: 8px; font-weight: 500; color: #8a938e; margin-left: 2px; }

/* ---------- ronde 209: korting in het groen (zoals Google Shopping) ---------- */
.smu-vn .smu-sh-label{ background: #188038; }
.smu-vn .smu-sh-voordeel{ font-style: normal; font-size: 8px; font-weight: 700; line-height: 1.25; color: #188038; }


/* ---------- beeldvak zoals uxpeak (ronde 212) ----------
   Uxpeak zet het beeld in een eigen vak (.stage): 24 px hoeken, verloop van boven naar onder,
   30 px binnenruimte op desktop, vierkant met 16 px op tablet en mobiel.
   Het script zet --smu-k (breedte van het vak) en --smu-b (breedte van het beeld erin).
   Zonder script: vak 560 breed, beeld vult de binnenkant. */
.sm-uit-binnen { grid-template-columns: 400px var(--smu-k, 500px); }
.sm-uit-beeld { width: var(--smu-k, 500px); height: auto; min-height: 0; }
.sm-uit-beeld:has(.smu-houder) {
  --smu-k: var(--smu-k-js, 560px);
  position: relative; box-sizing: border-box;
  display: grid; place-items: center;
  padding: 30px; min-height: calc(var(--smu-b, 500px) * .94 + 60px);
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, #141c19 0%, #0d1311 55%, #090d0c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.sm-uit-binnen:has(.smu-houder) { grid-template-columns: 400px var(--smu-k-js, 560px); }
.sm-uit-beeld:has(.smu-houder) .smu-houder { width: var(--smu-b, 100%); }
@media (max-width: 1199px) {
  /* de tekst houdt zijn eigen breedte; alleen het vak krimpt mee met het script.
     Anders wordt de tekst op een liggende tablet heel smal en hoog, en valt de onderkant weg. */
  .sm-uit-binnen, .sm-uit-binnen:has(.smu-houder) { grid-template-columns: minmax(0, 500px); }
  .sm-uit-beeld { width: 100%; }
  .sm-uit-beeld:has(.smu-houder) { width: min(100%, var(--smu-k-js, 100%)); justify-self: center; aspect-ratio: 1 / 1; padding: 16px; min-height: 0; }
  /* met cijfers eronder mag het vak hoger worden dan vierkant, anders vallen de getallen weg */
  .sm-uit-beeld:has(.smu-cijfers) { aspect-ratio: auto; }
}

/* heel smalle telefoon (tot 370 px): tekst blijft 16px, maar iets strakker zodat beeld en tekst in één scherm passen */
@media (max-width: 370px) { .sm-uit-tekst p { line-height: 1.5; margin-bottom: 10px; } }