/* Planner: boekingspagina en ingebedde planner. Alleen tokens uit ui.css. */
.boek-body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);min-height:100%}
/* Desktop: kaart en voetregel samen verticaal gecentreerd in de schermhoogte. De twee lege flex-items (::before en ::after) verdelen de vrije
   ruimte gelijk boven en onder en zijn begrensd, zodat de kaart op een heel hoog scherm niet ver naar beneden zakt. Is de kaart hoger dan
   het scherm, dan krimpen ze tot nul en scrolt de pagina gewoon. 100vh is de terugval voor browsers zonder dvh. */
.boek{max-width:1120px;margin:0 auto;padding:24px;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.boek::before,.boek::after{content:"";flex:1 1 0;max-height:320px}
.boek-kaart{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:580px;flex:none}
.boek-kaart>.boek-stap{padding:24px 32px 32px;min-width:0}
.boek-info{padding:24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:16px;min-width:0}
.boek-merk{display:flex;align-items:center;gap:12px;min-width:0}
.boek-merk>div{min-width:0}
.boek-merk .avatar{flex:none}
/* Schema stap 35: met een logo (vaak liggend) staat het boven naam en titel, zodat de titel zijn volle breedte houdt. */
.boek-merk:has(.avatar.logo){flex-direction:column;align-items:flex-start;gap:12px}
.boek-titel{margin:2px 0 0;font-size:var(--t-18);line-height:1.25;color:var(--heading);text-wrap:balance;overflow-wrap:anywhere}
.boek-omschrijving{margin:0;color:var(--muted);font-size:var(--t-14);line-height:1.5}
.boek-feiten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--t-14)}
.boek-feiten li{display:flex;align-items:flex-start;gap:8px;color:var(--text)}
.boek-feiten .i{width:18px;height:18px;flex:none;color:var(--muted);margin-top:1px}
.boek-feiten .boek-gekozen{color:var(--heading);font-weight:600}
.boek-feiten .boek-gekozen .i{color:var(--orange)}
.boek-gastheren{display:flex;flex-direction:column;gap:8px}
.boek-gastheer-lijst{display:flex;flex-direction:column;gap:4px}
.boek-gastheer{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid transparent;border-radius:var(--r);background:none;color:var(--text);font:inherit;font-size:var(--t-14);text-align:left;cursor:pointer;min-height:40px;width:100%}
.boek-gastheer:hover{background:var(--inset)}
.boek-gastheer[aria-checked="true"],.boek-gastheer[aria-pressed="true"]{border-color:var(--kies-rand);box-shadow:inset 0 0 0 1px var(--kies-rand);background:var(--card);color:var(--heading);font-weight:600}
/* Samen kiezen (26 oktober): de kaarten zijn knoppen met aria-pressed (meer dan één gekozen); eronder één zin uitleg */
.boek-samen-hint{margin:8px 0 0}
.boek-gastheer .avatar{flex:none}
.boek-gastheer small{display:block;font-weight:400;color:var(--muted);font-size:var(--t-12)}
.boek-gastheer .i{margin-left:auto;width:18px;height:18px;color:var(--kies-rand);flex:none}
/* Telefoon eerst boeken (11 oktober, golf 1 van de gebruiksvriendelijkheid): omschrijving, Met wie en de tijdzone staan in .boek-info-meer.
   Op een breed scherm is dat gewoon de rest van de linkerkolom; op een telefoon klapt het dicht achter de knop "Meer info", zodat de kiezer
   (of de eerstvolgende momenten) in het eerste scherm staat. */
.boek-info-meer{display:flex;flex-direction:column;gap:16px;flex:1 1 auto;min-width:0}
.boek-info-knop{display:none}
.boek-gegevens-moment{margin:6px 0 0;font-size:var(--t-14);font-weight:600;color:var(--heading);line-height:1.4}
@media (min-width:761px){.boek-gegevens-moment{display:none}}
.boek-tz{margin-top:auto}
.boek-tz label{display:flex;align-items:center;gap:6px}
.boek-kop{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.boek-kop h2{margin:2px 0 0;font-size:var(--t-22);color:var(--heading);line-height:1.2}
.boek-kop .btn{align-self:flex-start;margin-left:auto}
.boek-kiezer{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px}
.boek-maand-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.boek-maand-kop h3{margin:0;font-size:var(--t-16);color:var(--heading);text-transform:capitalize}
.boek-weekdagen,.boek-dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.boek-weekdagen span{text-align:center;font-size:var(--t-12);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:4px 0}
.boek-dag{aspect-ratio:1;min-height:40px;border:1px solid transparent;border-radius:var(--r);background:none;font:inherit;font-size:var(--t-14);color:var(--muted);cursor:default;display:flex;align-items:center;justify-content:center;position:relative}
.boek-dag.vrij{color:var(--heading);font-weight:600;background:var(--inset);cursor:pointer}
.boek-dag.vrij:hover{background:var(--card);border-color:var(--line-strong)}
.boek-dag.vrij[aria-selected="true"],.boek-dag.vrij[aria-selected="true"]:hover{background:var(--kies);color:var(--op-kies);border-color:var(--kies-rand)}
.boek-dag.vandaag::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--orange)}
.boek-dag.vrij[aria-selected="true"].vandaag::after{background:var(--op-kies)}
.boek-dag.leeg{visibility:hidden}
.boek-dag.dag-uit{text-decoration:line-through} /* schema stap 38: een weekdag die bij deze dienst helemaal uit staat */
.boek-tijden h3{margin:0 0 12px;font-size:var(--t-16);color:var(--heading)}
.boek-slots{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.boek-slot{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--heading);font:inherit;font-weight:600;font-size:var(--t-14);cursor:pointer;font-variant-numeric:tabular-nums}
.boek-slot:hover{border-color:var(--navy)}
.boek-slot[aria-selected="true"],.boek-slot[aria-selected="true"]:hover{background:var(--kies);border-color:var(--kies-rand);color:var(--op-kies)}
.boek-slot small{font-weight:500;color:var(--muted);font-size:var(--t-12)}
.boek-slot[aria-selected="true"] small{color:var(--op-kies)}
.boek-leeg{margin:0;color:var(--muted);font-size:var(--t-14)}
.boek-velden{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;max-width:640px}
.boek-velden .field:nth-child(1),.boek-velden .field:nth-child(2){grid-column:span 1}
.boek-velden .field.wide{grid-column:1/-1}
#vragen{display:contents}
.field .opt{color:var(--muted);font-weight:400}
.boek-fout{display:flex;align-items:center;gap:8px;margin:16px 0 0;color:var(--red-text);font-size:var(--t-14)}
.boek-acties{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.boek-kleine{color:var(--muted);font-size:var(--t-13)}
.boek-klaar-kop{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.boek-klaar-kop h2{margin:2px 0 0;font-size:var(--t-22);color:var(--heading)}
.boek-vink{width:48px;height:48px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.boek-vink .i{width:24px;height:24px}
.boek-kv{max-width:560px}
/* voetregel: beeldmerk via --merk (licht merk.svg, donker merk-paper.svg) en de verwijzing naar SpaceBitz */
.boek-voet{display:flex;justify-content:center;margin:16px 0 0;flex:none}
.boek-voet-link{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 8px;border-radius:var(--r-sm);color:var(--muted);font-size:var(--t-13);font-weight:500;text-decoration:none}
.boek-voet-link:hover{color:var(--text);text-decoration:none}
.boek-voet-link:hover .boek-voet-tekst{text-decoration:underline}
.boek-voet .merk{width:25px;height:20px;flex:none;background:var(--merk) center/contain no-repeat}
.boek[aria-busy="true"] .boek-kaart{opacity:.6;pointer-events:none}
/* Taal (10 oktober): boek.html opent met .taal-wacht; zolang de talen van de organisatie onbekend zijn en de voorlopige keuze een andere taal dan het Nederlands
   aanwijst, wacht de tekst onzichtbaar op de definitieve taal (boek.js, kiesTaal); kaart, haarlijnen en skeletten blijven staan. */
.boek.taal-wacht .boek-kaart *,.boek.taal-wacht .boek-voet{visibility:hidden}
.boek.taal-wacht .skel{visibility:visible}
/* ingebed in je eigen systeem: geen marge, niet centreren (het iframe bepaalt de hoogte), voetregel compact. flow-root houdt de marge van
   de voetregel binnen #boek, zodat de gemeten hoogte (planner.hoogte, boek.js) de hele pagina is. */
.boek.embed{padding:0;max-width:none;display:flow-root;min-height:0}
.boek.embed::before,.boek.embed::after{content:none}
.boek.embed .boek-voet{margin:8px 0}
.boek.embed .boek-voet .merk{width:23px;height:18px}
.boek.embed .boek-kaart{border:0;border-radius:0}
@media (max-width:1000px){
  .boek-kiezer{grid-template-columns:1fr;gap:24px}
  .boek-slots{flex-direction:row;flex-wrap:wrap;max-height:none}
  .boek-slot{flex:1 1 calc(33.333% - 8px);min-width:96px}
}
@media (max-width:760px){
  /* telefoon: van boven af, geen centrering */
  .boek{padding:16px;display:block;min-height:0}
  .boek::before,.boek::after{content:none}
  .boek-voet-link{min-height:40px}
  .boek-kaart{grid-template-columns:1fr;min-height:0}
  .boek-info{border-right:0;border-bottom:1px solid var(--line);padding:20px 16px}
  .boek-kaart>.boek-stap{padding:20px 16px 24px}
  .boek-tz{margin-top:0}
  .boek-velden{grid-template-columns:1fr}
  .boek-slot{flex-basis:calc(50% - 8px)}
  .boek-acties .btn{width:100%;justify-content:center}
  .boek-kop{flex-direction:column;gap:8px}
  .boek-kop .btn{margin-left:0}
  /* telefoon eerst boeken: een compacte kop (zaak, dienst, duur en plaats op één regel), de rest achter Meer info */
  .boek-info{gap:12px;padding:16px}
  .boek-feiten{flex-direction:row;flex-wrap:wrap;gap:4px 16px}
  .boek-feiten .boek-gekozen{display:none}
  .boek-info-knop{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;margin:0;padding:4px 0 0;border:0;border-top:1px solid var(--line);background:none;color:var(--text-2);font:inherit;font-size:var(--t-14);font-weight:600;text-align:left;cursor:pointer}
  .boek-info-knop .i{flex:none;color:var(--muted);transition:transform .15s}
  .boek-info-knop:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:var(--r-sm)}
  .boek-info.open .boek-info-knop .i{transform:rotate(180deg)}
  .boek-info:not(.open) .boek-info-meer{display:none}
  /* logies: dicht alleen de hoofdfoto als lage band, de miniaturen pas onder Meer info */
  .boek-info:not(.open) .nk-foto-rij{display:none}
  .boek-info:not(.open) .nk-foto-groot{aspect-ratio:4/1}
}

/* eenmalige link, snelboeken, voorstel, tekst na boeking */
.boek-link-melding{margin:-8px 0 16px;padding:10px 12px;border:1px solid var(--navy-line);border-radius:var(--r);background:var(--navy-soft);color:var(--heading);font-size:var(--t-13)}
.boek-snel{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.boek-snel-lijst{display:flex;flex-wrap:wrap;gap:8px}
.boek-slot.snel{flex-direction:column;gap:0;padding:6px 14px;min-width:96px;line-height:1.3}
/* telefoon (11 oktober): de zes eerstvolgende momenten in twee rijen van drie, zodat de kalender in het eerste scherm begint */
@media (min-width:761px){.boek-snel-lijst{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.boek-snel-lijst .boek-slot.snel{min-width:0;padding:6px 4px}}
@media (max-width:760px){.boek-snel-lijst .boek-slot.snel{flex:1 1 calc(33.333% - 6px);min-width:0;padding:6px 4px}}
.boek-voorstel-intro{margin:0 0 12px;color:var(--text);font-size:var(--t-14);line-height:1.5;max-width:60ch}
.boek-bericht{margin:0 0 16px;padding:10px 14px;border-left:3px solid var(--orange);background:var(--inset);color:var(--text-2);font-size:var(--t-14);line-height:1.5;border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:60ch}
.boek-voorstel{max-height:none;max-width:420px}
.boek-voorstel .boek-slot{justify-content:space-between;padding:0 14px;text-align:left}
.boek-natekst{margin:16px 0 0;padding:12px 14px;border-left:3px solid var(--orange);background:var(--inset);color:var(--text);font-size:var(--t-14);line-height:1.55;border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:60ch;white-space:pre-line}
@media (max-width:760px){.boek-voorstel{grid-template-columns:1fr;display:flex}}

.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* stap 5: postcode, vensters, aanvraag en foto's (modules werkgebied, aankomstvenster, aanvragen, fotos) */
.boek-postcode{max-width:420px}
.boek-postcode-rij{display:flex;gap:12px}
.boek-postcode .inp{font-size:var(--t-18);letter-spacing:.12em;font-variant-numeric:tabular-nums;width:160px}
.boek-buiten{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.boek-buiten .boek-voorstel-intro{margin:0}
.boek-slot.venster{padding:0 12px}
.boek-foto{gap:8px}
.boek-foto label.btn{align-self:flex-start;font-size:var(--t-14);font-weight:600;color:var(--text-2);letter-spacing:normal}
.boek-foto .vh:focus-visible~label.btn{box-shadow:0 0 0 3px var(--ring);border-color:var(--blue)}
.boek-fotos{display:flex;flex-wrap:wrap;gap:8px}
.boek-fotos:empty{display:none}
.boek-foto-item{position:relative;width:88px;height:88px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted)}
.boek-foto-item img{width:100%;height:100%;object-fit:cover;display:block}
.boek-foto-item .ibtn{position:absolute;top:4px;right:4px;width:32px;height:32px;background:var(--card);border:1px solid var(--line-strong)}
.boek-fotostand{display:flex;align-items:center;gap:8px;margin:16px 0 0;color:var(--text);font-size:var(--t-14);line-height:1.5}
.boek-fotostand .i{flex:none;color:var(--green)}
.boek-fotostand.fout{color:var(--red-text);align-items:flex-start}
.boek-fotostand.fout .i{color:var(--red-text);margin-top:3px}
@media (max-width:760px){
  .boek-slot.venster{flex-basis:100%}
  .boek-postcode{max-width:none}
  .boek-postcode .inp{width:auto;flex:1 1 auto;min-width:0}
  .boek-foto-item .ibtn{width:40px;height:40px;top:2px;right:2px}
  .boek-foto-item{width:96px;height:96px}
}
@media (max-width:760px){
  /* tikdoelen van 40 px op de telefoon: terugknoppen in de kop en de maandpijlen */
  .boek-kop .btn.sm{height:40px}
  .boek-kv{grid-template-columns:minmax(0,1fr)}
  .boek-maand-kop .ibtn{width:40px;height:40px}
}

/* stap 6: prijs en betaling (module betalen): wat nu en wat later betaald wordt, boven de knop; de nep-betaalpagina in de proefstand */
.boek-betaal{max-width:640px;margin:24px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--inset);display:flex;flex-direction:column;gap:8px}
.boek-betaal-rij{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:var(--t-14);color:var(--text)}
.boek-betaal-rij small{display:block;color:var(--muted);font-size:var(--t-12)}
.boek-betaal-rij b{font-size:var(--t-18);color:var(--heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.boek-betaal-rij>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.boek-betaal+.boek-acties{margin-top:16px}
.boek-proefbetaal .mb .kv{margin-bottom:8px}
.boek-betaalstand{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--text);font-size:var(--t-14);line-height:1.5}
.boek-betaalstand .i{flex:none;color:var(--green)}
.boek-betaalstand.fout{color:var(--red-text);align-items:flex-start}
.boek-betaalstand.fout .i{color:var(--red-text);margin-top:3px}
/* Toch boeken (26 oktober): de dialoog "Dit is geen vrij moment. Toch boeken?" (.modal uit ui.css). Ingebed is het frame zo hoog als de
   pagina; dan staat ze bij de klik (--y, berekend in boek.js) in plaats van in het midden van het hele frame. */
.boek-toch.bij{align-items:flex-start;padding-top:var(--y,16px)}
@media (max-width:760px){
  .boek-proefbetaal .mf,.boek-toch .mf{flex-direction:column-reverse}
  .boek-proefbetaal .mf .btn,.boek-toch .mf .btn{width:100%;justify-content:center;min-height:40px}
}

/* Stap 33: dienst op "alleen het team" zonder link of inbedsleutel. De lege staat (.empty uit ui.css) midden in de rechterkolom, met het
   adres van de organisatie als knop; een lang adres breekt in plaats van buiten de knop te lopen. */
.boek-team{display:flex;align-items:center;justify-content:center}
.boek-team .empty{max-width:420px}
.boek-team .empty .btn{max-width:100%;height:auto;min-height:40px;white-space:normal}
.boek-team #team-mail-adres{overflow-wrap:anywhere}

/* Stand Maand | Week (7 oktober). De schakelaar is een .seg rechts van de stapkop, naast "Andere postcode". De week volgt de geometrie van
   het weekrooster in het beheer (web/rooster.js: top en hoogte in procent van het bereik, als --top en --h; op de rooster-container is --h
   de hoogte in cellen van één stap): per dag een kolom, buiten de werkuren gedempt (--surface-2), de werkuren als licht vlak, een lijn per
   uur, het verleden en wat nog niet te boeken is als rustig gearceerd vlak (zoals .rd-verl), bezet als breed gearceerd blok met het woord
   Bezet (zoals .tw-b.blok), de vrije momenten als knop in --navy-soft met de tijd erin. Op een telefoon één dag tegelijk met dagknoppen. */
.boek-kop-r{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.boek-kop .boek-kop-r .btn{margin-left:0;align-self:center}
.boek-week{display:flex;flex-direction:column;gap:12px;min-width:0}
.bw-kop{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.bw-kop h3{margin:0;font-size:var(--t-16);color:var(--heading)}
.bw-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.bw-dagkeuze{display:none}
/* Het rooster is een vak van vaste hoogte dat zelf verticaal scrolt (dagkoppen vast bovenaan), zodat de kaart in de week even hoog blijft
   als in de maand (7 oktober, op vraag van Jurgen); boek.js scrolt bij het openen naar het eerste vrije moment. */
.bw-rooster{--cel:32px;display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr));column-gap:6px;max-height:384px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;border-bottom:1px solid var(--line)}
.bw-uren,.bw-dag{display:flex;flex-direction:column;min-width:0}
.bw-dk{position:sticky;top:0;z-index:6;background:var(--card);box-sizing:border-box;height:44px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--t-12);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
/* De koprij (9 oktober, op vraag van Jurgen): geen lijn onder de dagkoppen (ook niet boven de uren) en elke dag dezelfde kop, te boeken of
   niet; alleen vandaag (oranje) en een voorbije dag (gedempt) wijken af, zoals voor 9 oktober. Dat een dag niet te boeken is, toont alleen
   de arcering in de kolom (.bw-af); de reden staat in het aria-label. Hetzelfde voor de dagknoppen op de telefoon. */
.bw-dk b{font-size:var(--t-16);color:var(--heading);letter-spacing:0;text-transform:none}
.bw-dag.vandaag .bw-dk b{color:var(--orange-text)}
.bw-dag.voorbij .bw-dk b{color:var(--muted)}
.bw-as,.bw-kol{position:relative;height:calc(var(--h) * var(--cel))}
.bw-as span{position:absolute;right:8px;top:var(--top);transform:translateY(-50%);font-size:var(--t-11);font-weight:600;color:var(--text-2);white-space:nowrap}
.bw-as span:first-child{transform:none}
/* De week gebruikt het palet van de maand (7 oktober, op vraag van Jurgen): vrij is de tegelkleur van een boekbare dag (.boek-dag.vrij:
   --inset, --r, --heading, 600; hover --card met een rand in --line-strong; focus de gewone ring), wat te boeken valt is effen wit (--card).
   Een zachte haarlijn per uur om de tijd te lezen. Wat niet te boeken is (9 oktober, op vraag van Jurgen: een volle week zag eruit als een
   week waarin alles kan), is .bw-af: hetzelfde rustige vlak als het verleden in het beheer (.rd-verl: --inset met een haarlijnarcering in
   --line onder 135°), over een voorbije dag en een dag zonder vrij moment helemaal, vandaag tot de nu-lijn. Geen etiket en geen
   doorstreepte dagkop in de week (9 oktober, op vraag van Jurgen); de reden staat alleen in het aria-label. */
.bw-kol{box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.bw-af{position:absolute;left:0;right:0;top:0;z-index:1;height:var(--h);border-radius:var(--r-sm) var(--r-sm) 0 0;background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 8px),var(--inset);pointer-events:none}
.bw-dag.dicht .bw-af{border-radius:var(--r-sm)}
/* Toch boeken (26 oktober): ingebed met de inbedsleutel en het vinkje van de dienst is een leeg vak klikbaar; de week ziet er hetzelfde
   uit, alleen de cursor verandert (niet op een voorbije dag). */
.bw-rooster.toch .bw-kol{cursor:pointer}
.bw-rooster.toch .bw-dag.voorbij .bw-kol{cursor:default}
.bw-lijn{position:absolute;left:0;right:0;top:var(--top);height:1px;background:var(--line);opacity:.6;pointer-events:none}
.bw-slot{position:absolute;z-index:3;left:2px;right:2px;top:calc(var(--top) + 2px);height:calc(var(--h) - 4px);box-sizing:border-box;margin:0;padding:0 4px;border:1px solid transparent;border-radius:var(--r);background:var(--inset);color:var(--heading);font:inherit;font-size:var(--t-12);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap}
.bw-slot:hover{background:var(--card);border-color:var(--line-strong)}
.bw-nu{position:absolute;left:0;right:0;top:var(--top);z-index:4;height:2px;background:var(--orange);pointer-events:none}
@media (max-width:860px){
  /* smal: één dag tegelijk; de dagknoppen kiezen welke (minstens 40 px breed op 390 px) */
  .bw-dagkeuze{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .bw-dk-knop{appearance:none;min-height:48px;margin:0;padding:4px 0;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);color:var(--muted);font:inherit;font-size:var(--t-11);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
  .bw-dk-knop b{font-size:var(--t-16);color:var(--heading);letter-spacing:0;text-transform:none}
  .bw-dk-knop.vandaag b{color:var(--orange-text)}
  .bw-dk-knop.voorbij b{color:var(--muted)}
  .bw-dk-knop[aria-pressed="true"]{background:var(--kies);border-color:var(--kies-rand);color:var(--op-kies)}
  .bw-dk-knop[aria-pressed="true"] b{color:var(--op-kies)}
  .bw-rooster{--cel:44px;grid-template-columns:44px minmax(0,1fr);max-height:312px}
  .bw-dag:not(.gekozen){display:none}
  .bw-dk{display:none}
  .bw-raam .bw-leeg{inset:0;padding:16px 0} /* telefoon: de laag over de volle breedte, ook over de uren */
  .bw-raam .bw-leeg .empty{width:100%}
  .bw-slot{font-size:var(--t-14)}
}
@media (max-width:760px){
  .boek-kop-r{margin-left:0;width:100%;justify-content:flex-start}
  .boek-stand{flex:1 1 auto}
  .boek-stand button{flex:1 1 0;justify-content:center;height:40px}
  .bw-nav .ibtn{width:40px;height:40px}
  .bw-nav .btn.sm{height:40px}
  .bw-kop h3{flex:1 1 100%}
  .bw-nav{margin-left:0;width:100%;justify-content:space-between}
}
/* Geen vrij moment in de hele week of maand (9 oktober): de lege staat (.empty uit ui.css) als laag over het rooster (onder de dagkoppen,
   rechts van de uren) of over de dagen van de maand, met de primaire knop naar het eerstvolgende vrije moment. Het vak eronder houdt zijn
   hoogte (het rooster blijft getekend, gearceerd), zodat de pagina en een ingebed iframe niet verspringen. */
.bw-raam,.boek-maand-raam{position:relative;min-width:0}
.bw-raam.leeg{min-height:240px}
.bw-leeg{position:absolute;z-index:7;inset:44px 0 0 50px;display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:none}
.boek-maand-raam .bw-leeg{inset:0}
.bw-leeg .empty{pointer-events:auto;max-width:320px;padding:24px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.bw-leeg-uitleg{display:block}
.bw-leeg .btn{max-width:100%;height:auto;min-height:40px;white-space:normal;justify-content:center}
/* Laden (11 oktober): de kiezer staat er meteen in de juiste stand, met skeletten (.skel uit ui.css) op de plaats van de dagen van de
   maand en een rij skeletten in het vak van het rooster, even hoog als het rooster zelf (416 of 312 px met de haarlijn eronder, zonder eigen
   scrollbalk), zodat er niets verspringt als de momenten er zijn. */
.boek-dag-skel{height:auto;aspect-ratio:1;min-height:40px;border-radius:var(--r)}
.bw-skelet{grid-column:1/-1;box-sizing:border-box;height:415px;overflow:hidden;padding:16px 0;display:grid;grid-auto-rows:24px;align-content:start;gap:24px}
.bw-skelet .skel{height:24px}
.bw-dk-skel{height:48px;border-radius:var(--r-sm)}
@media (max-width:860px){ .bw-skelet{height:311px} .bw-skelet .skel:nth-child(n+7){display:none} }

/* Verzetten in de zelfbediening (8 oktober, op vraag van Jurgen): dezelfde kiezer als op de boekingspagina (web/kiezer.js). Kiezen en dan
   bevestigen: een gekozen moment is navy met een rand in --navy-line (in het donker lichter, zodat de keuze opvalt), in de dag
   (.boek-slot[aria-selected]) en in de week (.bw-slot[aria-pressed]); eronder, achter een
   haarlijn, het nieuwe moment en de primaire knop "Verzetten naar …" (op een telefoon over de volle breedte). */
.bw-slot[aria-pressed="true"],.bw-slot[aria-pressed="true"]:hover{background:var(--kies);border-color:var(--kies-rand);color:var(--op-kies)}
.boek-verzet{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.boek-verzet-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.boek-verzet-tekst b{font-size:var(--t-16);color:var(--heading);line-height:1.35}
@media (max-width:760px){.boek-verzet .btn{width:100%}}

/* Een verblijf (logies deel 2, 11 oktober; web/nachten.js, stijlgids "Een verblijf kiezen"). De datumbereikkiezer staat in de rechterkolom in
   plaats van maand en week: personen en ontbijt, aankomst en vertrek als twee velden, twee maanden naast elkaar (op een telefoon één, met
   bladeren), onder de kalender de reden van een gedempte dag en de prijsopbouw als tegel op --inset. Een boekbare dag heeft de tegelkleur
   van .boek-dag.vrij, een volle dag het rustige gearceerde vlak van de week (.bw-af), aankomst en vertrek zijn navy en de nachten ertussen
   --navy-soft. Links bovenaan de fotostrook van het kamertype. */
.nk{display:flex;flex-direction:column;gap:16px}
.nk[aria-busy="true"] .nk-maanden{opacity:.6}
.nk-opties{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px}
.nk-personen{display:flex;flex-direction:column;gap:4px}
.nk-personen .lab{font-size:var(--t-12);font-weight:700;color:var(--text-2)}
.nk-personen .hint{font-size:var(--t-12);color:var(--muted)}
.nk-stepper{display:inline-flex;align-items:center;gap:4px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--field)}
.nk-stepper .ibtn{width:36px;height:36px}
.nk-stepper output{min-width:32px;text-align:center;font-size:var(--t-16);font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums}
.nk-ontbijt{align-items:flex-start;gap:8px;min-height:40px;font-size:var(--t-14);color:var(--text)}
.nk-ontbijt small{display:block;color:var(--muted);font-size:var(--t-12)}
.nk-ontbijt-in{display:flex;align-items:center;gap:8px;margin:0;min-height:40px;font-size:var(--t-14);color:var(--text)}
.nk-ontbijt-in .i{color:var(--green)}
.nk-keuze{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:stretch}
.nk-veld{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);min-width:0}
.nk-veld b{font-size:var(--t-16);color:var(--heading)}
.nk-veld small{font-size:var(--t-12);color:var(--muted)}
.nk-veld.aan{border-color:var(--kies-rand);background:var(--kies-zacht)}
.nk-keuze #nk-wis{align-self:center}
.nk-kalender{position:relative}
.nk-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none}
.nk-nav .ibtn{pointer-events:auto}
.nk-maanden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.nk-maand-titel{margin:0 0 8px;font-size:var(--t-16);line-height:32px;text-align:center;color:var(--heading);text-transform:capitalize}
.nk-dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.nk-dag{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:2px 0;border:1px solid transparent;border-radius:var(--r-sm);background:none;font:inherit;font-size:var(--t-14);color:var(--muted-2);cursor:default;font-variant-numeric:tabular-nums}
.nk-dag .nk-num{line-height:1.2}
.nk-dag .nk-p{font-size:var(--t-11);font-weight:500;line-height:1.2;color:var(--muted)}
.nk-dag.leeg{visibility:hidden}
.nk-dag.vrij{background:var(--inset);color:var(--heading);font-weight:600;cursor:pointer}
.nk-dag.vrij:hover{background:var(--card);border-color:var(--line-strong)}
.nk-dag.bezet{background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 8px),var(--inset);color:var(--muted)}
.nk-dag.voorbij{color:var(--muted-2)}
.nk-dag.tussen{background:var(--kies-zacht);color:var(--heading)}
.nk-dag.aankomst,.nk-dag.vertrek,.nk-dag.vrij.aankomst:hover,.nk-dag.vrij.vertrek:hover{background:var(--kies);border-color:var(--kies-rand);color:var(--op-kies)}
.nk-dag.aankomst .nk-p,.nk-dag.vertrek .nk-p{color:var(--op-kies)}
.nk-dag.vandaag::after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--orange)}
.nk-dag.aankomst.vandaag::after,.nk-dag.vertrek.vandaag::after{background:var(--op-kies)}
.nk-dag:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-color:var(--blue)}
.nk-reden{margin:0;min-height:20px;font-size:var(--t-13);color:var(--muted)}
.nk-reden.let{color:var(--text)}
.nk-prijs{padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--inset)}
.nk-prijs-leeg{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--t-14);color:var(--muted)}
.nk-prijs .boek-fout{margin:0}
.nk-prijs-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:4px}
.nk-prijs-wat{font-size:var(--t-14);font-weight:600;color:var(--heading)}
.nk-rijen{margin:0;display:flex;flex-direction:column}
.nk-rij{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 0;font-size:var(--t-14)}
.nk-rij dt{color:var(--text);min-width:0}
.nk-rij dd{margin:0;color:var(--heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.nk-rij.apart dt,.nk-rij.apart dd{color:var(--muted)}
.nk-rij.totaal{margin-top:4px;padding-top:8px;border-top:1px solid var(--line);font-weight:700}
.nk-rij.totaal dt,.nk-rij.totaal dd{color:var(--heading)}
.nk-rij.totaal dd{font-size:var(--t-16)}
.nk-rij.nu dt,.nk-rij.nu dd{font-weight:600;color:var(--heading)}
.nk-voorwaarde,.nk-verschil{margin:8px 0 0;font-size:var(--t-13);line-height:1.5;color:var(--muted)}
/* de aankomstinstructies in de zelfbediening (opruimronde 11 oktober): regeleinden zoals de organisatie ze schreef */
.nk-aankomst{white-space:pre-line}
.nk-verschil{color:var(--text)}
.nk-acties{margin-top:0}
.nk-fotos{display:flex;flex-direction:column;gap:8px;min-width:0}
.nk-foto-groot{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--inset)}
.nk-foto-groot img{display:block;width:100%;height:100%;object-fit:cover}
.nk-foto-rij{display:flex;gap:8px;overflow-x:auto;padding:2px}
.nk-foto-mini{flex:none;width:56px;height:42px;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);cursor:pointer}
.nk-foto-mini img{display:block;width:100%;height:100%;object-fit:cover}
.nk-foto-mini[aria-selected="true"]{border-color:var(--kies-rand);outline:2px solid var(--kies-rand);outline-offset:1px}
.nk-foto-mini:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
/* Foto's vergroten (13 oktober, wens van Jurgen: "een kind en opa moeten beide begrijpen dat het kan en hoe"; web/nachten.js kijker,
   stijlgids "Een fotostrook"). Op de grote foto altijd, niet pas bij hover: rechtsonder de knop Vergroten (.btn met een vergrootglas, op
   een telefoon 44 px hoog) en bij meer dan één foto linksonder de teller "1 / 3". Beide op een eigen vlak (--card met een haarlijn), zodat
   ze op een lichte en een donkere foto even goed leesbaar zijn; ze zweven, dus --shadow-md. De hele foto opent de kijker ook (cursor
   zoom-in); de knop is het zichtbare tikdoel. */
.nk-foto-groot{position:relative}
.nk-foto-groot img{cursor:zoom-in}
.nk-foto-knop{position:absolute;right:8px;bottom:8px;color:var(--heading);box-shadow:var(--shadow-md)}
.nk-foto-teller{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--heading);font-size:var(--t-13);font-weight:700;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-md);pointer-events:none}
/* De kijker: een <dialog> met showModal over het hele scherm op --kijker (in licht en donker hetzelfde donkere vlak). Bovenaan de naam en
   Sluiten (kruis met tekst, 48 px), in het midden de foto zo groot als past (object-fit: contain) met links en rechts de ronde pijlen Vorige
   en Volgende (56 px, op een telefoon 48 px, over de foto), onderaan de teller met de beschrijving en de miniaturen (horizontaal
   scrollbaar). De pagina eronder scrolt niet (html.nk-kijker-open). Bij prefers-reduced-motion geen animatie (ui.css). */
html.nk-kijker-open,html.nk-kijker-open body{overflow:hidden}
.nk-kijker{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--kijker);color:var(--kijker-text);overscroll-behavior:contain}
.nk-kijker[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:nk-kijker-in .16s ease-out}
.nk-kijker::backdrop{background:var(--kijker)}
@keyframes nk-kijker-in{from{opacity:0}to{opacity:1}}
.nk-kijker-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}
.nk-kijker-titel{min-width:0;font-size:var(--t-16);line-height:1.3;color:var(--kijker-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nk-kijker-sluit,.nk-kijker-pijl{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--kijker-rand);background:var(--kijker-soft);color:var(--kijker-text);font:inherit;cursor:pointer}
.nk-kijker-sluit{flex:none;gap:8px;min-height:48px;padding:0 16px;border-radius:var(--r-sm);font-size:var(--t-16);font-weight:700}
.nk-kijker-sluit .i{width:22px;height:22px}
@media (hover:hover){.nk-kijker-sluit:hover,.nk-kijker-pijl:hover{background:var(--kijker-rand)}} /* niet op een telefoon: daar blijft hover na een tik hangen */
.nk-kijker button:focus-visible{outline:3px solid var(--kijker-text);outline-offset:2px;box-shadow:none}
.nk-kijker-vlak{position:relative;min-height:0;margin:0 16px;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.nk-kijker-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.nk-kijker-pijl{position:absolute;top:50%;width:56px;height:56px;padding:0;border-radius:50%;transform:translateY(-50%)}
.nk-kijker-pijl.vorige{left:0}
.nk-kijker-pijl.volgende{right:0}
.nk-kijker-pijl .i{width:28px;height:28px}
.nk-kijker-voet{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.nk-kijker-onder{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px;font-size:var(--t-16);line-height:1.4;text-align:center;color:var(--kijker-text)}
.nk-kijker-tel{font-weight:700;font-variant-numeric:tabular-nums}
.nk-kijker-rij{max-width:100%;padding:4px}
.nk-kijker .nk-foto-mini{width:64px;height:48px;border-color:var(--kijker-rand);background:var(--kijker-soft)}
.nk-kijker .nk-foto-mini[aria-selected="true"]{border-color:var(--kijker-text);outline-color:var(--kijker-text)}
/* Wat zit erbij (schema stap 52, 13 oktober): de bedden en de oppervlakte op één regel, de voorzieningen in twee kolommen met een vinkje */
.nk-vz{display:flex;flex-direction:column;gap:8px;min-width:0}
.nk-vz-kort{margin:0;font-size:var(--t-14);color:var(--text)}
.nk-vz-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:var(--t-13);color:var(--text)}
.nk-vz-lijst li{display:flex;align-items:flex-start;gap:8px;min-width:0;overflow-wrap:anywhere}
.nk-vz-lijst .i{flex:none;color:var(--green-text);margin-top:2px}
.nk-overzicht{margin-top:16px}
.boek-kv.nk-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){
  .nk-maanden{gap:16px}
  .nk-dag{min-height:40px}
  .nk-dag .nk-p{font-size:var(--t-11)}
}
@media (max-width:760px){
  .nk-maanden{grid-template-columns:minmax(0,1fr)}
  .nk-maand+.nk-maand{display:none}
  .nk-nav .ibtn{width:40px;height:40px}
  .nk-maand-titel{line-height:40px}
  .nk-dag{min-height:44px}
  .nk-stepper .ibtn{width:40px;height:40px}
  .nk-keuze{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nk-keuze #nk-wis{grid-column:1/-1;justify-self:start;height:40px}
  .nk-foto-mini{width:56px;height:42px}
  .nk-foto-knop{height:44px;padding:0 16px}
  .nk-kijker-vlak{margin:0}
  .nk-kijker-pijl{width:48px;height:48px}
  .nk-kijker-pijl.vorige{left:8px}
  .nk-kijker-pijl.volgende{right:8px}
  .nk-kijker-sluit{padding:0 12px}
  .boek-kv.nk-kv{grid-template-columns:minmax(0,1fr)}
  /* telefoon eerst boeken (11 oktober): personen en ontbijt op één regel, aankomst en vertrek compact (in- en uitcheck staan al bovenaan) */
  .nk-opties{flex-wrap:nowrap;align-items:flex-end;gap:16px}
  .nk-personen .hint,.nk-veld small{display:none}
  .nk-veld{padding:6px 10px}
  .nk-veld b{font-size:var(--t-14)}
}

/* Zorg en studio (11 oktober, schema stap 47; web/zorg-klant.js; stijlgids "Plaatsen vrij" en "Een lijst van sessies"). Alleen zichtbaar bij
   een groep, een reeks of de wachtlijst; voor elke andere dienst staat hier niets in de pagina. Een sessie is een rij zoals een vrije dag
   (--inset, hover --card met een rand), met het uur, met wie, de chip met de plaatsen en een pijl; een volle sessie is effen --card met een
   haarlijn, gedempt, met de knop Zet me op de wachtlijst ernaast. */
.zk-lijst{display:flex;flex-direction:column;gap:16px}
.zk-dag{display:flex;flex-direction:column;gap:8px}
.zk-dagkop{margin:0;font-size:var(--t-13);font-weight:700;color:var(--text-2)}
.zk-rij{display:flex;align-items:center;gap:12px}
.zk-sessie{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 16px;border:1px solid transparent;border-radius:var(--r);background:var(--inset);color:var(--heading);font:inherit;font-size:var(--t-14);text-align:left}
button.zk-sessie{cursor:pointer}
button.zk-sessie:hover{background:var(--card);border-color:var(--line-strong)}
button.zk-sessie:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
button.zk-sessie[aria-current="true"]{border-color:var(--kies-rand);box-shadow:inset 0 0 0 1px var(--kies-rand)}
.zk-tijd{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.zk-tijd b{font-size:var(--t-16);font-weight:700;font-variant-numeric:tabular-nums}
.zk-tijd small{font-size:var(--t-12);color:var(--muted)}
.zk-wie{min-width:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk-pijl{width:18px;height:18px;color:var(--muted)}
.zk-rij.vol .zk-sessie{grid-template-columns:72px minmax(0,1fr) auto;background:var(--card);border-color:var(--line);color:var(--muted)}
.zk-rij.vol .zk-tijd b,.zk-rij.vol .zk-wie{color:var(--muted)}
.zk-wacht{flex:none}
.zk-meer{margin-top:12px}
.zk-skel{height:56px}
.zk-leeg{border:1px solid var(--line);border-radius:var(--r)}
.zk-wacht-link{margin:12px 0 0}
.boek-velden #zk-reeks{grid-column:1}
.zk-reeks-zin{margin:0}
.zk-klaar-reeks{margin-top:16px}
.zk-klaar-reeks .eyebrow{margin:0}
.zk-reeks-lijst{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--t-14)}
.zk-reeks-lijst li{display:flex;align-items:center;gap:8px;color:var(--heading)}
.zk-reeks-lijst .i{color:var(--green)}
.zk-reeks-lijst li.bezet{color:var(--muted);text-decoration:line-through}
.zk-reeks-lijst li.bezet .i{color:var(--muted)}
@media (max-width:760px){
  .zk-rij.vol{flex-direction:column;align-items:stretch;gap:8px}
  .zk-rij.vol .zk-wacht{width:100%;height:40px}
  .zk-sessie,.zk-rij.vol .zk-sessie{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"tijd wie pijl" "tijd plaatsen pijl";row-gap:6px}
  .zk-sessie .zk-tijd{grid-area:tijd}
  .zk-sessie .zk-wie{grid-area:wie}
  .zk-sessie .zk-plaatsen{grid-area:plaatsen;justify-self:start}
  .zk-sessie .zk-pijl{grid-area:pijl}
  .zk-wacht-link .btn{width:100%;height:40px;justify-content:center}
  .zk-meer{min-height:40px}
}
.zk-reeks-lijst li.weg{color:var(--muted);text-decoration:line-through}
.zk-reeks-lijst li.weg .i{color:var(--muted)}
.zk-reeks-lijst li.deze{font-weight:700}
.zk-welke{margin:16px 0}
.zk-welke .seg{align-self:flex-start}
@media (max-width:760px){.zk-welke .seg{align-self:stretch;display:flex}.zk-welke .seg button{flex:1;min-height:40px}}
.zk-reeks-lijst li.voorbij,.zk-reeks-lijst li.voorbij .i{color:var(--muted)}

/* De zaakpagina /b/<zaak> (11 oktober, golf 1 van de gebruiksvriendelijkheid; web/zaak.js, stijlgids "Een zaakpagina"). Eén kolom: de
   linkerkolom wordt een kop met logo en naam, daaronder de diensten als tegels (een tegel in de kaart, op --inset met een haarlijn, zoals
   een sessie of een vrije dag): naam, duur en prijs, de omschrijving op hoogstens twee regels, bij logies de foto links, bij een groep de chip
   met de plaatsen. De hele tegel is de link; meer dan zes diensten in groepen met een tussenkop. */
.boek-kaart.zaak{grid-template-columns:minmax(0,1fr);min-height:0}
.boek-kaart.zaak .boek-info{border-right:0;border-bottom:1px solid var(--line)}
.boek-kaart.zaak .boek-titel{font-size:var(--t-22)}
.zaak-diensten{display:flex;flex-direction:column;gap:24px}
.zaak-groep-blok{display:flex;flex-direction:column;gap:12px}
.zaak-kop{margin:0;font-size:var(--t-13);font-weight:700;color:var(--text-2)}
.zaak-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.zaak-dienst{display:flex;align-items:center;gap:16px;min-height:72px;padding:12px 12px 12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--inset);color:var(--heading);text-decoration:none;min-width:0}
.zaak-dienst:hover{background:var(--card);border-color:var(--line-strong);text-decoration:none}
.zaak-dienst:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-color:var(--blue)}
.zaak-dienst.met-foto{padding-left:12px}
.zaak-foto{flex:none;width:96px;height:72px;object-fit:cover;border-radius:var(--r-sm);background:var(--card)}
.zaak-tekst{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.zaak-naam{font-size:var(--t-16);line-height:1.3;color:var(--heading);overflow-wrap:break-word;hyphens:auto}
.zaak-feiten{font-size:var(--t-13);font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.zaak-oms{font-size:var(--t-13);line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zaak-groep{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px}
.zaak-volgende{font-size:var(--t-12);color:var(--muted)}
.zaak-pijl{flex:none;width:18px;height:18px;color:var(--muted)}
.zaak-leeg{border:1px solid var(--line);border-radius:var(--r)}
@media (max-width:760px){
  .zaak-lijst{grid-template-columns:minmax(0,1fr)}
  .zaak-foto{width:72px;height:56px}
  .boek-kaart.zaak .boek-titel{font-size:var(--t-18)}
}

/* De gekozen staat (11 oktober, golf 1): de tokens --kies, --op-kies, --kies-rand en --kies-zacht uit ui.css, die in het donker een lichte
   vulling geven in plaats van grafiet op grafiet. Ook het segment Maand | Week en Alleen deze | Deze en volgende op de klantpagina's. */
.boek .seg button[aria-pressed="true"]{background:var(--kies);color:var(--op-kies)}
/* Een fout die bij geen veld hoort, bovenaan de kiezer of de lijst (11 oktober, golf 1: eerlijke terugkoppeling) */
.boek-fout.boek-fout-boven{margin:0 0 16px}
/* Tijdzone in gewone woorden (11 oktober, golf 1): alleen bij een afspraak online, als een regel "Tijden in jouw tijd: Midden-Europese tijd
   (nu 10:00)" met de linkknop Wijzig, die de keuzelijst opent. Bij een afspraak ter plaatse staat er geen tijdzone. */
.boek-tz-zin{margin:0;font-size:var(--t-13);color:var(--muted);line-height:1.5}
.boek-tz-zin .i{color:var(--muted);vertical-align:-3px;margin-right:6px}
.boek-tz-zin .btn.link{display:inline;height:auto;min-height:0;margin-left:8px;padding:0;font-size:var(--t-13);vertical-align:baseline}
.boek-tz-kies{display:flex;flex-direction:column;gap:6px;margin-top:8px}
@media (max-width:760px){.boek-tz-zin .btn.link{display:inline-flex;align-items:center;min-height:40px;min-width:40px;vertical-align:middle}}

/* De kapper (12 oktober, golf 4; web/boek.js, web/zaak.js, stijlgids "Nog iets erbij?"). "Nog iets erbij?": een uitklapblok boven de
   eerstvolgende momenten met de andere behandelingen als vinkjes (tikdoel 44 px), in de samenvatting de gekozen behandelingen en de som. */
.boek-erbij{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--inset)}
.boek-erbij summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:8px 12px;cursor:pointer;list-style:none;font-size:var(--t-14);color:var(--heading)}
.boek-erbij summary::-webkit-details-marker{display:none}
.boek-erbij summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:var(--r)}
.boek-erbij summary .i{flex:none;color:var(--muted);transition:transform .15s}
.boek-erbij[open] summary .i{transform:rotate(180deg)}
.boek-erbij-kop{display:flex;flex-direction:column;gap:2px;min-width:0}
.boek-erbij-samen{font-size:var(--t-13);color:var(--text-2);font-variant-numeric:tabular-nums}
.boek-erbij-samen:empty{display:none}
.boek-erbij-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 16px;padding:0 12px 8px;border-top:1px solid var(--line)}
.boek-erbij-rij{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;cursor:pointer;font-size:var(--t-14);color:var(--heading)}
.boek-erbij-rij .t{display:flex;flex-direction:column;min-width:0}
.boek-erbij-rij b{font-weight:600}
.boek-erbij-rij small{color:var(--muted);font-size:var(--t-12);font-variant-numeric:tabular-nums}
.boek-gastheer.geen .avatar{background:var(--inset);color:var(--text-2);border:1px solid var(--line)}
.boek-betaal-delen{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.boek-betaal-rij.deel{font-size:var(--t-13);color:var(--text-2)}
.boek-betaal-rij.deel small{display:inline;margin-left:8px}
.boek-annuleer{display:flex;align-items:flex-start;gap:8px;max-width:640px;margin:12px 0 0;font-size:var(--t-13);line-height:1.5;color:var(--text-2)}
.boek-annuleer .i{flex:none;margin-top:2px;color:var(--green)}
.boek-annuleer+.boek-acties{margin-top:16px}
/* De zaakpagina met de module meerdere_diensten: naast elke tegel Kiezen, onderaan de mand met "Kies een moment". */
.zaak-item{display:flex;gap:8px;align-items:stretch;min-width:0}
.zaak-item .zaak-dienst{flex:1 1 auto}
.zaak-kies{flex:none;width:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--inset);color:var(--text-2);cursor:pointer;padding:0}
.zaak-kies:hover{background:var(--card);border-color:var(--line-strong)}
.zaak-kies:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.zaak-kies .aan{display:none}
.zaak-kies[aria-pressed="true"]{background:var(--kies);border-color:var(--kies-rand);color:var(--op-kies)}
.zaak-kies[aria-pressed="true"] .aan{display:block}
.zaak-kies[aria-pressed="true"] .uit{display:none}
.zaak-mand{position:sticky;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card)}
.zaak-mand-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.zaak-mand-tekst b{font-size:var(--t-14);color:var(--heading);overflow-wrap:break-word}
.zaak-mand-tekst span{font-size:var(--t-13);color:var(--text-2);font-variant-numeric:tabular-nums}
.zaak-mand .btn{flex:none}
@media (max-width:760px){
  .zaak-mand{flex-direction:column;align-items:stretch;gap:8px;bottom:8px}
  .zaak-mand .btn{width:100%;justify-content:center}
}