/* De beweging houdt de relatie tussen kalender en formulier zichtbaar. */
.boekblad{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--den);overflow:clip}
/* overflow:clip i.p.v. hidden: anders kan de browser het blad-venster programmatisch scrollen (bij de automatische
   focus op de sluitknop, terwijl het blad op de telefoon nog onder het scherm staat) en schiet het blad eerst te hoog */
.boekblad[open]{display:flex;align-items:center;justify-content:center}
.boekblad::backdrop{background:transparent}
/* Vervaagde achtergrond: vaste vervaging die alleen infaadt (lichtste werk voor de browser) */
.boekblad-scrim{position:absolute;inset:0;background:rgba(22,32,26,.42);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);opacity:0;transition:opacity 320ms ease;will-change:opacity}
.boekblad-vak{position:relative;display:flex;flex-direction:column;width:min(720px,calc(100vw - 48px));height:min(600px,calc(100dvh - 48px));border-radius:26px;background:#F1F2EC;box-shadow:0 40px 120px rgba(16,24,19,.35);overflow:clip;opacity:0;transform:translateY(28px);transition:transform 300ms var(--ease-drawer,cubic-bezier(.32,.72,0,1)),opacity 200ms ease}
.boekblad.open .boekblad-scrim{opacity:1}
.boekblad.open .boekblad-vak{opacity:1;transform:none}
.boekblad.groeit .boekblad-vak{transition:transform 300ms var(--ease-drawer),opacity 200ms ease,width 420ms var(--ease-drawer),height 420ms var(--ease-drawer),border-radius 420ms var(--ease-drawer),margin-top 420ms var(--ease-drawer)}
.boekblad.vol .boekblad-vak{width:100%;height:100dvh;border-radius:0;box-shadow:none}
/* Eerste keer dat de kalender er is: zacht naar de juiste hoogte */
.boekblad.past .boekblad-vak{transition:transform 300ms var(--ease-drawer),opacity 200ms ease,height 380ms var(--ease-drawer),margin-top 380ms var(--ease-drawer)}
@media(min-width:900px){.boekblad-vak.verankerd{align-self:flex-start;margin-top:var(--anker)}.boekblad.vol .boekblad-vak.verankerd{margin-top:0}}
.boekblad-kop{position:relative;z-index:2;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 12px 0 24px;border-bottom:1px solid #d6dec9;background:var(--mist)}
.boekblad-kop b{margin-left:8px;font:400 21px var(--display);font-stretch:80%;letter-spacing:0;text-transform:none}
.boekblad-voorbeeld{margin-left:auto;padding:5px 11px;border-radius:999px;background:#F6E7CC;color:#7A5418;font:600 12px var(--text);white-space:nowrap}
.boekblad-sluit{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--den);cursor:pointer}
.boekblad iframe{flex:1;min-height:0;width:100%;border:0;opacity:0;transition:opacity 200ms ease}
.boekblad iframe.klaar{opacity:1}
.boekblad-laden{position:absolute;inset:60px 0 0;display:grid;place-items:center;margin:0;color:var(--varen);font:14px var(--text);pointer-events:none}
.boekblad-fallback{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);color:var(--den);font:14px var(--text)}
.boekblad [hidden]{display:none!important}
html.boekblad-open{overflow:hidden}
/* Vaste plek voor de scrollbalk: bij het openen verandert de paginabreedte niet, dus rekent de scrollanimatie
   zich niet opnieuw door (dat gaf een hapering bij muizen met altijd-zichtbare scrollbalk) */
html{scrollbar-gutter:stable}
@media(hover:hover) and (pointer:fine){.boekblad-sluit:hover{background:rgba(29,41,33,.07)}}
@media(max-width:899px){
 .boekblad[open]{align-items:flex-end}
 .boekblad-vak{width:100%;height:calc(100dvh - 10px - env(safe-area-inset-top,0px));border-radius:24px 24px 0 0;transform:translateY(100%);opacity:1}
 .boekblad-kop{height:56px;padding-left:20px}
 .boekblad-kop b{font-size:18px}
 .boekblad-voorbeeld>span{display:none}
}
@media(prefers-reduced-motion:reduce){.boekblad-vak{transform:none}.boekblad-scrim,.boekblad-vak,.boekblad iframe{transition:none!important}}