/*
  Book a call (/book, 27 oktober 2026). Het boekscherm rechts in de held: kalender,
  tijden en formulier, in het dag-palet (rechte hoeken, haarlijnen, Geist Mono voor
  labels). public/book.js tekent het; de stappen staan als html in scripts/paginas-data.mjs.
*/
.held-werk .held-raster{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
@media (min-width:901px){.held-werk .held-raster>div:first-child{position:sticky;top:calc(var(--kop-hoogte) + 32px)}}
.held-werk h1{font-size:clamp(2.5rem,1.3rem + 3.6vw,4.6rem)}

/* links: de drie feiten onder de lead */
.boek-feiten{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;max-width:40ch;border-top:1px solid var(--dag-lijn)}
.boek-feiten li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--dag-lijn)}
.boek-feiten b{font-weight:600}
.boek-feiten span{color:var(--dag-mist);font-size:.95rem;line-height:1.5}

/* het paneel */
.boek{background:var(--wit);border:1px solid var(--dag-lijn);padding:clamp(20px,2.6vw,36px);min-width:0}
.boek [hidden]{display:none!important}
.boek-stap+.boek-stap{margin-top:clamp(26px,3vw,36px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--dag-lijn)}
.boek-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin-bottom:18px}
.boek h2{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem);font-weight:560;letter-spacing:-.02em;line-height:1.15}
.boek h2:focus{outline:none}
.boek-nr{font:500 .74rem/1 var(--mono);letter-spacing:.06em;color:var(--dag-mist);transform:translateY(-2px)}
.boek-tz{font-size:.86rem;color:var(--dag-mist);max-width:44ch}
.boek-laden{grid-column:1/-1;padding:28px 0;color:var(--dag-mist);font-size:.95rem}
.boek-laden::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:boek-punten 1.2s steps(4,end) infinite}
@keyframes boek-punten{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* de kalender: maandag eerst, weken onder elkaar */
.kalender{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.kalender .wd{padding:0 0 8px;font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dag-mist);text-align:center}
.kalender .dag{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 2px;border:1px solid transparent;background:transparent;color:var(--dag-ink);font:500 1rem/1 var(--tekst);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s var(--gemak),border-color .2s var(--gemak),color .2s var(--gemak)}
.kalender .dag small{position:absolute;top:6px;left:0;right:0;text-align:center;font:500 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dag-mist)}
.kalender .dag.open{border-color:var(--dag-lijn-sterk)}
.kalender .dag.open:hover{border-color:var(--dag-ink)}
.kalender .dag[aria-pressed="true"]{background:var(--dag-ink);border-color:var(--dag-ink);color:var(--wit)}
.kalender .dag[aria-pressed="true"] small{color:var(--wit);opacity:.75}
.kalender .dag:disabled{cursor:default;color:rgba(21,25,29,.32)}
.kalender .dag:disabled small{color:rgba(21,25,29,.32)}
.kalender .dag .vrij{font:500 .6rem/1 var(--mono);letter-spacing:.02em;color:var(--dag-mist)}
.kalender .dag[aria-pressed="true"] .vrij{color:var(--wit);opacity:.75}
.kalender .leeg{min-height:52px}
.boek-geen{grid-column:1/-1;padding:18px 0;color:var(--dag-mist)}

/* de tijden */
.tijden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tijd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:8px 4px;border:1px solid var(--dag-lijn-sterk);background:transparent;color:var(--dag-ink);font:600 1rem/1 var(--tekst);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s var(--gemak),border-color .2s var(--gemak),color .2s var(--gemak)}
.tijd small{font:500 .64rem/1 var(--mono);letter-spacing:.02em;color:var(--dag-mist)}
.tijd:hover{border-color:var(--dag-ink)}
.tijd[aria-pressed="true"]{background:var(--dag-ink);border-color:var(--dag-ink);color:var(--wit)}
.tijd[aria-pressed="true"] small{color:var(--wit);opacity:.75}

/* het formulier */
.gekozen{font-weight:600;font-size:.95rem}
.boek-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.boek .veld{display:grid;gap:6px;min-width:0}
.boek .veld.breed{grid-column:1/-1}
.boek label{font-size:.86rem;font-weight:600}
.boek label i{font-style:normal;font-weight:400;color:var(--dag-mist);margin-left:4px}
.boek input,.boek textarea{width:100%;font:inherit;font-size:max(16px,1rem);color:var(--dag-ink);background:transparent;border:0;border-bottom:1px solid var(--dag-lijn-sterk);border-radius:0;padding:9px 0;-webkit-appearance:none;appearance:none}
.boek textarea{resize:vertical;min-height:84px;line-height:1.5}
.boek input::placeholder,.boek textarea::placeholder{color:var(--dag-mist);opacity:.8}
.boek input:focus,.boek textarea:focus{outline:none;border-bottom-color:var(--dag-ink);box-shadow:0 1px 0 var(--dag-ink)}
.boek .veld.mis input{border-bottom-color:#a3271d;box-shadow:0 1px 0 #a3271d}
.boek .fout{font-size:.82rem;color:#a3271d;min-height:0}
.boek .fout:empty{display:none}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.boek-check{margin-top:22px}
.boek-check p{font-size:.86rem;color:var(--dag-mist);margin-bottom:8px}
.boek-verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.boek-verstuur p{flex:1 1 220px;font-size:.84rem;color:var(--dag-mist);line-height:1.5}
.boek-verstuur .knop[aria-disabled="true"]{opacity:.6;cursor:progress}
.boek-melding{margin-top:18px;padding:12px 14px;border-left:2px solid #a3271d;background:rgba(163,39,29,.06);font-size:.92rem}
.boek-klaar h2{margin-bottom:12px}
.boek-klaar p+p{margin-top:10px;color:var(--dag-mist)}
.boek-noscript{color:var(--dag-mist)}

@media (max-width:900px){
  /* Op een telefoon het boekscherm direct onder de lead, de drie feiten erna. */
  .held-werk .held-raster{grid-template-columns:1fr;gap:0}
  .held-werk .held-raster>div:first-child{display:contents}
  .held-werk .lead{margin-bottom:clamp(24px,5vw,32px)}
  .held-werk .boek{order:1}
  .held-werk .boek-feiten{order:2;margin-top:28px}
}
@media (max-width:520px){
  .boek{margin-inline:calc(var(--goot) * -1);border-inline:0;padding:22px var(--goot) 26px}
  .kalender{gap:3px}
  .kalender .dag,.kalender .leeg{min-height:48px}
  .kalender .dag{padding-top:12px}
  .kalender .dag small{top:4px;font-size:.56rem}
  .tijden{grid-template-columns:repeat(3,minmax(0,1fr))}
  .boek-velden{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .boek-laden::after{animation:none;content:"..."}
  .kalender .dag,.tijd{transition:none}
}