/* =====================================================================
   PeeCee Kaffee – Groenenhoek · pck-site.css (publieke site + previewdocumenten)
   Laadt NA pck.css. Geen hexcodes: enkel var(--…). Bron: r2-design §3.10 B.
   Donkere banden: zet "band zwart" in de markup (krijtbord: class="band zwart welkom",
   voet: class="band zwart voet"); de knop-, link- en focusregels komen dan uit pck.css.
   ===================================================================== */

/* ---------- 1. Kop: woordmerk, menu, reserveerknop ---------- */
.kop{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r4);min-height:var(--kop-h);padding:var(--r2) var(--marge);border-bottom:1px solid var(--lijn);background:var(--wit);color:var(--zwart)}

/* Woordmerk (§3.9): "PeeCee" 800 + "Kaffee" 400, boogje boven de C's, GROENENHOEK 0,42× */
.woordbeeld{display:inline-grid;justify-items:start;margin-right:auto;padding-block:var(--r1);color:var(--zwart);font-size:1.5rem;font-weight:400;line-height:1;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.woordbeeld:hover{color:var(--zwart)}
.woordbeeld b{font-weight:800}
.woordbeeld small{margin-top:.25em;color:var(--grijs);font-size:.42em;font-weight:700;line-height:1;letter-spacing:.18em;text-transform:uppercase}
.boogje{display:block;width:3.1em;height:.42em;margin:0 0 -.02em 1.25em;fill:none;stroke:var(--blauw);stroke-width:2;stroke-linecap:round;overflow:visible}
.boogje path{vector-effect:non-scaling-stroke}
@media (min-width:1280px){.woordbeeld{font-size:1.75rem}}
:is(.band.zwart,.affiche-druk > header) .woordbeeld{color:var(--wit)}
:is(.band.zwart,.affiche-druk > header) .woordbeeld small{color:var(--blauw-zacht)}
:is(.band.zwart,.affiche-druk > header) .boogje{stroke:var(--blauw-zacht)}

/* Menuknop: staat met hidden in de HTML; pck-site.js haalt hidden weg en beheert aria-expanded.
   Zonder JS blijft het menu gewoon zichtbaar onder het woordmerk. */
.menuknop{display:inline-flex;align-items:center;gap:var(--r2);min-height:44px;padding:0 var(--r4);border:2px solid var(--zwart);border-radius:var(--hoek);background:var(--wit);color:var(--zwart);font:700 1rem/1 var(--font);cursor:pointer}
.menuknop:hover{background:var(--steen)}
.menuknop[aria-expanded="true"]{background:var(--mist)}
.hoofdmenu{flex-basis:100%}
.hoofdmenu ul{display:flex;flex-wrap:wrap;gap:0 var(--r4);margin:0;padding:0;list-style:none}
.hoofdmenu a{display:flex;align-items:center;min-height:44px;color:var(--zwart);font-weight:600;text-decoration:none}
.hoofdmenu a:hover{color:var(--zwart);text-decoration:underline;text-decoration-thickness:2px}
.hoofdmenu a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-color:var(--blauw);text-decoration-thickness:3px;text-underline-offset:.45em}
.kop-reserveer{display:none}

@media (max-width:1023.98px){
  .kop:has(.menuknop:not([hidden])) .hoofdmenu{display:none}
  .kop:has(.menuknop:not([hidden])[aria-expanded="true"]) .hoofdmenu{position:absolute;top:100%;left:0;right:0;display:block;max-height:calc(100vh - var(--kop-h) - var(--r4));max-height:calc(100dvh - var(--kop-h) - var(--r4));padding:var(--r2) var(--marge) var(--r4);border-bottom:1px solid var(--grijs);background:var(--wit);box-shadow:var(--schaduw-2);overflow-y:auto;overscroll-behavior:contain}
  .kop:has(.menuknop[aria-expanded="true"]) .hoofdmenu ul{flex-direction:column}
  .kop:has(.menuknop[aria-expanded="true"]) .hoofdmenu li + li{border-top:1px solid var(--lijn)}
  .kop:has(.menuknop[aria-expanded="true"]) .hoofdmenu a{min-height:48px}
}
@media (min-width:1024px){
  .kop{flex-wrap:nowrap;gap:var(--r5)}
  .menuknop{display:none !important}
  .hoofdmenu{display:block;flex-basis:auto}
  .hoofdmenu ul{flex-wrap:nowrap;gap:0 var(--r5)}
  .kop-reserveer{display:inline-flex}
}

/* ---------- 2. Duimbalk (gsm, < 1024): Reserveer · Bel · Route ---------- */
.duimbalk{position:fixed;z-index:60;left:0;right:0;bottom:0;display:flex;gap:var(--r2);padding:var(--r2) var(--r3) calc(var(--r2) + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--grijs);background:var(--wit)}
.duimbalk .knop{flex:1;min-height:56px}
.duimbalk a:not(.knop){display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:4.5rem;min-height:56px;border:2px solid var(--zwart);border-radius:var(--hoek);color:var(--zwart);font-size:.875rem;font-weight:700;text-decoration:none}
.duimbalk a:not(.knop) .ico{width:24px;height:24px;color:var(--blauw-inkt)}
/* --duim-h staat op html, zodat ook scroll-padding (op html) en .toast ermee rekenen (K6.02). */
html:has(.duimbalk){--duim-h:4.75rem;scroll-padding-bottom:calc(var(--duim-h) + 1rem)}
body:has(.duimbalk){padding-bottom:calc(var(--duim-h) + env(safe-area-inset-bottom, 0px))}
/* Open menu: de duimbalk wijkt, zodat geen menu-item eronder verdwijnt (WCAG 2.4.11). */
body:has(.menuknop[aria-expanded="true"]) .duimbalk{display:none}
@media (min-width:1024px){
  .duimbalk{display:none}
  html:has(.duimbalk){--duim-h:0px}
  body:has(.duimbalk){padding-bottom:0}
}
/* Weinig hoogte (400 % zoom, gsm liggend): kop en duimbalk scrollen mee in plaats van te blijven hangen (WCAG 1.4.10). */
@media (max-height:30rem){
  .kop{position:static}
  .duimbalk{position:static}
  html:has(.duimbalk){--duim-h:0px}
  body:has(.duimbalk){padding-bottom:0}
}

/* ---------- 3. Welkom = het krijtbord (intro) ----------
   <section class="band zwart welkom"> <div class="krijtbord">…<div class="krijtlat"></div></div>
   <figure class="welkom-foto"><div class="beeld boog" role="img" aria-label="…">…</div></figure> </section>
   Desktop: 7 + 5 kolommen, het beeld loopt tot de rechterrand. */
.welkom{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r7);padding-bottom:0;overflow:hidden}
.krijtbord{position:relative;min-width:0}
.krijtbord h1{margin-bottom:var(--r2)}
.krijtbord p{max-width:58ch}
.krijtbord .lead{max-width:40ch}
.baseline{margin-bottom:var(--r4);color:var(--blauw-zacht);font-size:1.125rem;font-weight:600;line-height:1.3}
.krijtstreep{display:block;width:min(20rem, 80%);height:14px;margin:0 0 var(--r5);fill:none;stroke:var(--blauw-zacht);stroke-width:2.5;stroke-linecap:round}
.vandaag{display:flex;align-items:flex-start;gap:var(--r3);max-width:36rem;margin-block:var(--r5);padding:var(--r4) var(--r5);border:2px solid var(--blauw-zacht);border-radius:var(--hoek)}
.vandaag > .ico{width:28px;height:28px;margin-top:2px;color:var(--blauw-zacht)}
.vandaag p{margin:0}
.vandaag .bovenregel{margin-bottom:var(--r1)}
.ikkom{font-size:1.125rem}
/* Knoppen op het krijtbord: wit vlak (20,75) en wit omrande knop. Geen bordeaux op het krijtbord. */
.krijtbord .knop{border-color:var(--wit);background:var(--wit);color:var(--zwart)}
.krijtbord .knop:hover{background:var(--mist);border-color:var(--mist);color:var(--zwart)}
.krijtbord .knop.rand{background:transparent;color:var(--wit)}
.krijtbord .knop.rand:hover{background:var(--wit);color:var(--zwart)}
/* De krijtlat: een lat met twee stukjes krijt (wit en blauw) */
.krijtlat{position:relative;height:10px;margin-top:var(--r7);border-radius:0 0 4px 4px;background:var(--grijs)}
.krijtlat::before,.krijtlat::after{content:"";position:absolute;top:-5px;height:6px;border-radius:3px}
.krijtlat::before{left:14%;width:44px;background:var(--wit)}
.krijtlat::after{left:calc(14% + 56px);width:28px;background:var(--blauw-zacht)}
.welkom-foto{margin:0 calc(var(--marge) * -1)}
/* Gsm: een lage strook, zodat het prikbord snel volgt (K3.03). */
.welkom-foto .beeld{aspect-ratio:21 / 9;border-radius:0}
.welkom-foto .beeld::after{border-radius:0}
@media (min-width:768px){
  .welkom-foto .beeld{aspect-ratio:4 / 3}
  .krijtbord{padding:var(--r7) var(--r7) 0;border:6px solid var(--grijs);border-bottom:0;border-radius:var(--hoek) var(--hoek) 0 0}
  .krijtbord::before{content:"";position:absolute;inset:6px 6px 0;border:1px solid color-mix(in srgb, var(--blauw-zacht) 35%, transparent);border-bottom:0;border-radius:4px 4px 0 0;pointer-events:none}
  .krijtlat{margin-inline:calc(var(--r7) * -1 - 6px)}
}
@media (min-width:1024px){
  .welkom{grid-template-columns:repeat(12, minmax(0,1fr));column-gap:var(--goot);padding-right:0}
  .krijtbord{grid-column:1 / 8;align-self:end}
  .welkom-foto{grid-column:8 / 13;align-self:stretch;margin:0}
  .welkom-foto .beeld{height:100%;min-height:28rem;aspect-ratio:auto;border-radius:999px 999px 0 0}
  .welkom-foto .beeld::after{border-radius:999px 999px 0 0}
}

/* ---------- 4. Sectiekop en bovenregel (ook paginakop van de subpagina's) ---------- */
.sectie-kop{max-width:var(--tekst-breed);margin-bottom:var(--r7)}
.sectie-kop > p:not(.lead){font-size:var(--t-lead);line-height:1.45}
.bovenregel{display:block;margin-bottom:var(--r3);color:var(--blauw-inkt);font-size:var(--t-boven);font-weight:700;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.band.zwart .bovenregel{color:var(--blauw-zacht)}

/* Achtergrond van kaarten in een mistband: wit, zodat ze niet wegvallen */
.band.mist :is(.tegel,.kaartje,.telblok,.krijgen,.rustige-ingang,.sleutel){background:var(--wit)}

/* ---------- 5. Wie we zijn: drietal en blokjes · tegels ---------- */
.drietal{display:grid;gap:var(--r6) var(--goot);margin:0 0 var(--r7);padding:0;list-style:none}
.blokje{display:flex;flex-direction:column;gap:var(--r3)}
.blokje > .ico{width:40px;height:40px;color:var(--blauw-inkt)}
.blokje :is(h3,p){margin:0}
.blokje p{max-width:40ch}
@media (min-width:768px){.drietal{grid-template-columns:repeat(3, minmax(0,1fr))}}

.tegels{display:grid;gap:var(--goot)}
.tegel{display:flex;flex-direction:column;gap:var(--r4);padding:var(--r6);border-radius:var(--hoek-kaart);background:var(--mist);color:var(--zwart)}
.tegel > .ico{width:40px;height:40px;color:var(--blauw-inkt)}
.tegel :is(h2,p){margin:0}
.tegel .knop{align-self:flex-start;margin-top:auto}
.tegel > .beeld:first-child{margin:calc(var(--r6) * -1) calc(var(--r6) * -1) 0;border-radius:var(--hoek-kaart) var(--hoek-kaart) 0 0}
@media (min-width:768px){.tegels{grid-template-columns:repeat(2, minmax(0,1fr))}}
/* Tegels in de volle blauwe band (home): het blauw blijft zichtbaar, zwarte rand en zwarte iconen */
.band.blauw .tegel{border:2px solid var(--zwart);background:transparent}
.band.blauw .tegel > .ico{color:var(--zwart)}
@media (min-width:1280px){.tegel{padding:var(--r7)}.tegel > .beeld:first-child{margin:calc(var(--r7) * -1) calc(var(--r7) * -1) 0}}

/* ---------- 6. Sleutelbord: zaalkaarten met koord en capaciteitsgetal ---------- */
.sleutels,.sleutels-klein{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr));gap:var(--r8) var(--goot);margin:0;padding:0;list-style:none}
.sleutels-klein{margin-top:var(--r8)}
.sleutel-plek{position:relative;display:flex;flex-direction:column;padding-top:52px}
.sleutel-plek::before{content:"";position:absolute;top:0;left:50%;width:5.5rem;height:10px;margin-left:-2.75rem;border-radius:var(--r1);background:var(--zwart)}
.koord{position:absolute;z-index:1;top:6px;left:50%;width:40px;height:68px;margin-left:-20px;fill:none;stroke:var(--blauw-zacht);stroke-width:1.75;stroke-linecap:round}
.koord circle{fill:var(--zwart);stroke:none}
.sleutel{display:flex;flex:1;flex-direction:column;gap:var(--r3);padding:3rem var(--r5) var(--r5);border-radius:var(--hoek-kaart);outline:2px solid var(--blauw-zacht);outline-offset:-8px;background:var(--mist);color:var(--zwart);
  -webkit-mask:radial-gradient(circle at 50% 18px, transparent 7px, black 7.5px);mask:radial-gradient(circle at 50% 18px, transparent 7px, black 7.5px)}
.sleutel :is(h3,p){margin:0}
.sleutel h3{display:flex;align-items:center;gap:var(--r2)}
.sleutel h3 .ico{width:28px;height:28px;color:var(--blauw-inkt)}
.sleutel .beeld{margin-block:var(--r1)}
.sleutel .knop{align-self:flex-start;margin-top:auto}
.sleutels-klein .sleutel{padding-top:2.5rem}
.capaciteit{display:flex;align-items:baseline;gap:var(--r3);margin:0}
.capaciteit small{line-height:1.2}
.getal{color:var(--zwart);font-size:var(--t-cap);font-weight:800;line-height:1;letter-spacing:-.03em}
.uitrusting{display:flex;flex-wrap:wrap;gap:var(--r2) var(--r4);margin:0;padding:0;list-style:none}
.uitrusting li{display:flex;align-items:center;gap:var(--r2)}
.uitrusting .ico{color:var(--blauw-inkt)}
.erbij{border-block:1px solid var(--blauw-zacht)}
.erbij > summary{display:flex;align-items:center;min-height:44px;color:var(--blauw-inkt);font-weight:700;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.erbij > :not(summary){margin-bottom:var(--r3)}
.tarief{font-weight:600}

/* ---------- 7. Reserveren: flow in ≤ 4 stappen ---------- */
.rustige-ingang{max-width:var(--tekst-breed);margin:0 0 var(--r6);padding:var(--r4) var(--r5);border-left:4px solid var(--blauw-inkt);border-radius:0 var(--hoek) var(--hoek) 0;background:var(--mist)}
.rustige-ingang a{font-weight:700}
.zo-werkt{display:grid;gap:var(--r3);margin:0 0 var(--r7);padding:0;list-style:none;counter-reset:zo}
.zo-werkt li{position:relative;padding:var(--r4) var(--r5) var(--r4) 4rem;border-top:2px solid var(--zwart);background:var(--wit)}
.zo-werkt li::before{content:counter(zo);counter-increment:zo;position:absolute;top:var(--r4);left:var(--r4);width:2.25rem;height:2.25rem;border:2px solid var(--zwart);border-radius:50%;font-weight:800;line-height:calc(2.25rem - 4px);text-align:center}
.zo-werkt b{display:block}
@media (min-width:768px){.zo-werkt{grid-template-columns:repeat(3, minmax(0,1fr))}}

.flow{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r6);align-items:start}
.flow > *{min-width:0}
@media (min-width:1024px){
  .flow{grid-template-columns:minmax(0,1fr) minmax(18rem, 22rem)}
  .flow > aside{position:sticky;top:calc(var(--kop-h) + var(--r4))}
}
.stappenbalk{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--r2);margin:0 0 var(--r5);padding:0;list-style:none;color:var(--grijs);font-size:var(--t-klein);line-height:1.25}
.stappenbalk li{padding-top:var(--r2);border-top:4px solid var(--lijn)}
.stappenbalk li b{display:block;font-variant-numeric:tabular-nums}
.stappenbalk li:has(~ li[aria-current="step"]){border-top-color:var(--blauw)}
.stappenbalk li[aria-current="step"]{border-top-color:var(--zwart);color:var(--zwart);font-weight:700}
.stap{padding:var(--r5);border:1px solid var(--lijn);border-radius:var(--hoek-kaart);background:var(--wit);color:var(--zwart)}
@media (min-width:768px){.stap{padding:var(--r6)}}
.stapnav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3);margin-top:var(--r6);padding-top:var(--r5);border-top:1px solid var(--lijn)}
.stapnav .knop.tekst:first-child{margin-left:calc(var(--r2) * -1)}
fieldset:has(> .zaalkeuze),fieldset:has(> .taak){display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr));gap:var(--r3)}
.zaalkeuze{display:flex;align-items:flex-start;gap:var(--r3);min-height:64px;padding:var(--r4);border:2px solid var(--grijs);border-radius:var(--hoek-kaart);background:var(--wit);color:var(--zwart);cursor:pointer}
.zaalkeuze input{margin-top:2px}
.zaalkeuze b{display:block;font-size:1.125rem}
.zaalkeuze:hover{border-color:var(--zwart)}
.zaalkeuze:has(input:checked){border-color:var(--zwart);box-shadow:inset 0 0 0 1px var(--zwart);background:var(--mist)}
.zaalkeuze:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.zaalkeuze:has(input:disabled){border-color:var(--lijn);color:var(--grijs);cursor:not-allowed}
.ontvangst{padding:var(--r5);border:2px solid var(--zwart);border-radius:var(--hoek-kaart);background:var(--wit);color:var(--zwart)}
@media (min-width:768px){.ontvangst{padding:var(--r6)}}
.ontvangst > * + *{margin-top:var(--r4)}
.kantina{margin-top:var(--r6);border:1px solid var(--grijs);border-radius:var(--hoek-kaart);background:var(--wit);color:var(--zwart)}
.kantina > summary,.kantina > :is(h2,h3):first-child{display:flex;align-items:center;gap:var(--r3);min-height:56px;margin:0;padding:var(--r2) var(--r5);font-size:1.25rem;font-weight:700;cursor:pointer}
.kantina > summary .ico,.kantina > :is(h2,h3) .ico{width:26px;height:26px;color:var(--blauw-inkt)}
.kantina > :not(summary,h2,h3){margin:0;padding:0 var(--r5) var(--r5)}
.belregel{margin-top:var(--r3);font-size:var(--t-klein)}

/* ---------- 8. Prikbord: activiteiten en maandkalender ---------- */
.prikbord{background-color:var(--mist);background-image:radial-gradient(color-mix(in srgb, var(--blauw-zacht) 28%, transparent) 1px, transparent 1.5px);background-size:24px 24px}
.altijd{max-width:var(--tekst-breed);margin:0 0 var(--r6);padding:var(--r4) var(--r5);border:1px solid var(--grijs);border-left:4px solid var(--zwart);border-radius:0 var(--hoek) var(--hoek) 0;background:var(--wit)}
.altijd :is(h2,h3){margin:0 0 var(--r1);font-size:1.25rem}
.prik-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--r3) var(--r5);margin-bottom:var(--r5)}
.prik-kop :is(h2,h3){margin:0}
.affiches{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr));gap:var(--r6) var(--goot);margin:0;padding:var(--r2) 0 0;list-style:none}
.affiches + .knoprij,.affiches + p{margin-top:var(--r6)}
.leeg-prikbord{max-width:40rem;margin-top:var(--r4);padding:var(--r5);border:1px solid var(--lijn);border-radius:var(--hoek-kaart);background:var(--wit)}
.maandnav{display:flex;align-items:center;justify-content:space-between;gap:var(--r2);margin-block:var(--r2)}
.maandnav :is(b,h3,h4,strong){margin:0;font-size:1.25rem;font-weight:700;text-align:center}
.kal-tabel{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:2px;font-variant-numeric:tabular-nums}
.kal-tabel caption{padding-bottom:var(--r2);font-weight:700;text-align:left}
.kal-tabel th{padding:var(--r1) 0;color:var(--grijs);font-size:.875rem;font-weight:700;text-align:center}
.kal-tabel td{padding:0;vertical-align:top}
.kal-tabel td ul{margin:0;padding:0;list-style:none}
.kal-tabel td li a{display:block;margin-top:2px;padding:2px 4px;border-left:3px solid var(--zwart);background:var(--wit);font-size:.875rem;line-height:1.2;overflow-wrap:anywhere}
.kal-dag{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:44px;padding:2px 0;border-radius:var(--hoek);font:700 1rem/1 var(--font);font-variant-numeric:tabular-nums;cursor:pointer}
.kal-dag .ico{width:14px;height:14px}
.kal-dag[aria-pressed="true"]{position:relative;z-index:1;box-shadow:0 0 0 3px var(--zwart)}
.kal-dag[aria-current="date"] > :first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.kal-dag:disabled{border:1px solid var(--lijn);background:transparent;color:var(--grijs);font-weight:400;cursor:default}
@media (min-width:768px){
  .kal-tabel{border-spacing:4px}
  .kal-dag{min-height:56px}
}

/* ---------- 9. Vrijwilligers: briefjes, formulier, taken, toogrooster ---------- */
.krijgen{max-width:52rem;margin:0 0 var(--r6);padding:var(--r5) var(--r6);border-radius:var(--hoek-kaart);background:var(--mist)}
.krijgen :is(h2,h3){font-size:1.25rem}
.briefjes{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr));gap:var(--r6) var(--goot);margin:0;padding:var(--r3) 0 0;list-style:none}
.briefje{position:relative;display:flex;flex-direction:column;gap:var(--r3);padding:var(--r6) var(--r5) var(--r5);border:1px solid var(--lijn);border-radius:var(--r1);background:var(--wit);color:var(--zwart);box-shadow:var(--schaduw-1)}
.briefje::before{content:"";position:absolute;top:-10px;left:50%;width:5rem;height:20px;margin-left:-2.5rem;border-radius:2px;background:color-mix(in srgb, var(--blauw-zacht) 40%, transparent)}
.briefje :is(h3,p){margin:0}
.briefje .stempel{align-self:flex-start}
.briefje .knop{align-self:flex-start;margin-top:auto}
.vw-form{max-width:52rem;padding:var(--r5);border:1px solid var(--lijn);border-radius:var(--hoek-kaart);background:var(--wit);color:var(--zwart)}
@media (min-width:768px){.vw-form{padding:var(--r6)}}
.taken{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr));gap:var(--r3);margin:0 0 var(--r5);padding:0;list-style:none}
.taak{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r1) var(--r3);padding:var(--r4);border:2px solid var(--grijs);border-radius:var(--hoek-kaart);background:var(--wit);color:var(--zwart);cursor:pointer}
.taak input{margin-top:2px}
.taak b{display:flex;align-items:center;gap:var(--r2);font-size:1.125rem}
.taak b .ico{width:26px;height:26px;color:var(--blauw-inkt)}
.taak > :not(input,b){grid-column:2}
.taak:hover{border-color:var(--zwart)}
.taak:has(input:checked){border-color:var(--zwart);box-shadow:inset 0 0 0 1px var(--zwart);background:var(--mist)}
.taak:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
/* Toogrooster: tabel dagen × dagdelen; een gevulde cel = er wordt iemand gezocht */
.toogrooster{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px;font-size:.875rem;font-variant-numeric:tabular-nums}
.toogrooster th{padding:var(--r1);color:var(--grijs);font-weight:700;text-align:center}
.toogrooster tbody th{text-align:left}
.toogrooster td{height:2.75rem;padding:var(--r1);border-radius:var(--hoek);background:var(--steen);text-align:center;vertical-align:middle}
.toogrooster td:not(:empty){border:2px solid var(--zwart);background:var(--blauw);color:var(--zwart);font-weight:700}
.bedankt{max-width:44rem;padding:var(--r6);border:2px solid var(--zwart);border-radius:var(--hoek-kaart);background:var(--wit);color:var(--zwart)}
.bedankt > .ico{width:40px;height:40px;color:var(--blauw-inkt)}

/* ---------- 10. Openingsuren: weekbalk, vandaag, telblok ---------- */
.week{display:grid;gap:var(--r2);margin:0 0 var(--r6);padding:0;list-style:none;font-variant-numeric:tabular-nums}
.week li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--r1) var(--r3);padding:var(--r3) var(--r4);border:1px solid var(--lijn);border-bottom:4px solid var(--lijn);border-radius:var(--hoek);background:var(--wit)}
.week li b{display:block}
.week li.is-vandaag{border-color:var(--zwart);background:var(--mist)}
.vandaag-woord{display:inline-block;padding:0 var(--r2);border-radius:var(--hoek-rond);background:var(--zwart);color:var(--wit);font-size:.875rem;font-weight:700;line-height:1.6}
@media (min-width:768px){
  .week{grid-template-columns:repeat(7, minmax(0,1fr))}
  .week li{flex-direction:column;justify-content:flex-start}
}
/* Home op de gsm (K3.03): enkel vandaag + een link naar de hele week. Zonder JS (geen .is-vandaag) blijft de hele week staan. */
.week-link{margin:calc(var(--r4) * -1) 0 var(--r6)}
@media (max-width:767.98px){
  .week.week-kort:has(> li.is-vandaag) > li:not(.is-vandaag){display:none}
}
@media (min-width:768px){.week-link{display:none}}
.telblok{max-width:36rem;padding:var(--r5);border-radius:var(--hoek-kaart);background:var(--mist)}
.telblok :is(h2,h3){font-size:1.25rem}
.telblok a[href^="tel:"]{font-size:var(--t-h3);font-weight:700}

/* ---------- 11. Vragen (FAQ), contact ---------- */
.faq{max-width:var(--tekst-breed)}
.faq details{border-bottom:1px solid var(--lijn)}
.faq details:first-child{border-top:1px solid var(--lijn)}
.faq summary{display:flex;align-items:center;gap:var(--r3);min-height:56px;padding-block:var(--r3);font-size:1.1875rem;font-weight:700;line-height:1.3;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:none;width:28px;height:28px;border:2px solid var(--zwart);border-radius:50%;background:linear-gradient(var(--zwart),var(--zwart)) center / 12px 2px no-repeat,linear-gradient(var(--zwart),var(--zwart)) center / 2px 12px no-repeat}
.faq details[open] > summary::before{background:linear-gradient(var(--zwart),var(--zwart)) center / 12px 2px no-repeat}
.faq details > :not(summary){max-width:60ch;margin:0 0 var(--r4) calc(28px + var(--r3))}

.kaartje{padding:var(--r6);border-radius:var(--hoek-kaart);background:var(--mist);color:var(--zwart)}
.kaartje address{margin-bottom:var(--r4);font-size:var(--t-h3);font-weight:700;line-height:1.3}
.contactlijst{margin:0;padding:0;list-style:none}
.contactlijst li{border-top:1px solid var(--lijn)}
.contactlijst li:first-child{border-top:0}
.contactlijst a{display:flex;align-items:center;gap:var(--r3);min-height:52px;font-weight:600}
.contactlijst .ico{width:24px;height:24px;color:var(--blauw-inkt)}
.band.zwart .contactlijst li{border-color:var(--grijs)}
.band.zwart .contactlijst .ico{color:var(--blauw-zacht)}

/* ---------- 12. Beeld: placeholder "FOTO VOLGT", boog, beeldband ---------- */
.beeld{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--r3);margin:0;padding:var(--r5);aspect-ratio:3 / 2;border-radius:var(--hoek);background:var(--mist);color:var(--blauw-inkt);text-align:center;overflow:hidden}
.beeld::after{content:"";position:absolute;inset:8px;border:2px solid var(--blauw-zacht);border-radius:4px;pointer-events:none}
.beeld > .ico{width:56px;height:56px;stroke-width:1.5}
.beeld > span{padding:.125rem .5rem;border:2px solid var(--zwart);border-radius:4px;background:var(--wit);color:var(--zwart);font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.beeld > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beeld:has(> img)::after{display:none}
.boog{aspect-ratio:4 / 5;border-radius:999px 999px var(--hoek) var(--hoek)}
.boog::after{border-radius:999px 999px 4px 4px}
.boog.breed{aspect-ratio:3 / 2}
.beeldband{aspect-ratio:4 / 3;border-radius:0}
.beeldband::after{border-radius:0}
@media (min-width:768px){.beeldband{aspect-ratio:16 / 9}}
@media (min-width:1280px){.beeldband{aspect-ratio:21 / 9}}

/* ---------- 13. Tegelband en voet ---------- */
.tegelband{height:20px;border-block:2px solid var(--blauw-zacht);background-color:var(--zwart);background-image:repeating-linear-gradient(45deg, var(--blauw-zacht) 0 1.5px, transparent 1.5px 10px),repeating-linear-gradient(-45deg, var(--blauw-zacht) 0 1.5px, transparent 1.5px 10px)}
.voet{display:grid;gap:var(--r5);padding-block:var(--r7);font-size:var(--t-klein);line-height:1.5}
.voet > *{margin:0}
.voet ul:not(.contactlijst){display:flex;flex-wrap:wrap;gap:0 var(--r5);margin:0;padding:0;list-style:none}
.voet ul:not(.contactlijst) a{display:inline-flex;align-items:center;min-height:44px}
.voet .woordbeeld{margin-right:0}
@media (min-width:1024px){
  .voet{grid-template-columns:repeat(12, minmax(0,1fr));column-gap:var(--goot)}
  .voet > *{grid-column:1 / -1}
  .voet > .woordbeeld,.voet > p:first-of-type{grid-column:1 / 6}
  .voet > .contactlijst{grid-column:7 / 13;grid-row:1 / span 2}
}

/* ---------- 14. Previewdocumenten (index, voorstel, documentatie, lancering, privacy) ---------- */
.doc{color:var(--zwart)}
.doc > *{max-width:var(--tekst-breed)}
.doc > :is(table,figure,pre,.inhoudstafel,.raster,.affiche-druk,.strook){max-width:none}
.doc h2{margin-top:var(--r8)}
.doc h3{margin-top:var(--r6)}
.doc :is(h2,h3,h4)[id]{scroll-margin-top:5rem}
.doc :is(h1,h2,h3,h4):first-child{margin-top:0}
.doc li + li{margin-top:var(--r1)}
.doc table{width:100%;max-width:72rem;margin-block:var(--r5);font-size:var(--t-klein);line-height:1.45}
.doc caption{padding-bottom:var(--r2);font-weight:700;text-align:left}
.doc :is(th,td){padding:var(--r2) var(--r3);border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.doc thead th{border-bottom:2px solid var(--zwart);font-weight:700}
.doc tbody th{font-weight:600}
.doc tbody tr:nth-child(even){background:var(--steen)}
.doc code{padding:.1em .3em;border-radius:4px;background:var(--steen)}
.doc pre{padding:var(--r4);border-radius:var(--hoek);background:var(--steen);overflow-x:auto}
.doc pre code{padding:0;background:none}
.doc blockquote{padding-left:var(--r4);border-left:4px solid var(--blauw-inkt)}
.doc dt{font-weight:700}
.doc dd{margin:0 0 var(--r3)}
.doc details{margin-block:var(--r4);padding:var(--r3) var(--r4);border:1px solid var(--grijs);border-radius:var(--hoek)}
.doc details > summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.inhoudstafel{margin-block:var(--r6);padding:var(--r5);border-radius:var(--hoek-kaart);background:var(--mist)}
.inhoudstafel :is(h2,h3){margin:0 0 var(--r3);font-size:var(--t-h3)}
.inhoudstafel ol,.inhoudstafel ul{margin:0;padding-left:1.5em;columns:16rem;column-gap:var(--goot)}
.inhoudstafel li{padding-block:2px;break-inside:avoid}

/* ---------- 15. Affiche voor druk (lancering.html, Could): A4 staand ---------- */
@page affiche{size:A4 portrait;margin:0}
.affiche-druk{display:flex;flex-direction:column;width:100%;max-width:210mm;aspect-ratio:210 / 297;margin-inline:auto;border:1px solid var(--grijs);background:var(--wit);color:var(--zwart)}
.affiche-druk > header{padding:var(--r7) var(--r6);background:var(--zwart);color:var(--wit)}
.affiche-druk > header .woordbeeld{font-size:clamp(2rem, 1.2rem + 4vw, 3.5rem)}
.affiche-druk > header p{margin:var(--r4) 0 0;color:var(--blauw-zacht);font-size:clamp(1.125rem, 1rem + 1vw, 1.75rem);font-weight:600}
.affiche-druk > ul{display:grid;gap:var(--r4);margin:0;padding:var(--r6);list-style:none;font-size:clamp(1.0625rem, 1rem + .8vw, 1.5rem);font-weight:600}
.affiche-druk > ul li{display:flex;align-items:center;gap:var(--r3)}
.affiche-druk > ul .ico{width:1.75em;height:1.75em;color:var(--blauw-inkt)}
.affiche-druk > figure{display:grid;place-items:center;width:40mm;height:40mm;margin:0 var(--r6);border:2px solid var(--zwart);background:var(--wit)}
.affiche-druk > figure figcaption{font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.affiche-druk > footer{margin-top:auto;padding:var(--r5) var(--r6) var(--r6);border-top:2px solid var(--zwart);font-size:1rem;line-height:1.5}

/* ---------- 15b. Activiteitenkalender (Web, stap 1) ----------
   Enkel binnen [data-act-kalender], zodat de statusklassen van de boekingskalender (.kal-dag.status-*) niet geraakt worden.
   Geen nieuwe klassen: data-aantal (er hangt iets) en data-voorbij (dag is voorbij) zet pck-site.js. */
[data-act-kalender] .kal-dag{border:1px solid var(--lijn);background:var(--wit);color:var(--zwart)}
[data-act-kalender] .kal-dag:hover{border-color:var(--zwart)}
[data-act-kalender] .kal-dag[data-aantal]{border:2px solid var(--zwart);background:var(--mist)}
[data-act-kalender] .kal-dag[data-aantal] .ico{color:var(--blauw-inkt)}
[data-act-kalender] .kal-dag[data-voorbij]{color:var(--grijs);font-weight:400}
[data-act-kalender] .maandnav{max-width:40rem}
[data-act-kalender] .kal-tabel{max-width:40rem}
[data-daglijst]{margin-top:var(--r6)}
@media (forced-colors:active){[data-act-kalender] .kal-dag[data-aantal]{border:3px double CanvasText}}

/* ---------- 16. Print ---------- */
@media print{
  .kop,.duimbalk,.menuknop,.tegelband{display:none !important}
  body:has(.duimbalk){padding-bottom:0}
  .band.zwart:not(.welkom){background:none;color:var(--zwart)}
  .band.zwart:not(.welkom) a{color:var(--zwart)}
  .affiche-druk{page:affiche;width:210mm;max-width:none;height:297mm;aspect-ratio:auto;border:0;break-before:page;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .affiche-druk > header{padding:16mm 14mm}
  .affiche-druk > ul{gap:7mm;padding:12mm 14mm;font-size:18pt}
  .affiche-druk > figure{margin:0 14mm}
  .affiche-druk > footer{padding:8mm 14mm 14mm;font-size:12pt}
}