/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — pagina /review/

   Sinds 13 september 2026 gebouwd zoals de vragenlijst: licht papier,
   één vraag per scherm, een voortgangsbalk, en bijna geen tekst. De
   blokken hieronder komen letterlijk uit vragenlijst\cssragenlijst.css
   (1 tot 9 en 15 tot 19); wat alleen de vragenlijst nodig had (kleuren,
   toon, bestanden, het meegroeiende voorbeeld) is weggelaten.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL - vragenlijst
   Lichte versie van de huisstijl: warm papier in plaats van
   houtskool, met hetzelfde gloeiend rood en dezelfde letters
   als smeuldersdigital.com.

   Waarom licht en de site donker: dit is geen etalage maar een
   formulier. Donker leest zwaarder en een blad waar je op moet
   schrijven hoort licht te zijn. De kleuren en de letters zijn
   wel exact dezelfde, dus het blijft herkenbaar jouw werk.

   Vanilla css, geen frameworks. Negentien genummerde blokken.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────── */
:root{
  /* papier en inkt */
  --papier:   #F7F3ED;
  --papier-2: #FFFDFA;
  --ink:      #17140F;
  --ink-2:    #5A5249;
  --ink-3:    #8C837A;

  /* het vuur, letterlijk de tokens van de hoofdsite */
  --ember:      #F5251F;
  --ember-hot:  #FF6A2B;
  --ember-deep: #B3120D;

  --line:   rgba(23,20,15,.10);
  --line-2: rgba(23,20,15,.18);
  --glass:  rgba(23,20,15,.035);

  --grad-ember: linear-gradient(100deg, var(--ember-hot), var(--ember) 55%, var(--ember-deep));

  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  --r:    18px;
  --r-lg: 26px;

  --schaduw:   0 2px 6px rgba(23,20,15,.05), 0 16px 40px -18px rgba(23,20,15,.22);
  --schaduw-l: 0 4px 12px rgba(23,20,15,.06), 0 40px 80px -40px rgba(23,20,15,.4);

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --veer:     cubic-bezier(.34,1.56,.64,1);
}

/* ── 2. Reset ──────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--papier);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}
img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--f-display); font-weight:800; line-height:.98; letter-spacing:-.035em; }
em{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:6px; }

/* ── 3. De ruimte achter alles ─────────────────────────── */
/* Warm papier met gloed er doorheen. Zacht genoeg om een formulier
   voor te zetten, warm genoeg om niet als een leeg blad aan te voelen. */
.ruimte{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  perspective:900px; perspective-origin:50% 50%;
  background:
    radial-gradient(130% 90% at 50% -10%, #FFFFFF 0%, rgba(255,255,255,0) 58%),
    linear-gradient(170deg, #FAF7F2 0%, var(--papier) 45%, #F2ECE3 100%);
}
.wolk{
  position:absolute; border-radius:50%;
  filter:blur(80px); will-change:transform;
}
.wolk--1{ width:44vmax; height:44vmax; left:-14vmax; top:-16vmax; opacity:.3;
  background:radial-gradient(circle at 45% 45%, rgba(245,37,31,.42), rgba(245,37,31,0) 68%);
  animation:dobber1 30s ease-in-out infinite; }
.wolk--2{ width:38vmax; height:38vmax; right:-14vmax; top:-8vmax; opacity:.26;
  background:radial-gradient(circle at 50% 50%, rgba(255,106,43,.45), rgba(255,106,43,0) 70%);
  animation:dobber2 35s ease-in-out infinite; }
.wolk--3{ width:42vmax; height:42vmax; left:-12vmax; bottom:-20vmax; opacity:.2;
  background:radial-gradient(circle at 50% 50%, rgba(179,18,13,.4), rgba(179,18,13,0) 70%);
  animation:dobber3 40s ease-in-out infinite; }
.wolk--4{ width:30vmax; height:30vmax; right:-8vmax; bottom:-12vmax; opacity:.22;
  background:radial-gradient(circle at 50% 50%, rgba(255,160,77,.42), rgba(255,160,77,0) 72%);
  animation:dobber4 33s ease-in-out infinite; }

@keyframes dobber1{ 0%,100%{ transform:translate3d(0,0,0) scale(1) }   50%{ transform:translate3d(7vmax,6vmax,0) scale(1.14) } }
@keyframes dobber2{ 0%,100%{ transform:translate3d(0,0,0) scale(1.08) }50%{ transform:translate3d(-6vmax,8vmax,0) scale(.94) } }
@keyframes dobber3{ 0%,100%{ transform:translate3d(0,0,0) scale(1) }   50%{ transform:translate3d(8vmax,-6vmax,0) scale(1.1) } }
@keyframes dobber4{ 0%,100%{ transform:translate3d(0,0,0) scale(.96) } 50%{ transform:translate3d(-5vmax,-7vmax,0) scale(1.08) } }

/* De korrel van je site, hier zachter en vermenigvuldigend zodat papier
   papier blijft en geen scherm wordt. */
.korrel{
  position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  animation:korrelen 7s steps(6) infinite;
}
@keyframes korrelen{
  0%,100%{ transform:translate(0,0) } 20%{ transform:translate(-4%,3%) }
  40%{ transform:translate(3%,-4%) } 60%{ transform:translate(-3%,-3%) }
  80%{ transform:translate(4%,4%) }
}

/* ── 4. De zwevende vormen ─────────────────────────────── */
.zwever{
  position:absolute; left:var(--x); top:var(--y);
  transform-style:preserve-3d;
  transform:
    translate3d(calc(-50% + var(--mx,0px) * var(--w,1)), calc(-50% + var(--my,0px) * var(--w,1)), var(--d))
    scale(var(--s,1));
  transition:transform .6s var(--ease-out);
  will-change:transform;
}
.zwever--bol,.zwever--bol2{ --w:1.6 }
.zwever--kubus{ --w:2.2 }
.zwever--kubus2{ --w:1.1 }
.zwever--ring{ --w:1.9 }
.zwever--piek{ --w:2.6 }

.kubus{
  position:relative; width:112px; height:112px;
  transform-style:preserve-3d;
  animation:tol 26s linear infinite, deinen 10s ease-in-out infinite;
}
.kubus__vlak{
  position:absolute; inset:0; border-radius:22px;
  background:linear-gradient(135deg, rgba(245,37,31,.16), rgba(255,106,43,.07));
  border:1px solid rgba(245,37,31,.16);
  box-shadow:inset 0 0 40px rgba(255,255,255,.5);
}
.kubus--geel .kubus__vlak{
  background:linear-gradient(135deg, rgba(255,160,77,.2), rgba(245,37,31,.06));
  border-color:rgba(255,106,43,.18);
}
.kubus__vlak--voor  { transform:translateZ(56px); }
.kubus__vlak--achter{ transform:rotateY(180deg) translateZ(56px); }
.kubus__vlak--rechts{ transform:rotateY(90deg)  translateZ(56px); }
.kubus__vlak--links { transform:rotateY(-90deg) translateZ(56px); }
.kubus__vlak--boven { transform:rotateX(90deg)  translateZ(56px); }
.kubus__vlak--onder { transform:rotateX(-90deg) translateZ(56px); }

.bol{
  width:150px; height:150px; border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 66% 72%, rgba(245,37,31,.5), rgba(255,160,77,.28) 62%, rgba(255,160,77,.12));
  box-shadow:0 30px 60px -24px rgba(245,37,31,.35), inset -10px -14px 34px rgba(179,18,13,.16);
  animation:deinen 12s ease-in-out infinite;
}
.bol--mint{
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 66% 72%, rgba(255,106,43,.42), rgba(255,201,150,.22) 66%);
  box-shadow:0 26px 54px -24px rgba(255,106,43,.3), inset -10px -14px 30px rgba(179,18,13,.12);
}

.ring{
  position:relative; width:140px; height:140px;
  transform-style:preserve-3d;
  animation:tol-x 22s linear infinite;
}
.ring i{
  position:absolute; inset:0; border-radius:50%;
  border:12px solid rgba(245,37,31,.13);
  border-right-color:rgba(255,106,43,.15);
  border-bottom-color:rgba(23,20,15,.05);
}
.ring i:nth-child(1){ transform:rotateY(0deg) }
.ring i:nth-child(2){ transform:rotateY(30deg) }
.ring i:nth-child(3){ transform:rotateY(60deg) }
.ring i:nth-child(4){ transform:rotateY(90deg) }
.ring i:nth-child(5){ transform:rotateY(120deg) }
.ring i:nth-child(6){ transform:rotateY(150deg) }

.piek{
  width:0; height:0;
  border-left:62px solid transparent;
  border-right:62px solid transparent;
  border-bottom:104px solid rgba(245,37,31,.14);
  filter:drop-shadow(0 22px 30px rgba(245,37,31,.16));
  animation:tol 30s linear infinite reverse, deinen 9s ease-in-out infinite;
}

@keyframes tol   { from{ transform:rotateX(-18deg) rotateY(0deg) }   to{ transform:rotateX(-18deg) rotateY(360deg) } }
@keyframes tol-x { from{ transform:rotateX(62deg) rotateZ(0deg) }    to{ transform:rotateX(62deg) rotateZ(360deg) } }
@keyframes deinen{ 0%,100%{ margin-top:0 } 50%{ margin-top:-26px } }

/* ── 5. Podium en de wissel tussen de pagina's ─────────── */
.podium{
  position:fixed; inset:0; z-index:1;
  perspective:1500px; perspective-origin:50% 42%;
}
.slide{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  padding:clamp(.75rem, 3vw, 2rem);
  padding-top:max(clamp(.75rem,3vw,2rem), env(safe-area-inset-top));
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(0,9%,-460px) rotateX(-11deg) scale(.92);
  transition:opacity .5s var(--ease), transform .8s var(--ease), visibility 0s .8s;
}
/* Geen transform-style:preserve-3d op de schermen. Op iOS (ook in de
   browser van Instagram) bleef een 3D-laag zichtbaar terwijl ze
   doorzichtig hoorde te zijn, en dan zag je twee kaarten over elkaar.
   Daarom ook visibility: een verborgen scherm is nu echt weg, en het
   actieve scherm ligt altijd bovenop (z-index). */
.slide[hidden]{ display:none; }
.slide.actief{ opacity:1; visibility:visible; transform:none; pointer-events:auto; z-index:2; transition-delay:0s; }
.slide.weg-onder{ opacity:0; transform:translate3d(0,9%,-460px)  rotateX(-11deg) scale(.92); }
.slide.weg-boven{ opacity:0; transform:translate3d(0,-9%,-460px) rotateX(11deg)  scale(.92); }

/* De kaart geeft haar kinderen zelf diepte, zonder preserve-3d (zie
   hierboven). */
.kaart{ perspective:1200px; }
.slide.actief .kaart > *{
  animation:opduiken .8s var(--ease) both;
  animation-delay:calc(var(--i,0) * 70ms + 120ms);
}
@keyframes opduiken{
  from{ opacity:0; transform:translate3d(0,28px,-70px) rotateX(-14deg); }
  to  { opacity:1; transform:none; }
}

/* ── 6. Het onthaal ────────────────────────────────────── */
/* Weg sinds 16 september 2026. De pagina opent nu meteen op stap 1: wie
   van de advertentie komt heeft de vraag al gelezen en hoeft niet nog
   eens te klikken om iets te mogen invullen. */

/* ── 7. De kaart ───────────────────────────────────────── */
.kaart{
  --kaart-pad:clamp(1.35rem, 4.5vw, 2.4rem);
  position:relative;
  width:min(600px, 100%);
  max-height:calc(100dvh - 5.5rem);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--papier-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--schaduw-l);
  padding:var(--kaart-pad);
  display:flex; flex-direction:column; gap:1.35rem;
}
/* De kaart is een flex-kolom met een maximumhoogte. Zonder deze regel mag de
   browser onderdelen samenknijpen om de inhoud te laten passen, en alles met
   overflow:hidden erin knijpt dan helemaal weg tot een streepje. Dat overkwam
   het voorbeeldvenster. De kaart scrollt toch, dus niemand hoeft te krimpen. */
.kaart > *{ flex:0 0 auto; }
.kaart--midden{ text-align:center; align-items:center; }
.kaart::-webkit-scrollbar{ width:10px; }
.kaart::-webkit-scrollbar-thumb{ background:rgba(245,37,31,.28); border-radius:20px; border:3px solid transparent; background-clip:padding-box; }
.kaart::-webkit-scrollbar-track{ background:transparent; }

.kaart__kop{ display:flex; flex-direction:column; gap:.5rem; }
.kaart--midden .kaart__kop{ align-items:center; }

.kaart__voet{
  display:flex; gap:.7rem; align-items:center; justify-content:flex-end;
  flex-wrap:wrap; padding-top:.35rem;
}
.kaart--scrollt .kaart__voet{
  position:sticky; bottom:0; z-index:2;
  margin:.2rem calc(-1 * var(--kaart-pad)) calc(-1 * var(--kaart-pad));
  padding:.9rem var(--kaart-pad) var(--kaart-pad);
  background:linear-gradient(180deg, rgba(255,253,250,0) 0%, rgba(255,253,250,.94) 34%, var(--papier-2) 100%);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

.titel{ font-size:clamp(1.6rem, 4.6vw, 2.2rem); }
.titel--klein{ font-size:clamp(1.35rem, 4vw, 1.7rem); }
.sub{ color:var(--ink-3); font-size:.94rem; line-height:1.6; }
.lead{ color:var(--ink-2); font-size:1.02rem; max-width:46ch; }
.lead b{ color:var(--ink); font-weight:600; }
.lead--klein{ font-size:.9rem; color:var(--ink-3); }

.badge{
  align-self:flex-start;
  font-family:var(--f-display); font-weight:600; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.34rem .8rem; border-radius:999px;
  color:var(--ember-deep);
  background:rgba(245,37,31,.08);
  border:1px solid rgba(245,37,31,.22);
}
.badge--paars,.badge--roze,.badge--mint{ color:var(--ember-deep); }

/* ── 8. Knoppen ────────────────────────────────────────── */
.knop{
  position:relative; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  height:54px; padding:0 1.7rem; border-radius:999px;
  font-family:var(--f-body); font-size:.92rem; font-weight:600; letter-spacing:.01em;
  white-space:nowrap; color:#fff;
  background:var(--grad-ember);
  box-shadow:0 10px 26px -12px rgba(245,37,31,.75);
  transition:transform .3s var(--ease), box-shadow .35s var(--ease), filter .3s;
  -webkit-tap-highlight-color:transparent;
}
.knop:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 16px 34px -14px rgba(245,37,31,.85); }
.knop:active{ transform:translateY(0); box-shadow:0 8px 18px -10px rgba(245,37,31,.8); }
.knop--groot{ height:60px; padding:0 2.1rem; font-size:1rem; }
.knop--klein{
  height:42px; padding:0 1.1rem; font-size:.84rem; align-self:flex-start;
  background:var(--papier-2); color:var(--ink-2); border:1px solid var(--line-2);
  box-shadow:none;
}
.knop--klein:hover{ border-color:rgba(245,37,31,.45); color:var(--ink); box-shadow:0 8px 20px -14px rgba(245,37,31,.6); }
.knop--klein .ikoon{ width:17px; height:17px; }
.knop--stil{
  background:transparent; color:var(--ink-2);
  border:1px solid var(--line-2); box-shadow:none;
  margin-right:auto;
}
.knop--stil:hover{ color:var(--ink); background:var(--glass); filter:none; box-shadow:none; }
.knop[disabled]{ opacity:.4; cursor:not-allowed; filter:grayscale(.5); }
.knop[disabled]:hover{ transform:none; box-shadow:none; }
.knop .pijl{ width:19px; height:19px; transition:transform .3s var(--veer); }
.knop:hover .pijl{ transform:translateX(4px); }
.knop.bezig{ pointer-events:none; }
.knop.bezig .knop__tekst::after{
  content:''; display:inline-block; width:1em; text-align:left;
  animation:puntjes 1.2s steps(4) infinite;
}
@keyframes puntjes{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* ── 9. Velden ─────────────────────────────────────────── */
.veld{ display:flex; flex-direction:column; gap:.45rem; }
.veld__vraag{
  font-family:var(--f-display); font-weight:600; font-size:1rem; letter-spacing:-.015em;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.moet{
  font-family:var(--f-body); font-style:normal; font-weight:600;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ember-deep); background:rgba(245,37,31,.08);
  border:1px solid rgba(245,37,31,.2);
  padding:.16rem .5rem; border-radius:999px;
}
.veld__in{
  width:100%; padding:.9rem 1rem; border-radius:12px;
  border:1px solid var(--line-2); background:var(--papier);
  color:var(--ink); font-size:.94rem; appearance:none;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.veld__in::placeholder{ color:var(--ink-3); opacity:.8; }
.veld__in:hover{ border-color:rgba(245,37,31,.3); }
.veld__in:focus{
  outline:none; border-color:var(--ember); background:var(--papier-2);
  box-shadow:0 0 0 3px rgba(245,37,31,.12);
}
.veld__in--groot{ resize:vertical; min-height:100px; line-height:1.65; font-family:var(--f-body); }
.veld__hint{ font-size:.82rem; color:var(--ink-3); line-height:1.55; }
.veld__fout{ font-size:.8rem; color:var(--ember-deep); font-weight:600; display:none; }
.veld.fout .veld__in{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(245,37,31,.14); }
.veld.fout .veld__fout{ display:block; }
.veld.fout{ animation:schud .45s; }
@keyframes schud{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }

.veld__paar{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; align-items:start; }
.veld__voor{ position:relative; display:flex; align-items:center; }
.veld__voor .ikoon{ position:absolute; left:.85rem; width:19px; height:19px; pointer-events:none; color:var(--ink-3); }
.veld__voor .veld__in{ padding-left:2.6rem; }
.ikoon--fb,.ikoon--ig{ color:var(--ink-3); }

.kies{ position:relative; }
.kies__pijl{ position:absolute; right:1rem; top:50%; transform:translateY(-50%); width:18px; height:18px; pointer-events:none; color:var(--ink-3); }
.veld__in--kies{ padding-right:2.8rem; cursor:pointer; }
.proef{
  font-size:1.5rem; line-height:1.35; padding:.8rem 1rem;
  background:var(--glass); border:1px dashed var(--line-2);
  border-radius:12px; color:var(--ink);
  animation:opduiken .5s var(--ease) both;
}

.valstrik{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.vink{ display:flex; align-items:center; gap:.7rem; cursor:pointer; font-size:.9rem; color:var(--ink-2); }
.vink input{ position:absolute; opacity:0; width:0; height:0; }
.vink__vak{
  width:24px; height:24px; flex:none; border-radius:7px;
  border:1px solid var(--line-2); background:var(--papier-2);
  display:grid; place-items:center; color:#fff;
  transition:background .25s, border-color .25s, transform .25s var(--veer);
}
.vink__vak svg{ width:14px; height:14px; stroke-width:3; opacity:0; transform:scale(.4); transition:opacity .2s, transform .3s var(--veer); }
.vink input:checked + .vink__vak{ background:var(--grad-ember); border-color:transparent; transform:scale(1.06); }
.vink input:checked + .vink__vak svg{ opacity:1; transform:scale(1); }
.vink input:focus-visible + .vink__vak{ outline:2px solid var(--ember); outline-offset:3px; }

/* ── 15. Voortgang ─────────────────────────────────────── */
.voortgang{
  position:fixed; z-index:3; left:50%; transform:translateX(-50%);
  top:max(.85rem, env(safe-area-inset-top));
  display:flex; align-items:center; gap:.7rem;
  background:rgba(255,253,250,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:999px; padding:.4rem .5rem .4rem .85rem;
  box-shadow:var(--schaduw);
  animation:opduiken .6s var(--ease) both;
}
.voortgang[hidden]{ display:none; }
.voortgang__balk{ width:104px; height:5px; border-radius:999px; background:rgba(23,20,15,.1); overflow:hidden; }
.voortgang__balk span{
  display:block; height:100%; width:33%; border-radius:999px;
  background:var(--grad-ember);
  transition:width .6s var(--ease);
}
.voortgang__tekst{ font-family:var(--f-display); font-weight:600; font-size:.74rem; color:var(--ink-3); padding-right:.5rem; }
.voortgang__tekst b{ color:var(--ink); }

/* ── 16. Meldingen ─────────────────────────────────────── */
.melding{
  font-size:.88rem; padding:.8rem 1rem; border-radius:12px;
  background:rgba(245,37,31,.07); border:1px solid rgba(245,37,31,.26);
  color:var(--ember-deep); font-weight:600;
  animation:opduiken .4s var(--ease) both;
}
.melding[hidden]{ display:none; }
.melding--test{
  background:rgba(255,160,77,.12); border-color:rgba(255,160,77,.4); color:#9A5A12;
}

/* ── 17. De slotpagina ─────────────────────────────────── */
.vink-groot svg{ width:92px; height:92px; margin-inline:auto; }
.vink-groot__rand{
  stroke:var(--ember); stroke-width:2;
  stroke-dasharray:145; stroke-dashoffset:145;
  animation:teken .9s var(--ease) .25s forwards;
}
.vink-groot__haak{
  stroke:var(--ember-deep); stroke-width:4;
  stroke-dasharray:44; stroke-dashoffset:44;
  animation:teken .5s var(--ease) .95s forwards;
}
@keyframes teken{ to{ stroke-dashoffset:0 } }

.handtekening{
  font-family:var(--f-display); font-weight:600; font-size:1.02rem; line-height:1.3;
  color:var(--ink); padding-top:.4rem;
}
.handtekening span{ display:block; font-family:var(--f-body); font-size:.8rem; color:var(--ink-3); font-weight:400; }

.feest{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.snipper{
  position:absolute; top:-8vh; width:10px; height:15px; border-radius:2px;
  animation:vallen linear forwards;
}
@keyframes vallen{
  0%  { transform:translate3d(0,-10vh,0) rotate3d(1,1,.4,0deg); opacity:1; }
  100%{ transform:translate3d(var(--zij,0px),112vh,0) rotate3d(1,1,.4,900deg); opacity:.9; }
}

/* ── 18. Kleiner scherm ────────────────────────────────── */
@media (max-width:560px){
  /* Geen plakkende knoppenbalk op een telefoon: die schoof over het laatste
     veld heen. De kaart scrolt gewoon, met de knoppen op het einde. */
  .kaart--scrollt .kaart__voet{ position:static; margin:0; padding:.35rem 0 0; background:none; border-radius:0; }
  .veld__paar{ grid-template-columns:1fr; }
  .kaart{ border-radius:20px; max-height:calc(100dvh - 4rem); gap:1.05rem; }
  .kaart__voet{ gap:.5rem; }
  .knop{ height:50px; padding:0 1.3rem; font-size:.88rem; }
  .knop--groot{ height:56px; width:100%; }
  .knop--stil{ padding:0 1.1rem; }
  .tonen{ grid-template-columns:1fr 1fr; }
  .zwever--kubus2,.zwever--bol2{ display:none; }
  .voortgang{ padding:.35rem .45rem .35rem .7rem; }
}
@media (max-width:340px){
  .tonen{ grid-template-columns:1fr; }
  .kleuren{ gap:.5rem; }
}
@media (min-height:900px) and (min-width:700px){
  .kaart{ padding:2.6rem; }
}

/* ── 19. Rustiger als de bezoeker dat vraagt ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.12s !important;
  }
  .wolk,.kubus,.bol,.ring,.piek,.korrel{ animation:none !important; }
  .slide,.slide.weg-onder,.slide.weg-boven{ transform:none; }
}

/* ── 20. Eigen aan de review ───────────────────────────── */
.klaar__link{
  display:inline-block; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line-2); padding-bottom:.1rem;
  transition:border-color .3s;
}
.klaar__link:hover{ border-color:var(--ember); }
.geen-js{
  position:relative; z-index:5; max-width:520px; margin:3rem auto; padding:1.2rem 1.4rem;
  background:var(--papier-2); border:1px solid var(--line-2); border-radius:var(--r);
  font-size:.95rem; line-height:1.6;
}
.lead a{ color:var(--ink); border-bottom:1px solid var(--line-2); text-decoration:none; }
.lead a:hover{ border-color:var(--ember); }
.veld__hint a{ color:var(--ink-2); border-bottom:1px solid var(--line-2); text-decoration:none; }
.veld__hint a:hover{ border-color:var(--ember); color:var(--ink); }
/* Twee schermen, weinig velden: de kaart mag compacter dan bij de
   vragenlijst, dan past stap 2 ook op een laptopscherm zonder te scrollen. */
.kaart{ gap:1.1rem; }
.veld__in--groot{ min-height:76px; }
.kaart{ gap:1rem; }
.melding{ padding:.65rem .9rem; }

/* ── 21. Het scherm "Wat ik bekijk" ─────────────────────── */
/* Acht punten in twee kolommen, elk één regel uitleg. Op een telefoon
   onder elkaar. Dit scherm zit achter de knop "Wat bekijk ik?" op stap 1. */
.punten{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.15rem 1.4rem; }
.punten li{ display:grid; grid-template-columns:1.6rem 1fr; gap:.15rem .35rem; padding:.55rem 0; border-top:1px solid var(--line); }
.punten li:nth-child(-n+2){ border-top:0; }
.punten i{ font-family:var(--f-display); font-style:normal; font-weight:800; font-size:.72rem; letter-spacing:.06em; color:var(--ember); padding-top:.2rem; }
.punten b{ font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:-.015em; line-height:1.25; }
.punten span{ grid-column:2; font-size:.82rem; color:var(--ink-3); line-height:1.45; }
@media (min-width:700px){ .kaart--punten{ width:min(720px, 100%); } }
@media (max-width:560px){
  .punten{ grid-template-columns:1fr; gap:0; }
  .punten li:nth-child(2){ border-top:1px solid var(--line); }
}
/* Elke rij van het rooster is zo hoog als de hoogste; de tekst hoort dan
   bovenaan te blijven, niet in het midden te zakken. */
.punten li{ align-content:start; }

/* ── 22. Rustiger, sinds 16 september 2026 (avond) ───────── */
/* De review opent bijna altijd in het venster van Instagram op een
   telefoon. De zwevende vormen en de korrel staan niet meer in de html;
   de wolken blijven, op de helft, en zonder dobberen. Op zo'n klein
   scherm was elke beweging naast het formulier ruis. */
.ruimte--stil .wolk{ animation:none; }
.ruimte--stil .wolk--1{ opacity:.16; }
.ruimte--stil .wolk--2{ opacity:.14; }
.ruimte--stil .wolk--3{ opacity:.1; }
.ruimte--stil .wolk--4{ opacity:.12; }

/* De belofte bovenaan stap 1: iets groter en donkerder dan een gewone
   ondertitel, want dit is wat iemand van de advertentie moet herkennen. */
.sub--belofte{ font-size:1rem; color:var(--ink-2); max-width:44ch; }
.sub--belofte b{ color:var(--ink); font-weight:600; }