/* Proef-landing. Alles hieronder volgt de merkregels uit
   concepts/merkregels-site.md: groene grond, teal accent, een curve, drie
   duren, en een ruimteschaal. Niets van buiten behalve de lettertypes. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --bg: #04110f;
  --opp: rgba(6,19,15,.55);
  --rand: #173a34;
  --rand-licht: #22574d;
  --tekst: #eafcf8;
  --dof: #83a8a0;
  --accent: #2dd4bf;
  --accent-diep: #14b8a6;
  --op: #34d399;
  --neer: #f87171;

  --display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --snel: 180ms;
  --basis: 420ms;
  --traag: 900ms;
  --stijg: 18px;

  --sp-sectie: 80px;
  --sp-blok: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html { background: var(--bg); }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--tekst);
  line-height: 1.6;
  overflow-x: hidden;
  background: var(--bg);
}
/* De gradients stonden op body met background-attachment: fixed; dat dwingt
   de browser bij elke scrollstap de hele pagina opnieuw te schilderen en
   was een van de redenen dat v3 traag voelde (Cailean 4/9). Een vast
   pseudo-element wordt één keer getekend en meegeschoven door de compositor. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(1000px 800px at 12% 8%, rgba(8,145,178,.14), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(45,212,191,.10), transparent 60%),
    linear-gradient(180deg, #051815 0%, var(--bg) 32%, #030d0b 100%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

.omhulsel { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .omhulsel { padding: 0 20px; } }

/* ---------------------------------------------------------------- lagen
   Drie vaste vlakken met kaarsen. Ze verschillen in schaal, helderheid,
   detail en vooral in snelheid: dat laatste maakt de diepte. */
.laag {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 88%);
}
.laag canvas { width: 100%; height: 100%; display: block; }
/* De vlakken staan vast, dus zonder ingrijpen lopen de kaarsen ook achter de
   secties door en wordt de pagina rommelig. --weg loopt van 1 naar 0 zodra je
   de hero uit scrollt, en dooft ze uit. */
/* Geen schaal meer op het verre vlak. Ook met clip-path telde de bredere doos
   mee in de schuifbreedte, en op een telefoon gaf dat een horizontale
   schuifbalk. Afstand komt nu uit snelheid, dichtheid en helderheid. */
.laag--ver   { transform: translateY(calc(var(--sc,0) * -0.04px));
               opacity: calc(.40 * var(--weg,1)); }
.laag--mid   { transform: translateY(calc(var(--sc,0) * -0.12px)); opacity: calc(.72 * var(--weg,1)); }
.laag--dicht { transform: translateY(calc(var(--sc,0) * -0.26px)); opacity: var(--weg,1); }

/* ------------------------------------------------------------- bovenbalk */
.balk {
  position: sticky; top: 0; z-index: 40; padding: 14px 0;
  border-bottom: 1px solid transparent;
  transition: background var(--basis) var(--ease), border-color var(--basis) var(--ease);
}
.balk.vast { background: rgba(4,17,15,.76); backdrop-filter: blur(14px); border-bottom-color: var(--rand); }
.balk__rij { display: flex; align-items: center; gap: 32px; }
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tekst);
        font-family: var(--mono); font-size: 13px; letter-spacing: .22em; }
.merk img { display: block; }
.balk__nav { display: flex; gap: 26px; margin-left: auto; }
.balk__nav a { color: var(--dof); text-decoration: none; font-size: 14.5px;
               transition: color var(--snel) var(--ease); }
.balk__nav a:hover { color: var(--tekst); }
/* smal scherm: links verborgen. Cailean, 4 september: de rij eronder was niet
   netjes; hier komt later iets anders voor. */
@media (max-width: 820px) { .balk__nav { display: none; } .balk__rij { justify-content: space-between; } }

/* ---------------------------------------------------------------- knoppen */
.knop {
  display: inline-block; text-decoration: none; border-radius: 999px;
  background: #eafcf8; color: #04110f;
  font-weight: 700; font-size: 14.5px; padding: 11px 24px; white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  transition: transform var(--snel) var(--ease), background var(--snel) var(--ease),
              box-shadow var(--snel) var(--ease);
}
.knop:hover { transform: translateY(-2px); background: #ffffff; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.knop:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.knop--groot { font-size: 16px; padding: 16px 34px; }
.pijl { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst);
        text-decoration: none; font-weight: 600; font-size: 15px;
        transition: color var(--snel) var(--ease), gap var(--snel) var(--ease); }
.pijl span { color: var(--accent); display: inline-block; transition: transform var(--snel) var(--ease); }
.pijl:hover { color: var(--accent); gap: 12px; }
.pijl:hover span { transform: translateX(3px); }

/* ------------------------------------------------------------------- hero */
/* De hero is een echte tweekolomsindeling: tekst links, het paneel rechts.
   Eerder stond het paneel absoluut en werd de tekst met een breedtegrens
   weggehouden; dat was een noodgreep en geen ontwerp. */
.hero { position: relative; z-index: 1; padding: 88px 0 76px; }
.hero__rij { display: grid; grid-template-columns: minmax(0,1.15fr) 340px;
             gap: 56px; align-items: center; }
@media (max-width: 1040px) {
  .hero__rij { grid-template-columns: minmax(0,1fr); gap: 40px; }
}
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
  border: 1px solid var(--rand); border-radius: 999px; background: rgba(6,20,17,.6);
  backdrop-filter: blur(8px); font-family: var(--mono); font-size: 12px;
  letter-spacing: .06em; color: var(--dof); margin-bottom: 26px;
}
.chip b { color: var(--tekst); font-weight: 700; }
.chip__punt { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
              box-shadow: 0 0 10px var(--accent); animation: hart 2.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes hart { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.1); } }

h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.03em;
  max-width: 15ch;
}
h1 em { font-style: normal; color: var(--accent-diep); }

h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -.025em;
  max-width: 18ch; text-wrap: balance;
}
h2 em { font-style: normal; color: var(--accent-diep); }

.leidend { color: var(--dof); font-size: 18px; max-width: 60ch; margin-top: 20px; }
.acties { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.fijn { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
        color: rgba(131,168,160,.6); margin-top: 18px; }
.fijn--midden { text-align: center; margin-top: 22px; }
.label { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase;
         letter-spacing: .18em; color: var(--dof); margin-bottom: 16px;
         display: inline-flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 24px; height: 1px; background: var(--accent); opacity: .7; }

/* zwevend paneel in het middenvlak, zoals het dashboard bij fora */
.hero__paneel { position: relative; z-index: 2;
                transform: translateY(calc(var(--sc,0) * -0.06px)); }
@media (max-width: 1040px) { .hero__paneel { max-width: 420px; transform: none; } }
.paneel { border: 1px solid var(--rand); border-radius: 16px; background: rgba(4,14,12,.78);
          backdrop-filter: blur(10px); padding: 16px 18px 14px; }
.paneel__kop { display: flex; align-items: center; gap: 8px; font-family: var(--mono);
               font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dof);
               padding-bottom: 12px; border-bottom: 1px solid var(--rand); }
.paneel__stip { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
                box-shadow: 0 0 8px var(--accent); animation: hart 2.4s cubic-bezier(.65,0,.35,1) infinite; }
.paneel__tab { margin-left: auto; text-transform: none; letter-spacing: .04em; }
.paneel__cijfers { display: grid; gap: 2px; padding: 6px 0; }
.paneel__rij { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px;
               padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.045); }
.paneel__rij:last-child { border-bottom: none; }
.paneel__rij b { font-size: 13px; font-weight: 600; color: #cfe3de; }
.paneel__rij s { text-decoration: none; display: block; font-size: 10.5px; color: rgba(131,168,160,.75); }
.paneel__rij u { text-decoration: none; font-family: var(--mono); font-size: 13px; color: var(--accent); }
.paneel__voet { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
                color: rgba(131,168,160,.55); padding-top: 10px; border-top: 1px solid var(--rand); }
.hero__bron { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
              font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
              color: rgba(131,168,160,.42); z-index: 1; }

/* ----------------------------------------------------------------- strook
   De band onder de hero. Drie varianten: maanden, markten, of het lint met
   losse trades. */
.strook { position: relative; z-index: 1; border-top: 1px solid var(--rand);
          border-bottom: 1px solid var(--rand); background: rgba(6,19,15,.42); }
.strook__binnen { padding: 18px 0 14px; }
.strook.lint { padding: 13px 0; }
.strook__kop { display: flex; align-items: baseline; justify-content: space-between;
               gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.strook__kop b { font-family: var(--mono); font-size: 11px; font-weight: 600;
                 letter-spacing: .12em; text-transform: uppercase; color: var(--dof); }
.strook__kop span { font-family: var(--mono); font-size: 11px; color: rgba(131,168,160,.6); }

/* maanden */
/* Staafjes rond een nullijn: winst omhoog, verlies omlaag. Twee helften van
   gelijke hoogte, zodat de lijn er altijd precies tussen ligt. */
.maanden { display: flex; align-items: stretch; gap: 2px; height: 76px; position: relative; }
.maanden::before { content: ""; position: absolute; left: 0; right: 0; top: 50%;
                   height: 1px; background: rgba(255,255,255,.12); }
.maand { flex: 1 1 0; min-width: 2px; position: relative; display: flex; flex-direction: column; }
.maand__op, .maand__neer { flex: 1 1 50%; display: flex; }
.maand__op { align-items: flex-end; }
.maand__neer { align-items: flex-start; }
.maand i { display: block; width: 100%; border-radius: 1px; background: var(--op); opacity: .8;
           transition: opacity var(--snel) var(--ease); }
.maand.neer i { background: var(--neer); }
.maand:hover i { opacity: 1; }
.maand__hint { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
               background: rgba(4,14,12,.94); border: 1px solid var(--rand); border-radius: 8px;
               padding: 5px 9px; font-family: var(--mono); font-size: 11px; white-space: nowrap;
               opacity: 0; pointer-events: none; transition: opacity var(--snel) var(--ease); z-index: 3; }
.maand:hover .maand__hint { opacity: 1; }
.maanden__as { display: flex; justify-content: space-between; margin-top: 8px;
               font-family: var(--mono); font-size: 10px; color: rgba(131,168,160,.5); }

/* markten */
.markten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px;
           background: var(--rand); border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; }
.markt { background: rgba(4,14,12,.9); padding: 12px 14px; }
.markt b { display: block; font-family: var(--mono); font-size: 13px; color: var(--tekst); }
.markt span { display: block; font-size: 11px; color: var(--dof); margin-top: 3px; }

/* ------------------------------------------------------------------- lint */
.lint { position: relative; z-index: 1; border-top: 1px solid var(--rand);
        border-bottom: 1px solid var(--rand); overflow: hidden; padding: 13px 0;
        background: rgba(6,19,15,.42); }
.lint__spoor { display: flex; width: max-content; gap: 36px; animation: rollen 90s linear infinite; }
.lint:hover .lint__spoor { animation-play-state: paused; }
@keyframes rollen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.handel { display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--mono);
          font-size: 12.5px; color: var(--dof); white-space: nowrap; }
.handel b { color: #cfe3de; font-weight: 600; }
.handel .op { color: var(--op); } .handel .neer { color: var(--neer); }
.lint__uitleg { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
                text-transform: uppercase; color: rgba(131,168,160,.5); margin-top: 10px; }

/* ----------------------------------------------------------------- blokken */
.blok { position: relative; z-index: 1; padding: var(--sp-sectie) 0; }
.blok--smal { padding-bottom: 56px; }
.intro { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 56px;
         align-items: end; margin-bottom: 44px; }
.intro p { color: var(--dof); font-size: 16.5px; margin: 0; }
@media (max-width: 880px) { .intro { grid-template-columns: minmax(0,1fr); gap: 18px; } }

.rij-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 36px; }

/* cijfertegels */
.tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 720px) { .tegels { grid-template-columns: repeat(2, 1fr); } }
.tegel { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
         border-radius: 12px; padding: 18px; text-align: center; }
.tegel b { display: block; font-family: var(--display); font-size: 28px; font-weight: 800;
           letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tegel b.accent { color: var(--accent); }
.tegel span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .07em;
              text-transform: uppercase; color: var(--dof); }

/* paperkaarten */
.kaartrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.paper { display: block; text-decoration: none; color: inherit; border: 1px solid var(--rand);
         border-radius: 16px; padding: 18px; background: var(--opp);
         transition: transform var(--basis) var(--ease), border-color var(--basis) var(--ease); }
.paper:hover { transform: translateY(-4px); border-color: var(--rand-licht); transition-duration: var(--snel); }
.paper__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.merkje { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
          padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; }
.merkje--pass { color: var(--op); } .merkje--fail { color: var(--neer); }
.paper__markt { font-family: var(--mono); font-size: 10.5px; color: var(--dof); }
.paper h3 { font-family: var(--display); font-size: 16px; font-weight: 700; margin: 12px 0 4px; }
/* de reden is bij een afgekeurde strategie het interessantste deel van de
   kaart, dus die krijgt meer ruimte en meer contrast dan eerst */
.paper__reden { font-size: 13px; line-height: 1.5; color: #b8ccc6; min-height: 4.4em; }
.paper--fail .paper__reden { color: #cfe3de; }
.paper__spark { display: block; width: 100%; height: 42px; margin: 10px 0 8px; }
.paper__cijfers { display: flex; gap: 14px; font-family: var(--mono); font-size: 11.5px;
                  color: var(--dof); border-top: 1px solid var(--rand); padding-top: 10px; }
.paper__cijfers b { color: #cfe3de; font-weight: 600; }

/* lijst om het productbeeld */
.lijst { margin: 0; border: 1px solid var(--rand); border-radius: 18px; overflow: hidden;
         background: #060d0c; line-height: 0; }
.lijst img { width: 100%; height: auto; display: block; }

/* opbouwgrafiek */
.opbouw { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
@media (max-width: 900px) { .opbouw { grid-template-columns: minmax(0,1fr); } }
.boek { border: 1px solid var(--rand); border-radius: 18px; padding: 20px; background: var(--opp); }
.boek__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.boek__kop h3 { font-family: var(--display); font-size: 19px; font-weight: 700; }
.boek__kop span { font-family: var(--mono); font-size: 11px; color: var(--dof); }
.boek__lijf { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 18px; align-items: stretch; }
@media (max-width: 640px) { .boek__lijf { grid-template-columns: minmax(0,1fr); } }
/* de grafiek vult de hele rijhoogte; anders houdt de kaart de hoogte van de
   lijst aan en blijft er onder de grafiek een gat staan */
.boek__doek { position: relative; min-height: 240px; height: 100%; }
.boek__doek canvas { width: 100%; height: 100%; display: block; }
.boek__lijst { display: flex; flex-direction: column; }
.regel { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 9px;
         padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.045); font-size: 11.5px;
         color: var(--dof); overflow: hidden; max-height: 46px;
         opacity: 0; transform: translateX(10px);
         transition: opacity var(--basis) var(--ease), transform var(--basis) var(--ease),
                     max-height 500ms var(--ease), padding 500ms var(--ease); }
.regel.aan { opacity: 1; transform: none; }
.regel.weg { max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; }
.regel i { width: 10px; height: 2px; border-radius: 2px; }
.regel b { display: block; color: #cfe3de; font-weight: 600; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.regel s { text-decoration: none; display: block; font-size: 10px; color: rgba(131,168,160,.75); }
.regel u { text-decoration: none; font-family: var(--mono); font-size: 11.5px; color: #cfe3de;
           white-space: nowrap; font-variant-numeric: tabular-nums; }
.regel u em { font-style: normal; font-size: 9px; color: rgba(131,168,160,.7); }
.regel--boek { border-bottom: none; padding-top: 10px; }
.regel--boek b { font-size: 13px; }
.regel--boek u { font-size: 14px; color: var(--accent); }

/* uitbetalingen */
.reel { position: relative; z-index: 1; overflow: hidden; padding: 4px 0; }
.reel__spoor { display: flex; width: max-content; gap: 16px; animation: rollen 70s linear infinite; }
.reel:hover .reel__spoor { animation-play-state: paused; }
.reel img { height: 250px; width: auto; display: block; border-radius: 12px;
            border: 1px solid var(--rand); }
@media (max-width: 720px) { .reel img { height: 180px; } }

/* slot en voet */
.slot { position: relative; z-index: 1; text-align: center; padding: var(--sp-sectie) 0; }
.slot h2 { margin: 0 auto; max-width: 20ch; }
.slot .leidend { margin: 20px auto 0; }
.slot .acties { justify-content: center; }
.voet { position: relative; z-index: 1; border-top: 1px solid var(--rand); padding: 26px 0 40px; }
.voet .omhulsel { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.voet span:first-child { font-family: var(--mono); letter-spacing: .22em; font-size: 12px; color: var(--dof); }
.voet .fijn { margin: 0; }

/* ------------------------------------------------- aankomen bij het scrollen
   De begintoestand hangt aan .js op <html>, gezet door een regel in de head.
   Laadt het script niet, dan wordt die klasse weer weggehaald en staat de
   pagina er gewoon. */
.js [data-in] {
  opacity: 0; transform: translateY(var(--stijg));
  transition: opacity var(--basis) var(--ease), transform var(--basis) var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-in="paneel"] { transform: translateY(26px) scale(.985); }
.js [data-in].is-in { opacity: 1; transform: none; }


/* ------------------------------------------------------------------ bewijs
   Twee blokken onder de opbouw: hoe het boek maand voor maand liep, en hoe
   weinig de leden met elkaar meebewegen. Samen zijn dat de twee cijfers
   waarop de portefeuille rust. */
/* de twee blokken zijn verschillend lang; uitrekken laat een gat onder het
   kortste, dus ze krijgen allebei hun eigen hoogte */
.bewijs { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
          gap: 20px; margin-top: 20px; align-items: start; }
@media (max-width: 900px) { .bewijs { grid-template-columns: minmax(0,1fr); } }
.bewijs__blok { border: 1px solid var(--rand); border-radius: 18px; padding: 20px;
                background: var(--opp); }
.bewijs__kop { display: flex; align-items: baseline; justify-content: space-between;
               gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.bewijs__kop b { font-family: var(--mono); font-size: 11px; font-weight: 600;
                 letter-spacing: .12em; text-transform: uppercase; color: var(--dof); }
.bewijs__kop span { font-family: var(--mono); font-size: 11px; color: rgba(131,168,160,.65); }

/* correlatiematrix */
.matrix { display: grid; gap: 3px; }
.matrix__rij { display: grid; gap: 3px; }
.matrix__cel { aspect-ratio: 1; border-radius: 3px; position: relative; max-height: 58px; }
.matrix__cel--zelf { background: rgba(255,255,255,.10); }
.matrix__hint { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
                max-width: 240px; white-space: normal; text-align: center;
                background: rgba(4,14,12,.95); border: 1px solid var(--rand); border-radius: 8px;
                padding: 6px 10px; font-family: var(--mono); font-size: 11px; white-space: nowrap;
                opacity: 0; pointer-events: none; transition: opacity var(--snel) var(--ease); z-index: 4; }
.matrix__cel:hover .matrix__hint { opacity: 1; }
/* de rechterkolommen duwen hun bijschrift anders het scherm uit */
.matrix__cel--rechts .matrix__hint { left: auto; right: 0; transform: none; }
.matrix__legenda { display: flex; align-items: center; gap: 10px; margin-top: 14px;
                   font-family: var(--mono); font-size: 10px; color: rgba(131,168,160,.6); }
.matrix__balk { flex: 1; height: 4px; border-radius: 2px;
                background: linear-gradient(90deg, rgba(45,212,191,.30), rgba(255,255,255,.10), rgba(248,113,113,.55)); }
.bewijs__slot { margin-top: 14px; font-size: 13px; color: var(--dof); }
.bewijs__slot b { color: var(--tekst); font-weight: 600; }


/* Bijschriften bij het aanwijzen horen niet op een aanraakscherm: daar is geen
   muis, ze zijn onbereikbaar, en ze duwden de pagina zijwaarts uit beeld. */
@media (hover: none), (max-width: 720px) {
  .maand__hint, .matrix__hint { display: none; }
}


/* Geen gekleurd accentwoord meer in koppen. Het contrast komt uit gewicht en
   kleurdiepte; het lichtblauwe woord midden in een zin was het felste op de
   pagina en las als sjabloon. */
h1 em, h2 em { color: inherit; font-style: normal; }