/* ── Landingspagina ─────────────────────────────────────────────────────────
   De opmaak van deze pagina staat in style-attributen in de template, zoals
   het ontwerp is gemaakt. Hier staat alleen wat daar niet in kan: de
   keyframes, de media queries en de beginstand van wat JavaScript overneemt
   (apps/frontend/static/frontend/js/landing.js). */

body { margin: 0; background: #F7F5F0; }
a { color: #17130E; }
a:hover { color: #6C5CE7; }

/* ── Responsief ─────────────────────────────────────────────────
   De cijferband is een hap uit de hoek van het paneel. Dat werkt
   alleen zolang de hero twee kolommen heeft; daaronder zou hij de
   tekst van het paneel overdekken, dus wordt hij een gewoon blok. */
.wrl-heroinhoud { padding: 62px 40px 170px; }
.wrl-band {
  position: absolute; right: 0; bottom: 0; width: 700px; max-width: 60%;
  box-sizing: border-box; background: #F7F5F0;
  border-top-left-radius: 28px; border-bottom-right-radius: 30px;
  padding: 30px 44px 24px 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 30px;
}
@media (max-width: 1080px) {
  .wrl-band { position: static; width: auto; max-width: none; border-radius: 0; padding: 36px 40px 6px; }
  .wrl-heroinhoud { padding-bottom: 64px; }
}
/* Zeven ankers naast elkaar worden onder de 960px vier rijen stapel.
   Alles staat op één pagina en compleet in de voettekst. */
/* De ankers in de kopbalk. De opmaak staat hier en niet in een style-attribuut,
   want een inline display wint van elke media query. */
.wrl-nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14.5px; }
.wrl-nav a { text-decoration: none; color: #5C5247; }
/* De kop breekt zelf op de goede plek zodra hij smal wordt. */
@media (max-width: 760px) { br.wrl-br { display: none; } }
@media (max-width: 560px) { .wrl-vlucht { display: none; } }

@keyframes wrlOp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes wrlIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes wrlBalk { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wrlPols { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes wrlZweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes wrlRing { 0% { box-shadow: 0 0 0 0 rgba(108,92,231,.45); } 70% { box-shadow: 0 0 0 14px rgba(108,92,231,0); } 100% { box-shadow: 0 0 0 0 rgba(108,92,231,0); } }
@keyframes wrlHalo { 0%, 100% { opacity: .16; } 50% { opacity: .3; } }
@keyframes wrlTeller { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes wrlVlieg { 0% { transform: translateX(-2px); opacity: 0; } 16% { opacity: .95; } 46% { opacity: .95; } 72%, 100% { opacity: 0; } 100% { transform: translateX(78px); } }
@keyframes wrlGloed { 0%, 100% { opacity: .09; } 50% { opacity: .22; } }
@keyframes wrlStof { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
@keyframes wrlTikDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes wrlBel { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ── Beginstand zonder JavaScript ───────────────────────────────────────────
   De pagina is compleet te lezen als het script niet draait: alles staat in
   de HTML. Alleen de stappenbaan heeft een duwtje nodig, omdat de posities
   daarvan door het script worden gezet. */
.wrl-geen-js .wrl-baan { height: auto; overflow: visible; }
.wrl-geen-js .wrl-baan button { position: static; transform: none; opacity: 1; }
.wrl-geen-js .wrl-baan { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }

/* ── Het menu op een smal scherm ────────────────────────────────────────────
   Zeven ankers naast elkaar worden onder de 960px een stapel van vier rijen.
   Daar komt een hamburger met een lade voor in de plaats; op het brede scherm
   bestaat de knop niet. */
.wrl-burger { display: none; }

@media (max-width: 960px) {
  .wrl-nav { display: none; }
  .wrl-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end;
    gap: 5px;
    /* Het icoon zonder doos eromheen. Een wit vlak met rand weegt visueel
       zwaarder dan het woordmerk ertegenover, en het icoon stond 13px binnen
       de rand van die doos terwijl het logo op de marge begon — precies even
       scheef als het eruitzag. Nu staat het icoon zelf tegen de marge, en
       blijft het raakvlak 44px voor de vinger. */
    width: 44px; height: 44px; padding: 0; border: 0;
    background: transparent; cursor: pointer; color: inherit;
  }
  .wrl-burger span {
    /* Expliciete breedte: als streepjes alleen uit align-items: stretch hun
       maat halen, kan een browser ze op nul zetten en lijkt de knop leeg. */
    display: block; width: 20px; height: 2px; border-radius: 2px; background: #17130E;
    transition: transform .22s ease, opacity .18s ease;
  }
  .wrl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .wrl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .wrl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.wrl-la {
  position: sticky; top: 63px; z-index: 39;
  background: #F7F5F0; border-bottom: 1px solid #E6E1D6;
  padding: 10px 26px 22px;
}
.wrl-la nav { display: flex; flex-direction: column; }
.wrl-la nav a {
  padding: 14px 14px; border-bottom: 1px solid #E6E1D6;
  color: #17130E; text-decoration: none; font-size: 17px;
}
.wrl-la-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 0 14px; }
.wrl-la-knoppen a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.wrl-la-eerste { background: #17130E; color: #F7F5F0; }
/* Inloggen is ook in de lade een anker en geen handeling; als omlijnde knop
   vroeg hij evenveel aandacht als de proefperiode ernaast. */
.wrl-la-tweede {
  min-height: 44px;
  padding: 0 4px;
  border-radius: 0;
  color: #4F46A8;
  font-weight: 600;
}
.wrl-la-tweede:hover,
.wrl-la-tweede:focus-visible { color: #6C5CE7; text-decoration: underline; }

@media (min-width: 961px) { .wrl-la { display: none; } }

/* ── hidden wint van een inline display ────────────────────────────────────
   De opmaak van deze pagina staat in style-attributen, dus een element met
   display:inline-flex bleef zichtbaar ondanks het hidden-attribuut. Het
   script verbergt standen daarmee (de stappen, de rolpanelen, de standen van
   de pipelinekaart), dus dit moet harder zijn dan de inline stijl. */
[hidden] { display: none !important; }

/* ── Het pipelinebord ───────────────────────────────────────────────────────
   Vier fases naast elkaar, want dat ís een pipeline. Wordt het scherm te
   smal voor een leesbare kaart, dan blijft het bord vier kolommen breed en
   schuif je hem opzij — een bord in één kolom is geen bord meer. */
.wrl-bord { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

@media (max-width: 980px) {
  .wrl-bord {
    grid-template-columns: repeat(4, minmax(208px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Zonder dit legt snap de kolom tegen de rand van het bord en verdwijnt
       de 16px lucht eromheen: de kaarten plakken dan aan de zijkant. */
    scroll-padding-inline: 16px;
  }
  .wrl-bord > div { scroll-snap-align: start; }
}

/* ── Het ontwerpsysteem van de pagina ──────────────────────────────────────
   Alles wat vaker dan een paar keer terugkomt staat hier met een naam: de
   secties, de labels, de koppen, de lijsten, de balken en de panelen. Wat
   echt eenmalig is — een positie, een marge voor dit ene element — blijft
   een style-attribuut, want daar wint een klasse niets.
   Let op: zet in deze regels lettertypenamen tussen enkele aanhalingstekens
   als ze ook in een style-attribuut kunnen belanden; een dubbele breekt daar
   het attribuut af. */


.wrl-sectie {
  max-width: 1240px;
  margin: 0 auto;
  padding: 88px 40px 0;
}

.wrl-eyebrow {
  margin: 0 0 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6C5CE7;
}

.wrl-eyebrow-cyaan {
  margin: 0 0 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #00D1FF;
}

.wrl-stappaneel {
  margin-top: 22px;
  background: #0F172A;
  border-radius: 20px;
  padding: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.wrl-stippenraster {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#1C2740 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .8;
}

.wrl-paneelhelft {
  position: relative;
  flex: 1 1 340px;
  min-width: 0;
}

.wrl-paneelkop {
  margin: 0 0 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #FFFFFF;
}

.wrl-paneeltekst {
  margin: 0 0 18px;
  max-width: 48ch;
  font-size: 16.5px;
  color: #C3CAD8;
}

.wrl-bijschrift-donker {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: #8E99AC;
}

.wrl-veldlabel {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8E99AC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wrl-lijstregel {
  display: flex;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid #EFEAE0;
  font-size: 14.5px;
  color: #17130E;
}

.wrl-lijstregel-donker {
  display: flex;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid #253049;
  font-size: 15.5px;
  color: #E6E9F0;
}

.wrl-regelnummer {
  flex: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #8E99AC;
  padding-top: 3px;
}

.wrl-opsommingsbol {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6C5CE7;
  margin-top: 9px;
}

.wrl-balklabel {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #C3CAD8;
  margin-bottom: 6px;
}

.wrl-balkspoor-donker {
  height: 7px;
  border-radius: 4px;
  background: #223052;
  overflow: hidden;
}

.wrl-geleidelijn {
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dotted #39456A;
  transform: translateY(-4px);
}

.wrl-vraagblok {
  padding: 22px 0;
  border-top: 1px solid #E6E1D6;
}

.wrl-vraagkop {
  margin: 0 0 9px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.wrl-antwoord {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: #5C5247;
}

.wrl-stip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
}

.wrl-opdrachtregel {
  color: #E8EBF1;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrl-tarief {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #00D1FF;
  flex: none;
}

.wrl-plaats {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #8E99AC;
  flex: none;
}

/* ── De inlogknop ──────────────────────────────────────────────────────────
   De enige knop in de kopbalk sinds de proefperiode eruit is. Bij aanwijzen
   kleurt hij paars: de accentkleur uit het logo, zodat duidelijk is dat er
   iets te klikken valt zonder dat hij in rust om aandacht vraagt. */
/* ── Balken in segmenten ───────────────────────────────────────────────────
   Een doorlopende balk zegt "ongeveer zoveel"; losse vakjes laten zich
   tellen. Ze vullen zich één voor één zodra de kaart in beeld komt, zodat de
   bezoeker ziet hoe ver het loopt in plaats van alleen waar het eindigt. */
.wrl-segmentbalk {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.wrl-segment {
  flex: 1 1 0;
  min-width: 0;
  height: 16px;
  border-radius: 3px;
  background: #EBE6DB;
  transition: background .22s ease;
}
.wrl-segmentbalk-donker .wrl-segment { background: #223052; }

/* ── Op een telefoon ────────────────────────────────────────────────────────
   Drie blokken vielen om op een smal scherm: de balken werden nul pixels
   breed, de fasekolommen knepen hun eigen naam af, en het bedrag brak
   middenin. Alle drie staan ze hier recht. */

/* De rij: naam — balk — percentage. */
.wrl-segmentrij { display: flex; align-items: center; gap: 13px; }
.wrl-segmentlabel { flex: 0 0 150px; min-width: 0; }
.wrl-segmentpct { flex: 0 0 44px; }

@media (max-width: 720px) {
  /* Naam en percentage op één regel, de balk eronder over de volle breedte.
     Anders blijft er van de 24 vakjes niets over: bij 68 pixels rij-breedte
     gaat alles op aan de tussenruimte. */
  .wrl-segmentrij { flex-wrap: wrap; gap: 4px 10px; }
  .wrl-segmentlabel { flex: 1 1 auto; }
  .wrl-segmentpct { flex: 0 0 auto; margin-left: auto; }
  .wrl-segmentbalk { flex: 1 1 100%; order: 3; gap: 2px; }
  .wrl-segment { height: 13px; }
}

/* De vier fases bij "Status wijzigen". */
.wrl-faseraster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }

@media (max-width: 760px) {
  /* Vier kolommen worden 54 pixels breed en dan past "Kwalificeren" niet
     eens als woord. Twee bij twee geeft er ruim honderd. */
  .wrl-faseraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Het bedrag met "excl. btw" en "per maand" ernaast. */
.wrl-prijsregel { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
  /* Het bedrag op zijn eigen regel; de twee bijschriften eronder naast
     elkaar, in plaats van een euroteken dat van zijn getal wegbreekt. */
  .wrl-prijsregel > span:first-child { flex: 1 1 100%; }
}

/* ── De twee uitkomsten bij "Winnen of verliezen" ───────────────────────────
   Een lead wordt gewonnen of verloren; dat zijn twee blokken, geen vier.
   Eerder stonden er vier waarvan er twee oplichtten, wat las als een
   kapotte stand in plaats van een keuze. */
.wrl-uitkomstraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 620px) {
  .wrl-uitkomstraster { grid-template-columns: minmax(0, 1fr); }
}

/* ── Knop of link ──────────────────────────────────────────────────────────
   Een pagina met drie gevulde knoppen in beeld vraagt drie keer om
   aandacht. Inloggen en de proefperiode in de voettekst zijn ankers, geen
   handelingen: die horen een link te zijn. En op een telefoon, waar de knop
   bijna de hele breedte vult, geldt dat ook voor de proefperiode in de
   hero — daar staat hij toch al vlak bij de tekst die hem uitlegt. */
.wrl-inloggen {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  text-decoration: none;
  color: #4F46A8;
  font-size: 14.5px;
  font-weight: 600;
  transition: color .18s ease;
}
.wrl-inloggen:hover,
.wrl-inloggen:focus-visible { color: #6C5CE7; text-decoration: underline; }

@media (max-width: 560px) {
  /* Op een telefoon zit inloggen in de lade, naast de proefperiode. Deze
     regel stond eerder hoger in het bestand dan de klasse zelf, en verloor
     het daardoor van het display erin: een mediaquery telt niet zwaarder. */
  .wrl-inloggen { display: none; }
}

.wrl-voetcta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: #CFC7FB;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid rgba(207,199,251,.4);
  transition: color .18s ease, border-color .18s ease;
}
.wrl-voetcta:hover,
.wrl-voetcta:focus-visible { color: #FFFFFF; border-bottom-color: #FFFFFF; }

.wrl-heropcta {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  background: #F7F5F0;
  color: #17130E;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  animation: wrlRing 3.4s ease-out 1.2s infinite;
}

@media (max-width: 760px) {
  .wrl-heropcta {
    min-height: 44px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255,255,255,.4);
    animation: none;
  }
}

/* ── De ankers in de voettekst ─────────────────────────────────────────────
   Twee kolommen naast elkaar, ook op een telefoon: elf regels onder elkaar
   maakt van de voettekst een tweede pagina. */
.wrl-voetkolom { flex: 1 1 180px; min-width: 0; }

@media (max-width: 620px) {
  /* De rij eromheen houdt 48px tussenruimte, dus precies de helft min 24. */
  .wrl-voetkolom { flex: 1 1 calc(50% - 24px); }
}

/* ── De twee ingangen in de hero ───────────────────────────────────────────
   Op een breed scherm een knop naast een link. Op een telefoon worden het
   twee links onder elkaar, en dan moeten ze ook echt hetzelfde zijn: even
   hoog, even zwaar, en met het streepje op dezelfde hoogte. Eerst stond de
   een in een vak van 44px en de ander in een vak van 34px, en lagen de twee
   streepjes zichtbaar niet op één lijn. */
.wrl-herorij {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  margin-top: 36px;
}

.wrl-herotweede {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.35);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
}

@media (max-width: 760px) {
  .wrl-herorij { gap: 14px; }
  .wrl-herotweede {
    min-height: 44px;
    padding-bottom: 0;
    border-bottom-color: rgba(255,255,255,.4);
    font-weight: 600;
  }
}

/* ── De binnenkomst ────────────────────────────────────────────────────────
   Een venster van drie regels waar de lijst doorheen rolt. Boven en onder
   vervaagt hij, zodat de stroom doorloopt in plaats van bij een rand op te
   houden: dat is het verschil tussen "hier staan zes vacatures" en "ze
   blijven binnenkomen". De regel in het midden is de regel die het systeem
   net heeft opgepakt; daar verschijnt het vinkje. */
.wrl-feedvenster {
  position: relative;
  overflow: hidden;
  height: 158px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%);
}

.wrl-feedrol {
  display: flex;
  flex-direction: column;
  gap: 7px;
  will-change: transform;
}

.wrl-feedrij {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-width: 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  transition: background .35s ease, border-color .35s ease;
}
.wrl-feedrij.is-opgepakt {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .20);
}

.wrl-feedvink {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  color: #34D399;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.wrl-feedrij.is-opgepakt .wrl-feedvink { opacity: 1; transform: none; }

/* ── De verbeterpunten uit de CV-analyse ───────────────────────────────────
   Drie kaarten op elkaar in plaats van drie regels onder elkaar. De voorste
   staat scherp, de twee erachter kleiner en waziger; het script wisselt om de
   paar tellen welke kaart vooraan staat. Dat scheelt niet alleen hoogte: drie
   regels lezen als een lijstje dat af is, een stapel laat zien dat er meer in
   zit dan je nu ziet.

   De standen zijn klassen en geen inline stijl, zodat de stapel er zonder
   script ook goed bij staat: dan blijft kaart één gewoon vooraan. */
.wrl-cvstapel {
  position: relative;
  height: 258px;
  max-width: 460px;
}

.wrl-cvplek {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform-origin: 50% 0;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease, opacity .7s ease;
}
.wrl-cvplek.is-voor {
  transform: translateY(0) scale(1) rotate(-1.2deg);
  filter: blur(0);
  opacity: 1;
  z-index: 3;
}
.wrl-cvplek.is-tweede {
  transform: translateY(22px) scale(.945) rotate(1.1deg);
  filter: blur(2.6px);
  opacity: .9;
  z-index: 2;
}
.wrl-cvplek.is-derde {
  transform: translateY(44px) scale(.89) rotate(-.6deg);
  filter: blur(5px);
  opacity: .75;
  z-index: 1;
}

/* De gekleurde laag die schuin onder de kaart uitsteekt: dat is wat een
   losse kaart op een stapel laat lijken. */
.wrl-cvlaag {
  position: absolute;
  left: 10px;
  right: -10px;
  top: 12px;
  bottom: -12px;
  border-radius: 22px;
  transform: rotate(1.6deg);
}
.wrl-cvlaag-actie { background: #F3DEBC; }
.wrl-cvlaag-goed { background: #CDEADB; }

.wrl-cvkaart {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E6E1D6;
  border-radius: 22px;
  padding: 24px 26px 26px;
  box-shadow: 0 26px 50px -36px rgba(23, 19, 14, .45);
}

.wrl-cvbovenrij {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A7F70;
}
.wrl-cvteller { color: #A89C8A; }

.wrl-cvtitel {
  margin: 0 0 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #17130E;
}

.wrl-cvtekst {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #5C5247;
}

.wrl-cvpillen { display: flex; flex-wrap: wrap; gap: 8px; }

.wrl-cvpil {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Amber en groen verschillen ook in helderheid, niet alleen in tint. */
.wrl-cvpil-actie { background: #FEF3E2; border: 1px solid #F5D9AE; color: #9A5B06; }
.wrl-cvpil-goed { background: #ECFDF5; border: 1px solid #C7EDDD; color: #065F46; }
.wrl-cvpil-rustig { background: #FDFCFA; border: 1px solid #E6E1D6; color: #6E6356; }

.wrl-cvvoet {
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: #8A7F70;
}
.wrl-cvvoet > span:last-child { margin-left: 6px; }

.wrl-cvstip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D8D1C2;
  transition: background .4s ease;
}
.wrl-cvstip.is-aan { background: #17130E; }

@media (max-width: 560px) {
  /* Op een telefoon is de kaart hoger, want de titel loopt over twee regels. */
  .wrl-cvstapel { height: 288px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Geen stapel die vanzelf draait: dan staan de drie punten gewoon onder
     elkaar, compleet leesbaar en zonder waas. */
  .wrl-cvstapel { height: auto; }
  .wrl-cvplek {
    position: static;
    transform: none;
    filter: none;
    opacity: 1;
    margin-bottom: 30px;
  }
  .wrl-cvplek:last-child { margin-bottom: 0; }
}