/* Paneelopmaak van de drieslagfolder: gedeeld door print.html (drukwerk) en index.html (interactief). */
:root {
    --coal: #14110d; --coal-soft: #1d1812; --coal-line: #2c251b;
    --cream: #f6f1e7; --paper: #fbf8f1;
    --gold: #cb9709; --gold-deep: #8a6414; --gold-bright: #e8c766;
    --harp: #3f6cb3; --harp-deep: #2f538c;
    --coral: #e0744a; --coral-deep: #b64a26;
    --night: #111728; --night-soft: #18213a; --night-line: #243155;
    --display: "Fraunces", Georgia, serif;
    --sans: "Inter", system-ui, sans-serif;
  }
  :root { --b: 0mm; } /* afloop (bleed); 3mm in drukkerijmodus */
  body.druk { --b: 3mm; }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--sans); font-size: 9.3pt; line-height: 1.45; color: var(--coal);
    background: #3a3630;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  @page { size: 297mm 210mm; margin: 0; }

  /* ---- Vel ---- */
  .vel {
    position: relative; width: calc(297mm + 2 * var(--b)); height: calc(210mm + 2 * var(--b)); overflow: hidden;
    display: grid;
    background: var(--cream);
    page-break-after: always; break-after: page;
  }
  .vel:last-child { page-break-after: auto; break-after: auto; }
  /* Wikkelvouw: buitenkant [flap 97 | achter 100 | voor 100], binnenkant [100 | 100 | flap 97] */
  .vel--buiten { grid-template-columns: calc(97mm + var(--b)) 100mm calc(100mm + var(--b)); }
  .vel--binnen { grid-template-columns: calc(100mm + var(--b)) 100mm calc(97mm + var(--b)); }
  /* Afloop: buitenste panelen lopen door tot de rand van het vel */
  .paneel { padding-top: calc(11mm + var(--b)); padding-bottom: calc(10mm + var(--b)); }
  .vel > .paneel:first-child { padding-left: calc(9mm + var(--b)); }
  .vel > .paneel:last-child { padding-right: calc(9mm + var(--b)); }

  /* Snijtekens en vouwtekens (alleen drukkerijmodus) */
  .druk .vel::before, .druk .vel::after { display: none; }
  .teken { display: none; position: absolute; z-index: 20; pointer-events: none; }
  .druk .teken { display: block; }
  .teken--snij { width: 6mm; height: 6mm; }
  .teken--snij i { position: absolute; background: #000; }
  .teken--snij i.h { height: .25pt; width: 4.5mm; }
  .teken--snij i.v { width: .25pt; height: 4.5mm; }
  .teken--snij.lb { left: 0; top: 0; }   .teken--snij.lb i.h { left: 0; top: calc(var(--b)); }   .teken--snij.lb i.v { top: 0; left: calc(var(--b)); }
  .teken--snij.rb { right: 0; top: 0; }  .teken--snij.rb i.h { right: 0; top: calc(var(--b)); }  .teken--snij.rb i.v { top: 0; right: calc(var(--b)); }
  .teken--snij.lo { left: 0; bottom: 0; }  .teken--snij.lo i.h { left: 0; bottom: calc(var(--b)); }  .teken--snij.lo i.v { bottom: 0; left: calc(var(--b)); }
  .teken--snij.ro { right: 0; bottom: 0; } .teken--snij.ro i.h { right: 0; bottom: calc(var(--b)); } .teken--snij.ro i.v { bottom: 0; right: calc(var(--b)); }
  .teken--vouw { width: .25pt; height: 2.4mm; background: #000; top: 0; }
  .teken--vouw.o { top: auto; bottom: 0; }
  .teken--vouw.v1 { left: var(--v1); } .teken--vouw.v2 { left: var(--v2); }
  .vel--buiten { --v1: calc(97mm + var(--b)); --v2: calc(197mm + var(--b)); }
  .vel--binnen { --v1: calc(100mm + var(--b)); --v2: calc(200mm + var(--b)); }

  @media screen {
    body { padding: 12mm 0; }
    .vel { margin: 0 auto 12mm; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8); }
    /* vouwlijnen alleen op het scherm */
    .vel::before, .vel::after {
      content: ""; position: absolute; top: 0; bottom: 0; width: 0; z-index: 9;
      border-left: 1px dashed rgb(0 0 0 / .25); pointer-events: none;
    }
    .vel::before { left: var(--v1); } .vel::after { left: var(--v2); }
    .label { display: block; }
  }
  .label {
    display: none; width: calc(297mm + 2 * var(--b)); margin: 0 auto 4mm; color: rgb(255 255 255 / .55);
    font-size: 8pt; letter-spacing: .2em; text-transform: uppercase;
  }

  /* ---- Paneel ---- */
  .paneel { position: relative; padding: 11mm 9mm 10mm; display: flex; flex-direction: column; overflow: hidden; }
  .paneel--donker { background: var(--night); color: var(--cream); }

  .eyebrow { font-family: var(--sans); font-weight: 600; font-size: 6.6pt; letter-spacing: .26em; text-transform: uppercase; }
  .eyebrow--goud { color: var(--gold-deep); }
  .paneel--donker .eyebrow, .paneel--coal .eyebrow { color: var(--gold); }

  h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.02; margin: 0; }
  h2 { font-size: 20pt; margin-top: 2.2mm; }
  h3 { font-size: 11pt; margin-top: 4mm; }
  p { margin: 2.2mm 0 0; }
  .paneel--donker p, .paneel--coal p { color: rgb(246 241 231 / .82); }
  strong { font-weight: 600; }

  .lijn { border: 0; height: 1px; margin: 4.5mm 0;
    background: linear-gradient(90deg, transparent, var(--gold-deep), transparent); }
  .paneel--donker .lijn { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

  ul { margin: 2mm 0 0; padding: 0; list-style: none; }
  li { position: relative; padding-left: 4mm; margin-top: 1.1mm; }
  li::before { content: ""; position: absolute; left: 0; top: .48em; width: 1.6mm; height: 1.6mm; border-radius: 50%; background: var(--gold); }

  .knop { display: inline-block; margin-top: 3.5mm; padding: 2.2mm 4.5mm; border-radius: 99px; font-weight: 600; font-size: 8.4pt; color: var(--coal); background: var(--gold); }

  /* Stappen (jeugd) */
  .stappen { margin-top: 3mm; display: grid; gap: 2.4mm; }
  .stap { display: grid; grid-template-columns: 8mm 1fr; column-gap: 2mm; align-items: start; }
  .stap b { font-family: var(--display); font-size: 15pt; font-weight: 600; line-height: 1; color: var(--coral-deep); }
  .stap span { display: block; font-size: 8.4pt; line-height: 1.35; }
  .stap span strong { display: block; font-family: var(--display); font-size: 9.6pt; margin-bottom: .4mm; }

  /* Prijs (Club van 100) */
  .prijs { margin-top: 3mm; font-family: var(--display); font-weight: 600; font-size: 26pt; line-height: 1; color: var(--cream); }
  .prijs small { font-family: var(--sans); font-weight: 400; font-size: 8pt; opacity: .7; margin-left: 1.5mm; }

  /* Contact */
  .contact { margin-top: 2mm; font-size: 8.6pt; }
  .contact div { margin-top: 2mm; }
  .contact b { display: block; font-size: 6.4pt; letter-spacing: .22em; text-transform: uppercase; opacity: .65; margin-bottom: .5mm; }
  .qr { display: flex; align-items: center; gap: 4mm; margin-top: 5mm; }
  .qr .code { flex: 0 0 auto; width: 24mm; height: 24mm; aspect-ratio: 1; padding: 1.5mm; background: #fff; border-radius: 1.5mm; }
  .qr .code img, .qr .code canvas { width: 100%; height: 100%; display: block; }
  .qr p { margin: 0; font-size: 8pt; line-height: 1.35; }

  .agenda { margin-top: 3mm; }
  .agenda .item { display: grid; grid-template-columns: 11mm 1fr; column-gap: 2.5mm; align-items: baseline; padding: 2mm 0; border-top: 1px solid rgb(20 17 13 / .12); }
  .agenda .item:last-child { border-bottom: 1px solid rgb(20 17 13 / .12); }
  .agenda .dag { font-family: var(--display); font-weight: 600; font-size: 15pt; line-height: 1; color: var(--coal); }
  .agenda .mnd { display: block; font-size: 6.4pt; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin-top: .8mm; }
  .agenda .wat { font-family: var(--display); font-weight: 600; font-size: 9.6pt; line-height: 1.15; }
  .agenda .wat small { display: block; font-family: var(--sans); font-weight: 400; font-size: 7.8pt; opacity: .75; margin-top: .5mm; }

/* ---- Binnenflap (97 mm): iets compacter ---- */
.paneel--flap .contact { font-size: 8.2pt; }
.paneel--flap .contact div { margin-top: 1.5mm; }
.paneel--flap .qr { margin-top: 3.5mm; }
.paneel--flap .qr .code { width: 20mm; height: 20mm; }
.paneel--flap .lijn { margin: 3.5mm 0; }
.paneel--flap .agenda .item { padding: 1.6mm 0; }
.paneel--flap h2 { font-size: 18pt; }