/* ===========================================================================
   Retrieva — de openbare pagina's (landingspagina, prijzen, voorwaarden).
   ---------------------------------------------------------------------------
   Staat los van app.css: dat bestand gaat over de ingelogde app en heeft daar
   zijn eigen aannames (zijbalk, volle hoogte, pagina die zelf niet scrollt).
   Deze pagina's zijn gewone documenten die je van boven naar beneden leest.

   De kleuren komen uit tokens.css, zodat de site en de app hetzelfde merk
   dragen. Alleen wat hier extra nodig is staat hieronder.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }


html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: var(--tekst-m);
  line-height: var(--regel-normaal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  line-height: var(--regel-strak);
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

img, svg { max-width: 100%; }

.overslaan {
  position: absolute; left: -9999px;
  background: var(--actie-vlak); color: var(--actie-tekst);
  padding: var(--r3) var(--r4); border-radius: var(--rond-m); z-index: 100;
}
.overslaan:focus { left: var(--r4); top: var(--r4); }

:focus-visible { outline: 2px solid var(--actie-lijn); outline-offset: 3px; border-radius: var(--rond-s); }

/* --------------------------------------------------------------- indeling */

.omhulsel { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--r5); }
.smal { max-width: 760px; }

section { padding: var(--r8) 0; }
@media (max-width: 700px) { section { padding: var(--r7) 0; } }

.sectiekop { max-width: 640px; margin-bottom: var(--r6); }
.sectiekop h2 { font-size: var(--tekst-3xl); margin-bottom: var(--r3); }
.sectiekop p { color: var(--tekst-zacht); font-size: var(--tekst-l); }

.opschrift {
  font-family: var(--font-kop);
  font-size: var(--tekst-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--actie-vlak);
  margin-bottom: var(--r3);
  display: block;
}

/* ------------------------------------------------------------------ balk */

.balk {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--grond) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
}
.balk-in { display: flex; align-items: center; gap: var(--r5); height: 68px; }

.merknaam {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-kop); font-weight: 700; font-size: var(--tekst-l);
  letter-spacing: -.04em; text-decoration: none; flex: none;
}

.balk nav { display: flex; gap: var(--r5); margin-left: auto; }
.balk nav a {
  text-decoration: none; color: var(--tekst-zacht); font-size: var(--tekst-s);
  transition: color var(--snel);
}
.balk nav a:hover { color: var(--tekst); }

.balk-acties { display: flex; align-items: center; gap: var(--r3); margin-left: auto; flex: none; }
.balk nav + .balk-acties { margin-left: 0; }

/* Op een smal scherm past het menu er niet bij. De voettekst heeft dezelfde
   links, dus die verdwijnt hier zonder dat er iets onbereikbaar wordt. */
@media (max-width: 860px) {
  .balk nav { display: none; }
  .balk-in { height: 60px; gap: var(--r3); }
}

/* En op een telefoon gaat ook de groene knop eruit: die staat een paar
   centimeter lager in de hero, twee keer zo groot. Wat blijft staan is waar
   een terugkerende bezoeker voor komt — de taalkeuze en Inloggen. */
@media (max-width: 640px) {
  .balk-acties .knop-vol { display: none; }
  .merknaam { font-size: var(--tekst-m); }
  .omhulsel { padding: 0 var(--r4); }
}

/* Vier vlaggen naast een merknaam en een inlogknop passen niet op een smalle
   telefoon. In plaats van iets weg te laten mag de balk hier twee regels hoog
   worden: de inlogknop zakt onder de vlaggen. */
@media (max-width: 560px) {
  .balk-in { height: auto; padding-block: 10px; flex-wrap: wrap; }
  .balk-acties { flex-wrap: wrap; justify-content: flex-end; gap: var(--r2); }
  .taal a { padding: 3px 4px; }
  .taal a svg { width: 18px; height: 12px; }
}

/* Taalschakelaar. Vlaggen als kleine SVG's: emoji-vlaggen renderen op Windows
   als twee losse letters. Elke vlag heeft een aria-label met de taalnaam erin,
   want een vlag alleen zegt een schermlezer niets. */
.vlaggen { position: absolute; width: 0; height: 0; overflow: hidden; }

.taal {
  display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--rand); border-radius: var(--rond-vol);
}
.taal a {
  display: grid; place-items: center; padding: 4px 6px;
  border-radius: var(--rond-vol); text-decoration: none;
  opacity: .45; transition: opacity var(--snel), background var(--snel);
}
.taal a:hover { opacity: .8; }
.taal a[aria-current="true"] { opacity: 1; background: var(--vlak-hover); }
.taal a svg {
  display: block; width: 21px; height: 14px;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) inset;
}

/* ----------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  font-family: var(--font-kop); font-weight: 600; font-size: var(--tekst-s);
  padding: 10px var(--r4); border-radius: var(--rond-m);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background var(--snel), border-color var(--snel), transform var(--snel);
  white-space: nowrap;
}
.knop:active { transform: translateY(1px); }
.knop-vol { background: var(--actie-vlak); color: var(--actie-tekst); }
.knop-vol:hover { background: var(--actie-hover); }
.knop-lijn { border-color: var(--rand-sterk); color: var(--tekst); }
.knop-lijn:hover { background: var(--vlak-hover); border-color: var(--tekst-dof); }
.knop-groot { font-size: var(--tekst-m); padding: 14px var(--r5); border-radius: var(--rond-l); }

/* -------------------------------------------------------------------- hero */

/* -------------------------------------------------------------------- hero */
/* Eén brede, gecentreerde kolom. Op een groot scherm wordt alles groter maar
   blijft het in het midden staan — geen tekst die tot aan de randen loopt.
   Achter de tekst drijven drie kleurwolken; daarvoor staan drie telefoons. */

.hero {
  position: relative;
  padding: clamp(var(--r7), 7vw, 96px) 0 0;
  overflow: hidden;
  isolation: isolate;
}

/* Het doek. Alles hierin is decor en vangt geen muis. */
.doek { position: absolute; inset: -10% -10% auto; height: 145%; z-index: -1; pointer-events: none; }
.wolk {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  animation: drijven 26s ease-in-out infinite alternate;
}
.w1 {
  width: 46vw; height: 46vw; left: 4%; top: -6%;
  background: radial-gradient(circle, color-mix(in srgb, var(--actie-vlak) 55%, transparent), transparent 68%);
}
.w2 {
  width: 40vw; height: 40vw; right: 2%; top: 6%;
  background: radial-gradient(circle, color-mix(in srgb, var(--geel) 42%, transparent), transparent 68%);
  animation-delay: -9s; animation-duration: 31s;
}
.w3 {
  width: 34vw; height: 34vw; left: 34%; top: 42%;
  background: radial-gradient(circle, color-mix(in srgb, #8A6BF0 55%, transparent), transparent 68%);
  animation-delay: -17s; animation-duration: 37s;
}
@keyframes drijven {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vw, 4vh, 0) scale(1.14); }
}

/* Een fijn raster eroverheen, dat naar buiten toe wegvalt. Geeft de wolken
   houvast zodat het geen kleurvlek wordt. */
.raster {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--tekst) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tekst) 7%, transparent) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 34%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 52% at 50% 34%, #000 25%, transparent 78%);
}

.hero-in {
  max-width: 940px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.hero-pil {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0; margin-bottom: var(--r5);
  font-family: var(--font-body); font-weight: 600; font-size: var(--tekst-s);
  color: var(--tekst-zacht);
}
.hero-pil i {
  width: 22px; height: 2px; border-radius: var(--rond-vol);
  background: var(--actie-vlak); flex: none;
  box-shadow: none; animation: none;
}
@keyframes pulseren {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--actie-vlak) 55%, transparent); }
  70%  { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero-titel {
  font-size: clamp(42px, 7.4vw, 100px);
  letter-spacing: -.04em;
  margin-bottom: var(--r5);
}
/* Drie regels die na elkaar opkomen. */
.hero-titel .regel { display: block; animation: regel-op .7s cubic-bezier(.2, .7, .3, 1) both; }
.hero-titel .regel:nth-child(2) { animation-delay: .12s; }
.hero-titel .regel:nth-child(3) { animation-delay: .24s; }
@keyframes regel-op { from { opacity: 0; transform: translateY(18px); } }
.hero-titel em {
  font-style: normal; position: relative; color: var(--geel);
  white-space: nowrap;
}
.hero-titel .streep {
  position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .19em;
  color: var(--geel); opacity: .9; overflow: visible;
}
.hero-titel .streep path {
  stroke-dasharray: 230; stroke-dashoffset: 230;
  animation: streep 1s ease .45s forwards;
}
@keyframes streep { to { stroke-dashoffset: 0; } }

.hero-leid {
  font-size: clamp(var(--tekst-l), 1.6vw, 22px);
  color: var(--tekst-zacht);
  max-width: 60ch; margin-bottom: var(--r4);
}

/* De rollende opsomming: één regel die laat zien wat je erin kunt gooien. */
.hero-rol {
  --rh: 1.5em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-kop); font-size: var(--tekst-l);
  color: var(--tekst-dof); margin-bottom: var(--r6);
}
.rol { display: block; height: var(--rh); overflow: hidden; }
.rol-baan { display: block; animation: rollen 16s cubic-bezier(.72, 0, .24, 1) infinite; }
.rol-baan b {
  display: block; height: var(--rh); line-height: var(--rh);
  color: var(--tekst); font-weight: 600; white-space: nowrap;
}
@keyframes rollen {
  0%, 13%   { transform: translateY(0); }
  20%, 33%  { transform: translateY(calc(var(--rh) * -1)); }
  40%, 53%  { transform: translateY(calc(var(--rh) * -2)); }
  60%, 73%  { transform: translateY(calc(var(--rh) * -3)); }
  80%, 93%  { transform: translateY(calc(var(--rh) * -4)); }
  100%      { transform: translateY(calc(var(--rh) * -5)); }
}

.hero-knoppen {
  display: flex; flex-wrap: wrap; gap: var(--r3);
  justify-content: center; margin-bottom: var(--r4);
}
.hero-knoppen .knop-vol {
  box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--actie-vlak) 75%, transparent);
}
.hero .fijndruk { font-size: var(--tekst-s); color: var(--tekst-dof); max-width: 62ch; }

/* ------------------------------------------------------------- het toneel */
/* Drie telefoons. De middelste staat kaarsrecht: daar staat de tekst die
   gelezen moet worden, en gedraaide tekst wordt wazig. De twee ernaast staan
   wél schuin — daar staan alleen balkjes en korte woorden. */

.toneel {
  position: relative;
  margin: clamp(var(--r7), 6vw, 84px) auto 0;
  max-width: 1180px; padding: 0 var(--r5);
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0;
}

.toestel {
  position: relative; flex: none;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #263241, #0D131B 60%);
  box-shadow: var(--schaduw-l), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.toestel .kerf {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 15px; border-radius: 0 0 12px 12px;
  background: #0D131B; z-index: 3;
}
.scherm {
  position: relative; overflow: hidden;
  border-radius: 32px;
  background: var(--grond);
  padding: 30px 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 13px;
}

.toestel.midden {
  width: clamp(240px, 25vw, 310px);
  z-index: 2;
  animation: adem 7s ease-in-out infinite alternate;
}
.toestel.midden .scherm { height: clamp(470px, 46vw, 590px); }
@keyframes adem { to { transform: translateY(-12px); } }

.toestel.zij { width: clamp(200px, 20vw, 250px); margin-bottom: 46px; opacity: .96; }
.toestel.zij .scherm { height: clamp(330px, 32vw, 400px); }
/* Recht, niet gedraaid: elke draaiing maakt de tekst erin wazig. De diepte
   komt van de maat, de schaduw en het middelste toestel dat ervoor hangt. */
.toestel.zij.links  { transform: translateX(14px); }
.toestel.zij.rechts { transform: translateX(-14px); }

/* ----------------------------------------- het middelste scherm, vier akten */
/* Alles loopt op dezelfde klok van zestien seconden, zodat de akten precies
   op elkaar aansluiten: fotograferen, nakijken, kiezen, uitleg. */

.toestel.midden .scherm { --akte-duur: 16s; }
.akte {
  position: absolute; inset: 30px 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
  opacity: 0;
}
.a1 { animation: akte1 var(--akte-duur) ease-in-out infinite; }
.a2 { animation: akte2 var(--akte-duur) ease-in-out infinite; }
.a3 { animation: akte3 var(--akte-duur) ease-in-out infinite; }
.a4 { animation: akte4 var(--akte-duur) ease-in-out infinite; }
@keyframes akte1 { 0% { opacity: 0; transform: translateY(8px); } 3%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes akte2 { 0%, 23% { opacity: 0; transform: translateY(8px); } 27%, 43% { opacity: 1; transform: none; } 47%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes akte3 { 0%, 45% { opacity: 0; transform: translateY(8px); } 49%, 61% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes akte4 { 0%, 63% { opacity: 0; transform: translateY(8px); } 67%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(-8px); } }

.a-kop, .vs-kop {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-kop); font-weight: 600; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tekst-dof);
}
.stip-op {
  width: 7px; height: 7px; border-radius: var(--rond-vol); background: var(--fout);
  animation: knipper 1.6s step-end infinite;
}
@keyframes knipper { 50% { opacity: .25; } }

/* De zoeker met het werkblad erin. */
.a-zoeker {
  position: relative; flex: 1;
  background: #0D141C; border: 1px solid #2A3A4C; border-radius: 14px;
  padding: 14px; overflow: hidden;
}
.a-zoeker .hoek { position: absolute; width: 17px; height: 17px; border: 2px solid var(--actie-vlak); }
.a-zoeker .hoek.lb { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-top-left-radius: 5px; }
.a-zoeker .hoek.rb { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-top-right-radius: 5px; }
.a-zoeker .hoek.lo { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-bottom-left-radius: 5px; }
.a-zoeker .hoek.ro { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-bottom-right-radius: 5px; }
.a-papier {
  background: #FBF8F1; color: #1F2933; border-radius: 5px;
  padding: 10px 12px; line-height: 1.55;
  display: flex; flex-direction: column; gap: 2px;
}
.a-papier b {
  font-family: var(--font-kop); border-bottom: 1.5px solid #D9D2C3;
  padding-bottom: 4px; margin-bottom: 4px;
}
.a-lijn {
  position: absolute; left: 8px; right: 8px; top: 8px; height: 2px;
  background: var(--actie-vlak); border-radius: 2px; opacity: 0;
  box-shadow: 0 0 16px 3px color-mix(in srgb, var(--actie-vlak) 60%, transparent);
  animation: aftasten var(--akte-duur, 16s) linear infinite;
}
@keyframes aftasten {
  0%, 4%    { top: 8px; opacity: 0; }
  6%        { opacity: 1; }
  16%       { top: calc(100% - 10px); opacity: 1; }
  18%, 100% { top: calc(100% - 10px); opacity: 0; }
}
.a-sluiter {
  width: 40px; height: 40px; margin: 4px auto 0; flex: none;
  border-radius: var(--rond-vol); border: 3px solid #E7EDF4;
  background: rgba(231, 237, 244, .14);
  animation: afdrukken var(--akte-duur, 16s) ease-out infinite;
}
@keyframes afdrukken {
  0%, 17%   { transform: scale(1); background: rgba(231, 237, 244, .14); }
  19%       { transform: scale(.8); background: var(--actie-vlak); }
  22%, 100% { transform: scale(1); background: rgba(231, 237, 244, .14); }
}
.a-flits {
  position: absolute; inset: 0; background: #FFF; opacity: 0; pointer-events: none;
  animation: flitsen var(--akte-duur, 16s) linear infinite;
}
@keyframes flitsen { 0%, 18.5% { opacity: 0; } 19.5% { opacity: .8; } 23%, 100% { opacity: 0; } }

/* Nakijken. */
.a-regel { display: flex; align-items: center; gap: 8px; color: var(--tekst-zacht); }
.vink {
  flex: none; width: 16px; height: 16px; border-radius: var(--rond-vol);
  background: var(--goed-vlak); position: relative;
}
.vink::after {
  content: ""; position: absolute; left: 4px; top: 5px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--goed); border-bottom: 2px solid var(--goed);
  transform: rotate(-45deg);
}
.a2 .a-regel { animation: opkomen var(--akte-duur, 16s) ease-out infinite; }
.a2 .a-regel:nth-of-type(2) { animation-delay: calc(var(--akte-duur, 16s) * -1 + .5s); }
.a2 .a-regel:nth-of-type(3) { animation-delay: calc(var(--akte-duur, 16s) * -1 + 1s); }
@keyframes opkomen {
  0%, 26%  { opacity: 0; transform: translateX(-6px); }
  30%, 96% { opacity: 1; transform: none; }
  100%     { opacity: 0; }
}
.a-klopt {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  color: var(--tekst-dof);
}
.a-klopt b {
  background: var(--actie-vlak); color: var(--actie-tekst);
  border-radius: var(--rond-s); padding: 4px 12px;
}
.a-klopt i {
  font-style: normal; border: 1px solid var(--rand-sterk);
  border-radius: var(--rond-s); padding: 4px 12px; color: var(--tekst-zacht);
}

/* Kiezen. */
.a-knop {
  border: 1px solid var(--rand-sterk); border-radius: var(--rond-m);
  padding: 10px 12px; color: var(--tekst-zacht); font-weight: 500;
}
.a-knop.aan, .a3 .k2 {
  background: var(--actie-vlak); color: var(--actie-tekst);
  border-color: var(--actie-vlak); font-weight: 600;
}

/* Uitleg. */
.a-stappen {
  margin: 0; padding-left: 17px;
  display: flex; flex-direction: column; gap: 7px; color: var(--tekst-zacht);
}
.a-antwoord {
  background: var(--goed-vlak); color: var(--goed);
  border-radius: var(--rond-s); padding: 8px 12px;
  font-family: var(--font-kop); font-variant-numeric: tabular-nums;
}
.a-vraag {
  border: 1px dashed var(--rand-sterk); border-radius: var(--rond-vol);
  padding: 7px 12px; color: var(--tekst-dof);
}
.a4 .a-stappen li:nth-child(1) { animation: opkomen2 var(--akte-duur, 16s) ease-out infinite; }
.a4 .a-stappen li:nth-child(2) { animation: opkomen2 var(--akte-duur, 16s) ease-out infinite; animation-delay: calc(var(--akte-duur, 16s) * -1 + .6s); }
.a4 .a-antwoord { animation: opkomen3 var(--akte-duur, 16s) ease-out infinite; }
.a4 .a-vraag { animation: opkomen4 var(--akte-duur, 16s) ease-out infinite; }
@keyframes opkomen2 { 0%, 67% { opacity: 0; transform: translateX(-6px); } 71%, 100% { opacity: 1; transform: none; } }
@keyframes opkomen3 { 0%, 78% { opacity: 0; transform: scale(.96); } 82%, 100% { opacity: 1; transform: none; } }
@keyframes opkomen4 { 0%, 85% { opacity: 0; transform: translateY(6px); } 89%, 100% { opacity: 1; transform: none; } }

/* --------------------------------------------------- de twee zijschermen */

.s-kop {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-kop); font-weight: 600; font-size: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--rand);
}
.s-kop span { color: var(--tekst-dof); font-weight: 500; }
.s-klok { font-variant-numeric: tabular-nums; color: var(--amber) !important; }

.s-rij { display: grid; grid-template-columns: 1fr 46px auto; align-items: center; gap: 8px; }
.s-rij > span:first-child { color: var(--tekst-zacht); }
.s-rij b { font-family: var(--font-kop); font-variant-numeric: tabular-nums; }
.s-balk { height: 6px; border-radius: 3px; background: var(--rand); overflow: hidden; display: block; }
.s-balk i { display: block; height: 100%; border-radius: 3px; width: var(--tot, 50%); animation: vullen 4s ease-out infinite alternate; }
.s-balk i.fout { background: var(--fout); }
.s-balk i.goed { background: var(--goed); }
.s-balk i.aan  { background: var(--actie-vlak); }
@keyframes vullen { from { width: 0; } to { width: var(--tot, 50%); } }

.s-kaartje {
  margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--rand); border-radius: var(--rond-m);
  background: var(--vlak); display: flex; flex-direction: column; gap: 3px;
}
.s-kaartje b { font-family: var(--font-kop); }
.s-kaartje span { color: var(--tekst-dof); }

.s-pillen { display: flex; gap: 5px; flex-wrap: wrap; }
.s-pillen i {
  font-style: normal; border: 1px solid var(--rand-sterk);
  border-radius: var(--rond-vol); padding: 4px 10px; color: var(--tekst-zacht);
}
.s-pillen i.aan {
  background: var(--actie-vlak); color: var(--actie-tekst);
  border-color: var(--actie-vlak); font-weight: 600;
}

.s-vraag { font-weight: 600; color: var(--tekst); }
.s-invoer {
  background: var(--vlak); border: 1px solid var(--rand-sterk);
  border-radius: var(--rond-s); padding: 9px 12px;
  font-family: var(--font-kop); font-variant-numeric: tabular-nums;
}
.s-cursor {
  display: inline-block; width: 2px; height: 1em; margin-left: 3px;
  background: var(--actie-vlak); vertical-align: text-bottom;
  animation: knipper 1.1s step-end infinite;
}
.s-goed {
  background: var(--goed-vlak); color: var(--goed);
  border-radius: var(--rond-s); padding: 7px 11px;
  animation: goedje 5s ease-in-out infinite;
}
@keyframes goedje { 0%, 20% { opacity: 0; transform: scale(.96); } 28%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.s-niveau { display: flex; align-items: center; gap: 4px; margin-top: auto; color: var(--tekst-dof); }
.s-niveau i { width: 12px; height: 5px; border-radius: 2px; background: var(--rand); }
.s-niveau i.aan { background: var(--actie-vlak); }
.s-niveau span { margin-left: 6px; }

/* ------------------------------------------------------- zwevende kaartjes */

.zwever {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--rond-vol);
  background: color-mix(in srgb, var(--vlak) 92%, transparent);
  border: 1px solid var(--rand-sterk);
  box-shadow: var(--schaduw-m); backdrop-filter: blur(6px);
  font-size: var(--tekst-xs); color: var(--tekst-zacht); white-space: nowrap;
  animation: zweven 6s ease-in-out infinite alternate;
}
.zwever b { font-family: var(--font-kop); color: var(--tekst); }
.z1 { left: 4%; top: 16%; color: var(--goed); animation-delay: -1s; }
.z1 b { color: var(--goed); }
.z2 { right: 5%; top: 8%; animation-delay: -3s; }
.z2::before { content: attr(data-voor); color: var(--tekst-dof); }
.z3 { left: 8%; bottom: 12%; color: var(--koel); animation-delay: -4.5s; }
@keyframes zweven { to { transform: translateY(-14px); } }

/* ----------------------------------------------------------- de scrollpijl */

.hero-pijl {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin: var(--r6) auto 0;
  border: 1px solid var(--rand-sterk); border-radius: var(--rond-vol);
  color: var(--tekst-dof); text-decoration: none;
  animation: wippen 2.4s ease-in-out infinite;
}
.hero-pijl:hover { color: var(--tekst); border-color: var(--tekst-dof); }
@keyframes wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* --------------------------------------------------------------- responsief */

@media (max-width: 980px) {
  .toestel.zij { display: none; }
  .zwever { display: none; }
  .toneel { padding: 0 var(--r4); }
  .toestel.midden { width: min(300px, 80vw); }
}
@media (max-width: 600px) {
  .hero-rol { font-size: var(--tekst-m); flex-wrap: wrap; }
  .hero-knoppen .knop { width: 100%; }
}

/* ============================== de twee blokken =========================== */
/* Direct onder de hero: twee grote gekleurde vlakken, één blauw, één geel.
   Elk zegt in één zin waar de app voor is, met een klein stukje app erin. */

.blokken { padding-top: var(--r6); }
.blokken-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r5); }
@media (max-width: 860px) { .blokken-in { grid-template-columns: 1fr; } }

.blok {
  position: relative; overflow: hidden;
  border-radius: 28px; padding: clamp(var(--r6), 4vw, 56px);
  display: flex; flex-direction: column; gap: var(--r4);
  min-height: 420px;
}
.blok h2 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.035em; max-width: 14ch; }
.blok p { font-size: var(--tekst-l); max-width: 44ch; }
.blok .opschrift { margin-bottom: 0; }

.blok-blauw { background: var(--actie-vlak); color: #FFFFFF; }
.blok-blauw .opschrift { color: color-mix(in srgb, #FFFFFF 75%, var(--actie-vlak)); }
.blok-blauw p { color: color-mix(in srgb, #FFFFFF 86%, var(--actie-vlak)); }

.blok-geel { background: var(--geel); color: var(--geel-tekst); }
.blok-geel .opschrift { color: color-mix(in srgb, var(--geel-tekst) 70%, var(--geel)); }
.blok-geel p { color: color-mix(in srgb, var(--geel-tekst) 82%, var(--geel)); }

/* Het stukje app in het blok: een donker kaartje, zodat het in beide
   kleuren leesbaar blijft. */
.blok-mok {
  margin-top: auto; align-self: flex-start;
  width: min(100%, 420px);
  background: #0B0D12; color: var(--tekst);
  border-radius: 18px; padding: var(--r4) var(--r5);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: 10px;
  font-size: var(--tekst-s);
}
.blok-mok .a-papier { font-size: var(--tekst-s); }
.blok-mok .a-antwoord { margin-top: 0; }
.blok-mok .s-rij { grid-template-columns: 1fr 90px auto; }
.blok-mok .s-balk { height: 8px; }

/* Vóór/na in het gele blok: het balkje groeit als het in beeld komt. */
.blok-mok .s-balk i { animation: none; width: var(--tot, 50%); }
.beweegt .blok.in-beeld .s-balk i { animation: vullen 1.4s cubic-bezier(.2, .7, .3, 1) both; }
.blok-mok .s-goed { animation: none; }

/* =============================== vier stappen ============================= */
/* Zo werkt het: vier kaarten naast elkaar, elk met een klein stukje scherm.
   Geen scrollverhaal dat blijft plakken — de pagina loopt gewoon door. */

.stappenrij {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r4);
  counter-reset: stap;
}
@media (max-width: 1000px) { .stappenrij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stappenrij { grid-template-columns: 1fr; } }

.stap {
  position: relative;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 20px;
  padding: var(--r5);
  display: flex; flex-direction: column; gap: var(--r3);
}
.stap::before {
  counter-increment: stap; content: counter(stap);
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--rond-vol);
  background: var(--actie-vlak); color: var(--actie-tekst);
  font-family: var(--font-kop); font-weight: 700;
}
.stap h3 { font-size: var(--tekst-l); }
.stap p { color: var(--tekst-zacht); font-size: var(--tekst-s); }
.stap .mok { margin: 0; margin-top: auto; }

.mok-keuze { gap: 7px; }
.mok-knopje {
  border: 1px solid var(--rand-sterk); border-radius: var(--rond-s);
  padding: 7px 12px; font-size: var(--tekst-xs); color: var(--tekst-zacht);
  font-weight: 500;
}
.mok-knopje.vol {
  background: var(--actie-vlak); color: var(--actie-tekst); border-color: var(--actie-vlak);
}
.mok-camera svg { color: var(--tekst-dof); }

/* De vinkjes in stap 2 komen na elkaar op als de kaart in beeld komt. */
.beweegt .stap.in-beeld .mok-vink { animation: vinkje .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.beweegt .stap.in-beeld .mok-regel:nth-of-type(3) .mok-vink { animation-delay: .25s; }
.beweegt .stap.in-beeld .mok-regel:nth-of-type(4) .mok-vink { animation-delay: .5s; }
@keyframes vinkje { from { transform: scale(0); } }

/* ============================ afwisselende band =========================== */
/* Verving de losse inline-stijlen op secties. */

.band {
  background: var(--vlak-diep);
  border-block: 1px solid var(--rand);
}

/* ============================== mini-mockups ============================== */
/* Kleine schermpjes uit de app, boven de uitlegteksten. Ze delen een basis en
   krijgen per soort een paar eigen regels. Allemaal aria-hidden: het zijn
   plaatjes, de tekst ernaast vertelt het verhaal. */

.mok {
  background: var(--vlak-diep);
  border: 1px solid var(--rand);
  border-radius: var(--rond-m);
  padding: var(--r4);
  margin-bottom: var(--r4);
  font-size: var(--tekst-s);
  display: flex; flex-direction: column; gap: 9px;
}
.band .mok { background: var(--grond); }

.mok-titel {
  font-family: var(--font-kop); font-weight: 600; font-size: var(--tekst-xs);
  text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-dof);
}
.mok-vraag { font-weight: 600; }
.mok-regel {
  display: flex; align-items: center; gap: 8px;
  color: var(--tekst-zacht); font-size: var(--tekst-xs);
}
.mok-regel.dof { color: var(--tekst-dof); }
.mok-regel.amber { color: var(--amber); }

.mok-vink {
  flex: none; width: 15px; height: 15px; border-radius: var(--rond-vol);
  background: var(--goed-vlak); position: relative;
}
.mok-vink::after {
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 7px; height: 4px;
  border-left: 1.8px solid var(--goed); border-bottom: 1.8px solid var(--goed);
  transform: rotate(-45deg);
}

/* Het ingetypte antwoord met een knipperende cursor. */
.mok-invoer {
  background: var(--vlak); border: 1px solid var(--rand-sterk);
  border-radius: var(--rond-s); padding: 8px 12px;
  font-family: var(--font-kop); font-variant-numeric: tabular-nums;
}
.mok-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--actie-vlak); margin-left: 3px; vertical-align: text-bottom;
  animation: mok-knipper 1.1s step-end infinite;
}
@keyframes mok-knipper { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mok-cursor { animation: none; } }

/* Zeker / twijfel / gok en andere pillenrijen. */
.mok-pillen { display: flex; gap: 7px; flex-wrap: wrap; }
.mok-pillen.klein { margin-top: 2px; }
.mok-pil {
  border: 1px solid var(--rand-sterk); border-radius: var(--rond-vol);
  padding: 4px 12px; font-size: var(--tekst-xs); color: var(--tekst-zacht);
}
.mok-pil.aan {
  background: var(--actie-vlak); color: var(--actie-tekst);
  border-color: var(--actie-vlak); font-weight: 600;
}

/* De herhaalreeks: dagen met groeiende tussenruimte. */
.mok-reeks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* De lijntjes tussen de dagen groeien mee met de tussenpozen, maar mogen
   krimpen: op een smalle telefoon paste de rij anders niet en schoof de hele
   pagina opzij. */
.mok-reeks i {
  height: 2px; background: var(--rand-sterk); border-radius: 2px;
  flex: 0 1 auto; min-width: 5px;
}
.mok-reeks i:nth-of-type(1) { width: 10px; }
.mok-reeks i:nth-of-type(2) { width: 22px; }
.mok-reeks i:nth-of-type(3) { width: 38px; }
.mok-dag {
  border: 1px solid var(--rand-sterk); border-radius: var(--rond-vol);
  padding: 3px 9px; font-size: var(--tekst-xs); color: var(--tekst-zacht);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mok-dag.nu { background: var(--actie-zacht); border-color: var(--actie-vlak); color: var(--tekst); }

/* Voortgangsbalkjes. */
.mok-balkrij {
  display: grid; grid-template-columns: 76px 1fr 40px;
  align-items: center; gap: 10px; font-size: var(--tekst-xs);
}
.mok-balkrij > span:first-child { color: var(--tekst-zacht); }
.mok-balkrij b { text-align: right; font-variant-numeric: tabular-nums; }
.fout-t { color: var(--fout); }
.goed-t { color: var(--goed); }
.mok-balk {
  height: 8px; border-radius: 4px; background: var(--rand); overflow: hidden;
  display: block;
}
.mok-balk.breed { height: 6px; }
.mok-balk i { display: block; height: 100%; border-radius: 4px; }
.mok-balk i.fout { background: var(--fout); }
.mok-balk i.goed { background: var(--goed); }
.mok-balk i.aan { background: var(--actie-vlak); }

/* Toetsmodus: de klokregel. */
.mok-klokrij {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-kop); font-variant-numeric: tabular-nums;
}
.mok-klokrij .dof { font-family: var(--font-body); font-size: var(--tekst-xs); color: var(--tekst-dof); }

/* Flashcard: twee kaartjes op elkaar. */
.mok-flits { position: relative; min-height: 116px; justify-content: center; }
.mok-flitskaart {
  background: var(--vlak); border: 1px solid var(--rand-sterk);
  border-radius: var(--rond-m); padding: var(--r3) var(--r4);
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: var(--schaduw-s);
}
.mok-flitskaart .dof { font-size: var(--tekst-xs); color: var(--tekst-dof); }
.mok-flitskaart b { font-family: var(--font-kop); font-size: var(--tekst-l); }
.mok-flitskaart.achter {
  position: absolute; inset: 22px 8px -6px 24px;
  transform: rotate(2.5deg); z-index: 0;
}
.mok-flits > .mok-flitskaart:not(.achter) { position: relative; z-index: 1; transform: rotate(-1deg); }

/* Planning: een weekstrook met een toetsdag. */
.mok-week { display: flex; gap: 5px; }
.mok-week span {
  flex: 1; text-align: center; padding: 6px 0;
  border: 1px solid var(--rand); border-radius: var(--rond-s);
  font-size: var(--tekst-xs); color: var(--tekst-dof);
  text-transform: uppercase; letter-spacing: .05em;
}
.mok-week span.toets {
  background: var(--fout-vlak); border-color: var(--fout);
  color: var(--fout); font-weight: 700;
}
.mok-stip { flex: none; width: 8px; height: 8px; border-radius: var(--rond-vol); }
.mok-stip.fout { background: var(--fout); }
.mok-stip.aan { background: var(--actie-vlak); }

/* De camerategel bij stap 1. */
.mok-camera {
  position: relative; min-height: 108px;
  align-items: center; justify-content: center;
  color: var(--tekst-dof);
}

/* ============================ kaarten om de mocks ========================= */

.stapkaart h3, .toonkaart h3 { font-size: var(--tekst-l); margin-bottom: var(--r2); }
.stapkaart p, .toonkaart p { color: var(--tekst-zacht); font-size: var(--tekst-s); }
.toonkaarten { margin-bottom: var(--r6); }

.functielijst {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--r5) var(--r6);
}
@media (max-width: 900px) { .functielijst { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .functielijst { grid-template-columns: 1fr; } }

/* ============================== het functielint =========================== */
/* Eén rij met alles wat erin zit, die rustig voorbijschuift. De inhoud staat
   er twee keer in; de animatie schuift precies één helft, dus de lus is
   onzichtbaar. Bij minder-beweging: stilstaand en gewoon te scrollen. */

.lint {
  margin-top: var(--r8);
  border-block: 1px solid var(--rand);
  background: color-mix(in srgb, var(--vlak) 55%, transparent);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lint-baan {
  display: flex; align-items: center; gap: var(--r3);
  width: max-content;
  padding: var(--r3) var(--r4);
  animation: lint-schuif 36s linear infinite;
}
.lint:hover .lint-baan { animation-play-state: paused; }

@keyframes lint-schuif { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lint-baan { animation: none; }
  .lint { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

.lintje {
  flex: none;
  border: 1px solid var(--rand-sterk);
  border-radius: var(--rond-vol);
  padding: 6px 15px 6px 12px;
  font-family: var(--font-kop); font-weight: 500; font-size: var(--tekst-s);
  color: var(--tekst-zacht);
  display: inline-flex; align-items: center; gap: 8px;
}
.lintje::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--rond-vol);
  background: var(--actie-vlak);
}
.lintje:nth-child(4n+2)::before { background: var(--koel); }
.lintje:nth-child(4n+3)::before { background: var(--amber); }
.lintje:nth-child(4n)::before   { background: var(--goed); }

/* ============================ opkomen bij scrollen ======================== */
/* site.js zet `beweegt` op <html> en `in-beeld` op elk blok dat in beeld komt.
   Zonder script, of bij minder-beweging, staat alles er gewoon. */

.beweegt .kaart:not(.in-beeld), .beweegt .functie:not(.in-beeld),
.beweegt .niveau:not(.in-beeld), .beweegt .prijs:not(.in-beeld),
.beweegt .sectiekop:not(.in-beeld), .beweegt .vraag:not(.in-beeld),
.beweegt .blok:not(.in-beeld), .beweegt .stap:not(.in-beeld) {
  opacity: 0; transform: translateY(22px);
}
.beweegt .kaart, .beweegt .functie, .beweegt .niveau, .beweegt .prijs,
.beweegt .sectiekop, .beweegt .vraag, .beweegt .blok, .beweegt .stap {
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1) var(--wacht, 0ms),
              transform .6s cubic-bezier(.2, .7, .3, 1) var(--wacht, 0ms);
}
.beweegt .in-beeld .mok-balk i { animation: balk-groei 1.1s ease-out both; }
@keyframes balk-groei { from { width: 0; } }

/* Op een breed scherm mag alles ruimer staan, maar wel in het midden. */
@media (min-width: 1280px) {
  .omhulsel { max-width: 1240px; }
  section { padding: 96px 0; }
  .sectiekop h2 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .wolk, .hero-pil i, .rol-baan, .toestel.midden, .a-lijn, .a-sluiter, .a-flits,
  .a2 .a-regel, .a4 .a-stappen li, .a4 .a-antwoord, .a4 .a-vraag,
  .s-balk i, .s-goed, .s-cursor, .zwever, .hero-pijl, .stip-op,
  .hero-titel .streep path {
    animation: none;
  }
  /* Zonder beweging blijft er van vier akten over elkaar niets leesbaars
     over, dus dan staat alleen de uitleg er — de kern van het verhaal. */
  .akte { animation: none; opacity: 0; }
  .a4 { opacity: 1; }
  .a4 .a-stappen li, .a4 .a-antwoord, .a4 .a-vraag { opacity: 1; transform: none; }
  .hero-titel .streep path { stroke-dashoffset: 0; }
  .rol-baan { transform: none; }
  .rol { height: auto; }
  .rol-baan b:not(:first-child) { display: none; }
}

/* ============================ onder de vouw ============================== */
/* Alles vanaf "Waarom het werkt": roosters, kaarten, de functielijst, de vijf
   niveaus, prijzen, vragen, het slot en de voet. Hoort bij het sjabloon in
   scripts/bouw-site.mjs. */

.sectiekop.midden { margin-inline: auto; text-align: center; }

.hoe-ook {
  margin: var(--r5) auto 0; max-width: 72ch; text-align: center;
  color: var(--tekst-zacht); font-size: var(--tekst-m);
  padding: var(--r3) var(--r5);
  border: 1px dashed var(--rand-sterk); border-radius: var(--rond-l);
}

/* ---- roosters en kaarten ---- */

.rooster { display: grid; gap: var(--r4); }
.rooster-2 { grid-template-columns: repeat(2, 1fr); }
.rooster-3 { grid-template-columns: repeat(3, 1fr); }
.rooster-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .rooster-3, .rooster-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rooster-2, .rooster-3, .rooster-4 { grid-template-columns: 1fr; } }

.kaart {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 20px;
  padding: var(--r5);
  display: flex; flex-direction: column;
}
.kaart h3 { font-size: var(--tekst-l); margin-bottom: var(--r2); }
.kaart p { color: var(--tekst-zacht); font-size: var(--tekst-s); }
.kaart .mok { margin-bottom: var(--r4); }
.principe .mok { min-height: 132px; justify-content: center; }
.toonkaart .mok { flex: none; min-height: 158px; }
.toonkaart:hover { border-color: var(--rand-sterk); }

.kaart-niet {
  margin-top: var(--r6); background: var(--vlak-diep);
  padding: var(--r5) var(--r6);
}
.kaart-niet h3 { margin-bottom: var(--r2); }
.kaart-niet p { max-width: 88ch; font-size: var(--tekst-m); }

/* ---- de kleinere functies, als lijst ---- */

.functielijst {
  margin-top: var(--r6); padding-top: var(--r6);
  border-top: 1px solid var(--rand);
}
.functie { display: flex; gap: var(--r3); align-items: flex-start; }
.functie .stip {
  flex: none; width: 10px; height: 10px; margin-top: 7px;
  border-radius: var(--rond-vol); background: var(--actie-vlak);
}
.functie:nth-child(4n+2) .stip { background: var(--koel); }
.functie:nth-child(4n+3) .stip { background: var(--amber); }
.functie:nth-child(4n) .stip   { background: var(--goed); }
.functie b { display: block; font-family: var(--font-kop); font-size: var(--tekst-m); margin-bottom: 3px; }
.functie span { color: var(--tekst-zacht); font-size: var(--tekst-s); }

/* ---- extra mini-schermpjes voor de nieuwe kaarten ---- */

.mok-md {
  display: flex; flex-direction: column; gap: 4px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--tekst-xs); color: var(--tekst-zacht);
}
.mok-md span:first-child { color: var(--tekst); font-weight: 600; }
.mok-notitie .mok-knopje { align-self: flex-start; margin-top: 2px; }

.mok-tijdrij { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-kop); }
.mok-tijdrij b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.mok-tijdrij .dof { font-family: var(--font-body); font-size: var(--tekst-xs); color: var(--tekst-dof); }
.mok-staven { display: flex; gap: 6px; align-items: flex-end; height: 40px; }
.mok-staven i { flex: 1; display: block; background: var(--actie-vlak); border-radius: 3px 3px 0 0; min-height: 3px; opacity: .85; }
.mok-staven i:nth-child(4) { opacity: 1; background: var(--geel); }
.mok-dagen { display: flex; gap: 6px; margin-top: -4px; }
.mok-dagen span { flex: 1; text-align: center; font-size: 10px; color: var(--tekst-dof); text-transform: uppercase; letter-spacing: .05em; }
.beweegt .in-beeld .mok-staven i { animation: staaf-groei .9s ease-out both; }
@keyframes staaf-groei { from { height: 0; } }

.mok-lijst { display: flex; flex-direction: column; gap: 7px; }
.mok-item { display: flex; align-items: center; gap: 8px; font-size: var(--tekst-xs); color: var(--tekst-zacht); min-width: 0; }
.mok-item i {
  flex: none; font-style: normal; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: var(--rond-s);
  background: var(--actie-zacht); color: var(--actie-lijn);
}
.mok-item:nth-child(2) i { background: var(--fout-vlak); color: var(--fout); }
.mok-item:nth-child(3) i { background: var(--goed-vlak); color: var(--goed); }
.mok-item:nth-child(4) i { background: var(--amber-vlak); color: var(--amber); }
.mok-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- vijf niveaus ---- */

.niveaus-in {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--r7);
  align-items: center;
}
@media (max-width: 860px) { .niveaus-in { grid-template-columns: 1fr; gap: var(--r6); } }
.niveaus-tekst h2 { font-size: var(--tekst-3xl); margin-bottom: var(--r3); }
.niveaus-tekst p { color: var(--tekst-zacht); font-size: var(--tekst-l); }

.niveaus { display: flex; flex-direction: column; gap: var(--r2); }
.niveau {
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto;
  column-gap: var(--r4); align-items: center;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--rond-l);
  padding: var(--r3) var(--r4);
}
.niveau .balkjes { grid-row: 1 / 3; }
.niveau b { font-family: var(--font-kop); font-size: var(--tekst-m); }
.niveau span { color: var(--tekst-zacht); font-size: var(--tekst-s); }
@media (min-width: 861px) {
  .niveau:nth-child(2) { margin-left: 14px; }
  .niveau:nth-child(3) { margin-left: 28px; }
  .niveau:nth-child(4) { margin-left: 42px; }
  .niveau:nth-child(5) { margin-left: 56px; }
}
.niveau:nth-child(5) { border-color: var(--actie-lijn); }

.balkjes { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; }
.balkjes i { width: 9px; height: 7px; border-radius: 2px; background: var(--rand-sterk); }
.balkjes i:nth-child(2) { height: 10px; }
.balkjes i:nth-child(3) { height: 13px; }
.balkjes i:nth-child(4) { height: 16px; }
.balkjes i:nth-child(5) { height: 19px; }
.balkjes i.aan { background: var(--actie-vlak); }

/* ---- prijzen ---- */

.prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r4); align-items: stretch; }
@media (max-width: 900px) { .prijzen { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.prijs {
  position: relative;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 22px;
  padding: var(--r6) var(--r5);
  display: flex; flex-direction: column; gap: var(--r4);
}
.prijs h3 { font-size: var(--tekst-xl); }
.voorwie { color: var(--tekst-zacht); font-size: var(--tekst-s); margin-top: 4px; }
.bedrag { display: flex; align-items: baseline; gap: 8px; }
.getal { font-family: var(--font-kop); font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.per { color: var(--tekst-dof); font-size: var(--tekst-s); }
.jaarprijs { font-size: var(--tekst-s); color: var(--tekst-zacht); line-height: 1.5; }
.jaarprijs b { color: var(--tekst); }
.besparing { display: block; margin-top: 3px; color: var(--goed); font-weight: 600; }
.los { display: block; margin-top: 3px; color: var(--tekst-dof); font-size: var(--tekst-xs); }
.mok-pillen.klein .mok-pil { padding: 3px 9px; }

.prijs ul { list-style: none; margin: 0; padding: var(--r3) 0 0; border-top: 1px solid var(--rand); display: flex; flex-direction: column; gap: 9px; font-size: var(--tekst-s); }
.prijs li { display: flex; gap: 10px; align-items: flex-start; }
.prijs li::before {
  content: ""; flex: none; width: 8px; height: 4px; margin: 7px 3px 0 0;
  border-left: 2px solid var(--goed); border-bottom: 2px solid var(--goed);
  transform: rotate(-45deg);
}
.prijs .knop { margin-top: auto; justify-content: center; }

.prijs.uitgelicht {
  border-color: var(--actie-lijn);
  background: linear-gradient(180deg, var(--actie-zacht), var(--vlak) 60%);
  box-shadow: 0 30px 60px -30px rgba(79, 99, 255, .55);
}
@media (min-width: 901px) { .prijs.uitgelicht { transform: translateY(-10px); } }
.prijs-vaan {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--actie-vlak); color: var(--actie-tekst);
  font-family: var(--font-kop); font-size: var(--tekst-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 12px; border-radius: var(--rond-vol);
}

.school {
  margin-top: var(--r5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--r5); flex-wrap: wrap;
  background: var(--vlak-diep); border: 1px solid var(--rand); border-radius: 18px;
  padding: var(--r5);
}
.school h3 { font-size: var(--tekst-l); margin-bottom: 4px; }
.school p { color: var(--tekst-zacht); font-size: var(--tekst-s); max-width: 62ch; }
.school .knop { flex: none; }
.btw-regel { margin-top: var(--r4); color: var(--tekst-dof); font-size: var(--tekst-xs); max-width: 84ch; }

/* ---- vragen ---- */

.vraag { border-top: 1px solid var(--rand); }
.vraag:last-of-type { border-bottom: 1px solid var(--rand); }
.vraag summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--r4);
  padding: var(--r4) 0;
  font-family: var(--font-kop); font-weight: 600; font-size: var(--tekst-m);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px;
  border-right: 2px solid var(--tekst-dof); border-bottom: 2px solid var(--tekst-dof);
  transform: rotate(45deg); transition: transform var(--rustig);
}
.vraag[open] summary::after { transform: rotate(-135deg); }
.vraag summary:hover { color: var(--actie-lijn); }
.antwoord {
  padding: 0 0 var(--r4); max-width: 68ch;
  color: var(--tekst-zacht);
  display: flex; flex-direction: column; gap: var(--r3);
}

/* ---- slot ---- */

.slot { position: relative; overflow: hidden; text-align: center; }
.slot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(760px, 120vw); height: 420px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--actie-vlak) 30%, transparent), transparent);
  pointer-events: none;
}
.slot .omhulsel { position: relative; }
.slot h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: var(--r3); }
.slot p { color: var(--tekst-zacht); font-size: var(--tekst-l); margin-bottom: var(--r5); }

/* ---- voet ---- */

footer {
  border-top: 1px solid var(--rand);
  padding: var(--r7) 0 var(--r6);
  color: var(--tekst-zacht); font-size: var(--tekst-s);
}
.voet-rooster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--r6); }
@media (max-width: 800px) { .voet-rooster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .voet-rooster { grid-template-columns: 1fr; } }
footer h4 {
  font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--tekst-dof); margin-bottom: var(--r3);
}
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
footer a { text-decoration: none; color: var(--tekst-zacht); }
footer a:hover { color: var(--tekst); }
footer .merknaam { display: inline-flex; }
.onderaan {
  margin-top: var(--r6); padding-top: var(--r4); border-top: 1px solid var(--rand);
  display: flex; justify-content: space-between; gap: var(--r4); flex-wrap: wrap;
  color: var(--tekst-dof); font-size: var(--tekst-xs);
}
.uitleg { margin-top: var(--r3); color: var(--tekst-dof); font-size: var(--tekst-xs); opacity: .7; }


/* De tweede keuze onder de prijsknop: "Of per maand · € 18,50". */
.prijs .prijs-anders {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: var(--tekst-zacht, #B7BCD0);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prijs .prijs-anders:hover { color: var(--tekst, #F2F4FA); }


/* Onder de prijskaarten: hoe betalen werkt, in één zin. */
.prijs-hoe { text-align: center; color: var(--tekst-zacht, #B7BCD0); font-size: 15px; margin: 18px auto 0; max-width: 720px; }

/* "Voorbeeld" op een demo met cijfers: het zijn voorbeeldcijfers, geen belofte. */
.mok-voorbeeld {
  align-self: flex-start; display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .12); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .25);
}
.mok .mok-voorbeeld { background: var(--vlak-diep, rgba(127, 127, 127, .15)); color: var(--tekst); border-color: var(--rand, rgba(127, 127, 127, .3)); margin-bottom: 4px; }