/*
  "Plan een gesprek": een stil paneel dat van rechts over de pagina schuift (variant A, keuze Kevin
  11/10/2026). Alleen geladen op /keukens/, /interieur/ en /stalen-binnendeuren/ en hun EN/FR-versie.
  Zolang niemand op een [data-gesprek]-knop tikt, staat er geen formulier in beeld.
  Kleuren en letters komen uit de tokens van stijl.css.
*/
.gesprek-regel{margin-top:14px}
.gesprek-regel .tl{appearance:none;background:none;border:0;padding:0;color:var(--plaster);font-family:var(--sans);cursor:pointer}
.direct-knoppen button[data-gesprek]{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--plaster);opacity:.85}
.direct-knoppen button[data-gesprek]:hover{opacity:1}
.direct-knoppen button[data-gesprek] svg{width:20px;height:20px}

.gesprek-sluier{position:fixed;inset:0;z-index:80;background:rgba(10,8,6,.6);opacity:0;transition:opacity .45s var(--ease)}
.gesprek-sluier.open{opacity:1}
.gesprek{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(440px,92vw);background:var(--ink-2);color:var(--plaster);border-left:1px solid var(--lijn);
  padding:calc(22px + env(safe-area-inset-top,0px)) clamp(20px,4vw,40px) calc(28px + env(safe-area-inset-bottom,0px));
  display:grid;align-content:start;gap:18px;overflow-y:auto;overscroll-behavior:contain;transform:translateX(102%);transition:transform .45s var(--ease)}
.gesprek.open{transform:none}
.gesprek-boven{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.gesprek h2{font-family:var(--disp);font-weight:400;font-size:clamp(30px,4vw,38px);line-height:1.05;letter-spacing:-.01em;margin:6px 0 0}
.gesprek-dicht{appearance:none;background:none;border:0;color:var(--plaster);font-size:30px;line-height:1;cursor:pointer;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;margin-right:-10px}
.gesprek-lead{color:var(--taupe);font-size:15px;line-height:1.6;max-width:36ch}
.gesprek form{display:grid;gap:18px}
.gesprek-veld{display:grid;gap:4px}
.gesprek-veld label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.gesprek-veld input{background:transparent;border:0;border-bottom:1px solid var(--lijn-sterk);border-radius:0;color:var(--plaster);font:inherit;font-size:17px;padding:6px 0 9px;width:100%;min-width:0}
.gesprek-veld input:focus{outline:none;border-bottom-color:var(--plaster)}
.gesprek-veld input::placeholder{color:rgba(182,168,159,.5)}
.gesprek-noot{font-size:13px;color:var(--taupe)}
.gesprek-fout{font-size:14px;color:#E3B7A0;min-height:1.3em}
.gesprek-knop{appearance:none;cursor:pointer;justify-self:start;font:inherit;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:14px 22px;border:1px solid var(--plaster);background:var(--plaster);color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.gesprek-knop:hover{background:transparent;color:var(--plaster)}
.gesprek-knop:disabled{opacity:.6;cursor:default}
.gesprek-klaar{display:grid;gap:8px}
.gesprek-klaar .kap{font-size:30px;line-height:1.1}
.gesprek-klaar p:last-child{color:var(--taupe)}
.gesprek [hidden],.gesprek-sluier[hidden],.gesprek[hidden]{display:none!important}
.gesprek .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (prefers-reduced-motion:reduce){.gesprek,.gesprek-sluier{transition:none}}