/* Verenigingsplatform 1.0 – vormgeving
   Het kader is bewust neutraal (steengrijs, wit, inkt), zodat elke clubkleur er goed in staat.
   De clubkleuren komen binnen via --primair, --secundair, --accent (gezet door kleur.js).
   Herkenningsteken: zijbalk in de hoofdkleur met een band in de accentkleur, zoals bij Feest in Bellegem. */
:root {
  --primair: #1f2a44; --primair-tekst: #ffffff;
  --secundair: #eef1f6; --secundair-tekst: #191b1e;
  --accent: #d9531e; --accent-tekst: #ffffff;

  --doek: #f3f4f2; --vlak: #ffffff; --vlak-2: #f8f8f6;
  --inkt: #191b1e; --zacht: #61656c; --stil: #8b8f95;
  --lijn: #e2e3df; --lijn-sterk: #cfd1cc;
  --fout: #b42318; --fout-achter: #fdf0ee; --goed: #1d6b46; --goed-achter: #eaf5ee;
  --let-op: #8a5300; --let-op-achter: #fdf4e3;
  --platform: #1b2a4a; --platform-accent: #b95e00;

  --r-klein: 6px; --r: 10px; --r-groot: 14px;
  --schaduw: 0 1px 2px rgba(25, 27, 30, 0.06), 0 1px 1px rgba(25, 27, 30, 0.04);
  --schaduw-hoog: 0 12px 32px rgba(25, 27, 30, 0.12), 0 2px 6px rgba(25, 27, 30, 0.06);
  --letter: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --letter-kop: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --doek: #121315; --vlak: #1b1c1f; --vlak-2: #202125;
    --inkt: #eceded; --zacht: #a3a6ab; --stil: #7d8086;
    --lijn: #2d2f33; --lijn-sterk: #3b3e43;
    --fout: #f0857a; --fout-achter: #3a1d1a; --goed: #7fd1a3; --goed-achter: #17301f;
    --let-op: #f1c172; --let-op-achter: #36290f;
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.4);
    --schaduw-hoog: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--letter); font-size: 15px; line-height: 1.5; color: var(--inkt); background: var(--doek);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--letter-kop); color: var(--inkt); margin: 0; }
h1 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0; }
small, .klein { font-size: 13px; }
.zacht { color: var(--zacht); }
.icoon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------ knoppen en velden */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  font: inherit; font-weight: 600; font-size: 14px; color: var(--inkt); background: var(--vlak);
  border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); cursor: pointer; white-space: nowrap; text-decoration: none; }
.knop:hover { background: var(--vlak-2); }
.knop:disabled { opacity: 0.55; cursor: progress; }
.knop.hoofd { background: var(--accent); color: var(--accent-tekst); border-color: transparent; }
.knop.hoofd:hover { filter: brightness(1.08); }
/* alpha.176 (Maarten 2 nov 17.02): stille knoppen zien er altijd uit als een ballonnetje, zodat duidelijk is dat je erop kan klikken. */
.knop.stil { background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: 999px; color: var(--zacht); font-weight: 600; }
.knop.stil:hover { color: var(--inkt); background: var(--vlak-2); border-color: var(--inkt); }
.knop.vol { width: 100%; }
.knop.groot { height: 46px; font-size: 15px; }
.knop .icoon { width: 16px; height: 16px; }
.knop[hidden] { display: none; } /* alpha.145: verborgen knoppen echt verbergen */

.veld { display: block; margin-bottom: 18px; }
.veld > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.veld > span small { font-weight: 400; color: var(--zacht); margin-left: 4px; }
.veld input { display: block; width: 100%; height: 42px; padding: 0 12px; font: inherit; color: var(--inkt);
  background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); }
.veld input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.veld input[readonly] { background: var(--vlak-2); color: var(--zacht); }
.veld .hulp { display: block; font-size: 12.5px; color: var(--zacht); margin-top: 6px; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }

/* ------------------------------------------------------------------ meldingen */
.melding { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  padding: 11px 16px; border-radius: var(--r); font-size: 14px; background: var(--inkt); color: var(--vlak); box-shadow: var(--schaduw-hoog); }
.melding.fout { background: var(--fout); color: #fff; }
.laden { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; color: var(--zacht); }

/* ------------------------------------------------------------------ aanmelden en losse schermen */
.gesplitst { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; }
.gesplitst-merk { position: relative; background: var(--platform); color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.gesplitst-merk::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 10px;
  background: var(--platform-accent); width: 5px; }
.woordmerk { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.woordmerk i { width: 28px; height: 28px; border-radius: 7px; background: #fff; display: grid; place-items: center; font-style: normal; color: var(--platform); font-size: 15px; }
.gesplitst-merk h1 { color: #fff; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.025em; max-width: 13ch; margin-top: 56px; }
.beloftes { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; max-width: 34ch; }
.beloftes li { display: flex; gap: 12px; color: rgba(255,255,255,0.86); font-size: 15px; }
.beloftes .icoon { color: var(--platform-accent); margin-top: 2px; }
.gesplitst-merk .voetnoot { color: rgba(255,255,255,0.6); font-size: 12.5px; }
.gesplitst-vorm { display: grid; place-items: center; padding: 48px 24px; }
.vorm { width: 100%; max-width: 380px; }
.vorm h2 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 6px; }
.vorm > p { color: var(--zacht); margin-bottom: 28px; }
.google { width: 100%; height: 46px; }
.scheiding { display: flex; align-items: center; gap: 12px; color: var(--stil); font-size: 12.5px; margin: 22px 0; }
.scheiding::before, .scheiding::after { content: ""; flex: 1; border-top: 1px solid var(--lijn); }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: var(--r); margin-bottom: 22px; }
.segment button { height: 34px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--zacht); border-radius: 7px; cursor: pointer; }
.segment button[aria-selected=true] { background: var(--vlak); color: var(--inkt); font-weight: 600; box-shadow: var(--schaduw); }
.versie { margin-top: 28px; font-size: 12px; color: var(--stil); }

.alleen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.paneel { width: 100%; max-width: 460px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 32px; box-shadow: var(--schaduw); }
.paneel h1 { font-size: 24px; margin: 18px 0 8px; }
.paneel > p { color: var(--zacht); margin-bottom: 20px; }
.paneel .knoppen { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.keuzelijst { list-style: none; padding: 0; margin: 0; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.keuzelijst li + li { border-top: 1px solid var(--lijn); }
.keuzelijst button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--vlak); border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--inkt); }
.keuzelijst button:hover { background: var(--vlak-2); }
.keuzelijst .icoon { margin-left: auto; color: var(--stil); }
.monogram { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--secundair); color: var(--secundair-tekst); flex: none; overflow: hidden; }
.monogram img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* ------------------------------------------------------------------ wizard */
.wizard { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 280px 1fr; }
.wizard-rail { background: var(--vlak); border-right: 1px solid var(--lijn); padding: 32px 24px; display: flex; flex-direction: column; gap: 32px; position: sticky; top: 0; height: 100vh; height: 100dvh; }
.wizard-rail .woordmerk { color: var(--inkt); }
.wizard-rail .woordmerk i { background: var(--platform); color: #fff; }
.stappen { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; counter-reset: stap; }
.stappen button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 10px; border: 0; background: none; border-radius: var(--r-klein);
  font: inherit; font-size: 14px; color: var(--zacht); text-align: left; cursor: pointer; }
.stappen button:disabled { cursor: default; color: var(--stil); }
.stappen button:not(:disabled):hover { background: var(--vlak-2); }
.stappen .nr { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--lijn-sterk); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.stappen .nr .icoon { width: 14px; height: 14px; stroke-width: 2.5; }
.stappen .klaar .nr { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
.stappen .actief button { color: var(--inkt); font-weight: 600; background: var(--vlak-2); }
.stappen .actief .nr { border-color: var(--accent); color: var(--accent-lees, var(--accent)); }
.wizard-rail .terug { margin-top: auto; align-self: flex-start; }
.wizard-hoofd { padding: 48px 56px 120px; max-width: 980px; width: 100%; }
.wizard-hoofd > header { margin-bottom: 32px; }
.wizard-hoofd > header p { color: var(--zacht); margin-top: 8px; max-width: 60ch; }
.wizard-hoofd .vak { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 28px; box-shadow: var(--schaduw); }
.wizard-voet { position: fixed; left: 280px; right: 0; bottom: 0; background: color-mix(in srgb, var(--doek) 88%, transparent); backdrop-filter: blur(8px);
  border-top: 1px solid var(--lijn); padding: 14px 56px; display: flex; justify-content: space-between; align-items: center; gap: 12px; z-index: 5; }
.wizard-voet .stapinfo { color: var(--zacht); font-size: 13px; }
.wizard-voet .rechts { display: flex; gap: 8px; }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.soorten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.soort { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--lijn-sterk); border-radius: var(--r); cursor: pointer; background: var(--vlak); }
.soort:hover { border-color: var(--stil); }
.soort:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.soort input { position: absolute; opacity: 0; pointer-events: none; }
.soort .icoon { width: 22px; height: 22px; color: var(--accent-lees, var(--accent)); margin-top: 1px; }
.soort b { display: block; font-size: 14px; }
.soort small { color: var(--zacht); }

.huisstijl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.logo-zone { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px dashed var(--lijn-sterk); border-radius: var(--r); margin-bottom: 22px; }
.logo-zone .beeld { width: 72px; height: 72px; border-radius: var(--r); background: #fff; border: 1px solid var(--lijn); display: grid; place-items: center; overflow: hidden; color: var(--stil); flex: none; }
.logo-zone .beeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-zone .beeld .icoon { width: 26px; height: 26px; }
.logo-zone .acties { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.logo-zone small { display: block; color: var(--zacht); margin-top: 4px; width: 100%; }
.bestandknop { position: relative; overflow: hidden; }
.bestandknop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kleuren { border: 1px solid var(--lijn); border-radius: var(--r); }
.kleurrij { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; cursor: pointer; }
.kleurrij + .kleurrij { border-top: 1px solid var(--lijn); }
.kleurrij .tekst { flex: 1; }
.kleurrij b { display: block; font-size: 14px; }
.kleurrij small { color: var(--zacht); }
.kleurrij code { font: 12.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--zacht); }
.staal { position: relative; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.12); overflow: hidden; flex: none; }
.staal input { position: absolute; inset: -8px; width: 50px; height: 50px; border: 0; padding: 0; cursor: pointer; background: none; }
.controle { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 10px 12px; border-radius: var(--r-klein); margin-top: 14px; }
.controle .icoon { width: 16px; height: 16px; margin-top: 2px; }
.controle.goed { background: var(--goed-achter); color: var(--goed); }
.controle.let-op { background: var(--let-op-achter); color: var(--let-op); }
.controle p + p { margin-top: 4px; }

/* voorbeeld van het portaal in de wizard */
.mini { border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; background: var(--doek); box-shadow: var(--schaduw); display: grid; grid-template-columns: 140px 1fr; min-height: 250px; font-size: 12px; }

.mini-menu { background: var(--vlak); border-right: 1px solid var(--lijn); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.mini-id { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-weight: 650; font-size: 11.5px; line-height: 1.2; color: var(--inkt); }
.mini-id .monogram { width: 26px; height: 26px; border-radius: 6px; font-size: 10px; }
.mini-menu span { padding: 5px 7px; border-radius: 5px; color: var(--zacht); }
.mini-menu span.aan { background: var(--secundair); color: var(--secundair-tekst); font-weight: 600; }
.mini-lijf { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mini-lijf b { font-size: 15px; letter-spacing: -0.01em; color: var(--inkt); }
.mini-blok { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 7px; padding: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--inkt); }
.mini-knop { padding: 5px 10px; border-radius: 5px; font-weight: 600; font-size: 11px; background: var(--accent); color: var(--accent-tekst); }
.mini-link { color: var(--accent-lees, var(--accent)); font-weight: 600; }

.modulegroep + .modulegroep { margin-top: 26px; }
.modulegroep h3 { font-size: 13px; color: var(--zacht); font-weight: 600; margin-bottom: 10px; }
.modulelijst { list-style: none; padding: 0; margin: 0; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.modulelijst li + li { border-top: 1px solid var(--lijn); }
.moduleregel { display: flex; gap: 14px; align-items: center; padding: 12px 14px; margin: 0; cursor: pointer; background: var(--vlak); }
.moduleregel:hover { background: var(--vlak-2); }
.moduleregel .icoon { color: var(--zacht); width: 20px; height: 20px; }
.moduleregel .tekst { flex: 1; }
.moduleregel b { display: block; font-size: 14px; }
.moduleregel small { color: var(--zacht); }
.moduleregel.vast { cursor: default; }
.moduleregel.vast:hover { background: var(--vlak); }
.moduleregel .inbegrepen { font-size: 12px; color: var(--zacht); }
.schakel { position: relative; width: 36px; height: 20px; flex: none; }
.schakel input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.schakel span { position: absolute; inset: 0; border-radius: 999px; background: var(--lijn-sterk); transition: background 0.15s; pointer-events: none; }
.schakel span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s; }
.schakel input:checked + span { background: var(--accent); }
.schakel input:checked + span::after { transform: translateX(16px); }
.schakel input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.samenvatting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; font-size: 14px; }
.gegevens dt { color: var(--zacht); }
.gegevens dd { margin: 0; }

/* ------------------------------------------------------------------ portaal
   Zijbalk in de hoofdkleur van de vereniging, band in de accentkleur, actief item in de accentkleur. */
.portaal { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.zijbalk { --op: var(--primair-tekst); background: var(--primair); color: var(--op); border-right: 5px solid var(--accent);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
/* Logo en verenigingswissel blijven bovenaan staan; enkel het menu eronder scrolt (alpha.155). */
.zijbalk-kop { position: sticky; top: 0; z-index: 2; background: var(--primair); flex: none;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--op) 14%, transparent); }
.zijbalk-kop .wisselmenu { max-height: 60vh; overflow-y: auto; }
.club { display: flex; align-items: center; gap: 12px; padding: 22px 18px 20px; }
.club .monogram { width: 48px; height: 48px; border-radius: 12px; font-size: 15px; background: #fff; color: var(--primair); border: 0; }
.club b { display: block; font-size: 15px; line-height: 1.15; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.club small { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.nav { padding: 4px 12px 16px; flex: 1; }
.navgroep + .navgroep { margin-top: 16px; }
.navgroep > p { font-size: 11.5px; font-weight: 600; opacity: 0.55; padding: 0 12px 6px; }
.navknop { width: 100%; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 14.5px; font-weight: 650; color: inherit; cursor: pointer; text-align: left; opacity: 0.92; }
.navknop:hover { background: color-mix(in srgb, var(--op) 10%, transparent); opacity: 1; }
.navknop.actief { background: var(--actief, var(--accent)); color: var(--actief-tekst, var(--accent-tekst)); opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.navknop .icoon { width: 18px; height: 18px; stroke-width: 2; }
.zijbalk-voet { border-top: 1px solid color-mix(in srgb, var(--op) 16%, transparent); padding: 12px; }
.ik { display: flex; align-items: center; gap: 10px; padding: 6px 12px 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--op); color: var(--primair); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.ik b { display: block; font-size: 13.5px; line-height: 1.2; }
.ik small { font-size: 12px; opacity: 0.7; }
.zijbalk-voet .navknop { height: 36px; font-size: 13.5px; font-weight: 600; opacity: 0.8; }
.platformnaam { font-size: 11px; opacity: 0.5; padding: 8px 12px 0; }

.hoofd { min-width: 0; }
.balk { display: none; }
.menuknop { width: 40px; height: 40px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--primair-tekst) 12%, transparent); color: inherit; display: grid; place-items: center; cursor: pointer; }
.pagina { padding: 40px 44px 64px; max-width: 1180px; }
.pagina-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 16px; margin-bottom: 28px; border-bottom: 3px solid var(--accent); }
.pagina-kop h1 { font-size: 34px; font-weight: 850; text-transform: uppercase; letter-spacing: -0.01em; color: var(--primair-donker, var(--inkt)); }
.pagina-kop p { color: var(--zacht); margin-top: 4px; max-width: 64ch; }
.kop-merk { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-lees, var(--accent)); white-space: nowrap; }

.start { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.start.enkel { grid-template-columns: minmax(0, 1fr); }
.start.enkel > div { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; }
.blok { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); box-shadow: var(--schaduw); }
.blok-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 20px 14px; }
.blok-kop h2 { font-weight: 750; }
.blok-kop small { color: var(--zacht); }
.voortgang { height: 6px; margin: 0 20px 6px; border-radius: 999px; background: var(--vlak-2); border: 1px solid var(--lijn); overflow: hidden; }
.voortgang span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.taaklijst { list-style: none; padding: 6px 0 8px; margin: 0; }
.taaklijst li { display: flex; gap: 14px; align-items: center; padding: 12px 20px; }
.taaklijst li + li { border-top: 1px solid var(--lijn); }
.vinkje { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--lijn-sterk); display: grid; place-items: center; flex: none; }
.vinkje .icoon { width: 13px; height: 13px; stroke-width: 2.6; }
.taaklijst .gedaan .vinkje { background: var(--goed); border-color: var(--goed); color: #fff; }
.taaklijst .gedaan b { color: var(--zacht); font-weight: 500; }
.taaklijst .tekst { flex: 1; }
.taaklijst b { display: block; font-size: 14px; font-weight: 650; }
.taaklijst small { color: var(--zacht); }
.taaklijst .knop { height: 32px; font-size: 13px; padding: 0 12px; }
.aandacht { padding: 8px 20px 24px; text-align: center; }
.aandacht .icoon { width: 28px; height: 28px; color: var(--stil); margin: 8px auto 10px; display: block; }
.aandacht p { color: var(--zacht); font-size: 14px; max-width: 34ch; margin: 0 auto; }
.modulestatus { list-style: none; padding: 0 0 8px; margin: 0; }
.modulestatus li { display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: 14px; }
.modulestatus li + li { border-top: 1px solid var(--lijn); }
.modulestatus .icoon { color: var(--accent-lees, var(--accent)); }
.modulestatus .naam { flex: 1; min-width: 0; }
.status { flex: none; font-size: 12.5px; color: var(--stil); }
.leegstaat { padding: 56px 32px; text-align: center; }
.leegstaat .icoon { width: 32px; height: 32px; color: var(--accent-lees, var(--accent)); margin-bottom: 14px; }
.leegstaat h2 { margin-bottom: 8px; }
.leegstaat p { color: var(--zacht); max-width: 46ch; margin: 0 auto; }

/* voorbeeld in de wizard volgt dezelfde opbouw */
.mini { grid-template-columns: 140px 1fr !important; }
.mini-menu { background: var(--primair); color: var(--primair-tekst); border-right: 4px solid var(--accent); }
.mini-id { color: inherit; text-transform: uppercase; font-weight: 800; }
.mini-id .monogram { background: #fff; color: var(--primair); }
.mini-menu span { color: inherit; opacity: 0.85; font-weight: 600; }
.mini-menu span.aan { background: var(--actief, var(--accent)); color: var(--actief-tekst, var(--accent-tekst)); opacity: 1; }

/* ------------------------------------------------------------------ module Leden */
.kop-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.werkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.zoek { position: relative; flex: 1 1 220px; max-width: 320px; margin: 0; }
.zoek .icoon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--stil); width: 16px; height: 16px; }
.zoek input { width: 100%; height: 40px; padding: 0 12px 0 34px; font: inherit; color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); }
.zoek input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lijn-sterk); background: var(--vlak); font: inherit; font-size: 13px; font-weight: 600; color: var(--zacht); cursor: pointer; }
.filter:hover { color: var(--inkt); }
.filter[aria-pressed=true] { background: var(--primair); border-color: var(--primair); color: var(--primair-tekst); }
.keuzelijstje { height: 40px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); }
.werkbalk .filters { flex: 1 1 auto; }
.werkbalk .keuzelijstje { flex: none; }
.lijstblok { overflow: hidden; }
.ledenlijst { list-style: none; margin: 0; padding: 0; }
.lidregel { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.lidregel + .lidregel { border-top: 1px solid var(--lijn); }
.lid-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 11px 14px 11px 18px; border: 0; background: none; font: inherit; color: var(--inkt); text-align: left; cursor: pointer; }
.lidregel:hover { background: var(--vlak-2); }
.zacht-av { background: var(--secundair); color: var(--secundair-tekst); width: 34px; height: 34px; font-size: 12px; }
.lid-naam { flex: 0 1 240px; min-width: 0; }
.lid-naam b { display: block; font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lid-naam small { display: block; color: var(--zacht); }
.lid-naam small.ontbreekt { color: var(--let-op); white-space: normal; }
.labels { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.labels .label { margin: 0; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--vlak-2); border: 1px solid var(--lijn); color: var(--zacht); font-weight: 500; }
.toegang { font-size: 12px; color: var(--goed); min-width: 70px; text-align: right; }
.contact { display: flex; gap: 6px; flex: none; }
.rondknop { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--accent-lees, var(--accent)); }
.rondknop:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
.rondknop .icoon { width: 16px; height: 16px; }
.rondknop.leeg { visibility: hidden; }
.lijstleeg { padding: 40px 20px; text-align: center; color: var(--zacht); }
.lijstvoet { margin-top: 10px; }
.status.klaar { color: var(--goed); font-weight: 600; }

/* pop-up */
.popup { width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: var(--r-groot); background: var(--vlak); color: var(--inkt); box-shadow: var(--schaduw-hoog); }
.popup::backdrop { background: rgba(20, 22, 26, 0.45); }
.popup form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
.popup-kop { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--lijn); }
.popup-kop .avatar { width: 44px; height: 44px; font-size: 15px; background: var(--primair); color: var(--primair-tekst); }
.popup-kop h2 { font-size: 20px; }
.popup-kop p { font-size: 13px; }
.popup-kop > div { flex: 1; min-width: 0; }
.sluit { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--vlak-2); font-size: 22px; line-height: 1; color: var(--zacht); cursor: pointer; flex: none; }
.popup-lijf { padding: 8px 24px 8px; overflow-y: auto; }
.popup-lijf section { padding: 18px 0 6px; }
.popup-lijf section + section { border-top: 1px solid var(--lijn); }
.popup-lijf h3 { font-size: 14px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.popup-lijf h3 small { font-weight: 400; color: var(--zacht); font-size: 12.5px; }
.knoppenrij { display: flex; gap: 8px; padding: 20px 24px 24px; }
.raster-adres { display: grid; grid-template-columns: 2fr 0.8fr 1.4fr; gap: 0 14px; }
.raster-2.midden { align-items: center; }
.veld textarea { display: block; width: 100%; padding: 10px 12px; font: inherit; color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); resize: vertical; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 8px; }
.vinkknop { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--lijn-sterk); border-radius: 999px; font-size: 13.5px; cursor: pointer; margin: 0; background: var(--vlak); }
.vinkknop:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--vlak)); }
.vinkknop.groot { border-radius: var(--r-klein); padding: 10px 12px; margin-bottom: 18px; }
.popup-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--lijn); background: var(--vlak-2); border-radius: 0 0 var(--r-groot) var(--r-groot); }
.popup-voet .rechts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gevaar { color: var(--fout) !important; }
.toegangrij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: 14px; }
.toegangrij > span { display: inline-flex; align-items: center; gap: 8px; flex: 1; }
.toegangrij .icoon { color: var(--goed); }
.linkkaart { display: flex; gap: 8px; margin: 4px 0 8px; }
.linkkaart input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; font: 13px ui-monospace, Menlo, monospace; color: var(--inkt); background: var(--vlak-2); border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); }
.koepellink { font-size: 13px; font-weight: 600; color: var(--accent-lees, var(--accent)); }

/* ------------------------------------------------------------------ gsm en tablet */
@media (max-width: 960px) {
  .gesplitst { grid-template-columns: 1fr; }
  .gesplitst-merk { padding: 28px 24px; }
  .gesplitst-merk h1 { margin-top: 28px; font-size: 30px; }
  .gesplitst-merk .beloftes, .gesplitst-merk .voetnoot { display: none; }
  .wizard { grid-template-columns: 1fr; }
  .wizard-rail { position: static; height: auto; padding: 18px 16px; gap: 14px; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .stappen { grid-auto-flow: column; overflow-x: auto; }
  .stappen button { white-space: nowrap; padding: 8px; }
  .wizard-rail .terug { position: absolute; top: 14px; right: 12px; margin: 0; }
  .wizard-hoofd { padding: 24px 16px 110px; }
  .wizard-hoofd .vak { padding: 20px; }
  .wizard-voet { left: 0; padding: 12px 16px; }
  .wizard-voet .stapinfo { display: none; }
  .huisstijl, .samenvatting, .start { grid-template-columns: 1fr; }
  .portaal { grid-template-columns: minmax(0, 1fr); }
  .zijbalk { position: fixed; z-index: 20; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-110%); transition: transform 0.2s ease; box-shadow: var(--schaduw-hoog); }
  .zijbalk.open { transform: none; }
  .balk { display: flex; position: sticky; top: 0; z-index: 4; align-items: center; gap: 12px; height: 58px; padding: 0 14px;
    background: var(--primair); color: var(--primair-tekst); border-bottom: 4px solid var(--accent); }
  .balk .pad { font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; }
  .balk .pad b { font-weight: 800; }
  .pagina { padding: 24px 16px 48px; }
  .pagina-kop h1 { font-size: 26px; }
  .kop-merk { display: none; }
}
@media (max-width: 560px) {
  .labels, .toegang { display: none; }
  .raster-adres { grid-template-columns: 1fr; }
  .werkbalk .keuzelijstje { margin-left: 0; }
  .zoek { max-width: none; }
  .linkkaart { flex-wrap: wrap; }
  .popup-voet { flex-direction: column; align-items: stretch; }
  .raster-2, .soorten { grid-template-columns: 1fr; }
  .mini { grid-template-columns: 1fr !important; }
  .mini-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.anders summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--zacht); margin-bottom: 10px; list-style-position: inside; }
.anders summary small { font-weight: 400; margin-left: 6px; color: var(--stil); }

/* ------------------------------------------------------------------ importeren */
.popup > .popup-lijf { max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 20px; margin: 16px 0; border: 2px dashed var(--lijn-sterk); border-radius: var(--r); text-align: center; cursor: pointer; background: var(--vlak-2); }
.dropzone:hover, .dropzone.erover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--vlak)); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.linkknop { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-lees, var(--accent)); font-weight: 600; text-decoration: underline; cursor: pointer; }
.tabelvak { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--r); margin: 14px 0 8px; }
.voorbeeldtabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.voorbeeldtabel th { text-align: left; font-weight: 600; color: var(--zacht); background: var(--vlak-2); padding: 8px 10px; white-space: nowrap; }
.voorbeeldtabel td { padding: 8px 10px; border-top: 1px solid var(--lijn); white-space: nowrap; }
.nieuwlabel { color: var(--goed); font-weight: 600; }

.knop.bevestigd { background: var(--goed-achter); border-color: var(--goed); color: var(--goed); }

.infovak { background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: var(--r); padding: 14px 16px; margin-top: 4px; }
.infovak p { color: var(--zacht); font-size: 14px; margin-top: 4px; }
.infovak .linkkaart { margin: 12px 0 8px; }
.toegang.wacht { color: var(--let-op); }
.knoppenrij2 { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.popup .melding { bottom: auto; top: 16px; }

/* ------------------------------------------------------------------ module Kalender */
.segment.klein { display: inline-grid; grid-template-columns: repeat(2, auto); margin: 0; }
.segment.klein button { padding: 0 14px; }
.maandgroep + .maandgroep { margin-top: 22px; }
.maandkop { font-size: 13px; font-weight: 700; color: var(--zacht); margin: 0 0 8px 4px; }
.maandkop::first-letter { text-transform: uppercase; }
.agenda { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.agendaregel + .agendaregel { border-top: 1px solid var(--lijn); }
.agenda-open { width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 0; background: none; font: inherit; color: var(--inkt); text-align: left; cursor: pointer; }
.agenda-open:hover { background: var(--vlak-2); }
.datumblok { width: 48px; flex: none; text-align: center; border-radius: 10px; padding: 5px 0 4px; background: var(--vlak-2); border: 1px solid var(--lijn); line-height: 1.1; }
.datumblok b { display: block; font-size: 19px; font-weight: 800; }
.datumblok small { display: block; font-size: 11px; color: var(--zacht); text-transform: lowercase; }
.datumblok.vandaag { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
.datumblok.vandaag small { color: inherit; opacity: 0.85; }
.datumblok.groot { width: 56px; }
.agendatekst { flex: 1; min-width: 0; }
.agendatekst b { display: block; font-size: 15px; font-weight: 650; }
.agendatekst small { color: var(--zacht); font-size: 13px; }
.agendaregel.geannuleerd .agendatekst b { text-decoration: line-through; color: var(--zacht); }
.soortlabel { background: color-mix(in srgb, var(--accent) 10%, var(--vlak)) !important; border-color: color-mix(in srgb, var(--accent) 30%, var(--lijn)) !important; color: var(--accent-lees, var(--accent)) !important; }
.agenda.kort { padding: 0 0 8px; }
.agenda.kort .agendaregel { display: flex; align-items: center; gap: 14px; padding: 9px 20px; }
.agenda.kort .datumblok { width: 42px; }
.agenda.kort .datumblok b { font-size: 16px; }
.agenda.kort .agendatekst b { font-size: 14px; }
.blok-kop .knop.stil { height: 30px; font-size: 13px; padding: 0 10px; }
.maandvak { overflow: hidden; }
.maandbalk { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--lijn); }
.maandbalk h2::first-letter { text-transform: uppercase; }
.maandbalk .knop { font-size: 22px; height: 34px; width: 40px; padding: 0; }
.weekdagen { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 12px; font-weight: 600; color: var(--zacht); text-align: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.maandraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dagcel { min-height: 96px; padding: 6px; border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dagcel:nth-child(7n) { border-right: 0; }
.dagcel.anders { background: var(--vlak-2); }
.dagcel.anders .dagnr { color: var(--stil); }
.dagnr { font-size: 12.5px; font-weight: 600; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.dagcel.vandaag .dagnr { background: var(--accent); color: var(--accent-tekst); }
.dagitem { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; padding: 2px 6px; font: inherit; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, var(--vlak)); color: var(--inkt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.dagitem.geannuleerd { text-decoration: line-through; opacity: 0.6; }
.meer { font-size: 11px; color: var(--zacht); padding-left: 6px; }
.raster-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0 14px; }
.keuzelijstje.volle { width: 100%; height: 42px; }
.omschrijving { white-space: pre-wrap; margin-top: 10px; }
.popup-lijf section > p + p { margin-top: 6px; }
@media (max-width: 760px) {
  .dagcel { min-height: 58px; padding: 3px; }
  .dagitem { font-size: 0; height: 6px; padding: 0; }
  .raster-3 { grid-template-columns: 1fr 1fr; }
  .raster-3 .veld:first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ module Taken */
.segment.tabs4 { display: inline-grid; grid-template-columns: repeat(4, auto); margin: 0; }
.segment.tabs4 button { padding: 0 14px; white-space: nowrap; }
.takenlijst { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.taakregel + .taakregel { border-top: 1px solid var(--lijn); }
.taak-hoofd { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 6px; }
.taak-klap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 0; background: none; font: inherit; color: var(--inkt); text-align: left; cursor: pointer; border-radius: 8px; }
.taak-klap:hover { background: var(--vlak-2); }
.taaknr { flex: none; font: 600 12px ui-monospace, "SF Mono", Menlo, monospace; color: var(--zacht); min-width: 78px; }
.taaktitel { min-width: 0; display: flex; align-items: center; gap: 8px; }
.taaktitel b { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taakregel.klaar .taaktitel b { color: var(--zacht); text-decoration: line-through; }
/* Opengeklapt: volledige titel en alle verantwoordelijken tonen (Maarten 2 nov) */
.taakregel.uit .taaktitel b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.taakregel.uit .taakmeta .wie { white-space: normal; overflow: visible; text-overflow: clip; }
.prio { flex: none; font-size: 11px; font-weight: 700; color: var(--fout); background: var(--fout-achter); padding: 1px 7px; border-radius: 999px; }
.herhaal { flex: none; color: var(--zacht); font-size: 13px; }
.taakmeta { flex: none; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--zacht); }
.taakmeta .wie { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deadline { font-weight: 600; color: var(--zacht); white-space: nowrap; }
.deadline.dringend { color: var(--let-op); }
.deadline.te-laat { color: var(--fout); }
.statuskeuze { flex: none; height: 30px; padding: 0 8px; font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 999px; border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--inkt); cursor: pointer; }
.statuskeuze.bezig, .status-pil.bezig { background: color-mix(in srgb, #2563eb 12%, var(--vlak)); border-color: color-mix(in srgb, #2563eb 35%, var(--lijn)); color: #1d4ed8; }
.statuskeuze.wacht, .status-pil.wacht { background: var(--let-op-achter); border-color: color-mix(in srgb, var(--let-op) 35%, var(--lijn)); color: var(--let-op); }
.toegang-kandidaten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 10px; max-height: 50vh; overflow: auto; }
.statuskeuze.nvt, .status-pil.nvt { background: var(--vlak-2); border-color: var(--lijn-sterk); color: var(--zacht); }
.taakregel.nvt .taaktitel b { text-decoration: none; font-style: italic; }
.statuskeuze.klaar, .status-pil.klaar { background: var(--goed-achter); border-color: color-mix(in srgb, var(--goed) 35%, var(--lijn)); color: var(--goed); }
.status-pil { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--lijn); }
.taak-hoofd .rondknop { width: 32px; height: 32px; color: var(--zacht); }
.taak-detail { padding: 0 20px 14px 104px; }
.taak-detail .omschrijving { margin: 0 0 6px; }
.taakregel.uit { background: var(--vlak-2); }
.themagroep { overflow: hidden; }
.themagroep + .themagroep { margin-top: 12px; }
.themagroep summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.themagroep summary::-webkit-details-marker { display: none; }
.themagroep summary::before { content: "›"; font-size: 20px; line-height: 1; color: var(--zacht); transition: transform 0.15s; margin-right: 2px; }
.themagroep[open] summary::before { transform: rotate(90deg); }
.themagroep[open] summary { border-bottom: 1px solid var(--lijn); }
.themanaam { flex: 1; font-weight: 750; font-size: 15px; }
.zoek.breed { max-width: none; margin-bottom: 10px; display: block; }
.personenkeuze { display: flex; flex-wrap: wrap; gap: 8px; max-height: 180px; overflow-y: auto; padding: 2px; }
.personenkeuze [hidden] { display: none; }
.takenkort { list-style: none; margin: 0; padding: 0 0 8px; }
.takenkort li { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.takenkort li + li { border-top: 1px solid var(--lijn); }
.tk-tekst { flex: 1; min-width: 0; }
.tk-tekst b { display: block; font-size: 14px; font-weight: 650; }
.tk-tekst small { color: var(--zacht); font-size: 12.5px; }
@media (max-width: 760px) {
  .segment.tabs4 { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .taak-hoofd { flex-wrap: wrap; }
  .taakmeta { order: 3; width: 100%; padding-left: 14px; }
  .taaknr { min-width: 0; }
  .taak-detail { padding-left: 20px; }
}

/* ------------------------------------------------------------------ module Vergaderingen */
.kruimel { margin: -12px 0 14px; }
.stappenbalk { list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.stappenbalk button { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 8px; border: 1px solid var(--lijn-sterk); border-radius: 999px; background: var(--vlak); font: inherit; font-weight: 600; font-size: 14px; color: var(--zacht); cursor: pointer; }
.stappenbalk span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--vlak-2); font-size: 12.5px; }
.stappenbalk button[aria-current=step] { background: var(--primair); border-color: var(--primair); color: var(--primair-tekst); }
.stappenbalk button[aria-current=step] span { background: var(--accent); color: var(--accent-tekst); }
.agendapunten { list-style: none; margin: 0; padding: 0 0 6px; }
.agendapunt { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.agendapunt + .agendapunt { border-top: 1px solid var(--lijn); }
.puntnr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--secundair); color: var(--secundair-tekst); font-size: 12.5px; font-weight: 700; flex: none; }
.punttekst { flex: 1; min-width: 0; }
.punttekst b { display: block; font-size: 14.5px; font-weight: 650; }
.punttekst small { color: var(--zacht); font-size: 12.5px; }
.puntknoppen { display: flex; gap: 4px; flex: none; }
.rondknop.klein { width: 30px; height: 30px; font-size: 15px; color: var(--zacht); font-weight: 700; }
.rondknop:disabled { opacity: 0.35; cursor: default; }
.puntform { display: flex; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--lijn); }
.puntform input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; font: inherit; color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); }
.aanwezigen { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 18px; }
.aanwezigknop { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; border: 1px solid var(--lijn-sterk); border-radius: var(--r); background: var(--vlak); font: inherit; font-size: 14px; font-weight: 600; color: var(--inkt); cursor: pointer; min-width: 120px; }
.aanwezigknop small { font-size: 11.5px; font-weight: 500; color: var(--zacht); min-height: 14px; }
.aanwezigknop.aanwezig { background: var(--goed-achter); border-color: var(--goed); }
.aanwezigknop.aanwezig small { color: var(--goed); }
.aanwezigknop.verontschuldigd { background: var(--let-op-achter); border-color: color-mix(in srgb, var(--let-op) 50%, var(--lijn)); }
.aanwezigknop.verontschuldigd small { color: var(--let-op); }
/* Vergadermodule (alpha.175): thema's per event, dichtgeklapt, goedkeuring, afdruk */
.vergaderpunt { border-top: 1px solid var(--lijn); padding-top: 4px; }
.vp-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 8px; }
.vp-kop h3 { font-size: 15.5px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
.vp-nr, .vs-nr { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--secundair); color: var(--secundair-tekst); font-size: 12px; font-weight: 700; }
.vs-nr { background: var(--primair); color: var(--primair-tekst); }
.puntnr { width: auto; min-width: 26px; padding: 0 6px; border-radius: 999px; }
.vthemas { border-top: 1px solid var(--lijn); }
.vthema > summary, .eventkeuze > summary { display: flex; align-items: center; gap: 10px; padding: 12px 20px; cursor: pointer; list-style: none; }
.vthema > summary::-webkit-details-marker, .eventkeuze > summary::-webkit-details-marker { display: none; }
.vthema > summary::before, .eventkeuze > summary::before { content: "›"; font-size: 20px; line-height: 1; color: var(--zacht); transition: transform 0.15s; }
.vthema[open] > summary::before, .eventkeuze[open] > summary::before { transform: rotate(90deg); }
.vthema > summary .themanaam, .eventkeuze > summary .themanaam { flex: 1; min-width: 0; }
.vthema > summary .puntknoppen { margin-left: 4px; }
.vthemas > .vthema + .vthema { border-top: 1px solid var(--lijn); }
.vthema[open] { background: color-mix(in srgb, var(--vlak-2) 45%, var(--vlak)); }
.vthema .agendapunten { border-top: 1px solid var(--lijn); }
.vthema-leeg { padding: 4px 20px 10px 48px; }
.puntform.klein { border-top: 0; padding: 6px 20px 14px 48px; }
.puntform.klein input { height: 34px; }
.puntform.klein .knop { height: 34px; }
.themagroep.vthema > summary { justify-content: flex-start; }
.themagroep.vthema + .themagroep.vthema { margin-top: 10px; }
.vthema-balk { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 2px 10px; }
.vzijkant { display: grid; gap: 20px; }
.tk-kies { padding: 0 20px; }
.tk-kies .filters { margin-bottom: 10px; }
.tk-leeg { padding: 4px 20px 18px; }
.eventkeuze { border-top: 1px solid var(--lijn); }
.eventkeuze > summary .knop { flex: none; }
.eventkeuze > summary .themanaam small { display: block; font-size: 12.5px; font-weight: 500; }
.eventkeuze .takenkort { border-top: 1px solid var(--lijn); background: color-mix(in srgb, var(--vlak-2) 45%, var(--vlak)); }
.aanwezig-samen { padding: 0 20px 18px; line-height: 1.6; }
.label.letop { background: var(--let-op-achter); border-color: color-mix(in srgb, var(--let-op) 35%, var(--lijn)); color: var(--let-op); }
.vs-thema + .vs-thema { margin-top: 18px; }
.vs-thema > h3 { display: flex; gap: 10px; align-items: center; font-size: 17px; font-weight: 750; padding-bottom: 6px; border-bottom: 1px solid var(--lijn); }
.vs-thema .verslagpunten { list-style: none; padding-left: 0; }
.verslagpunten h4 { font-size: 15px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.verslagpunten h4 .vp-nr { background: var(--vlak-2); color: var(--zacht); }
.vs-voet { margin-top: 18px; }
.goedkeuring { margin-bottom: 16px; }
.gk-lijst { list-style: none; margin: 0; padding: 0 20px 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.gk-lijst li { display: flex; flex-direction: column; padding: 6px 12px; border: 1px solid var(--lijn-sterk); border-radius: var(--r); background: var(--vlak); font-size: 14px; }
.gk-lijst small { font-size: 11.5px; color: var(--zacht); }
.gk-lijst .gk-goedgekeurd, .gk-lijst .gk-stilzwijgend { background: var(--goed-achter); border-color: var(--goed); }
.gk-lijst .gk-goedgekeurd small, .gk-lijst .gk-stilzwijgend small { color: var(--goed); }
.gk-lijst .gk-opmerking, .gk-lijst .gk-opnieuw { background: var(--let-op-achter); border-color: color-mix(in srgb, var(--let-op) 50%, var(--lijn)); }
.gk-lijst .gk-opmerking small, .gk-lijst .gk-opnieuw small { color: var(--let-op); }
.vs-opm-titel { padding: 4px 20px 6px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.popup .vs-opm-titel { padding: 18px 0 6px; }
.vs-opm { list-style: none; margin: 0; padding: 0 20px 12px; }
.popup .vs-opm { padding: 0; }
.vs-opm li { padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--let-op) 40%, var(--lijn)); background: var(--let-op-achter); border-radius: var(--r); }
.vs-opm li + li { margin-top: 8px; }
.vs-opm li.verwerkt { background: var(--vlak-2); border-color: var(--lijn); }
.vs-opm-kop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.vs-opm-kop small { color: var(--zacht); }
.vs-opm .knop { margin-top: 8px; }
.gk-uitleg { padding: 0 20px 12px; }
.gk-zelf { padding: 0 20px 16px; }
.vs-mijn { padding: 10px 14px; border-radius: var(--r); background: var(--vlak-2); margin-bottom: 14px; }
.vs-mijn.goedgekeurd, .vs-mijn.stilzwijgend { background: var(--goed-achter); color: var(--goed); }
.vs-mijn.opnieuw { background: var(--let-op-achter); }
.popup .verslag { box-shadow: none; border: 0; padding: 0; max-width: none; }
.vsub { margin: 0 0 0 34px; border-top: 1px solid var(--lijn); }
.vsub > summary { display: flex; align-items: center; gap: 10px; padding: 9px 20px 9px 4px; cursor: pointer; list-style: none; }
.vsub > summary::-webkit-details-marker { display: none; }
.vsub > summary::before { content: "›"; font-size: 18px; line-height: 1; color: var(--zacht); transition: transform 0.15s; }
.vsub[open] > summary::before { transform: rotate(90deg); }
.vsub > summary .themanaam { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; }
.vsub .agendapunt { padding-left: 4px; }
.vsub .puntform.klein { padding-left: 4px; }
.themagroep .vsub { margin-left: 0; }
.themagroep .vsub > summary { padding: 10px 18px 10px 44px; background: color-mix(in srgb, var(--vlak-2) 60%, var(--vlak)); border-bottom: 1px solid var(--lijn); }
.themagroep .vsub .vergaderpunt { padding-left: 24px; }
.eksubs { border-top: 1px solid var(--lijn); }
.eventkeuze.eksub { margin-left: 24px; }
.eventkeuze.eksub > summary { padding: 9px 20px 9px 4px; }
.eventkeuze.eksub > summary .themanaam { font-size: 14px; font-weight: 650; }
.verslagpunten li.vs-sub { padding: 10px 0 0; border-top: 0 !important; }
.verslagpunten li.vs-sub + li { border-top: 0; }
.vs-sub h5 { font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-lees, var(--accent)); }
.voorstelbalk { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); }
.voorstelbalk p { flex: 1 1 320px; color: var(--zacht); font-size: 14px; }
.alleenlezen .puntknoppen, .alleenlezen .puntform, .geenvolgorde summary .puntknoppen { display: none !important; }
.indienform { padding: 0 20px 16px; display: grid; gap: 10px; }
.indienform .knop { justify-self: start; }
.popup .indienform { padding: 0; }
.wv-indien { margin-top: 20px; }
.ingediend { border-color: color-mix(in srgb, var(--let-op) 45%, var(--lijn)); }
.in-rij { align-items: flex-start !important; }
.in-keuze { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.in-keuze .keuzelijstje { height: 32px; font-size: 13px; max-width: 220px; }
.agendapunt.afgewerkt .punttekst b { color: var(--zacht); text-decoration: line-through; font-weight: 600; }
.agendapunt.afgewerkt { background: var(--vlak-2); }
.voorstelbalk .knoppenrij2 { margin: 0; }
.afdruk-agenda { display: none; }
.afdrukkeuze { display: grid; gap: 10px; margin-top: 14px; }
.afdrukoptie { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--lijn-sterk); border-radius: var(--r); background: var(--vlak); font: inherit; color: var(--inkt); cursor: pointer; }
.afdrukoptie:hover { border-color: var(--accent); background: var(--vlak-2); }
.afdrukoptie b { font-size: 15px; }
.afdrukoptie small { color: var(--zacht); font-size: 13px; }
@media (max-width: 760px) {
  .vthema > summary .zacht.klein { display: none; }
  .puntform.klein, .vthema-leeg { padding-left: 20px; }
  .eventkeuze > summary { flex-wrap: wrap; }
  .vp-kop { flex-wrap: wrap; }
}
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  .geenafdruk { display: none !important; }
  .vs-thema { break-inside: auto; }
  .verslagpunten li { break-inside: avoid; }
  body.druk-agenda .pagina > *:not(.afdruk-agenda) { display: none !important; }
  body.druk-agenda .afdruk-agenda { display: block; color: #000; font-size: 11pt; }
  .afdruk-agenda .ad-kop { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
  .afdruk-agenda .ad-kop h1 { font-size: 18pt; margin: 2px 0 4px; }
  .afdruk-agenda .ad-aanw { display: flex; gap: 8px; margin-top: 6px; }
  .afdruk-agenda .ad-lijn { flex: 1; border-bottom: 1px dotted #777; }
  .afdruk-agenda .ad-thema { margin-top: 14px; }
  .afdruk-agenda .ad-thema > h2 { font-size: 13pt; display: flex; gap: 8px; border-bottom: 1px solid #000; padding-bottom: 3px; break-after: avoid; }
  .afdruk-agenda .ad-punt { break-inside: avoid; margin-top: 8px; }
  .afdruk-agenda .ad-sub { font-size: 10pt; text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 0 34px; break-after: avoid; }
  .afdruk-agenda .ad-punt h3 { font-size: 11pt; display: flex; gap: 8px; }
  .afdruk-agenda .ad-info { font-size: 9pt; color: #444; margin: 1px 0 0 34px; }
  .afdruk-agenda h2 > span, .afdruk-agenda h3 > span { min-width: 26px; }
  .afdruk-agenda .notitie { margin-left: 34px; }
  .afdruk-agenda .ad-toel { font-size: 9.5pt; margin: 2px 0 0 34px; white-space: pre-line; }
  .afdruk-agenda .ad-inhoud { list-style: none; padding: 0; margin: 8px 0 0; columns: 2; column-gap: 12mm; font-size: 10pt; }
  .afdruk-agenda .ad-inhoud li { display: block; break-inside: avoid; margin-bottom: 2px; padding-left: 18px; text-indent: -18px; }
  .afdruk-agenda .ad-inhoud span { display: inline-block; width: 18px; text-indent: 0; font-weight: 700; }
  .afdruk-agenda .ad-inhoud small { color: #555; }
  .afdruk-agenda .ad-punt h3 { align-items: baseline; }
  .afdruk-agenda .ad-titel { flex: 1; min-width: 0; }
  .afdruk-agenda .ad-punt h3 .ad-info { flex: none; max-width: 48%; text-align: right; margin: 0; font-weight: 400; }
  .ad-overzicht .ad-rij { display: grid; grid-template-columns: 11mm minmax(0, 1fr) 42mm 16mm 20mm; gap: 3mm; padding: 1.4mm 0; border-bottom: 0.5px solid #ccc; font-size: 9.5pt; break-inside: avoid; align-items: baseline; }
  .ad-overzicht .ad-tabelkop { break-after: avoid; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.04em; color: #555; border-bottom: 1px solid #000; padding-top: 0; }
  .ad-overzicht .ad-subrij { border-bottom: 0; padding-top: 3mm; font-size: 8.5pt; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; break-after: avoid; }
  .ad-overzicht .ad-nr { font-weight: 700; }
  .ad-overzicht .ad-wat b { font-weight: 600; }
  .ad-overzicht .ad-wat small { display: block; font-size: 8.5pt; color: #444; white-space: pre-line; }
  .ad-overzicht .ad-laat { font-weight: 700; }
  .ad-overzicht .ad-thema > h2 { margin-bottom: 1mm; }
  .ad-overzicht .ad-thema { margin-top: 10px; }
  .ad-overzicht .ad-punt { margin-top: 4px; }
  .ad-overzicht .ad-punt h3 { font-size: 10.5pt; font-weight: 600; }
  .ad-overzicht .ad-sub { margin-top: 6px; }
  .afdruk-agenda .notitie span { display: block; height: 7.5mm; border-bottom: 1px dotted #999; }
}
.puntlijf { padding: 0 20px 16px; }
.puntacties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.verslag { padding: 28px 32px; max-width: 820px; }
.verslag-kop { border-bottom: 3px solid var(--accent); padding-bottom: 14px; margin-bottom: 18px; }
.verslag-kop h2 { font-size: 22px; margin: 4px 0 6px; }
.verslag-kop p { color: var(--zacht); margin-top: 4px; }
.verslag-kop p b { color: var(--inkt); }
.verslagpunten { margin: 0; padding-left: 22px; }
.verslagpunten li { padding: 10px 0 14px; }
.verslagpunten li + li { border-top: 1px solid var(--lijn); }
.verslagpunten h3 { font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.verslagpunten p { margin-top: 4px; }
.verslagknoppen { margin-top: 16px; }
@media print {
  body { background: #fff; }
  .zijbalk, .balk, .kruimel, .pagina-kop, .stappenbalk, .verslagknoppen, .verslagknoppen ~ p, .melding { display: none !important; }
  .portaal { display: block; }
  .pagina { padding: 0; max-width: none; }
  .verslag { border: 0; box-shadow: none; padding: 0; max-width: none; }
}
.seizoenkeuze { font-weight: 600; }
.veld.smal { max-width: 240px; }

/* ------------------------------------------------------------------ opmerkingen-ballon */
.ballon { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--primair); color: var(--primair-tekst); font: inherit; font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22); cursor: pointer; }
.ballon:hover { filter: brightness(1.1); }
.ballon .icoon { width: 18px; height: 18px; stroke-width: 2; }
.teller { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-tekst); font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.opmerkingen { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.opmerkingen li { padding: 16px 20px; }
.opmerkingen li + li { border-top: 1px solid var(--lijn); }
.op-kop { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 6px; }
.op-kop small { color: var(--zacht); }
@media (max-width: 760px) { .ballon span { display: none; } .ballon { width: 50px; padding: 0; justify-content: center; } }
@media print { .ballon { display: none !important; } }

/* ------------------------------------------------------------------ Nieuws en Bestuur */
.bericht { padding: 22px 24px; }
.bericht + .bericht { margin-top: 14px; }
.bericht.vast { border-color: color-mix(in srgb, var(--accent) 40%, var(--lijn)); box-shadow: inset 4px 0 0 var(--accent), var(--schaduw); }
.bericht h2 { font-size: 19px; margin-bottom: 4px; }
.bericht .omschrijving { margin: 12px 0 4px; line-height: 1.6; }
.nieuwskort { list-style: none; margin: 0; padding: 0 0 8px; }
.nieuwskort li { padding: 10px 20px; }
.nieuwskort li + li { border-top: 1px solid var(--lijn); }
.nieuwskort b { display: block; font-size: 14px; }
.nieuwskort small { color: var(--zacht); font-size: 12px; }
.nieuwskort p { font-size: 13.5px; color: var(--zacht); margin-top: 4px; }
.bestuurlijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.bestuurkaart { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.bk-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 16px; border: 0; background: none; font: inherit; color: var(--inkt); text-align: left; cursor: pointer; border-radius: var(--r-groot); }
.bk-open:hover { background: var(--vlak-2); }
.bk-open .avatar { width: 44px; height: 44px; font-size: 14px; background: var(--primair); color: var(--primair-tekst); }
.leeg-av { background: var(--vlak-2) !important; color: var(--stil) !important; border: 1.5px dashed var(--lijn-sterk); }
.bk-tekst { min-width: 0; display: flex; flex-direction: column; }
.bk-tekst small { font-size: 12px; font-weight: 700; color: var(--accent-lees, var(--accent)); text-transform: uppercase; letter-spacing: 0.05em; }
.bk-tekst b { font-size: 15.5px; }
.voorstelvak { margin-top: 18px; }
.voorstelvak .vinkjes { margin-top: 8px; }
.bk-open:disabled { cursor: default; opacity: 1; }
.bk-open:disabled:hover { background: none; }
.teller[hidden] { display: none; }
.voorstel { display: inline-flex; align-items: center; }
.voorstel .filter { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.voorstel-weg { height: 32px; width: 28px; border: 1px solid var(--lijn-sterk); border-left: 0; border-radius: 0 999px 999px 0; background: var(--vlak); color: var(--stil); font-size: 16px; cursor: pointer; }
.voorstel-weg:hover { color: var(--fout); }
.bestuurkaart.meer { flex-direction: column; align-items: stretch; padding-right: 0; gap: 0; }
.bestuurkaart.meer .bk-open { padding-bottom: 6px; }
.bestuurkaart .bk-mensen { list-style: none; margin: 0; padding: 0 14px 12px 18px; display: flex; flex-direction: column; gap: 8px; }
.bestuurkaart .bk-mensen li { display: flex; align-items: center; gap: 10px; }
.bestuurkaart .bk-mensen b { flex: 1; font-size: 14px; font-weight: 700; color: var(--inkt); }
.bestuurkaart .avatar.klein { width: 30px; height: 30px; font-size: 11px; flex: none; background: var(--primair); color: var(--primair-tekst); }
/* Personenkeuze: overal hetzelfde keuzevak */
.pk { position: relative; }
.pk-veld { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px 6px 8px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak); cursor: pointer; }
.pk-veld:focus-visible, .pk.open .pk-veld { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pk-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.pk-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--vlak)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--vlak)); font-size: 13.5px; font-weight: 600; }
.pk-chip button { border: 0; background: none; width: 22px; height: 22px; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--stil); cursor: pointer; }
.pk-chip button:hover { background: var(--doek); color: var(--fout); }
.pk-leeg { color: var(--stil); padding-left: 4px; font-size: 14px; }
.pk-pijl { color: var(--stil); font-size: 13px; transition: transform .15s; }
.pk.open .pk-pijl { transform: rotate(180deg); }
.pk-paneel { margin-top: 6px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak); box-shadow: var(--schaduw); padding: 10px; }
.pk-paneel .zoek { margin-bottom: 6px; }
.pk-lijst { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
.pk-rij { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; margin: 0; }
.pk-rij:hover { background: var(--doek); }
.pk-rij:has(input:checked) { font-weight: 700; }
.pk-rij input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.pk-rij[hidden], .pk-niets[hidden] { display: none; }
.pk-niets { padding: 8px; margin: 0; }
.pk-voet { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--lijn); margin-top: 6px; padding-top: 8px; }
.knop.klein { height: 32px; padding: 0 12px; font-size: 13px; }
.pk-klaar { margin-left: auto; }
/* Lidgeld */
.kerncijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.kerncijfers > div { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 12px 14px; background: var(--doek); }
.kerncijfers b { display: block; font-size: 20px; font-weight: 800; }
.kerncijfers small { color: var(--zacht); font-size: 12.5px; }
.tariefrij { display: grid; grid-template-columns: 1.6fr 1fr 1fr 36px; gap: 10px; align-items: end; margin-bottom: 4px; }
.tariefrij .rondknop { margin-bottom: 18px; color: var(--stil); font-size: 18px; }
.tariefrij .rondknop:hover { color: var(--fout); }
.melding-info { background: color-mix(in srgb, var(--accent) 10%, var(--vlak)); border-radius: var(--r-klein); padding: 10px 12px; font-size: 13.5px; margin: 0 0 12px; }
@media (max-width: 600px) { .tariefrij { grid-template-columns: 1fr 1fr; } .kerncijfers { grid-template-columns: 1fr; } }
.veld[hidden] { display: none; }
/* Lijstbeheer (groepen, kalendersoorten, …) */
.filter.aanpassen { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; }
.filter.aanpassen .icoon { width: 13px; height: 13px; }
.lb-lijst { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lb-rij { display: grid; grid-template-columns: 1fr auto auto 36px; gap: 10px; align-items: center; }
.lb-volg { display: flex; gap: 4px; }
.lb-rij:not(:has(.lb-vink)) { grid-template-columns: 1fr auto 36px; }
.lb-naam { height: 40px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 0 12px; font: inherit; background: var(--vlak); }
.lb-naam:disabled { background: var(--doek); color: var(--zacht); }
.lb-vink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zacht); white-space: nowrap; cursor: pointer; }
.lb-vink input { accent-color: var(--accent); width: 16px; height: 16px; }
.lb-vast { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--stil); text-align: center; }
.lb-weg { color: var(--stil); font-size: 18px; }
.lb-weg:hover { color: var(--fout); }
/* Verplichte velden */
/* alpha.293: ook velden die enkel in de code gecontroleerd worden (data-ster); geen dubbel sterretje als er al een <b class="verplicht"> staat */
.veld:has([required]) > span:first-child:not(:has(.verplicht))::after,
.veld:has([data-verplicht]) > span:first-child:not(:has(.verplicht))::after,
.veld:has([data-ster]) > span:first-child:not(:has(.verplicht))::after,
section:has(> [data-verplicht]) > h3::after { content: " *"; color: var(--fout); font-weight: 700; }
.ontbreekt-veld input:not([type=checkbox]):not([type=radio]), .ontbreekt-veld textarea, .ontbreekt-veld select,
.ontbreekt-veld .pk-veld, input.ontbreekt-veld, .pk.ontbreekt-veld .pk-veld { border-color: var(--fout) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fout) 18%, transparent) !important; }
.ontbreekt-veld > span:first-child { color: var(--fout); }
@keyframes schud { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
dialog.schud { animation: schud .35s ease; }
[hidden] { display: none !important; }
.kortingrij { display: grid; grid-template-columns: 170px 220px 140px; gap: 10px; align-items: center; margin-bottom: 10px; }
.kortinglabel { font-weight: 600; font-size: 14px; }
.kortingwaarde { position: relative; display: block; margin: 0; }
.kortingwaarde input { width: 100%; height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); font: inherit; background: var(--vlak); }
.kortingwaarde .eenheid { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--zacht); font-weight: 600; }
.nieuweouder { border: 1px dashed var(--lijn-sterk); border-radius: var(--r-klein); padding: 14px; margin: -6px 0 16px; background: var(--doek); }
.linkknop.klein { font-size: 13px; margin-top: 8px; }
@media (max-width: 600px) { .kortingrij { grid-template-columns: 1fr 1fr; } .kortinglabel { grid-column: 1 / -1; } }
/* Screenshots bij opmerkingen */
.beelden { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.beelden:empty { display: none; }
.beeld { position: relative; display: block; width: 140px; height: 96px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); overflow: hidden; background: var(--doek); }
.beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.beeld button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.knop.uit { opacity: .45; pointer-events: none; }
dialog.sleep { outline: 3px dashed var(--accent); outline-offset: -8px; }
.opmerkingen .beelden { margin-top: 8px; }
.lid-contact { flex: 0 1 260px; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--zacht); text-align: left; }
.lid-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .lid-contact { display: none; } }
.mailoverzicht { margin-top: 12px; padding: 12px 14px; background: var(--doek); border-radius: var(--r-klein); }
.mailoverzicht p { margin: 0 0 4px; }
/* Voorlopig: modules die nog in opbouw zijn */
.navknop.nogniet { color: #ff7a7a; }
.navknop.nogniet .icoon { color: #ff7a7a; opacity: 1; }
.navknop.nogniet.actief { color: #fff; background: #c73b3b; }
.navknop.nogniet.actief .icoon { color: #fff; }
/* Opmerkingen-module */
.opmerkingen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.opmerkingen > li.opm { padding: 16px 18px; border-left: 4px solid var(--lijn-sterk); }
.opm.st-nieuw { border-left-color: var(--accent); }
.opm.st-bezig { border-left-color: #d9a21e; }
.opm.st-opgelost { border-left-color: var(--goed); }
.opm.st-afgewezen { border-left-color: var(--stil); opacity: .85; }
.opm .op-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opm .op-kop small { color: var(--zacht); flex: 1; min-width: 160px; }
.opm .omschrijving { white-space: pre-wrap; margin: 10px 0; }
.opm-velden { margin-top: 6px; }
.opm-velden textarea { min-height: 60px; }
.soort-pil { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--vlak-2); border: 1px solid var(--lijn); }
.soort-fout { background: var(--fout-achter); color: var(--fout); border-color: transparent; }
.soort-idee { background: color-mix(in srgb, var(--accent) 12%, var(--vlak)); border-color: transparent; }
.soort-vraag { background: var(--let-op-achter); color: var(--let-op); border-color: transparent; }
.status-pil.st-nieuw { background: color-mix(in srgb, var(--accent) 14%, var(--vlak)); }
.status-pil.st-bezig { background: var(--let-op-achter); color: var(--let-op); }
.status-pil.st-opgelost { background: var(--goed-achter); color: var(--goed); }
.status-pil.st-afgewezen { background: var(--vlak-2); color: var(--zacht); }
.mijnopm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mijnopm li { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 12px 14px; }
.mijnopm .op-kop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mijnopm .op-kop small { color: var(--zacht); }
.mijnopm .omschrijving { white-space: pre-wrap; margin: 8px 0 0; }
.antwoord { margin-top: 10px; background: var(--doek); border-radius: var(--r-klein); padding: 10px 12px; }
.antwoord.nieuw { outline: 2px solid var(--accent); }
.antwoord small { color: var(--zacht); margin-left: 8px; }
.antwoord p { margin: 4px 0 0; white-space: pre-wrap; }
.ballon .teller { position: absolute; top: -6px; right: -6px; }
.ballon { position: fixed; }
button.beeld { padding: 0; cursor: zoom-in; }
dialog.beeldgroot { max-width: 95vw; max-height: 95vh; padding: 0; border: 0; border-radius: 10px; background: #111; }
dialog.beeldgroot::backdrop { background: rgba(0,0,0,.75); }
dialog.beeldgroot img { display: block; max-width: 95vw; max-height: 92vh; }
dialog.beeldgroot .sluit { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.9); }
.opmerkingen { overflow: visible; } .opmerkingen li + li { border-top: 0; }
/* Ledenlijst: vaste kolommen zodat e-mail en gsm netjes onder elkaar staan */
.lidregel .lid-naam { flex: 0 0 220px; }
.lidregel .labels { flex: 1 1 0; }
.lidregel .lid-contact { flex: 0 0 230px; }
.lidregel .toegang { flex: 0 0 120px; text-align: right; }
@media (max-width: 760px) { .lidregel .lid-naam { flex: 1 1 auto; } .lidregel .toegang { flex: 0 0 auto; } }
/* Rood voor modules in opbouw: leesbaar op een donkere én op een lichte zijbalk */
.navknop.nogniet, .navknop.nogniet .icoon { color: color-mix(in srgb, #e5484d 72%, var(--primair-tekst)); }
.platforminfo { margin: 6px 0 10px; padding: 10px 12px; border-radius: var(--r-klein); background: var(--doek); font-size: 14px; }
.platforminfo p { margin: 6px 0 0; white-space: pre-wrap; }
/* Vrijwilligers en shiften */
.moment { margin-bottom: 16px; padding: 18px 20px; }
.moment-kop { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.moment-titel { flex: 1; min-width: 0; }
.moment-titel h2 { margin: 0; font-size: 18px; }
.moment-titel p { margin: 2px 0 0; }
.sdatum { display: inline-grid; place-items: center; min-width: 44px; padding: 4px 6px; border-radius: 10px; background: var(--doek); border: 1px solid var(--lijn); line-height: 1.1; }
.sdatum b { font-size: 17px; }
.sdatum small { font-size: 11px; text-transform: uppercase; color: var(--zacht); }
.sdatum.groot { min-width: 56px; padding: 6px 8px; background: var(--accent); color: var(--accent-tekst); border: 0; }
.sdatum.groot b { font-size: 22px; }
.sdatum.groot small { color: inherit; opacity: .85; }
.shiftlijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.shift { display: grid; grid-template-columns: minmax(130px, 1.1fr) 150px 2fr auto; gap: 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--lijn); }
.shift:last-child { border-bottom: 0; }
.shift.ik { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px; }
.shift-taak b { display: block; }
.shift-taak small { color: var(--zacht); }
.bezetting { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bezetting i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--lijn-sterk); }
.bezetting i.bezet { background: var(--goed); border-color: var(--goed); }
.shift.vol .bezetting i.bezet { background: var(--zacht); border-color: var(--zacht); }
.bezetting small { margin-left: 4px; color: var(--zacht); font-weight: 600; }
.shift-namen { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.naamchip { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--vlak-2); border: 1px solid var(--lijn); }
.naamchip.ik { background: color-mix(in srgb, var(--accent) 18%, var(--vlak)); border-color: transparent; font-weight: 700; }
.shift-acties { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.shiftrij { display: grid; grid-template-columns: 1.6fr 1fr 1fr 90px 36px; gap: 10px; align-items: end; }
.tot-veld { min-width: 0; position: relative; }
.shiftrij:has(.tot-veld), .raster-2:has(.tot-veld) { padding-bottom: 20px; }
.tot-veld input[type=time]:disabled { opacity: .45; }
.tot-einde { position: absolute; left: 2px; top: 100%; display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--zacht); cursor: pointer; white-space: nowrap; }
.tot-einde input { width: auto; height: auto; margin: 0; }
.shiftrij .rondknop { margin-bottom: 18px; color: var(--stil); font-size: 18px; }
.shiftmini { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shiftmini li { display: flex; gap: 12px; align-items: center; }
.shiftmini li b { display: block; }
.shiftmini li small { color: var(--zacht); }
.hulpnodig { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-klein); background: var(--let-op-achter); font-size: 14px; }
.hulpnodig .icoon { width: 18px; height: 18px; flex: none; }
@media (max-width: 760px) {
  .shift { grid-template-columns: 1fr auto; }
  .shift-namen { grid-column: 1 / -1; }
  .bezetting { justify-content: flex-end; }
  .shift-acties { grid-column: 1 / -1; justify-content: flex-start; }
  .shiftrij { grid-template-columns: 1fr 1fr; }
}
.productie-label { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-lees, var(--accent)); margin-bottom: 2px; }
.verborgenshift { margin: 8px 0 0; }
#productiefilter[hidden] { display: none; }
.moment-acties { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.datumrij { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.datumrij input { height: 40px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 0 10px; font: inherit; background: var(--vlak); }
.mijnagenda { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.popup-voet .links { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) { .moment-kop { flex-wrap: wrap; } .moment-acties { width: 100%; justify-content: flex-start; } }
.shift { grid-template-columns: minmax(130px, 1fr) 130px 2fr 240px; } @media (max-width: 760px) { .shift { grid-template-columns: 1fr auto; } }
.vinkjes.kolom { flex-direction: column; align-items: stretch; } .vinkjes.kolom .vinkknop.groot { margin-bottom: 0; }
/* Producties */
.productielijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.productiekaart { width: 100%; text-align: left; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--lijn); cursor: pointer; font: inherit; color: var(--inkt); }
.productiekaart:hover { border-color: var(--accent); }
.pk-kop { display: flex; justify-content: space-between; align-items: center; }
.pk-kop small { color: var(--zacht); }
.pk-titel { font-size: 19px; }
.pk-feiten { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 13.5px; color: var(--zacht); }
.pk-feiten span { display: flex; align-items: center; gap: 6px; }
.pk-feiten .icoon { width: 15px; height: 15px; }
.pst-voorbereiding { background: var(--vlak-2); }
.pst-repetitie { background: var(--let-op-achter); color: var(--let-op); }
.pst-speelt { background: var(--goed-achter); color: var(--goed); }
.pst-afgelopen { background: var(--vlak-2); color: var(--zacht); }
.terugknop { margin-bottom: 8px; padding-left: 0; }
.productie-uitleg { white-space: pre-wrap; margin: -6px 0 18px; max-width: 760px; }
.productie-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.productie-raster + .blok, .productie-raster ~ .blok { margin-bottom: 16px; }
.speellijst { list-style: none; margin: 0; padding: 0; }
.speellijst li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.speellijst li:last-child { border-bottom: 0; }
.speellijst li b { display: block; font-size: 14px; }
.speellijst li small { color: var(--zacht); }
.speellijst li.voorbij { opacity: .55; }
.rollenlijst { list-style: none; margin: 0; padding: 0; }
.rolregel { display: grid; grid-template-columns: 220px 1fr 36px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.rolregel:last-child { border-bottom: 0; }
.rol-naam small { display: block; color: var(--zacht); }
.rol-wie { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 760px) { .productie-raster { grid-template-columns: 1fr; } .rolregel { grid-template-columns: 1fr 36px; } .rol-wie { grid-column: 1 / -1; grid-row: 2; } }
#pr .blok { padding-bottom: 14px; }
#pr .blok > :not(.blok-kop) { margin-left: 20px; margin-right: 20px; }
#pr .blok > button.knop { margin-top: 8px; }
#pr [data-wegspeel], #pr [data-wegrep] { color: var(--stil); font-size: 17px; }
#pr [data-wegspeel]:hover, #pr [data-wegrep]:hover { color: var(--fout); }
/* ------------------------------------------------------------------ gsm: onderbalk met zelf gekozen knoppen */
.onderbalk { display: none; }
@media (max-width: 960px) {
  .onderbalk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; gap: 2px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--primair); color: var(--primair-tekst); border-top: 4px solid var(--accent);
    box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
  .onderbalk button { position: relative; flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; border-radius: 10px; background: none; color: color-mix(in srgb, var(--primair-tekst) 72%, transparent); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px 2px; }
  .onderbalk button span:not(.teller) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .onderbalk .icoon { width: 22px; height: 22px; }
  .onderbalk button.actief { color: var(--primair-tekst); background: color-mix(in srgb, var(--accent) 26%, transparent); }
  .onderbalk button.nogniet { color: color-mix(in srgb, #e5484d 72%, var(--primair-tekst)); }
  .onderbalk .teller { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; }
  .pagina { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .ballon { bottom: calc(84px + env(safe-area-inset-bottom)); right: 14px; }
  dialog .ballon { bottom: 20px; }
}
@media print { .onderbalk { display: none !important; } }
@media (max-width: 960px) { .menuknop { display: none; } .balk { padding-left: 16px; } }
.meer-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.meer-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); font: inherit; font-weight: 600; color: var(--inkt); text-align: left; cursor: pointer; }
.meer-item .icoon { width: 20px; height: 20px; flex: none; color: var(--accent-lees, var(--accent)); }
.meer-item .teller { margin-left: auto; }
.onder-aanpassen { padding: 16px 18px; }
.onder-aanpassen summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.onder-aanpassen summary::-webkit-details-marker { display: none; }
.onder-aanpassen summary::after { content: '▾'; position: absolute; right: 18px; }
.onder-aanpassen summary small { color: var(--zacht); font-weight: 400; }
.onder-kies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 10px; }
.onder-kies-item { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 10px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak); font: inherit; font-size: 14px; cursor: pointer; text-align: left; color: var(--inkt); }
.onder-kies-item .icoon { width: 18px; height: 18px; flex: none; }
.onder-kies-item.gekozen { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--vlak)); font-weight: 700; }
.onder-nr { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; border: 1px solid var(--lijn-sterk); }
.onder-kies-item.gekozen .onder-nr { background: var(--accent); color: var(--accent-tekst); border-color: transparent; }
@media (min-width: 961px) { .meer-lijst, .onder-aanpassen { } }
.onder-aanpassen { position: relative; }
.meer-item.nogniet, .meer-item.nogniet .icoon { color: #c62828; }
/* Gsm: paginakop met titel bovenaan, knoppen eronder in één schuifbare rij (overal) */
@media (max-width: 760px) {
  .pagina-kop { flex-direction: column; align-items: stretch; gap: 12px; }
  .pagina-kop > div:first-child { min-width: 0; }
  .kop-acties { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .kop-acties::-webkit-scrollbar { display: none; }
  .kop-acties > * { flex: none; }
  .kop-acties .knop { height: 38px; padding: 0 12px; font-size: 13.5px; }
  .kop-acties .knop.hoofd { order: -1; }
  .werkbalk { gap: 8px; }
  .werkbalk .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; width: calc(100% + 32px); }
  .werkbalk .filters::-webkit-scrollbar { display: none; }
  .werkbalk .filters > * { flex: none; }
}
@media (max-width: 760px) {
  .segment { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
  .segment button { white-space: nowrap; flex: none; }
  .balk .pad-club { display: none; }
  .balk .pad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 760px) { .segment.klein { display: inline-flex !important; flex-wrap: nowrap !important; } }
.segment.klein { display: inline-flex; flex-wrap: nowrap; } .segment.klein button { white-space: nowrap; }
.castlijst { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; max-width: 640px; }
.castregel { display: grid; grid-template-columns: 220px 1fr 32px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--lijn); }
.castnaam { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.castkop { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); padding-bottom: 2px; }
@media (max-width: 600px) { .castregel { grid-template-columns: 1fr 1fr 32px; } }
.castrol { height: 34px; border: 1px solid transparent; border-radius: var(--r-klein); padding: 0 10px; font: inherit; font-size: 14px; background: var(--doek); color: var(--inkt); min-width: 0; }
.castrol:hover, .castrol:focus { border-color: var(--lijn-sterk); background: var(--vlak); outline: none; }
.castrol:placeholder-shown { font-style: italic; }
.castregel .rondknop { width: 30px; height: 30px; color: var(--stil); font-size: 16px; }
.blok-kop small { color: var(--zacht); margin-left: 8px; margin-right: auto; }
.shiftstand { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--let-op); white-space: nowrap; } .shiftstand .icoon { width: 14px; height: 14px; } .shiftstand.vol { color: var(--goed); } .knop.stil.klein { height: 30px; padding: 0 8px; font-size: 13px; } .speellijst li { gap: 10px; }
.speellijst li > span:first-child { flex: 1; min-width: 0; }
.blok-knoppen { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ------------------------------------------------------------------ lijstmodules, aanwezigheden, tickets (alpha.50) */
.lm-uitleg { margin: -6px 0 14px; max-width: 70ch; }
.lm-lijst { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.lm-kaart { padding: 14px 18px; display: block; width: 100%; text-align: left; font: inherit; color: inherit; }
button.lm-kaart { cursor: pointer; }
button.lm-kaart:hover { border-color: var(--lijn-sterk); }
.lm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lm-titel { font-size: 15.5px; }
.lm-feiten { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 8px 0 0; }
.lm-feiten div { display: flex; gap: 6px; font-size: 13.5px; }
.lm-feiten dt { color: var(--zacht); }
.lm-feiten dd { margin: 0; }
.lm-tekst { margin: 8px 0 0; font-size: 14px; white-space: pre-wrap; color: var(--zacht); }
.lm-inschrijf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.lm-inschrijf .shift-namen { flex: 1 1 200px; }
.lm-som { margin: 0 0 14px; font-size: 14px; }
.lm-dag { font-size: 15px; margin: 18px 0 10px; text-transform: capitalize; }
.lm-st-0 { background: var(--vlak-2); }
.lm-st-1, .lm-st-2 { background: color-mix(in srgb, #2563eb 12%, var(--vlak)); color: #1d4ed8; border-color: color-mix(in srgb, #2563eb 35%, var(--lijn)); }
.lm-st-3, .lm-st-4 { background: var(--goed-achter); color: var(--goed); border-color: color-mix(in srgb, var(--goed) 35%, var(--lijn)); }
.lm-st-5 { background: var(--let-op-achter); color: var(--let-op); }
.filter small { opacity: .7; font-weight: 500; }
.aw-tellers { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: 14px; }
.aw-ja { color: var(--goed); font-weight: 600; }
.aw-nee { color: var(--let-op); font-weight: 600; }
.aw-mijn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.aw-mijn .knoppenrij2 { margin: 0; }
.knop.gevaar-zacht { background: var(--let-op-achter); border-color: var(--let-op); color: var(--let-op); }
.aw-namen { list-style: none; margin: 0; padding: 0; }
.aw-namen li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 0; border-top: 1px solid var(--lijn); }
.aw-namen .knoppenrij2 { margin: 0; align-items: center; }
.tk-kaart small { display: block; margin-top: 6px; }
.tk-balk { display: block; height: 6px; border-radius: 99px; background: var(--vlak-2); margin-top: 10px; overflow: hidden; }
.tk-balk span { display: block; height: 100%; background: var(--accent); }
.tk-cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 18px; margin-bottom: 16px; }
.tk-cijfers b { display: block; font-size: 20px; }
.tk-cijfers small { color: var(--zacht); }
.tk-tarief { display: grid; grid-template-columns: 1fr 120px auto; gap: 0 12px; align-items: end; }
.tk-tarief .rondknop { margin-bottom: 18px; }
.tk-zaalblok { padding: 16px; overflow-x: auto; }
.tk-zaal { display: inline-flex; flex-direction: column; gap: 4px; min-width: max-content; }
.tk-podium { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 6px; padding: 6px; margin-bottom: 10px; }
.tk-rij { display: flex; gap: 4px; align-items: center; }
.tk-rijnaam { width: 22px; text-align: center; font-size: 12px; font-weight: 600; color: var(--zacht); }
.tk-stoel { width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; border-radius: 6px 6px 3px 3px; border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--zacht); padding: 0; font-family: inherit; }
button.tk-stoel { cursor: pointer; }
button.tk-stoel:hover { border-color: var(--accent); }
.tk-stoel.bezet { background: var(--vlak-2); color: transparent; border-color: var(--lijn); }
.tk-stoel.gekozen { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tk-stoel.weg { border-style: dashed; background: transparent; opacity: .35; }
.tk-legende { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.tk-legende .tk-stoel { width: 16px; height: 14px; margin-left: 8px; }
.tk-tabel td { white-space: normal; vertical-align: top; }
@media (max-width: 720px) {
  .tk-cijfers { grid-template-columns: repeat(2, 1fr); }
  .tk-tarief { grid-template-columns: 1fr 90px auto; }
}
.tk-stoel.bezet { background: color-mix(in srgb, var(--inkt) 55%, var(--vlak)); border-color: transparent; }

/* Weekschema (repetities): 7 dagen met eigen uren, en pauzes */
.weekschema { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 6px; background: var(--vlak); }
.weekschema.fout { border-color: var(--fout); }
.wsrij { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; padding: 3px 6px; border-radius: var(--r-klein); }
.wsrij.aan { background: color-mix(in srgb, var(--accent) 10%, var(--vlak)); }
.wsdag { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-size: 14px; }
.wsrij:not(.aan) .wsdag span { color: var(--zacht); }
.wsuren { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zacht); }
.wsuren input { width: 110px; height: 32px; }
.wsrij:not(.aan) .wsuren { opacity: .45; }
.pauzerij { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 0 12px; align-items: end; }
.pauzerij .rondknop { margin-bottom: 18px; }
.pauzes > .knop { margin-bottom: 14px; }
.vinkknop input[type=date] { height: 30px; margin-left: 4px; }
@media (max-width: 600px) { .wsrij { grid-template-columns: 1fr; } .pauzerij { grid-template-columns: 1fr 1fr 32px; } }
.lockeuzes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 2px; }
.groepvak { margin-top: 16px; }
.eenvoudlijst { list-style: none; margin: 0; padding: 0; }
.eenvoudlijst li { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.eenvoudlijst li:last-child { border-bottom: 0; }

/* Zaalplan (tribune, middengang, rijen in/uit verkoop) */
.zp-scroll { overflow-x: auto; padding: 4px 0 8px; }
.zp { --zetel: 24px; display: inline-flex; flex-direction: column; gap: 3px; min-width: max-content; }
.zp-podium { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); background: var(--vlak-2); border: 1px solid var(--lijn-sterk); border-radius: 8px 8px 30px 30px; padding: 7px; margin: 0 26px 10px; }
.zp-podium.onder { border-radius: 30px 30px 8px 8px; margin: 10px 26px 0; }
.zp-zone { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); margin: 8px 0 2px 26px; padding-top: 6px; border-top: 2px solid var(--lijn); }
.zp-zone.tribune { border-top: 3px solid var(--accent); color: var(--inkt); }
.zp-zone small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--zacht); }
.zp-rij { display: flex; gap: 3px; align-items: center; }
.zp-rij.tribune { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent) 0 6px, transparent 6px 12px); border-radius: 6px; }
.zp-rij.uit { opacity: .35; }
.zp-naam { width: 22px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--zacht); flex: none; }
.zp-stoel { width: var(--zetel); height: calc(var(--zetel) - 2px); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--zetel) * .42); border-radius: 6px 6px 3px 3px; border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--zacht); padding: 0; font-family: inherit; line-height: 1; }
.zp-stoel.gang { border-color: transparent; background: transparent; }
button.zp-stoel { cursor: pointer; }
button.zp-stoel:hover { border-color: var(--accent); }
button.zp-stoel.gang { border: 1px dashed var(--lijn); }
.zp-stoel.bezet { background: var(--vlak-2); color: transparent; border-color: var(--lijn); }
.zp-stoel.gekozen { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.zp-stoel.voorbehouden { background: color-mix(in srgb, #8a63d2 18%, var(--vlak)); border-color: #8a63d2; }
.zp-stoel.rolstoel { background: color-mix(in srgb, #2b7bb9 15%, var(--vlak)); border-color: #2b7bb9; }
.zp-legende { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.zp-legende .zp-stoel { --zetel: 18px; width: 18px; height: 16px; }
.zp-staal-tribune { display: inline-block; width: 18px; height: 12px; border-radius: 3px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent) 0 3px, transparent 3px 6px); border: 1px solid var(--lijn); }
.zp-balk { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.zp-balk .veld { flex: 1; min-width: 240px; }
.zp-balk > .knop { margin-bottom: 18px; }
.zp-knoppen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.zp-tabel { border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
.zp-tabel th, .zp-tabel td { padding: 3px 6px; text-align: left; }
.zp-tabel td input:not([type=checkbox]) { height: 30px; }
.zp-tabel td:first-child input { width: 56px; text-align: center; }
.zp-rijen summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
.foutje { color: var(--fout); font-weight: 600; }
.tk-acties { white-space: nowrap; }
.veld select.fout, .veld input.fout { border-color: var(--fout); }
.popup.breed { width: min(1040px, calc(100% - 24px)); }

/* Eigen bevestigingsvenster (vervangt de meldingen van de browser) */
.popup.vraagvenster { width: min(440px, calc(100% - 32px)); }
.vv-lijf { padding: 24px 24px 8px; }
.vv-lijf h2 { font-size: 18px; margin: 0 0 6px; line-height: 1.35; }
.vv-lijf p { color: var(--zacht); font-size: 14px; margin: 0 0 8px; line-height: 1.5; }
.vv-invoer { width: 100%; height: 40px; margin: 8px 0 6px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 0 12px; font: inherit; background: var(--vlak); color: var(--inkt); }
.vv-invoer.fout { border-color: var(--fout); }
.vv-voet { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; }
.knop.gevaar-vol { background: var(--fout); border-color: var(--fout); color: #fff; }
.knop.gevaar-vol:hover { filter: brightness(.93); }
.bestuurlijst { align-items: start; }
.bestuurkaart.niet-getoond { opacity: .6; border-style: dashed; }
.verborgenlabel { display: inline-block; font-size: 11px; font-weight: 600; color: var(--zacht); background: var(--vlak-2); border-radius: 999px; padding: 1px 8px; margin-left: 6px; text-transform: none; letter-spacing: 0; }
details.groepvak { padding: 12px 16px; }
details.groepvak summary { cursor: pointer; font-size: 14px; }
details.groepvak .knoppenrij2 { margin: 10px 0 4px; }
.eenvoudlijst li { grid-template-columns: 1fr auto auto; }
.updatebalk { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; gap: 12px; align-items: center; background: var(--inkt); color: var(--vlak); padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: var(--schaduw-hoog); font-size: 14px; }

/* Taken: termijn vóór een event, voor wie, termijnen koppelen (alpha.54) */
.termijnvak { margin-top: 10px; }
.termijnregel { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.termijnregel svg { width: 15px; height: 15px; flex: none; color: var(--zacht); }
.taakmeta .voorlabel { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--vlak-2); border: 1px solid var(--lijn); color: var(--zacht); white-space: nowrap; }
.koppellijst { margin-top: 10px; display: grid; gap: 8px; }
.koppellijst .themagroep { border: 1px solid var(--lijn); border-radius: var(--r); padding: 4px 10px; }
.koppellijst summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 4px 0; }
.koppellijst ul.kaal { list-style: none; margin: 4px 0 8px; padding: 0 0 0 6px; display: grid; gap: 2px; }
.koppellijst ul.kaal .vinkknop { font-size: 13px; }
@media (max-width: 700px) { .taakmeta .voorlabel { display: none; } }
.koppellijst summary > label { justify-self: start; margin-right: auto; border: 0; background: none; padding-left: 0; }
.koppellijst ul.kaal .vinkknop { border: 0; background: none; padding: 3px 0; min-height: 0; }

/* Bestuur: voorzitter(s) als kaart bovenaan, de andere bestuursleden onder elkaar met hun functie (alpha.55) */
.bestuurlijst + .bestuurrijen { margin-top: 12px; }
.bestuurrijen { list-style: none; margin: 0; padding: 4px 16px; }
.bestuurrij { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.bestuurrij + .bestuurrij { border-top: 1px solid var(--lijn); }
.bestuurrij .avatar.klein { width: 34px; height: 34px; font-size: 12px; flex: none; background: var(--primair); color: var(--primair-tekst); }
.bestuurrij .avatar.leeg-av { background: var(--vlak-2); color: var(--zacht); }
.bestuurrij.niet-getoond { opacity: .6; }
.br-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-tekst b { font-size: 15px; }
.br-functies { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.br-functie { font: inherit; font-size: 12px; font-weight: 700; color: var(--accent-lees, var(--accent)); text-transform: uppercase; letter-spacing: .05em; background: none; border: 0; padding: 0; }
button.br-functie { cursor: pointer; }
button.br-functie:hover, button.br-functie:focus-visible { text-decoration: underline; }
.bestuurkaart .bk-open { cursor: default; }
.bestuurkaart .bk-open:hover { background: none; }
/* ------------------------------------------------------------------ werkgroepen en ploegen (alpha.56) */
.wg-lijst { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.wg { padding: 0; overflow: hidden; }
.wg-kop { display: flex; align-items: center; gap: 10px; padding: 12px 16px 4px; }
.wg-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wg-pijl { display: grid; place-items: center; color: var(--zacht); transition: transform .15s; }
.wg-pijl .icoon { width: 16px; height: 16px; }
.wg.open .wg-pijl { transform: rotate(90deg); }
.wg-titel { display: flex; flex-direction: column; min-width: 0; }
.wg-titel b { font-size: 17px; }
.wg-titel small { color: var(--zacht); font-size: 13px; }
.wg-open .labels { display: flex; gap: 6px; margin-left: 6px; }
.wg-acties { display: flex; align-items: center; gap: 8px; flex: none; }
.wg-acties .knop .icoon { width: 15px; height: 15px; }
.wg-hoofden, .wg-mensen { list-style: none; margin: 0; padding: 0 16px 8px; }
.wg-volg.leeg { width: 98px; }
.wg-mens { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.wg-mensen .wg-mens + .wg-mens { border-top: 1px solid var(--lijn); }
.wg-naam { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wg-naam small { color: var(--zacht); font-size: 12.5px; }
.wg-mens .lid-contact { flex: 0 0 240px; }
.wg-volg { display: flex; gap: 4px; flex: none; }
.wg-weg:hover { color: var(--fout); border-color: var(--fout); background: var(--vlak); }
.wg-lijf { border-top: 1px solid var(--lijn); padding: 10px 16px 16px; background: var(--vlak-2); }
.wg-lijf .wg-mensen { padding: 0 0 10px; }
.wg-lijf .lm-tekst { margin: 4px 0 8px; }
.wg-sub { font-size: 14px; margin: 12px 0 4px; }
.wg-sub small { color: var(--zacht); font-weight: 500; }
.wg-verg { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.wg-verg .linkknop { text-decoration: none; text-align: left; }
@media (max-width: 760px) {
  .wg-knoptekst { display: none; }
  .wg-volg.leeg { display: none; }
  .wg-mens .lid-contact { display: none; }
  .wg-open .labels { display: none; }
}
/* ------------------------------------------------------------------ shiften plannen (alpha.56) */
#spform .segment.klein { margin: 0 0 12px; }
.sp-dag { display: grid; grid-template-columns: 30px 160px 1fr 130px 36px; gap: 10px; align-items: end; }
.sp-dag + .sp-dag { margin-top: 2px; }
.sp-dag > .vinkknop { margin-bottom: 26px; padding: 0; border: 0; background: none; }
.sp-dag .rondknop { margin-bottom: 18px; color: var(--stil); font-size: 18px; }
.sp-dag.uit .veld { opacity: .45; }
.sp-al { grid-column: 2 / -1; margin: -10px 0 8px; }
.sp-rij { padding-bottom: 6px; }
.sp-rij + .sp-rij { border-top: 1px dashed var(--lijn); padding-top: 8px; }
.sp-rijdagen { margin: -8px 0 4px; }
.sp-rijdagen .linkknop { margin-top: 0; }
.sp-rijdagen .vinkjes { margin-top: 6px; }
.sp-sjabloonbewaar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.sp-sjabloonbewaar input[type=text], .sp-sjabloonbewaar #sp-sjnaam { flex: 1 1 200px; height: 38px; }
@media (max-width: 760px) {
  .sp-dag { grid-template-columns: 30px 1fr 1fr 36px; }
  .sp-dag [data-d=onder] { min-width: 0; }
  .sp-dag > label:nth-of-type(3) { grid-column: 2 / -1; grid-row: 2; }
  .sp-al { grid-column: 1 / -1; margin-top: 0; }
}
#sp-schuiflabel { display: flex; width: fit-content; margin-top: 10px; }
#sp-schuiflabel[hidden] { display: none; }
/* Mailkeuze (alpha.57) */
.mailkeuze .mk-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.mailkeuze .mk-kopie { margin: 6px 0 0; }
.mailkeuze .mk-kopie .linkknop { margin-top: 0; }

/* alpha.60 – Vrijwilligers: mails en shiften vanuit activiteiten */
.mailoverzicht textarea { width: 100%; font: inherit; line-height: 1.45; }
.mailoverzicht .veld { margin-top: 10px; }
.mv-persoonlijk { margin-top: 12px; }
.mv-persoonlijk summary { cursor: pointer; font-weight: 600; }
.mv-personen { list-style: none; margin: 8px 0 0; padding: 0; }
.mv-personen li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--lijn); }
#mtform textarea { width: 100%; font: inherit; }
#mtform code { font-size: .85em; background: var(--doek); padding: 1px 4px; border-radius: 4px; }
.lm-shiften { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.lm-shiften > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.lm-shiften .lm-shiftknoppen { display: flex; gap: 8px; flex-wrap: wrap; }

/* Taken aanvullen (takenvragen.js) */
.popup-lijf section.vraagtaak, .vraagtaak { background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 12px; padding: 14px 16px; }
.vraagtaak h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.vraagtaak .omschrijving { white-space: pre-line; margin: 0 0 6px; }
.voorbeeldtabel td.let-op { color: var(--fout, #b42318); font-size: .85em; }

/* Sponsors: logo en formules (alpha.63) */
.lm-kopnaam { flex: 1 1 auto; min-width: 0; }
.lm-logo { flex: 0 0 auto; width: 72px; height: 40px; object-fit: contain; object-position: left center; border-radius: 6px; background: #fff; border: 1px solid var(--lijn); padding: 3px; }
.lm-kop:has(.lm-logo) { align-items: center; justify-content: flex-start; }
.lm-kop:has(.lm-logo) > .rondknop { margin-left: auto; }
.lm-logorij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.lm-logovoorbeeld { display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 70px; border: 1px dashed var(--lijn-sterk); border-radius: 8px; background: #fff; overflow: hidden; }
.lm-logovoorbeeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lm-tegen { display: block; margin-top: 4px; min-height: 1em; }
.net-ingevuld { animation: netIngevuld .9s ease-out; }
@keyframes netIngevuld { from { background: color-mix(in srgb, var(--goed) 22%, var(--vlak)); } to { background: var(--vlak); } }
.sf-lijst { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.sf-rij { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
.sf-boven { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px auto auto; gap: 8px; align-items: center; }
.sf-krijgt { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-krijgt .vinkknop { padding: 4px 10px; font-size: 13px; }
.sf-bedrag { display: flex; align-items: center; gap: 4px; }
.sf-bedrag span { color: var(--zacht); }
.sf-bedrag input { width: 100%; }
.sf-vrij { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zacht); }
.sf-vrij input { width: 64px; height: 40px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 0 8px; font: inherit; background: var(--vlak); color: inherit; }
@media (max-width: 640px) { .sf-boven { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'naam volg weg' 'bedrag vrij vrij'; } .sf-boven .sf-naam { grid-area: naam; } .sf-boven .lb-volg { grid-area: volg; } .sf-boven .lb-weg { grid-area: weg; } .sf-boven .sf-bedrag { grid-area: bedrag; } .sf-boven .sf-vrij { grid-area: vrij; } }
.sf-naam, .sf-tegen, .sf-bedrag input { height: 40px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 0 10px; font: inherit; background: var(--vlak); color: inherit; min-width: 0; }

/* ------------------------------------------------------------------ Rechten */
.rechtencats { margin-bottom: 14px; }
.rechtencats .filter small { opacity: .7; font-weight: 500; margin-left: 2px; }
.rechtenvak { margin-bottom: 20px; }
.rechtenvak .blok-kop { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rechtenwie { padding: 0 20px 8px; }
.rechtenwie summary { cursor: pointer; font-size: 13px; color: var(--zacht); }
.rechtenlijst { list-style: none; margin: 0; padding: 0 20px; }
.rechtenlijst li { border-bottom: 1px solid var(--lijn); }
.rechtenlijst li:last-child { border-bottom: 0; }
.rechtenrij { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; cursor: pointer; }
.rechtenrij > .icoon { width: 20px; height: 20px; flex: none; color: var(--accent-lees, var(--accent)); }
.rechtenrij .rr-naam { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rechtenrij .knoppenrij2 { margin: 0; flex-wrap: nowrap; }
.rechtenvoet { padding: 10px 20px 16px; margin: 0; }
.rechtenvak .eenvoudlijst { padding: 0 20px 10px; }
.rechtenvak .eenvoudlijst li { grid-template-columns: minmax(120px, 1fr) 2fr auto; }
.uitzchips { display: flex; flex-wrap: wrap; gap: 4px; }
.uitzchip { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--vlak-2); }
.uitzchip.wel { color: var(--ok, #1b7f3b); } .uitzchip.niet { color: var(--fout); }
#u-lijst { padding: 0; margin-top: 8px; }
@media (max-width: 760px) {
  .rechtenvak .eenvoudlijst li { grid-template-columns: 1fr auto; } .uitzchips { grid-column: 1 / -1; grid-row: 2; }
  #u-lijst .rechtenrij { flex-wrap: wrap; } #u-lijst .rechtenrij .knoppenrij2 { width: 100%; padding-left: 32px; }
}

/* Profielfoto (profielfoto.js) */
.avatar.met-foto { padding: 0; overflow: hidden; background: var(--vlak-2); }
.avatar.met-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.fotovenster { width: min(460px, calc(100% - 24px)); }
.fv-midden { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 4px; }
.fv-vak { position: relative; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: var(--vlak-2); touch-action: none; outline-offset: 4px; }
.fv-vak.actief { cursor: grab; box-shadow: 0 0 0 3px var(--primair); }
.fv-vak.actief:active { cursor: grabbing; }
.fv-vak canvas { width: 100%; height: 100%; display: block; }
.fv-leeg { position: absolute; inset: 0; display: grid; place-items: center; background: var(--op); color: var(--primair); font-size: 64px; font-weight: 800; }
.fv-leeg img { width: 100%; height: 100%; object-fit: cover; }
.fv-leeg[hidden] { display: none; }
.fv-zoom { display: flex; align-items: center; gap: 10px; width: 240px; font-size: 13px; color: var(--zacht); }
.fv-zoom input { flex: 1; }
.fv-zoom[hidden] { display: none; }
.fv-knoppen { justify-content: center; flex-wrap: wrap; padding: 12px 0 18px; }
.ik-knop { all: unset; display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: var(--r, 10px); flex: 1; min-width: 0; }
.ik-knop:focus-visible { outline: 2px solid var(--primair); outline-offset: 2px; }
.ik-knop .avatar { position: relative; }
.ik-knop:hover .avatar { box-shadow: 0 0 0 2px var(--primair); }
.foto-wijzig { all: unset; cursor: pointer; border-radius: 50%; position: relative; }
.foto-wijzig:hover .avatar, .foto-wijzig:focus-visible .avatar { box-shadow: 0 0 0 3px var(--primair); }
.foto-wijzig::after { content: '✎'; position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--vlak); color: var(--inkt); font-size: 11px; display: grid; place-items: center; box-shadow: var(--schaduw, 0 1px 3px rgba(0,0,0,.2)); }
.foto-hint { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.foto-hint p { flex: 1; margin: 0; }
.foto-hint .knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.meer-item .avatar.klein { width: 24px; height: 24px; font-size: 10px; }

/* Evenement (thema J) */
.ev-keuze { min-width: min(420px, 100%); margin: 0; }
.ev-start { margin: 0 0 12px; }
.ev-tabs { margin-bottom: 16px; }
.ev-tabs small { color: var(--zacht); font-weight: 400; margin-left: 4px; }
.ev-dag { padding: 0; margin-bottom: 14px; overflow: hidden; }
.ev-dagkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--lijn); }
.ev-dagkop h2 { font-size: 15px; margin: 0; }
#ev-acties { flex-wrap: wrap; }
.ev-dagkop .rechts { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-d { display: inline-block; min-width: 40px; padding: 1px 7px; margin-right: 6px; border-radius: 6px; background: var(--vlak-2); border: 1px solid var(--lijn); font-size: 13px; text-align: center; text-transform: none; }
.ev-lijst { list-style: none; margin: 0; padding: 0; }
.ev-lijst li + li { border-top: 1px solid var(--lijn); }
.ev-regel { display: grid; grid-template-columns: 110px 1fr; gap: 12px; width: 100%; padding: 10px 16px; text-align: left; font: inherit; color: inherit; background: none; border: 0; }
button.ev-regel { cursor: pointer; } button.ev-regel:hover { background: var(--vlak-2); }
.ev-uur { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ev-wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-mat { display: flex; align-items: center; gap: 4px; color: var(--zacht); }
.ev-mat svg { width: 14px; height: 14px; flex: none; }
.ev-dagplus { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 20px; }
.ev-oudbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ev-oudbalk p { margin: 0; flex: 1 1 300px; }
@media (max-width: 760px) { .ev-regel { grid-template-columns: 1fr; gap: 2px; } .ev-uur { font-size: 13px; color: var(--zacht); } }

/* Evenement bezetting (thema J) */
.ev-bez { display: flex; align-items: center; gap: 4px; color: var(--zacht); }
.ev-bez.vol { color: var(--goed); }
.ev-bez svg { width: 14px; height: 14px; flex: none; }
.foto-hint .avatar:not(.met-foto) { width: 44px; height: 44px; font-size: 15px; background: var(--primair); color: var(--primair-tekst); }

/* Contacten aanvullen */
.cv-lid { border-top: 1px solid var(--lijn); padding: 10px 0; }
.cv-naam { margin-bottom: 6px; }
.cv-veld { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 4px 4px; margin: 0; cursor: pointer; font-size: 14px; }
.cv-label { width: 110px; color: var(--zacht); }
.cv-waarde { font-weight: 600; }
.cv-veld select { font: inherit; padding: 4px 8px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak); }
.cv-verschil .cv-label::after { content: ' ≠'; color: #c2700a; font-weight: 700; }
.cv-verschil .cv-waarde { color: #c2700a; }
.cv-kop { margin: 18px 0 4px; font-size: 15px; }
.uitleglijst { margin: 8px 0 0 18px; padding: 0; line-height: 1.6; }
kbd { font: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--lijn-sterk); border-radius: 4px; background: var(--vlak-2); }
/* Lidgeld zonder tarieven: bedrag en 'betaald' op dezelfde hoogte */
.raster-2.lg-rij { align-items: end; }
.raster-2.lg-rij .vinkknop.groot { justify-self: start; }
/* Lijstmodules: twee velden naast elkaar staan altijd op dezelfde hoogte, ook als een label over twee regels loopt */
.raster-2.lm-paar { align-items: end; }
/* Activiteit over meerdere dagen */
.lm-dagen { margin: -4px 0 18px; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: var(--vlak-2); }
.lm-dagen .vinkjes { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-daglijst { list-style: none; margin: 12px 0 6px; padding: 0; display: grid; gap: 6px; }
.lm-daglijst li { display: flex; align-items: center; gap: 8px; }
.lm-dagnaam { width: 110px; font-weight: 600; font-size: 13.5px; }
.lm-daglijst input[type=time] { width: 120px; }
.lm-heledag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-left: 6px; cursor: pointer; }
.lm-niets[hidden] { display: none; }
.lm-daglijst li { flex-wrap: wrap; }
.pk-alles { border-bottom: 1px solid var(--lijn); border-radius: 6px 6px 0 0; margin-bottom: 4px; color: var(--accent-lees, var(--inkt)); font-weight: 700; }
.pk-alles[hidden] { display: none; }
.castregel.met-volg { grid-template-columns: 220px 1fr auto 32px; }
.castvolg { display: inline-flex; gap: 4px; }
.castvolg .rondknop { width: 28px; height: 28px; font-size: 14px; }
@media (max-width: 600px) { .castregel.met-volg { grid-template-columns: 1fr 1fr auto 32px; } }
.productie-raster:has(> section.blok:only-of-type) { grid-template-columns: 1fr; }
/* Aanwezigheden: rooster */
.aw-kern { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.aw-groepkeuze { display: flex; align-items: center; gap: 10px; margin: 0; }
.aw-groepkeuze span { font-weight: 600; font-size: 13.5px; }
.aw-roosterwrap { overflow-x: auto; padding: 0; }
.aw-rooster { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.aw-rooster th, .aw-rooster td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.aw-rooster thead th { font-weight: 600; color: var(--zacht); vertical-align: bottom; }
.aw-rooster thead th span, .aw-rooster tfoot td b { display: block; }
.aw-rooster thead th small, .aw-rooster tfoot td small { display: block; font-weight: 400; color: var(--stil); font-size: 11px; }
.aw-rooster thead th.voorbij { opacity: .65; }
.aw-rooster thead th.vandaag { color: var(--accent-lees, var(--inkt)); }
.aw-naamkol { position: sticky; left: 0; z-index: 1; background: var(--vlak); text-align: left !important; padding-left: 14px !important; padding-right: 12px !important; font-weight: 600; min-width: 150px; }
.aw-pctkol { position: sticky; right: 0; background: var(--vlak); min-width: 140px; text-align: left !important; padding-right: 14px !important; }
.aw-pctkol small { display: block; font-size: 11px; }
.aw-rooster tfoot th, .aw-rooster tfoot td { border-bottom: 0; background: var(--vlak-2); }
.aw-cel { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--stil); font: inherit; font-weight: 700; cursor: pointer; }
.aw-cel.aanwezig { background: color-mix(in srgb, var(--goed) 18%, var(--vlak)); border-color: color-mix(in srgb, var(--goed) 50%, var(--vlak)); color: var(--goed); }
.aw-cel.afwezig { background: color-mix(in srgb, var(--let-op) 15%, var(--vlak)); border-color: color-mix(in srgb, var(--let-op) 45%, var(--vlak)); color: var(--let-op); }
.aw-balk { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: var(--vlak-2); border: 1px solid var(--lijn); vertical-align: middle; margin-right: 8px; overflow: hidden; }
.aw-balk span { display: block; height: 100%; background: var(--goed); }
.aw-cel.vooraf { opacity: .55; border-style: dashed; }
.filter.vooraf[aria-pressed=true] { opacity: .65; }
.aw-werkwijze { margin: 0 0 12px; }
.aw-roosterwrap + p, .werkbalk .aw-werkwijze { flex-basis: 100%; }
.aw-cel { position: relative; }
.aw-cel.aangeduid::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent var(--accent) transparent transparent; border-top-right-radius: 7px; }
.aw-door { color: var(--let-op); }
.aw-zelf { color: var(--stil); }
.aw-mijnstat { padding: 14px 18px; margin-bottom: 14px; }
.aw-mijnstat h2 { font-size: 15px; margin: 0 0 8px; }
.aw-statrij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 14px; }
.aw-statrij b { font-size: 18px; margin-right: 4px; }
.aw-statpct { display: inline-flex; align-items: center; gap: 4px; color: var(--zacht); }
.aw-statpct b { font-size: 14px; color: var(--inkt); }
.aw-keuzes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.aw-keuze { width: 100%; text-align: left; font: inherit; color: inherit; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.aw-keuze:hover { border-color: var(--accent); }
.aw-keuzenaam { display: flex; align-items: center; gap: 8px; font-size: 15.5px; }
.aw-keuzenaam svg { width: 18px; height: 18px; color: var(--accent-lees, var(--accent)); }
.aw-kieshint { margin: 0 0 12px; }
.aw-terug { display: inline-block; margin: 0 0 12px; }
/* Bezoekers */
.bz-kern { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; }
.bz-grafiek { padding: 14px 18px; margin-bottom: 14px; }
.bz-staven { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 120px; align-items: end; padding-bottom: 18px; }
.bz-staaf { position: relative; height: 100%; display: flex; align-items: flex-end; }
.bz-staaf > span { display: block; width: 100%; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; }
.bz-staaf small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--stil); white-space: nowrap; margin-top: 3px; }
.bz-seg { grid-template-columns: repeat(2, 1fr); margin: 0; }
.bz-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.bz-tabel th { text-align: left; font-size: 12px; color: var(--zacht); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--lijn); }
.bz-tabel td { padding: 9px 14px; border-bottom: 1px solid var(--lijn); }
.bz-tabel tr:last-child td { border-bottom: 0; }
.bz-nooit { padding: 0 18px 16px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
@media (max-width: 600px) { .bz-pc { display: none; } }
.bz-sub { padding: 0 18px; margin: 4px 0 6px; }
/* Documenten en links */
.doclinks { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.doclinks li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.doclinks li:last-child { border-bottom: 0; }
.doclinks a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-lees, var(--inkt)); font-weight: 600; text-decoration: none; min-width: 0; }
.doclinks a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doclinks a:hover span { text-decoration: underline; }
.doclinks svg { width: 16px; height: 16px; flex: none; }
.doc-soort { color: var(--stil); font-size: 12px; white-space: nowrap; }
.doc-groep { padding: 0 20px 8px; }
.doc-groep h3 { font-size: 13px; color: var(--zacht); margin: 6px 0 0; }
.dl-rij { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px; align-items: end; }
.dl-knoppen { display: inline-flex; gap: 4px; margin-bottom: 18px; }
@media (max-width: 600px) { .dl-rij { grid-template-columns: 1fr; } .dl-knoppen { margin-top: -10px; } }

/* Takenpakketten (alpha.100) */
.pakketlijst { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pakketregel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--lijn, #e5e2dc); border-radius: 12px; }
.pakketregel .tk-tekst { display: flex; flex-direction: column; }
.pakketregel .tk-tekst small { color: var(--zacht, #6b6b6b); }
.pakketkeuze li { padding: 6px 0; }
.vinkregel { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: 100%; }
.vinkregel input { margin-top: 4px; flex: none; }
.pakketkeuze li.zacht .vinkregel { cursor: default; }
@media (max-width: 640px) { .pakketregel { flex-direction: column; align-items: stretch; } }
.zp-podium.midden { border-radius: 8px; margin: 12px 26px; padding: 22px 7px; }
/* Eigen adres van een vereniging (alpha.105) */
.woordmerk .vast-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px; }
/* Event bij elke taak zichtbaar (alpha.107) */
.taakmeta .eventlabel { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--vlak-2); border: 1px solid var(--lijn-sterk, var(--lijn)); color: var(--inkt); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.taakmeta .eventlabel svg { width: 12px; height: 12px; flex: none; }
@media (max-width: 700px) { .taakmeta .eventlabel { max-width: 130px; } }
/* Taken op deadline (alpha.109) */
.segment.tabs5 { display: inline-grid; grid-template-columns: repeat(5, auto); margin: 0; }
.segment.tabs5 button { padding: 0 14px; white-space: nowrap; }
@media (max-width: 760px) { .segment.tabs5 { grid-template-columns: repeat(3, 1fr); width: 100%; } .segment.tabs5 button { padding: 0 6px; } }
.datumgroep { margin-bottom: 14px; padding-top: 4px; }
.datumkop { font-size: 15px; padding: 12px 20px 4px; margin: 0; }
.datumkop.te-laat { color: var(--fout, #b42318); }
.datumkop.dringend { color: var(--let-op, #a15c07); }
/* Gsm (alpha.112): geen bovenbalk meer – de paginatitel staat al bovenaan de pagina, navigeren gebeurt met de onderbalk */
@media (max-width: 760px) { .balk { display: none !important; } .pagina { padding-top: 18px; } }
/* Brede inhoud past altijd in het scherm (alpha.117): niets valt rechts weg */
.hoofd { min-width: 0; }
.pagina-kop > div:first-child { min-width: 0; flex: 1 1 260px; }
.pagina-kop .kop-acties { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
/* alpha.138 – gsm: titel niet 260px hoog (flex-basis werkt in kolomrichting als hoogte) en knoppenrij links laten beginnen, zodat de eerste knop (bv. Shiften plannen) niet weg valt */
@media (max-width: 760px) {
  .pagina-kop { margin-bottom: 18px; }
  .pagina-kop > div:first-child { flex: none; }
  .pagina-kop .kop-acties { flex: none; justify-content: flex-start; }
}
.taakmeta { flex: 0 1 auto; min-width: 0; }
.taakmeta .wie { flex: 0 1 auto; min-width: 0; max-width: 200px; }
.taakmeta .eventlabel { flex: 0 1 auto; min-width: 0; max-width: 190px; }
.taakmeta .deadline { white-space: nowrap; flex: none; }
.taak-hoofd .statuskeuze, .taak-hoofd .rondknop { flex: none; }
@media (max-width: 1250px) { .taakmeta .wie { max-width: 140px; } .taakmeta .eventlabel { max-width: 150px; } }
/* Taakregels in vaste kolommen (alpha.118): event, verantwoordelijke en deadline staan onder elkaar */
.taakmeta { display: grid; grid-template-columns: 200px 210px 104px; align-items: center; gap: 14px; flex: none; }
.taakmeta .tm-labels { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.taakmeta .eventlabel { max-width: 100%; }
.taakmeta .eventlabel .tm-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.taakmeta .wie { max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taakmeta .tm-dl { text-align: right; white-space: nowrap; }
@media (max-width: 1250px) { .taakmeta { grid-template-columns: 150px 150px 96px; } }
@media (max-width: 760px) { .taakmeta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; } }
.taaktitel .label { font-size: 11.5px; font-weight: 500; color: var(--zacht); margin-left: 8px; }
/* Dashboard (alpha.119): rechterkolom blijft binnen het scherm, lange links worden ingekort */
.start > div, .start > section { min-width: 0; }
.start > div { grid-template-columns: minmax(0, 1fr); }
.doclinks li { min-width: 0; }
.doclinks a { flex: 1 1 auto; }
.doclinks .doc-soort { flex: none; }
#shiftvak > p.zacht { padding: 0 20px; margin: 0 0 10px; }
.start .doclinks a span { white-space: normal; }
/* Dashboard (alpha.121): vaste indeling in twee kolommen */
.dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-links, .dash-rechts { display: grid; gap: 20px; min-width: 0; align-content: start; }
.dash .doclinks a span { white-space: normal; }
@media (max-width: 960px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.dash-kies { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; gap: 6px; }
.dash-kies li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 1px solid var(--lijn); border-radius: 10px; }
#meldbalk:empty { display: none; }
.meldbalk { display: grid; gap: 8px; margin-bottom: 18px; }
.meldbalk .melditem { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--vlak, #fff)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.meldbalk .melditem.dringend { background: #fdecea; border-color: #f3b1aa; }
.meldbalk .melditem p { margin: 0; flex: 1; }
.meldbalk .melditem svg { width: 20px; height: 20px; flex: none; }
/* Aanwezigheden: uiterste meldtijd (alpha.121) */
.aw-nietgemeld { color: #b42318; font-weight: 600; }
.aw-tellers .aw-nietgemeld { font-weight: 700; }
.aw-cel.nietgemeld { background: #fdecea; color: #b42318; font-weight: 800; border-color: #f3b1aa; }
.aw-cel.laat { box-shadow: inset 0 0 0 2px #e5484d; }
/* Opmerkingen als gesprek + platformbeheer (alpha.121) */
.gesprek { display: grid; gap: 8px; margin: 10px 0; }
.bericht-b { max-width: 78%; padding: 8px 12px; border-radius: 12px; background: var(--vlak-2); border: 1px solid var(--lijn); }
.bericht-b.eigen { margin-left: auto; background: color-mix(in srgb, var(--accent) 9%, var(--vlak, #fff)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.bericht-b b { font-size: 13px; } .bericht-b small { color: var(--zacht); margin-left: 8px; font-size: 12px; }
.bericht-b p { margin: 4px 0 0; white-space: pre-wrap; }
.gesprek-nieuw { display: flex; gap: 8px; align-items: flex-end; margin: 6px 0 10px; }
.gesprek-nieuw textarea { flex: 1; min-height: 44px; }
.opm.nieuwbericht { border-left-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.mijnopm li.nieuw { border-color: var(--accent); }
.opm-notitie textarea { width: 100%; margin-top: 6px; }
.platform-overzicht { margin-bottom: 16px; }
.platform-lijst { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pv-rij { width: 100%; text-align: left; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak, #fff); cursor: pointer; font: inherit; color: inherit; }
.pv-rij:hover { border-color: var(--accent); }
.pv-tel { font-size: 13px; }
@media (max-width: 760px) { .bericht-b { max-width: 92%; } .gesprek-nieuw { flex-direction: column; align-items: stretch; } }
.meldbalk { gap: 6px; }
.meldbalk .melditem { padding: 7px 8px 7px 14px; background: var(--vlak-2); border-color: var(--lijn); font-size: 14px; }
.meldbalk .melditem.dringend { background: #fdecea; border-color: #f3b1aa; }
.meldbalk .melditem .knop { padding: 6px 12px; min-height: 0; height: auto; }
.gesprek-nieuw textarea, .opm-notitie textarea { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--lijn-sterk, var(--lijn)); background: var(--vlak, #fff); resize: vertical; }

/* Vrijwilligers – rooster per event (alpha.123, layout alpha.125) */
.rooster-event { padding: 16px 18px; margin-bottom: 16px; }
.rooster-event .rs-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rooster-event .rs-kop h2 { margin: 0; }
.rs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lijn); border-radius: 10px; }
table.rooster { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .9rem; table-layout: fixed; min-width: calc(170px + var(--rs-n, 4) * 170px); }
table.rooster th, table.rooster td { border-bottom: 1px solid var(--lijn); border-left: 1px solid var(--lijn); padding: 8px 10px; vertical-align: top; text-align: left; }
table.rooster tr > :first-child { border-left: 0; }
table.rooster tbody tr:last-child > * { border-bottom: 0; }
table.rooster thead th { background: var(--vlak-2); font-weight: 600; }
table.rooster thead th small { display: block; font-weight: normal; color: var(--zacht); }
table.rooster thead th:first-child, table.rooster tbody th { width: 170px; overflow-wrap: break-word; hyphens: auto; }
table.rooster tbody th { position: sticky; left: 0; background: var(--vlak); z-index: 1; }
table.rooster td { padding: 6px; }
.rs-shift { padding: 6px 8px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.rs-shift.rs-open { background: color-mix(in srgb, var(--accent) 6%, var(--vlak)); }
.rs-shift.rs-vol { background: var(--vlak-2); }
.rs-shift.rs-ik { box-shadow: inset 3px 0 0 var(--accent); }
.rs-uur { font-size: .85rem; font-variant-numeric: tabular-nums; }
table.rooster td.rs-leeg { color: var(--stil); text-align: center; vertical-align: middle; }
.rs-cel { display: flex; flex-direction: column; gap: 6px; }
.rs-boven { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 26px; }
.rs-boven .rondknop.klein { width: 26px; height: 26px; flex: none; }
.rs-namen { display: flex; flex-wrap: wrap; gap: 4px; }
.rs-onder { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rs-vrij { font-size: .8rem; font-weight: 600; color: var(--accent); }

/* Werkgroepen/ploegen – tegeltjes bovenaan (alpha.126) */
.wg-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.wg-tegel { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-height: 78px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r, 10px); box-shadow: var(--schaduw); min-width: 0; }
.wg-tegel b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.wg-tegel small { color: var(--zacht); font-size: 12.5px; }
.wg-tegel .wg-tegel-hoofd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-tegel.zonder .wg-tegel-hoofd { color: var(--let-op, #b26b00); }
.wg-tegel:hover { border-color: var(--lijn-sterk); }
.wg-tegel:focus-visible { outline: 2px solid var(--primair); outline-offset: 2px; }
.wg-tegel[aria-pressed="true"] { border-color: var(--primair); box-shadow: inset 0 0 0 1px var(--primair), var(--schaduw); }
.wg-tegel.alle { background: var(--vlak-2); }
@media (max-width: 560px) { .wg-tegels { grid-template-columns: 1fr 1fr; } }

/* Werkgroepen – functie binnen de groep (alpha.127) */
.wg-naam .wg-rol { color: var(--primair); font-weight: 600; }
.wg-naam .wg-rolknop { align-self: flex-start; font-size: 12px; margin-top: 1px; opacity: .75; }
.wg-naam .wg-rolknop:hover { opacity: 1; }

/* Route-knopje bij een adres (alpha.129) */
.routeknop { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 10px; border: 1px solid var(--lijn-sterk); border-radius: 999px; background: var(--vlak); color: var(--accent-lees, var(--accent)); font-size: 13px; font-weight: 600; line-height: 1.6; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.routeknop:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
.routeknop .icoon { width: 14px; height: 14px; }
.adres-route { margin: 6px 0 14px; }
.adres-route .routeknop { margin-left: 0; }
@media print { .routeknop { display: none !important; } }
@media (max-width: 700px) {
  table.rooster { min-width: calc(110px + var(--rs-n, 4) * 150px); }
  table.rooster thead th:first-child, table.rooster tbody th { width: 110px; }
}
.takenkort .tk-meer { justify-content: center; padding-top: 6px; }

/* ------------------------------------------------------------------ Handleiding (alpha.140) */
.hulpknop { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 10px; vertical-align: middle; padding: 0;
  border: 1.5px solid var(--lijn-sterk); border-radius: 999px; background: var(--vlak); color: var(--zacht);
  font: 800 14px/1 var(--letter); text-transform: none; letter-spacing: 0; cursor: pointer; }
.hulpknop:hover, .hulpknop:focus-visible { border-color: var(--accent); color: var(--accent-lees, var(--accent)); }
.hl-zoek { display: flex; align-items: center; gap: 8px; min-width: 0; width: 280px; max-width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--lijn-sterk); border-radius: var(--r); background: var(--vlak); }
.hl-zoek .icoon { width: 18px; height: 18px; flex: none; color: var(--zacht); }
.hl-zoek input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--inkt); }
.hl { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.hl-inhoud { position: sticky; top: 16px; padding: 14px 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.hl-inhoud-kop { font-weight: 750; margin-bottom: 6px; }
.hl-inhoud ol { margin: 0; padding-left: 20px; }
.hl-inhoud li { margin: 3px 0; }
.hl-inhoud a { color: var(--inkt); text-decoration: none; }
.hl-inhoud a:hover { color: var(--accent-lees, var(--accent)); text-decoration: underline; }
.hl-tekst { min-width: 0; max-width: 820px; }
.hl-hoofdstuk { padding: 20px 24px; margin-bottom: 16px; scroll-margin-top: 16px; line-height: 1.55; }
.hl-hoofdstuk.gekozen { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent), var(--schaduw); }
.hl-hoofdstuk h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.hl-hoofdstuk h3 { font-size: 16.5px; font-weight: 750; margin: 18px 0 6px; }
.hl-hoofdstuk h4 { font-size: 15px; font-weight: 700; margin: 12px 0 4px; }
.hl-hoofdstuk p, .hl-hoofdstuk ul, .hl-hoofdstuk ol, .hl-hoofdstuk dl { margin: 6px 0; }
.hl-hoofdstuk ul, .hl-hoofdstuk ol { padding-left: 22px; }
.hl-hoofdstuk li { margin: 3px 0; }
.hl-hoofdstuk dt { font-weight: 700; margin-top: 8px; }
.hl-hoofdstuk dd { margin: 2px 0 0 0; }
.hl-hoofdstuk [data-rol] { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--lijn-sterk); background: var(--vlak-2); border-radius: 0 var(--r-klein) var(--r-klein) 0; }
.hl-hoofdstuk [data-rol]::before { display: block; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); margin-bottom: 2px; }
.hl-hoofdstuk [data-rol="bestuur"]::before { content: "Voor bestuur en beheerder"; }
.hl-hoofdstuk [data-rol="beheerder"]::before { content: "Enkel voor de beheerder"; }
.hl-hoofdstuk [data-rol] [data-rol] { border: 0; padding: 0; background: none; }
.hl-hoofdstuk [data-rol] [data-rol]::before { display: none; }
.hl-intro { font-size: 15.5px; color: var(--zacht); }
.hl-tip, .hl-gsm { padding: 8px 12px; border-radius: var(--r-klein); background: var(--let-op-achter); }
.hl-tip::before { content: "Tip: "; font-weight: 750; }
.hl-gsm { background: var(--secundair); color: var(--secundair-tekst); }
.hl-gsm::before { content: "Op gsm: "; font-weight: 750; }
.hl-knop { display: inline-block; padding: 0 6px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak-2); font-weight: 650; font-size: .94em; white-space: nowrap; }
.hl-melding { padding: 12px 16px; margin-bottom: 16px; }
.hl-versie { margin: 8px 0 24px; }
@media (max-width: 960px) {
  .hl { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hl-inhoud { position: static; max-height: none; }
  .hl-zoek { width: 100%; }
  .hl-hoofdstuk { padding: 16px; }
  .hulpknop { width: 24px; height: 24px; font-size: 13px; margin-left: 8px; }
}
@media print { .hulpknop, .hl-zoek, .hl-inhoud { display: none !important; } .hl { display: block; } }
.functierechten-lijf { padding: 0 20px 16px; }
.functierechten-lijf h3 { font-size: 15.5px; font-weight: 750; margin: 14px 0 2px; }
.functierechten-lijf h3:first-child { margin-top: 0; }
.functierechten li { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.functierechten li b { min-width: 180px; }
/* Meerdere verenigingen (alpha.141): snel wisselen via logo/clubnaam, teller bij de andere verenigingen */
.club-wissel { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; position: relative; }
.club-wissel:hover { background: color-mix(in srgb, var(--op) 8%, transparent); }
.club-wissel > .icoon { width: 16px; height: 16px; flex: none; opacity: 0.6; margin-left: auto; }
.club-wissel .teller { margin-left: auto; }
.club-wissel .teller:not([hidden]) + .icoon { margin-left: 4px; }
.club-wissel > span:nth-child(2) { min-width: 0; }
.wisselmenu { margin: 0 12px 10px; padding: 6px; border-radius: 12px; background: var(--vlak); color: var(--inkt); box-shadow: var(--schaduw-hoog); }
.wisselmenu > p { font-size: 11.5px; font-weight: 600; color: var(--zacht); padding: 4px 8px 6px; margin: 0; }
.wissel-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wissel-item:hover { background: var(--vlak-2); }
.wissel-item .monogram { width: 32px; height: 32px; border-radius: 8px; font-size: 11px; }
.wissel-item > span:nth-child(2) { flex: 1; min-width: 0; }
.wissel-item b { display: block; font-size: 14px; line-height: 1.2; }
.wissel-item small { display: block; font-size: 12px; color: var(--zacht); margin-top: 2px; }
.meer-verenigingen { margin-bottom: 18px; }
.meer-verenigingen h2 { font-size: 13px; font-weight: 700; color: var(--zacht); margin: 0 0 8px; }
.meer-verenigingen #wissellijst2 { display: grid; gap: 8px; }
.meer-verenigingen .wissel-item { min-height: 56px; padding: 10px 14px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); }
#meldbalk-andere:empty { display: none; }
.meldbalk .melditem.andere .monogram { width: 28px; height: 28px; border-radius: 7px; font-size: 10px; }
.keuzelijst small { display: block; font-size: 12.5px; margin-top: 2px; }
.keuzelijst button > span:nth-child(2) { flex: 1; min-width: 0; }
.keuzelijst [data-teller] .teller { margin-left: 0; }
.wissel-item .monogram, .melditem.andere .monogram, .keuzelijst .monogram { background: var(--primair); color: var(--primair-tekst); }
.wissel-item .monogram:has(img), .melditem.andere .monogram:has(img) { background: #fff; }

/* ------------------------------------------------------------------ PRIVACY (alpha.142) */
.pv-tekst { font-size: 14.5px; line-height: 1.55; max-width: 78ch; }
.pv-tekst h3 { font-size: 15px; margin: 18px 0 6px; }
.pv-tekst h3:first-child { margin-top: 0; }
.pv-tekst p, .pv-tekst li { margin: 0 0 6px; }
.pv-tekst ul, .pv-tekst ol { padding-left: 20px; margin: 0 0 8px; }
.pv-tekst .gegevens { margin: 4px 0 10px; }
.mg-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.mg-raster .blok { min-width: 0; }
#mg form h3, #mg .blok h3 { font-size: 15px; margin: 16px 0 8px; }
.pv-lijst, .pv-acties, .pv-verzoeken, .pv-jong { list-style: none; margin: 0; padding: 0; }
.pv-lijst li + li, .pv-acties li + li { border-top: 1px solid var(--lijn); }
.pv-schakel { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 0; cursor: pointer; }
.pv-schakel > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pv-schakel small, .pv-acties small, .pv-rij small { display: block; font-size: 13px; color: var(--zacht); }
.pv-schakel.vast { cursor: default; opacity: 0.75; }
.pv-acties li { display: grid; gap: 4px; padding: 12px 0; justify-items: start; }
.pv-verzoeken li { padding: 10px 0; border-top: 1px solid var(--lijn); font-size: 14px; }
.pv-verzoeken li small { display: block; color: var(--zacht); margin-top: 2px; }
.pv-verzoeken.groot li { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.pv-verzoeken.groot li > div:first-child { flex: 1 1 320px; min-width: 0; }
.pv-verzoeken p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-verzoeken .label, .pv-stand .label, .label.ok, .label.nee, .label.leeg { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--vlak-2); border: 1px solid var(--lijn); color: var(--zacht); font-weight: 500; }
.label.ok { background: var(--goed-achter); color: var(--goed); border-color: transparent; }
.label.nee { background: var(--fout-achter); color: var(--fout); border-color: transparent; }
.pv-jong li { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--lijn); }
.pv-jong li.wacht { box-shadow: inset 3px 0 0 var(--let-op); padding-left: 10px; }
.pv-jong li > span:first-child small { display: block; color: var(--zacht); font-size: 13px; }
.pv-stand { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pv-stand small { color: var(--zacht); font-size: 12px; }
.pv-rij { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--lijn); }
.pv-rij > span { min-width: 0; }
.pv-rij select { flex: none; }
#f-privacy .raster-2 { margin-top: 10px; }
.pv-mini { color: var(--let-op) !important; font-weight: 500; }
.pv-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pv-tabel th, .pv-tabel td { text-align: left; padding: 7px 8px; border-top: 1px solid var(--lijn); vertical-align: top; }
.pv-tabel th { color: var(--zacht); font-weight: 600; border-top: 0; }
.pv-tabel td small { display: block; color: var(--zacht); }
.pv-stappen { padding-left: 20px; margin: 8px 0 0; font-size: 14.5px; }
.pv-stappen li { margin-bottom: 8px; }
.infovak.let-op { background: var(--let-op-achter); border-color: transparent; }
.infovak.let-op, .infovak.let-op p { color: var(--inkt); }
.infovak .vinkknop { margin-top: 8px; }
#p-contact details > summary { cursor: pointer; list-style: none; }
#p-contact details > summary::-webkit-details-marker { display: none; }
#p-contact details > summary h2::after { content: " ▸"; color: var(--zacht); font-size: 0.8em; }
#p-contact details[open] > summary h2::after { content: " ▾"; }
.ledenlijst.compact .lidregel { padding: 6px 0; }
@media (max-width: 760px) {
  .pv-jong li { grid-template-columns: 1fr; }
  .pv-rij { flex-wrap: wrap; }
  .pv-tabel thead { display: none; }
  .pv-tabel tr { display: grid; grid-template-columns: 1fr; padding: 6px 0; border-top: 1px solid var(--lijn); }
  .pv-tabel td { border: 0; padding: 2px 0; }
}

/* alpha.158 – Jubilarissen (Leden) */
.jub-kop { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.jub-kop .veld { min-width: 120px; margin: 0; }
.jub-titel { margin: 18px 0 6px; font-size: 1.05rem; }
.jub-titel small { font-weight: normal; opacity: .7; }
.jub-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jub-lijst li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--vlak, #fff)); }
.jub-lijst li .zacht { font-size: .9em; }
.jub-leeg { margin: 18px 0; }
.jub-zonder { margin: 18px 0 0; }

/* alpha.159 – Geschiedenis van een lid */
.gesch summary { cursor: pointer; padding: 6px 0; }
.gesch-lijst { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; max-height: 45vh; overflow: auto; }
.gesch-lijst li { display: grid; grid-template-columns: 3.2em 1fr; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.gesch-lijst li:nth-child(odd) { background: color-mix(in srgb, var(--accent) 6%, var(--vlak, #fff)); }
.gesch-jaar { font-variant-numeric: tabular-nums; opacity: .75; }
.gesch-bij { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 15%, transparent); font-size: .78em; }
.gesch-per { display: block; font-size: .85em; opacity: .8; margin-top: 2px; }
.jub-invul { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; }
.jub-invul li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 8px; }
.jub-invul li:nth-child(odd) { background: color-mix(in srgb, var(--accent) 6%, var(--vlak, #fff)); }
.jub-invul li > span { display: flex; flex-direction: column; }
.jub-invul .veld { margin: 0; width: 6.5em; }
.jub-lezers h3 { margin-top: 14px; }
.jub-lijst li .jub-per { flex-basis: 100%; font-size: .88em; }
.jub-geh { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: .88em; }
.jub-klaar li { opacity: .75; }
.jub-groepen { display: grid; gap: 6px; margin-top: 10px; max-height: 55vh; overflow: auto; }
.jub-groep { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; }
.jub-groep .veld { margin: 0; }
.jub-groep-kop { font-size: .8em; font-weight: 600; color: var(--zacht); }
.jub-groep .veld input.fout { border-color: var(--rood, #b5162f); }
@media (max-width: 600px) { .jub-groep { grid-template-columns: minmax(0, 1fr) 110px; } }

/* Sponsors: aanbrengers en vrijkaarten (alpha.168) */
.sp-aanbrengers { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.sp-aanbrenger { white-space: nowrap; }
.sk-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sk-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
.sk-naam { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
.sk-naam input { margin-top: 3px; }
.sk-aantal { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zacht); flex: none; }
.sk-aantal input { width: 64px; height: 36px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 0 8px; font: inherit; background: var(--vlak); color: inherit; }
.tk-sponsorpil { font-size: 11px; }

/* Dashboard: sponsorlogo's klein en subtiel bovenaan (alpha.170) */
.sponsorband { display: inline-flex; align-items: center; gap: 10px; margin-right: 8px; }
.sponsorband[hidden] { display: none; }
.sponsorband small { font-size: 11.5px; color: var(--zacht); white-space: nowrap; }
.sponsorband a, .sponsorband span { display: inline-flex; align-items: center; height: 30px; opacity: .75; transition: opacity .15s; }
.sponsorband a:hover, .sponsorband a:focus-visible { opacity: 1; }
.sponsorband img { max-height: 30px; max-width: 90px; object-fit: contain; }

/* ---------------------------------------------------------------- ONLINE RESERVEREN (alpha.171) */
.status-pil.tk-online { background: color-mix(in srgb, var(--accent) 12%, var(--vlak)); border-color: color-mix(in srgb, var(--accent) 35%, var(--lijn)); color: var(--accent-lees, var(--accent)); font-size: 11px; padding: 1px 8px; }
.tk-link { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; flex-wrap: wrap; }
.tk-link small { flex: 0 0 100%; font-weight: 600; }
.tk-link input { flex: 1 1 260px; min-width: 0; height: 40px; padding: 0 10px; font: inherit; font-size: 13px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak-2); color: var(--inkt); }
.tk-onlinebalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.tk-kassa, .tk-wachtlijst { padding: 18px 20px; }
.tk-kassakop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.zoek.groot { max-width: none; display: block; margin-bottom: 6px; }
.zoek.groot input { height: 48px; font-size: 16px; }
.tk-kassalijst { list-style: none; margin: 12px 0 0; padding: 0; }
.tk-kassalijst li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lijn); }
.tk-kassalijst li.binnen { opacity: 0.6; }
.tk-kassaknoppen { display: flex; gap: 8px; flex: none; }
.tk-scanvideo { width: 100%; max-height: 50vh; background: #000; border-radius: var(--r); object-fit: cover; }
.tk-wachtlijst table { width: 100%; margin: 12px 0; }

/* openbare reservatiepagina (reserveren.html) */
body.pub { background: var(--doek); }
.pub-main { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.pub-kop { display: flex; align-items: center; gap: 14px; padding: 18px 0; margin-bottom: 18px; border-bottom: 3px solid var(--accent); }
.pub-kop b { display: block; font-size: 18px; }
.pub-kop small { color: var(--zacht); }
.pub-logo { height: 48px; width: auto; max-width: 140px; object-fit: contain; }
.pub-intro { margin: 0 0 18px; white-space: pre-line; }
.pub-mijn { padding: 14px 18px; margin-bottom: 20px; display: grid; gap: 6px; }
.pub-mijn a { color: var(--accent-lees, var(--accent)); font-weight: 600; }
.pub-prod h1 { font-size: 22px; margin: 8px 0 12px; }
.pub-data { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.pub-datum { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pub-datum:hover:not(:disabled) { border-color: var(--accent); }
.pub-datum:disabled { opacity: 0.6; cursor: default; }
.pub-datum b { display: block; }
.pub-datum b::first-letter, .pub-ticket p b::first-letter { text-transform: uppercase; }
.pub-prijs { font-weight: 600; white-space: nowrap; }
.pub-stap { padding: 18px 20px; margin-bottom: 16px; }
.pub-stap h2 { font-size: 17px; margin: 0 0 12px; }
.pub-tarief { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.pub-tarief small { display: block; }
.pub-teller { display: flex; align-items: center; gap: 12px; }
.pub-teller b { min-width: 20px; text-align: center; font-size: 17px; }
.pub-teller .rondknop { font-size: 20px; line-height: 1; }
.pub-stap .lm-som { margin-top: 12px; }
.pub-acties { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 8px 0 16px; }
.pub-acties.links { justify-content: flex-start; }
.pub-let { padding: 14px 18px; margin-bottom: 16px; border-left: 4px solid var(--let-op, #b45309); }
.pub-gelukt { padding: 14px 18px; margin-bottom: 16px; border-left: 4px solid var(--goed, #15803d); background: var(--goed-achter, #ecfdf3); }
.pub-timer { padding: 12px 18px; margin-bottom: 16px; }
.pub-timer.dringend { border-color: var(--fout); color: var(--fout); }
.pub-ticket { display: flex; gap: 22px; padding: 20px; margin-bottom: 16px; align-items: flex-start; }
.pub-ticket h1 { font-size: 22px; margin: 0 0 8px; }
.pub-ticket p { margin: 0 0 8px; }
.pub-qr { display: grid; justify-items: center; gap: 6px; flex: none; }
.pub-qr svg { width: 180px; height: 180px; }
.pub-betaal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0; }
.pub-betaal dt { color: var(--zacht); }
.pub-betaal dd { margin: 0; font-variant-numeric: tabular-nums; }
.pub-voet { text-align: center; margin-top: 30px; }
.pub-vrij { margin: 0 0 16px; }
@media (max-width: 560px) {
  .pub-ticket { flex-direction: column; align-items: center; text-align: center; }
  .pub-acties .knop { flex: 1 1 auto; }
  .tk-kassalijst li { flex-direction: column; align-items: stretch; }
  .tk-kassaknoppen .knop { flex: 1; }
}
@media print {
  .pub-acties, .pub-voet, #p-kassa, .terugknop, .pub-gelukt { display: none !important; }
  body.pub { background: #fff; }
}

/* Promocode voor vrijwilligers (alpha.173) */
.promoband { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r); background: var(--vlak); border: 1px solid var(--lijn); border-left: 4px solid var(--accent); box-shadow: var(--schaduw); }
.promoband > .icoon { width: 22px; height: 22px; flex: none; color: var(--accent); }
.promoband > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.promoband small { color: var(--zacht); font-size: 13px; }
.promoknop .icoon { width: 16px; height: 16px; }
.promomini { margin: 8px 0 0; }
.promovenster h2 { display: flex; align-items: center; gap: 8px; }
.promovenster h2 .icoon { width: 20px; height: 20px; color: var(--accent); }
.promocode { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 12px 14px; border: 2px dashed var(--accent); border-radius: var(--r); background: var(--vlak-2); }
.promocode code { flex: 1; min-width: 0; font-size: 24px; font-weight: 700; letter-spacing: 0.06em; color: var(--inkt); word-break: break-all; user-select: all; }
.promovenster .promo-uitleg { color: var(--inkt); white-space: pre-line; }
@media (max-width: 700px) {
  .promoband { flex-wrap: wrap; }
  .promoband .promoknop { width: 100%; justify-content: center; }
  .promocode code { font-size: 20px; }
}

/* alpha.175 – screenshots in een gesprek */
.gesprek-nieuw { flex-wrap: wrap; }
.gesprek-nieuw .bericht-acties { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gesprek-nieuw .bericht-acties .knop.stil { padding-inline: 10px; }
.gesprek-nieuw .bericht-beelden { flex-basis: 100%; margin: 0; }
.bericht-b .bericht-beeldjes { margin: 6px 0 2px; gap: 6px; }
.bericht-b .bericht-beeldjes .beeld, .gesprek-nieuw .bericht-beelden .beeld { width: 110px; height: 76px; }

/* alpha.187: verzekering vernieuwen */
.vz-kop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vz-kop .vz-zoek { flex: 1 1 200px; margin: 0; }
.vz-lijst { max-height: 50vh; overflow: auto; margin-top: 8px; }
.vz-rij { display: grid; grid-template-columns: 1fr 150px; gap: 10px; align-items: center; padding: 2px 0; border-bottom: 1px solid var(--lijn, #e5e5e5); }
.vz-rij .vz-nr { width: 100%; padding: 8px 10px; border: 1px solid var(--lijn-sterk); border-radius: 10px; font: inherit; background: transparent; color: inherit; }
@media (max-width: 600px) { .vz-rij { grid-template-columns: 1fr 110px; } }

/* alpha.189: toestemmingen vragen bij het aanmelden */
.pv-vraag { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 0; }
.pv-vraag > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pv-vraag small { display: block; font-size: 13px; color: var(--zacht); }
.pv-vraag .segment { flex: none; }
.pv-vraag.ontbreekt .segment { border-color: var(--fout); }
@media (max-width: 560px) { .pv-vraag { flex-direction: column; align-items: stretch; } .pv-vraag .segment.klein { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } }

/* Platformbeheer → Bezoekers (alpha.191) */
.pl-tabs { margin: -4px 0 16px; }
.pb-afschaal { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-klein); background: var(--let-op-achter); }
.pb-tabel .pb-rij { cursor: pointer; }
.pb-tabel .pb-rij:hover td { background: var(--vlak-2, rgba(0,0,0,.03)); }
.pb-tabel .pb-rij[aria-expanded=true] td { border-bottom: 0; background: var(--vlak-2, rgba(0,0,0,.03)); }
.pb-detail td { background: var(--vlak-2, rgba(0,0,0,.03)); }
.pb-det p { margin: 0 0 10px; }
.pb-det .bz-staven { height: 90px; }

/* alpha.192: taak op het dashboard aanklikbaar */
.tk-tekst[data-taakopen]{cursor:pointer}
.tk-tekst[data-taakopen]:hover b,.tk-tekst[data-taakopen]:focus-visible b{text-decoration:underline}


/* ------------------------------------------------------------------ alpha.194: gsm-controle (opmerking 2 nov, Kalender op gsm)
   1. Nooit zijwaarts schuiven: anders schuift de vaste onderbalk mee op de iPhone. `clip` (niet `hidden`) maakt geen scrollvak.
   2. Hoogtes met dvh (zichtbare hoogte) i.p.v. vh: op de iPhone is 100vh hoger dan wat je ziet, waardoor de onderkant van een
      pop-up (Bewaren) achter de werkbalk van Safari verdween. Oude browsers houden de vh-regel ervoor.
   3. Onderbalk op een eigen laag + ruimte voor de home-balk (viewport-fit=cover in index.html, anders is env() altijd 0).
   4. Pop-ups op gsm: smallere randen, compacte voet, Annuleren weg als er een × is, ballonnetje niet meer over Bewaren. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
@media (max-width: 960px) {
  .onderbalk { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
    padding-left: calc(4px + env(safe-area-inset-left)); padding-right: calc(4px + env(safe-area-inset-right)); }
}
@media (max-width: 760px) {
  .pagina { padding-top: calc(18px + env(safe-area-inset-top)); padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
  .popup, .popup.breed, .popup.vraagvenster { width: calc(100% - 16px); max-width: calc(100% - 16px); }
  /* bovenaan 44px vrij voor het ballonnetje (opmerking over deze pop-up), zodat het nooit over de titel of Bewaren ligt */
  .popup, .popup form { max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); }
  .popup > .popup-lijf { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); }
  .popup-kop { padding: 14px 16px; gap: 10px; }
  .popup-kop h2 { font-size: 18px; }
  .popup-lijf { padding: 4px 16px 8px; }
  .popup-voet { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .popup-voet > * { min-width: 0; }
  .popup-voet .rechts { flex: 1 1 100%; flex-wrap: nowrap; gap: 8px; }
  .popup-voet .rechts > .knop, .popup-voet .rechts > a.knop { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .popup-voet .rechts > .knop.hoofd { flex-grow: 1.6; }
  .popup:has(.popup-kop .sluit) .popup-voet [id$="annuleer"] { display: none; }
  dialog .ballon { top: 6px; left: 4px; right: auto; bottom: auto; width: 34px; height: 34px; padding: 0; opacity: 0.9; }
  dialog .ballon .icoon { width: 17px; height: 17px; }
  .tabelvak, .rs-scroll { max-width: 100%; }
  img, video { max-width: 100%; }
}

/* Lange woorden en links (bv. een url in een nieuwsbericht) duwen een blok nooit meer breder dan het scherm. */
.pagina :is(p, li, dd, dt, h1, h2, h3, h4, label, small), .popup :is(p, li, label) { overflow-wrap: break-word; }
.pagina a, .popup a { overflow-wrap: anywhere; }
@media (max-width: 560px) { .foto-hint { flex-wrap: wrap; } .foto-hint p { flex: 1 1 200px; } .foto-hint .knoppen { flex: 1 1 100%; } }
.dash-rechts, .dash-links { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.dash > *, .blok { min-width: 0; }
@media (max-width: 960px) {
  .wizard { grid-template-columns: minmax(0, 1fr); }
  .wizard-rail, .wizard-hoofd { min-width: 0; }
}
/* alpha.194: gekoppelde verenigingen */
.koppeling { margin-bottom: 16px; }
.koppeling .blok-kop { align-items: center; flex-wrap: wrap; }
.koppeling-lijf { padding: 0 20px 14px; }
.koppeling-lijf h3 { font-size: 14px; margin: 4px 0 6px; }
.koppeling-lijf ul { margin: 0 0 8px; padding-left: 18px; }
.koppeling-lijf li { margin: 3px 0; font-size: 14px; }
.koppeling-acties { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--lijn); }
.koppelcode-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 20px 18px; margin: 0; }
.koppelcode-rij code { font-size: 15px; padding: 4px 10px; border-radius: 8px; background: var(--vlak-2); border: 1px solid var(--lijn); }
#kform .vinkregel { margin: 6px 0; }
#kform .k-regel { margin: 4px 0 10px 26px; }
#kform h3 { font-size: 14px; margin: 14px 0 6px; }
.leeg-blok { padding: 18px 20px; } .leeg-blok p { margin: 0 0 6px; }

/* Tickets: lijst per productie (alpha.197) */
.tk-groepen { display: grid; gap: 14px; }
.tk-groep { padding: 14px 18px 12px; }
.tk-groepkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tk-groeponline { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tk-avonden { list-style: none; margin: 0; padding: 0; }
.tk-avonden li + li { border-top: 1px solid var(--lijn); }
.tk-avond { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 160px) auto; align-items: center; gap: 14px; padding: 10px 4px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-klein); }
.tk-avond:hover { background: var(--vlak-2); }
.tk-avond .tk-balk { margin: 0; }
.tk-avonddatum b::first-letter { text-transform: uppercase; }
.tk-groepvoet { display: block; margin-top: 4px; }
@media (max-width: 560px) { .tk-avond { grid-template-columns: minmax(0, 1fr) auto; } .tk-avond .tk-balk { display: none; } }

/* Platformbeheer → Verbruik (alpha.200) */
.vb-kop { padding: 0; margin: 0 0 8px; }
.vb-kern { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 14px; }
.vb-meter small { display: block; }
.vb-balk { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--lijn); overflow: hidden; }
.vb-balk > span { display: block; height: 100%; background: var(--goed); border-radius: 3px; }
.vb-meter.let-op { border-color: var(--let-op); background: var(--let-op-achter); }
.vb-meter.let-op .vb-balk > span { background: var(--let-op); }
.vb-meter.fout { border-color: var(--fout); background: var(--fout-achter); }
.vb-meter.fout .vb-balk > span { background: var(--fout); }
.vb-staven .vb-ok > span { background: var(--goed); }
.vb-noot { margin-top: 14px; }
.vb-staven .vb-let-op > span { background: var(--let-op); }
.vb-staven .vb-fout > span { background: var(--fout); }
.vb-periode { padding: 0 18px 10px; }
.vb-aandeel { display: inline-block; vertical-align: middle; width: 60px; height: 6px; border-radius: 3px; background: var(--lijn); overflow: hidden; margin-right: 6px; }
.vb-aandeel > span { display: block; height: 100%; background: var(--accent); }
/* Leesverbruik stap 2: keuze met/zonder ontwikkelwerk; grijs deel bovenaan een staaf = ontwikkelwerk */
.vb-wie { margin: 0 0 4px; }
.vb-wie-uitleg { margin: 0 0 12px; }
.vb-staven .bz-staaf > span > i.vb-o { display: block; width: 100%; background: var(--stil); opacity: .6; border-radius: 3px 3px 0 0; }

/* alpha.201 – In mijn agenda: abonneren */
.agendakeuze { width: min(560px, calc(100% - 24px)); }
.agendakeuze .popup-lijf { padding-bottom: 20px; }
.agendakeuze .popup-lijf p + p, .agendakeuze .agendaknoppen + p { margin-top: 10px; }
.agendaknoppen { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.agendameer > summary { cursor: pointer; font-weight: 600; color: var(--zacht); }
.agendameer[open] > summary { margin-bottom: 4px; }
@media (max-width: 560px) { .agendaknoppen .knop { flex: 1 1 100%; } }
.agendastappen ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }
.agendastappen p:last-child { margin-top: 8px; }

/* Vervolgtaken (3 nov): wachten onder hun hoofdtaak */
.statuskeuze.wachtop, .status-pil.wachtop { background: var(--vlak-2); border-color: var(--lijn); color: var(--zacht); font-style: italic; }
.takenlijst.vervolglijst { margin: .35rem 0 .1rem 1.4rem; padding-left: .6rem; border-left: 2px dashed var(--lijn-sterk); }
.takenlijst.vervolglijst > .taakregel { border-bottom: 0; }
.taakregel.wachtend .taaktitel b { color: var(--zacht); font-weight: 600; }
.vv-pijl { color: var(--zacht); margin-right: .3rem; }
.label.wachtlabel { background: var(--vlak-2); color: var(--zacht); font-style: italic; }
.label.vvlabel { background: var(--vlak-2); color: var(--zacht); }
.wachtblok { margin-top: 1rem; }
.vervolgkeuze { display: grid; gap: .4rem; margin-bottom: .75rem; }
.vervolgkeuze .vinkknop { justify-content: flex-start; text-align: left; }
.vervolgkeuze small { display: block; }

/* alpha.206: gekoppelde verenigingen stap B – delen, personen herkennen, verzekering via een gekoppelde vereniging */
.deel-kanten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 10px; }
.deel-kant { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 10px 12px; background: var(--vlak-2); }
.deel-kant > b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.deel-kant .vinkregel { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 14px; }
.deel-kant .vinkregel small { display: block; }
.deel-kant p { margin: 4px 0 0; }
@media (max-width: 760px) { .deel-kanten { grid-template-columns: minmax(0, 1fr); } }
.hk-lijst { list-style: none; margin: 0 0 8px; padding: 0; }
.hk-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.hk-rij > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.hk-knoppen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
@media (max-width: 600px) { .hk-rij { flex-direction: column; align-items: stretch; } .hk-knoppen { justify-content: flex-start; } }
.vz-kop h3 { margin: 0; }
.vz-elders { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r-klein); background: var(--goed-achter); color: var(--goed); font-size: 14px; }
.vz-dubbel { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-klein); background: var(--let-op-achter); color: var(--let-op); font-size: 14px; }
.vz-via { color: var(--goed) !important; }
.lid-naam small.vz-via { white-space: normal; }
.vz-rij.via .vinkknop span { color: var(--zacht); }

/* Takenpakket als boom (3 nov 2026, testers): vervolgtaken ingesprongen, uitgevinkte tak grijs */
.pakketboom li[data-rij] { padding-left: calc(var(--diepte, 0) * 22px); }
.pakketboom li.uit .tk-tekst { opacity: .45; }
.pakketboom li.uit .tk-tekst b { text-decoration: line-through; }
.pakketboom .vv-pijl { color: var(--zacht, #888); margin-top: 3px; flex: none; }
.pakketboom li.boomthema { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht, #777); padding: 14px 0 4px; border-top: 0; }
.pakketboom .boomlos { color: var(--accent, #b55); }
#popup .filters + p, #popup .filters + .zacht { margin-top: 12px; }
.themagroep .pakketboom li[data-rij] { padding-left: calc(20px + var(--diepte, 0) * 22px); }

/* Zoekkeuze (3 nov): zoekveld met voorstellen i.p.v. een lange keuzelijst */
.zoekkeuze { position: relative; }
.zk-veld { position: relative; }
.zk-invoer { width: 100%; height: 42px; padding: 0 36px 0 12px; font: inherit; font-size: 14px; color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); }
.zk-invoer:focus { outline: 2px solid var(--primair); outline-offset: -1px; }
.zk-wis { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: none; color: var(--zacht); font-size: 18px; cursor: pointer; border-radius: 50%; }
.zk-wis:hover { background: var(--secundair); }
.zk-lijst { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r); box-shadow: var(--schaduw-hoog); padding: 4px; }
.zk-rij { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: var(--r-klein); font: inherit; font-size: 14px; color: var(--inkt); cursor: pointer; }
.zk-rij b { font-weight: 500; }
.zk-rij small { color: var(--zacht); font-size: 12px; }
.zk-rij:hover, .zk-rij.actief { background: var(--secundair); }
.zk-rij.gekozen b::before { content: "✓ "; }
.zk-kop { padding: 8px 10px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--stil); }
.zk-hint { padding: 8px 10px; font-size: 12px; color: var(--zacht); border-top: 1px solid var(--lijn); margin-top: 4px; }

/* Takenpakket: slepen (3 nov) */
.pakketboom li.sleepbaar { cursor: grab; }
.pakketboom li.sleepbaar.sleept { opacity: .4; }
.pakketboom li.sleepdoel { background: color-mix(in srgb, var(--accent, #b5162f) 10%, transparent); outline: 2px dashed var(--accent, #b5162f); outline-offset: -2px; border-radius: 8px; }
.themagroep > summary.sleepdoel { outline: 2px dashed var(--accent, #b5162f); outline-offset: 2px; border-radius: 8px; }
@media (hover: none) { .sleephint { display: none; } }

/* Event nog niet aangemaakt (alpha.215): twee knoppen in een melding; voorlopige datum */
@media (max-width: 760px) { .meldbalk .melditem:has(.knop.stil) { flex-wrap: wrap; } .meldbalk .melditem:has(.knop.stil) p { flex-basis: calc(100% - 40px); } .meldbalk .melditem:has(.knop.stil) .knop.stil { margin-left: 32px; } }
.deadline + .voorlopig, small.voorlopig { font-size: 11px; font-style: italic; }

/* Shiftmeldingen (4 nov 2026): alle shiften ingevuld = groen */
.meldbalk .melditem.goed { background: #e8f5ec; border-color: #a9d8b8; }
/* alpha.218 (4 nov 2026) – paginatitel nooit midden in een woord breken (VRIJWILLIGER|S): op computer gaan de knoppen
   naar een volgende regel als er niet genoeg plaats is naast de titel. Geldt voor elke pagina. */
@media (min-width: 761px) {
  .pagina-kop { flex-wrap: wrap; row-gap: 12px; }
  .pagina-kop > div:first-child { flex: 1 0 auto; max-width: 100%; }
  .pagina-kop h1 { overflow-wrap: normal; }
}

/* Activiteitspagina (4 nov 2026): titel van een activiteit opent haar pagina */
.lm-open { font-weight: 700; color: inherit; text-align: left; padding: 0; text-decoration: none; }
.lm-open:hover { text-decoration: underline; color: var(--accent-lees, var(--accent)); }
.lm-kop .knop.klein { flex: none; }
#lm-pagina .lm-inschrijf { border-top: 0; padding-top: 0; }
@media (max-width: 760px) { .lm-kop [data-openact].knop { display: none; } }
.act-dubbel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.act-dubbel > span { flex: 1 1 320px; }
.act-wglijst { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 10px; }

/* Tegels (Producties en Activiteiten, 4 nov 2026): label niet gebroken, alles links op één lijn, tegels even hoog */
.productielijst > li { display: flex; }
.productiekaart { height: 100%; align-items: stretch; justify-content: flex-start; }
.productiekaart > * { margin-left: 0; margin-right: 0; }
.pk-kop { justify-content: flex-start; flex-wrap: wrap; gap: 4px 10px; width: 100%; }
.pk-kop .status-pil { white-space: nowrap; flex: none; }
.pk-kop small { flex: 1 1 auto; min-width: 0; text-align: right; }

/* Activiteitspagina: zelfde binnenmarge als de productiepagina (4 nov 2026) */
#lm-pagina .blok { padding-bottom: 14px; }
#lm-pagina .blok > :not(.blok-kop) { margin-left: 20px; margin-right: 20px; }
#lm-pagina .productie-raster + .blok, #lm-pagina .productie-raster ~ .blok { margin-bottom: 16px; }
#lm-pagina .lm-feiten { margin-top: 0; }
/* Blok gebruiken of NVT */
.blok-kop .blok-knoppen { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.blok-kop .blok-nvt { color: var(--stil); }
.blok-kop .blok-nvt:hover { color: var(--fout); border-color: var(--fout); }
.blok-nvtlijst { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 4px; border-top: 1px dashed var(--lijn-sterk); margin-top: 8px; }
/* alpha.226 – nieuws: klikbare links + knop met link */
.bericht .omschrijving a, .nieuwskort p a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.bericht .nieuwsknop { margin: 10px 0 4px; display: inline-flex; text-decoration: none; }
.nieuwskort .nieuwsknop { margin-top: 8px; display: inline-flex; text-decoration: none; }
fieldset.nieuwslink { border: 0; padding: 0; margin: 14px 0 0; }

/* alpha.231 – inschrijvingsformulier bij activiteiten */
#lm-pagina .lm-inschrijf { display: block; }
.lm-inschrijf .ins-overzicht { margin: 8px 0; }
.ins-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ins-mijnknoppen { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ins-mijn { flex: 1 1 100%; margin-bottom: 4px; }
.ins-tellers { margin: 6px 0 2px; }
.ins-filter { margin: 8px 0; }
.ins-lijst { list-style: none; margin: 6px 0 0; padding: 0; }
.ins-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--lijn); }
.ins-wie, .ins-geld { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ins-geld { text-align: right; }
.ins-acties { display: flex; align-items: center; gap: 6px; }
.ins-persoon { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 10px 12px 0; margin: 0 0 12px; }
.ins-persoon legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.ins-persoon-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 12px; }
.ins-eentarief { align-self: center; margin: 0 0 14px; }
.ins-totaal { margin: 4px 0 14px; }
.ins-totaal .veld { margin: 10px 0 0; }
.ins-hulp { margin: -10px 0 14px; }
.ins-samen { list-style: none; padding: 0; margin: 0 0 10px; }
.ins-samen li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.ins-samen li small { flex: 1 1 100%; color: var(--zacht); }
.ins-overschrijving { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; margin-top: 8px; }
.ins-overschrijving dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; flex: 1 1 220px; }
.ins-overschrijving dt { color: var(--zacht); font-size: 13.5px; }
.ins-overschrijving dd { margin: 0; overflow-wrap: anywhere; }
.ins-qr { margin: 0; text-align: center; }
.ins-qr svg { width: 180px; height: 180px; max-width: 100%; background: #fff; padding: 8px; border-radius: var(--r-klein); }
.fi-vraag { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 10px 12px; margin: 0 0 12px; }
.fi-vraag-velden { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 12px; }
.fi-vraag .filters { align-items: center; }
@media (max-width: 700px) {
  .ins-rij { grid-template-columns: minmax(0, 1fr) auto; }
  .ins-geld { grid-column: 1; text-align: left; }
  .ins-acties { grid-column: 2; grid-row: 1 / span 2; align-self: start; flex-direction: column; align-items: flex-end; }
  .fi-vraag-velden { grid-template-columns: minmax(0, 1fr); }
}
.ins-wie > .naamchip { align-self: flex-start; }

/* alpha.232 – taken als leeslijst voor de verantwoordelijke */
.tl-lijst { list-style: none; margin: 6px 0 0; padding: 0; }
.tl-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--lijn); }
.tl-titel { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.tl-meta { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tl-klaar { margin-top: 8px; }
.tl-klaar summary { cursor: pointer; color: var(--zacht); }

/* ------------------------------------------------------------------ vaste shiften (alpha.236) */
.vs-lijst { list-style: none; padding: 0; margin: 12px 0; }
.vs-lijst li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.vs-lijst li > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.vs-lijst li.vs-uit b { color: var(--zacht); }
.vs-rij { border: 1px solid var(--lijn); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; background: var(--vlak); }
.vs-rij-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.vs-rij .filters { flex-wrap: wrap; }
.vs-uren { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; font-size: 14px; }
.vs-uren > span:first-child { width: 28px; color: var(--zacht); }
.vs-tijd { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vs-tijd input { width: 70px; }
.vs-tijd select { width: auto; }
.vs-plaatsen input, .vs-kort input { max-width: 110px; }
.vs-bron { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.vs-bron .linkknop { font-weight: 400; text-align: left; }
.shift.geschrapt { opacity: .6; }
.moment.vs-flits { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color 2s; }
#vs-vak .knop { margin-top: 6px; }
.vs-tijd input, .vs-tijd select { height: 34px; padding: 0 8px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak); font: inherit; font-size: 14px; color: var(--inkt); }

/* alpha.241 reserveringslink */
.tk-reslink { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-reslink .icoon { width: 14px; height: 14px; }
#resvak .promoband:last-child { margin-bottom: 0; }

/* Draaiboek: tegels i.p.v. keuzelijst (6 nov 2026) */
.ev-tegels { margin-top: 4px; }

/* alpha.244 */
.tk-resgroep { display: inline-flex; align-items: center; gap: 4px; }
.res-stand { margin: 6px 0 8px; }

/* alpha.245 – nieuws: volle breedte, volledige tekst, afbeelding/affiche, volgorde met pijltjes */
.bericht.met-beeld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 340px); gap: 24px; align-items: start; }
.bericht header { position: relative; }
.nieuwspijlen { float: right; display: flex; gap: 4px; margin: -4px 0 4px 12px; }
.nieuwspijlen .knop { min-width: 34px; justify-content: center; font-size: 16px; padding: 4px 8px; }
.nieuwsbeeld { display: block; padding: 0; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--vlak-2); cursor: zoom-in; width: 100%; }
.nieuwsbeeld img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.nieuwskort li.met-beeld { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; }
.nieuwsbeeld.klein img { max-height: 96px; object-fit: cover; }
.nieuwskort .nieuwsmeer { margin-top: 6px; padding-left: 0; }
.nieuwsbeeld-keuze { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
#n-voorbeeld img { display: block; max-width: 160px; max-height: 200px; border-radius: 8px; border: 1px solid var(--lijn); }
.nieuwsbeeldveld { margin-top: 14px; }
@media (max-width: 760px) {
  .bericht.met-beeld { grid-template-columns: 1fr; gap: 14px; }
  .bericht.met-beeld .nieuwsbeeld { order: -1; }
  .bericht { padding: 18px 16px; }
}
.ev-groep { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); margin: 6px 0 8px; }

/* Platformbeheer → Financiën (alpha.252) */
.fi-tabs { margin-bottom: 14px; }
.fi-kern { margin-bottom: 16px; }
.fi-kern .fi-per { font-size: 13px; font-weight: 600; color: var(--zacht); }
.fi-plus { color: var(--ok, #15803d); }
.fi-min { color: var(--fout); }
.fi-kern .fi-plus b, .fi-kern .fi-min b { color: inherit; }
#fi-deel .blok { margin-bottom: 16px; }
#fi-deel .blok > .bz-tabel, #fi-deel .blok > .fi-kaarten, #fi-deel .blok > .fi-regels { margin: 0 0 4px; }
.fi-tabel .fi-klik { cursor: pointer; }
.fi-tabel .fi-klik:hover td { background: var(--vlak-2); }
.fi-tabel .fi-som td { font-weight: 750; border-top: 2px solid var(--lijn-sterk); }
.fi-tabel .fi-auto td { background: color-mix(in srgb, var(--accent) 5%, var(--vlak)); }
.label.fi-live { background: color-mix(in srgb, #16a34a 14%, var(--vlak)); border-color: color-mix(in srgb, #16a34a 40%, var(--lijn)); color: #15803d; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid; }
.label.fi-invullen { background: var(--let-op-achter); color: var(--let-op); border: 1px solid var(--let-op); font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.fi-tabel .label, .fi-kaart .label { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--vlak-2); border: 1px solid var(--lijn); color: var(--zacht); font-weight: 500; }
.fi-knoppen { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 18px; }
.fi-sleutel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 20px 12px; }
.fi-uitleg { padding: 10px 20px 16px; margin: 0; }
.fi-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 0 20px 6px; }
.fi-kaart { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 14px 16px; background: var(--doek); }
.fi-kaart.basis { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.fi-kaart header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fi-kaart h3 { font-size: 15px; font-weight: 750; }
.fi-prijs { font-size: 24px; font-weight: 800; margin: 8px 0 2px; }
.fi-prijs span { font-size: 13px; font-weight: 600; color: var(--zacht); }
.fi-mods { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.fi-regels { padding: 0 20px 16px 38px; font-size: 14px; }
.fi-regels li { margin-bottom: 4px; }
.fi-pklijst { list-style: none; margin: 0 0 12px; padding: 0; }
.fk-rij { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 12px; margin-bottom: 10px; }
.fk-boven { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fk-boven .fk-naam { flex: 1; min-width: 160px; }
.fk-rij input.fk-naam, .fk-rij input.fk-uitleg, .fk-rij .fk-prijs { height: 38px; padding: 0 10px; font: inherit; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak); color: var(--inkt); }
.fk-rij .fk-prijs { width: 110px; }
.fk-rij input.fk-uitleg { width: 100%; margin-bottom: 10px; }
.fk-rij input.fout, .fi-popup input.fout { border-color: var(--fout); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fout) 18%, transparent); }
.fi-popup .filters { margin-top: 2px; }
@media (max-width: 760px) { .fi-pc { display: none; } .fi-tabel .fi-klik { cursor: default; } }
/* alpha.290: Financiën → Break-even */
.fi-tabel .be-vink { width: 44px; text-align: center; }
.fi-tabel td input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.fi-tabel tr.be-uit td:not(.be-vink) { color: var(--zacht); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--zacht) 50%, transparent); }
.fi-tabel tr.be-gekozen td { background: color-mix(in srgb, var(--accent) 7%, var(--vlak)); font-weight: 650; }
.be-btw { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--zacht); margin-top: 3px; text-decoration: none; }
.be-lijn { padding-top: 12px; }
.be-rij { border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 12px; margin-bottom: 10px; }
.be-onder { display: flex; gap: 8px; align-items: center; }
.be-onder .be-not { flex: 1; min-width: 0; height: 38px; padding: 0 10px; font: inherit; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--vlak); color: var(--inkt); }

/* alpha.253: mailen vanuit het portaal */
.veld[hidden], [data-deel][hidden] { display: none; }
.mailkeuze textarea { width: 100%; font: inherit; }
.mailwijze .segment { margin-bottom: 8px; }
@media (max-width: 600px) { .mailwijze .segment, .mk-wijze { grid-template-columns: 1fr !important; } }

/* alpha.255: onderdelen binnen een module (Instellingen → Modules) */
.onderdelenlijst { list-style: none; margin: 0; padding: 0 0 0 34px; background: var(--vlak); }
.moduleregel.onderdeel { padding: 8px 14px; border-top: 1px dashed var(--lijn, #ddd); }
.moduleregel.onderdeel b { font-size: 13px; font-weight: 600; }

/* SHIFTENPAKKETTEN (alpha.259) */
.vs-uren .tot-einde { position: static; margin: 0; font-size: 13px; }
.spk-gekoppeld { list-style: none; padding: 0; margin: 4px 0 10px; }
.spk-gekoppeld li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--lijn); }
.spk-gekoppeld li:first-child { border-top: 0; }
.spk-gekoppeld li > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.spk-gekoppeld li > span svg { flex: none; width: 18px; height: 18px; color: var(--zacht); }
.spk-voorbeeld { margin: 6px 0 14px; padding: 10px 14px; border-radius: var(--r); background: var(--vlak-2); }
.spk-shiften { list-style: none; padding: 0; margin: 6px 0 0; }
.spk-shiften li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 4px 0; font-size: 14px; }
.spk-shiften li small { color: var(--zacht); }
.vs-lijst li > div small + small { margin-top: 2px; }
.spk-rel li { display: block; }

/* alpha.261 – GSM BEPERKEN: op gsm enkel bekijken (zie js/gsm.js). Afdrukken, beheer en bewerken verborgen. */
@media (max-width: 760px) {
  .pc,
  #drukagenda, #afdrukken, #ev-print, #pv-druk, #pv-drukalle, #mg-druk, [data-druk], #f-ouderformulier,
  #instellingen, [data-actie="instellingen"], [data-instellingen],
  body[data-scherm="taken"] :is(#nieuw, #volgend, #themabeheer, #pakketten, #import, #aanvullen),
  body[data-scherm="leden"] :is(#nieuw, #import, #contacten, #toegangallen, #export, #verzekering, #lidgeld),
  body[data-scherm="producties"] :is(#takenpakket, #spk-toevoegen, #functiebeheer),
  #act-spk, #act-pakket, #act-functiebeheer,
  body[data-scherm="vrijwilligers"] #vastbeheer { display: none !important; }
  .gsm-melding { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 0.9rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--vlak)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--lijn)); }
  .gsm-alleenlezen :is(input, select, textarea):disabled { opacity: 1; color: inherit; background: transparent; }
}

/* ---------------------------------------------------------------- Onboarding + abonnementen (6 nov 2026) */
.modulegroep h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pk-prijs { font-size: 12px; font-weight: 500; color: var(--zacht); background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 999px; padding: 1px 9px; }
.pk-prijs.basis { color: var(--goed); background: var(--goed-achter); border-color: transparent; }
.infovak.goed { background: var(--goed-achter); border-color: color-mix(in srgb, var(--goed) 30%, transparent); }
.infovak .knoppen { margin-top: 10px; }
.leidraad .taaklijst li { min-width: 0; }
.uitbreid-tegels { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.uitbreid-tegel { width: 100%; text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 12px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); cursor: pointer; font: inherit; color: inherit; }
.uitbreid-tegel:hover { border-color: var(--accent); }
.uitbreid-tegel .ut-iconen { display: flex; gap: 2px; color: var(--accent-lees, var(--accent)); grid-row: span 2; }
.uitbreid-tegel .ut-iconen svg { width: 18px; height: 18px; }
.uitbreid-tegel .ut-tekst { display: flex; flex-direction: column; min-width: 0; }
.uitbreid-tegel .ut-tekst small { color: var(--zacht); font-size: 12px; }
.uitbreid-tegel .ut-prijs { grid-column: 2; font-size: 13px; font-weight: 600; }
table.tabel.smal { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 14px; }
table.tabel.smal td, table.tabel.smal th { padding: 6px 4px; border-bottom: 1px solid var(--lijn); text-align: left; }
table.tabel.smal .rechts { text-align: right; white-space: nowrap; }
.aanvraag .aa-kop { display: flex; gap: 12px; align-items: center; min-width: 0; }
.aanvraag .aa-logo { width: 44px; height: 44px; object-fit: contain; border-radius: var(--r-klein); background: #fff; border: 1px solid var(--lijn); flex: none; }
.aanvraag .blok-kop h2 small { font-weight: 500; }
.soorten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
#uitbreidvak { padding-bottom: 16px; margin-top: 16px; }
#uitbreidvak > p, #uitbreidvak > .uitbreid-tegels, #uitbreidvak > .knoppen { margin-left: 20px; margin-right: 20px; }
#uitbreidvak > .knoppen { margin-top: 12px; }
.leidraad > p.zacht { padding: 10px 20px 16px; margin: 0; }
.aanvraag > dl { padding: 0 20px 6px; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.aanvraag > dl > div { display: flex; gap: 6px; min-width: 0; }
.aanvraag > dl dt { color: var(--zacht); }
.aanvraag > .knoppen { padding: 6px 20px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.aanvraag + .aanvraag { margin-top: 12px; }
@media (max-width: 760px) { .leidraad .taaklijst small { display: none; } }

/* alpha.268: Reserveren bovenaan het dashboard over de volle breedte + promocodeknoppen binnen de kaart */
.dash-boven { display: grid; gap: 20px; min-width: 0; }
.dash-boven > .blok:not([hidden]) { margin-bottom: 20px; }
#resvak .res-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 0 20px 20px; }
#resvak .res-lijst .promoband { margin: 0; }
.blok .promomini { margin: 4px 20px 16px; }
.blok .promomini + .promomini { margin-top: -8px; }

/* alpha.269: kalenderlijst – labels in vaste kolommen (ploeg | soort), rechts uitgelijnd; ook vergaderlijst labels rechts */
.agenda-open > .labels { flex: 0 1 auto; justify-content: flex-end; max-width: 50%; }
.agendalabels { flex: none; display: grid; grid-template-columns: 150px 130px; gap: 8px; align-items: center; margin-left: auto; }
.agendalabels > .labels { flex: none; min-width: 0; }
.agendalabels .label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .agendalabels { grid-template-columns: 130px 120px; } }
@media (max-width: 560px) { .agendalabels { display: none; } }
.pagina-kop .kop-acties .segment.klein { align-self: center; margin-right: 4px; }

/* alpha.270: inschrijven bij een activiteit uit de externe kalender */
.ext-ins { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ext-ins .knop { flex: none; }

/* alpha.277: Vrijwilligers – tegels per datum */
.vs-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.vs-tegel { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; background: var(--vlak); border: 1px solid var(--lijn); border-left: 4px solid var(--accent); border-radius: var(--r-groot); box-shadow: var(--schaduw); font: inherit; color: var(--inkt); cursor: pointer; }
.vs-tegel:hover { border-color: var(--accent); }
.vs-tegel.vol { border-left-color: var(--lijn-sterk); }
.vs-tegel-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-tegel-tekst b::first-letter { text-transform: uppercase; }
.vs-tegel-tekst small { color: var(--zacht); font-size: 13px; }
.vs-tegel-stand { margin-top: 6px; font-size: 13px; font-weight: 650; color: var(--accent); }
.vs-tegel.vol .vs-tegel-stand { color: var(--zacht); }
.vs-terug { margin: 0 0 12px; }

/* alpha.278: bekijken als lid */
.alslid-band { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: var(--inkt); color: var(--vlak); border-radius: 999px; box-shadow: var(--schaduw); font-size: 14px; max-width: calc(100vw - 24px); }
.alslid-band .icoon { width: 16px; height: 16px; flex: none; }
.alslid-band .knop { flex: none; }
@media (max-width: 700px) { .alslid-band { top: auto; bottom: 76px; font-size: 13px; } }
.alslid-meer { margin: 0 0 16px; }

/* alpha.279 – Vrijwilligers → Teller per seizoen */
.vs-teller-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.vs-teller-kop p { margin: 0; }
table.vs-teller td { vertical-align: top; }
table.vs-teller summary { cursor: pointer; }
.vs-teller-lijst { margin: 6px 0 2px; padding-left: 18px; font-size: 13px; }
.vs-hulpteller { margin-left: 6px; cursor: pointer; vertical-align: middle; }
@media (min-width: 761px) { .vs-hulpteller { display: none !important; } }
@media (max-width: 760px) { .vs-eigenteller { display: none; } }

/* TenneConnect-woordmerk (alpha.284) */
.tc-merk .tc-icoon { width: 30px; height: 30px; border-radius: 7px; display: block; }
.tc-merk b { font-weight: 800; color: #1b2a4a; }
.gesplitst-merk .tc-merk b { color: #fff; }
.tc-merk em { font-style: normal; font-weight: 500; color: #b95e00; }
.gesplitst-merk .tc-merk em { color: #f3a626; }
/* alpha.285: slogan onder het TenneConnect-woordmerk */
.tc-merkblok { display: flex; flex-direction: column; gap: 4px; }
.tc-slogan { margin: 0 0 0 40px; font-size: 13px; font-weight: 500; color: #4a5568; letter-spacing: 0; }
.gesplitst-merk .tc-slogan { color: rgba(255,255,255,.78); }

/* alpha.286: TenneConnect-merk in het portaal zelf (onderaan de zijbalk, onderaan Meer op gsm); het logo van de vereniging blijft bovenaan */
.tc-voet { display: flex; align-items: center; gap: 9px; padding: 12px 12px 2px; margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--op) 16%, transparent); }
.tc-voet img { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.tc-voet > span { display: flex; flex-direction: column; line-height: 1.15; }
.tc-voet-naam { font-size: 14px; font-weight: 400; letter-spacing: -0.01em; }
.tc-voet-naam b { font-weight: 800; }
.tc-voet small { font-size: 10.5px; opacity: 0.6; }
.tc-meer { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 32px 0 8px; padding-top: 20px; border-top: 1px solid var(--lijn, #e5e7eb); text-align: center; }
.tc-meer .tc-merkblok { align-items: center; }
.tc-meer .tc-slogan { margin-left: 0; }
.tc-meer > small { font-size: 11px; color: var(--zacht); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tc-meer .tc-merk b { color: #fff; }
  :root:not([data-theme="light"]) .tc-meer .tc-merk em { color: #f3a626; }
  :root:not([data-theme="light"]) .tc-meer .tc-slogan { color: var(--zacht); }
}
:root[data-theme="dark"] .tc-meer .tc-merk b { color: #fff; }
:root[data-theme="dark"] .tc-meer .tc-merk em { color: #f3a626; }
:root[data-theme="dark"] .tc-meer .tc-slogan { color: var(--zacht); }

/* alpha.300: Vrijwilligers → Instellingen */
.vs-instlijst { display: grid; gap: 8px; }
.vs-instkeuze { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); color: var(--inkt); font: inherit; cursor: pointer; }
.vs-instkeuze:hover, .vs-instkeuze:focus-visible { border-color: var(--accent); }
.vs-instkeuze small { color: var(--zacht); }
.act-dn-lijst { list-style: none; margin: 0; padding: 0 20px 16px; display: grid; gap: 6px; }

/* ===== Voorpagina TenneConnect.be (alpha.296) ===== */
.vp { background: var(--doek); color: var(--inkt); min-height: 100vh; }
.vp-smal { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.vp-kop { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: var(--platform); color: #fff; }
.vp-merk { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 20px; }
.vp-merk img { width: 32px; height: 32px; }
.vp-merk em { font-style: normal; color: #f39a3d; font-weight: 600; }
.vp-kop nav { display: flex; align-items: center; gap: 18px; }
.vp-kop nav a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 14.5px; }
.vp-kop nav a:hover { color: #fff; }
.vp-kop .knop { background: #fff; color: var(--platform); border-color: #fff; }
.vp-held { background: var(--platform); color: #fff; padding: 72px 0 88px; position: relative; overflow: hidden; }
.vp-held::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--platform-accent); }
.vp-boven { color: #f39a3d; font-weight: 600; letter-spacing: .02em; margin: 0 0 12px; }
.vp-held h1 { color: #fff; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.05; letter-spacing: -0.03em; max-width: 14ch; }
.vp-lead { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: rgba(255,255,255,.85); max-width: 46ch; margin: 20px 0 28px; }
.vp-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.vp-knoppen .knop.hoofd { background: var(--platform-accent); border-color: var(--platform-accent); color: #fff; }
.vp-licht { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.vp-licht:hover { background: rgba(255,255,255,.08); }
.vp-klein { color: rgba(255,255,255,.6); font-size: 13px; margin-top: 22px; }
.vp-blok { padding: 64px 0; }
.vp-zacht { background: var(--vlak-2); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.vp-blok h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; }
.vp-sub { color: var(--zacht); font-size: 16.5px; max-width: 60ch; margin: 10px 0 28px; }
.vp-soorten { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vp-soorten li { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 999px; padding: 8px 16px; font-weight: 500; }
.vp-groepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.vp-groep { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 20px; }
.vp-groep h3 { font-size: 16px; margin-bottom: 12px; color: var(--platform-accent); }
.vp-groep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vp-groep li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.vp-groep li .icoon { width: 20px; height: 20px; color: var(--platform); margin-top: 2px; }
.vp-groep li small { display: block; color: var(--zacht); font-size: 13px; line-height: 1.4; }
.vp-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.vp-drie .icoon { width: 28px; height: 28px; color: var(--platform-accent); }
.vp-drie h3 { font-size: 18px; margin: 10px 0 6px; }
.vp-drie p { color: var(--zacht); margin: 0; }
.vp-pakketten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
.vp-pakket { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 22px; display: flex; flex-direction: column; }
.vp-basis { border: 2px solid var(--platform-accent); }
.vp-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); margin: 0 0 6px; }
.vp-pakket h3 { font-size: 19px; }
.vp-prijsregel { margin: 10px 0 8px; }
.vp-prijs { font-size: 28px; letter-spacing: -0.02em; }
.vp-per { color: var(--zacht); }
.vp-btw { display: block; color: var(--stil); font-size: 12.5px; }
.vp-uitleg { color: var(--zacht); font-size: 14px; margin: 0 0 10px; }
.vp-pakket ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; font-size: 14px; }
.vp-pakket li { display: flex; gap: 8px; align-items: center; }
.vp-pakket li .icoon { width: 16px; height: 16px; color: var(--goed); flex: none; }
.vp-slot { text-align: center; }
.vp-slot .vp-sub { margin-left: auto; margin-right: auto; }
.vp-slot .knop.hoofd { background: var(--platform-accent); border-color: var(--platform-accent); color: #fff; }
.vp-voet { background: var(--platform); color: rgba(255,255,255,.75); padding: 22px 0; font-size: 14px; }
.vp-voet .vp-smal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vp-voet a { color: #fff; }
.vp .knop .icoon { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .vp-smal { padding: 0 16px; }
  .vp-kop { padding: 10px 16px; }
  .vp-kop nav a { display: none; }
  .vp-held { padding: 48px 0 60px; }
  .vp-blok { padding: 44px 0; }
  .vp-knoppen .knop { width: 100%; justify-content: center; }
}
.vp-soorten { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-soort { font: inherit; font-weight: 500; cursor: pointer; background: var(--vlak); color: var(--inkt); border: 1px solid var(--lijn-sterk); border-radius: 999px; padding: 9px 17px; }
.vp-soort:hover { border-color: var(--platform); }
.vp-soort[aria-pressed="true"] { background: var(--platform); border-color: var(--platform); color: #fff; }
.vp-intro { margin: 20px 0 0; padding: 14px 18px; border-left: 4px solid var(--platform-accent); background: var(--vlak); border-radius: var(--r); font-size: 16px; max-width: 70ch; }
.vp-groep li.vp-ook { opacity: .45; }

.vp-staffellijst li { display: flex; justify-content: space-between; gap: 12px; }

/* alpha.302: twee duidelijke keuzes bovenaan de voorpagina (lid ↔ bestuur dat wil starten) */
.vp-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin-top: 8px; }
.vp-keuze { border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.04); }
.vp-keuze h2 { color: #fff; font-size: 19px; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
.vp-keuze p { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.5; margin: 0 0 6px; flex: 1; }
.vp-keuze p b { color: #fff; }
.vp-keuze .knop.hoofd { background: var(--platform-accent); border-color: var(--platform-accent); color: #fff; }
@media (max-width: 760px) { .vp-keuzes { grid-template-columns: 1fr; } .vp-keuze .knop { width: 100%; justify-content: center; } }

/* alpha.303 – Verbruik op Blaze: kost onder een meter, kostenrij */
.vb-meter .vb-kost { display: block; margin-top: 6px; font-weight: 600; color: var(--let-op); }
.vb-kosten { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }