/* ==========================================================================
   Bogarde Academy · stijl.css
   Conceptontwerp door Helveron. Eén stylesheet voor alle pagina's.
   Bron van de regels: huisstijl.html (Het systeem achter de site).
   Kleur is markering, nooit vlak. Alles rechthoekig. Bij twijfel: weglaten.
   ==========================================================================

   Breekpunten. Er is een vaste ladder, gebruik geen andere breedte:
     480   kleine telefoon
     520   telefoon, waar 480 te krap bleek
     640   telefoon liggend en de grens van de vaste onderbalk in de app
     760   tablet staand
     880   tablet liggend, de grens die de hele app aanhoudt
     960   smalle laptop
     1000  laptop (heeft een tegenhanger op min-width:1001px)
     1080  de feitenband, die op vier kolommen eerder krap wordt
     1180  het menu
   Stonden hier ook: 400, 700, 820, 900 en 959. Die zijn opgetrokken naar de
   dichtstbijzijnde trede erboven, zodat de eenvoudiger opmaak iets eerder komt
   in plaats van iets later. Nieuwe waarde nodig? Kies eerst een bestaande trede.
   ========================================================================== */

/* ----- Fonts (self-hosted) -----
   Besluit 01-08: alles in Inter, een letter voor de hele site, gewicht doet het werk. */
@font-face{font-family:'Inter';src:url('../fonts/inter-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ----- Tokens ----- */
:root{
  --veld:#0B0C0C;            /* achtergrond, donkere ankers */
  --papier:#F2F0EB;          /* warm papier, de lichte secties van het ritme */
  --verdiept:#111313;        /* vlakken die inhoud dragen */
  --wit:#EDEDEA;             /* tekst, en de achtergrond van de hoofdknop */
  --zacht:#B9BCB9;           /* lopende tekst */
  --stil:#8A8D8B;            /* labels, bijschriften, navigatie in rust */
  --accent:#B4342B;          /* alleen als markering: streep, nummer, randje */
  --accent-licht:#D6675C;    /* accent voor tekst en cijfers, leesbaar op zwart */
  --lijn:rgba(237,237,234,.11);
  --lijn-sterk:rgba(237,237,234,.22);
  /* functioneel palet, alleen binnen de ledenomgeving */
  --goed:#4CB07C; --let:#E0A33E; --laag:#D6675C; --neutraal:#8A8D8B;
  --goed-vlak:rgba(76,176,124,.09); --let-vlak:rgba(224,163,62,.09);
  --laag-vlak:rgba(214,103,92,.09); --neutraal-vlak:rgba(138,141,139,.08);

  --display:'Inter',system-ui,-apple-system,sans-serif;
  --tussen:'Inter',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --marge:clamp(20px,6vw,80px);
  --max:1280px;
  --kolomgat:clamp(18px,2.6vw,34px);
}

/* ----- Basis ----- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{
  margin:0;background:var(--veld);color:var(--zacht);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}
:focus{outline:none}
:focus-visible{outline:2px solid var(--wit);outline-offset:3px}
a{color:var(--wit);text-decoration:none}
p{margin:0 0 1em;max-width:62ch}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}

/* Paginatransitie: alleen een rustige overvloei, eenmalig */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-uit .25s var(--ease) both}
::view-transition-new(root){animation:vt-in .25s var(--ease) both}
@keyframes vt-uit{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ----- Typografie ----- */
h1,h2{
  font-family:var(--display);font-weight:600;color:var(--wit);
  letter-spacing:-.028em;margin:0;
  /* Nederlandse samenstellingen worden lang. Op een telefoon past
     "Annuleringsvoorwaarden" niet op een regel; met afbreking blijft de kop
     binnen de marge in plaats van de pagina opzij te duwen. */
  hyphens:auto;overflow-wrap:break-word;
}
h1{font-size:clamp(42px,5.6vw,76px);line-height:1.05}
h2{font-size:clamp(30px,4vw,54px);line-height:1.12}
h1 em,h2 em,.citaat em{font-style:normal;font-weight:400;color:var(--zacht)}
h3{
  font-family:var(--tussen);font-weight:600;color:var(--wit);
  font-size:clamp(18px,1.7vw,21px);line-height:1.35;margin:0;letter-spacing:-.01em;
}
h4{font-family:var(--body);font-weight:600;font-size:16px;color:var(--wit);margin:0}

.label{
  font-family:var(--body);font-weight:500;font-size:10.5px;line-height:1;
  letter-spacing:.24em;text-transform:uppercase;color:var(--stil);
  display:flex;align-items:center;gap:12px;margin:0 0 22px;
}
.label::before{content:'';width:2px;height:15px;background:var(--accent);flex:none}
.label--kaal::before{display:none}
/* Staat het label in een blok dat zelf al een accentrand links heeft, dan zou het
   streepje ernaast een tweede, kortere lijn geven. Een lijn is genoeg. */
.lesvak .label::before,.kader .label::before{display:none}

.subregel{
  font-family:var(--tussen);font-weight:400;color:var(--wit);
  font-size:clamp(18px,1.7vw,21px);line-height:1.5;margin:0 0 14px;max-width:38ch;
}
.stil{color:var(--stil)}
.klein{font-size:13.5px;line-height:1.6}

.tekstlink{
  display:inline-block;color:var(--wit);font-weight:500;font-size:15px;
  border-bottom:1px solid var(--lijn-sterk);padding-bottom:3px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.tekstlink:hover{border-color:var(--accent-licht)}

/* Subtiele merkverwijzing naar helveron.com: erft de omringende kleur, alleen accent bij hover. */
a.merklink{color:inherit;transition:color .3s var(--ease)}
a.merklink:hover,a.merklink:hover b{color:var(--accent-licht)}

/* ----- Layout ----- */
.schil{width:min(var(--max),100% - 2*var(--marge));margin-inline:auto}
.sectie{padding-block:clamp(64px,9vw,104px)}
.sectie+.sectie,.hairline-boven{border-top:1px solid var(--lijn)}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kolomgat)}
.plak{position:sticky;top:132px;align-self:start}
@media (max-width:880px){.plak{position:static}}

/* ----- Conceptstrip + topbalk ----- */
.conceptstrip{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stil);
  text-align:center;padding:9px var(--marge);border-bottom:1px solid var(--lijn);
  max-width:none;margin:0;
}
.topbalk{
  position:sticky;top:0;z-index:60;
  background:rgba(11,12,12,.86);border-bottom:1px solid var(--lijn);
}
@supports (backdrop-filter:blur(14px)){
  .topbalk{background:rgba(11,12,12,.62);backdrop-filter:blur(14px)}
}
.topbalk-binnen{display:flex;align-items:center;gap:32px;min-height:76px}
.merk{display:block;line-height:1}
.merk-zegel{display:inline-block;vertical-align:middle;width:36px;height:36px;margin-right:11px}
.merk-naam{display:inline-block;vertical-align:middle}
.merk b{font-family:var(--display);font-weight:600;font-size:20px;color:var(--wit);letter-spacing:-.02em}
.merk small{
  display:block;font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--stil);margin-top:4px;
  transition:color .3s var(--ease);
}
.merk:hover small{color:var(--accent-licht)}

/* Navigatie: merk links, paginalinks in het midden, acties rechts */
.nav{display:flex;align-items:center;flex:1;min-width:0}
.nav-links{display:flex;align-items:center;gap:30px;margin-inline:auto}
.nav-acties{display:flex;align-items:center;gap:10px}
.nav a{
  position:relative;font-size:15px;color:var(--stil);padding:6px 0;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent-licht);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:var(--wit)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav .knop,.nav .knop--rand{padding:12px 18px;font-size:14px}
.nav .knop::after,.nav .knop--rand::after{height:2px}
@media (max-width:1180px){.nav-links{gap:20px}}

.menu-knop{display:none;margin-left:auto;padding:10px;width:44px;height:44px;position:relative}
.menu-knop span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--wit);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.menu-knop span:nth-child(1){top:16px}
.menu-knop span:nth-child(2){top:22px}
.menu-knop span:nth-child(3){top:28px}
[data-menu-open] .menu-knop span:nth-child(1){transform:translateY(6px) rotate(45deg)}
[data-menu-open] .menu-knop span:nth-child(2){opacity:0}
[data-menu-open] .menu-knop span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1000px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--veld);border-bottom:1px solid var(--lijn-sterk);
    flex-direction:column;align-items:stretch;gap:0;padding:10px var(--marge) 22px;
  }
  [data-menu-open] .nav{display:flex}
  .nav-links,.nav-acties{display:contents}
  .nav a{
    padding:13px 0;font-size:16px;border-bottom:1px solid var(--lijn);
    border-image:linear-gradient(90deg,transparent,var(--lijn) 18%,var(--lijn) 82%,transparent) 1;
  }
  .nav a::after{display:none}
  .nav .knop,.nav .knop--rand{margin:16px 0 0;text-align:center;border-bottom:0}
  .menu-knop{display:block}
}

/* ----- Knoppen, kenmerken, status ----- */
/* Knoppen: een bouw, twee vullingen. Primair contrasteert met de ondergrond,
   secundair is gevuld in de ondergrondkleur met een haarlijn. Bij aanwijzen
   komt de knop een pixel mee en loopt een accentstreep onderlangs uit. */
.knop,.knop--rand{
  position:relative;display:inline-block;font-weight:500;font-size:15px;line-height:1;
  padding:16px 27px;border:1px solid transparent;overflow:hidden;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.knop{background:var(--wit);color:#0B0C0C;border-color:var(--wit)}
.knop--rand{background:#0B0C0C;color:#EDEDEA;border-color:var(--lijn-sterk)}
.knop::after,.knop--rand::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.knop--rand::after{background:var(--accent-licht)}
.knop:hover,.knop--rand:hover{transform:translateY(-1px)}
.knop:active,.knop--rand:active{transform:translateY(0)}
.knop:hover::after,.knop--rand:hover::after{transform:scaleX(1)}
/* #stand-knoppen (betalen.html/retour.js): knop en knop--rand zijn allebei
   inline-block met overflow:hidden, en dat verschuift bij een <button> de
   basislijn niet mee zoals bij een <a>. Zonder flex lijnen ze dus niet gelijk
   uit. */
#stand-knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (prefers-reduced-motion:reduce){
  .knop:hover,.knop--rand:hover{transform:none}
  .knop::after,.knop--rand::after{transition:none}
}
/* Inloggen: kleurt wit bij aanwijzen */
.knop--inloggen:hover{background:var(--wit);color:#0B0C0C;border-color:var(--wit)}
.knoppenrij{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.kenmerken{display:flex;flex-wrap:wrap;gap:8px}
.kenmerken li{
  font-size:12.5px;color:var(--zacht);border:1px solid var(--lijn);
  padding:7px 12px;line-height:1;
}
.volgt{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stil);
  border:1px dashed var(--lijn-sterk);padding:3px 7px;margin-left:8px;vertical-align:2px;
}

/* ----- Beeld ----- */
.foto{position:relative;overflow:hidden;background:var(--verdiept)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto--korrel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('../images/korrel.svg');background-size:300px;
}
/* Beeldplaatshouder. Besluit 03-08: geen beeld met clublogo's meer, en het
   nieuwe beeld van Winston is er nog niet. Het kader blijft staan zodat de
   opbouw van de pagina klopt en meteen zichtbaar is welk beeld nodig is.
   Hoekstreepjes uit dezelfde taal als het meetkader in de hero. */
.foto--wacht{
  --wacht-lijn:var(--lijn-sterk);
  --wacht-kop:var(--wit);
  --wacht-tekst:var(--stil);
  display:grid;place-content:center;justify-items:center;text-align:center;
  padding:clamp(16px,2.6vw,30px);
}
/* Hoekstreepjes binnen het kader, los van de achtergrond zodat de lichte en de
   donkere secties allebei hun eigen vlak houden. */
.foto--wacht::before{
  content:'';position:absolute;inset:10px;pointer-events:none;
  background:
    linear-gradient(var(--wacht-lijn),var(--wacht-lijn)) top left/14px 1px no-repeat,
    linear-gradient(var(--wacht-lijn),var(--wacht-lijn)) top left/1px 14px no-repeat,
    linear-gradient(var(--wacht-lijn),var(--wacht-lijn)) top right/14px 1px no-repeat,
    linear-gradient(var(--wacht-lijn),var(--wacht-lijn)) top right/1px 14px no-repeat,
    linear-gradient(var(--wacht-lijn),var(--wacht-lijn)) bottom left/14px 1px no-repeat,
    linear-gradient(var(--wacht-lijn),var(--wacht-lijn)) bottom left/1px 14px no-repeat,
    linear-gradient(var(--wacht-lijn),var(--wacht-lijn)) bottom right/14px 1px no-repeat,
    linear-gradient(var(--wacht-lijn),var(--wacht-lijn)) bottom right/1px 14px no-repeat;
}
.foto--wacht b{
  font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wacht-kop);
}
.foto--wacht b::before{
  content:'';display:block;width:2px;height:15px;background:var(--accent);margin:0 auto 12px;
}
.foto--wacht span{
  margin-top:10px;max-width:26ch;
  font-size:13px;line-height:1.55;color:var(--wacht-tekst);
}
.bijschrift{
  display:flex;justify-content:space-between;gap:16px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stil);
  padding-top:12px;border-top:1px solid var(--lijn);margin-top:14px;
}


/* ----- Vervaagde hero: beeld over de volle breedte, naar links oplossend -----
   Herontwerp 19-08, tweede slag. Het beeld pakt de hele hero, van rand tot
   rand, en vervaagt naar links steeds verder het veldzwart in: eerst met een
   verloop dat het beeld onder de titel praktisch dichtdekt, daarbovenop een
   onscherpte die naar links toeneemt. Zo staat de titel vrij en blijft rechts
   het beeld gewoon zichtbaar, zonder naad. De tekst moet boven het absolute
   beeld liggen, vandaar relative plus z-index op .hero-tekst.
   Branchecode blijft: monochroom archiefbeeld, warm licht, oversized type. */
.hero{position:relative;isolation:isolate;background:var(--veld);overflow:hidden}
.hero--vervaagd .schil{display:flex;align-items:center;min-height:min(88svh,840px)}
.hero-tekst{position:relative;z-index:1;width:min(560px,46%);padding-block:clamp(64px,8vw,104px)}
.hero--vervaagd h1{font-size:clamp(52px,7.4vw,108px);line-height:.98;letter-spacing:-.034em;margin-bottom:26px}
.hero--vervaagd h1 em{color:var(--accent-licht);font-weight:400}
.hero--vervaagd .subregel{color:var(--wit)}
.hero-beeld{position:absolute;inset:0}
.hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:64% 20%;filter:grayscale(1);
  /* 22-08: het hoofd stond achter de titel. De foto is 1280x720 en dekt op een
     breed scherm alleen verticaal af, dus object-position doet horizontaal
     niets. Vandaar een verschuiving naar rechts. Er ontstaat links een strook
     zonder beeld; die wordt afgedekt door .hero--vervaagd::after hieronder.
     Bewust geen scale: de bron is al anderhalf keer vergroot en elke extra
     zoom kost scherpte. */
  transform:translateX(28%);transform-origin:center}
/* Afdeklaag over het beeld. Ligt boven .hero-beeld en onder .hero-tekst (die
   heeft z-index 1), en loopt van dicht naar open zodat de naad op 28% niet te
   zien is en de tekst leesbaar blijft. */
.hero--vervaagd::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,var(--veld) 0%,var(--veld) 30%,rgba(11,12,12,.78) 42%,rgba(11,12,12,.34) 55%,rgba(11,12,12,0) 70%);
}
/* Het verloop draagt de leesbaarheid: links van 30% is het vlak dicht, bij de
   rechterrand van de tekstzone (46%) nog vrijwel dicht, daarna loopt het in
   stappen open tot het beeld bij 80% vrij staat. */
.hero-beeld::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(560px 380px at 78% -10%,rgba(214,103,92,.16),transparent 70%),
    linear-gradient(90deg,var(--veld) 30%,rgba(11,12,12,.94) 46%,rgba(11,12,12,.6) 58%,rgba(11,12,12,.22) 68%,rgba(11,12,12,0) 80%),
    linear-gradient(180deg,rgba(11,12,12,.3),rgba(11,12,12,0) 16%,rgba(11,12,12,0) 62%,rgba(11,12,12,.55)),
    url('../images/korrel.svg');
}
/* De vervaging zelf: onscherpte die naar links toeneemt, zodat het beeld onder
   de tekst oplost in plaats van er hard achter te verdwijnen. Het masker regelt
   de sterkte; zonder backdrop-filter doet het verloop het werk alleen. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-beeld::after{
    content:'';position:absolute;inset:0;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(90deg,#000 34%,rgba(0,0,0,.45) 54%,transparent 72%);
    mask-image:linear-gradient(90deg,#000 34%,rgba(0,0,0,.45) 54%,transparent 72%);
  }
}

@media (max-width:960px){
  .hero--vervaagd .schil{display:block;min-height:0}
  .hero-tekst{width:auto;max-width:560px;padding-block:clamp(48px,8vw,72px) 44px}
  /* relative, niet static: de ::before-overlay moet op het beeld blijven liggen,
     niet op de hele hero. De linkervervaging en de onscherpte vervallen, het
     beeld staat hier onder de tekst in plaats van erachter. */
  .hero-beeld{position:relative;inset:auto}
  /* Onder 960px staat het beeld onder de tekst; inzoomen en verschuiven hoort
     daar niet, anders valt het hoofd buiten beeld. */
  .hero-beeld img{height:auto;transform:none}
  .hero--vervaagd::after{content:none}
  .hero-beeld::before{
    background:
      linear-gradient(180deg,rgba(11,12,12,.25),rgba(11,12,12,0) 18%,rgba(11,12,12,0) 68%,rgba(11,12,12,.5)),
      url('../images/korrel.svg');
  }
  .hero-beeld::after{content:none}
}

/* Binnenkomst van de hero: het beeld wist zich open van links naar rechts en
   de tekst landt regel voor regel. Eén keer, klaar binnen 1,2s.
   Gehaakt aan html.js: zonder JavaScript staat alles er direct. */
html.js .hero--vervaagd .hero-tekst>*{animation:hero-instap .7s var(--ease) both}
html.js .hero--vervaagd .hero-tekst>:nth-child(1){animation-delay:60ms}
html.js .hero--vervaagd .hero-tekst>:nth-child(2){animation-delay:150ms}
html.js .hero--vervaagd .hero-tekst>:nth-child(3){animation-delay:240ms}
html.js .hero--vervaagd .hero-tekst>:nth-child(4){animation-delay:330ms}
html.js .hero--vervaagd .hero-tekst>:nth-child(5){animation-delay:420ms}
html.js .hero--vervaagd .hero-beeld{animation:hero-wissen .9s var(--ease) 120ms both}
@keyframes hero-instap{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hero-wissen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  html.js .hero--vervaagd .hero-tekst>*,
  html.js .hero--vervaagd .hero-beeld{animation:none}
}

.heeft-gloed{position:relative;overflow:hidden}
.heeft-gloed::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(640px 400px at 84% -12%,rgba(214,103,92,.13),transparent 70%);
}

/* ----- Donker-licht-ritme: papier-secties (token-shim) -----
   Donkere hero en donker slot als ankers, de rest op warm papier.
   Componenten draaien mee doordat alleen de tokens omklappen. */
.licht{
  background:var(--papier);
  /* --stil ging van #7A7C76 naar #6D6E69. De oude waarde haalde 3,71 op 1 op
     papier en 4,22 op wit, allebei onder de 4,5 die voor tekst onder 18px geldt.
     Het raakt labels, bijschriften en de regels onder een kop, dus veel kleine
     tekst tegelijk. Nieuwe waarde: 4,51 op papier en 5,14 op wit. Dezelfde tint,
     alleen donkerder. In het donkere thema blijft #8A8D8B staan; daar klopt hij. */
  --wit:#151614;--zacht:#454743;--stil:#6D6E69;
  --lijn:rgba(21,22,20,.13);--lijn-sterk:rgba(21,22,20,.27);
  --verdiept:#FFFFFF;--accent-licht:#B4342B;
  /* 14-08-2026: --veld ontbrak in deze shim. Buiten de shim is het de zwarte
     paginakleur; binnen een lichte sectie is het het vlak van een invoerveld.
     Zonder deze regel kreeg het zoekveld in het beheer een zwarte achtergrond met
     --wit erop, en --wit is binnen de shim juist donker: 1,08 op 1, in de praktijk
     onzichtbaar. Zie .blijst-gereedschap. */
  --veld:#FFFFFF;
  color:var(--zacht); /* geërfde bodykleur opnieuw laten oplossen binnen de shim */
}
.licht .kaart--verdiept{color:var(--zacht)}
.licht+.licht{border-top:1px solid rgba(21,22,20,.13)}
.licht .knop{background:#151614;color:#F2F0EB;border-color:#151614}
.licht .knop:hover{background:#000}
.licht .knop--rand{background:#FFFFFF;color:#151614;border-color:rgba(21,22,20,.27)}
.licht .kaart--verdiept .knop--rand{background:#0B0C0C;color:#EDEDEA;border-color:rgba(237,237,234,.22)}
.licht .foto{background:#E8E5DE}
.licht .foto--wacht{--wacht-lijn:rgba(21,22,20,.26);--wacht-kop:#151614;--wacht-tekst:rgba(21,22,20,.6)}
.licht .kaart--verdiept{
  background:#111313;border-color:#111313;
  --wit:#EDEDEA;--zacht:#B9BCB9;--stil:#8A8D8B;
  --lijn:rgba(237,237,234,.11);--lijn-sterk:rgba(237,237,234,.22);
  --accent-licht:#D6675C;
  /* Deze kaart is donker binnen een lichte sectie, dus alles wat naar de lichte
     kant is gezet moet hier terug. Dat geldt voor --veld hierboven en voor het
     functionele palet dat .app-werk zet: op zwart zakt dat lichte palet naar
     3,1 tot 3,7 op 1. Vandaag staat er geen kaart--verdiept in de twee apps, dus
     dit is voorkomen en geen reparatie. Zet iemand er wel een neer, dan klopt hij
     meteen. */
  --veld:#0B0C0C;
  --goed:#4CB07C; --let:#E0A33E; --laag:#D6675C; --neutraal:#8A8D8B;
  --goed-vlak:rgba(76,176,124,.09); --let-vlak:rgba(224,163,62,.09);
  --laag-vlak:rgba(214,103,92,.09); --neutraal-vlak:rgba(138,141,139,.08);
}
.licht .kaart--verdiept .knop{background:var(--wit);color:#0B0C0C}

/* Prijstrap: de vier niveaus van de cursus lopen van papierwit naar zwart mee met de prijs.
   Trap 2 tot en met 4 dragen ook kaart--verdiept en zetten daarvan alleen het vlak lager. */
.licht .kaart--trap1{background:#FFFFFF}
.licht .kaart--trap2{background:#3A3C39;border-color:#3A3C39;--stil:#ABAEAC}
.licht .kaart--trap3{background:#202220;border-color:#202220}
.licht .kaart--trap4{background:#0B0C0C;border-color:#0B0C0C}
.licht .fotoslot{background:#FFFFFF}
.licht .bevestiging{background:#FFFFFF}
.licht .kader{background:#FFFFFF}
.licht .topbalk{background:rgba(11,12,12,.86)}

/* Randlicht: haarlijn die in het midden oplicht, op aangewezen donkere vlakken */
.rim{position:relative}
.rim::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;z-index:5;
  background:linear-gradient(90deg,transparent 22%,rgba(214,103,92,.8) 50.5%,transparent 78%);
}

/* Leesvoortgang: dunne rode balk bovenaan, gekoppeld aan de scrollpositie */
.lees-balk{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:90;
  background:var(--accent-licht);transform:scaleX(0);transform-origin:left;
}

/* ----- Feitenband (loopbaan) ----- */
.band{border-bottom:1px solid var(--lijn)}
.band-raster{display:grid;grid-template-columns:repeat(6,1fr)}
.band-cel{
  border-top:1px solid var(--lijn);position:relative;
  padding:clamp(18px,2.4vw,30px) clamp(16px,2vw,28px);min-width:0;
}
.band-cel::before{
  content:'';position:absolute;left:0;top:10%;bottom:10%;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--lijn) 38%,var(--lijn) 62%,transparent);
}
.band-cel:first-child::before{display:none}
.band-cel .label{margin-bottom:12px}
.cel-accent strong{color:var(--accent-licht)}
a.band-cel{display:block;transition:background .35s var(--ease)}
a.band-cel:hover{background:rgba(214,103,92,.05)}
a.band-cel strong{transition:color .35s var(--ease)}
a.band-cel:hover strong{color:var(--accent-licht)}
.band-cel strong{
  font-family:var(--display);font-weight:500;color:var(--wit);
  font-size:clamp(15.5px,1.5vw,18.5px);line-height:1.3;display:block;letter-spacing:-.01em;
}
@media (max-width:1080px){
  .band-raster:not(.band-raster--vier){grid-template-columns:repeat(3,1fr)}
  .band-raster:not(.band-raster--vier) .band-cel:nth-child(3n+1)::before{display:none}
}
@media (max-width:640px){
  .band-raster:not(.band-raster--vier){grid-template-columns:repeat(2,1fr)}
  .band-raster:not(.band-raster--vier) .band-cel:nth-child(n)::before{display:block}
  .band-raster:not(.band-raster--vier) .band-cel:nth-child(2n+1)::before{display:none}
}
.band-raster--vier{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){
  .band-raster--vier{grid-template-columns:repeat(2,1fr)}
  .band-raster--vier .band-cel:nth-child(n)::before{display:block}
  .band-raster--vier .band-cel:nth-child(2n+1)::before{display:none}
}
/* Telefoon: elke cel op een eigen regel. Twee cellen naast elkaar geeft nog geen
   140px per cel, en daar past een label als "Demonstratietraining" niet in; die
   liep dan buiten zijn cel. De scheidingslijntjes horen bij kolommen, dus die
   gaan hier uit; de bovenrand van de cel scheidt de regels al. */
@media (max-width:480px){
  .band-raster,.band-raster--vier{grid-template-columns:1fr}
  .band-raster .band-cel:nth-child(n)::before{display:none}
}
/* Drie cellen: onder de 760 px onder elkaar, want twee plus een laat een gat vallen. */
.band-raster.band-raster--drie{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){
  .band-raster.band-raster--drie{grid-template-columns:1fr}
  .band-raster.band-raster--drie .band-cel::before{display:none}
}

/* ----- Wie het je leert ----- */
.leert-raster{row-gap:44px}
.leert-kop{grid-column:1/6}
.leert-kop h2{margin-bottom:24px}
/* align-items:start houdt de foto op zijn eigen hoogte. Zonder dat rekt de
   figure mee met de lijst ernaast, en omdat het kader aan de figure hangt en de
   foto zelf een vaste verhouding heeft, bleef er een leeg stuk kader onder het
   beeld staan (zichtbaar tussen 640px en 880px). */
.leert-inhoud{grid-column:6/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--kolomgat);row-gap:44px;align-items:start}
.leert-foto{grid-column:1/2}
.leert-foto .foto{aspect-ratio:3/4}
.leert-lijst{grid-column:2/3;min-width:0}
.leert-lijst--breed{grid-column:1/3}
.lijstkop{display:flex;align-items:baseline;gap:14px;margin:0 0 6px}
.lijstkop b{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,24px);color:var(--accent-licht);letter-spacing:-.01em}
.lijstkop span{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--stil);font-weight:500}
.lijstrijen li{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--lijn);
}
.lijstrijen li:first-child{border-top:1px solid var(--lijn)}
.lijstrijen b{font-weight:500;font-size:15px;color:var(--wit)}
.lijstrijen span{font-size:12.5px;color:var(--stil);text-align:right;flex:none}
@media (max-width:880px){
  .leert-kop{grid-column:1/13}
  .leert-inhoud{grid-column:1/13}
}
@media (max-width:640px){
  .leert-inhoud{grid-template-columns:1fr}
  .leert-foto{grid-column:1;max-width:340px}
  .leert-lijst,.leert-lijst--breed{grid-column:1}
}

/* ----- De achtergrond: tekst links, foto rechts, direct onder de paginakop.
   Op winston.html het vierkante studioportret (op zwart geschoten, lost op in
   het veld); op academy.html de staande veldfoto via --staand, in de eigen
   verhouding zodat pet en hand niet worden afgesneden. ----- */
.achtergrond-raster{row-gap:44px}
.achtergrond-tekst{grid-column:1/6;align-self:center}
.achtergrond-tekst h2{margin-bottom:24px}
.achtergrond-foto{grid-column:7/13;margin:0}
.achtergrond-foto .foto{aspect-ratio:1/1;background:none}
.achtergrond-foto--staand .foto{aspect-ratio:1023/1278}
@media (max-width:880px){
  .achtergrond-tekst{grid-column:1/13}
  .achtergrond-foto{grid-column:1/13;max-width:520px}
}

/* ----- Citaatband ----- */
.citaat{background:var(--verdiept);border-block:1px solid var(--lijn)}
.citaat blockquote{
  margin:0;font-family:var(--display);font-weight:500;color:var(--wit);
  font-size:clamp(26px,3.6vw,46px);line-height:1.18;letter-spacing:-.024em;max-width:24ch;
}
.citaat figcaption{margin-top:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stil)}
/* margin-block nul: de figure binnenin heeft een browsermarge die anders door de sectie
   heen zakt en boven de randlijn een zwarte strook laat staan. */
.citaat .schil{padding-block:clamp(56px,7vw,88px);margin-block:0}

/* ----- Methode-index ----- */
.methode-kop{grid-column:1/5}
.methode-kop h2{margin-bottom:24px}
.methode-index{grid-column:5/13}
.methode-rij{
  display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:var(--kolomgat);
  padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--lijn);
}
.methode-rij:first-child{border-top:1px solid var(--lijn)}
.methode-rij i{
  font-family:var(--display);font-style:normal;font-weight:500;font-size:15px;
  color:var(--accent-licht);line-height:1.9;letter-spacing:.06em;
}
.methode-rij h3{margin-bottom:10px}
.methode-rij p{max-width:56ch}
.methode-rij .kenmerken{margin-top:14px}

@media (max-width:880px){
  .methode-kop{grid-column:1/13;margin-bottom:36px}
  .methode-index{grid-column:1/13}
  .methode-rij{grid-template-columns:52px minmax(0,1fr)}
}

/* Modulelijst: de acht modules als genummerde rijen in plaats van een lopende
   opsomming in een kader. De volgorde is vast, dus de nummers dragen echte
   informatie. Kolomsgewijs gevuld: 01 tot 04 links, 05 tot 08 rechts. */
.module-lijst h3{margin-bottom:6px}
.module-rijen{list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,minmax(0,auto));
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--kolomgat)}
.module-rijen li{display:flex;align-items:baseline;gap:14px;padding:12px 2px;border-bottom:1px solid var(--lijn)}
.module-rijen li:nth-child(4n+1){border-top:1px solid var(--lijn)}
.module-rijen i{font-style:normal;font-family:var(--display);font-weight:500;
  font-size:12.5px;color:var(--accent-licht);letter-spacing:.06em;flex:none;line-height:1.6}
.module-rijen b{font-weight:600;font-size:14.5px;color:var(--wit);letter-spacing:-.005em;line-height:1.4}
.module-lijst .naschrift{margin-top:14px}
@media (max-width:640px){
  .module-rijen{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:minmax(0,1fr)}
  .module-rijen li:nth-child(4n+1){border-top:0}
  .module-rijen li:first-child{border-top:1px solid var(--lijn)}
}

/* ----- Voor wie (leeftijdsgroepen) ----- */
.wie-kop{max-width:720px;margin-bottom:clamp(36px,5vw,56px)}
.wie-kop h2{margin-bottom:24px}
.groepen{display:grid;grid-template-columns:repeat(3,1fr)}
.groep{position:relative;padding:6px clamp(18px,2.4vw,34px) 2px;min-width:0}
.groep::before{
  content:'';position:absolute;left:0;top:6%;bottom:6%;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--lijn) 38%,var(--lijn) 62%,transparent);
}
.groep:first-child{padding-left:0}
.groep:first-child::before{display:none}
.groep b{
  display:block;font-family:var(--display);font-weight:600;color:var(--wit);
  font-size:clamp(24px,2.4vw,34px);line-height:1;margin-bottom:14px;letter-spacing:-.02em;
}
.groep h3{font-size:17px;font-family:var(--body);font-weight:600;margin-bottom:8px}
.groep p{font-size:15px;max-width:34ch}
@media (max-width:760px){
  .groepen{grid-template-columns:1fr}
  .groep{border-top:1px solid var(--lijn);padding:22px 0 18px}
  .groep::before{display:none}
  .groep:first-child{border-top:0;padding-top:0}
}

/* ----- Aanbod / prijskaarten ----- */
.aanbod-kop{max-width:720px;margin-bottom:clamp(36px,5vw,56px)}
.aanbod-kop h2{margin-bottom:24px}
.kaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kolomgat)}
.kaart{
  border:1px solid var(--lijn-sterk);padding:clamp(28px,3.6vw,44px);
  display:flex;flex-direction:column;min-width:0;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.kaart:hover{border-color:rgba(214,103,92,.5);transform:translateY(-2px)}
.kaart--verdiept{background:var(--verdiept);border-color:var(--lijn)}
@media (prefers-reduced-motion:reduce){.kaart:hover{transform:none}}
.kaart .label{margin-bottom:18px}
.prijs{font-family:var(--display);font-weight:600;color:var(--wit);font-size:clamp(38px,3.8vw,54px);line-height:1;margin:0;letter-spacing:-.02em}
.prijs-sub{font-size:13px;color:var(--stil);margin:10px 0 0}
/* Ledenprijs onder de prijsregel: doorgestreept wat het normaal kost,
   ernaast wat een academylid betaalt. Alleen bij producten met dat veld. */
.prijs-leden{font-size:13px;color:var(--stil);margin:4px 0 0}
.prijs-leden s{opacity:.7;margin-right:2px}
.kaart-rijen{margin:26px 0 30px}
.kaart-rijen li{padding:11px 0;border-bottom:1px solid var(--lijn);font-size:14.5px;color:var(--zacht)}
.kaart-rijen li:first-child{border-top:1px solid var(--lijn)}
.kaart .knop,.kaart .knop--rand{margin-top:auto;text-align:center}
.kaarten--drie{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.kaarten--drie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.kaarten,.kaarten--drie{grid-template-columns:1fr}}

/* Verspringende kaarten: de bovenranden verspringen per kolom, de onderranden
   blijven op één lijn doordat het raster de hoogte verrekent. Alleen zolang er
   kolommen naast elkaar staan; zodra de rij breekt vervalt de trap. */
@media (min-width:761px){
  .kaarten--verspringend>.kaart:nth-child(even){margin-top:34px}
}
@media (min-width:1001px){
  .kaarten--verspringend.kaarten--drie>.kaart:nth-child(even){margin-top:0}
  .kaarten--verspringend.kaarten--drie>.kaart:nth-child(3n+2){margin-top:34px}
  .kaarten--verspringend.kaarten--drie>.kaart:nth-child(3n){margin-top:68px}
}

/* Dienstkaarten (clubs en teams): kenmerken staan altijd onderaan uitgelijnd,
   ook als de ene kaart meer tekst heeft dan de andere. */
.dienst h3{margin-bottom:12px}
.dienst .kenmerken{margin-top:auto;padding-top:26px}
.dienst-link{margin-top:18px;align-self:flex-start}
.mindset{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  column-gap:var(--kolomgat);align-items:start}
.mindset h3{margin-bottom:14px}
.mindset-tekst p+p{margin-top:14px}
.mindset-zij .dienst-link{display:inline-block}
@media (max-width:760px){.mindset{grid-template-columns:1fr;row-gap:26px}}

/* ----- Slotblok ----- */
.slot{text-align:left}
.slot h2{font-size:clamp(36px,4.8vw,66px);max-width:14ch}
.slot p{margin:26px 0 0;max-width:44ch}
.slot .knoppenrij{margin-top:36px}

/* ----- Footer ----- */
.voet{border-top:1px solid var(--lijn);padding-block:clamp(48px,6vw,72px) 36px}
.voet-lockup{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.voet-zegel{display:block;width:clamp(40px,4.6vw,48px);height:auto;margin:0;flex:none}
.voet-merk{display:block;margin:0}
/* 22-08: de voet gebruikt dezelfde opbouw als het merk in de navigatie, naam
   boven en ACADEMY eronder, alleen groter. De naam is van Bogarde naar Winston
   Bogarde gegaan en dat is ruim twee keer zo breed, vandaar een kleinere
   bovengrens dan de 56px die er stond. */
.voet-merk b{
  display:block;font-family:var(--display);font-weight:600;color:var(--wit);
  font-size:clamp(26px,3.2vw,42px);line-height:1;letter-spacing:-.024em;
}
.voet-merk small{
  display:block;font-family:var(--body);font-weight:500;
  font-size:clamp(9.5px,.72vw,11.5px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--stil);margin-top:8px;
}
.voet-sub{font-size:13.5px;color:var(--stil);margin:0}
/* De kop van de voet: merk links, kitpartner rechts op dezelfde hoogte. */
.voet-kop{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:26px 40px;margin-bottom:clamp(36px,5vw,56px);
}
.voet-kop-links{min-width:0}
.voet-kolommen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kolomgat);row-gap:36px}
.voet-kolom{grid-column:span 3;min-width:0}
.voet-kolom--breed{grid-column:span 6}
.voet-kolom .label{margin-bottom:16px}
.voet-kolom li{padding:5px 0}
.voet-kolom a{color:var(--zacht);font-size:14.5px;transition:color .3s var(--ease)}
.voet-kolom a:hover{color:var(--wit)}
.voet-kolom .stil{font-size:13.5px}
/* smal scherm: laat de 'volgt'-badge onder het label vallen ipv buiten beeld.
   .voet-kolom ul li a krijgt hier min-width:0: als flex-item krimpt een link
   anders niet mee onder zijn eigen tekstbreedte, en een los, lang woord als
   "Annuleringsvoorwaarden" duwt de pagina dan buiten het scherm (21 px
   overloop op 320 px, gemeten 17 augustus). */
@media (max-width:480px){
  .voet-kolom ul li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .voet-kolom ul li a{min-width:0;overflow-wrap:break-word}
  .voet-kolom .volgt{margin-left:0}
}
/* Kitpartner. Het logo is een mask en geen <img>: het bronbestand vult met
   currentColor, en een losstaande SVG in een <img> kent die kleur niet, dus dan
   viel het zwarte woordmerk weg tegen de donkere voet. Met mask bepaalt
   background-color de kleur en blijft hetzelfde bestand bruikbaar op licht.
   Poot en woordmerk zijn twee uitsnedes van hetzelfde bronlogo, zodat de poot
   groter boven de letters kan staan zonder nieuw materiaal van Kelme. */
.voet-partner{
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none;
  text-align:right;font-size:12.5px;color:var(--stil);
}
.voet-partner a{display:flex;flex-direction:column;align-items:center;gap:9px}
.voet-partner-poot,.voet-partner-woord{
  display:block;flex:none;background-color:var(--zacht);
  background-repeat:no-repeat;
  transition:background-color .3s var(--ease);
}
.voet-partner-poot{
  width:clamp(52px,7vw,66px);aspect-ratio:34.19/26.29;
  -webkit-mask:url(../images/merk/kelme-poot.svg) no-repeat center/contain;
  mask:url(../images/merk/kelme-poot.svg) no-repeat center/contain;
}
.voet-partner-woord{
  width:clamp(112px,15vw,142px);aspect-ratio:176.59/26.88;
  -webkit-mask:url(../images/merk/kelme-woordmerk.svg) no-repeat center/contain;
  mask:url(../images/merk/kelme-woordmerk.svg) no-repeat center/contain;
}
.voet-partner a:hover .voet-partner-poot,
.voet-partner a:hover .voet-partner-woord{background-color:var(--wit)}

.voet-onder{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  margin-top:clamp(40px,5vw,60px);padding-top:22px;border-top:1px solid var(--lijn);
  font-size:12.5px;color:var(--stil);
}
@media (max-width:880px){
  .voet-kolom{grid-column:span 6}
  .voet-kolom--breed{grid-column:1/13}
  .voet-kop{flex-direction:column;gap:30px}
  .voet-partner{align-items:flex-start;text-align:left}
}

/* ----- Paginakop (subpagina's) ----- */
.pagina-kop{padding-block:clamp(52px,6.4vw,84px) clamp(36px,4.6vw,56px)}
.pagina-kop h1{margin-bottom:22px}
.pagina-kop .intro{max-width:62ch}

/* ----- Kader: uitgelicht blok met rode streep ----- */
.kader{border:1px solid var(--lijn);border-left:2px solid var(--accent);background:var(--verdiept);padding:clamp(22px,3vw,32px)}
.kader h3{margin-bottom:10px}
.kader p{max-width:60ch}

/* ----- Tijdlijn (loopbaan) ----- */
.tijdlijn-rij{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:var(--kolomgat);padding:clamp(24px,3vw,32px) 0;border-bottom:1px solid var(--lijn)}
.tijdlijn-rij:first-child{border-top:1px solid var(--lijn)}
.tijdlijn-rij time{font-weight:600;font-size:14px;color:var(--accent-licht);letter-spacing:.02em;line-height:1.9}
.tijdlijn-rij h3{margin-bottom:8px}
.tijdlijn-rij p{max-width:58ch}
.tijdlijn-rij .kenmerken{margin-top:14px}
@media (max-width:760px){
  .tijdlijn-rij{grid-template-columns:1fr;row-gap:6px}
}

/* ----- Collage (foto-essay) ----- */
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--kolomgat)}
.collage figure{margin:0;min-width:0}
.collage .foto{aspect-ratio:3/4}
.c-lig .foto{aspect-ratio:4/3}
.c-breed .foto{aspect-ratio:16/9}
/* Kaders in een rij zijn niet even hoog. Hang ze onderaan uit, dan lopen de
   bijschriften van de hele rij over een lijn. Tekstblokken blijven bovenaan staan. */
.collage figure{align-self:end}
.c-5{grid-column:span 5}
.c-7{grid-column:span 7}
.c-4{grid-column:span 4}
.c-12{grid-column:span 12}
.c-8{grid-column:span 8}
.c-3{grid-column:span 3}
.c-6{grid-column:span 6}
/* Staand archiefbeeld: 2:3 sluit aan bij de aangeleverde kleurfoto's, zodat er
   nauwelijks iets van de uitsnede af hoeft. */
.collage .c-hoog .foto{aspect-ratio:2/3}
/* Toont het beeld helemaal, zonder uitsnede: de hoogte volgt de foto zelf.
   Voor archiefbeeld waar een vaste verhouding koppen of voeten zou afsnijden. */
.collage .foto--vrij{aspect-ratio:auto;background:none}
.foto--vrij img{height:auto;display:block}
@media (max-width:760px){
  .c-5,.c-6,.c-7,.c-8{grid-column:span 12}
  .c-4,.c-3{grid-column:span 6}
}
@media (max-width:520px){
  .c-4,.c-3{grid-column:span 12}
  /* .c-3 blijft twee op een rij: de bronbestanden zijn te klein om schermvullend te tonen. */
}

/* ----- Fotoslot: leeg beeldvak is beter dan een geleend beeld ----- */
.fotoslot{
  border:1px dashed var(--lijn-sterk);background:var(--verdiept);
  display:grid;place-content:center;text-align:center;row-gap:8px;
  padding:40px;min-height:220px;
}
.fotoslot b{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--stil);font-weight:500}
.fotoslot span{font-size:13.5px;color:var(--stil);max-width:44ch}

/* ----- Formulieren (demonstratie) ----- */
.formulier{max-width:780px}
.veldgroep{border:0;padding:28px 0 6px;margin:0;border-top:1px solid var(--lijn)}
.veldgroep legend{padding:0 0 18px;font-weight:600;font-size:16px;color:var(--wit);float:left;width:100%}
.veldgroep legend+*{clear:both}
.veldrij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.veldrij--een{grid-template-columns:1fr}
@media (max-width:640px){.veldrij{grid-template-columns:1fr}}
.veld{display:block;min-width:0}
.veld>span{display:block;font-size:12.5px;font-weight:500;color:var(--stil);margin-bottom:7px}
.veld input,.veld select,.veld textarea{
  width:100%;background:var(--verdiept);border:1px solid var(--lijn);color:var(--wit);
  padding:13px 14px;font:inherit;font-size:15px;line-height:1.4;border-radius:0;
  transition:border-color .3s var(--ease);
}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--accent-licht);outline:none}
.veld select{
  appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238A8D8B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.veld textarea{min-height:110px;resize:vertical}
.veld input::placeholder,.veld textarea::placeholder{color:var(--stil)}
.akkoord{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--lijn);font-size:14px;color:var(--zacht)}
.akkoord:last-of-type{border-bottom:1px solid var(--lijn)}
.akkoord input{width:17px;height:17px;margin-top:3px;accent-color:var(--accent);flex:none}
.akkoord input:focus-visible{outline:2px solid var(--wit);outline-offset:2px}
.keuze{display:flex;gap:12px;align-items:flex-start;padding:13px 0;font-size:14.5px;color:var(--zacht)}
.keuze input{width:17px;height:17px;margin-top:3px;accent-color:var(--accent);flex:none}
.formulier .knop{width:100%;text-align:center;margin-top:28px}
.demo-nota{font-size:12.5px;color:var(--stil);margin-top:12px;text-align:center}
.bevestiging{display:none;border:1px solid var(--lijn);border-left:2px solid var(--accent);background:var(--verdiept);padding:24px 26px;margin-top:30px}
.bevestiging.is-open{display:block}
.bevestiging h3{margin-bottom:8px}

/* ----- Vragen (native details, geen JS nodig) ----- */
.vraag{border-top:1px solid var(--lijn)}
.vraag:last-of-type{border-bottom:1px solid var(--lijn)}
.vraag summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;padding:19px 0;font-weight:600;font-size:16px;color:var(--wit);
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:'+';font-weight:300;font-size:24px;line-height:.8;color:var(--stil);transition:transform .3s var(--ease),color .3s var(--ease);flex:none}
.vraag summary:hover::after{color:var(--accent-licht)}
.vraag[open] summary::after{transform:rotate(45deg);color:var(--accent-licht)}
.vraag summary:focus-visible{outline:2px solid var(--wit);outline-offset:3px}
.vraag p{padding:0 0 20px;max-width:60ch}

/* ----- Ledenomgeving (portaal-demo) -----
   Op de website is kleur karakter; hier is kleur informatie. Dit functionele
   palet blijft binnen het portaal en lekt niet naar de site. */
.avatar{width:42px;height:42px;border:1px solid var(--lijn-sterk);display:grid;place-content:center;font-weight:600;font-size:13.5px;color:var(--wit);flex:none}
.pkaart{background:var(--verdiept);border:1px solid var(--lijn);padding:clamp(20px,2.6vw,30px);min-width:0}
.pkaart h3{font-size:16px;margin-bottom:16px}

.status{
  display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;border:1px solid var(--lijn-sterk);padding:4px 9px;color:var(--zacht);white-space:nowrap;
}
.status--ok{color:var(--goed);border-color:rgba(76,176,124,.45);background:var(--goed-vlak)}
.status--nieuw{color:var(--let);border-color:rgba(224,163,62,.45);background:var(--let-vlak)}
.status--laag{color:var(--laag);border-color:rgba(214,103,92,.45);background:var(--laag-vlak)}
.status--open{color:var(--zacht);border-color:var(--lijn-sterk);background:var(--neutraal-vlak)}
.status--uit{color:var(--stil);border-style:dashed;background:none}
.status--contant{color:var(--goed);border-color:rgba(76,176,124,.45);border-style:dashed;background:none}
/* Punt 23. Dezelfde chips, maar benoemd naar het token in plaats van naar de
   betekenis, zodat de tabel in sessie.js een op een af te lezen is in de
   opmaak. De oude namen blijven staan: de demobestanden gebruiken die nog. */
.status--goed{color:var(--goed);border-color:rgba(76,176,124,.45);background:var(--goed-vlak)}
.status--let{color:var(--let);border-color:rgba(224,163,62,.45);background:var(--let-vlak)}
.status--neutraal{color:var(--neutraal);border-color:var(--lijn-sterk);background:var(--neutraal-vlak)}

.prij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 14px;padding:11px 0;border-top:1px solid var(--lijn);font-size:14px}
.prij:first-of-type{border-top:0}
.prij b{font-weight:500;color:var(--wit);font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.prij>span:last-child,.prij>.status{text-align:right;min-width:0;max-width:100%}
/* cursusrij: [Openen + titel] links, voortgang in het midden, toegang rechts */
/* Zelfde opbouw als de cursistenlijst in het beheer: titel en bijschrift op een
   regel, de balk daaronder over de volle breedte. Een balk in een middenkolom is
   altijd te smal om iets te zeggen. */
.crij{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;
  padding:14px 0;border-top:1px solid var(--lijn);font-size:14px}
.crij:first-of-type{border-top:0}
.crij-links{display:flex;align-items:center;gap:12px;min-width:0}
.crij-links b{font-weight:500;color:var(--wit);font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.crij-links .tekstlink{flex:none}
/* Vaste breedte, anders is de balk net zo smal als het tekstje erboven. */
.crij-links{grid-column:1;grid-row:1}
.crij-toegang{grid-column:2;grid-row:1;justify-self:end;text-align:right;font-size:13px;color:var(--stil)}
.crij-voortgang{grid-column:1/-1;grid-row:2;display:block;width:100%;
  text-align:right;font-size:12.5px;color:var(--stil);white-space:nowrap}
.crij-voortgang .voortgang-rail{display:block;width:100%;height:8px;margin-top:6px}
@media (max-width:640px){
  .crij{grid-template-columns:1fr;row-gap:4px}
  .crij-links{grid-row:1}
  .crij-toegang{grid-column:1;grid-row:2;justify-self:start;text-align:left}
  .crij-voortgang{grid-row:3;text-align:left}
}

.pstat .label{margin-bottom:10px}
.pstat strong{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em}
.pstat .klein{margin-top:6px}

.legenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.legenda span{font-size:12px;color:var(--stil);display:flex;align-items:center;gap:8px}
.legenda i{width:10px;height:4px;flex:none}

/* ----- Portaal-app (naar het model van het BLS-klantportaal) ----- */
.auth{
  min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr;
  position:relative;overflow:hidden;
}
.auth-midden{display:grid;place-items:center;align-content:center;padding:32px var(--marge);position:relative;z-index:1}

/* Achtergrond van de inlog. Twee gloedvlekken in de merkkleur die heel traag drijven;
   op de demopagina's is dit de hele fond, op de echte inlog liggen ze over de foto.
   Overmaat zodat de rand nooit in beeld schuift, stil bij verminderde beweging. */
.auth::before{
  content:'';position:absolute;inset:-22%;pointer-events:none;
  background:
    radial-gradient(52vmax 38vmax at 74% 16%,rgba(214,103,92,.13),transparent 70%),
    radial-gradient(46vmax 36vmax at 12% 84%,rgba(180,52,43,.10),transparent 72%);
  animation:auth-drift 64s ease-in-out infinite alternate;
}
.auth::after{
  content:'';position:absolute;inset:-22%;pointer-events:none;z-index:0;
  background:
    radial-gradient(46vmax 34vmax at 76% 14%,rgba(214,103,92,.14),transparent 70%),
    radial-gradient(40vmax 32vmax at 10% 86%,rgba(180,52,43,.10),transparent 72%);
  animation:auth-drift-tegen 88s ease-in-out infinite alternate;
}
@keyframes auth-drift{
  from{transform:translate3d(-1.6%,-1.2%,0)}
  to{transform:translate3d(1.6%,1.2%,0)}
}
@keyframes auth-drift-tegen{
  from{transform:translate3d(1.4%,1.8%,0)}
  to{transform:translate3d(-1.4%,-1.8%,0)}
}
@media (prefers-reduced-motion:reduce){
  .auth::before,.auth::after,.auth-fond img{animation:none}
}

/* De echte inlog (inloggen.html) draagt .auth--vol: één rij zodat de kaart centreert,
   en een typografische fond: twee reuzenregels "Master of Mindset" in contourletters
   die heel traag langsdrijven, de bovenste wit, de onderste in de merkkleur en de
   andere kant op. Daaroverheen dezelfde korrel als de hero en een licht vignet dat
   het midden rustig houdt voor de kaart. */
.auth--vol{grid-template-rows:1fr}
.auth-fond{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* Geen contourlijn maar een gevulde letter met een zacht verloop. Inter bouwt
   sommige letters (t, e) uit overlappende deelvormen en een tekstcontour tekent
   die interne naden mee; bij een vulling via background-clip telt overlap niet.
   De tinten zijn de merktinten alvast gemengd met de achtergrond (#0B0C0C). */
.auth-woord{
  position:absolute;left:0;display:flex;white-space:nowrap;
  font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.03em;
  font-size:clamp(110px,17vw,250px);
  color:#181919;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .auth-woord{
    color:transparent;
    background:linear-gradient(180deg,#212222 0%,#141515 100%);
    -webkit-background-clip:text;background-clip:text;
  }
  .auth-woord--twee{background:linear-gradient(180deg,#241614 0%,#130E0D 100%)}
}
.auth-woord span{flex:none;padding-right:.55em}
.auth-woord--een{top:6%;animation:woord-drift 150s linear infinite}
.auth-woord--twee{
  bottom:6%;animation:woord-drift 190s linear infinite reverse;
  color:#151010;
}
@keyframes woord-drift{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.auth-fond::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(88% 74% at 50% 50%,rgba(11,12,12,0) 0,rgba(11,12,12,.28) 58%,rgba(11,12,12,.62) 100%);
}
.auth-fond::after{
  content:'';position:absolute;inset:0;background:url('../images/korrel.svg');
}
@media (prefers-reduced-motion:reduce){
  .auth-woord{animation:none}
}

/* De regel onder de kaart. */
.auth-onder{
  margin-top:16px;text-align:center;font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--stil);
}
.auth-onder b{font-weight:600;color:var(--zacht)}

/* De kaart op de fotofond: licht doorschijnend met blur waar dat kan, en de rode
   staander uit het merkteken als linkerrand. */
.auth--vol .auth-kader{background:rgba(17,19,19,.88);border-color:rgba(237,237,234,.09)}
@supports (backdrop-filter:blur(10px)){
  .auth--vol .auth-kader{backdrop-filter:blur(10px);background:rgba(17,19,19,.66)}
}
.auth--vol .auth-kader::before{
  content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--accent);
}
.auth-kader{
  position:relative;width:min(420px,100%);
  background:var(--verdiept);border:1px solid var(--lijn);
  padding:clamp(28px,4vw,40px);
}
.auth-kader .merk{margin-bottom:26px}
.auth-kader h1{font-size:22px;letter-spacing:-.01em;margin-bottom:6px}
.auth-kader .veld{margin-bottom:14px}
.auth-kader .knop{width:100%;text-align:center;margin-top:8px}
.auth-voet{margin-top:18px;display:flex;justify-content:space-between;gap:14px;font-size:13px}
.auth-voet a{color:var(--stil);transition:color .3s var(--ease)}
.auth-voet a:hover{color:var(--wit)}

/* Rolkeuze op de inlogpagina. .wissel-tabs is gebouwd voor het lichte werkvlak; op de
   donkere inlogkaart valt de actieve knop daar weg, wit op wit. Alleen hier omgezet. */
.auth-kader .wissel-tabs{margin-bottom:18px}
.auth-kader .wissel-tabs button{flex:1 1 auto;text-align:center}
.auth-kader .wissel-tabs button[aria-current="true"]{background:var(--wit);color:#0B0C0C;border-color:var(--wit)}
.auth-kader .app-melding{margin-bottom:18px}

.app{display:none}
/* De demonstratiestrip staat boven het frame en telt mee in de hoogte, zodat het
   werkvlak binnen het scherm blijft en de pagina zelf niet gaat scrollen. */
.app.is-actief{display:flex;flex-direction:column;height:100vh;height:100svh}
.app>.conceptstrip{flex:0 0 auto}
.app>.app-frame{flex:1 1 auto;height:auto;min-height:0}
.auth.is-weg{display:none}

/* Punt 32. De portaaldemonstratie op portaal.html gaat op een telefoon helemaal
   uit. Zes schermen naast elkaar en een agenda van tien dagen zijn daar te klein
   om iets te laten zien, en ze kosten alleen laadtijd. De wissel zit hier in de
   opmaak en niet in JavaScript, zodat er geen flits van het verkeerde blok is.
   Grens 640 px: dezelfde telefoongrens die de rest van dit bestand aanhoudt.
   Dit raakt alleen de demo; het echte portaal (portaal-app.html) heeft geen van
   deze twee klassen en werkt gewoon op een telefoon.
   .app.is-actief telt twee klassen, dus de verbergregel moet er ook twee hebben. */
.demo-smal{display:none}
@media (max-width:640px){
  .demo-smal{display:block}
  .app.demo-breed,.app.is-actief.demo-breed{display:none}
  /* En dan ook de ingang op index.html: een knop naar een pagina die alleen
     zegt dat je een groter scherm nodig hebt, is een doodlopende klik. */
  .demo-ingang{display:none}
}

/* Format A: vast donker zijpaneel links, licht werkvlak rechts.
   De frame vult exact het scherm; alleen het werkvlak scrolt, en alleen
   wanneer de inhoud dat nodig heeft. */
.app-frame{display:grid;grid-template-columns:238px minmax(0,1fr);height:100vh;height:100svh;overflow:hidden}
.app-zij{
  background:var(--veld);border-right:1px solid var(--lijn);
  height:100%;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;padding:26px 16px 22px;
}
.app-zij .merk{padding:0 13px;margin-bottom:26px}
/* Punt 28a. Waar je bent moet je zien, niet afleiden. Drie dingen tegelijk op
   het actieve item: achtergrond, tekstkleur en het randje links, plus een zwaarder
   gewicht. Een item in rust staat nu op --zacht in plaats van --stil, zodat het
   ook duidelijk boven de kopjes uitkomt (die houden --stil). Contrast op --veld
   #0B0C0C: --zacht 9,4 · --stil 5,4 · --wit 12,9, alle drie ruim boven 4,5.
   Zweven en toetsenbordfocus zijn verschillende dingen en zien er verschillend
   uit: zweven kleurt op, focus zet een accentrand. De focusrand gaat nooit weg. */
.app-zij button{
  text-align:left;font-size:14.5px;font-weight:500;color:var(--zacht);
  padding:11px 13px;border-left:2px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.app-zij button:hover{color:var(--wit);background:rgba(237,237,234,.05)}
/* Meer is ook een inklapper, dus krijgt hetzelfde teken (punt 28b). */
.app-zij button[data-meer] .inklap-teken{margin-left:8px;vertical-align:middle}
.app-zij button:focus-visible{outline:2px solid var(--accent-licht);outline-offset:-2px}
.app-zij button[aria-current="true"]{color:var(--wit);font-weight:600;
  border-left-color:var(--accent);border-left-width:3px;padding-left:12px;
  background:rgba(237,237,234,.11)}
.app-zij .zij-onder{margin-top:auto;border-top:1px solid var(--lijn);padding-top:14px;display:flex;flex-direction:column;gap:2px}
/* Meer hoort alleen bij de vaste balk op een telefoon. Op een breder scherm
   staat de hele lijst er al, dus dan heeft die knop geen taak. */
.app-zij button[data-meer]{display:none}
.app-werk{min-width:0;display:flex;flex-direction:column;height:100%;overflow-y:auto}
.app-topb{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  background:var(--papier);border-bottom:1px solid var(--lijn);
  padding:15px clamp(18px,3vw,34px);
}
.app-topb b{font-weight:600;font-size:15.5px;color:var(--wit)}
.app-wie{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--stil)}
.app-wie .avatar{width:30px;height:30px;font-size:11px;border-color:var(--lijn-sterk);color:var(--wit)}
@media (max-width:640px){.app-wie>span:first-child{display:none}}
.app-inhoud{padding:clamp(18px,3vw,34px);flex:1}

@media (max-width:880px){
  .app-frame{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .app-zij{height:auto;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;gap:4px;padding:10px 14px;border-right:0;border-bottom:1px solid var(--lijn)}
  .app-zij .merk{margin:0 10px 0 0;padding:0}
  .app-zij .merk small{display:none}
  .app-zij button{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:9px 11px}
  /* Liggend menu: het randje verhuist naar onder, maar de achtergrond en het
     zwaardere gewicht blijven. Punt 28a wil alle drie, ook op een telefoon. */
  .app-zij button[aria-current="true"]{border-left:0;border-bottom-color:var(--accent);
    border-bottom-width:3px;padding:9px 11px 8px;background:rgba(237,237,234,.11)}
  .app-zij .zij-onder{margin:0 0 0 auto;border-top:0;padding-top:0;flex-direction:row;gap:4px}
}

/* Telefoon: de navigatie hoort onderaan, binnen duimbereik, en blijft staan
   terwijl het werkvlak scrolt. Vier onderdelen naast een knop Meer; Meer klapt
   dezelfde lijst open als op een breed scherm, inclusief de koppen en de
   uitlogknop. Alleen hier; tablet en desktop houden de strip en het zijpaneel.
   Het haakje is .app-balk op de frame. Zonder die klasse verandert er niets, dus
   een portaal dat geen data-balk-knoppen heeft houdt de strip bovenaan. */
@media (max-width:640px){
  /* De balk staat vast, dus buiten de stroom. Daarom vraagt hij geen eigen
     rasterrij meer en krijgt het werkvlak de volle hoogte. */
  .app-balk{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .app-balk .app-zij{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;
    height:auto;align-items:stretch;gap:0;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    border-right:0;border-bottom:0;border-top:1px solid var(--lijn);
  }
  /* Het beeldmerk zegt op een telefoon niets wat de gebruiker nog niet weet. Weg
     met opmaak, niet uit de HTML: op een breder scherm staat het er gewoon. */
  .app-balk .merk{display:none}
  /* Alleen de vier balkonderdelen en Meer staan in de balk. De rest blijft in de
     HTML staan en komt terug zodra Meer openklapt. */
  .app-balk .app-zij button{display:none}
  /* Vijf gelijke vakken die samen precies de breedte vullen: de knop Meer moet
     zichtbaar zijn, dus de balk mag niet opzij schuiven. De tekst schaalt mee met
     het scherm zodat het langste woord ook op 360px binnen zijn vak blijft. */
  .app-balk .app-zij{overflow-x:hidden}
  .app-balk .app-zij button[data-balk],.app-balk .app-zij button[data-meer]{
    display:flex;align-items:center;justify-content:center;flex:1 1 0;
    min-width:0;overflow:hidden;
    text-align:center;font-size:clamp(10px,2.9vw,12px);letter-spacing:-.01em;
    padding:6px 2px;min-height:44px;
    border-left:0;border-bottom:0;border-top:2px solid transparent;
  }
  .app-balk .app-zij button[aria-current="true"]{
    border-bottom-color:transparent;border-top-color:var(--accent);
    background:rgba(237,237,234,.06);
  }
  .app-balk .zij-onder{display:none}

  /* Meer open: dezelfde balk groeit uit tot een lijst die van onderaf omhoog
     komt. Past hij niet, dan scrolt hij zelf; de balk blijft onderaan staan. */
  .app-balk .app-zij.is-meer{
    flex-direction:column;gap:2px;max-height:80svh;
    overflow-x:hidden;overflow-y:auto;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .app-balk .app-zij.is-meer button,
  .app-balk .app-zij.is-meer button[data-balk],
  .app-balk .app-zij.is-meer button[data-meer]{
    display:block;text-align:left;flex:0 0 auto;font-size:14.5px;
    padding:11px 13px;min-height:44px;
    border-top:0;border-bottom:0;border-left:2px solid transparent;
  }
  .app-balk .app-zij.is-meer button[aria-current="true"]{
    border-top-color:transparent;border-left-color:var(--accent);
  }
  .app-balk .app-zij.is-meer .zij-kop{display:block}
  .app-balk .app-zij.is-meer .zij-onder{
    display:flex;flex-direction:column;gap:2px;
    margin:8px 0 0;border-top:1px solid var(--lijn);padding-top:14px;
  }

  /* De balk mag niets afdekken: 52px knop plus rand plus de veilige zone,
     bovenop de gewone onderruimte van het werkvlak. */
  .app-balk .app-inhoud{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}

.scherm{display:none}
.scherm.is-actief{display:block}
.app-melding{
  border:1px solid var(--lijn);border-left:2px solid var(--accent);background:var(--verdiept);
  padding:14px 16px;font-size:13.5px;color:var(--zacht);margin-bottom:var(--kolomgat);
}

.scherm>.pkaart+.pkaart{margin-top:var(--kolomgat)}

/* Omzetscherm: taart en staaf naast elkaar, twee gelijke kolommen. Onder
   900 px staan ze onder elkaar, net als de rest van het scherm. */
.omzet-boven{display:grid;grid-template-columns:1fr 1fr;gap:var(--kolomgat)}
@media (max-width:960px){.omzet-boven{grid-template-columns:1fr}}
/* De taart schaalt mee met de breedte van zijn eigen kaart (container-query),
   niet met de volledige viewport: op een brede kolom mag hij groter zijn. */
.omzet-boven .pkaart{container-type:inline-size}
.omzet-taart-svg{width:clamp(180px,55cqw,380px);height:auto;flex-shrink:0}

/* Hier stond .agenda-strip met .agenda-dag: de dagenstrip van de oude
   portaaldemonstratie. Punt 24 verving die door js/agenda.js (.ag-dagen en
   .ag-dag, verderop in dit bestand), en punt 32 haalde de laatste twee
   verwijzingen uit portaal.html en js/portaal.js. Daarmee stonden deze negen
   regels nergens meer op; nagezocht in de hele klantmap, nul treffers buiten
   dit bestand. */
/* Functioneel palet op licht: donkerder varianten voor leesbaar contrast op wit.
   Punt 23 eist 4,5:1 gemeten. Nagemeten op de twee achtergronden waar deze
   kleuren echt op staan, met het -vlak-laagje er eerst overheen: het werkvlak
   zelf (--papier #F2F0EB) en een kaart (--verdiept #FFFFFF). De oude waarden
   haalden dat op papier niet: goed 4,01, let 4,42, neutraal 3,36 (en neutraal
   ook op wit niet, 3,82). Zelfde tinten, alleen donkerder gezet, geen nieuwe
   kleur erbij. Nu, papier en wit:
     goed     #28704A  4,77 en 5,38
     let      #845610  5,08 en 5,70
     laag     #B4342B  4,73 en 5,36  (ongewijzigd, haalde het al)
     neutraal #5F615C  4,98 en 5,66
   Zelfde werkwijze als bij --stil hierboven. Wijzig je een waarde, meet opnieuw. */
.app-werk{--goed:#28704A;--let:#845610;--laag:#B4342B;--neutraal:#5F615C;
  --goed-vlak:rgba(76,176,124,.12);--let-vlak:rgba(224,163,62,.14);
  --laag-vlak:rgba(180,52,43,.08);--neutraal-vlak:rgba(21,22,20,.05)}

/* ----- Kleine bedieningsonderdelen in beheer -----
   Hier stond de oude tabelopmaak (.tabel-kop, .tabelrij en de vijf .tabel--
   varianten) met de filterbalk erboven. Die lijsten lopen sinds punt 30 via
   bouwLijst() in js/beheer-app.js met .blijst-, verderop in dit bestand.
   Nagezocht in de hele klantmap: nul treffers buiten dit bestand. */
.knop--klein{padding:9px 14px;font-size:13px}

.veld--mini{margin:0}
.veld--mini input,.veld--mini select{padding:8px 11px;font-size:13px;width:auto;min-width:150px}

/* Voortgang is een balk met het aantal erbij, nooit een cijfer. */
.vg-cel{display:grid;gap:6px;align-content:center;min-width:0}
.vg-cel em{font-style:normal;font-size:12px;color:var(--stil)}
.vg-cel .voortgang-rail{display:block;width:100%}

/* Het dossier van een losse cursist. Elk onderdeel staat in een eigen kader. */
.dossier{border:1px solid var(--lijn);box-shadow:inset 2px 0 0 var(--lijn-sterk);padding:15px 17px;margin-top:14px}
.dossier>.label{margin:0}
.dossier>.label+.prij{border-top:0}
.dossier .veld{margin-top:10px}

/* ----- Agendacomponent (js/agenda.js), gedeeld door beheer en portaal -----
   Punt 24 vraagt tien dagen als standaard met de maand als optie, punt 28c
   vraagt een duidelijker markering per soort. Twee standen, één component.

   De tien dagen staan in één flexcontainer die van richting wisselt. Op breed
   naast elkaar, op smal onder elkaar. Tien kolommen op 320 px is 32 px per dag
   en dat leest niemand. Er is precies één mediaquery, op 880 px, de breedte die
   de rest van de app al aanhoudt; er staat geen tweede sjabloon onder. Wat op
   smal verschijnt is de samenvatting van drie of meer lege dagen op rij, en de
   losse dagen van zo'n reeks verdwijnen dan. Op breed is het andersom. */
.ag-kop{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ag-nav{display:flex;align-items:center;gap:10px;min-width:0}
.ag-kop b{font-size:15px;font-weight:600;color:var(--wit)}
.ag-standen{display:flex;margin-left:auto;border:1px solid var(--lijn-sterk)}
.ag-standen button{
  border:0;background:none;font:inherit;font-size:12px;color:var(--stil);
  padding:6px 11px;cursor:pointer;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.ag-standen button:hover{color:var(--wit)}
.ag-standen button[aria-pressed="true"]{background:var(--neutraal-vlak);color:var(--wit);font-weight:600}

.ag-dagen{display:flex;gap:6px;align-items:stretch}
.ag-dag{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px;padding:9px 8px 11px}
.ag-dag.is-leeg{padding-left:0;padding-right:0}
/* Iets gepland: de dag krijgt een eigen vlak in plaats van een stipje. */
.ag-dag.is-vol{background:var(--neutraal-vlak);border-top:2px solid var(--lijn-sterk)}
.ag-dagkop{
  border:0;background:none;padding:0;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
}
.ag-dagkop:focus-visible{outline:2px solid var(--accent-licht);outline-offset:2px}
.ag-dagnaam{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--stil)}
.ag-dagnr{font-size:17px;font-weight:600;color:var(--zacht);font-variant-numeric:tabular-nums;line-height:1.1}
.ag-dag.is-vol .ag-dagnr{color:var(--wit)}
/* Vandaag blijft los te zien van "hier staat iets": een streep onder het cijfer
   en een woord erbij, niet alleen een kleur. */
.ag-dag.is-vandaag .ag-dagnr{text-decoration:underline;text-underline-offset:3px}
.ag-nu{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-licht)}
.ag-dagkop[aria-pressed="true"] .ag-dagnr{color:var(--wit);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.ag-items{display:grid;gap:7px}
/* Grid in plaats van vertical-align op het merk: bij tekst die naar een tweede
   regel wrapte, zakte de letter anders zichtbaar te laag. */
.ag-item{
  font-size:12.5px;color:var(--zacht);
  display:grid;grid-template-columns:auto 1fr;column-gap:5px;
  align-items:start;
  line-height:1.68;          /* expliciet, niet erven van body (ronde 5b, punt 3) */
  --ag-regel:21px;           /* 12.5px * 1.68, hoogte van de eerste regeldoos */
}
.ag-item .ag-merk{
  align-self:start;
  margin-top:calc((var(--ag-regel) - 15px) / 2);   /* 3px */
}
.ag-item b{font-weight:500;color:var(--wit);overflow-wrap:anywhere;grid-column:2}
.ag-item .stil{display:block;font-size:11.5px;margin-top:1px;grid-column:2}

/* Een agendaregel die iets opent is een echte knop, niet een div met een
   klikluisteraar: toetsenbord en schermlezer krijgen hem dan gratis mee. De
   reset houdt hem visueel gelijk aan een gewone regel. */
.ag-item-knop{
  width:100%;background:none;border:0;padding:0;margin:0;
  font:inherit;text-align:left;cursor:pointer;
}
.ag-item-knop:hover b,.ag-item-knop:focus-visible b{text-decoration:underline}
.ag-item-knop:focus-visible{outline:2px solid var(--accent-licht);outline-offset:3px;border-radius:4px}
.ag-niets{font-size:11px;color:var(--stil);margin:0}
.ag-leegreeks{display:none}

/* De letter is de tweede drager naast de kleur. Kleur alleen mag het niet doen. */
.ag-merk{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:15px;height:15px;
  border:1px solid currentColor;border-radius:50%;
  font-size:9px;font-style:normal;font-weight:700;line-height:1;letter-spacing:0;
}
.ag-merk--klein{width:auto;height:auto;margin:0;border:0;border-radius:0;font-size:10px;vertical-align:0}
.ag-merk--training{color:var(--goed)}
.ag-merk--proeftraining{color:var(--let)}
.ag-merk--sessie{color:var(--accent-licht)}
.ag-merk--aanvraag{color:var(--neutraal)}
.ag-merk--overig{color:var(--stil)}
.ag-legenda{
  display:flex;flex-wrap:wrap;gap:5px 14px;margin:16px 0 0;padding-top:11px;
  border-top:1px solid var(--lijn);font-size:11.5px;color:var(--stil);
}
.ag-legenda span{display:inline-flex;align-items:center}

@media (max-width:880px){
  .ag-dagen{flex-direction:column;gap:0}
  .ag-dag{flex:none;padding:10px 0;border-top:1px solid var(--lijn)}
  .ag-dag.is-vol{padding:10px;border-top:2px solid var(--lijn-sterk)}
  .ag-dagkop{flex-direction:row;align-items:baseline;gap:8px}
  .ag-dagnr{font-size:15px}
  .ag-dag.is-inreeks{display:none}
  .ag-leegreeks{
    display:block;margin:0;padding:10px 0;border-top:1px solid var(--lijn);
    font-size:12px;color:var(--stil);
  }
}

.kal-stap{
  border:1px solid var(--lijn-sterk);background:none;color:var(--zacht);
  width:30px;height:30px;line-height:1;font-size:15px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.kal-stap:hover{color:var(--wit);border-color:var(--zacht)}
.kal-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.kal-weekdag{
  font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--stil);text-align:center;padding:0 0 5px;
}
.kal-leeg{border:0;background:none}
.kal-dag{
  position:relative;border:1px solid transparent;background:none;cursor:pointer;
  color:var(--zacht);font-size:13px;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
  min-height:46px;padding:7px 1px 6px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.kal-dag:hover{color:var(--wit);border-color:var(--lijn-sterk)}
.kal-dag:focus-visible{outline:2px solid var(--accent-licht);outline-offset:-2px}
/* Ronde 5, punt 3: een niet-beschikbare dag in de status-maandweergave (het
   inschrijfformulier) krijgt naast het aria-label ook een visueel signaal. */
.kal-dag:disabled{opacity:.35;cursor:not-allowed}
.kal-nr{line-height:1.1}
.kal-merken{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;line-height:1}
.kal-aantal{font-size:9.5px;font-weight:700;color:var(--wit);font-variant-numeric:tabular-nums}
/* Punt 28c: het stipje onder het cijfer viel weg. Een dag met iets erop krijgt
   nu een eigen vlak, een randje, een vet cijfer en per soort een letter, met
   het aantal erbij als er meer dan één ding staat. */
.kal-dag--vol{background:var(--neutraal-vlak);border-color:var(--lijn);color:var(--wit)}
.kal-dag--vol .kal-nr{font-weight:600}
/* Vandaag houdt een eigen signaal dat niet op kleur alleen leunt. */
.kal-dag--vandaag{border-color:var(--accent-licht);color:var(--wit)}
.kal-dag--vandaag .kal-nr{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.kal-dag[aria-pressed="true"]{border-color:var(--zacht);color:var(--wit);box-shadow:inset 0 0 0 1px var(--zacht)}
.kal-dagtekst{margin-top:14px;padding-top:12px;border-top:1px solid var(--lijn)}

/* ----- Sloten-kiezer (inschrijven-academy.html), punt 2.3 bouwprompt ronde 4 -----
   Zes vaste tijden naast de gedeelde agenda hierboven. De agenda kiest een dag,
   dit kiest een tijd binnen die dag; dat kent het gedeelde component zelf niet,
   dus staat het los, geen tweede kalender. */
.slot-tijden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
@media (max-width:480px){.slot-tijden{grid-template-columns:repeat(2,minmax(0,1fr))}}
.slot-tijd{
  border:1px solid var(--lijn-sterk);background:none;color:var(--zacht);
  padding:10px 8px;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.slot-tijd:hover{color:var(--wit);border-color:var(--zacht)}
.slot-tijd[aria-pressed="true"]{background:var(--neutraal-vlak);color:var(--wit);border-color:var(--wit);font-weight:600}
.slot-tijd[disabled]{color:var(--stil);border-color:var(--lijn);cursor:not-allowed;text-decoration:line-through}
.slot-tijd[disabled]:hover{color:var(--stil);border-color:var(--lijn)}

/* ----- Puntenlijst: elke regel met een streep links ----- */
.punten{list-style:none;margin:0 0 14px;padding:0}
.punten li{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:8px 0 8px 13px;font-size:13.5px;color:var(--wit);
  border-top:1px solid var(--lijn);border-left:2px solid var(--accent);
}

/* ----- Dagkop in het weekoverzicht -----
   Hier stond het hele weekoverzicht (.weekrij, .weekitem, .weekleeg). Dat scherm
   loopt sinds punt 24 via de agendacomponent hierboven; alleen de dagkop wordt nog
   gebruikt, in de stijlgids. Nagezocht in de hele klantmap: nul treffers. */
.weekdag{display:grid;gap:1px;align-content:start;text-align:center;padding-top:1px}
.weekdag span{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--stil)}
.weekdag b{font-size:17px;font-weight:600;color:var(--wit);line-height:1.1;letter-spacing:-.02em}

/* ----- Paraplu-portaal: een inlog, per klant de onderdelen die hij afneemt ----- */
[hidden]{display:none !important}
/* Punt 28a.3. Een kopje is geen menu-item en moet er ook niet op lijken. De
   items staan nu op --zacht, het kopje blijft op --stil, en er komt een streep
   boven zodat je ziet dat er een nieuwe groep begint. */
.zij-kop{
  font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stil);margin:18px 0 5px;padding:14px 13px 0;
  border-top:1px solid var(--lijn);
}
.app-zij .merk+.zij-kop{margin-top:0;padding-top:0;border-top:0}
.demoschakel{border:1px dashed var(--lijn-sterk);padding:16px 18px;margin-bottom:var(--kolomgat)}
.demoschakel .label{margin-bottom:8px}
.demoschakel .klein{max-width:74ch;margin-bottom:14px}
.demoschakel .wissel-tabs{margin-bottom:0}
.toegang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* Blokken die per stand verschijnen. De eerste zichtbare krijgt geen bovenmarge. */
.scherm>.is-eerste{margin-top:0}
@media (max-width:760px){.toegang{grid-template-columns:1fr}}
@media (max-width:880px){.zij-kop{display:none}}

/* ----- Cursusdashboard Master of Mindset ----- */
.voortgang{margin:4px 0 16px}
.voortgang-tekst{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:9px}
.voortgang-tekst b{font-size:15px;font-weight:600;color:var(--wit)}
.voortgang-tekst span{font-size:12.5px;color:var(--stil)}
/* Alleen in gebruik op het lichte werkvlak van het portaal. */
.voortgang-rail{height:8px;background:rgba(237,237,234,.14);border-radius:999px;overflow:hidden}
.licht .voortgang-rail,.app-werk .voortgang-rail{background:rgba(21,22,20,.16)}
.voortgang .voortgang-rail{height:12px}
.voortgang-rail i{display:block;height:100%;width:var(--w);background:var(--goed);border-radius:999px;transition:width .5s var(--ease)}
/* Lescursus-voortgang: een lijn in de accentkleur op een neutrale grond. */
span.voortgang-rail{display:block}
.voortgang-rail--accent i{background:var(--accent)}
.modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kolomgat);margin-top:var(--kolomgat)}
.modkaart{background:var(--verdiept);border:1px solid var(--lijn);padding:clamp(18px,2.2vw,24px);min-width:0}
.modkaart.is-slot{border-style:dashed}

/* De markering is een klein blokje, geen gevuld vlak achter de regel. */
.lesmerk{width:12px;height:12px;border:1px solid var(--lijn-sterk);display:block}

@media (max-width:960px){.modules{grid-template-columns:1fr}}

/* ----- Cursusdashboard: lesweergave -----
   Een les is leesstof, dus de tekstkolom blijft smal en de blokken staan onder
   elkaar met een enkele lijn ervoor. Geen vlakken, geen iconen.
   De lesrijen zelf (.lesrijen, .lesrij, .lestekst) stonden hier ook; die lijst is
   vervangen door .blijst-. Nagezocht in de hele klantmap: nul treffers. */
.terugknop{margin-bottom:var(--kolomgat)}
.leskaart{max-width:74ch}
.leskop{font-size:16px;line-height:1.5;color:var(--wit);letter-spacing:-.01em;margin:-6px 0 20px}
.lesblokken>*+*{margin-top:20px}

.lespunten{display:grid;gap:9px;margin-top:12px;padding:0;list-style:none}
.lespunten li{position:relative;padding-left:17px;font-size:14.5px;line-height:1.7;color:var(--zacht)}
.lespunten li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--lijn-sterk)}
.lesvak{border-left:1px solid var(--lijn-sterk);padding:2px 0 2px 17px}
.lesvak--markant{border-left-color:var(--accent)}
.lesvak .label{margin:0 0 9px}
.lesvak .klein{margin:12px 0 0}
.lesalinea{font-size:14.5px;line-height:1.8;color:var(--zacht);margin:0}
.lesregel{display:block;font-size:16.5px;font-weight:600;line-height:1.55;color:var(--wit);letter-spacing:-.01em}
.lesvak--opdracht{border-left-color:var(--accent)}
.lesvak--opdracht .lesalinea+.lesalinea{margin-top:12px}
.lesvak--opdracht .lesregel{margin-top:16px}
.lespunten--genummerd{counter-reset:opdrachtpunt}
.lespunten--genummerd li{counter-increment:opdrachtpunt;padding-left:26px}
.lespunten--genummerd li::before{content:counter(opdrachtpunt) ".";top:0;width:auto;height:auto;background:none;color:var(--stil);font-size:13.5px;line-height:1.7}
.demoblok{border:1px dashed var(--lijn-sterk);padding:14px 17px}
.demoblok .label{margin:0 0 7px}
.demoblok .klein{margin:0}
.modkaart .demoblok{margin-bottom:14px}
.lesnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--lijn)}
.stapkop{margin-bottom:16px}
.stapnav{justify-content:space-between;align-items:center}
.stapnav-rechts{display:flex;gap:10px;flex-wrap:wrap}

/* ----- Modulepagina: de lessen zijn de inhoud, de notitie loopt mee -----
   Breed scherm: inhoud links, notitieveld ernaast dat blijft staan terwijl je
   scrollt. Smal scherm: het notitieveld zakt onder de inhoud. */
.mod-kolommen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--kolomgat);align-items:start}
.mod-notitie{position:sticky;top:16px}
.mod-notitie .veld{margin-top:12px}
.mod-notitie textarea{min-height:220px}
@media (max-width:960px){
  .mod-kolommen{grid-template-columns:minmax(0,1fr)}
  .mod-notitie{position:static}
  .mod-notitie textarea{min-height:140px}
}
/* Vaste hoogte, zodat de tekst onder het veld niet opspringt bij het bewaren. */
.notitie-stand{min-height:19px;margin-top:8px}

.lessectie+.lessectie{margin-top:26px;padding-top:22px;border-top:1px solid var(--lijn)}
.lessectie-kop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px}
.lestitel{font-size:16.5px;font-weight:600;line-height:1.5;color:var(--wit);letter-spacing:-.01em;margin:0}
/* Het lesnummer is een markering, dus alleen de cijfers dragen de accentkleur. */
.lesnr{color:var(--accent);font-variant-numeric:tabular-nums;margin-right:7px}
.lesvink{
  display:flex;align-items:center;gap:9px;flex:none;padding:0;border:0;background:none;
  cursor:pointer;font-size:12.5px;color:var(--stil);white-space:nowrap;
  transition:color .3s var(--ease);
}
.lesvink:hover{color:var(--zacht)}
.lesvink.is-klaar{color:var(--zacht)}
.lesvink.is-klaar .lesmerk{background:var(--goed);border-color:var(--goed)}
.lessectie-inhoud>*+*{margin-top:18px}
/* Tussenkopje boven een alinea of lijst. Zwaarder dan de tekst, lichter dan de
   lestitel, zodat de opbouw van een les zichtbaar blijft. */
.leskopje{font-size:14px;font-weight:600;color:var(--wit);letter-spacing:-.005em;margin:0}
/* Een kopje hoort bij de tekst eronder, niet bij de alinea erboven. Ruim boven,
   krap eronder, anders leest het als een slot van het vorige stuk. */
.lessectie-inhoud>*+.leskopje,.leskaart>*+.leskopje{margin-top:30px}
.lessectie-inhoud>.leskopje+*,.leskaart>.leskopje+*{margin-top:6px}
@media (max-width:520px){.lessectie-kop{flex-direction:column;align-items:flex-start;gap:9px}}

/* ----- Schermwisselaar: tabs boven een app-frame met echte screenshots ----- */
.wissel-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.wissel-tabs button{
  font-size:13px;font-weight:500;padding:9px 15px;color:var(--zacht);
  border:1px solid var(--lijn-sterk);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.wissel-tabs button:hover{border-color:var(--accent-licht)}
.wissel-tabs button[aria-current="true"]{background:var(--wit);color:var(--papier);border-color:var(--wit)}
.wissel-frame{
  border:1px solid var(--lijn-sterk);background:var(--verdiept);
  aspect-ratio:1440/900;overflow:hidden;
  /* Niet over de volle kolom: een schermafbeelding van 1214 px breed gaat het beeld
     domineren. Rond 900 px blijft alles leesbaar zonder de pagina op te eten. */
  max-width:900px;
}
.wissel-frame img{width:100%;height:100%;object-fit:cover;display:block}
.wissel-cap{font-size:14px;color:var(--zacht);margin-top:14px;min-height:3.4em;max-width:70ch}

/* ----- Schermshow: de stapel die vanzelf doordraait -----
   Vier schermen uit het klantportaal. Het voorste staat in beeld, de andere
   drie blijven zichtbaar als stapel erachter, zodat meteen duidelijk is dat er
   meer is. Na acht seconden schuift de voorste naar achteren; Volgende en de
   namen zetten hem handmatig. Staat stil bij aanwijzen, bij focus, buiten beeld
   en bij reduced motion. Zonder JavaScript blijft het een stilstaande stapel. */
/* Bediening en tekst staan boven, de stapel eronder over de volle kolombreedte.
   Naast elkaar bleef het voorste scherm rond 670px en dat is te klein om de
   schermen te kunnen lezen; zo haalt hij circa 1200px. */
.toon{--dx:22px;--dy:16px;display:block}
.toon-bedien{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 13px}
.toon-teller{display:flex;align-items:baseline;gap:9px;margin:0 16px 0 0;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--stil)}
.toon-teller b{font-size:27px;line-height:1;font-weight:600;color:var(--wit);letter-spacing:-.03em}
.toon-rail{height:2px;background:var(--lijn)}
.toon-rail i{display:block;height:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .14s linear}
.toon-blokken{display:grid;margin-top:clamp(22px,2.6vw,30px)}
.toon-blok{
  grid-area:1/1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  column-gap:clamp(24px,4vw,56px);align-items:start;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.toon-blok[data-actief]{opacity:1;transform:none;pointer-events:auto}
.toon-blok h3{grid-column:1;margin-bottom:10px}
.toon-blok p{grid-column:1;font-size:15.5px;line-height:1.62;margin-bottom:0;max-width:46ch}
.toon-punten{grid-column:2;grid-row:1/3;padding-top:5px}
.toon-punten li{position:relative;padding-left:22px;margin-top:9px;
  font-size:14px;line-height:1.5;color:var(--stil)}
.toon-punten li:first-child{margin-top:0}
.toon-punten li::before{content:'';position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--accent)}
.toon-naam{
  font-size:13px;font-weight:500;padding:9px 14px;color:var(--stil);
  border:1px solid var(--lijn);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.toon-naam:hover{color:var(--wit);border-color:var(--lijn-sterk)}
.toon-naam[aria-current="true"]{color:var(--wit);border-color:var(--accent);background:rgba(180,52,43,.06)}
.toon-volgende{padding:11px 20px;font-size:14px;margin-left:auto}

.toon-stapel{position:relative;margin-top:clamp(28px,3.4vw,44px);
  /* Vier stappen diep: de achterste kaart van vijf schuift 4 x dx naar links. */
  padding:calc(4 * var(--dy)) 0 0 calc(4 * var(--dx));
  /* Zelfde afweging als bij .wissel-frame: leesbaar, maar niet de hele kolom breed. */
  max-width:966px}
.toon-plank{position:relative;aspect-ratio:1440/900}
.toon-kaart{
  position:absolute;inset:0;margin:0;overflow:hidden;
  background:var(--verdiept);border:1px solid var(--lijn-sterk);
  /* Krimpen vanuit de linkerbovenhoek, niet vanuit het midden. Anders trekt scale()
     de kaart aan alle kanten naar binnen en eet die de trap op die .toon-stapel reserveert. */
  transform-origin:0 0;
  transform:translate(calc(var(--p,0) * var(--dx) * -1),calc(var(--p,0) * var(--dy) * -1))
            scale(calc(1 - var(--p,0) * .04));
  z-index:calc(10 - var(--p,0));
  box-shadow:0 30px 72px rgba(11,12,12,.18);
  transition:transform .75s var(--ease);
}
/* De schermen erachter blijven scherp; een sluier in de achtergrondkleur
   duwt ze naar achteren. Vervagen met opacity maakt er grijze vlekken van. */
.toon-kaart::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--papier);opacity:calc(var(--p,0) * .26);
  transition:opacity .75s var(--ease);
}
.toon-kaart picture{position:absolute;inset:0;display:block}
.toon-kaart img{width:100%;height:100%;object-fit:cover}
html.geen-js .toon-bedien,html.geen-js .toon-rail{display:none}

@media (max-width:880px){
  .toon{--dx:14px;--dy:10px}
  .toon-blok{grid-template-columns:minmax(0,1fr)}
  .toon-blok h3,.toon-blok p{grid-column:1}
  .toon-punten{grid-column:1;grid-row:auto;padding-top:0;margin-top:16px}
  .toon-blok p{max-width:62ch}
  .toon-volgende{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .toon-kaart,.toon-kaart::after,.toon-blok,.toon-rail i{transition:none}
  .toon-rail{display:none} /* niets draait vanzelf, dus geen loze teller */
}

/* ----- Stijlgids (intern) ----- */
.stalen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--kolomgat)}
@media (max-width:760px){.stalen{grid-template-columns:1fr}}
.staal{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--lijn)}
.staal i{width:46px;height:30px;border:1px solid var(--lijn-sterk);flex:none;margin-top:2px}
.staal b{display:block;font-weight:500;font-size:14px;color:var(--wit)}
.staal em{font-style:normal;font-size:12px;color:var(--accent-licht);margin-left:8px}
.staal span{display:block;font-size:12.5px;color:var(--stil);max-width:40ch}
.ladder{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.ladder div{display:grid;gap:8px;justify-items:center}
.ladder i{display:block;width:34px;background:var(--verdiept);border:1px solid var(--lijn-sterk)}
.ladder span{font-size:11px;color:var(--stil)}
.gids-voorbeeld{border:1px dashed var(--lijn);padding:clamp(20px,2.6vw,30px);margin-top:18px}
.gids-voorbeeld+.gids-voorbeeld{margin-top:14px}
.welniet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--kolomgat);row-gap:18px;margin-top:18px}
@media (max-width:760px){.welniet{grid-template-columns:1fr}}
.welniet h4{margin-bottom:10px}
.welniet li{padding:8px 0;border-top:1px solid var(--lijn);font-size:14px;color:var(--zacht)}
.stemregels{margin:16px 0 0;padding:0;list-style:none;counter-reset:stem}
.stemregels li{position:relative;padding:11px 0 11px 32px;border-top:1px solid var(--lijn);font-size:14.5px;color:var(--zacht)}
.stemregels li::before{counter-increment:stem;content:counter(stem,decimal-leading-zero);
  position:absolute;left:0;top:13px;font-size:11.5px;color:var(--stil);letter-spacing:.04em}

/* ----- Verschijnen bij het in beeld komen -----
   18px omhoog, 700ms, vaste curve, stagger 70ms. Niets beweegt tweemaal.
   Zonder JavaScript is alles direct zichtbaar. */
html.js [data-onthul]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--wacht,0ms)}
html.js [data-onthul].is-binnen{opacity:1;transform:translateY(0)}

/* Het rode streepje van een label groeit mee zodra het blok geland is:
   één keer, kort na de landing, daarna staat het stil. */
html.js [data-onthul] .label::before{transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
  transition-delay:calc(var(--wacht,0ms) + 280ms)}
html.js [data-onthul].is-binnen .label::before{transform:scaleY(1)}

@media (prefers-reduced-motion:reduce){
  html.js [data-onthul]{opacity:1;transform:none;transition:none}
  html.js [data-onthul] .label::before{transform:none;transition:none}
  .nav a::after{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  *{scroll-behavior:auto!important}
}

/* ----- Fade-lijnen (sitebreed) -----
   Geen enkele scheidingslijn start of stopt hard: elke horizontale lijn smelt
   links en rechts weg in de achtergrond, verticale lijnen boven en onder.
   Kaders, knoppen en invoervelden houden hun rand; dit gaat om scheidingen. */
.conceptstrip,.topbalk,.sectie+.sectie,.hairline-boven,.licht+.licht,.citaat,
.band,.band-cel,.voet,.voet-onder,.app-topb,.zij-onder,.groep,
.methode-rij,.tijdlijn-rij,.lijstrijen li,.kaart-rijen li,.prij,.vraag,
.veldgroep,.akkoord,.staal,.bijschrift,.welniet li{
  border-image:linear-gradient(90deg,transparent,var(--lijn) 18%,var(--lijn) 82%,transparent) 1;
}
.app-zij{
  border-image:linear-gradient(180deg,transparent,var(--lijn) 14%,var(--lijn) 86%,transparent) 1;
}
@media (max-width:880px){
  .app-zij{border-image:linear-gradient(90deg,transparent,var(--lijn) 24%,var(--lijn) 76%,transparent) 1}
}

/* Volle-breedte scheidingen: hoge elementen schilderen border-image niet
   betrouwbaar, dus daar tekent een 1px-achtergrondlijn dezelfde fade. */
.sectie+.sectie,.licht+.licht,.hairline-boven,.voet{border-top-width:0}
.citaat{border-block-width:0}
.sectie+.sectie,.hairline-boven,.voet{
  background-image:linear-gradient(90deg,transparent,var(--lijn) 24%,var(--lijn) 76%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top center;
}
.citaat{
  background-image:
    linear-gradient(90deg,transparent,var(--lijn) 24%,var(--lijn) 76%,transparent),
    linear-gradient(90deg,transparent,var(--lijn) 24%,var(--lijn) 76%,transparent);
  background-size:100% 1px,100% 1px;background-repeat:no-repeat;
  background-position:top center,bottom center;
}

/* ----- Juridische leestekst -----
   Alleen voor de vier juridische pagina's. De globale reset zet list-style uit,
   maar in een juridische tekst is de nummering inhoud: zonder zichtbare nummers
   is "artikel 9 lid 2" nergens terug te vinden. Daarom zet dit blok binnen
   .juridisch de nummering en de opsommingstekens weer aan. Geen nieuwe kleuren
   of maten, alleen de bestaande tokens. */
.juridisch{max-width:72ch}
.juridisch h2{margin:44px 0 14px}
.juridisch h2:first-child{margin-top:0}
.juridisch h3{margin:28px 0 10px}
.juridisch ol,.juridisch ul{margin:0 0 1.4em;padding-left:1.6em;max-width:62ch}
.juridisch ol{list-style:decimal}
.juridisch ul{list-style:disc}
.juridisch li{margin-bottom:.5em}
.juridisch li::marker{color:var(--stil)}
.juridisch ol>li>ul{margin:.5em 0 0}
/* Contact- en bedrijfsgegevens staan in de bron als kale regels, niet als opsomming. */
.juridisch ul.kaal{list-style:none;padding-left:0}
.juridisch ul.kaal li{margin-bottom:.15em}
.juridisch strong{color:var(--wit);font-weight:500}

/* ── beheerlijsten ────────────────────────────────────────────────────────────
   Een tab in het beheer is een lijst met een regel per record. Klikken op een
   regel vouwt de velden eronder open; er staat er hoogstens een tegelijk open.
   Geen nieuwe kleuren: de regels leunen op --lijn en op dezelfde lichte
   oplichting die de rest van de app gebruikt. */
/* Punt 5.1: op een brede monitor lopen de regels van een lijst anders over de
   volle schermbreedte uit, met kolommen ver uit elkaar. Alleen bestellingen
   krijgt dit vooralsnog (opt.smal), naar het precedent van .wissel-frame. */
.pkaart--smal{max-width:900px}
.blijst-gereedschap{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.blijst-gereedschap input,.blijst-gereedschap select{
  background:var(--veld);border:1px solid var(--lijn-sterk);color:var(--wit);
  font:inherit;font-size:14px;padding:9px 12px;min-width:0}
.blijst-gereedschap input{flex:1 1 220px}
.blijst-gereedschap input:focus,.blijst-gereedschap select:focus{border-color:var(--accent-licht);outline:none}
.blijst{border-bottom:1px solid var(--lijn)}
.blijst-kop,.blijst-knop{display:grid;grid-template-columns:var(--kol,1fr);gap:6px 14px;align-items:baseline;text-align:left}
/* De rechtermarge houdt het inklapteken vrij; de kop krijgt dezelfde marge,
   anders staan de kolomkoppen niet meer boven hun cellen. */
.blijst-kop{padding:0 26px 9px 4px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--stil)}
.blijst-rij[hidden]{display:none}
.blijst-knop{position:relative;width:100%;background:transparent;border:0;border-top:1px solid var(--lijn);
  padding:13px 26px 13px 4px;color:var(--zacht);font:inherit;font-size:14px;cursor:pointer}
.blijst-knop>.inklap-teken{position:absolute;right:6px;top:calc(50% - 6px)}
.blijst-knop:hover{background:rgba(237,237,234,.04)}
.blijst-knop:focus-visible{outline:2px solid var(--accent-licht);outline-offset:-2px}
.blijst-knop[aria-expanded="true"]{background:rgba(237,237,234,.06);color:var(--wit)}
.blijst-cel{min-width:0;overflow-wrap:anywhere}
.blijst-cel--eerst{color:var(--wit);font-weight:500}
.blijst-detail{border-top:1px solid var(--lijn);padding:16px 4px 20px}
.blijst-detail .prij:first-of-type{border-top:0}

/* Aankruisen. Alleen de lijst die er om vraagt zet een vakje voor de regel;
   het staat naast de knop, niet erin. De streep bovenaan verhuist mee naar de
   hele regel, anders loopt hij niet door onder het vakje. */
.blijst-regel{display:flex;align-items:center;gap:10px;border-top:1px solid var(--lijn)}
.blijst-regel .blijst-knop{flex:1 1 auto;min-width:0;border-top:0}
.blijst-vink{flex:0 0 auto;width:17px;height:17px;margin-left:4px;cursor:pointer;accent-color:var(--accent-licht)}
.blijst--kies .blijst-kop{padding-left:31px}
.blijst-alles{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--stil);cursor:pointer}
.blijst-alles input{width:16px;height:16px;accent-color:var(--accent-licht)}
.blijst-bulk{border:1px solid var(--lijn-sterk);padding:14px;margin-bottom:14px}
.blijst-bulk .prij:first-of-type{border-top:0}
@media (max-width:760px){
  .blijst-kop{display:none}
  .blijst-knop{grid-template-columns:var(--kolm,minmax(0,1fr) auto)}
  .blijst-cel--weg{display:none}
}

/* ── inklappen ────────────────────────────────────────────────────────────────
   Punt 28b, en daarmee punt 1 en punt 9. Een blok dat inklapt moet dat laten
   zien. Een teken dat meedraait, een handje boven de hele kop, en de kop is een
   echte button, dus tab, enter en spatie werken vanzelf. Een keer beschreven,
   overal gebruikt: het teken hangt ook in de regels van de beheerlijsten.
   Geen nieuwe kleuren; het teken erft de tekstkleur van zijn kop. */
.inklap-teken{
  display:inline-block;flex:none;width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transform-origin:center;opacity:.75;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
[aria-expanded="true"]>.inklap-teken{transform:rotate(-135deg);opacity:1}
[aria-expanded]:hover>.inklap-teken{opacity:1}

.inklap{border:1px solid var(--lijn);background:var(--verdiept)}
.inklap-kop{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:15px 17px;background:transparent;border:0;text-align:left;
  font:inherit;font-size:16px;font-weight:600;color:var(--wit);cursor:pointer;
  transition:background .3s var(--ease);
}
.inklap-kop:hover{background:rgba(237,237,234,.05)}
.inklap-kop:focus-visible{outline:2px solid var(--accent-licht);outline-offset:-2px}
.inklap-kop[aria-expanded="true"]{border-bottom:1px solid var(--lijn)}
.inklap-vlak{padding:17px}
/* Zit het blok al in een kaart, dan levert de kaart de rand en de achtergrond. */
.pkaart--vlak{padding:0}
.pkaart--vlak>.inklap{border:0;background:none}

/* Op papier moet de oplichting donker zijn, niet licht. De lichte variant is
   daar onzichtbaar, en dan zie je niet welke regel openstaat: precies wat punt 1
   aankaart. Zelfde reden als de --veld-regel in de shim hierboven. */
.licht .inklap-kop:hover{background:rgba(21,22,20,.04)}
.licht .blijst-knop:hover{background:rgba(21,22,20,.04)}
.licht .blijst-knop[aria-expanded="true"]{background:rgba(21,22,20,.05)}

/* Nulmeting en eindmeting in het portaal (bouwprompt 20 augustus 2026).
   Label links, het cijfer rechts op een vaste breedte, zodat de vijf regels
   onder elkaar uitlijnen ook als de vraagtekst over twee regels loopt. */
.meting-rij{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--lijn)}
.meting-rij:first-of-type{border-top:0}
.meting-rij>span{flex:1 1 auto;margin-bottom:0;line-height:1.45}
.meting-rij>span b{color:var(--wit);font-weight:600}
.meting-rij input{flex:0 0 82px;width:82px;text-align:center}
.meting-totaal{margin:12px 0 18px;padding-top:12px;border-top:1px solid var(--lijn);font-size:14px;color:var(--stil)}
.meting-totaal b{font-family:var(--display);font-size:24px;color:var(--wit);font-weight:600}
.meting-kaart.is-dicht{opacity:.55}
.meting-kaart.is-dicht h3{margin-bottom:8px}
@media (max-width:520px){
  .meting-rij{flex-direction:column;gap:8px}
  .meting-rij input{flex:0 0 auto;width:100%;text-align:left}
}

/* Trainingstijd per leeftijdsgroep in de sectie Voor wie. In een lichte sectie is
   --wit bijna-zwart (#151614) en --zacht grijs (#454743), dus de dag valt terug. */
.groep-tijd{display:block;margin-top:-4px;font-family:var(--tussen);font-weight:500;font-size:16px;color:var(--wit);letter-spacing:.01em}
.groep-tijd .groep-dag{color:var(--zacht);font-weight:400}

/* Academyfilm onder de leeftijdsgroepen op academy.html. Cloudflare Stream in een
   16:9-kader; de speler zelf regelt autoplay gedempt en de ontdemp-knop.
   figure heeft een browsermarge (1em 40px), dus de marge staat hier voluit. */
.veldfilm{position:relative;margin:clamp(36px,5vw,56px) 0 0;background:#000;border:1px solid var(--lijn);overflow:hidden;aspect-ratio:16/9}
.veldfilm-media{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Rolverdeling met DWS, boven de praktische band op academy.html. Staat in de
   band zelf en niet in een eigen sectie, want een volle sectie zet er honderd
   pixels lucht omheen en dit hoort bij de drie feiten eronder. */
.samenwerking{padding:clamp(34px,4.5vw,58px) 0 clamp(26px,3vw,36px);max-width:82ch}
.samenwerking p:last-child{font-size:15px;color:var(--zacht);margin:0}