/* Doe de designcheck (Lorenzo 11-10-2026). Een echte MacBook Pro 16 en iPhone 16 Pro Max, recht van voren en op
   dezelfde schaal naast elkaar (renders: CC/product-models/front.py). Het scherm van de MacBook is het formulier; links
   op dat scherm hun huidige site, na versturen schuift die naar het midden voor de analyse en dan het bedankje.
   De telefoon toont altijd de DesignCheck-hero op mobiel. Gebruikt de kleuren van de pagina (--a-*). */

.dct{ --dct-inkt:#1D1D1F; --dct-grijs:#5C5C61; --dct-blauw:var(--a-blauw,#6FB4FF); --dct-blauw-tekst:var(--a-blauw-tekst,#1F6CC2);
  --dct-lijn:#6b9dd5; max-width:1360px; }
.dct.rp-sectie--eerste{ padding-top:clamp(80px,9vw,140px); }      /* wat lucht onder de hero (Lorenzo 11-10) */
.dct__kop{ text-align:center; }
/* het logo op het scherm, wit zoals in de kop van de site (.nav__brand): blauwe streep alleen onder "check", blauwe punt */
.dct-logo{ display:inline-flex; align-items:baseline; font-weight:700; letter-spacing:-.035em; white-space:nowrap; color:#fff; }
.dct-logo__check{ position:relative; }
.dct-logo__check::after{ content:""; position:absolute; left:.02em; right:0; bottom:-.07em; height:max(2px,.075em); border-radius:9px; background:#6FB4FF; }
.dct-logo__punt{ width:.2em; height:.2em; margin-left:.1em; border-radius:50%; background:#6FB4FF; box-shadow:0 0 .3em rgba(111,180,255,.55); }
.dct__sub{ text-align:center; color:var(--a-tekst2,#6E6E73); font-size:clamp(18px,1.5vw,21px); line-height:1.42;
  max-width:40ch; margin:18px auto 0; text-wrap:pretty; }

/* ---------- de apparaten: een render, de schermen er met matrix3d op (js/designcheck.js zet de transform) ----------
   Het scherm is een vlak van 1280 x 828 px (de verhouding van het beeldvlak, 344,6 x 223,1 mm), de telefoon 880 x 1912
   (iPhone 16 Pro Max, 2x de punten): groot getekend en door de transform verkleind, zodat inzoomen scherp blijft
   (Lorenzo 11-10). Zonder JS of tot de maat bekend is: onzichtbaar. */
/* op 100% passen titel, computer en telefoon samen in een venster van 918 hoog (Lorenzo 11-10), en bij inzoomen groeien ze
   gewoon mee: een vaste breedte, niet de vensterhoogte (die krimpt bij inzoomen) */
.dct-podium{ position:relative; width:min(100%, 860px); margin:clamp(20px,2.6vw,40px) auto 0; }
.dct-podium__beeld{ position:relative; z-index:3; display:block; width:100%; height:auto; aspect-ratio:var(--dct-beeld,1.9);
  pointer-events:none; }   /* de render ligt boven de schermen: zijn beeldvlakken zijn eruit geknipt (beeld.py), de rand is die van de render */
.dct-scherm, .dct-telscherm{ position:absolute; left:0; top:0; transform-origin:0 0; visibility:hidden; overflow:hidden; background:#000; }
.dct-podium.is-gezet .dct-scherm, .dct-podium.is-gezet .dct-telscherm{ visibility:visible; }
.dct-scherm{ width:1280px; height:828px; border-radius:1.1% 1.1% 0 0 / 1.7% 1.7% 0 0; container-type:size; isolation:isolate; }
.dct-telscherm{ width:880px; height:1912px; border-radius:14.09% / 6.49%; pointer-events:none; container-type:size; display:flex; flex-direction:column; background:#0B0F19; }
/* de telefoon: iOS-statusbalk als HTML (scherp op elke maat), daaronder de DesignCheck-hero of hun mobiele site.
   Maten in cqw van een scherm van 440 pt breed: 1 pt = 0,2273cqw. */
.dct-telscherm__balk{ position:relative; z-index:2; flex:none; height:14.09cqw; display:grid; grid-template-columns:1fr 31cqw 1fr;
  align-items:center; padding-top:1.6cqw; color:#fff; background:#0B0F19; transition:background-color .5s, color .5s; }
.dct-telscherm.is-site .dct-telscherm__balk{ background:#fff; color:#000; }
.dct-telscherm__tijd{ justify-self:center; font:600 3.86cqw/1 var(--sf); letter-spacing:-.01em; font-variant-numeric:tabular-nums; padding-left:2cqw; }
.dct-telscherm__iconen{ justify-self:center; width:17.5cqw; height:auto; padding-right:1cqw; }
.dct-telscherm__eiland{ position:absolute; left:50%; top:2.5cqw; width:28.6cqw; height:8.4cqw; transform:translateX(-50%); border-radius:99px;
  background:#000; z-index:3; }
.dct-telscherm__vlak{ position:relative; flex:1; min-height:0; overflow:hidden; }
.dct-telscherm__vlak img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.dct-telscherm__site{ opacity:0; transition:opacity .6s; background:#fff; }
.dct-telscherm.is-site .dct-telscherm__site{ opacity:1; }
/* laden: een witte pagina zoals Safari, blauwe laadbalk onder de statusbalk, draaiertje en hun adres */
.dct-telscherm.is-laden .dct-telscherm__balk{ background:#fff; color:#000; }
.dct-telscherm__laden{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3.4cqw;
  background:#fff; color:#8E8E93; font:500 3.6cqw/1.2 var(--sf); opacity:0; transition:opacity .35s; }
.dct-telscherm.is-laden .dct-telscherm__laden{ opacity:1; }
.dct-telscherm__laden::before{ content:""; position:absolute; left:0; top:0; height:.7cqw; width:100%; background:var(--dct-blauw);
  transform-origin:left; transform:scaleX(.05); }
.dct-telscherm.is-laden .dct-telscherm__laden::before{ animation:dctTelLaad 9s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes dctTelLaad{ to{ transform:scaleX(.92); } }
.dct-telscherm__laden i{ width:7cqw; height:7cqw; border-radius:50%; border:.8cqw solid #E5E5EA; border-top-color:var(--dct-blauw);
  animation:dctDraai .8s linear infinite; }
.dct-notch{ position:absolute; left:50%; top:0; width:5.7%; height:3.3%; transform:translateX(-50%); background:#000;
  border-radius:0 0 1.1cqw 1.1cqw; z-index:20; pointer-events:none; }
/* een zweem glas: licht van linksboven, zoals de studio van de render */
.dct-glans{ position:absolute; inset:0; z-index:19; pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 28%,transparent 46%); }

/* ---------- in rust: de hero-foto met Start ---------- */
.dct-rust{ position:absolute; inset:0; display:grid; place-items:center; cursor:pointer; z-index:10;
  transition:opacity .55s var(--uit), visibility .55s; }
.dct-rust img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02);
  transition:transform 1.2s var(--uit), filter .6s; }
.dct-rust::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,18,31,.08),rgba(4,18,31,.42)); }
.dct-rust__in{ position:relative; z-index:1; display:grid; justify-items:center; gap:2.6cqh; text-align:center; color:#fff; }
.dct-rust__titel{ margin:0; font:700 6.4cqw/1 var(--sf); letter-spacing:-.035em; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.dct-start{ display:inline-flex; align-items:center; gap:.6em; font:600 1.9cqw/1 var(--sf); letter-spacing:-.015em;
  padding:1em 1.7em; border-radius:999px; border:0; cursor:pointer; color:#04121F; background:rgba(255,255,255,.94);
 
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -8px rgba(0,0,0,.35);
  transform:scale(.94); opacity:.9; transition:transform .45s var(--veer), opacity .3s, background-color .2s; }
.dct-start svg{ width:1em; height:1em; transition:transform .4s var(--veer); }
.dct-rust:hover img{ transform:scale(1.06); filter:saturate(1.1); }
.dct-rust:hover .dct-start, .dct .dct-start:focus-visible{ transform:scale(1.04); opacity:1; background:#fff; }
.dct-rust:hover .dct-start svg{ transform:translateX(3px); }
.dct .dct-start:focus-visible{ outline:3px solid var(--dct-blauw); outline-offset:4px; border-radius:999px; }
.dct-rust__klein{ margin:0; font:500 max(11px,1.25cqw)/1.3 var(--sf); color:rgba(255,255,255,.82); letter-spacing:-.01em; }
.dct.is-open .dct-rust{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- open: een venster, links hun site, rechts de vragen ---------- */
.dct-app{ position:absolute; inset:0; display:grid; grid-template-rows:auto minmax(0,1fr); background:#F5F5F7;
  font-size:2.3cqw; color:var(--dct-inkt); }
.dct-app__balk{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:2.7em; padding:0 1em;
  margin-top:2.5cqw; background:#ECECEF; border-bottom:1px solid rgba(0,0,0,.08); font:500 .78em/1 var(--sf); color:var(--dct-grijs); }
.dct-app__lampjes{ display:flex; gap:.5em; }
.dct-app__lampjes i{ width:.95em; height:.95em; border-radius:50%; background:#FF5F57; box-shadow:0 0 0 .5px rgba(0,0,0,.12) inset; }
.dct-app__lampjes i:nth-child(2){ background:#FEBC2E; } .dct-app__lampjes i:nth-child(3){ background:#28C840; }
.dct-app__titel{ font-weight:600; color:var(--dct-inkt); letter-spacing:-.01em; }
.dct-app__stap{ justify-self:end; font-variant-numeric:tabular-nums; }
.dct-app__vlak{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0;
  transition:grid-template-columns .9s var(--uit); }

/* links: hun huidige site in een browser */
.dct-links{ position:relative; display:flex; flex-direction:column; gap:1em; padding:1.5em 1.2em 1.5em 1.6em; min-height:0;
  transition:padding .9s var(--uit); }
.dct-browser{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; background:#fff; border-radius:.75em;
  overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 18px 40px -24px rgba(16,40,80,.3);
  transition:transform .9s var(--uit), box-shadow .6s; }
.dct-browser__balk{ display:flex; padding:.6em .9em; border-bottom:1px solid rgba(0,0,0,.06); background:#FAFAFB; }
.dct-browser__balk span{ flex:1; display:flex; align-items:center; justify-content:center; gap:.4em; min-width:0;
  background:#EFEFF2; border-radius:.5em; padding:.36em .8em; color:var(--dct-grijs); font-size:.8em; white-space:nowrap; }
.dct-browser__balk b{ color:var(--dct-inkt); font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.dct-browser__balk svg{ width:.9em; height:.9em; flex:none; }
.dct-browser__vlak{ position:relative; flex:1; min-height:0; overflow:hidden; background:#F7F7F9; }
.dct-browser__shot{ position:absolute; left:0; top:0; width:100%; height:auto; opacity:0; transition:opacity .6s, transform 7s cubic-bezier(.45,0,.3,1); }
.dct-browser[data-stand="klaar"] .dct-browser__shot{ opacity:1; }
.dct-browser__tekst{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:.35em;
  margin:0; padding:1em; text-align:center; color:var(--dct-grijs); font-size:.92em; }
.dct-browser__tekst span{ font-size:.92em; color:#8E8E93; }
.dct-browser[data-stand="leeg"] .dct-browser__tekst--leeg, .dct-browser[data-stand="laden"] .dct-browser__tekst--laden,
.dct-browser[data-stand="mislukt"] .dct-browser__tekst--mislukt, .dct-browser[data-stand="geen"] .dct-browser__tekst--geen{ display:flex; }
.dct-browser__tekst--geen{ color:var(--dct-inkt); font-weight:500; }
/* laden: een rustige glans over een lege pagina */
.dct-browser[data-stand="laden"] .dct-browser__vlak{ background:linear-gradient(100deg,#F3F4F6 30%,#FAFBFC 50%,#F3F4F6 70%) 0 0/300% 100%;
  animation:dctGlans 1.4s linear infinite; }
@keyframes dctGlans{ to{ background-position:-150% 0; } }
.dct-browser__tekst--laden i{ width:1.1em; height:1.1em; border-radius:50%; border:2px solid #D1D1D6; border-top-color:var(--dct-blauw);
  animation:dctDraai .8s linear infinite; margin-bottom:.3em; }
@keyframes dctDraai{ to{ transform:rotate(360deg); } }

/* rechts: de vragen */
.dct-vragen{ display:flex; flex-direction:column; min-height:0; min-width:0; padding:1.3em 1.4em 1em .6em;
  transition:opacity .4s; }
.dct-form{ display:flex; flex-direction:column; flex:1; min-height:0; }
.dct-voortgang{ display:grid; grid-template-columns:repeat(4,1fr); gap:.35em; margin-bottom:1.05em; }
.dct-voortgang i{ height:.22em; border-radius:9px; background:#DCDDE2; overflow:hidden; position:relative; }
.dct-voortgang i::after{ content:""; position:absolute; inset:0; background:var(--dct-blauw); transform:scaleX(0);
  transform-origin:left; transition:transform .5s var(--uit); }
.dct-voortgang i.aan::after{ transform:scaleX(1); }
.dct-stap{ display:none; flex-direction:column; gap:.75em; border:0; margin:0; padding:0; min-width:0; min-height:0; }
.dct-stap.is-nu{ display:flex; animation:dctStap .45s var(--uit) both; }
.dct-stap.is-terug{ animation-name:dctStapTerug; }
@keyframes dctStap{ from{ opacity:0; transform:translateX(18px); } }
@keyframes dctStapTerug{ from{ opacity:0; transform:translateX(-18px); } }
/* legend staat buiten de flex van de fieldset: laten zweven, dan telt de gap wel */
.dct-stap legend{ float:left; width:100%; padding:0; font:600 1.4em/1.1 var(--sf); letter-spacing:-.035em; text-wrap:balance; }
.dct-stap legend + *{ clear:both; }
.dct-stap legend + p{ margin:-.55em 0 .1em; color:var(--dct-grijs); font-size:.92em; line-height:1.4; }

/* velden als een gegroepeerde lijst, zoals Instellingen; geen ring om het veld, de cursor is genoeg */
.dct-groep{ background:#fff; border-radius:.8em; box-shadow:0 0 0 1px rgba(0,0,0,.05); overflow:hidden; }
.dct-veld{ display:grid; grid-template-columns:5.6em minmax(0,1fr); align-items:center; gap:.6em; padding:0 1em;
  min-height:2.6em; position:relative; }
.dct-veld + .dct-veld::before{ content:""; position:absolute; top:0; left:1em; right:0; border-top:1px solid rgba(0,0,0,.08); }
.dct-veld label{ font-size:.92em; color:var(--dct-inkt); }
.dct .dct-veld input{ font:inherit; font-size:.95em; color:var(--dct-inkt); border:0; outline:0; box-shadow:none; background:none;
  padding:.7em 0; min-width:0; width:100%; border-radius:0; -webkit-appearance:none; appearance:none; caret-color:var(--dct-blauw-tekst); }
.dct .dct-veld input:focus, .dct .dct-veld input:focus-visible{ outline:none; box-shadow:none; }
.dct-veld input::placeholder{ color:#AEAEB2; }
.dct-veld--url{ grid-template-columns:auto minmax(0,1fr); gap:.15em; }
.dct-veld--url span{ color:#AEAEB2; font-size:.95em; }
.dct-fout{ color:#D70015; font-size:.85em; min-height:1.2em; margin:-.4em 0 0 .2em; }
.dct-fout:empty{ min-height:0; margin:0; }
.dct-link{ align-self:flex-start; border:0; background:none; padding:.2em 0; font:inherit; font-size:.88em;
  color:var(--dct-blauw-tekst); cursor:pointer; }
.dct-link:hover{ text-decoration:underline; }

/* keuzes als lijst met vinkjes */
.dct-keuzes{ background:#fff; border-radius:.8em; box-shadow:0 0 0 1px rgba(0,0,0,.05); overflow:hidden; }
.dct-keuze{ position:relative; display:flex; align-items:center; gap:.7em; padding:.62em .9em; cursor:pointer; font-size:.92em; min-width:0; line-height:1.2; }
.dct-keuze + .dct-keuze::before{ content:""; position:absolute; top:0; left:2.9em; right:0; border-top:1px solid rgba(0,0,0,.08); }
.dct-keuze input{ position:absolute; opacity:0; pointer-events:none; }
.dct-keuze__vink{ width:1.25em; height:1.25em; border-radius:50%; flex:none; box-shadow:0 0 0 1.5px #C7C7CC inset;
  display:grid; place-items:center; transition:background-color .2s, box-shadow .2s; }
.dct-keuze__vink svg{ width:.75em; height:.75em; stroke:#fff; stroke-width:3; fill:none; stroke-dasharray:20; stroke-dashoffset:20;
  transition:stroke-dashoffset .3s var(--uit) .05s; }
.dct-keuze input:checked + .dct-keuze__vink{ background:var(--dct-blauw); box-shadow:none; }
.dct-keuze input:checked + .dct-keuze__vink svg{ stroke-dashoffset:0; }
.dct-keuze input:focus-visible + .dct-keuze__vink{ outline:2px solid var(--dct-blauw); outline-offset:2px; }
.dct-keuzes--kolom{ display:grid; grid-template-columns:1fr 1fr; }
.dct-scherm .dct-keuzes--kolom .dct-keuze{ font-size:.86em; gap:.55em; padding-inline:.75em; }
.dct-keuzes--kolom .dct-keuze:nth-child(2)::before{ display:none; }
.dct-keuzes--kolom .dct-keuze:nth-child(odd)::after{ content:""; position:absolute; right:0; top:.6em; bottom:.6em; border-right:1px solid rgba(0,0,0,.08); }
.dct-keuzes--kolom .dct-keuze + .dct-keuze::before{ left:1em; }
.dct-klein{ margin:0; color:var(--dct-grijs); font-size:.78em; line-height:1.4; }
.dct-klein a{ color:var(--dct-blauw-tekst); }

.dct-nav{ margin-top:auto; padding-top:.7em; display:flex; align-items:center; gap:.7em; }
.dct-terug{ width:2.7em; height:2.7em; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:#fff; color:var(--dct-inkt); box-shadow:0 0 0 1px rgba(0,0,0,.08); transition:transform .2s var(--veer); }
.dct-terug svg, .dct-verder svg{ width:1em; height:1em; }
.dct-terug[hidden]{ display:grid; visibility:hidden; }
.dct-terug:active, .dct-verder:not(:disabled):active{ transform:scale(.96); }
.dct-verder{ margin-left:auto; display:inline-flex; align-items:center; gap:.55em; height:2.7em; padding:0 1.35em;
  border-radius:999px; border:0; cursor:pointer; font:600 .98em/1 var(--sf); letter-spacing:-.015em; color:#04121F;
  background:var(--glas-blauw-vlak,rgba(98,170,252,.86)); box-shadow:var(--glas-blauw,0 1px 0 rgba(255,255,255,.4) inset);
  transition:background-color .25s, color .25s, box-shadow .25s, transform .3s var(--veer); }
.dct-verder:not(:disabled):hover{ background:rgba(86,162,250,.95); }
/* op slot tot de stap compleet is */
.dct-verder:disabled{ cursor:not-allowed; background:#E3E4E8; color:#A1A1A6; box-shadow:none; }
.dct-verder.is-bezig{ cursor:progress; }
.dct .dct-verder:focus-visible, .dct .dct-terug:focus-visible, .dct .dct-link:focus-visible{ outline:2px solid var(--dct-blauw); outline-offset:3px; border-radius:999px; }

/* ---------- versturen: hun site naar het midden, de analyse ---------- */
.dct.is-analyse .dct-app__vlak{ grid-template-columns:minmax(0,1fr) minmax(0,0fr); }
.dct.is-analyse .dct-vragen{ opacity:0; pointer-events:none; overflow:hidden; padding-left:0; padding-right:0; }
.dct.is-analyse .dct-links{ padding:1.6em 17% 1.4em; }
.dct.is-analyse .dct-browser{ box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 30px 60px -26px rgba(16,40,80,.42); }
/* de scanlijn en de punten die we bekijken */
.dct-scan{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; }
.dct.is-analyse .dct-scan{ opacity:1; }
.dct.is-analyse .dct-scan::before{ content:""; position:absolute; left:0; right:0; height:26%; top:-26%;
  background:linear-gradient(180deg,transparent,rgba(111,180,255,.16) 70%,rgba(111,180,255,.42));
  border-bottom:1.5px solid var(--dct-blauw); animation:dctScan 2.2s cubic-bezier(.45,0,.25,1) .5s infinite; }
@keyframes dctScan{ to{ top:100%; } }
.dct-punt{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:.45em; white-space:nowrap;
  animation:dctPunt .5s var(--veer) both; }
.dct-punt i{ position:relative; width:.8em; height:.8em; border-radius:50%; background:var(--dct-blauw); box-shadow:0 0 0 .22em #fff, 0 2px 8px rgba(0,0,0,.25); }
.dct-punt i::after{ content:""; position:absolute; inset:-.2em; border-radius:50%; border:2px solid var(--dct-blauw); animation:dctGolf 1.6s ease-out infinite; }
.dct-punt span{ font:600 .74em/1 var(--sf); padding:.45em .7em; border-radius:99px; color:var(--dct-inkt); background:rgba(255,255,255,.96);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.28); }
.dct-punt.is-af i{ background:#34C759; } .dct-punt.is-af i::after{ display:none; }
@keyframes dctPunt{ from{ opacity:0; transform:translate(-50%,-50%) scale(.6); } }
@keyframes dctGolf{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(2.6); opacity:0; } }
/* voortgang en de lijst met wat we nakijken, onder de site */
.dct-analyse{ display:none; gap:.7em; }
.dct.is-analyse .dct-analyse{ display:grid; animation:dctStap .5s var(--uit) .4s both; animation-name:dctOp; }
@keyframes dctOp{ from{ opacity:0; transform:translateY(10px); } }
.dct-analyse__balk{ height:.28em; border-radius:9px; background:#DCDDE2; overflow:hidden; }
.dct-analyse__balk i{ display:block; height:100%; width:0; background:var(--dct-blauw); border-radius:9px; transition:width .9s var(--uit); }
.dct-analyse__lijst{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.4em 1.2em;
  font-size:.82em; color:#AEAEB2; }
.dct-analyse__lijst li{ display:flex; align-items:center; gap:.4em; transition:color .3s; }
.dct-analyse__lijst li::before{ content:""; width:.75em; height:.75em; border-radius:50%; box-shadow:0 0 0 1.5px #D1D1D6 inset; }
.dct-analyse__lijst li.is-bezig{ color:var(--dct-inkt); }
.dct-analyse__lijst li.is-bezig::before{ box-shadow:none; border:1.5px solid #D1D1D6; border-top-color:var(--dct-blauw); animation:dctDraai .7s linear infinite; }
.dct-analyse__lijst li.is-af{ color:var(--dct-inkt); }
.dct-analyse__lijst li.is-af::before{ box-shadow:none; background:#34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2L9 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }

/* ---------- klaar: het bedankje midden op het scherm ---------- */
.dct-klaar{ display:none; }
.dct.is-klaar .dct-form{ display:none; }
.dct.is-klaar .dct-klaar{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8em; text-align:center; padding:2em; background:#F5F5F7; animation:dctKlaar .7s var(--uit) both; }
/* (geen backdrop-filter: die werkt niet in een vlak met een 3D-transform en liet de analyse er vlekkerig doorheen zien) */
.dct.is-klaar .dct-vragen{ opacity:1; }
@keyframes dctKlaar{ from{ opacity:0; } }
.dct-klaar > *{ animation:dctOp .6s var(--uit) both; }
.dct-klaar > :nth-child(2){ animation-delay:.12s; } .dct-klaar > :nth-child(3){ animation-delay:.2s; } .dct-klaar > :nth-child(4){ animation-delay:.28s; }
.dct-klaar__vink{ width:3.4em; height:3.4em; border-radius:50%; background:#34C759; display:grid; place-items:center; }
.dct-klaar__vink svg{ width:1.6em; height:1.6em; stroke:#fff; stroke-width:2.6; fill:none; stroke-dasharray:30; stroke-dashoffset:30;
  animation:dctVink .55s var(--uit) .35s forwards; }
@keyframes dctVink{ to{ stroke-dashoffset:0; } }
.dct-klaar h3{ margin:0; font:600 2.3em/1.05 var(--sf); letter-spacing:-.045em; text-wrap:balance; }
.dct-klaar p{ margin:0; color:var(--dct-grijs); line-height:1.45; max-width:30em; font-size:1.05em; text-wrap:pretty; }
.dct-klaar p b{ color:var(--dct-inkt); font-weight:600; }
.dct-klaar__groet{ margin-top:.5em !important; color:var(--dct-inkt) !important; font-weight:500; }
.dct-klaar__groet span{ display:block; color:var(--dct-grijs); font-weight:400; font-size:.92em; }

/* knoppen en status die alleen in het blad op de telefoon bestaan */
.dct-dicht, .dct-sluit, .dct-bladstatus{ display:none; }
.dct-feiten{ display:none; }

/* ---------- telefoon: de vragen in een blad van onderen (Lorenzo 11-10) ----------
   Start scrolt niet weg: de pagina zet de apparaten net onder de kopbalk en zet daar vast, het blad komt omhoog in de
   ruimte eronder (--dct-blad-h, js/designcheck.js). Hun site verschijnt boven op de schermen, de analyse loopt op de
   computer en in het blad, het bedankje staat in het blad. Alles op één scherm, niets scrollen. */
.dct-mobielvak{ display:none; }
@media (max-width:820px){
  /* alles een stuk omhoog, onder de apparaten de kerngegevens (Lorenzo 11-10) */
  /* de vrije ruimte gelijk verdeeld boven de titel en boven de kerngegevens: titel los van de sectie erboven, de tegels
     net boven de chatknop (Lorenzo 11-10) */
  .rapport > .dct.rp-sectie--eerste{ padding-top:18px; padding-bottom:88px; justify-content:flex-start; }
  .rapport > .dct > .dct__kop{ margin-top:auto; }
  .dct-feiten{ display:grid; gap:10px; margin-top:auto; padding-top:16px; }
  .dct-feiten dl{ margin:0; padding:2px 16px; }
  .dct-feiten{ transition:opacity .35s; }
  .dct.is-open:not(.is-blad-dicht) .dct-feiten{ opacity:0; visibility:hidden; pointer-events:none; }   /* blad open: niet tussen apparaten en blad door kijken */
  .dct-feiten div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px solid var(--a-lijn); }
  .dct-feiten div:last-child{ border-bottom:0; }
  .dct-feiten dt{ color:var(--a-tekst2); font-size:14px; }
  .dct-feiten dd{ margin:0; font-weight:500; font-size:14px; text-align:right; }
  .dct__kop{ font-size:clamp(32px,9vw,42px); }
  .dct__sub{ font-size:16px; margin-top:12px; }
  /* de apparaten van rand tot rand: het scherm voelt vol, en het blad houdt meer ruimte over boven het toetsenbord */
  .rapport > .dct > .dct-podium{ width:calc(100% + 2 * var(--a-marge)); max-width:none; margin:14px calc(-1 * var(--a-marge)) 0; }
  .dct-app__vlak, .dct.is-analyse .dct-app__vlak{ grid-template-columns:minmax(0,1fr); }
  .dct-links, .dct.is-analyse .dct-links{ padding:.9em 1em; }
  .dct-rust__titel{ font-size:9cqw; }
  .dct-start{ font-size:3.4cqw; }
  .dct-rust__klein{ display:none; }
  .dct-analyse__lijst li:nth-child(n+4){ display:none; }

  .dct-mobielvak{ display:block; position:fixed; left:0; right:0; bottom:var(--dct-kb,0px); z-index:400;
    transform:translateY(110%); transition:transform .5s var(--uit); pointer-events:none; }
  .dct.is-open:not(.is-blad-dicht) .dct-mobielvak{ transform:none; pointer-events:auto; }
  .dct-mobielvak .dct-vragen{ position:relative; height:var(--dct-blad-h,62svh); overflow-y:auto; overscroll-behavior:contain;
    background:#fff; border-radius:26px 26px 0 0; padding:22px 20px calc(16px + env(safe-area-inset-bottom,0px)); font-size:16px;
    box-shadow:0 -1px 0 rgba(0,0,0,.05), 0 -18px 50px -12px rgba(16,30,56,.28); }
  .dct-mobielvak .dct-vragen::before{ content:""; position:absolute; left:50%; top:8px; width:38px; height:5px; margin-left:-19px;
    border-radius:9px; background:#D1D1D6; }
  .dct-mobielvak .dct-dicht{ display:grid; place-items:center; position:absolute; right:14px; top:14px; z-index:2; width:32px; height:32px;
    border:0; border-radius:50%; background:#F2F2F7; color:#3A3A3C; cursor:pointer; }
  .dct-mobielvak .dct-dicht svg{ width:14px; height:14px; }
  .dct-mobielvak .dct-voortgang{ margin:4px 44px 16px 0; }
  .dct-mobielvak .dct-stap{ gap:12px; }
  .dct-mobielvak .dct-stap legend{ font-size:23px; }
  .dct-mobielvak .dct-stap legend + p{ margin:0; font-size:14px; }
  .dct-mobielvak .dct-groep, .dct-mobielvak .dct-keuzes, .dct-mobielvak .dct-terug{ background:#F5F5F7; box-shadow:none; }
  .dct-mobielvak .dct-veld{ min-height:46px; grid-template-columns:5.2em minmax(0,1fr); }
  .dct-mobielvak .dct-veld--url{ grid-template-columns:auto minmax(0,1fr); }
  .dct .dct-mobielvak .dct-veld input{ font-size:16px; padding:11px 0; }   /* iOS zoomt in onder 16 px */
  .dct-mobielvak .dct-keuze{ padding:11px 12px; font-size:15px; }
  .dct-mobielvak .dct-keuzes--kolom .dct-keuze{ font-size:14px; padding:11px 10px; gap:8px; }
  .dct-mobielvak .dct-nav{ padding-top:14px; }
  .dct-mobielvak .dct-verder, .dct-mobielvak .dct-terug{ height:46px; }
  .dct-mobielvak .dct-terug{ width:46px; }
  html.dct-blad-open, html.dct-blad-open body{ overflow:hidden; overscroll-behavior:none; }
  html.dct-blad-open #dcb-host{ display:none; }                  /* de chatknop lag over Volgende */

  /* analyse: in het blad een draaier en dezelfde punten als op de computer */
  .dct.is-analyse:not(.is-klaar) .dct-mobielvak .dct-form{ display:none; }
  .dct.is-analyse:not(.is-klaar) .dct-mobielvak .dct-bladstatus{ display:flex; }
  .dct.is-analyse .dct-mobielvak .dct-vragen{ opacity:1; pointer-events:auto; padding-left:20px; padding-right:20px; }
  .dct-bladstatus{ flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; text-align:center; }
  .dct-bladstatus p{ margin:0; font:600 20px/1.2 var(--sf); letter-spacing:-.025em; }
  .dct-bladstatus__draai{ width:34px; height:34px; border-radius:50%; border:3px solid #E5E5EA; border-top-color:var(--dct-blauw);
    animation:dctDraai .8s linear infinite; }
  .dct-bladstatus .dct-analyse__lijst{ font-size:14px; gap:8px 14px; max-width:300px; }
  .dct-bladstatus .dct-analyse__lijst li:nth-child(n+4){ display:flex; }
  .dct.is-klaar .dct-mobielvak .dct-klaar{ position:static; display:flex; height:100%; background:none; padding:6px 0; }
  .dct-mobielvak .dct-klaar h3{ font-size:28px; }
  .dct-mobielvak .dct-klaar p{ font-size:16px; }
  .dct-mobielvak .dct-sluit{ display:block; margin-top:10px; height:46px; padding:0 26px; border:0; border-radius:999px; cursor:pointer;
    background:#F2F2F7; color:var(--dct-inkt); font:600 16px/1 var(--sf); }
}

@media (prefers-reduced-motion:reduce){
  .dct *, .dct *::before, .dct *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}