/* ═══════════════════════════════════════════════════════════════════
   Toestemmingsverklaring — InFrame Merkrichtlijnen 2026

   Dezelfde vormentaal als inframeagency.nl en het dashboard: de
   kadervorm uit het logo (rechtsboven en linksonder afgerond), de
   kop in Black Italic die op een punt eindigt, geel als accent en
   het lint met de diensten onderaan.

   Mobile-first: de meeste mensen tekenen op hun telefoon op de set.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --royal:#103590; --mid:#0A63B4; --cyaan:#00AEEF; --geel:#FFE600;
  --char:#1A1D23; --bone:#F7F5F2; --vlak:#EFECE7; --lijn:#DCD9D2;
  --grijs:#5F6165;
  --rood:#B0121C; --rood-vlak:#FCEEEF;
  --groen:#13703A; --groen-vlak:#E8F3EC;
  --verloop:linear-gradient(45deg,#103590 0%,#0A63B4 50%,#00AEEF 100%);
  --kader:0 16px 0 16px;
  --kader-sm:0 10px 0 10px;
  --kader-xs:0 7px 0 7px;
  --soepel:cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bone); color:var(--char);
  font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

/* ── De kop: het kleurverloop met het Kader erachter ───────────── */
.kop{
  position:relative; overflow:hidden;
  background:var(--verloop); color:#fff;
  padding:1.6rem 1.25rem 2.2rem;
}
/* Overloop naar Deep Royal aan de tekstkant. De merkrichtlijnen
   gebruiken dit zelf bij beeldposts: geel en wit mogen nooit op de
   Vivid Cyan kant van het verloop staan. Zonder deze laag zakt het
   contrast van de gele regel naar 2,9 en dat is onleesbaar. */
.kop::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(16,53,144,.96) 0%, rgba(16,53,144,.9) 55%,
    rgba(16,53,144,.55) 85%, rgba(16,53,144,.3) 100%);
}
@media(min-width:760px){
  .kop::before{
    background:linear-gradient(100deg,
      rgba(16,53,144,.96) 0%, rgba(16,53,144,.88) 42%,
      rgba(16,53,144,.5) 68%, rgba(16,53,144,.12) 100%);
  }
}
/* Het Kader hoort achtergrond te blijven: het mag het merk meegeven,
   niet met de kop concurreren. */
.kop-kader{
  position:absolute; right:-22%; bottom:-34%;
  width:66vw; max-width:330px; opacity:.5;
  pointer-events:none;
}
.kop-binnen{position:relative; z-index:2; max-width:46rem; margin:0 auto;}
.kop-logo{height:26px; width:auto; margin-bottom:1.6rem;}
.kop-eyebrow{
  display:inline-block;   /* het vlak volgt de tekst, niet de hele breedte */
  font-size:13px; font-weight:800; color:var(--geel);
  letter-spacing:.02em; margin:0 0 10px;
}
.kop h1{
  margin:0; font-size:clamp(28px,7.4vw,40px); font-weight:900;
  font-style:italic; line-height:1.08; letter-spacing:-.025em;
}
.kop h1 span{
  background-image:linear-gradient(var(--geel),var(--geel));
  background-repeat:no-repeat; background-size:100% .075em;
  background-position:0 100%; padding-bottom:.06em;
}
.kop-intro{
  margin:1.1rem 0 0; font-size:15px; line-height:1.65;
  color:rgba(255,255,255,.94); max-width:34rem;
}

/* ── Het blad waarop je invult ─────────────────────────────────── */
.blad{
  max-width:46rem; margin:-1.1rem auto 0; padding:0 1.25rem 3rem;
  position:relative; z-index:3;
}
.kaart{
  background:#fff; border:1px solid var(--lijn);
  border-radius:var(--kader); padding:1.4rem 1.25rem 1.6rem;
  box-shadow:0 10px 30px rgba(16,53,144,.08);
}

/* ── Secties ───────────────────────────────────────────────────── */
.sectie + .sectie{margin-top:2rem;}
.sectie h2{
  margin:0 0 .25rem; font-size:19px; font-weight:900; font-style:italic;
  color:var(--royal); letter-spacing:-.02em;
}
.sectie h2::after{
  content:''; display:block; width:26px; height:2px;
  background:var(--royal); margin-top:7px;
}
.sectie-uitleg{
  margin:.7rem 0 1rem; font-size:13.5px; color:var(--grijs); line-height:1.6;
}

/* ── Velden ────────────────────────────────────────────────────── */
.veld{margin-top:1.1rem;}
.veld label{
  display:block; font-size:11px; font-weight:800; color:var(--grijs);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px;
}
.veld .nodig{color:var(--rood); margin-left:2px;}
.veld input[type=text],
.veld input[type=email],
.veld input[type=date],
.veld select{
  width:100%; font-family:inherit; font-size:16px; color:var(--char);
  background:#fff; border:1.5px solid var(--lijn);
  border-radius:var(--kader-sm); padding:14px 15px;
  outline:none; transition:border-color .15s;
  /* 16px voorkomt dat Safari op iPhone inzoomt bij het tikken. */
}
.veld input:focus,.veld select:focus{border-color:var(--royal);}
.veld input[aria-invalid=true]{border-color:var(--rood); background:var(--rood-vlak);}
.veld-fout{
  display:none; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--rood);
}
.veld.mis .veld-fout{display:block;}
.veld-hulp{margin-top:6px; font-size:12.5px; color:var(--grijs);}
.tweeop{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:620px){
  .tweeop{grid-template-columns:1fr 1fr; gap:0 1.1rem;}
}

/* ── De verklaringen ───────────────────────────────────────────── */
.verklaringen{margin:.4rem 0 0; padding:0; list-style:none; counter-reset:v;}
.verklaringen li{
  position:relative; counter-increment:v;
  padding:.55rem 0 .55rem 2.1rem; font-size:14.5px; line-height:1.6;
}
.verklaringen li::before{
  content:counter(v) '.'; position:absolute; left:0; top:.55rem;
  font-weight:800; font-style:italic; color:var(--cyaan); font-size:15px;
}

/* ── Keuze ja of nee ───────────────────────────────────────────── */
.keuzes{display:flex; gap:10px; margin-top:.4rem; flex-wrap:wrap;}
.keuze{
  flex:1 1 0; min-width:120px; position:relative;
  border:1.5px solid var(--lijn); border-radius:var(--kader-sm);
  padding:13px 15px; cursor:pointer; background:#fff;
  font-size:15px; font-weight:700; color:var(--char);
  display:flex; align-items:center; gap:10px;
  transition:border-color .15s, background .15s;
}
.keuze input{position:absolute; opacity:0; width:0; height:0;}
.keuze .bol{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--lijn); transition:border-color .15s;
}
.keuze:has(input:checked){border-color:var(--royal); background:#F4F7FD;}
.keuze:has(input:checked) .bol{
  border-color:var(--royal); background:var(--royal);
  box-shadow:inset 0 0 0 3px #fff;
}
.keuze input:focus-visible ~ .bol{outline:2px solid var(--royal); outline-offset:2px;}

/* ── Aankruisvakjes ────────────────────────────────────────────── */
.vink{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  background:var(--vlak); border-radius:var(--kader-sm);
  padding:14px 15px; margin-top:1rem;
}
.vink input{
  width:20px; height:20px; flex-shrink:0; margin:1px 0 0;
  accent-color:var(--royal); cursor:pointer;
}
.vink span{font-size:14.5px; line-height:1.55; font-weight:600;}
.vink.mis{outline:2px solid var(--rood); background:var(--rood-vlak);}

/* ── Blok duur en intrekken ────────────────────────────────────── */
.duur{
  background:var(--vlak); border-radius:var(--kader-sm);
  padding:1rem 1.1rem; margin-top:1.2rem;
  font-size:13.5px; line-height:1.65; color:var(--char);
}
.duur b{color:var(--royal);}
.duur a{color:var(--royal);}

/* ── Handtekening ──────────────────────────────────────────────── */
.hand-vak{
  margin-top:.9rem; border:1.5px dashed var(--lijn);
  border-radius:var(--kader-sm); background:#fff; position:relative;
  overflow:hidden;
}
.hand-vak.getekend{border-style:solid; border-color:var(--royal);}
.hand-vak.mis{border-color:var(--rood); background:var(--rood-vlak);}
#handtekening{
  display:block; width:100%; height:210px;
  touch-action:none;        /* de pagina mag niet meescrollen tijdens tekenen */
  cursor:crosshair;
}
.hand-hint{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; pointer-events:none;
  font-size:14px; color:var(--grijs); font-weight:600;
}
.hand-vak.getekend .hand-hint{display:none;}
.hand-knoppen{display:flex; justify-content:flex-end; margin-top:.6rem;}

/* ── Knoppen ───────────────────────────────────────────────────── */
.knop{
  font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
  border-radius:var(--kader-sm); padding:15px 24px; border:2px solid transparent;
  transition:background .15s, border-color .15s, transform .08s;
  /* Een knop die een link is, moet geen streep onder zich krijgen. */
  text-decoration:none; display:inline-block; text-align:center;
}
a.knop:hover{text-decoration:none;}
.knop:active{transform:translateY(1px);}
.knop-geel{background:var(--geel); color:var(--char); border-color:var(--geel);}
.knop-geel:hover{background:#FFEB33;}
.knop-geel[disabled]{opacity:.5; cursor:not-allowed;}
.knop-licht{
  background:#fff; color:var(--royal); border-color:var(--lijn);
  padding:10px 16px; font-size:13px;
}
.knop-licht:hover{border-color:var(--royal);}
.knop-blauw{background:var(--royal); color:#fff; border-color:var(--royal);}
.versturen{width:100%; margin-top:1.6rem; display:flex; align-items:center;
  justify-content:center; gap:10px;}
.versturen .pijl{font-size:17px; line-height:1;}

/* ── Meldingen ─────────────────────────────────────────────────── */
.melding{
  border-radius:var(--kader-sm); padding:14px 16px; margin-bottom:1.2rem;
  font-size:14px; line-height:1.6; font-weight:600;
}
.melding-fout{background:var(--rood-vlak); color:var(--rood);}
.melding-fout ul{margin:.5rem 0 0; padding-left:1.1rem; font-weight:500;}

/* ── Privacyregel ──────────────────────────────────────────────── */
.privacy{
  margin:1.4rem auto 0; max-width:46rem; padding:0 1.25rem;
  font-size:12.5px; line-height:1.65; color:var(--grijs);
}

/* ── Het lint onderaan ─────────────────────────────────────────── */
.lint{
  background:var(--royal); overflow:hidden; white-space:nowrap;
  padding:15px 0; margin-top:2.5rem;
}
.lint-spoor{
  display:inline-flex; width:max-content; will-change:transform;
  animation:lintLoopt 28s linear infinite;
}
.lint-i{
  display:inline-flex; align-items:center; gap:22px; padding-left:22px;
  font-size:13px; font-weight:700; color:#fff;
}
.lint-ster{width:13px; height:13px; fill:var(--geel); flex-shrink:0;}
@keyframes lintLoopt{from{transform:translateX(0);}to{transform:translateX(-25%);}}

.voet{
  background:var(--bone); padding:14px 1.25rem 28px; text-align:center;
  font-size:12px; color:var(--grijs);
}
.voet b{color:var(--royal);}

/* ── Het bedankscherm ──────────────────────────────────────────── */
.klaar{text-align:center; padding:.6rem 0 .4rem;}
.klaar-vink{
  width:62px; height:62px; margin:0 auto 1.1rem;
  border-radius:50%; background:var(--groen-vlak);
  display:flex; align-items:center; justify-content:center;
}
.klaar-vink svg{width:30px; height:30px; stroke:var(--groen);}
.klaar h2{
  margin:0 0 .5rem; font-size:24px; font-weight:900; font-style:italic;
  color:var(--royal); letter-spacing:-.02em;
}
.klaar p{margin:0 auto; max-width:28rem; font-size:15px; color:var(--grijs);}
.klaar .kenmerk{
  display:inline-block; margin-top:1.2rem; background:var(--vlak);
  border-radius:var(--kader-xs); padding:8px 14px;
  font-size:13px; font-weight:700; color:var(--royal); letter-spacing:.04em;
}
.klaar-knoppen{
  display:flex; flex-direction:column; gap:10px; margin-top:1.6rem;
}
@media(min-width:520px){
  .klaar-knoppen{flex-direction:row; justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .lint-spoor{animation:none;}
}