/* Planner: beheer. Alleen tokens uit ui.css; de schil komt uit ui.css (.shell, .side, .topbar, .content, .bottombar). */
/* Het beeldmerk van BitzPlanner (7 november, besluit Jurgen: de naam is BitzPlanner, het merk een kalender in de stijl van het
   BitzSEO-vergrootglas). ui.css houdt --merk op merk.svg (het SpaceBitz-logo, dat BitzSEO letterlijk overneemt); deze pagina's zetten het
   token op het eigen merk: bitzplanner.svg in het licht, bitzplanner-paper.svg in het donker. */
:root{--merk:url(bitzplanner.svg)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--merk:url(bitzplanner-paper.svg)} }
:root[data-theme="dark"]{--merk:url(bitzplanner-paper.svg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-kaart{width:min(420px,100%);padding:32px;display:flex;flex-direction:column;gap:16px}
.login-kaart .logo{align-self:flex-start}
.login-kaart h1{margin:8px 0 0;font-size:var(--t-22);color:var(--heading)}
.login-kaart .uitleg{margin:0;color:var(--muted);font-size:var(--t-14);line-height:1.5}
.login-kaart .btn.primary,.login-kaart .btn.breed{justify-content:center}
.login-of{margin:-4px 0;text-align:center;font-size:var(--t-12);color:var(--muted)}
/* Het oogje bij een wachtwoordveld (golf 3, bevinding 28): de knop staat in het veld, rechts, 40 bij 40. */
.ww-veld{position:relative}
.ww-veld .inp{padding-right:44px}
.ww-veld .ww-oog{position:absolute;top:0;right:0;color:var(--muted)}
.ww-veld .ww-oog:hover{background:transparent;color:var(--heading)}
.ww-veld .ww-oog:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.boek-fout{display:flex;align-items:center;gap:8px;margin:0;color:var(--red-text);font-size:var(--t-14)}
.b-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.b-kop h2{margin:4px 0 0;font-size:var(--t-26);color:var(--heading);line-height:1.15}
.b-kop .intro{margin:6px 0 0;color:var(--muted);font-size:var(--t-14);max-width:64ch}
.b-kop .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.b-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:16px;align-items:start}
.b-stapel{display:flex;flex-direction:column;gap:16px}
.card .cb{padding:16px 20px}
.card .cf{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;align-items:start}
.fgrid>.field{margin:0}
.fgrid .wide{grid-column:1/-1}
.fgrid.c3{grid-template-columns:repeat(3,1fr)}
.soort-kaart .cb{display:flex;flex-direction:column;gap:12px}
.soort-kaart .kop{display:flex;align-items:flex-start;gap:12px}
.soort-kaart .kop .bol{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none;margin-top:6px}
.soort-kaart .kop h3{margin:0;font-size:var(--t-16);color:var(--heading)}
.soort-kaart .kop .sub{color:var(--muted);font-size:var(--t-13)}
.soort-kaart .feiten{display:flex;flex-wrap:wrap;gap:6px}
.soort-kaart .link{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--t-12);color:var(--muted);min-width:0}
.soort-kaart .link code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* kop: de schakelaar Actief rechts naast de naam; voet: Bewerken, Dupliceren en Bekijk, op een smalle kaart over twee regels */
.b-grid.soort-grid{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
.soort-kaart .kop .tekst{flex:1;min-width:0}
.soort-kaart .kop .sw{flex:none}
.soort-kaart .voet{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.soort-kaart.uit{opacity:.6}
.werkuren{display:flex;flex-direction:column;gap:6px}
.werkuren .dag{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.werkuren .dag:last-child{border-bottom:0}
.werkuren .dag>label{display:flex;align-items:center;gap:8px;min-height:32px;font-weight:600;color:var(--heading)}
.werkuren .blokken{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.werkuren .blok{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%}
.werkuren .blok .inp{width:108px;padding-left:8px;padding-right:4px}
.werkuren .blok .tot{color:var(--muted);font-size:var(--t-13)}
.werkuren .dicht{color:var(--muted);font-size:var(--t-14);min-height:28px;display:flex;align-items:center}
.werkuren .dag:has(.dicht){grid-template-columns:120px minmax(0,1fr);align-items:center}
.uitz{display:flex;flex-direction:column;gap:6px}
.uitz .rij{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.uitz .rij:last-child{border-bottom:0}
.uitz .rij b{min-width:120px;color:var(--heading);font-weight:600}
.uitz .rij .sp{flex:1}
.uitz-nieuw{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.uitz-nieuw .field{margin:0}
.agendas{display:flex;flex-direction:column;gap:8px}
.agendas .rij{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.agendas .rij>.tekst{flex:1 1 180px;min-width:0}
.agendas .rij .acts{display:flex;gap:6px;align-items:center;margin-left:auto;flex:none}
.agendas .rij .n{font-weight:600;color:var(--heading)}
.agendas .rij small{display:block;color:var(--muted);font-size:var(--t-12)}
.agendas .rij .sp{flex:1}
/* Schema stap 36: Koppel Google-agenda en Koppel Microsoft 365-agenda naast elkaar en even breed; past dat niet, dan onder elkaar over de
   volle breedte (nooit de ene naast en de andere half eronder) */
.koppel-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.koppel-knoppen .btn{flex:1 1 220px;justify-content:center}
.vragen{display:flex;flex-direction:column;gap:8px}
.vragen .rij{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--line)}
.vragen .rij .v-label{flex:1 1 100%}
.vragen .rij .selw{flex:1 1 160px}
.vragen .rij .inl{flex:none}
.vragen .rij .v-opties{flex:1 1 100%}
.mails{display:flex;flex-direction:column;gap:16px}
.mails .veldgroep{display:grid;gap:8px}
.mails .veldgroep .ta{min-height:120px}
.placeholders{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.placeholders .chip{font-family:var(--mono);font-size:var(--t-11);cursor:pointer}
/* Mails aan en uit (lade van een dienst, stijlgids 4): het label links, de schakelaar Versturen rechts (.sw.mail-sw: compact, zonder
   haarlijn). Uit: het vak gedempt maar bewerkbaar (--inset, --muted, gestippelde rand) met "Wordt niet verstuurd." eronder. Op een
   telefoon is de schakelaar met zijn woord een tikdoel van 40 px hoog. */
.mail-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.mail-kop>label:first-child{min-width:0}
.sw.mail-sw{flex:none;justify-content:flex-end;gap:8px;padding:0;border-bottom:0}
.sw.mail-sw .t{font-size:var(--t-12);font-weight:600;color:var(--text-2)}
.mails .veldgroep.uit .ta,.mails .veldgroep.uit .inp{background:var(--inset);color:var(--muted);border-style:dashed}
.mails .veldgroep.uit .mail-kop>label:first-child,.mails .veldgroep.uit .sw.mail-sw .t{color:var(--muted)}
@media (max-width:560px){.sw.mail-sw{min-height:40px}}
/* Ook in cc (8 oktober): bovenaan de mails, het woordenveld met adressen en de twee vinkjes "Zet in cc bij", met een haarlijn onder
   het blok. Op een telefoon is elk vinkje met zijn tekst een tikdoel van 40 px hoog. */
.mails .mail-cc{display:grid;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.mail-cc .field{min-width:0}
@media (max-width:560px){.mail-cc .keuzes{flex-direction:column;gap:0}.mail-cc .keuzes .inl{min-height:40px;white-space:normal}}
/* Kenmerk op de kaart van een dienst als er mails uit staan ("2 mails uit"): een gewone chip, gedempt. */
.soort-kaart .chip.mails-uit{color:var(--muted)}
/* Voorbeeld van een mail (7 oktober): de knop Voorbeeld rechts onder het vak; de dialoog is breder dan een gewone (de mail is 560 px), met
   het onderwerp, de keuze ontvanger en weergave (.seg) en de mail in een iframe op het canvas (--bg) of de tekstversie in mono. Op een
   telefoon vult de dialoog de breedte en zijn de knoppen van .seg 40 px hoog. */
.mails .mail-voet{display:flex;justify-content:flex-end}
.modal .box.mail-vb{width:680px;max-height:calc(100vh - 32px);overflow-y:auto}
.mail-vb-onderwerp{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.modal .mb .mail-vb-onderwerp{color:var(--text);font-size:var(--t-14)}
.mail-vb-onderwerp b{font-size:var(--t-12);color:var(--text-2)}
.mail-vb-onderwerp span{min-width:0;overflow-wrap:anywhere} /* een lange regel Cc breekt binnen de dialoog */
.mail-vb-keuze{display:flex;flex-wrap:wrap;gap:8px}
.mail-vb-frame{display:block;width:100%;height:min(60vh,620px);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
.mail-vb-tekst{margin:0;height:min(60vh,620px);overflow:auto;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);font-family:var(--mono);font-size:var(--t-12);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
@media (max-width:560px){.mail-vb .seg button{min-height:40px}.mail-vb-frame,.mail-vb-tekst{height:50vh}}
.code{font-family:var(--mono);font-size:var(--t-12);line-height:1.6;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:12px;overflow:auto;white-space:pre;color:var(--text)}
.status-geboekt{--c:var(--blue-text)}.status-verzet{--c:var(--amber-text)}.status-geannuleerd{--c:var(--muted)}.status-plaatsgevonden{--c:var(--green-text)}.status-noshow{--c:var(--red-text)}
.st.boek{color:var(--c)}
.st.boek::before{background:var(--c)}
.drawer .db .kv{margin:0}
.drawer .form-kolom{display:flex;flex-direction:column;gap:20px}
.drawer .form-kolom h3{margin:0 0 8px;font-size:var(--t-13);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
/* Een kop met uitleg-icoontje (.lab-rij.kop, stijlgids 3.4): de marge van de kop gaat naar de rij, de kop zelf staat op 0. */
.drawer .form-kolom .lab-rij.kop{margin:0 0 8px}
.drawer .form-kolom .lab-rij>h3{margin:0}
.leeg-k{color:var(--muted);font-size:var(--t-14)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.sw:last-child{border-bottom:0}
.sw .t{font-weight:600;color:var(--heading);display:block}
.sw small{color:var(--muted);font-size:var(--t-12)}
.sw input{width:40px;height:24px;appearance:none;background:var(--line-strong);border-radius:var(--r-pill);position:relative;cursor:pointer;flex:none;margin:0}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--card)}
.sw input:checked{background:var(--navy-line)} /* licht: navy; donker: een lichte grijs, zodat aan en uit ook daar verschillen */
.sw input:checked::after{left:19px}
@media (max-width:1100px){.b-grid2{grid-template-columns:1fr}}
@media (max-width:900px){
  .topbar .search{display:none}
  .fgrid,.fgrid.c3{grid-template-columns:1fr}
}

/* Tikdoelen op een telefoon: elke knop, icoonknop, select en elk invoerveld in het beheer minstens 40 × 40 px. De compacte maten uit ui.css
   (.btn.sm 32, .btn.xs 28, .ibtn.ghost 32, knoppen in de ladevoet 36, filterselects 36, de rolkeuze 32) blijven op desktop; hier alleen een
   minimum, zodat de tekst en de breedte gelijk blijven. Hier en niet in ui.css: die is gedeeld met het dashboard. */
@media (max-width:560px){
  .btn,.drawer .df .btn,.pop button{min-height:40px}
  .btn:not(.link){min-width:40px}
  .ibtn,.drawer .df .ibtn,.tbl .acts .ibtn{min-width:40px;min-height:40px}
  .inp,.sel,.ta,.chip-sel select,select,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea{min-height:40px}
}
body.no-scroll{overflow:hidden}

/* formulierlade: breder dan de detaillade, twee gelijke kolommen met ruime tussenruimte, geen grijze linkerkant */
.drawer{width:960px}
.drawer:has(.db.vorm){width:1180px}
.drawer .db.vorm{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.drawer .db.vorm .dl{background:none;padding:24px 32px}
.drawer .db.vorm .dr{padding:24px 32px}
.drawer .db.vorm .fgrid{gap:16px 24px}
/* Plannen: op een breed scherm schuiven formulier en momentenlijst elk apart, zodat de lijst naar de gekozen dag kan springen */
@media (min-width:901px){.drawer .db.vorm.plannen{overflow:hidden;grid-template-rows:minmax(0,1fr)}.drawer .db.plannen>.dl,.drawer .db.plannen>.dr{overflow:auto;min-height:0}}
.p-melding{margin:0;padding:8px 12px;border:1px solid var(--amber-rand);background:var(--amber-soft);color:var(--text);border-radius:var(--r-sm);font-size:var(--t-13);line-height:1.5}
.p-melding[hidden]{display:none}
.content,.card,.b-grid2>*,.b-grid>*{min-width:0}
.content .tbl td.cell{white-space:normal}
.code{max-width:100%}
@media (max-width:900px){.drawer .db.vorm{grid-template-columns:1fr}.drawer .db.vorm .dl{border-right:0;border-bottom:1px solid var(--line)}}

.gebruikers{display:flex;flex-direction:column}
.gebruikers .rij{display:flex;align-items:center;gap:10px;padding:10px 20px;border-top:1px solid var(--line);min-width:0}
.gebruikers .rij .wie{flex:1;min-width:0}
.gebruikers .rij .wie b{display:block;color:var(--heading);font-weight:600;font-size:var(--t-14)}
.gebruikers .rij .wie small{display:block;color:var(--muted);font-size:var(--t-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gebruikers .rij .chip{flex:none}
.gebruikers .rij .nooit{display:flex;align-items:center;flex-wrap:wrap;gap:0 12px;margin-top:2px}
.gebruikers .rij .nooit .btn.link{font-size:var(--t-12)}
.gebruikers .rij .nooit small{white-space:normal}
/* Op een telefoon: naam, adres en Opnieuw sturen over de hele breedte; rol en intrekken eronder (ingesprongen tot de naam). */
@media (max-width:560px){
  .gebruikers .rij{flex-wrap:wrap;row-gap:4px;padding:12px 16px}
  .gebruikers .rij .wie{flex-basis:calc(100% - 34px)}
  .gebruikers .rij .wie~.chip,.gebruikers .rij .wie~.chip-sel{margin-left:34px}
  .gebruikers .rij .ibtn{margin-left:auto}
}

/* login in twee stappen */
.login-stap>div{display:flex;flex-direction:column;gap:16px}
.login-kaart .btn.link{align-self:flex-start}
.login-links{display:flex;flex-wrap:wrap;gap:4px 24px}
.login-links .btn.link{align-self:auto}

/* plannen voor een klant, verzetten: tabs en momenten */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.tab{appearance:none;border:0;background:none;font:inherit;font-size:var(--t-13);font-weight:600;color:var(--muted);padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;min-height:40px}
.tab[aria-selected="true"]{color:var(--heading);border-bottom-color:var(--navy)}
.tab:hover{color:var(--heading)}
.momenten{display:flex;flex-direction:column;gap:14px}
.momenten .dagblok h4{margin:0 0 6px;font-size:var(--t-13);color:var(--heading);font-weight:600}
.momenten .slots{display:flex;flex-wrap:wrap;gap:6px}
.momenten .slot{appearance:none;font:inherit;font-size:var(--t-13);font-weight:600;color:var(--text);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-sm);min-height:40px;padding:0 12px;cursor:pointer;font-variant-numeric:tabular-nums}
.momenten .slot:hover{border-color:var(--navy-line);background:var(--navy-soft)}
.momenten .slot[aria-pressed="true"]{background:var(--navy);border-color:var(--navy-line);box-shadow:0 0 0 1px var(--navy-line);color:var(--on-navy)}
/* een volle sessie in Plannen voor een klant (opruimronde 11 oktober): zichtbaar, niet te kiezen */
.momenten .slot:disabled{color:var(--muted);background:var(--inset);border-color:var(--line);cursor:default}
.drawer .db.enkel{grid-template-columns:1fr}
.drawer .uitleg{margin:0 0 12px;color:var(--muted);font-size:var(--t-13);line-height:1.5}
.drawer .blk .ta{min-height:88px}
.drawer .blk .inl{margin-top:8px}

/* open voorstellen en links */
.open-lijst{margin-bottom:16px}
.open-lijst .rijen{display:flex;flex-direction:column}
.open-lijst .rij{display:flex;align-items:center;gap:10px;padding:10px 20px;border-top:1px solid var(--line);min-width:0}
.open-lijst .rij .wie{flex:1;min-width:0}
.open-lijst .rij .wie b{display:block;color:var(--heading);font-weight:600;font-size:var(--t-14)}
.open-lijst .rij .wie small{display:block;color:var(--muted);font-size:var(--t-12)}
.agendas .rij.fout{border-color:var(--red-rand-strong)}
.agendas .rij.fout>.i{color:var(--red-text)}
.agendas .rij small b{color:var(--red-text);font-weight:600}
.tag.warn{color:var(--red-text);border-color:var(--red-rand-strong)}
.gebruikers .rij .chip-sel select{height:32px;font-size:var(--t-12);max-width:160px}
.card .cf .hint{color:var(--muted);font-size:var(--t-12)}

/* keuzelijsten met vinkjes, agenda-rijen en opeenvolgende velden in de lade */
.keuzes{display:flex;flex-wrap:wrap;gap:8px 16px}
.keuzes .inl{white-space:nowrap}
.drawer .form-kolom>div:not(.fgrid)>.field+.field{margin-top:14px}
.drawer .form-kolom .sw{margin-top:4px}

/* topbalk zoals het dashboard: accountmenu rechts */
.acc-wrap{position:relative}
.acc-menu{min-width:240px}
.acc-menu .user{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.acc-menu .user .n{font-weight:700;color:var(--heading);font-size:var(--t-14)}
.acc-menu .user .r{color:var(--muted);font-size:var(--t-12)}
.topbar .acc .avatar{width:32px;height:32px}

/* Zijbalk: bovenaan de navigatie voor elke dag (Plannen, Beheer), vast onderaan de voet met de instellingen (Organisatie,
   Koppelingen, Abonnement) en daaronder de ingelogde persoon. Dezelfde links als erboven (.nav a, navy als actief), iets compacter, met een
   eyebrow en de haarlijn van .foot erboven. De navigatie krimpt niet: bij een laag venster scrolt de zijbalk (.side heeft overflow:auto) en
   schuift niets over de voet. Op een telefoon staan de instellingen onder Meer in de bottombar (#meer-knop, .meer-menu boven de balk). */
.side .nav{flex:1 0 auto}
.side .foot{flex:none;padding:8px 12px 16px}
.side .foot .nav{flex:none;padding:0 0 8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.side .foot .grp{padding:8px 12px 4px}
.side .foot .nav a{height:36px;font-size:var(--t-13)}
.side .foot .nav a .i{width:18px;height:18px}
.side .foot .user{padding:4px 12px 0}
.bottombar .meer-knop,.meer-menu{display:none}
@media (max-width:900px){
  .bottombar .meer-knop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0;border:0;background:none;font:inherit;font-size:var(--t-11);font-weight:700;color:var(--muted);cursor:pointer}
  .bottombar .meer-knop[aria-expanded="true"],.bottombar .meer-knop.aan{color:var(--heading)}
  .bottombar .meer-knop.aan .i{color:var(--heading)}
  .meer-menu:not([hidden]){display:grid;position:fixed;top:auto;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:31;min-width:240px;max-width:calc(100vw - 16px)}
  .meer-menu .grp{font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
  .meer-menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);color:var(--text-2);font-size:var(--t-14);font-weight:600;text-decoration:none}
  .meer-menu a:hover{background:var(--surface-2);color:var(--heading)}
  .meer-menu a[aria-current="page"]{background:var(--navy);color:var(--on-navy)}
}

.inbegrepen{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.inbegrepen li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-14);color:var(--text);line-height:1.5}
.inbegrepen .i{color:var(--green-text);flex:none;margin-top:3px}
.inbegrepen b{color:var(--heading);font-weight:600}
.uitleg code{font-family:var(--mono);font-size:var(--t-12);background:var(--inset);padding:1px 5px;border-radius:4px}
@media (max-width:560px){
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:8px}
  .kv dt:first-child{margin-top:0}
  .open-lijst .rij{flex-wrap:wrap}
  .open-lijst .rij .wie{flex-basis:100%;order:3}
  .tbl td.cell .chip,.tbl td.cell .tag{white-space:normal;height:auto;min-height:26px;padding-top:2px;padding-bottom:2px;text-align:left}
  .tbl td.cell > *{text-align:left}
  .tbl td.cell{flex-wrap:wrap}
}

.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.weeknav{display:inline-flex;align-items:center;gap:4px}

/* Organisatie › Modules: schakelaars in twee kolommen op een breed scherm; de onderste rij zonder haarlijn */
.modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.modules .sw:nth-last-child(2){border-bottom:0}
.card .cf .hint:first-child{margin-right:auto}
@media (max-width:560px){.modules{grid-template-columns:minmax(0,1fr)}.modules .sw:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* Weekrooster (stand Boekingen en stand Team, stap 3 en het uurrooster): links de uren, zeven dagkaarten met rijen van een halfuur (--rij),
   alle uren van het bereik zichtbaar; de pagina scrolt, het rooster niet, en de dagkoppen blijven onder de topbar staan. Geometrie komt uit
   beheer.js als --top en --h (procent van het bereik) en --l en --n (baan l van n bij overlap); het bereik zelf als --rijen. */
.weekstand button{white-space:nowrap}
.tw-legend,.rd-legend{align-items:center}
.tw-legend .tw-laden,.rd-legend .tw-laden{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.tw-legend .tw-laden.fout,.rd-legend .tw-laden.fout{color:var(--red-text)}
.legend i.tw-sw{width:12px;height:12px;border-radius:3px;box-sizing:border-box}
.tw-sw.vrij{background:var(--card);border:1px solid var(--line-strong)}
.tw-sw.boeking{background:var(--navy);border:1px solid var(--navy-line)}
.tw-sw.blok{background:repeating-linear-gradient(135deg,var(--line-strong) 0 3px,var(--surface-2) 3px 6px);border:1px solid var(--line-strong)}
.tw-sw.agenda{background:repeating-linear-gradient(45deg,var(--line-strong) 0 1px,transparent 1px 4px),var(--inset);border:1px solid var(--line-strong);border-left:3px solid var(--muted-2)}
.tw-sw.voorstel{background:var(--navy-soft);border:1px dashed var(--navy-line)}
.rooster{--rij:24px;display:grid;grid-template-columns:48px repeat(7,minmax(0,1fr));grid-template-rows:auto auto;column-gap:8px;margin-top:16px}
.rd,.rd-uren{grid-row:span 2;display:grid;grid-template-rows:subgrid;min-width:0}
.rd{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.rd-kop{position:sticky;top:calc(var(--demobar) + var(--topbar));z-index:4;background:var(--card);border-radius:var(--r) var(--r) 0 0;border-bottom:1px solid var(--line);min-width:0}
.rd-uren .rd-kop{background:var(--bg);border-bottom-color:transparent}
.rd h3{margin:0;padding:8px 12px;font-size:var(--t-13);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.rd h3 b{display:block;font-size:var(--t-18);color:var(--heading);letter-spacing:0;text-transform:none}
.rd.vandaag h3 b{color:var(--orange)}
.rd.voorbij,.rd.voorbij .rd-kop{background:var(--inset)}
.rd.voorbij h3 b{color:var(--muted)}
.rd-heel{display:flex;flex-direction:column;gap:4px;padding:0 8px 8px;min-width:0}
.rd-af{appearance:none;display:flex;align-items:center;min-height:24px;max-width:100%;box-sizing:border-box;margin:0;padding:2px 4px;border:1px solid var(--line-strong);border-radius:4px;background:repeating-linear-gradient(135deg,var(--line-strong) 0 6px,var(--surface-2) 6px 12px);font:inherit;font-size:var(--t-11);font-weight:700;color:var(--heading);text-align:left}
.rd-af span{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--card);border-radius:3px;padding:0 4px}
button.rd-af{cursor:pointer}
.rd-body{padding:8px;min-width:0}
.rd-uren .rd-body{padding:8px 0}
.rd-as{position:relative;height:calc(var(--rijen) * var(--rij))}
.rd-as span{position:absolute;right:6px;top:var(--top);transform:translateY(-50%);font-size:var(--t-11);font-weight:600;color:var(--text-2);white-space:nowrap}
/* het verleden: uurlabels tot nu in --muted, het uurlabel naast het tijdlabel van de nu-lijn wijkt; het tijdlabel zelf in de kleur van de lijn */
.rd-as span.voorbij{color:var(--muted)}
.rd-as span.wijkt{visibility:hidden}
.rd-nu-tijd{position:absolute;right:2px;top:var(--top);transform:translateY(-50%);z-index:1;padding:0 4px;border-radius:3px;background:var(--bg);font-size:var(--t-11);font-weight:700;line-height:16px;color:var(--orange-text);white-space:nowrap}
.rd-kol{position:relative;display:grid;grid-template-columns:repeat(var(--mensen),minmax(0,1fr));gap:4px;height:calc(var(--rijen) * var(--rij))}
/* een kolom: buiten de werkuren grijs, de werkuren als wit vlak, daarover de lijnen van elk uur (vol) en elk halfuur (licht) */
.rd-vak{position:relative;isolation:isolate;min-width:0;background:var(--surface-2);border-radius:4px;cursor:pointer}
.rd.voorbij .rd-vak{cursor:default}
/* Het verleden in een kolom (voorbije dag helemaal, vandaag tot de nu-lijn): een rustig vlak op --inset met een fijne haarlijnarcering, boven
   de werkuren en onder de blokken; het neemt de klik en de hover over (cursor standaard). Anders dan afwezigheid (brede strepen) en bezet (vol). */
.rd-verl{position:absolute;left:0;right:0;top:0;z-index:1;height:var(--h);border-radius:4px 4px 0 0;background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 8px),var(--inset);cursor:default}
.rb.voorbij,.tw-b.voorbij{opacity:.6}
.rb.weg.voorbij{opacity:.45}
.rd-vak::before,.rd-vak::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}
.rd-vak::before{background:repeating-linear-gradient(to bottom,transparent 0 var(--rij),var(--line) var(--rij) calc(var(--rij) + 1px),transparent calc(var(--rij) + 1px) calc(2 * var(--rij)));opacity:.55}
.rd-vak::after{background:repeating-linear-gradient(to bottom,transparent 0 calc(2 * var(--rij) - 1px),var(--line) calc(2 * var(--rij) - 1px) calc(2 * var(--rij)))}
.tw-wie{display:grid;grid-template-columns:repeat(var(--mensen),minmax(0,1fr));gap:4px;padding:0 8px 6px;align-items:center;justify-items:center}
.tw-av{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.tw-av .tw-n{display:none;font-size:var(--t-12);font-weight:600;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-vrij{position:absolute;left:0;right:0;top:var(--top);height:var(--h);background:var(--card);border:1px solid var(--line);border-radius:4px;box-sizing:border-box}
/* stand Team: blokken per bron */
.tw-b{position:absolute;z-index:2;left:2px;right:2px;top:var(--top);height:var(--h);box-sizing:border-box;border:0;border-radius:4px;padding:2px 4px;margin:0;font:inherit;font-size:var(--t-11);font-weight:600;line-height:1.3;text-align:left;overflow:hidden;display:block;min-height:3px}
.tw-b span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-b .tw-tijd{display:none}
button.tw-b{appearance:none;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.tw-b.boeking{background:var(--navy);color:var(--on-navy);border:1px solid var(--navy-line)}
.tw-b.boeking:hover{background:var(--navy-700)}
.tw-b.blok{background:repeating-linear-gradient(135deg,var(--line-strong) 0 6px,var(--surface-2) 6px 12px);color:var(--heading);border:1px solid var(--line-strong)}
.tw-b.blok span{font-weight:700}
/* een afspraak uit een gekoppelde agenda (Team en Boekingen): gedempt, fijn gearceerd op --inset, grijze accentlijn links; de echte duur,
   zonder minimale hoogte die de tijd zou vervormen. Klik opent de details (een knop, dus nooit een plek om te plannen). */
.tw-b.agenda,.rb-ag{background:repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 6px),var(--inset);border:1px solid var(--line-strong);border-left:3px solid var(--muted-2);color:var(--text-2)}
button.tw-b.agenda:hover,button.rb-ag:hover{border-color:var(--navy-line);border-left-color:var(--navy-line)}
.tw-b.agenda.mini span{display:none}
.rb-ag{position:absolute;z-index:2;left:2px;right:2px;top:var(--top);height:var(--h);box-sizing:border-box;min-height:2px;margin:0;padding:1px 6px;border-radius:4px;font:inherit;font-size:var(--t-12);line-height:1.3;text-align:left;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;appearance:none;cursor:pointer}
.rb-ag .rb-r1{font-weight:600}
.rb-ag .rb-r2{color:var(--muted)}
.rb-ag.kort .rb-r2,.rb-ag.mini span{display:none}
.rb-ag.voorbij{opacity:.6}
/* een boeking of afwezigheid over een agenda-afspraak schuift opzij: links blijft 30 % van de agenda zichtbaar en klikbaar */
.rb.naast-ag{--ag:30%}
.rb-ag.onder .rb-r1,.rb-ag.onder .rb-r2{max-width:calc(30% - 12px)}
.rd-af.ag{background:repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 6px),var(--inset);border-left:3px solid var(--muted-2);font-weight:600;color:var(--text-2)}
.rd-af.ag span{background:none;padding:0}
/* Kleur van een gekoppelde agenda (regels.kleur, 7 oktober): dezelfde reeks als de diensten, via de --cal-*-tokens zoals .rb.k-*. Het blok
   blijft een agenda: gearceerd op --inset, nooit gevuld zoals een boeking; arcering en rand in --eb, accentlijn links in --c, tekst in --ec. */
.ag-k.k-blauw{--c:var(--blue-text);--eb:var(--cal-blue-b);--ec:var(--cal-blue-c)}
.ag-k.k-groen{--c:var(--green-text);--eb:var(--cal-green-b);--ec:var(--cal-green-c)}
.ag-k.k-oranje{--c:var(--orange);--eb:var(--cal-orange-b);--ec:var(--cal-orange-c)}
.ag-k.k-paars{--c:var(--purple-text);--eb:var(--cal-purple-b);--ec:var(--cal-purple-c)}
.ag-k.k-navy{--c:var(--navy-line);--eb:var(--line-strong);--ec:var(--heading)}
.ag-k.k-teal{--c:var(--teal-text);--eb:var(--teal-rand);--ec:var(--teal-text)}
.ag-k.k-rood{--c:var(--red-text);--eb:var(--cal-red-b);--ec:var(--cal-red-c)}
.ag-k.k-roze{--c:var(--pink);--eb:var(--pink-rand);--ec:var(--pink-text)}
.ag-k.k-geel{--c:var(--yellow);--eb:var(--yellow-rand);--ec:var(--yellow-text)}
.ag-k.k-bruin{--c:var(--brown);--eb:var(--brown-rand);--ec:var(--brown-text)}
.ag-k.k-limoen{--c:var(--lime);--eb:var(--lime-rand);--ec:var(--lime-text)}
.tw-b.agenda.ag-k,.rb-ag.ag-k,.rd-af.ag.ag-k{background:repeating-linear-gradient(45deg,var(--eb) 0 1px,transparent 1px 6px),var(--inset);border-color:var(--eb);border-left-color:var(--c);color:var(--ec)}
.tw-sw.agenda.ag-k{background:repeating-linear-gradient(45deg,var(--eb) 0 1px,transparent 1px 4px),var(--inset);border-color:var(--eb);border-left-color:var(--c)}
/* het bolletje met de kleur van een koppeling: in de rij van de lade, in de lade van een afspraak en (groot) als keuze in de dialoog */
.ag-bol{display:inline-block;flex:none;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--c);vertical-align:middle;box-sizing:border-box}
.ag-bol.grijs{background:repeating-linear-gradient(45deg,var(--line-strong) 0 1px,var(--inset) 1px 3px);border:1px solid var(--line-strong)}
.kv .inl .ag-bol{margin:5px 0 0;align-self:flex-start}
.st.boek.ag-k{color:var(--ec)}
.ag-vink{min-height:40px;font-weight:600;color:var(--text-2);white-space:nowrap;cursor:pointer}
/* de lade van een agenda-afspraak: dezelfde opbouw en maat als de lade van een boeking (.dl met Agenda en Waar, .dr met Omschrijving en
   Telt als bezet); in "Telt als bezet" de uitleg en voor de eigenaar of de beheerder de knoppen naar Instellingen van de koppeling */
.drawer .ag-lade .kv .inl{margin-top:0}
.drawer .ag-lade .ag-telt .uitleg{margin:0 0 12px;color:var(--text-2)}
.ag-acties{display:flex;flex-wrap:wrap;gap:8px}
.ag-acties+.hint{margin-top:8px}
/* op een telefoon past "Open in agenda" niet naast de titel: alleen het icoon (de naam blijft voor schermlezers), 40 px breed */
@media (max-width:560px){.drawer .dh .ag-open{width:40px;padding:0;justify-content:center}.drawer .dh .ag-open .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.status-agenda{--c:var(--muted)}
.ag-tekst{margin:0;white-space:pre-line;overflow-wrap:anywhere;color:var(--text);font-size:var(--t-14);line-height:1.5}
.tw-b.voorstel{background:var(--navy-soft);border:1px dashed var(--navy-line)}
/* stand Boekingen: een boeking in de kleur van haar dienst (de agenda-tokens), naast elkaar bij overlap */
.rb{position:absolute;z-index:2;top:var(--top);height:var(--h);left:calc(var(--ag,0%) + var(--l,0) * (100% - var(--ag,0%)) / var(--n,1) + 2px);width:calc((100% - var(--ag,0%)) / var(--n,1) - 4px);box-sizing:border-box;min-height:12px;margin:0;padding:2px 6px;border:1px solid var(--eb);border-left:3px solid var(--c);border-radius:4px;background:var(--ebg);color:var(--ec);font:inherit;font-size:var(--t-12);line-height:1.3;text-align:left;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
button.rb{appearance:none;cursor:pointer}
button.rb:hover{border-color:var(--c)}
.rb-r1,.rb-r2{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-r1 b{font-weight:700}
.rb-r2{font-size:var(--t-11);font-weight:600}
.rb.kort{padding-top:1px;padding-bottom:1px}
.rb.kort .rb-d,.rb.kort .rb-r2{display:none}
.rb.weg{opacity:.55;text-decoration:line-through}
/* Stil verversen (web/ververs.js, stijlgids 4): wat nieuw of gewijzigd binnenkwam, licht eenmalig op. In de week een rand van 2 px in --blue
   rond het blok (opkomen, even staan, wegebben in 2,4 s), in Boekingen de rij op --blue-soft. Met minder beweging (ui.css zet animaties
   uit) een vaste markering die beheer.js na dezelfde tijd weghaalt. Geen melding, geen geluid. */
@keyframes vers-blok{0%{outline-color:transparent}15%,65%{outline-color:var(--blue)}100%{outline-color:transparent}}
@keyframes vers-rij{0%{background-color:transparent}15%,65%{background-color:var(--blue-soft)}100%{background-color:transparent}}
.rooster .vers{outline:2px solid transparent;outline-offset:1px;animation:vers-blok 2.4s ease-in-out both}
.tbl tbody tr.vers{animation:vers-rij 2.4s ease-in-out both}
@media (prefers-reduced-motion:reduce){.rooster .vers{outline-color:var(--blue)}.tbl tbody tr.vers{background-color:var(--blue-soft)}}
.rb.vraag{border-style:dashed;border-left-style:solid}
.rb.k-blauw{--c:var(--blue-text);--eb:var(--cal-blue-b);--ebg:var(--cal-blue-bg);--ec:var(--cal-blue-c)}
.rb.k-groen{--c:var(--green-text);--eb:var(--cal-green-b);--ebg:var(--cal-green-bg);--ec:var(--cal-green-c)}
.rb.k-oranje{--c:var(--orange);--eb:var(--cal-orange-b);--ebg:var(--cal-orange-bg);--ec:var(--cal-orange-c)}
.rb.k-paars{--c:var(--purple-text);--eb:var(--cal-purple-b);--ebg:var(--cal-purple-bg);--ec:var(--cal-purple-c)}
.rb.k-navy{--c:var(--navy-line);--eb:var(--navy-line);--ebg:var(--navy-soft);--ec:var(--heading)}
.rb.k-teal{--c:var(--teal-text);--eb:var(--teal-rand);--ebg:var(--teal-soft);--ec:var(--teal-text)}
/* de kleuren van 13 oktober: rood uit de bestaande --red- en --cal-red-tokens, de andere uit hun familie (--x, --x-rand, --x-soft, --x-text) */
.rb.k-rood{--c:var(--red-text);--eb:var(--cal-red-b);--ebg:var(--cal-red-bg);--ec:var(--cal-red-c)}
.rb.k-roze{--c:var(--pink);--eb:var(--pink-rand);--ebg:var(--pink-soft);--ec:var(--pink-text)}
.rb.k-geel{--c:var(--yellow);--eb:var(--yellow-rand);--ebg:var(--yellow-soft);--ec:var(--yellow-text)}
.rb.k-bruin{--c:var(--brown);--eb:var(--brown-rand);--ebg:var(--brown-soft);--ec:var(--brown-text)}
.rb.k-limoen{--c:var(--lime);--eb:var(--lime-rand);--ebg:var(--lime-soft);--ec:var(--lime-text)}
.rb.blok{--c:var(--muted-2);--eb:var(--line-strong);--ec:var(--heading);background:repeating-linear-gradient(135deg,var(--line-strong) 0 6px,var(--surface-2) 6px 12px);gap:2px}
.rb.blok span{align-self:flex-start;max-width:100%;box-sizing:border-box;background:var(--card);border-radius:3px;padding:0 4px}
/* nu-lijn op vandaag en de markering bij hover (alleen met een muis) */
.rd-nu{position:absolute;left:-6px;right:-2px;top:var(--top);height:2px;margin-top:-1px;background:var(--orange);z-index:3;pointer-events:none}
.rd-nu::before{content:"";position:absolute;left:-2px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.rd-hover{position:absolute;z-index:3;left:2px;right:2px;top:var(--top);height:var(--h);box-sizing:border-box;border:1px dashed var(--navy-line);background:var(--navy-soft);border-radius:4px;pointer-events:none;display:flex;align-items:flex-start;padding:2px 6px;font-size:var(--t-12);font-weight:700;color:var(--heading);overflow:hidden;white-space:nowrap;line-height:1.3}
.rd-hover[hidden]{display:none}
.rooster.team .rd-hover{padding:2px 0;justify-content:center;font-size:var(--t-11);letter-spacing:-.01em}
.rooster.team .rd-hover .w{display:none}
.tw-dagnav{display:none;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.tw-dagnav b{color:var(--heading);font-size:var(--t-14);text-align:center}
@media (max-width:1100px){.rooster{grid-template-columns:40px repeat(7,minmax(0,1fr));column-gap:4px}.rd-body{padding:4px}.rd-heel{padding:0 4px 4px}.rd-uren .rd-body{padding:4px 0}.tw-wie{padding:0 4px 6px;gap:2px}.rd-kol{gap:2px}.rd h3{padding:8px}}
@media (max-width:700px){
  .rooster{--rij:40px;grid-template-columns:44px minmax(0,1fr);column-gap:8px}
  .rd-body{padding:8px}.rd-uren .rd-body{padding:8px 0}
  .rd:not(.gekozen){display:none}
  .tw-dagnav{display:flex}
  .tw-wie{justify-items:start;padding:0 8px 8px;gap:6px}
  .tw-av .tw-n{display:inline}
  .rd-kol{gap:6px}
  .tw-b{font-size:var(--t-12);padding:4px 6px}
  .tw-b .tw-tijd{display:inline}
  .rb{padding:2px 8px}
  .rb.kort{padding-top:2px;padding-bottom:2px}
  .rb.kort .rb-r2{display:block}
  .rb.kort .rb-d{display:inline}
  .rb-ag{padding:2px 8px}
  .rb-ag.mini{padding-top:1px;padding-bottom:1px}
  /* een afspraak van een kwartier is hier 20 px hoog (de echte duur); het tikvlak is 40 px, onzichtbaar, zonder de tijd te vervormen */
  .rb-ag.mini,.tw-b.agenda.mini{overflow:visible}
  .rb-ag.mini::after,.tw-b.agenda.mini::after{content:"";position:absolute;left:0;right:0;top:50%;height:40px;transform:translateY(-50%)}
  .rb-ag.mini .rb-r1,.rb-ag.kort .rb-r2,.tw-b.agenda.mini span{display:block}
  .tw-b.agenda.mini .tw-tijd{display:inline}
  .rd-heel{flex-direction:row;flex-wrap:wrap}
  .rd-af{min-height:40px;padding:4px 8px;font-size:var(--t-12)}
}

/* afwezigheid in de lade van een aanbieder en de dialoog Afwezig melden */
.afw{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.afw-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.afw-kop .lab{font-size:var(--t-12);font-weight:700;color:var(--text-2)}
.afw .uitz .rij span:not(.sp){color:var(--muted);font-size:var(--t-13)}
#dialoog:has(.af-vorm) .box{max-height:calc(100dvh - 32px);overflow:auto}
.af-heel{min-height:40px;align-items:center}
.af-keuze{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:2px}
.af-keuze legend{padding:0;margin-bottom:4px;font-size:var(--t-12);font-weight:700;color:var(--text-2)}
.af-radio{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-size:var(--t-14);color:var(--text)}
.af-radio input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--navy-line)}
.af-keuze .hint{margin:4px 0 0;color:var(--muted);font-size:var(--t-12);line-height:1.5}
.af-fout{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--red-rand);border-radius:var(--r-sm);background:var(--red-soft);color:var(--red-text);font-size:var(--t-13)}
.af-fout span{color:var(--text)}
.af-weg .rij{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text);padding:4px 0}

/* synchronisatiestatus per agenda */
.agendas .rij .n .st{margin-left:8px;vertical-align:middle}
.agendas .rij small.sync{margin-top:2px}
@media (max-width:640px){
  .agendas .rij .acts .btn.xs,.afw .btn.sm,.af-weg .btn.sm{height:40px}
  .agendas .rij .acts .ibtn.ghost{width:40px;height:40px}
  .weekstand button,.weeknav .btn.sm{height:40px}
}
#g-agendas + .fgrid{margin-top:12px}

/* Lade van een dienst › Meer instellingen: ingeklapt, haarlijn erboven, kop zoals de andere secties, chevron draait bij openen */
details.meer{border-top:1px solid var(--line);padding-top:4px}
details.meer>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}
details.meer>summary::-webkit-details-marker{display:none}
.drawer .form-kolom details.meer>summary h3{margin:0}
details.meer>summary .i{color:var(--muted);transition:transform .15s}
details.meer[open]>summary .i{transform:rotate(180deg)}
details.meer>summary:hover h3,details.meer>summary:hover .i{color:var(--heading)}
details.meer .meer-tel{margin-left:auto;font-size:var(--t-12);color:var(--muted)}
details.meer .meer-inhoud{display:flex;flex-direction:column;gap:16px;padding-top:8px}
details.meer .field{margin:0}
.dagen7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.dagen7 .inp{padding-left:8px;padding-right:4px}
@media (max-width:560px){.dagen7{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Lade van een dienst › Tijd › Buffer tussen boeken en gesprek (schema stap 37): één blok over de volle breedte van de fgrid, op dezelfde kolommen
   (subgrid): de keuzelijst over twee kolommen (bij Anders… met getal en eenheid ernaast), het vinkje Weekend telt niet mee in de derde (alleen
   bij dagen), daaronder de zin met de uitkomst. Wat de instelling is, staat in het uitleg-icoontje naast het label (#s-buffer-hint). Onder 900 px (de fgrid heeft dan één kolom) staat alles onder elkaar. */
.fgrid>.voorloop{display:grid;grid-template-columns:subgrid;column-gap:normal;row-gap:6px;align-items:end}
.voorloop>.voorloop-keuze{grid-column:1/span 2;grid-row:1;min-width:0}
.voorloop>.voorloop-werk{grid-column:3;grid-row:1;min-height:40px;font-size:var(--t-13);font-weight:500;letter-spacing:0;color:var(--text);cursor:pointer}
.voorloop>.voorloop-zin{grid-column:1/-1;grid-row:2;font-size:var(--t-13);color:var(--text-2)}
.voorloop>.voorloop-zin.err{color:var(--red-text)}
.voordag{display:flex;align-items:center;gap:8px;min-width:0}
.voordag>.selw{flex:1;min-width:0}
.voordag-anders{display:flex;align-items:center;gap:8px;flex:none}
.voordag-anders .inp{width:80px}
.voordag-anders .selw{width:104px}
@media (max-width:900px){
  .fgrid>.voorloop{grid-template-columns:minmax(0,1fr)}
  .voorloop>.voorloop-keuze,.voorloop>.voorloop-werk,.voorloop>.voorloop-zin{grid-column:1/-1;grid-row:auto}
}

/* Organisatie › Beveiliging: velden onder de vaste lijst, gescheiden door een haarlijn */
.bev-velden{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.bev-velden .ta{min-height:88px}
.bev-velden .sw{border-bottom:0;padding-bottom:0}

/* Stap 4: klanten met klantkaart. Lijst met zoeken in de kaart; lade van 960 px met twee gelijke kolommen (contact links, historiek en
   notities rechts), op een telefoon onder elkaar. */
.kl-kaart .filters .search{flex:1 1 320px;max-width:420px}
.kl-kaart .filters .count{margin-left:auto}
.kl-aantal{display:inline-flex;align-items:center;gap:8px}
.kl-aantal b{color:var(--heading);font-weight:700}
.drawer .db.klant{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.drawer .db.klant .dl{background:none;padding:24px}
.drawer .db.klant .dr{padding:24px}
.drawer .db.klant .fgrid{gap:16px}
.kl-hist{display:flex;flex-direction:column}
.kl-rij{appearance:none;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:var(--text);text-align:left;cursor:pointer;display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px 4px;min-height:48px;width:100%}
.kl-rij:last-child{border-bottom:0}
.kl-rij:hover{background:var(--hover-row)}
.kl-rij b{display:block;color:var(--heading);font-weight:600;font-size:var(--t-13)}
.kl-rij small{display:block;color:var(--muted);font-size:var(--t-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-rij .kl-wat{min-width:0;font-size:var(--t-13);color:var(--text)}
.kl-notities{min-height:160px}
.drawer .dh h2 .kl-link{color:inherit;text-decoration:none}
.drawer .dh h2 .kl-link:hover{text-decoration:underline}
.kl-teller{color:var(--muted)}
.kl-teller::before{content:"·";margin-right:8px}
@media (max-width:900px){.drawer .db.klant{grid-template-columns:1fr}.drawer .db.klant .dl{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:560px){
  .kl-kaart .filters .search{flex-basis:100%;max-width:none;min-width:0}
  .kl-kaart .filters .search input{height:40px}
  .kl-rij{grid-template-columns:minmax(0,1fr) auto}
  .kl-rij .kl-wat{grid-column:1;grid-row:2}
  .kl-rij .st{grid-column:2;grid-row:1}
  .kl-teller::before{display:none}
}
/* Stap 5: aanvragen bovenaan Boekingen, de aanvraag in de lade, foto's als miniaturen (signed URL's), werkgebied in de lade van een
   aanbieder. Status aangevraagd in de paarse familie (oranje blijft voor merk en primaire actie). */
.status-aangevraagd{--c:var(--purple-text)}
.aanvragen{margin-bottom:16px}
.aanvragen .rijen{display:flex;flex-direction:column}
.aanvragen .rij{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.2fr) 148px auto;align-items:center;gap:12px 16px;padding:12px 20px;border-top:1px solid var(--line);min-width:0}
.aanvragen .rij>*{min-width:0}
.aanvragen .wie b,.aanv-wanneer b{display:block;color:var(--heading);font-weight:600;font-size:var(--t-14)}
.aanvragen .wie b a{color:inherit;text-decoration:none}
.aanvragen .wie b a:hover{text-decoration:underline}
.aanvragen .wie small,.aanv-wanneer small{display:block;color:var(--muted);font-size:var(--t-12)}
.aanv-waar{display:flex;align-items:flex-start;gap:6px;color:var(--text);font-size:var(--t-13);line-height:1.4}
.aanv-waar .i{flex:none;color:var(--muted);margin-top:1px}
.aanv-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aanvragen .rij .aanv-acts{justify-content:flex-end;flex-wrap:nowrap}
.aanvragen .empty{border-top:1px solid var(--line)}
.foto-minis{display:flex;flex-wrap:wrap;gap:8px}
.foto-mini{display:block;width:72px;height:72px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);overflow:hidden;flex:none}
.foto-mini.klein{width:44px;height:44px}
.foto-mini img{width:100%;height:100%;object-fit:cover;display:block}
.foto-mini img:not([src]){visibility:hidden}
.foto-mini.weg{opacity:.4}
.foto-mini:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ring)}
.aanvraag-blok{padding-bottom:16px;border-bottom:1px solid var(--line)}
.aanvraag-blok .uitleg{margin:0 0 12px}
.aanvraag-blok .aanv-acts .btn{flex:1 1 auto}
.ta.wg{min-height:64px;font-family:var(--mono);font-size:var(--t-13)}
@media (max-width:1320px){
  .aanvragen .rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .aanvragen .rij .aanv-acts{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
  .aanvragen .foto-minis:empty{display:none}
}
@media (max-width:560px){
  .aanvragen .rij{grid-template-columns:minmax(0,1fr);padding:12px 16px}
  .aanvragen .rij .aanv-acts .btn{flex:1 1 auto}
  .foto-mini.klein{width:56px;height:56px}
}
/* Google-agenda via OAuth (schema stap 31): de agendalijst in de dialoog Instellingen, één agenda per regel, tikdoel 40 px. */
.g-lijst{display:flex;flex-direction:column}
.g-lijst .inl{display:flex;min-height:40px;padding:4px 0;border-bottom:1px solid var(--line);font-size:var(--t-14);font-weight:500;letter-spacing:0;color:var(--text);cursor:pointer}
.g-lijst .inl:last-child{border-bottom:0}
.g-naam{flex:1;min-width:0;overflow-wrap:anywhere}
/* Instellingen van een Google- of Microsoft-koppeling: het vinkje Titels voor het team als eigen veld onder de schrijfkeuze; de dialoog
   schuift binnen het scherm als hij langer is dan een telefoon (vier agenda's, de Teams-melding en dit vinkje) */
#dialoog:has(.g-lijst) .box,#dialoog:has(.ag-regels) .box{max-height:calc(100dvh - 32px);overflow:auto}
/* Instellingen van een koppeling (7 oktober): Kleur in de week als één rij bolletjes (radio's, tikdoel 40 px, naam eronder), het blok Telt niet
   als bezet met twee velden naast elkaar (op een telefoon onder elkaar) en de ingeklapte lijst "Wat telt mee?" */
.ag-kleuren,.ag-regels{border:0;margin:0;padding:0;min-width:0}
.ag-regels{gap:8px}
.ag-kleuren>.lab{padding:0;float:none}
.ag-kleur-rij{display:flex;flex-wrap:wrap;gap:4px}
.ag-kleur{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:52px;min-height:40px;padding:4px 2px;border-radius:var(--r-sm);font-size:var(--t-11);font-weight:600;color:var(--text-2);cursor:pointer}
.ag-kleur:hover{background:var(--surface-2)}
.ag-kleur .ag-bol{width:24px;height:24px;margin:0;box-shadow:0 0 0 2px var(--card)}
.ag-kleur input:checked+.ag-bol{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--navy-line)}
.ag-kleur input:checked~.n{color:var(--heading);font-weight:700}
.ag-kleur input:focus-visible+.ag-bol{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--navy-line),0 0 0 7px var(--ring)}
.ag-regels .lab-rij{margin:0}
/* het vinkje 12 px onder de velden (8 px gap plus 4), de hint 4 px eronder */
.ag-eigen-rij{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.ag-eigen{display:flex;align-items:center;min-height:40px;font-weight:500;color:var(--text)}
details.meer.ag-proef+.ag-kleuren{padding-top:12px;border-top:1px solid var(--line)}
details.meer.ag-proef>summary .lab{margin:0}
.ag-proef-zin{margin:0 0 4px;font-size:var(--t-13);color:var(--text-2)}
.ag-proef-lijst{list-style:none;margin:0;padding:0;max-height:288px;overflow:auto;border-top:1px solid var(--line)}
.ag-proef-lijst li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:4px 12px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-13)}
.ag-proef-lijst .w{color:var(--muted);font-variant-numeric:tabular-nums}
.ag-proef-lijst .t{min-width:0;overflow-wrap:anywhere;color:var(--heading);font-weight:600}
.ag-proef-lijst li.vrij .t{color:var(--muted);font-weight:500}
.ag-proef-lijst .chip{grid-column:2;justify-self:start;white-space:normal;height:auto;min-height:24px;padding-top:4px;padding-bottom:4px;line-height:1.3}
@media (max-width:560px){.ag-regels .ag-regel-velden{grid-template-columns:minmax(0,1fr)}.ag-proef-lijst li{grid-template-columns:minmax(0,1fr)}.ag-proef-lijst .chip{grid-column:1}.ag-acties .btn{height:40px;flex:1 1 100%;justify-content:center}}
/* Stap 6: betalen via Mollie (module betalen). Betaalchips in de bestaande status-families: groen betaald, teal aanbetaling, paars
   openstaand, rood mislukt (oranje blijft voor merk en primaire actie); bedragen in --mono. */
.st-rij{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.betaal-betaald{--c:var(--green-text)}.betaal-aanbetaling{--c:var(--teal-text)}.betaal-open{--c:var(--purple-text)}.betaal-mislukt,.betaal-verlopen,.betaal-geannuleerd{--c:var(--red-text)}.betaal-terugbetaald{--c:var(--muted)}
.betaal-hint{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;color:var(--text-2)}
.betaal-hint .i{flex:none;color:var(--amber-text);margin-top:2px}
#s-betaal-samen{margin:0}
.betaal-blok .betaal-rijen{display:flex;flex-direction:column}
.betaal-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.betaal-rij .st{grid-column:1/-1;justify-self:start}
.betaal-rij:last-child{border-bottom:0}
.betaal-rij .bt-wat{min-width:0}
.betaal-rij .bt-wat b{display:block;color:var(--heading);font-weight:600;font-size:var(--t-13)}
.betaal-rij .bt-wat small{display:block;color:var(--muted);font-size:var(--t-12)}
.betaal-rij .bt-bedrag{font-family:var(--mono);font-size:var(--t-13);color:var(--heading);white-space:nowrap}
.betaal-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.betaal-acts:empty{display:none}
.mollie-kaart .cb>.uitleg{margin:0 0 12px}
.mollie-info{margin:0 0 16px}
.mollie-info dd{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (max-width:560px){
  .betaal-acts .btn{flex:1 1 100%}
}

/* ---------- stap 33: inbedden in je eigen systeem (Koppelingen › Inbedden, het blok alleen voor de beheerder) ----------
   De kaart Inbedden over de volle breedte van het rooster; het blok met de sleutel onder de inbedcode, gescheiden door een haarlijn (geen
   kaart in de kaart). Sleutel en voorbeeld-URL in mono, breken overal zodat niets buiten de kaart loopt. */
.b-grid>.inbed-kaart{grid-column:1/-1}
/* Koppelingen: onder Inbedden (volle breedte) verdelen Handtekening en Agenda-koppelingen de breedte, zonder lege derde kolom */
.b-grid.koppel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.b-grid.koppel-grid{grid-template-columns:minmax(0,1fr)}}
.inbed-blok{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.inbed-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inbed-kop h4{margin:0;font-size:var(--t-14);font-weight:700;color:var(--heading)}
.inbed-blok .uitleg{margin:0;color:var(--muted);font-size:var(--t-13);line-height:1.5;max-width:72ch}
.inbed-kv{margin:0}
.inbed-code{font-family:var(--mono);font-size:var(--t-12);overflow-wrap:anywhere;word-break:break-all;color:var(--text)}
.inbed-acts{display:flex;flex-wrap:wrap;gap:8px}
.inbed-blok .fgrid{margin:0}
/* Lade van een aanbieder › Agenda's: Koppel Google-agenda bovenaan, het iCal-adres ingeklapt eronder (details.meer zoals Meer instellingen). */
details.meer.ical{margin-top:12px}
details.meer.ical>summary .lab{margin:0}

/* Plannen › blok Moment (schema stap 34): datum, tijd, duur en reistijd op één rij met de labels op gelijke hoogte, daaronder het moment in
   gewone taal en de controle (vrij groen, buiten de werkuren amber, bezet rood); op een smalle kolom twee per rij, op een telefoon onder elkaar. */
.drawer .db.plannen>.dr{container-type:inline-size}
.p-moment{display:flex;flex-direction:column;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.drawer .form-kolom .p-moment h3{margin:0}
.drawer .db.vorm .fgrid.mv{grid-template-columns:minmax(0,1.5fr) minmax(0,1.25fr);gap:12px}
.drawer .db.vorm .fgrid.mv.c3{grid-template-columns:minmax(0,1.5fr) minmax(0,1.25fr) minmax(0,.9fr)}
.drawer .db.vorm .fgrid.mv.c3.reis{grid-template-columns:minmax(0,1.5fr) minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.9fr)}
.fgrid.mv .inp{min-width:0;font-variant-numeric:tabular-nums}
@container (max-width:440px){.drawer .db.vorm .fgrid.mv.c3,.drawer .db.vorm .fgrid.mv.c3.reis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.drawer .db.vorm .fgrid.mv,.drawer .db.vorm .fgrid.mv.c3,.drawer .db.vorm .fgrid.mv.c3.reis{grid-template-columns:1fr}}
.p-zin{margin:0;color:var(--heading);font-size:var(--t-14);font-weight:600;line-height:1.5}
.p-zin:empty{display:none}
.p-check-rij{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.p-check{margin:0;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);color:var(--text-2);font-size:var(--t-13);font-weight:600;line-height:1.4}
.p-check:empty{display:none}
.p-check .i{flex:none}
.p-check[data-soort="vrij"]{background:var(--green-soft);border-color:var(--green-rand);color:var(--green-text)}
.p-check[data-soort="werkuren"]{background:var(--amber-soft);border-color:var(--amber-rand);color:var(--amber-text)}
.p-check[data-soort="bezet"]{background:var(--red-soft);border-color:var(--red-rand);color:var(--red-text)}
.p-check[data-soort="leeg"],.p-check[data-soort="bezig"]{color:var(--muted)}
.p-lijst h3{margin:0 0 8px}
/* Schema stap 35: de organisatie in de zijbalk, onder het woordmerk (dat blijft zoals het is): logo of initiaal en de naam. In het Merk-blok
   en in de lade van een aanbieder de upload (.drop uit ui.css); het geplakte adres ingeklapt eronder, zoals het iCal-adres. */
.side .org{display:flex;align-items:center;gap:8px;padding:16px 24px 0;min-width:0;font-size:var(--t-13);font-weight:600;color:var(--heading)}
.side .org .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgrid>details.meer.foto-adres{margin:0}

/* Schema stap 38: Wanneer boekbaar in de lade van een dienst. Boekbaar op is een .seg met zeven dagknoppen (aria-pressed = de dag is aan,
   navy zoals elk gekozen segment); een dag die uit staat is gedempt en doorstreept. Uitzonderingen zijn rijen zoals de blokken van de
   werkuren (dag, niet van, tot, kruisje); een rij op een dag die uit staat vervalt (gedempt, met een korte uitleg). In de editor van de
   eigen vaste momenten is zo'n dag gedempt. De zin onderaan vat het blok samen (rood bij een fout). Op een telefoon vullen de dagknoppen
   de breedte, elk minstens 40 px. */
.boekbaar>.field+.field{margin-top:16px}
.boekbaar>.sw{margin-top:16px;border-top:1px solid var(--line)}
.dagknoppen{width:max-content;max-width:100%}
.dagknoppen button{height:40px;min-width:44px;padding:0 12px;justify-content:center;box-sizing:border-box}
.dagknoppen button[aria-pressed="false"]{background:var(--card);color:var(--muted);text-decoration:line-through}
.dagknoppen button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.dagregel-lijst{display:flex;flex-direction:column;gap:8px}
.dagregel-lijst:empty{display:none}
.dagregel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%}
.dagregel .selw{width:148px}
.dagregel .inp{width:108px;padding-left:8px;padding-right:4px}
.dagregel .tot{color:var(--muted);font-size:var(--t-13)}
.dagregel-vervalt{flex-basis:100%;font-size:var(--t-12);color:var(--muted)}
.dagregel.vervalt .sel,.dagregel.vervalt .inp{color:var(--muted);text-decoration:line-through}
#s-uitz-plus{align-self:flex-start}
.werkuren .dag.dag-uit>label,.werkuren .dag.dag-uit .tot,.werkuren .dag.dag-uit .dicht{color:var(--muted)}
.werkuren .dag.dag-uit .inp{color:var(--muted);text-decoration:line-through}
.boekbaar-zin{margin:12px 0 0;font-size:var(--t-13);color:var(--text-2)}
.boekbaar-zin.err{color:var(--red-text)}
@media (max-width:560px){
  .dagknoppen{width:100%}
  .dagknoppen button{flex:1 1 0;min-width:40px;padding:0}
  .dagregel .selw{flex:1 1 0;width:auto;min-width:0}
  .dagregel .ibtn{order:1}
  .dagregel .tot,.dagregel .inp{order:2}
  .dagregel .inp{flex:1 1 0;width:auto;min-width:0}
  .dagregel-vervalt{order:3}
  .dagregel::after{content:"";order:1;flex-basis:100%}
}

/* Ingebed in het eigen systeem (?inbed=agenda, 10 oktober; docs/INTEGRATIE.md deel 7). Alleen de week: geen zijbalk, topbar of bottombar.
   De pagina staat in een kaart van het systeem dat inbedt; de achtergrond is daarom de kaartkleur en de inhoud zo hoog als ze is (het
   iframe neemt die hoogte over, geen tweede scrollbalk). Het iframe kan hoger zijn dan het scherm: --zicht-top en --zicht-h (gezet door
   beheer.js uit dashboard.zicht) zijn het deel dat in beeld is; lade, dialoog, melding en de vaste dagkoppen staan daarin. */
.inbed{--topbar:0px}
.inbed body{background:var(--card)}
.inbed .side,.inbed .topbar,.inbed .bottombar,.inbed .meer-menu{display:none}
.inbed .shell{min-height:0}
.inbed .content{padding:16px 20px 20px;flex:none}
.inbed .rd-kop{top:var(--zicht-top,0px)}
.inbed .scrim{inset:var(--zicht-top,0px) 0 auto 0;height:var(--zicht-h,100vh)}
.inbed .drawer{top:var(--zicht-top,0px);bottom:auto;height:var(--zicht-h,100vh)}
.inbed .modal{inset:var(--zicht-top,0px) 0 auto 0;height:var(--zicht-h,100vh)}
.inbed .toast{top:calc(var(--zicht-top,0px) + 16px)}
.inbed .modal .box,.inbed #dialoog:has(.af-vorm) .box,.inbed #dialoog:has(.g-lijst) .box{max-height:calc(var(--zicht-h,100vh) - 32px);overflow:auto}
/* De rustige balk boven de week als de aanbieder van de login geen agenda gekoppeld heeft. */
.inbed-koppel{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--inset);color:var(--text);font-size:var(--t-13)}
.inbed-koppel>.i{color:var(--muted);flex:none}
.inbed-koppel p{margin:0;flex:1;min-width:0}
.inbed-koppel .btn{flex:none}
.inbed-fout{max-width:520px;margin:24px auto}
.inbed-fout .empty{display:flex;flex-direction:column;align-items:center;gap:12px}
.inbed-fout .empty b{margin:0}
@media (max-width:900px){
  .inbed .content{padding:12px 12px 16px}
  .inbed .drawer{top:var(--zicht-top,0px)}
}
@media (max-width:640px){
  .inbed-koppel{flex-wrap:wrap}
  .inbed-koppel .btn{width:100%;justify-content:center;min-height:40px}
}

/* Vertalingen (schema stap 41) in de lade van een dienst en een aanbieder (compact sinds 10 oktober): per taal één uitklaprij
   (details.meer.vertaal, de stijl van Meer instellingen, haarlijn erboven) met de naam van de taal links en de statuschip rechts; open
   staan Automatisch vertalen bovenaan, de melding en de gewone velden in .fgrid. De vragen staan in een eigen houder die zelf geen vak is
   (display: contents), zodat hun velden in hetzelfde rooster staan. Op een telefoon is de knop 40 px hoog zoals elke .btn. */
.vertaal-lijst{display:flex;flex-direction:column}
details.meer.vertaal>summary{min-height:44px}
details.meer.vertaal>summary .lab{margin:0;font-size:var(--t-14);font-weight:700;color:var(--heading)}
details.meer.vertaal>summary .chip{margin-left:auto}
details.meer.vertaal .meer-inhoud{gap:12px;padding-bottom:12px}
.vertaal-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.vertaal-vragen{display:contents}
.vertaal-melding{display:block;margin:0;font-size:var(--t-12);color:var(--muted);line-height:1.5}
.vertaal-melding[hidden]{display:none}
@media (max-width:560px){.talen-keuze .keuzes .inl{min-height:40px}}
.vertaal-melding.err{color:var(--red-text)}
/* Mails in de taal van de klant (plan stap 10, 10 oktober): in het blok Vertalingen van een dienst onder de tussenkop Mails een veld per
   eigen mailtekst, in hetzelfde rooster als de andere velden (display: contents); daaronder de rustige tekstknop Taal toevoegen. */
.vertaal-mails{display:contents}
.vertaal-nacht{display:contents}
.vertaal-nacht[hidden]{display:none}
.vertaal-tussenkop{grid-column:1/-1;margin:8px 0 0;font-size:var(--t-13);font-weight:700;color:var(--heading)}
.vertaal-mails-uitleg{display:block;grid-column:1/-1;margin:-4px 0 0;font-size:var(--t-12);color:var(--muted);line-height:1.5}
.vertaal-erbij{margin:8px 0 0}

/* Platformstand (10 oktober, besluit Jurgen): de organisatiekiezer boven de naam van de organisatie in de zijbalk, alleen voor de rol platform
   (web/beheer.js, tekenPlatform). Op een telefoon is er geen zijbalk: dan een balk onder de topbar met de naam en Wisselen, dat de keuze in een dialoog opent. */
.side .org-kiezer{display:grid;gap:8px;padding:16px 24px 0;min-width:0}
.org-kiezer-kop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.org-kiezer-kop label{font-size:var(--t-12);font-weight:700;color:var(--text-2)}
.org-kiezer .btn{justify-content:center}
.platform-balk{display:none}
@media (max-width:900px){
  .platform-balk{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--surface);min-width:0}
  .platform-balk .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--heading)}
}

/* Inrichten (10 oktober, /beheer#inrichten, web/beheer.js; stijlgids 4, "Een wizard"): over de volle breedte van het werkvlak, de
   stappenbalk (.stappen, ui.css) en één kaart met één vraag; Terug links en Verder rechts in de voet. Rijen voor mensen en diensten met
   haarlijnen (geen kaart in een kaart), op een telefoon onder elkaar. Klaar: links de link en de teksten, rechts de QR-code op een vast
   licht vlak (--paneel-licht en --paneel-donker zijn in beide standen gelijk, zodat elke camera ze leest). */
.inrichten{display:flex;flex-direction:column;gap:16px;min-width:0}
.inrichten .b-kop{margin-bottom:0}
.inr-kaart .ch{align-items:flex-start}
.inr-kop{display:flex;flex-direction:column;gap:4px;min-width:0}
.inr-kop h3{font-size:var(--t-18);color:var(--heading);margin:0}
.inr-kop h3:focus{outline:none}
.inr-kop .sub{margin:0;max-width:72ch;color:var(--muted);font-size:var(--t-13)}
.inr-kaart .cb{display:flex;flex-direction:column;gap:16px}
.inr-kaart .cf.inr-voet{justify-content:space-between}
.card .cf .inr-opnieuw{margin-right:auto}
.inr-rijen{display:flex;flex-direction:column}
.inr-rij{display:grid;gap:12px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}
.inr-rij:first-child{padding-top:0}
.inr-rij .field{min-width:0}
.inr-rij.mens{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 40px}
.inr-rij.dienst{grid-template-columns:auto minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.inr-rij.agenda{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.inr-aan{min-height:40px}
.inr-weg{width:40px;height:40px}
.inr-wie{display:flex;flex-direction:column;min-width:0}
.inr-wie b{color:var(--heading)}
.inr-wie small{color:var(--muted);font-size:var(--t-12)}
.inr-klaar{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px;align-items:start}
.inr-klaar-l{display:flex;flex-direction:column;gap:16px;min-width:0}
.inr-link{display:flex;gap:8px;min-width:0}
.inr-link .inp{flex:1;min-width:0}
.inr-tekst .ta{resize:vertical;min-height:72px;field-sizing:content}
.inr-tekst-voet{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.inr-qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset)}
.inr-qr figcaption{font-size:var(--t-12);color:var(--muted)}
.qr{display:block;width:200px;height:200px;border-radius:var(--r-sm)}
.qr .qr-vlak{fill:var(--paneel-licht)}
.qr .qr-punt{fill:var(--paneel-donker)}
@media (max-width:900px){.inr-klaar{grid-template-columns:minmax(0,1fr)}.inr-qr{order:-1}}
@media (max-width:640px){
  .inr-rij.mens{grid-template-columns:minmax(0,1fr) 40px}.inr-rij.mens .field:nth-child(2){grid-column:1}.inr-rij.mens .inr-weg{grid-row:1;grid-column:2}
  .inr-rij.dienst{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.inr-rij.dienst .inr-aan,.inr-rij.dienst .field:nth-child(2){grid-column:1 / -1}
  .inr-link{flex-wrap:wrap}.inr-link .inp{flex-basis:100%}.inr-link .btn{flex:1;justify-content:center}
  .inr-kaart .cf.inr-voet{flex-direction:column-reverse;align-items:stretch}.inr-kaart .cf.inr-voet .btn{justify-content:center}.inr-kaart .cf.inr-voet>span:empty{display:none}
}

/* ---------- Logies (schema stap 44 en 45, 11 oktober; web/logies.js; stijlgids 4, "Een bezettingsraster") ---------- */
/* Lade van een kamer: de bronnen van iCal en de blokken als rijen met een haarlijn; het veld met de link en de knop op één regel. */
.ical-lijst{display:flex;flex-direction:column}
.ical-lijst:empty{display:none}
.ical-rij{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--line)}
.ical-rij:last-child{border-bottom:0}
.ical-rij.nieuw .ical-wat small{color:var(--blue-text)}
.ical-wat{display:flex;flex-direction:column;min-width:0;flex:1}
.ical-wat b{color:var(--heading);font-weight:600;font-size:var(--t-14)}
.ical-wat small{color:var(--muted);font-size:var(--t-12);overflow-wrap:anywhere}
.ical-wat small.fout{color:var(--red-text)}
.ical-plus{display:flex;gap:8px;align-items:center;margin-top:8px}
.ical-plus .inp{flex:1;min-width:0}
.ical-plus .btn{flex:none}
/* Lade van een dienst per nacht: de blokken in de stijl van Meer instellingen, met onder de kop één zin die zegt wat er nu geldt. */
#s-nachten{display:flex;flex-direction:column;gap:20px}
#s-nachten[hidden]{display:none}
#s-nacht-prijs:empty{display:none}
#s-nacht-prijs{margin-top:16px}
details.meer.nb>summary{align-items:flex-start;padding:8px 0}
details.meer.nb>summary .i{margin-top:2px;flex:none}
.nb-kop{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
/* golf 3: de kop van een blok is een gewone vraag, geen eyebrow (stijlgids 1, regel 9: kapitalen alleen voor eyebrows en kolomkoppen) */
.drawer .form-kolom details.meer.nb>summary h3{margin:0;font-size:var(--t-16);font-weight:700;text-transform:none;letter-spacing:0;color:var(--heading);line-height:1.3}
details.meer.nb>summary:hover .nb-zin{color:var(--text)}
/* Golf 3 (12 oktober; stijlgids 4, "Een lade met vragen"): de lade van een dienst en van een aanbieder in één kolom. Bovenaan wat iedereen
   invult (.lade-top), daaronder de blokken met een vraag en één zin (.nb-lijst), elk met een haarlijn erboven, één tegelijk open. */
.drawer:has(.db.stapel){width:820px}
.drawer .db.vorm.stapel{grid-template-columns:1fr}
.drawer .db.vorm.stapel .dl{border-right:0;border-bottom:0;padding:24px 32px 32px}
.lade-top{display:flex;flex-direction:column;gap:16px}
.lade-top .fgrid>[hidden]{display:none}
/* De eerste rij van de lade van een dienst (13 oktober, Jurgen): Naam · Duur · (Prijs) · Kleur. Naam rekt, de andere houden hun maat; past
   het niet (een smal scherm), dan loopt de kleur door op een eigen regel. Met een prijs erbij staan de stalen op twee rijen van zes. */
.lade-kop{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 24px}
.lade-kop>.field{flex:0 0 152px;min-width:0;margin:0}
.lade-kop>.field:first-child{flex:1 1 180px}
.lade-kop>#s-prijs-veld{flex-basis:128px}
.lade-kop>.kleurkeuze{flex:0 0 auto}
.lade-kop>[hidden]{display:none}
.lade-kop:has(#s-prijs-veld:not([hidden])) .stalen{max-width:178px}
@media (max-width:560px){
  .lade-kop>.field,.lade-kop>.field:first-child,.lade-kop>.kleurkeuze{flex:1 1 100%}
  .lade-kop:has(#s-prijs-veld:not([hidden])) .stalen{max-width:none}
}
.nb-lijst{display:flex;flex-direction:column}
.nb-lijst>details.meer.nb,.nb-lijst>.zb>details.meer.nb{padding:4px 0}
.nb-lijst>details.meer.nb:last-child{border-bottom:1px solid var(--line)}
.nb-lijst>.vertalingen{border-top:1px solid var(--line);padding:16px 0}
.nb-lijst>.zb{display:flex;flex-direction:column}
.nb-lijst details.meer.nb>.meer-inhoud{padding:8px 0 16px}
.ta.kort{min-height:64px}
.meer-regels{display:flex;flex-direction:column;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.meer-regels .sw{margin-top:0}
/* De velden tussen accolades in de mails (bevinding 22): een knop met de gewone naam en het veld eronder in mono. */
.placeholders{gap:8px}
.ph-knop{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;max-width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);color:var(--text-2);font:inherit;font-size:var(--t-12);font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.ph-knop code{font-family:var(--mono);font-size:var(--t-11);font-weight:400;color:var(--muted)}
.ph-knop:hover{background:var(--surface-2);color:var(--heading);border-color:var(--line-strong)}
.ph-knop:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.ph-knop[hidden]{display:none}
@media (max-width:560px){.ph-knop{min-height:40px;justify-content:center}}
.soort-links{display:flex;flex-direction:column}
.soort-links .rij{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.soort-links .rij .wie{flex:1;min-width:0;display:flex;flex-direction:column}
.soort-links .rij .wie b{color:var(--heading);font-weight:600;font-size:var(--t-14)}
.soort-links .rij .wie small{color:var(--muted);font-size:var(--t-12)}
@media (max-width:900px){.drawer .db.vorm.stapel .dl{padding:16px 16px 24px}}
.nb-zin{font-size:var(--t-13);color:var(--text-2);line-height:1.45}
.nb-samen{margin:12px 0 0;font-size:var(--t-13);color:var(--text-2)}
.nacht-dagen .inl{min-height:32px}
.tarief-lijst{display:flex;flex-direction:column}
.tarief-lijst:empty{display:none}
.tarief-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}
.tarief-rij .field{margin:0;min-width:0}
.tarief-rij .field:first-child{grid-column:span 2}
.tarief-rij .tarief-nt{min-height:40px;white-space:normal}
.tarief-rij [data-tarief-weg]{justify-self:end}
.hint.err{color:var(--red-text)}
/* Kamers in de wizard: aanbieden, naam, aantal, personen, prijs en verwijderen op één rij. */
.inr-rij.kamer{grid-template-columns:auto minmax(0,2fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr) 40px}
.inr-rij.kamer[data-id=""]{grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr) 40px}
/* Het bezettingsraster: kamers als rijen, veertien dagen als kolommen van twee helften; een verblijf loopt van de tweede helft van de
   aankomstdag tot de eerste helft van de vertrekdag. Haarlijnen, geen schaduw; de kleur van een blokje via --c (een token). */
.raster-kaart{overflow:hidden}
.raster-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.raster{display:flex;flex-direction:column;min-width:880px}
.raster .ra-rij{display:grid;grid-template-columns:minmax(132px,168px) repeat(28,minmax(0,1fr));grid-template-rows:minmax(52px,auto);border-bottom:1px solid var(--line)}
.raster .ra-rij:last-child{border-bottom:0}
.raster .ra-rij.ra-kop{grid-template-rows:auto;background:var(--surface-2)}
.raster .ra-kamer{all:unset;grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 12px;border-right:1px solid var(--line);position:sticky;left:0;z-index:2;background:var(--card);cursor:pointer;min-height:40px}
.raster .ra-kop .ra-kamer{background:var(--surface-2);cursor:default}
.raster .ra-kamer b{color:var(--heading);font-size:var(--t-13);font-weight:600}
.raster .ra-kamer span{color:var(--muted);font-size:var(--t-12)}
.raster button.ra-kamer:hover b{color:var(--blue-text)}
.raster .ra-kamer:focus-visible,.raster .rb:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.raster .ra-dag{grid-row:1;padding:8px 4px;text-align:center;font-size:var(--t-12);color:var(--muted);font-weight:600;border-left:1px solid var(--line);white-space:nowrap}
.raster .ra-dag.vandaag{color:var(--orange-text)}
.raster .ra-cel{grid-row:1;border-left:1px solid var(--line)}
.raster .ra-cel.we{background:var(--surface-2)}
.raster .ra-cel.vandaag{background:var(--today)}
.raster .rb{all:unset;box-sizing:border-box;grid-row:1;align-self:center;z-index:1;margin:6px 2px;min-height:40px;padding:4px 8px;border-radius:var(--r-sm);border-left:3px solid var(--c);display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:hidden;cursor:pointer}
.raster .rb b{font-size:var(--t-12);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raster .rb span{font-size:var(--t-11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raster .rb.rb-boek{background:var(--cal-blue-bg);color:var(--cal-blue-c)}
.raster .rb.rb-ical{background:var(--cal-purple-bg);color:var(--cal-purple-c)}
.raster .rb.rb-blok{background:var(--surface-2);color:var(--text-2)}
@media (max-width:860px){
  .tarief-rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tarief-rij .field:first-child{grid-column:1 / -1}
  .inr-rij.kamer,.inr-rij.kamer[data-id=""]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.inr-rij.kamer .inr-aan,.inr-rij.kamer .field:has([data-veld="naam"]){grid-column:1 / -1}.inr-rij.kamer [data-rij-weg]{justify-self:end}
}
@media (max-width:560px){
  .raster{min-width:760px}.raster .ra-rij{grid-template-columns:104px repeat(28,minmax(0,1fr))}.raster .ra-kamer{padding:8px}
  .nacht-dagen .inl{min-height:40px}
  .ical-plus{flex-wrap:wrap}.ical-plus .btn{width:100%;justify-content:center}
}

/* Logies deel 2 (11 oktober): de foto's van een kamertype in de lade (schema stap 46): miniaturen als tegels op --inset in een rij, de
   eerste met de chip Hoofdfoto, eronder een beschrijving en de knoppen naar voren, naar achteren en verwijderen; slepen om te ordenen
   (.sleept, .doel). De chip Rest open in de lade van een verblijf. */
.kf-lijst{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.kf{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--inset);min-width:0;cursor:grab}
.kf.sleept{opacity:.5}
.kf.doel{border-color:var(--navy-line)}
.kf-beeld{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);background:var(--surface-2)}
.kf-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.kf-hoofd{position:absolute;top:6px;left:6px}
.kf .inp{min-width:0}
.kf-knoppen{display:flex;gap:4px;justify-content:flex-end}
.betaal-rest{--c:var(--amber-text)}
@media (max-width:760px){
  .kf-lijst{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .kf-knoppen .ibtn{width:40px;height:40px}
}

/* Zorg en studio (schema stap 47, web/zorg.js). De blokken van een dienst (Hoeveel mensen tegelijk?, Wanneer zijn de lessen?, Mag een klant
   een reeks boeken?) volgen de blokken van een dienst per nacht; een sessielijst is een rij per sessie of deelnemer met haarlijnen, de
   chip "3 van 8 plaatsen vrij" (groen, oranje bij de laatste twee, de gewone chip bij volzet) en de knoppen rechts. */
#s-zorg{display:flex;flex-direction:column}
#s-zorg details[hidden]{display:none}
#s-zorg .meer-inhoud>.fgrid{gap:16px 24px}
.zb-maak{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.zb-maak .hint{margin:0}
.zs-lijst{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.zs-rij{display:flex;align-items:center;gap:8px 12px;min-height:48px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.blk>.zs-rij{border-top:1px solid var(--line)}
.zs-rij.weg .zs-wie{color:var(--muted);text-decoration:line-through}
.zs-wie{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px}
.zs-wie b{color:var(--heading);font-weight:600;font-size:var(--t-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-wie small{color:var(--muted);font-size:var(--t-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-rij .btn{flex:none}
.zb-reeks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--t-14)}
.zb-reeks li{display:flex;align-items:center;gap:4px 8px;min-height:28px;flex-wrap:wrap}
.zb-reeks a,.zb-reeks b{white-space:nowrap}
.zb-reeks li.deze b{color:var(--heading)}
.zb-reeks li small{color:var(--muted);font-size:var(--t-12)}
.rb.zs .zs-tel{margin-left:2px;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .zs-wie{flex-basis:100%}
  .zs-rij .btn{min-height:40px}
  .zs-rij .btn:first-of-type{margin-left:auto}
}
.zs-lijst+div{margin-top:12px}
/* Deelnemer toevoegen in de lade van een sessie (opruimronde 11 oktober) */
.zs-nieuw{margin-top:12px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.zs-nieuw>div{align-self:stretch;display:flex;flex-direction:column;gap:12px}
.zs-nieuw>div[hidden]{display:none}
/* Inrichten voor zorg en studio: per rij ook voor wie (één persoon of een groep met plaatsen); bij Wanneer de uren per aanbieder en het
   rooster van elke groep, met een haarlijn ertussen. */
.inr-rij.aanbod{grid-template-columns:auto minmax(0,2fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.7fr)}
.inr-rij.aanbod.met-prijs{grid-template-columns:auto minmax(0,2fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.7fr) minmax(0,.9fr)}
.inr-rij.aanbod [data-groep-veld][hidden]{display:none}
.inr-mens-uren+.inr-mens-uren,.inr-groepen{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.inr-groepen{display:flex;flex-direction:column;gap:24px}
.zb-wiz{display:flex;flex-direction:column;gap:16px}
.zb-wiz+.zb-wiz{padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:700px){.inr-rij.aanbod,.inr-rij.aanbod.met-prijs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.inr-rij.aanbod .inr-aan,.inr-rij.aanbod .field:nth-child(2){grid-column:1 / -1}}

/* ---------- zelf aanmelden: /start (11 oktober, plan stap 14; stijlgids 4, "Zelf aanmelden") ----------
   De loginkaart van het beheer, iets breder voor de vijf keuzetegels van de sector; onder de kaart de talen van de pagina en de links naar
   privacy en voorwaarden (tikdoelen van 40 px). Het bericht na verzenden staat in dezelfde kaart, met een icoon in een groene cirkel. */
.start{place-content:center;gap:16px}
.start-kaart{width:min(560px,100%)}
.s-sector{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.s-sector legend{padding:0;margin:0 0 6px;font-size:var(--t-12);font-weight:700;color:var(--text-2);letter-spacing:.02em}
.s-sector .keuzetegel{padding:12px 16px}
.s-sector .keuzetegels.err .keuzetegel{border-color:var(--red-rand)}
.s-sector .hint{font-size:var(--t-12)}
.s-controle{min-height:65px}
.s-al{margin:0;font-size:var(--t-14);color:var(--muted)}
.s-al a{color:var(--blue-text);font-weight:600}
.s-klaar-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green-text)}
.s-klaar-ic .i{width:20px;height:20px}
#s-klaar-kop:focus{outline:none}
.s-voet{display:flex;flex-wrap:wrap;justify-content:center;gap:0 16px}
.s-voet a{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t-13);color:var(--text-2);text-decoration:none}
.s-voet a:hover{color:var(--heading);text-decoration:underline}
.s-voet a[aria-current="true"]{color:var(--heading);font-weight:700}
/* De inlogpagina: onderaan de kaart de rustige link naar /start, voor wie nog geen account heeft (vóór het inloggen, voor iedereen). */
.login-nieuw{margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:var(--t-14);color:var(--muted)}
.login-nieuw a{color:var(--blue-text);font-weight:600}

/* ---------- abonnement (schema stap 48, plan stap 14; web/abonnement.js, stijlgids 4 "Een abonnement kiezen") ----------
   De stand in één zin (22 px) met één zin uitleg en de feiten in .kv; de pakketten als keuzetegels met prijs (.keuzetegel .p in ui.css) en
   de schakelaar Maandelijks | Jaarlijks rechts in de kop; de knop "Kies Team" rechts in de voet, met de hint links. */
.abon .abon-zin{margin:4px 0 8px;font-size:var(--t-22);color:var(--heading);line-height:1.25}
.abon-stand .uitleg,.abon-platform .uitleg,.abon-stripe .uitleg{margin:0;color:var(--muted);font-size:var(--t-14);line-height:1.5;max-width:60em}
.abon-stripe .uitleg code{font-family:var(--mono);font-size:var(--t-12);color:var(--heading)}
.abon-secrets{margin:16px 0 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--mono);font-size:var(--t-12);line-height:1.5;color:var(--heading);white-space:pre-wrap;word-break:break-all;user-select:all}
.abon-stripe .cf{flex-wrap:wrap;gap:8px 16px}
.abon-stand .kv{margin-top:16px}
.abon-kies .ch{flex-wrap:wrap;gap:8px 16px}
.abon-tegels{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.abon-tegels .keuzetegel .t{min-height:24px}
.abon .cf{flex-wrap:wrap;align-items:center}
.abon .cf .hint{margin-right:auto}
.abon-dicht{max-width:640px}
@media (max-width:700px){.abon .cf .btn{width:100%;justify-content:center;min-height:40px}.abon .cf .hint{width:100%}.abon-kies .seg button{height:40px}}
.modules .sw .t .chip{margin-left:8px}
.inr-proef{margin:24px 0 0}

/* ---------- golf 2 van de gebruiksvriendelijkheid (11 oktober, besluit Jurgen; README, Opzet › Veilig wijzigen en Startkaart; stijlgids 4)
   ---------- */
/* De voet van de lade van een boeking: Plaatsgevonden en No-show pas vanaf het begin; tot dan één zin waarom. Op een telefoon twee kolommen
   met No-show altijd rechts op de tweede rij, nooit naast of onder Plaatsgevonden. */
.drawer .df .df-zin{font-size:var(--t-12);color:var(--muted);line-height:1.4}
@media (max-width:560px){
  .drawer .df .df-zin{flex:1 1 100%}
  .drawer .df.boek-voet.met-uitkomst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .drawer .df.boek-voet.met-uitkomst [data-status="plaatsgevonden"]{order:1}
  .drawer .df.boek-voet.met-uitkomst [data-verzet]{order:2}
  .drawer .df.boek-voet.met-uitkomst [data-annuleer]{order:3}
  .drawer .df.boek-voet.met-uitkomst [data-status="noshow"]{order:4;grid-column:2}
}
/* Verzetten in twee stappen: wat er gaat gebeuren, boven de primaire knop die het zegt. */
.drawer .df.vz-voet .vz-zin{flex:1 1 100%;margin:0;font-size:var(--t-13);color:var(--text-2);line-height:1.5}
.drawer .df.vz-voet .vz-zin b{color:var(--heading)}
@media (max-width:560px){.drawer .df.vz-voet .btn{flex:1 1 100%}}
/* Een lade die alleen te bekijken is (proef voorbij): de rustige balk tussen kop en inhoud. */
.drawer>.balk.lade-balk{margin:12px 24px 0;flex:none}
@media (max-width:560px){.drawer>.balk.lade-balk{margin:12px 16px 0}}
/* Lege staat in de lade van een groep (geen komende sessies). */
.zs-leeg{padding:16px 8px}
/* Inloggen op een telefoon (bevinding 28): de twee tekstknoppen 40 px hoog. */
@media (max-width:560px){.login-links .btn.link{min-height:40px}}
/* Je boekingspagina (11 oktober, golf 1): de zaakpagina bovenaan de lijst van diensten, met dezelfde linkrij als Klaar in de wizard */
.zaak-link-kaart{margin-bottom:16px}

/* Koppelingen (golf 3, bevinding 27; stijlgids 4, "Koppelingen in gewone taal"): per koppeling één rij met de stand in gewone taal en één
   knop. Mollie klapt open in de rij zelf (een details met de rij als summary). Onderaan, dicht, Voor je ontwikkelaar. */
.k-lijst{list-style:none;margin:0;padding:0}
.k-rij{border-top:1px solid var(--line)}
.k-rij,.k-rij>details>summary{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 20px}
.k-rij>details{grid-column:1/-1;margin:-12px -20px}
.k-rij:has(>details){display:block;padding:12px 20px}
.k-rij>details>summary{list-style:none;cursor:pointer;padding:12px 20px}
.k-rij>details>summary::-webkit-details-marker{display:none}
.k-rij>details[open]>summary .k-knop .btn{background:var(--surface-2)}
.k-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--inset);border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2)}
.k-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-tekst b{color:var(--heading);font-size:var(--t-14);font-weight:700}
.k-tekst small{color:var(--text-2);font-size:var(--t-13);line-height:1.45;overflow-wrap:anywhere}
.k-link{font-family:var(--mono);font-size:var(--t-12)}
.k-inhoud{display:flex;flex-direction:column;gap:16px;padding:4px 20px 20px 72px}
.k-inhoud .kv{margin:0}
.k-acties{display:flex;gap:8px;flex-wrap:wrap}
.k-dev{border-top:1px solid var(--line);padding:4px 0}
.k-dev>summary h3{margin:0;font-size:var(--t-16);font-weight:700;color:var(--heading)}
@media (max-width:560px){.k-rij,.k-rij>details>summary{grid-template-columns:40px minmax(0,1fr);padding:12px 16px}.k-rij>details{margin:-12px -16px}.k-rij:has(>details){padding:12px 16px}.k-knop{grid-column:2}.k-knop .btn{min-height:40px}.k-inhoud{padding:4px 16px 16px}}
/* /start die overtuigt (12 oktober, golf 4; web/start.html, start.js). Boven het formulier, op een breed scherm ernaast: wat je krijgt in
   drie zinnen met een icoon, het voorbeeld van de gekozen sector (een schermafbeelding van de boekingspagina, met de link naar de
   proefpagina) en de prijs klein. Op een telefoon blijft het formulier binnen de eerste twee schermen. Het woord naast het woordmerk staat
   op een eigen spatie afstand (bevinding 32); Inloggen is een tikdoel van 40 px. */
.start-kaart .logo .word .os{margin-left:0}
.s-raster{display:flex;flex-direction:column;gap:24px}
.s-wat{display:flex;flex-direction:column;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.s-wat-kop{margin:0;font-size:var(--t-18);font-weight:800;line-height:1.3;color:var(--heading)}
.s-wat-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.s-wat-lijst li{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-14);line-height:1.45;color:var(--text)}
.s-wat-lijst .i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--orange)}
.s-voorbeeld{display:flex;align-items:center;gap:16px}
.s-voorbeeld-beeld{flex:none;display:block;width:96px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.s-voorbeeld-beeld:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.s-voorbeeld-beeld img{display:block;width:100%;height:auto}
.s-voorbeeld-tekst{display:flex;flex-direction:column;gap:6px;min-width:0}
.s-voorbeeld-link{display:inline-flex;align-items:center;gap:4px;min-height:40px;font-size:var(--t-14);font-weight:600;color:var(--blue-text)}
.s-prijs{margin:0;font-size:var(--t-13);line-height:1.45;color:var(--muted)}
.s-fout{align-items:flex-start;padding:10px 12px;border:1px solid var(--red-rand);border-radius:var(--r);background:var(--red-soft);line-height:1.45}
.s-fout .i{flex:none;margin-top:2px}
.s-al a{display:inline-flex;align-items:center;min-height:40px}
@media (min-width:900px){
  .start-kaart{width:min(1000px,100%)}
  .s-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:start}
  .s-wat{position:sticky;top:24px;padding:0 40px 0 0;border-bottom:0;border-right:1px solid var(--line)}
  .s-voorbeeld{flex-direction:column;align-items:flex-start}
  .s-voorbeeld-beeld{width:200px}
}
@media (max-width:560px){
  /* telefoon: het voorbeeld klein naast de link en de prijs, zodat de knop Begin gratis binnen twee schermen blijft */
  .start-kaart{padding:24px 20px}
  .s-raster{gap:16px}
  .s-wat{gap:10px;padding-bottom:16px}
  .s-wat-kop{font-size:var(--t-16)}
  .s-wat-lijst{gap:6px}
  .s-wat-lijst li{font-size:var(--t-13)}
  .s-voorbeeld{gap:12px}
  .s-voorbeeld-beeld{width:64px}
  .s-sector .keuzetegel{padding:10px 14px}
}
/* Zoeken (golf 3, bevinding 16 en 17; stijlgids 4, "Zoekresultaten in groepen"): onder het veld een lijst in groepen met per groep de eerste
   drie en "Alles tonen"; de gekozen rij (pijltjes) in --surface-2 met een navy streep. Op een telefoon opent het vergrootglas in de topbalk
   het veld over de volle breedte van de topbalk, met een kruisje om te sluiten. */
.zoek-knop,.zoek-dicht{display:none}
.search .zoek-lijst{left:0;right:0;top:calc(100% + 6px);min-width:0;max-height:min(70vh,560px);overflow:auto;padding:4px 0;display:block;z-index:40}
.search .zoek-lijst[hidden]{display:none}
.zk-groep{padding:4px 0}
.zk-groep+.zk-groep{border-top:1px solid var(--line)}
.zk-kop{display:flex;align-items:center;gap:8px;padding:8px 12px 4px;font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.zk-tel{font-weight:600;letter-spacing:0;color:var(--muted-2)}
.zk-item{display:flex;flex-direction:column;gap:1px;min-height:40px;justify-content:center;padding:6px 12px;border-left:3px solid transparent;cursor:pointer;min-width:0}
.zk-item b{font-size:var(--t-14);font-weight:600;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk-item small{font-size:var(--t-12);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk-item:hover,.zk-item.actief{background:var(--surface-2)}
.zk-item.actief{border-left-color:var(--navy-line)}
.zk-meer{margin:2px 12px 4px}
.zk-leeg{margin:0;padding:12px;color:var(--muted);font-size:var(--t-13)}
@media (max-width:900px){
  .zoek-knop{display:inline-flex}
  .topbar.zoek-open .search{display:block;position:absolute;left:8px;right:8px;top:8px;max-width:none;z-index:45}
  .topbar.zoek-open .search input{height:40px;padding-right:48px;background:var(--field)}
  .topbar.zoek-open .search input::-webkit-search-cancel-button{display:none}
  .topbar.zoek-open .zoek-dicht{display:inline-flex;position:absolute;right:0;top:0}
  .topbar.zoek-open .search .zoek-lijst{position:fixed;left:8px;right:8px;top:calc(var(--demobar) + 56px);max-height:calc(100vh - 140px)}
}
/* Wizard, golf 3 (bevinding 6, 7, 9, 11 en 13): de sector als chip met Wijzig; tijd, talen en logo dicht; de uren in 24-uursnotatie met
   dezelfde uren voor alle open dagen; agenda koppelen in de rij van de aanbieder; een lege prijs gemeld bij het veld. */
.werkuren .blok .selw.uur{width:108px}
.werkuren .dag.dag-uit .sel{color:var(--muted);text-decoration:line-through}
.inr-sector{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.inr-sector .lab{margin:0}
.inr-meer{margin-top:16px}
.uren-kiezer{display:flex;flex-direction:column;gap:12px}
.uren-kiezer .uk-zelfde .blok{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.uren-kiezer .uk-zelfde .tot{color:var(--muted);font-size:var(--t-13)}
.uren-kiezer .uk-zelfde .selw.uur{width:108px}
.uren-kiezer .uk-zin{margin:0}
.inr-mens-uren{padding-bottom:16px;border-bottom:1px solid var(--line)}
.inr-mens-naam{font-size:var(--t-14);color:var(--heading)}
.inr-koppel{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.inr-rij.agenda .inr-ical{grid-column:2/-1;padding-top:0}
.inr-rij.agenda .inr-meer-knop{grid-column:2/-1;justify-self:start}
.inr-ical-rij{display:flex;gap:8px;flex-wrap:wrap}
.inr-ical-rij .inp{flex:1 1 260px;min-width:0}
.hint.let-op{color:var(--orange-text);font-weight:600}
@media (max-width:560px){.inr-koppel{grid-column:1/-1;justify-content:stretch}.inr-koppel .btn{flex:1 1 auto}.inr-rij.agenda .inr-ical,.inr-rij.agenda .inr-meer-knop{grid-column:1/-1}.inr-sector .btn{min-height:40px}}
/* Deze week op een telefoon (golf 3, bevinding 18): een vaste dagbalk boven het rooster met de dagen van de week en de pijltjes; hij blijft
   staan als je door de uren scrolt. De gekozen dag in navy (de actieve staat), vandaag met een oranje streepje. */
.tw-dagen{display:none}
@media (max-width:700px){
  .tw-dagnav{position:sticky;top:calc(var(--demobar) + var(--topbar));z-index:6;background:var(--bg);margin:12px 0 0;padding:8px 0;border-bottom:1px solid var(--line);gap:6px}
  .inbed .tw-dagnav{top:0}
  .tw-dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;flex:1;min-width:0}
  .tw-dag{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:2px 0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font:inherit;font-size:var(--t-11);font-weight:600;cursor:pointer;position:relative}
  .tw-dag b{font-size:var(--t-14);font-weight:700;color:var(--heading)}
  .tw-dag.vandaag::after{content:"";position:absolute;bottom:3px;left:35%;right:35%;height:2px;border-radius:2px;background:var(--orange)}
  .tw-dag[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
  .tw-dag[aria-pressed="true"] b{color:var(--on-navy)}
  .tw-dagnav .ibtn{flex:none}
}
/* De onderste balk (golf 3, bevinding 34): de actieve knop in de kleur van een kop, niet oranje (stijlgids 1, regel 4 en 5). */
@media (max-width:900px){.bottombar a[aria-current="page"] .i{color:var(--heading)}.bottombar a[aria-current="page"]{box-shadow:inset 0 2px 0 var(--navy-line)}}
/* Boekingen (golf 3, bevinding 15): de hele rij is een tikdoel; Ook voorbije als vinkje in de werkbalk. */
.tbl tr.klikbaar{cursor:pointer}
.voorbij-vink{min-height:36px;font-size:var(--t-13);color:var(--text-2);white-space:nowrap}
@media (max-width:560px){.voorbij-vink{min-height:40px}}
/* Verzetten met een kalender (golf 3, bevinding 19): een maand met de vrije dagen als knop (gekozen in navy, zonder vrije momenten gedempt),
   daaronder de momenten van die dag. */
.vz-kal{display:flex;flex-direction:column;gap:16px}
.vz-maand{max-width:420px}
.vz-maand-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.vz-maand-kop b{color:var(--heading);font-size:var(--t-14);text-transform:capitalize}
.vz-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.vz-wd{text-align:center;font-size:var(--t-11);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.vz-d{min-height:40px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--heading);font:inherit;font-weight:700;font-size:var(--t-14);cursor:pointer}
.vz-d:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-2)}
.vz-d:disabled{background:transparent;border-color:transparent;color:var(--muted-2);font-weight:400;cursor:default}
.vz-d.vandaag{box-shadow:inset 0 -2px 0 var(--orange)}
.vz-d[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.vz-d:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

/* Kamers bij logies (13 oktober, besluit Jurgen: één begrip kamer; stijlgids 4, "Het scherm Kamers"). Per kamer één kaart: bovenaan de
   eerste foto (4:3, zonder foto een rustig vlak met een camera en Foto's toevoegen), daaronder de naam groot, twee regels in gewone taal en
   de knoppen. Geen kaart in de kaart. Meldingen één keer bovenaan in de rijen van Koppelingen (.k-lijst); vanaf dertien kamers zoeken. */
.b-grid.kamers-grid{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));align-items:start}
.kamer-kaart{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.kk-foto{display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;border-bottom:1px solid var(--line);background:var(--inset);overflow:hidden;cursor:pointer;color:var(--text-2)}
.kk-foto img{display:block;width:100%;height:100%;object-fit:cover}
.kk-foto.leeg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:var(--t-14);font-weight:600}
.kk-foto.leeg .i{width:32px;height:32px;color:var(--muted)}
button.kk-foto.leeg:hover{background:var(--surface-2);color:var(--heading)}
.kk-foto:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ring)}
.kk-foto:disabled{cursor:default}
.kamer-kaart.uit .kk-foto img{opacity:.55}
.kamer-kaart .cb{display:flex;flex-direction:column;gap:4px}
.kk-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-bottom:4px}
.kk-naam{margin:0;font-size:var(--t-18);font-weight:700;color:var(--heading);min-width:0;flex:1 1 auto;overflow-wrap:break-word}
.kk-naam a{color:inherit;text-decoration:none}
.kk-naam a:hover{text-decoration:underline}
.kk-regel{margin:0;font-size:var(--t-14);color:var(--text)}
.kk-regel.kk-aantal{color:var(--text-2)}
.kamer-kaart.uit .kk-regel{color:var(--muted)}
.sw.kk-sw{flex:none;justify-content:flex-end;gap:8px;padding:0;border-bottom:0;min-height:32px}
.sw.kk-sw .t{font-size:var(--t-13);font-weight:600;color:var(--text-2)}
.kk-voet{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kamers-meld{margin-bottom:16px}
.kamers-meld .k-rij:first-child{border-top:0}
.kamers-balk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:16px}
.kamers-zoek{flex:1 1 260px;min-width:0}
.kamers-zoek .inp{width:100%}
.kamers-balk .selw{flex:0 1 240px;min-width:0}
.kamers-tel{color:var(--muted);font-size:var(--t-13)}
.kamers-geen{margin:16px 0}
.kamers-grid~.zaak-link-kaart{margin-top:16px}
.kamers-leeg .empty{padding:48px 16px}
.kamers-leeg .empty .ic{width:64px;height:64px}
.kamers-leeg .empty b{font-size:var(--t-18)}
@media (max-width:560px){.sw.kk-sw{min-height:40px}.kk-voet .btn{flex:1 1 auto}}
/* De lade van een kamer: de grote knop Foto's toevoegen in het vak om te kiezen, Hoeveel heb je er? met min en plus, en Wat zit erbij?
   als aanvinkbare pillen (een echt vinkje .vh in een label; aan: navy-soft met een vinkje, zoals een gekozen segment, maar lichter). */
.kf-drop .drop-kies{flex-wrap:wrap}
.kf-knop{pointer-events:none;flex:none}
.aantal-rij{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.aantal-rij .uitleg{flex:1 1 240px;margin:0}
.stapper{display:inline-flex;align-items:center;gap:8px}
.stapper .inp{width:88px;text-align:center;font-size:var(--t-16);font-weight:700}
#s-aantal-blok .nb-samen:empty,#s-nummer-rij[hidden]{display:none}
#s-aantal-blok .nb-samen.err{color:var(--red-text);font-weight:600}
#s-nummer-rij{margin-top:12px}
.voorzieningen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.voorziening{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);color:var(--text-2);font-size:var(--t-13);font-weight:600;cursor:pointer;user-select:none}
.voorziening .i{display:none;color:var(--heading)}
.voorziening:hover{border-color:var(--muted-2)}
.voorziening:has(input:checked){background:var(--navy-soft);border-color:var(--navy-line);color:var(--heading)}
.voorziening:has(input:checked) .i{display:inline-block}
.voorziening:has(input:focus-visible){box-shadow:0 0 0 3px var(--ring)}
#s-vz-blok>.field{margin-bottom:16px}
.kanaal-een{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:16px}
.kanaal-stand{margin:0;flex:1 1 200px;color:var(--text)}
@media (max-width:560px){.voorziening{min-height:40px}.kf-drop .drop-kies{flex-direction:column;align-items:stretch}.kf-knop{width:100%}}
/* De exemplaren in Booking.com en Airbnb (en waar ze nog opgesomd staan): de lijst van zs-rijen; de naam is een link over de hele rij
   (tikdoel 48 px), een pijltje rechts. */
.kamer-lijst{list-style:none;margin:0;padding:0}
.kamer-lijst .zs-rij:last-child{border-bottom:0}
.kamer-rij{position:relative;padding-right:28px}
.kamer-rij[hidden]{display:none}
.kamer-naam{color:inherit;text-decoration:none}
.kamer-naam::after{content:"";position:absolute;inset:0}
.kamer-rij:hover .kamer-naam{text-decoration:underline}
.kamer-pijl{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--muted)}
#s-tijden-blok>.field{margin-top:16px}

/* Verzetten met de weekplanner (27 oktober): de boekingspagina in de verzetstand, over de volle breedte van de lade; de hoogte volgt
   planner.hoogte (beheer.js), zodat er maar één scrollbalk is. */
.vz-plan{position:relative;margin-top:12px}
.vz-plan iframe{display:block;width:100%;height:640px;border:0;border-radius:var(--r-sm);background:var(--card)}
.vz-plan[aria-busy="true"] iframe{visibility:hidden}
.vz-plan #vz-plan-laadt{position:absolute;top:16px;left:0}