/* Kantini — app in Apple-stijl (Human Interface Guidelines)
 * Letter: Figtree (eigen bestand figtree.woff2), terugval de systeemletter. Vernieuwd in oktober 2026: zie het
 * blok "Vernieuwd" onderaan (kaarten, dagkoppen, keuzechips, zwevende tabbalk, actietegels, twee kolommen).
 * Systeemachtergronden en -grijzen van iOS in licht en donker, inset grouped lists, large titles,
 * segmented controls, sheets voor panelen en "materiaal" (blur) onder tab- en navigatiebalk.
 * De clubkleur is de tint (knoppen, links, gekozen tab); app.js (zetKleur/kleurVarianten) leidt daar
 * veilige varianten van af voor licht én donker. Kantini zelf (inloggen, voet) is clubgroen.
 * Telefoon (< 760px): large title, tabbalk onderin, sheets van onderen (veegbaar).
 * Tablet/desktop (≥ 760px): zijbalk + inhoud, gecentreerde sheets, hover-states.
 *
 * Typeschaal (Apple, pt = px): large title 34 · title1 28 · title2 22 · title3 20 · headline 17 semibold ·
 * body 17 · callout 16 · subheadline 15 · footnote 13 · caption 12/11. Tikvlakken minimaal 44 × 44.
 *
 * Inhoud: tokens (licht, daarna donker) · basis + hulpklassen (.vh, [inert]) · Opbouw · Clubkop/logo ·
 * Lijsten · Tabbalk · Zijbalk · Sheet (paneel) · Knoppen en velden · Segment · Schakelaar · Melding ·
 * Startscherm/inloggen · Rooster inlezen · Meldingsblok · Jaaroverzicht · Deze week/startlijst ·
 * Openbare pagina's · Seizoensverslag · Testmodus · Tip een club · Vaste vrijwilligers · Opmerkingen ·
 * Links delen/QR · Clublogo-instelling · Cijfers · Printen (alles voor papier onderaan in één blok).
 */
/* Figtree (OFL, zie OFL.txt): eigen bestand, geen externe verzoeken. Eén variabel bestand voor
 * gewicht 300–900, alleen Latijnse tekens (± 21 kB). Symbolen als ✓ ○ ⇄ komen uit de systeemletter. */
@font-face { font-family: "Figtree"; src: url("figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Clubkleur. app.js zet per club --tint-*-l (licht) en --tint-*-d (donker); zonder club (inloggen)
   * gelden deze waarden: het Kantini-merk uit marketing/logo/club/LEESMIJ.md (groen; in donker fris). */
  --tint-l: #0B7A3B; --tint-tekst-l: #0A6B34; --tint-knop-l: #0B7A3B; --tint-knop-tekst-l: #FFFFFF; --tint-zacht-l: #E2EFE7;
  --tint-d: #9BE15D; --tint-tekst-d: #9BE15D; --tint-knop-d: #9BE15D; --tint-knop-tekst-d: #0C110E; --tint-zacht-d: #3A4B2D;
  --tint: var(--tint-l); --tint-tekst: var(--tint-tekst-l); --tint-knop: var(--tint-knop-l);
  --tint-knop-tekst: var(--tint-knop-tekst-l); --tint-zacht: var(--tint-zacht-l);
  /* Kantini-merk: vast, los van de club (voet "Rooster via Kantini") */
  --merk: #0B7A3B; --merk-tekst: #0A6B34;
  /* Systeemkleuren iOS (licht) */
  --bg: #F2F2F7;            /* systemGroupedBackground */
  --cel: #FFFFFF;           /* secondarySystemGroupedBackground */
  --cel-hoog: #FFFFFF;      /* cel in een sheet */
  --cel-2: #E5E5EA;         /* ingedrukt / hover */
  --label: #000000;
  --sec: #6E6E73;           /* secondaryLabel, ondoorzichtig: 5,1:1 op wit */
  --ter: #C7C7CC;           /* chevrons, plaatshouders (geen leestekst) */
  --sep: rgba(60,60,67,.29);
  --sep-dik: #C6C6C8;       /* opaque separator */
  --vul: rgba(118,118,128,.12); --vul-2: rgba(120,120,128,.20);
  /* Status: vast, nooit de clubkleur. Teksttinten zijn de "toegankelijke" Apple-varianten (≥ 4,5:1). */
  --ok: #1B7D35; --ok-vlak: #34C759;
  --open: #C93400; --open-zacht: rgba(255,149,0,.15);
  --ruil: #D70015; --ruil-zacht: rgba(255,59,48,.11);
  --glas: rgba(249,249,249,.78);        /* materiaal onder tab- en navigatiebalk */
  --glas-rand: rgba(0,0,0,.3);
  --kaart: 0 1px 2px rgba(12,17,14,.05), 0 8px 24px -14px rgba(12,17,14,.18);   /* zachte schaduw onder kaarten */
  --schaduw: 0 0 0 .5px rgba(0,0,0,.05), 0 18px 50px -12px rgba(0,0,0,.28);
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-kop: var(--font);
  --zijbalk: 280px; --tabbalk: 50px;
  --r: 18px;                             /* hoekradius van kaarten en lijsten */
  --segment-aan: #FFFFFF;
  /* Grafieken (Cijfers): vaste kleuren, los van de clubkleur; rood/groen alleen samen met symbolen,
   * volgorde en tabel. Open = lege baan. */
  --gf-vol: #34C759; --gf-ruil: #FF3B30; --gf-vast: #AEAEB2; --gf-open: rgba(118,118,128,.12);
  --veer: cubic-bezier(.32,.72,0,1);
  color-scheme: light;
}
/* Donkere modus volgt het apparaat. Bewust een @media op het hoogste niveau (geen @media binnen een
 * selector): oudere iOS-Safari kent die nesting niet. De :not()-haak laat ruimte voor "altijd licht". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: var(--tint-d); --tint-tekst: var(--tint-tekst-d); --tint-knop: var(--tint-knop-d);
    --tint-knop-tekst: var(--tint-knop-tekst-d); --tint-zacht: var(--tint-zacht-d);
    --merk: #9BE15D; --merk-tekst: #9BE15D;
    --bg: #000000; --cel: #1C1C1E; --cel-hoog: #2C2C2E; --cel-2: #2C2C2E; --label: #FFFFFF;
    --sec: #98989F; --ter: #48484A; --sep: rgba(84,84,88,.65); --sep-dik: #38383A;
    --vul: rgba(118,118,128,.24); --vul-2: rgba(120,120,128,.36);
    --ok: #30D158; --ok-vlak: #30D158;
    --open: #FF9F0A; --open-zacht: rgba(255,159,10,.18);
    --ruil: #FF6961; --ruil-zacht: rgba(255,69,58,.18);
    --glas: rgba(22,22,23,.78); --glas-rand: rgba(255,255,255,.15);
    --schaduw: 0 0 0 .5px rgba(255,255,255,.08), 0 18px 50px -12px rgba(0,0,0,.9);
    --kaart: 0 0 0 .5px rgba(255,255,255,.06);
    --segment-aan: #636366;
    --gf-vol: #30D158; --gf-ruil: #FF453A; --gf-vast: #636366; --gf-open: rgba(118,118,128,.24);
    color-scheme: dark;
  }
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--bg); color: var(--label);
  font-family: var(--font); font-size: 17px; line-height: 1.3; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { touch-action: manipulation; }
a { color: var(--tint-tekst); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
/* Dunne lijn-iconen (SF Symbols-achtig): één lijndikte voor de hele app */
svg[stroke="currentColor"] { stroke-width: 1.6; }
/* Alleen voor schermlezers (bijv. een verborgen bestandskiezer met een eigen knop ernaast). */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Achter een open paneel is de app inert. Browsers zonder inert (oudere Safari) negeren het attribuut;
 * dan houdt dit in elk geval tikken en selecteren tegen. */
[inert] { pointer-events: none; -webkit-user-select: none; user-select: none; }
.chrome { -webkit-user-select: none; user-select: none; }
/* Getallen en tijden staan altijd netjes onder elkaar */
.nr, .acc, .teller, .voortgang, .tegel b, .titel, .chip span, .rooster th { font-variant-numeric: tabular-nums; }

/* ---------- Opbouw ---------- */
.shell { min-height: 100vh; }
.inhoud { max-width: 720px; margin: 0 auto; padding: 0 16px 56px; }
.inhoud.smal { max-width: 600px; }
.heeft-tabbalk .inhoud { padding-bottom: calc(var(--tabbalk) + 36px + env(safe-area-inset-bottom, 0px)); }

/* Navigatiebalk (telefoon): doorzichtig boven de large title, materiaal zodra je scrolt */
.navbalk {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 8px; margin: 0 -16px;
  background: transparent; transition: background .25s, box-shadow .25s;
}
.navbalk.ingeklapt { background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 .5px 0 var(--glas-rand); }
.navbalk .kleine-titel { font-size: 17px; font-weight: 600; letter-spacing: 0; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s var(--veer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.navbalk.ingeklapt .kleine-titel { opacity: 1; transform: none; }
.navbalk .links { justify-self: start; } .navbalk .rechts { justify-self: end; display: flex; gap: 2px; }
.nav-knop {
  border: 0; background: none; color: var(--tint-tekst); font-size: 17px; font-weight: 400; padding: 0 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; min-height: 44px; min-width: 44px; justify-content: center;
}
.nav-knop svg { width: 22px; height: 22px; }
.nav-knop .pijl { font-size: 30px; line-height: 0; margin-top: -3px; font-weight: 300; }
/* Klein label boven een grote titel: "Kantinedienst" boven "JO10" */
.boven-label { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--sec); margin: 14px 0 0; }
.grote-titel {
  font-size: 34px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 2px 0 8px; text-wrap: balance;
}
.onder-titel { color: var(--sec); font-size: 15px; margin: 0 0 12px; }

/* ---------- Clubkop en clublogo ---------- */
.clubkop { display: flex; align-items: center; gap: 12px; padding: 14px 0 2px; }
/* Het logo staat op een eigen tegel. Zonder logo: de initialen (kort) op de clubkleur.
 * Met logo (.met-beeld): altijd op wit, zodat elk logo (ook transparant of donker) leesbaar blijft. */
.clublogo {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
  background: var(--tint-knop); color: var(--tint-knop-tekst); display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: 0;
}
.clublogo.groot { width: 72px; height: 72px; border-radius: 16px; font-size: 26px; }
.clublogo.met-beeld { background: #FFFFFF; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.clublogo img { width: 100%; height: 100%; object-fit: contain; padding: 8%; display: block; }
.clubnaam { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.clubseizoen { font-size: 13px; color: var(--sec); }

/* Voortgang */
.voortgang { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.voortgang .balk { flex: 1; height: 6px; border-radius: 99px; background: var(--vul-2); overflow: hidden; }
.voortgang .balk i { display: block; height: 100%; background: var(--tint); border-radius: 99px; transition: width .6s var(--veer); }
.voortgang span { font-size: 13px; color: var(--sec); white-space: nowrap; }

/* ---------- Inset grouped lists ---------- */
/* Sectiekop zoals in Instellingen op iOS: 13 pt hoofdletters, ingesprongen tot de celtekst */
.sectie { font-size: 13px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; color: var(--sec); margin: 24px 16px 7px; }
/* "Prominente" kop (iOS headerProminence): 22 pt vet, gewone tekstkleur */
.sectie.sterk { font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--label); margin: 30px 0 8px; display: flex; align-items: center; }
.lijst { background: var(--cel); border-radius: var(--r); overflow: hidden; box-shadow: var(--kaart); }
.rij {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 44px;
  cursor: pointer; position: relative; border: 0; width: 100%; background: none; text-align: left; color: var(--label);
  transition: background .2s;
}
/* Haarlijn tussen cellen, ingesprongen tot de tekst (na het rondje links) */
.rij + .rij::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; border-top: .5px solid var(--sep); }
.rij.plat + .rij::before, .rij + .rij.plat::before { left: 16px; }
.rij:active { background: var(--cel-2); transition: none; }
.rij.stil { cursor: default; } .rij.stil:active { background: none; }
@media (hover: hover) { .rij:not(.stil):hover { background: color-mix(in srgb, var(--cel-2) 55%, var(--cel)); } }

/* Het rondje links in een rij: vrije plekken (oranje), ✓ gevuld (groen) of ⇆ ruil (rood). Statuskleur,
 * dus vast en nooit de clubkleur: bij een rode of groene club blijft het symbool het onderscheid. */
.nr {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: 15px; font-weight: 600;
  background: color-mix(in srgb, var(--ok-vlak) 16%, transparent); color: var(--ok);
}
.nr.open { background: var(--open-zacht); color: var(--open); }
.nr.ruil { background: var(--ruil-zacht); color: var(--ruil); }
.nr.act { background: var(--tint-knop); color: var(--tint-knop-tekst); border-radius: 7px; }
.nr.act svg { width: 18px; height: 18px; }

/* Activiteit aanmaken: één regel per taak */
.taak-rij { display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px 62px auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.taak-rij .veld { margin: 0; min-width: 0; padding-left: 10px; padding-right: 8px; }
.taak-rij .pil { margin: 0; width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 20px; }
.taak-rij .pil:disabled { opacity: .35; cursor: default; }
@media (max-width: 480px) {
  .taak-rij { grid-template-columns: 1fr 1fr 58px auto; padding: 8px; border-radius: 12px; background: var(--cel-hoog); }
  .taak-rij .veld:first-child { grid-column: 1 / -1; }
}
.zb-nieuw { color: var(--tint-tekst); }
.zb-nieuw svg { color: var(--tint-tekst) !important; }
.rij-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.titel { font-size: 17px; font-weight: 400; letter-spacing: 0; }
/* Ondertitel mag over meer regels lopen (zoals op iOS): "ruil gezocht" mag nooit wegvallen achter … */
.sub2 { font-size: 15px; color: var(--sec); margin-top: 1px; overflow-wrap: anywhere; letter-spacing: 0; }
.sub2.wrap { white-space: normal; }
.oranje { color: var(--open); } .rood { color: var(--ruil); } .groen { color: var(--tint-tekst); }
/* Een actie in een rij ("Neem") is een kleine getinte knop (capsule) */
.acc { flex-shrink: 0; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  color: var(--tint-tekst); background: var(--tint-zacht); padding: 6px 14px; border-radius: 99px; min-height: 30px; }
.acc.grijs, .acc:has(.vinkje) { background: none; padding: 0; color: var(--sec); font-weight: 400; font-size: 17px; min-height: 0; }
.acc.grijs + .chevron { margin-left: -2px; }
.chevron { color: var(--ter); flex-shrink: 0; width: 8px; height: 13px; }
.chevron, .chevron * { stroke-width: 2.2 !important; }
.vinkje { color: var(--ok); font-size: 17px; font-weight: 600; }
.balkje { width: 60px; height: 6px; border-radius: 99px; background: var(--vul-2); overflow: hidden; flex-shrink: 0; }
.balkje i { display: block; height: 100%; background: var(--tint); border-radius: 99px; }
.balkje.zorg i { background: var(--open); }
.voetnoot { font-size: 13px; color: var(--sec); margin: 7px 16px 0; line-height: 1.38; letter-spacing: 0; }
.leeg { padding: 22px 18px; font-size: 15px; color: var(--sec); text-align: center; }

/* Samenvatting (overzicht): tegels zoals in Gezondheid/Fitness */
.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.tegel { background: var(--cel); border-radius: 12px; padding: 12px 14px 13px; box-shadow: var(--kaart); position: relative; overflow: hidden; }
.tegel b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin-bottom: 4px; }
.tegel span { font-size: 13px; font-weight: 400; color: var(--sec); line-height: 1.25; display: block; }
.tegel.oranje b { color: var(--open); }
.tegel.rood b { color: var(--ruil); }

/* Werkbalkknoppen (getinte capsules, 44 pt hoog) */
.knoppenrij { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.pil {
  border: 0; border-radius: 99px; padding: 0 16px; min-height: 44px; cursor: pointer;
  background: var(--tint-zacht); color: var(--tint-tekst); font-size: 15px; font-weight: 600; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 6px; transition: transform .12s, opacity .15s;
}
.pil.vol { background: var(--tint-knop); color: var(--tint-knop-tekst); }
.pil:active { opacity: .7; }

/* Skelet tijdens laden */
.skelet { background: var(--cel); border-radius: var(--r); height: 180px; margin-top: 30px; position: relative; overflow: hidden; }
.skelet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--vul), transparent); animation: glans 1.3s infinite; transform: translateX(-100%); }
@keyframes glans { to { transform: translateX(100%); } }

/* ---------- Tabbalk (telefoon): materiaal met haarlijn ---------- */
.tabbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; justify-content: space-around;
  padding: 1px 4px calc(1px + env(safe-area-inset-bottom, 0px));
  background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -.5px 0 var(--glas-rand);
}
.tab {
  flex: 1; max-width: 120px; border: 0; background: none; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 500; letter-spacing: .01em; color: var(--sec); padding: 4px 0 2px; min-height: 48px;
}
.tab svg { width: 26px; height: 26px; }
.tab.actief { color: var(--tint-tekst); }
.tab.actief svg { stroke-width: 2; }

/* ---------- Zijbalk (tablet/desktop) ---------- */
.zijbalk { display: none; }
@media (min-width: 760px) {
  .shell.met-zijbalk { display: grid; grid-template-columns: var(--zijbalk) minmax(0, 1fr); }
  .shell.met-zijbalk > main { min-width: 0; }
  .zijbalk {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 10px 14px;
    background: var(--cel); box-shadow: .5px 0 0 var(--sep); overflow-y: auto;
  }
  .zijbalk .clubkop { padding: 6px 10px 16px; }
  .zb-kop { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--sec); margin: 18px 12px 4px; }
  .zb-item {
    display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; cursor: pointer;
    padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 400; letter-spacing: 0; text-align: left; color: var(--label); min-height: 38px;
    transition: background .15s;
  }
  .zb-item svg { width: 22px; height: 22px; color: var(--tint-tekst); flex-shrink: 0; }
  .zb-item .teller { margin-left: auto; font-size: 13px; color: var(--sec); }
  .zb-item.actief { background: var(--tint-knop); color: var(--tint-knop-tekst); font-weight: 600; }
  .zb-item.actief svg, .zb-item.actief .teller { color: var(--tint-knop-tekst); }
  @media (hover: hover) { .zb-item:not(.actief):hover { background: var(--vul); } }
  @media (pointer: coarse) { .zb-item { min-height: 44px; } }
  .zb-voet { margin-top: auto; padding: 12px 12px 0; font-size: 13px; color: var(--sec); box-shadow: 0 -.5px 0 var(--sep); }
  .zb-voet button { border: 0; background: none; color: var(--tint-tekst); padding: 0; min-height: 44px; cursor: pointer; font-size: 15px; }
  .met-zijbalk .tabbalk { display: none; }
  .met-zijbalk .navbalk { display: none; }
  .met-zijbalk .inhoud { padding-top: 30px; padding-bottom: 56px; }
  .heeft-tabbalk .inhoud { padding-bottom: 56px; }
  .inhoud { padding-left: 24px; padding-right: 24px; }
  .tegels { gap: 12px; }
}
@media (min-width: 1200px) { :root { --zijbalk: 300px; } .inhoud { max-width: 820px; } }

/* ---------- Sheet (paneel) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 20; }
.overlay.zichtbaar { opacity: 1; pointer-events: auto; }
/* In een sheet zijn cellen "verhoogd": in donker #2C2C2E op #1C1C1E, zoals op iOS. */
.paneel {
  --cel: var(--cel-hoog);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; margin: 0 auto; max-width: 560px;
  background: var(--bg); border-radius: 14px 14px 0 0; box-shadow: var(--schaduw);
  padding: 5px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%); transition: transform .45s var(--veer);
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paneel { background: #1C1C1E; } }
.paneel.zichtbaar { transform: translateY(0); }
.paneel.sleept { transition: none; }
.grijper { width: 36px; height: 5px; border-radius: 99px; background: rgba(127,127,127,.4); margin: 0 auto 14px; cursor: grab; touch-action: none; }
.paneel-kop { touch-action: none; padding-top: 0; }
.paneel h3 { font-size: 17px; font-weight: 600; letter-spacing: 0; text-align: center; margin: 0 0 4px; text-wrap: balance; }
.p-sub { font-size: 15px; color: var(--sec); text-align: center; margin: 0 0 18px; line-height: 1.35; }
.paneel .lijst { margin-bottom: 12px; }
@media (min-width: 760px) {
  .paneel {
    top: 50%; bottom: auto; left: 50%; right: auto; width: min(540px, 92vw); max-height: 86vh;
    border-radius: 14px; padding: 22px 22px 16px;
    transform: translate(-50%, -48%) scale(.98); opacity: 0; pointer-events: none;
    transition: transform .3s var(--veer), opacity .2s;
  }
  .paneel.zichtbaar { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
  .grijper { display: none; }
}
/* ---------- Knoppen en velden ---------- */
.p-knop {
  display: flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: 12px;
  padding: 12px 16px; font-size: 17px; font-weight: 600; letter-spacing: 0; cursor: pointer; min-height: 50px;
  background: var(--cel); color: var(--tint-tekst); margin-bottom: 8px; text-decoration: none;
  transition: opacity .15s;
}
.p-knop.vol { background: var(--tint-knop); color: var(--tint-knop-tekst); }
.p-knop.rood { color: var(--ruil); }
.p-knop.stil { color: var(--tint-tekst); font-weight: 400; background: none; min-height: 44px; padding: 8px; margin: 0; }
.p-knop:disabled { opacity: .4; cursor: default; }
.p-knop:active:not(:disabled) { opacity: .7; }
@media (hover: hover) { .p-knop.vol:hover:not(:disabled) { filter: brightness(1.06); } }
.veld {
  width: 100%; border: 0; border-radius: 10px; padding: 12px 16px; font-size: 17px;
  background: var(--cel); color: var(--label); margin-bottom: 8px; min-height: 48px;
  -webkit-appearance: none; appearance: none; transition: box-shadow .15s;
}
.veld::placeholder { color: color-mix(in srgb, var(--sec) 70%, transparent); }
select.veld { background-image: linear-gradient(45deg, transparent 50%, var(--sec) 50%), linear-gradient(135deg, var(--sec) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.veld:focus { outline: none; box-shadow: 0 0 0 2px var(--tint); }
.veld.code { text-align: center; font-size: 28px; letter-spacing: .4em; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: calc(16px + .4em); }
.veld-rij { display: flex; gap: 8px; } .veld-rij > * { flex: 1; min-width: 0; }
.stepper-rij { display: flex; align-items: center; justify-content: space-between; background: var(--cel); border-radius: 10px; padding: 6px 16px; margin-bottom: 8px; min-height: 48px; font-weight: 400; }
/* Stepper zoals UIStepper: twee knoppen in een grijze capsule */
.stepper { display: flex; align-items: center; background: var(--vul); border-radius: 9px; overflow: hidden; }
.stepper button { width: 47px; height: 36px; border: 0; background: none; font-size: 22px; font-weight: 300; cursor: pointer; }
.stepper button + span, .stepper span + button { box-shadow: -.5px 0 0 var(--sep); }
.stepper span { min-width: 34px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Segmented control (UISegmentedControl) */
.segment { display: flex; background: var(--vul); border-radius: 9px; padding: 2px; margin-bottom: 10px; gap: 0; }
.segment button { flex: 1; border: 0; border-radius: 7px; padding: 6px 8px; background: transparent; font-size: 13px; font-weight: 500; letter-spacing: 0; cursor: pointer; min-height: 40px; color: var(--label); transition: background .2s, box-shadow .2s; position: relative; }
.segment button + button::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; border-left: .5px solid var(--sep); transition: opacity .2s; }
.segment button.actief::before, .segment button.actief + button::before { opacity: 0; }
.segment button.actief { background: var(--segment-aan); color: var(--label); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.04); }
.preview { background: var(--cel); border-radius: 10px; padding: 12px 16px; font-size: 15px; line-height: 1.4; color: var(--label); white-space: pre-wrap; margin-bottom: 8px; max-height: 30vh; overflow-y: auto; }
.kleuren { display: flex; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--cel); border-radius: 10px; margin-bottom: 8px; }
.kleur { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; position: relative; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.kleur.actief::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2.5px solid var(--kleur); }

/* ---------- Schakelaar (UISwitch) ---------- */
.schakel { width: 51px; height: 31px; border-radius: 99px; background: var(--vul-2); position: relative; flex-shrink: 0; transition: background .25s; }
.schakel i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition: left .3s var(--veer); }
.schakel.aan { background: var(--ok-vlak); } .schakel.aan i { left: 22px; }

/* ---------- Melding (toast, materiaal) ---------- */
.melding {
  position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 40;
  transform: translate(-50%, -160%); transition: transform .5s var(--veer), visibility 0s .5s;
  background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  color: var(--label); box-shadow: 0 0 0 .5px var(--sep), 0 10px 30px -8px rgba(0,0,0,.3);
  padding: 12px 20px; border-radius: 99px; font-size: 15px; font-weight: 600;
  max-width: min(92vw, 460px); text-align: center; pointer-events: none; visibility: hidden;
}
.melding.zichtbaar { transform: translate(-50%, 0); visibility: visible; transition: transform .5s var(--veer), visibility 0s; }

/* ---------- Startscherm en inloggen ---------- */
.start-hero { text-align: center; padding: 44px 8px 12px; }
.start-hero .clublogo { margin: 0 auto 16px; }
.start-hero h1 { font-size: 34px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 8px; }
.start-hero p { color: var(--sec); font-size: 17px; margin: 0 auto 10px; max-width: 420px; line-height: 1.4; }
/* Kantini-woordmerk (inloggen, start): het getekende logo, nooit opnieuw gezet in een letter */
.merk { display: flex; justify-content: center; margin: 0 auto 26px; }
.merk img { height: 34px; width: auto; display: block; }
.merk .donker { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .merk .licht { display: none; } :root:not([data-theme="light"]) .merk .donker { display: block; } }

/* Gelukt: een vinkje dat zichzelf tekent */
.gelukt-vink { display: block; width: 64px; height: 64px; margin: 6px auto 12px; }
.gelukt-vink circle { fill: var(--tint-zacht); }
.gelukt-vink path { fill: none; stroke: var(--tint-tekst); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: teken .5s .15s var(--veer) forwards; }
@keyframes teken { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .gelukt-vink path { stroke-dashoffset: 0; } }

/* Paginaovergang: kort en rustig, zoals een systeemovergang */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* ---------- Rooster inlezen ---------- */
.neerzet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 150px; margin-top: 14px; padding: 28px 20px; text-align: center; cursor: pointer;
  background: var(--cel); border-radius: 12px;
  border: 1.5px dashed var(--sep-dik);
  transition: background .18s, border-color .18s;
}
.neerzet:hover, .neerzet.over { background: var(--tint-zacht); border-color: var(--tint); }
.neerzet:focus-within { outline: 3px solid color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: 2px; }
.neerzet-kop { font-size: 17px; font-weight: 600; }
.neerzet-sub { font-size: 15px; color: var(--sec); }

/* Kleine invoervelden binnen een rij: tijden en datums */
.veld.mini {
  width: auto; min-width: 104px; min-height: 36px; margin: 0; padding: 6px 10px; border-radius: 8px;
  font-size: 17px; font-variant-numeric: tabular-nums; background: var(--vul);
}
.tijdjes { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 480px) {
  .veld.mini { min-width: 86px; padding: 6px 7px; font-size: 15px; }
  .tijdjes { gap: 4px; }
}

/* Aantal nog niet gemelde wijzigingen op een knop */
.badge {
  display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 6px;
  border-radius: 99px; background: color-mix(in srgb, var(--tint-knop-tekst) 25%, transparent);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; line-height: 18px;
}
.pil:not(.vol) .badge { background: var(--tint-knop); color: var(--tint-knop-tekst); }

/* ---------- Pictogram in een pil ---------- */
.pil svg { width: 18px; height: 18px; flex: none; }

/* ---------- Meldingsblok in een paneel (wisselverzoek, samenvatting) ---------- */
.melding-blok { display: flex; flex-direction: column; gap: 3px; background: var(--cel); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 12px; font-size: 15px; }
.melding-blok b { font-size: 17px; font-weight: 600; }
.melding-blok .sub2 { color: var(--sec); font-size: 13px; }
.snelkeuze { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.snelkeuze .pil { min-height: 44px; padding: 0 14px; font-size: 15px; }
.rij.gekozen { background: var(--tint-zacht); }
.rij.gekozen .titel { color: var(--tint-tekst); font-weight: 600; }
.p-knop.rood-vol { background: var(--ruil); color: #fff; }

/* ---------- Jaaroverzicht ---------- */
.inhoud.breed { max-width: 1120px; }
.rooster-filters { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 6px; }
.rooster-filters .segment { margin: 0; }
.rooster-filters .veld-rij { align-items: center; gap: 8px; flex-wrap: wrap; }
.rooster-filters select.veld { flex: 1; min-width: 190px; margin: 0; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.rooster-filters .pil { flex: none; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
@media (min-width: 760px) {
  .rooster-filters { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rooster-filters .segment { flex: 0 0 300px; }
  .rooster-filters .veld-rij { flex: 1; }
  .legenda { flex-basis: 100%; }
}
/* Status: kleur én symbool, zodat het ook zonder kleur leesbaar is */
.chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; border: 0; cursor: pointer;
  border-radius: 8px; padding: 7px 10px; margin: 3px 0; text-align: left; font-size: 13px; line-height: 1.25;
  background: var(--vul); color: var(--label); border-left: 3px solid transparent; transition: opacity .12s; }
.chip:not(.mini):active { opacity: .7; }
.chip b { font-weight: 600; font-size: 15px; letter-spacing: 0; }
.chip.vol { background: color-mix(in srgb, var(--ok-vlak) 15%, transparent); border-left-color: var(--ok-vlak); }
.chip.deels { background: var(--open-zacht); border-left-color: var(--open); }
.chip.leeg { background: var(--ruil-zacht); border-left-color: var(--ruil); }
.chip.ruil { background: var(--ruil-zacht); border-left-color: var(--ruil); }
.chip.vol span { color: var(--ok); font-weight: 600; }
.chip.leeg span, .chip.ruil span { color: var(--ruil); font-weight: 600; }
.chip.deels span { color: var(--open); font-weight: 600; }
.chip.wissel { box-shadow: inset 0 0 0 2px var(--ruil); }
.chip.act { border-left-style: dashed; }
.chip.act b::before { content: "★ "; color: var(--tint-tekst); }
.chip.mini { display: inline-flex; flex-direction: row; width: auto; margin: 0; padding: 3px 8px; cursor: default; font-weight: 500; }
@media (hover: hover) { button.chip:not(.mini):hover { filter: brightness(.97); } }
.rooster-wrap { overflow-x: auto; margin-top: 12px; border-radius: var(--r); background: var(--cel); }
table.rooster { width: 100%; border-collapse: collapse; font-size: 15px; }
.rooster th, .rooster td { padding: 6px 8px; border-bottom: .5px solid var(--sep); vertical-align: top; text-align: left; }
.rooster thead th { position: sticky; top: 0; background: var(--cel); font-size: 13px; letter-spacing: 0; text-transform: uppercase; color: var(--sec); font-weight: 400; padding-top: 12px; padding-bottom: 8px; }
.rooster tbody th[scope="row"] { white-space: nowrap; font-weight: 600; width: 1%; }
.rooster td { min-width: 120px; }
.rooster tr.maand th { background: color-mix(in srgb, var(--vul) 60%, var(--cel)); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: capitalize; padding: 12px 10px 8px; }
.rooster tr.voorbij, .sectie.voorbij { opacity: .55; }
.maandkop { text-transform: capitalize; }
.nr.status-vol { background: color-mix(in srgb, var(--ok-vlak) 18%, transparent); color: var(--ok); }
.nr.status-deels { background: var(--open-zacht); color: var(--open); }
.nr.status-leeg, .nr.status-ruil { background: var(--ruil-zacht); color: var(--ruil); }


/* Inplanmodus: welke dienst kan deze barmedewerker nog krijgen? */
.plan-balk { background: var(--cel); border-radius: var(--r); padding: 14px 16px; margin: 10px 0 4px; font-size: 15px; box-shadow: inset 3px 0 0 var(--tint); }
.plan-balk p { margin: 0 0 8px; }
.plan-balk .snelkeuze { margin: 0 0 8px; }
.plan-balk .pil[disabled] { opacity: .45; cursor: default; }
.chip .plan-regel { font-style: normal; font-size: 12px; font-weight: 600; margin-top: 2px; }
.chip.plan-kan { outline: 2px dashed var(--tint); outline-offset: -2px; }
.chip.plan-kan .plan-regel { color: var(--tint-tekst); }
.chip.plan-al .plan-regel { color: var(--ok); }
.chip.plan-al { outline: 2px solid var(--ok-vlak); outline-offset: -2px; }
.chip.plan-niet { opacity: .45; }

/* ---------- Deze week nog niet rond + startlijst ---------- */
.alarm, .startlijst { margin-top: 18px; }
.alarm-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.alarm-kop b { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.alarm-kop span { font-size: 15px; font-weight: 600; color: var(--open); white-space: nowrap; }
.startlijst .alarm-kop span { color: var(--tint-tekst); }
.alarm .lijst, .startlijst .lijst { margin: 0; }
.alarm .sub2 { white-space: normal; }
.voortgang-balk { height: 6px; border-radius: 99px; background: var(--vul-2); overflow: hidden; margin: 0 0 12px; }
.voortgang-balk i { display: block; height: 100%; background: var(--tint); border-radius: 99px; transition: width .6s var(--veer); }
.stap-vink { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--ter); color: #fff; }
.rij.klaar .stap-vink { background: var(--ok-vlak); box-shadow: none; }
.rij.klaar .titel { color: var(--sec); }
.startlijst .sub2 { white-space: normal; }
.link-knop { display: block; margin: 8px auto 0; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 400; color: var(--tint-tekst); cursor: pointer; padding: 0 12px; min-height: 44px; }

/* ---------- Rooster via Kantini (openbare pagina's): klein, in het Kantini-merk ---------- */
.kantini-voet { text-align: center; margin: 36px 0 28px; font-size: 13px; }
.kantini-voet a { color: var(--sec); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; }
.kantini-voet img { width: 16px; height: 16px; display: block; }
.kantini-voet b { color: var(--merk-tekst); font-weight: 600; }
/* Account: wachtwoord instellen (alleen de hoofdcoördinator) */
.ww-form { display: grid; gap: 10px; margin-top: 12px; }
.ww-form .p-knop { margin: 0; }

/* ---------- Seizoensverslag ---------- */
.tegels + .onder-titel { margin-top: 14px; }
table.verslag td, table.verslag th { text-align: left; padding: 10px 12px; vertical-align: middle; min-width: 0; }
table.verslag td:first-child { min-width: 140px; }
table.verslag td:not(:first-child), table.verslag th:not(:first-child) { white-space: nowrap; }
table.verslag td small { color: var(--sec); }
table.verslag .balkje { display: inline-block; vertical-align: middle; width: 54px; margin-right: 6px; }

/* ---------- Testmodus (frissekom) ---------- */
.testbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; margin: 0;
  background: color-mix(in srgb, var(--open-zacht) 60%, var(--cel)); box-shadow: 0 .5px 0 var(--sep); font-size: 13px; }
.testbalk .test-label { font-weight: 600; font-size: 13px; color: var(--open); }
.testbalk .segment.klein { margin: 0; flex: 0 1 auto; overflow-x: auto; }
.testbalk .segment.klein button { font-size: 13px; padding: 4px 12px; white-space: nowrap; min-height: 32px; }
.testbalk .test-uit { margin-left: auto; color: var(--tint-tekst); text-decoration: none; }
.testbalk .test-wie { color: var(--sec); font-weight: 600; }
.testbalk.los { position: sticky; top: 0; z-index: 30; justify-content: space-between; }
.testbalk.los .pil { margin: 0; min-height: 36px; padding: 0 12px; font-size: 13px; }
@media (min-width: 760px) { .testbalk { padding: 8px 24px; } }

/* ---------- Tip een andere club ---------- */
.tipkaart { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 16px; border-radius: 12px; background: var(--cel); }
.tip-icoon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--tint-zacht); color: var(--tint-tekst); }
.tip-icoon svg { width: 22px; height: 22px; }
.tip-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tip-tekst b { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.tip-tekst > span { color: var(--sec); font-size: 15px; line-height: 1.38; }
.tip-knoppen { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tip-knoppen .pil { margin: 0; }
.tip-knoppen .link-knop { margin: 0; color: var(--sec); }
.zb-item.zb-tip { color: var(--tint-tekst); margin-top: 14px; }
.zb-item.zb-tip svg { color: var(--tint-tekst); }

/* ---------- Vaste vrijwilligers ---------- */
.vw-rij { display: flex; align-items: center; gap: 10px; }
.vw-naam { flex: 1; min-width: 0; display: flex; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.acc { border: 0; cursor: pointer; font-family: inherit; }
.testbalk .test-kies { display: none; }
@media (max-width: 759px) {
  .testbalk { flex-wrap: nowrap; padding: 6px 16px; }
  .testbalk .segment.klein { display: none; }
  .testbalk .test-kies { display: block; flex: 1; min-width: 0; font: inherit; font-size: 15px; font-weight: 600; padding: 6px 10px; min-height: 36px; border-radius: 8px;
    border: 0; background: var(--vul); color: var(--label); }
  .testbalk .test-uit { font-size: 13px; white-space: nowrap; }
  .testbalk.los { flex-wrap: wrap; }
}

/* Rooster: elk tijdsblok even breed, wat het tijdstip ook is. De tabel vult de
 * breedte, maar een kolom wordt nooit smaller dan 180px (dan scrollt hij) of
 * breder dan 260px (dan blijft er rechts ruimte over). */
.rooster-wrap:has(table.raster) { width: fit-content; max-width: 100%; }
table.rooster.raster { table-layout: fixed; width: clamp(calc(150px + var(--n) * 180px), 100%, calc(150px + var(--n) * 260px)); }
table.raster col.k-datum { width: 150px; }
table.raster td { min-width: 0; }
table.raster thead th:not(:first-child) { text-align: left; }
table.raster tbody th[scope="row"] { width: auto; white-space: normal; }
table.raster .chip { min-height: 58px; justify-content: center; }
table.raster .chip b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; }
table.raster th.k-anders { color: var(--sec); }
table.raster td.k-anders { background: color-mix(in srgb, var(--vul) 50%, transparent); }
.chip .chip-tijd { font-style: normal; font-size: 12px; font-weight: 600; color: var(--sec); font-variant-numeric: tabular-nums; }

/* ---------- Opmerkingen bij diensten en de clubtekst (opties) ---------- */
.rij-tekst .opm { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--tint-tekst); font-weight: 500;
  white-space: normal; overflow-wrap: anywhere; }
.rij-tekst .opm::before { content: "i"; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 6px; border-radius: 50%;
  font: 700 10px/1 var(--font); color: var(--tint-tekst); box-shadow: inset 0 0 0 1.2px currentColor; vertical-align: 1px; }
.opm-blok { display: flex; flex-direction: column; gap: 2px; background: var(--tint-zacht); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 12px; font-size: 15px; }
.opm-blok b { font-size: 13px; font-weight: 600; color: var(--tint-tekst); }
.goed-blok { background: var(--cel); border-radius: var(--r); margin: 18px 0 6px; padding: 0 16px; font-size: 15px; }
.goed-blok summary { cursor: pointer; list-style: none; min-height: 44px; padding: 10px 0; font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.goed-blok summary::-webkit-details-marker { display: none; }
.goed-blok summary::before { content: "i"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font: 700 13px/1 var(--font); color: var(--tint-tekst); box-shadow: inset 0 0 0 1.5px currentColor; flex: none; }
.goed-blok summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ter); border-bottom: 2px solid var(--ter);
  transform: rotate(45deg); transition: transform .2s; }
.goed-blok[open] summary::after { transform: rotate(-135deg); }
.goed-blok p { margin: 0 0 14px; color: var(--sec); line-height: 1.45; overflow-wrap: anywhere; }
.chip .chip-opm { font-style: normal; font-size: 12px; color: var(--tint-tekst); font-weight: 500; max-width: 100%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; text-align: left; }

/* ---------- Links delen ---------- */
.rij.link-rij { align-items: center; cursor: default; }
.rij.link-rij:active { background: none; }
@media (hover: hover) { .rij.link-rij:hover { background: none; } }
.link-rij .rij-tekst { min-width: 0; flex: 1; }
.link-rij .sub2 { white-space: normal; }
.stil-tekst { color: var(--sec); }
.link-url { display: block; margin-top: 3px; font-size: 13px; color: var(--sec); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-knoppen { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.link-knoppen .pil { min-height: 44px; padding: 0 16px; font-size: 15px; }
.link-knoppen .pil svg { width: 17px; height: 17px; }
.ikoon-knop { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--vul); color: var(--tint-tekst); font-weight: 700; transition: background .15s, opacity .12s; }
.ikoon-knop:active { opacity: .7; }
.ikoon-knop.gelukt { background: var(--tint-knop); color: var(--tint-knop-tekst); }
@media (hover: hover) { .ikoon-knop:hover { background: var(--tint-zacht); } }
.preview-veld { min-height: 150px; resize: vertical; font-size: 17px; line-height: 1.4; white-space: pre-wrap; }
/* Deelbericht aanpassen: een rustige tekstknop onder de voorvertoning */
.deel-aanpas { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.tekstknop { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-size: 15px; font-weight: 400; color: var(--tint-tekst); cursor: pointer; border-radius: 6px; }
@media (hover: hover) { .tekstknop:hover { text-decoration: underline; } }
.deel-bericht .preview-veld { margin-bottom: 4px; }
@media (max-width: 640px) {
  .rij.link-rij { flex-wrap: wrap; row-gap: 10px; }
  .link-rij .rij-tekst { flex-basis: calc(100% - 48px); }
  .link-rij .link-url { display: none; }
  .link-knoppen { width: 100%; padding-left: 42px; }
  .link-knoppen .pil { flex: 1; justify-content: center; }
  .links-kop { display: flex; flex-wrap: wrap; }
  .links-kop .pil { flex: 1 1 auto; justify-content: center; text-align: center; font-size: 15px; white-space: nowrap; }
}
.zoekveld { margin: 0 0 10px; background: var(--vul); min-height: 36px; padding: 7px 12px; border-radius: 10px; font-size: 17px; }
.qr-groot { width: min(260px, 70vw); margin: 4px auto 14px; padding: 10px; background: #fff; border-radius: 14px; }
.qr-groot svg { display: block; width: 100%; height: auto; }

/* QR-kaarten: alleen bij het printen (opmaak onderaan bij Printen) */
.qr-vel { display: none; }

/* ---------- Clublogo-instelling (Instellingen → Clublogo) ---------- */
.logo-voorbeeld { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 16px; background: var(--cel); border-radius: 10px; margin-bottom: 8px; }
.logo-voorbeeld .clublogo.groot { width: 96px; height: 96px; border-radius: 22px; font-size: 34px; }
.logo-voorbeeld span { font-size: 13px; color: var(--sec); text-align: center; }
.logo-kies { cursor: pointer; }
.logo-kies:has(:focus-visible) { outline: 3px solid color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: 2px; }
.kleur-voorstel { display: flex; align-items: center; gap: 12px; background: var(--cel); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
.kleur-voorstel i { width: 36px; height: 36px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.kleur-voorstel .rij-tekst b { font-size: 17px; font-weight: 600; }
.kleur-voorstel .rij-tekst span { font-size: 13px; color: var(--sec); }
.kleur-voorstel .pil { margin-left: auto; }
.clublogo.mini { width: 29px; height: 29px; border-radius: 7px; font-size: 12px; }

/* ================= Vernieuwd (oktober 2026) =================
 * Ontwerp: marketing/app-ontwerp/ontwerp.py (borden in het merkcanvas). Kaarten met ronde hoeken en een zachte
 * schaduw, dagkoppen met een statuslabel, status als vierkantje met ronde hoeken, keuzechips, een zwevende
 * tabbalk, vier actietegels op een lichting en op brede schermen twee kolommen (overzicht, ouderpagina) en
 * een zijpaneel voor een dienst. Alles hieronder wint van de oudere regels hierboven. */

/* Grote titel iets steviger (Figtree) */
.grote-titel { font-size: 36px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; margin: 2px 0 12px; }
.boven-label { margin-top: 10px; }

/* Kaart: dezelfde vorm als een lijst */
.kaart { background: var(--cel); border-radius: var(--r); box-shadow: var(--kaart); padding: 18px; }
.kaart + .kaart { margin-top: 14px; }
.kaart-label { font-size: 15px; font-weight: 600; color: var(--sec); margin: 0 0 12px; }
.kaart-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.kaart-kop h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.kaart > .lijst { box-shadow: none; border-radius: 0; margin: 0 -18px -18px; background: none; }
.lijst { box-shadow: var(--kaart); }

/* Dagkop: "Zaterdag 3 oktober" met rechts hoe het ervoor staat */
.dagkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 4px 10px; }
.dagkop h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.dagkop.sterk { margin-top: 34px; }
.dagkop.sterk h2 { font-size: 22px; }
.dagkop.voorbij { opacity: .55; }
.status-pil { display: inline-flex; align-items: center; gap: 4px; flex: none; border-radius: 99px; padding: 4px 11px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.status-pil.open { background: var(--open-zacht); color: var(--open); }
.status-pil.ruil { background: var(--ruil-zacht); color: var(--ruil); }
.status-pil.vol { background: color-mix(in srgb, var(--ok-vlak) 16%, transparent); color: var(--ok); }

/* Status links in een rij: vierkantje met ronde hoeken (zoals de blokken van de K) */
.nr { width: 34px; height: 34px; border-radius: 11px; font-weight: 700; }
.rij + .rij::before { left: 62px; }
.rij { padding: 12px 16px; }
.rij .titel { font-weight: 600; }
.rij.plat .titel { font-weight: 500; }
.acc { padding: 7px 15px; font-size: 15px; }
.acc svg { width: 16px; height: 16px; }
.acc.jij { background: color-mix(in srgb, var(--ok-vlak) 16%, transparent); color: var(--ok); }
.acc.vol { background: var(--tint-knop); color: var(--tint-knop-tekst); }
.rij.in-paneel { background: var(--tint-zacht); }
.rij .ikoon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tint-zacht); color: var(--tint-tekst); flex: none; }
.rij .ikoon svg { width: 19px; height: 19px; }

/* Datumtegel (kalenderblaadje) */
.dagtegel { width: 54px; height: 58px; border-radius: 14px; flex: none; background: var(--tint-zacht); color: var(--tint-tekst);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-variant-numeric: tabular-nums; }
.dagtegel small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dagtegel b { font-size: 22px; font-weight: 750; margin: 3px 0 2px; }
.dagtegel span { font-size: 11px; font-weight: 600; }
.dagtegel.klein { width: 42px; height: 44px; border-radius: 12px; }
.dagtegel.klein b { font-size: 18px; margin-bottom: 0; }

/* Keuzechips: dag (ouder) of status (lichting). Zwart = gekozen; getal = open/ruil/gevuld. */
.kiezer { display: flex; gap: 8px; margin: 18px -16px 0; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; }
.kiezer::-webkit-scrollbar { display: none; }
.kies { flex: none; border: 0; cursor: pointer; border-radius: 99px; padding: 0 15px; min-height: 40px; background: var(--cel); color: var(--label);
  font-size: 15px; font-weight: 600; box-shadow: var(--kaart); white-space: nowrap; display: inline-flex; align-items: center; transition: background .15s, color .15s; }
.kies em { font-style: normal; margin-left: 6px; font-variant-numeric: tabular-nums; }
.kies em.open { color: var(--open); } .kies em.ruil { color: var(--ruil); } .kies em.vol { color: var(--ok); }
.kies.aan { background: var(--label); color: var(--bg); }
.kies.aan em { color: inherit; opacity: .75; }
.kiezer + .dagkop { margin-top: 18px; }

/* Segmentbalk: dunne meter (alleen bij lichtingen, om te vergelijken) */
.segmenten { display: flex; gap: 2px; width: 92px; height: 6px; border-radius: 3px; overflow: hidden; flex: none; }
.segmenten i { flex: 1; background: var(--tint-zacht); }
.segmenten i.v { background: var(--tint); }

/* Ouderpagina */
.inhoud.ouder { max-width: 600px; }
.samenvatting b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
.samenvatting p { margin: 6px 0 0; color: var(--sec); font-size: 15px; line-height: 1.4; }
.samenvatting .mijn-regel { color: var(--label); }
.samenvatting .tekstknop { min-height: 32px; padding: 0 2px; font-weight: 600; }
.volgende-rij { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.volgende-tijd { font-size: 22px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.volgende .p-knop { margin: 0; }
.p-knop.deel-knop { margin-top: 14px; gap: 8px; box-shadow: var(--kaart); }
.p-knop svg { width: 19px; height: 19px; }
.ouder .goed-blok { box-shadow: var(--kaart); }

/* Overzicht */
.kop-met-acties { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.kop-acties { display: none; gap: 8px; margin-bottom: 14px; flex: none; }
.kop-acties.zichtbaar { display: flex; }
.ov-hoofd > * + *, .ov-zij > * + * { margin-top: 14px; }
.ov-hoofd > .kaart:first-child { margin-top: 4px; }
.alarm { margin-top: 4px; }
.alarm .rij + .rij::before { left: 70px; }
.kaart.rustig { display: flex; align-items: center; gap: 14px; }
.kaart.rustig b { font-size: 17px; }
.kaart.rustig .sub2 { margin: 2px 0 0; }
.kaart.cijfers { display: flex; align-items: center; gap: 18px; }
.cijfer b { display: block; font-size: 28px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cijfer span { font-size: 13px; color: var(--sec); }
.cijfer.oranje b { color: var(--open); } .cijfer.rood b { color: var(--ruil); }
.cijfer { flex: 1; }
.ring { position: relative; width: 66px; height: 66px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .ring-baan { stroke: var(--tint-zacht); }
.ring .ring-vol { stroke: var(--tint); stroke-linecap: round; transition: stroke-dasharray .6s var(--veer); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.wijz-kaart { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; cursor: pointer; text-align: left; color: var(--label);
  background: var(--tint-zacht); box-shadow: none; font: inherit; }
.wijz-kaart > svg { width: 26px; height: 26px; color: var(--tint-tekst); flex: none; }
.wijz-kaart b { font-weight: 650; }
.speeldag-raster { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.sd-tijd { font-size: 13px; font-weight: 600; color: var(--sec); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.sd-chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 0; cursor: pointer; text-align: left;
  border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; font: inherit; font-size: 14px; font-weight: 650; color: var(--label); }
.sd-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-chip i { font-style: normal; font-weight: 700; flex: none; }
.sd-chip.vol { background: color-mix(in srgb, var(--ok-vlak) 15%, transparent); } .sd-chip.vol i { color: var(--ok); }
.sd-chip.open { background: var(--open-zacht); } .sd-chip.open i { color: var(--open); }
.sd-chip.ruil { background: var(--ruil-zacht); } .sd-chip.ruil i { color: var(--ruil); }
.sd-chip:active { opacity: .7; }
.speeldag { display: none; }   /* alleen op brede schermen: op de telefoon is het te krap */
.dagkop .tekstknop { min-height: 36px; }

/* Lichting: vier actietegels naast elkaar */
.acties { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 16px 0 4px; }
.actie { position: relative; border: 0; cursor: pointer; border-radius: 16px; min-height: 66px; padding: 8px 4px; background: var(--cel); color: var(--tint-tekst);
  box-shadow: var(--kaart); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font: inherit; font-size: 13px; font-weight: 600; }
.actie svg { width: 22px; height: 22px; }
.actie.hoofd { background: var(--tint-knop); color: var(--tint-knop-tekst); }
.actie .badge { position: absolute; top: 6px; right: 6px; margin: 0; font-style: normal; background: var(--tint-knop); color: var(--tint-knop-tekst); }
.actie:active { opacity: .7; }

/* Zwevende tabbalk (telefoon): capsule van materiaal, het gekozen tabblad krijgt een zachte vlek */
.tabbalk { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 32px;
  box-shadow: 0 0 0 .5px var(--glas-rand), 0 12px 30px -10px rgba(12,17,14,.3); }
.tab { border-radius: 26px; min-height: 52px; font-size: 11px; font-weight: 600; gap: 3px; letter-spacing: 0; }
.tab svg { width: 24px; height: 24px; }
.tab.actief { background: var(--tint-zacht); }
.heeft-tabbalk .inhoud { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* Op de telefoon alleen (snelkoppelingen die op de laptop in de zijbalk staan) */
@media (min-width: 760px) { .alleen-tel { display: none !important; } }

@media (min-width: 760px) {
  /* Zijbalk: gekozen item zacht getint in plaats van een volle kleur */
  .zijbalk { background: var(--bg); box-shadow: .5px 0 0 var(--sep); }
  .zb-item.actief { background: var(--tint-zacht); color: var(--tint-tekst); }
  .zb-item.actief svg, .zb-item.actief .teller { color: var(--tint-tekst); }
  .kop-acties { display: flex; }
  .kiezer { margin: 18px 0 0; padding: 2px 0 4px; flex-wrap: wrap; overflow: visible; }
  /* Lichting op de laptop: acties als knoppen op één regel */
  .acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
  .actie { flex-direction: row; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; gap: 8px; background: var(--tint-zacht); box-shadow: none; }
  .actie svg { width: 18px; height: 18px; }
  .actie .badge { position: static; margin-left: 2px; }
  .actie.hoofd { order: -1; }
}
@media (min-width: 1100px) {
  .met-zijbalk .inhoud:not(.breed) { max-width: 1080px; }
  /* Overzicht: twee kolommen; lichtingen als kaarten */
  .overzicht-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; align-items: start; margin-top: 4px; }
  .ov-zij > :first-child { margin-top: 4px; }
  .speeldag { display: block; }
  .teamlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; background: none; box-shadow: none; overflow: visible; }
  .teamlijst .rij { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "naam tel" "balk balk"; row-gap: 12px; align-items: start;
    background: var(--cel); border-radius: var(--r); box-shadow: var(--kaart); padding: 16px; }
  .teamlijst .rij::before { display: none; }
  .teamlijst .rij-tekst { grid-area: naam; } .teamlijst .acc { grid-area: tel; font-size: 15px; } .teamlijst .chevron { display: none; }
  .teamlijst .segmenten { grid-area: balk; width: 100%; }
  .teamlijst .titel { font-weight: 700; }
  /* Ouderpagina op een breed scherm: links de samenvatting, rechts alle diensten */
  .inhoud.ouder { max-width: 1040px; }
  .ouder-raster { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 36px; align-items: start; }
  .ouder-zij { position: sticky; top: 24px; }
  .ouder-lijst > .kiezer:first-child { margin-top: 0; }
  .ouder-lijst > .kiezer:first-child + .dagkop, .ouder-lijst > .dagkop:first-child { margin-top: 6px; }
  /* Dienst beheren: als zijpaneel rechts, de lijst blijft zichtbaar */
  .paneel.zij { top: 16px; bottom: 16px; right: 16px; left: auto; width: 400px; max-height: none; transform: translateX(110%); opacity: 1; pointer-events: none;
    border-radius: 22px; padding: 22px 20px 16px; transition: transform .35s var(--veer); }
  .paneel.zij.zichtbaar { transform: translateX(0); pointer-events: auto; }
  .paneel.zij h3 { text-align: left; font-size: 22px; font-weight: 750; }
  .paneel.zij .p-sub { text-align: left; }
  .overlay.zij { background: rgba(0,0,0,.08); }
}

/* ================= Printen =================
 * Alles voor papier staat hier bij elkaar (rooster, verslag, QR-kaarten), zodat je in één keer ziet
 * wat er op papier gebeurt. Gewone pagina's: A-formaat van de printer, 12 mm marge.
 * QR-kaarten krijgen een eigen, benoemde pagina ("qr"): A4 zonder marge, want de vier kaarten van
 * 105 × 148 mm vullen het vel precies. Rijen van 148 mm (niet 148,5): afronding zou anders een
 * lege extra pagina geven. */
@page { margin: 12mm; }
@page qr { size: A4; margin: 0; }
/* ---------- Cijfers: grafieken (app.js vCijfers, gfKolommen/gfMeters) ----------
 * Dunne staven (max 24px), 2px ruimte tussen gestapelde delen, 4px ronding alleen aan
 * de bovenkant, haarfijne hulplijnen. Tekst blijft in tekstkleuren, nooit in de datakleur. */
.gf-kaart { background: var(--cel); border-radius: 12px; padding: 16px 16px 12px; margin-top: 16px; }
.gf-titel { font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 0 0 4px; }
.gf-zin { margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: var(--sec); max-width: 62ch; }
.gf-zin b { color: var(--label); font-weight: 600; }
.gf-vol { background: var(--gf-vol); } .gf-ruil { background: var(--gf-ruil); } .gf-vast { background: var(--gf-vast); } .gf-open { background: var(--gf-open); }
.gf-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--sec); margin: 0 0 10px; }
.gf-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.gf-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gf-legenda .gf-open { box-shadow: inset 0 0 0 1px var(--vul-2); }
/* Staven per week */
.gf-vlak { position: relative; height: 170px; margin: 6px 0 26px 26px; }
.gf-lijn { position: absolute; left: 0; right: 0; height: 0; border-top: .5px solid var(--sep); }
.gf-lijn i { position: absolute; right: calc(100% + 6px); top: -8px; font-style: normal; font-size: 11px; color: var(--sec); font-variant-numeric: tabular-nums; }
.gf-rij-kols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.gf-kol { position: relative; display: flex; justify-content: center; outline: none; border-radius: 6px; cursor: default; }
.gf-kol:hover, .gf-kol:focus-visible { background: var(--vul); }
.gf-kol:focus-visible { box-shadow: 0 0 0 2px var(--tint); }
.gf-stapel { position: absolute; bottom: 0; top: 0; width: min(24px, 62%); display: flex; flex-direction: column-reverse; gap: 2px; }
.gf-stapel i { display: block; min-height: 2px; }
.gf-stapel i:last-child { border-radius: 4px 4px 0 0; }
.gf-x { position: absolute; top: calc(100% + 7px); font-size: 11px; color: var(--sec); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .gf-veel .gf-kol:nth-child(even) .gf-x { visibility: hidden; } }
/* Liggende balken */
.gf-meters { display: grid; gap: 2px; }
.gf-meter { display: grid; grid-template-columns: minmax(84px, 30%) 1fr auto; align-items: center; gap: 12px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; outline: none; }
.gf-meter:hover, .gf-meter:focus-visible { background: var(--vul); }
.gf-meter:focus-visible { box-shadow: 0 0 0 2px var(--tint); }
.gf-naam { font-size: 15px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-baan { display: flex; gap: 2px; height: 12px; border-radius: 0 4px 4px 0; background: var(--gf-open); overflow: hidden; }
.gf-baan i { display: block; height: 100%; }
.gf-baan i:last-child { border-radius: 0 4px 4px 0; }
.gf-waarde { font-size: 13px; color: var(--sec); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.gf-kaart .knoppenrij { margin-top: 12px; }
/* Tabelweergave en tooltip */
.gf-tabel { margin-top: 10px; font-size: 15px; }
.gf-tabel summary { cursor: pointer; color: var(--tint-tekst); font-size: 15px; min-height: 44px; display: flex; align-items: center; width: max-content; }
.gf-tabel .rooster-wrap { margin-top: 8px; box-shadow: inset 0 0 0 .5px var(--sep); }
.gf-tip[hidden] { display: none; }   /* anders wint display:grid van het hidden-attribuut */
.gf-tip { position: fixed; z-index: 90; pointer-events: none; display: grid; gap: 1px; max-width: 240px; padding: 8px 11px; border-radius: 10px;
  background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  color: var(--label); font-size: 13px; line-height: 1.35; box-shadow: 0 0 0 .5px var(--sep), 0 10px 30px -8px rgba(0,0,0,.3); }
.gf-tip b { font-size: 15px; }
.gf-tip span { color: var(--sec); }

@media print {
  /* Altijd op wit papier, ook als de telefoon of laptop in donkere modus staat. */
  :root:root:root {
    --bg: #FFFFFF; --cel: #FFFFFF; --cel-hoog: #FFFFFF; --cel-2: #F2F2F7; --label: #000000;
    --sec: #6E6E73; --ter: #C7C7CC; --sep: rgba(60,60,67,.29);
    --open: #C93400; --open-zacht: rgba(255,149,0,.15); --ruil: #D70015; --ruil-zacht: rgba(255,59,48,.11);
    --ok: #1B7D35; --ok-vlak: #34C759; --vul: rgba(118,118,128,.12); --vul-2: rgba(120,120,128,.2);
    --tint: var(--tint-l); --tint-tekst: var(--tint-tekst-l); --tint-knop: var(--tint-knop-l);
    --tint-knop-tekst: var(--tint-knop-tekst-l); --tint-zacht: var(--tint-zacht-l);
    --kaart: none; color-scheme: light;
  }

  /* Rooster: alleen de tabel, zwart op wit, zonder knoppen */
  body { background: #fff !important; color: #000; }
  .zijbalk, .tabbalk, .navbalk, .rooster-filters .segment, .rooster-filters .veld-rij, .knoppenrij, .melding, .overlay, .paneel, main > .inhoud > p:first-child { display: none !important; }
  .shell.met-zijbalk { display: block !important; }
  .shell.met-zijbalk main { margin: 0 !important; padding: 0 !important; }
  .inhoud.breed { max-width: none; padding: 0; }
  .rooster-wrap { overflow: visible; background: none; box-shadow: none; border: 1px solid #ddd; }
  table.rooster { font-size: 11px; }
  .rooster thead th { position: static; color: #000; }
  .chip { background: none !important; border: 1px solid #999; border-left-width: 4px; color: #000 !important; break-inside: avoid; }
  .chip span { color: #000 !important; }
  .rooster tr { break-inside: avoid; }
  .rooster tr.voorbij { opacity: 1; }
  .plan-balk { display: none; }
  .testbalk { display: none !important; }
  .rij-tekst .opm::before { display: none; }
  .goed-blok { box-shadow: none; border: 1px solid #ccc; }

  /* Seizoensverslag */
  .startlijst, .alarm, .kantini-voet, .kiezer, .acties, .kop-acties { display: none !important; }
  table.verslag { font-size: 12px; }
  .tegel { box-shadow: none; border: 1px solid #ccc; }

  /* QR-kaarten: vier per A4 (A6-formaat) met snijlijnen, op de eigen pagina "qr" */
  body.print-qr > *:not(#app) { display: none !important; }
  body.print-qr #app .shell > *:not(main), body.print-qr main > *:not(.inhoud), body.print-qr .inhoud > *:not(.qr-vel) { display: none !important; }
  body.print-qr .shell, body.print-qr main, body.print-qr .inhoud { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  body.print-qr .qr-vel { page: qr; display: grid; grid-template-columns: 105mm 105mm; grid-auto-rows: 148mm; }
  .qr-kaart { margin: 0; box-sizing: border-box; break-inside: avoid; outline: .3mm dashed #999; outline-offset: -.15mm; padding: 0 9mm 7mm;
    text-align: center; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
  .qr-kaart::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5mm; background: var(--tint-knop-l); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qr-kaart-kop { display: flex; align-items: center; justify-content: center; gap: 3mm; font-size: 11pt; font-weight: 600; }
  .qr-kaart-kop .clublogo { width: 11mm; height: 11mm; border-radius: 2.5mm; font-size: 9pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qr-kaart h2 { font-size: 25pt; font-weight: 700; letter-spacing: 0; margin: 3mm 0 3mm; line-height: 1.1; }
  .qr-beeld svg { width: 62mm; height: 62mm; display: block; margin: 0 auto; }
  .qr-kaart figcaption { font-size: 11pt; margin-top: 3mm; line-height: 1.35; }
  .qr-url { font-size: 10pt; color: #333; margin: 2mm 0 0; word-break: break-all; }
}