.ct-backdrop{
  position:fixed;inset:0;z-index:8000;background:rgba(5,5,5,.55);
  opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.16,1,.3,1);
  backdrop-filter:blur(3px);
}
.ct-backdrop.is-open{opacity:1;pointer-events:auto;}

.ct-paneel{
  position:fixed;top:0;right:0;bottom:0;z-index:8100;
  width:min(560px,100%);background:#ffffff;color:#0a0a0a;
  font-family:'Plus Jakarta Sans',sans-serif;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(101%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  box-shadow:-30px 0 80px rgba(0,0,0,.25);
  will-change:transform;
}
.ct-paneel.is-open{transform:none;}
html.ct-open,html.ct-open body{overflow:hidden;}

.ct-binnen{padding:clamp(28px,5vw,52px);}

.ct-sluit{
  position:absolute;top:20px;right:20px;
  width:44px;height:44px;border:none;background:transparent;cursor:pointer;
  border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  transition:box-shadow .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.ct-sluit::before,.ct-sluit::after{
  content:"";position:absolute;top:50%;left:50%;width:15px;height:1.5px;background:#0a0a0a;
}
.ct-sluit::before{transform:translate(-50%,-50%) rotate(45deg);}
.ct-sluit::after{transform:translate(-50%,-50%) rotate(-45deg);}
.ct-sluit:hover{box-shadow:inset 0 0 0 1px #0a0a0a;transform:rotate(90deg);}

.ct-eyebrow{
  font-size:.72rem;letter-spacing:3px;text-transform:uppercase;
  font-weight:700;color:#888;margin:0 0 16px;
}
.ct-paneel h2{
  font-size:clamp(1.7rem,5vw,2.4rem);font-weight:800;letter-spacing:-1.2px;
  line-height:1.1;margin:0 0 14px;
}
.ct-lede{font-size:1.02rem;line-height:1.6;color:#555;margin:0 0 26px;max-width:44ch;}

.ct-direct{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 30px;}
@media(max-width:480px){.ct-direct{grid-template-columns:1fr;}}
.ct-direct__item{
  display:block;padding:16px 18px;border-radius:14px;background:#f5f4f1;
  text-decoration:none;color:#0a0a0a;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:box-shadow .3s ease,background-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.ct-direct__item:hover{background:#fff;box-shadow:inset 0 0 0 1.5px #0a0a0a;transform:translateY(-2px);}
.ct-direct__label{
  display:block;font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;
  color:#888;font-weight:700;margin-bottom:5px;
}
.ct-direct__waarde{font-weight:700;font-size:.98rem;}

.ct-form{border-top:1px solid rgba(0,0,0,.1);padding-top:28px;}
.ct-veld{margin:0 0 18px;}
.ct-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:480px){.ct-rij{grid-template-columns:1fr;gap:0;}}

.ct-veld label{
  display:block;font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;
  color:#555;font-weight:700;margin:0 0 8px;
}
.ct-verplicht{text-transform:none;letter-spacing:0;font-weight:500;color:#888;font-size:.72rem;}

.ct-veld input,.ct-veld select,.ct-veld textarea{
  width:100%;font-family:inherit;font-size:1rem;color:#0a0a0a;
  padding:14px 16px;background:#f5f4f1;
  border:none;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  transition:box-shadow .25s ease,background-color .25s ease;
}
.ct-veld textarea{resize:vertical;min-height:110px;line-height:1.55;}
.ct-veld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#555 50%),linear-gradient(135deg,#555 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.ct-veld :focus-visible{outline:none;background:#fff;box-shadow:inset 0 0 0 2px #0a0a0a;}

/* Fouten: niet alleen kleur, ook een tekst en een dikkere rand */
.ct-veld.is-fout input,.ct-veld.is-fout textarea{
  background:#fdf1f1;box-shadow:inset 0 0 0 2px #8a2b2b;
}
.ct-fout{
  margin:8px 0 0;font-size:.85rem;line-height:1.5;color:#8a2b2b;font-weight:600;
  display:flex;gap:7px;align-items:flex-start;
}
.ct-fout::before{content:"!";flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:#8a2b2b;color:#fff;font-size:.7rem;line-height:16px;text-align:center;}

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

.ct-btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  padding:16px 32px;border-radius:40px;border:none;
  background:#050505;color:#f5f5f5;margin-top:6px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,opacity .3s ease;
}
.ct-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 28px rgba(0,0,0,.2);}
.ct-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;}

.ct-status{margin:16px 0 0;font-size:.95rem;line-height:1.55;font-weight:600;min-height:1.2em;}
.ct-status.is-goed{color:#2f6b3f;}
.ct-status.is-fout{color:#8a2b2b;}
.ct-klein{margin:14px 0 0;font-size:.8rem;line-height:1.5;color:#888;}

@media(max-width:768px){
  .ct-paneel{width:100%;transform:translateY(101%);}
  .ct-paneel.is-open{transform:none;}
  .ct-sluit{top:14px;right:14px;}
}

@media (prefers-reduced-motion:reduce){
  .ct-paneel,.ct-backdrop{transition:opacity .3s ease;}
  .ct-paneel{transform:none;opacity:0;pointer-events:none;}
  .ct-paneel.is-open{opacity:1;pointer-events:auto;}
  .ct-sluit:hover,.ct-btn:hover,.ct-direct__item:hover{transform:none;}
}

.ct-paneel *,.ct-paneel *::before,.ct-paneel *::after{box-sizing:border-box;}

.ct-paneel [hidden]{display:none !important;}

.ct-rij>.ct-veld{min-width:0;}
.ct-veld input,.ct-veld select,.ct-veld textarea{max-width:100%;}
