/* ══════════════════════════════════════════════════════════════════════
   Mindshifting AI-portaal — vormgeving

   Dit is geen website maar een werkomgeving. Iemand opent hem drie
   ochtenden achter elkaar en daarna nog maanden. Dan telt rust zwaarder
   dan indruk maken, en telt leesbaarheid zwaarder dan allebei.

   Vijf regels waar alles uit volgt:

   1. Eén ding is het belangrijkst en dat zie je als eerste. De kaart met
      de grootste groeikans staat bovenaan en is de enige met volle kleur.
   2. Donker en licht zijn twee ontwerpen, geen omkering. In het licht
      werken schaduwen; in het donker werkt hoogte. Een vlak dat hoger
      ligt wordt daar lichter, niet donkerder. Wie een lichte stijl
      omkeert krijgt een donkere stijl waarin alles even ver weg staat.
   3. Beweging duurt 150 tot 300 milliseconden en zegt iets. Binnenkomen
      remt af, weggaan versnelt. Wat altijd beweegt, beweegt traag genoeg
      om te vergeten.
   4. Kleur is nooit de enige drager. Een vergrendelde assistent heeft een
      slotje, niet alleen een grijstint.
   5. Geen cijfer zonder herkomst. Is er niets ingevuld, dan staat er dat
      er niets is ingevuld.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}

/* ── Licht: de standaard ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
   De kleuren
   ══════════════════════════════════════════════════════════════════════

   Opnieuw opgezet, vanaf nul, naar het palet uit de masterbriefing. Drie
   dingen die het ontwerp bepalen:

   1. HET IS NIET ÉÉN KLEUR MET ACCENTEN. Er staan zeven pasteltinten in
      die allemaal echt worden gebruikt: perzik, roze, lavendel, salie,
      lucht, boter en mint. Elk onderdeel van het dashboard krijgt er een,
      zodat je aan de kleur al ziet waar je bent. Eén kleur met grijs
      eromheen was wat het hiervoor was, en dat las als één lange lap.

   2. HET ACCENT IS ORANJE. Dat is de huisstijl, en dat blijft. Zacht
      oranje voor knoppen, met de donkere inkt als tekst erop; een
      pastelkleur draagt geen witte letters.

   3. DE INKT IS PRUIM EN GEEN BRUIN. Dat klinkt als een detail en is het
      niet: bruine inkt op ivoor maakt alles goudkleurig, en daar werd het
      dashboard oud van.

   De pastels zijn een slag feller dan die in de briefing. Op een scherm
   zakken zachte tinten weg in het wit; op papier niet. Dat verschil moet
   je compenseren, anders is alle kleur die je kiest straks grijs.      */

:root{
  color-scheme:light;

  /* ── De grond en de vlakken ──────────────────────────────────────── */
  --grond:      #F9F6F2;   /* warm ivoor */
  --vlak-1:     #FFFFFF;   /* kaarten */
  --vlak-2:     #F6F1EC;   /* rustende vlakken, hover */
  --vlak-3:     #EFE8E1;   /* actief */
  --lijn:       #EDE4DB;
  --veldlijn:   #D1C5B9;

  /* ── De inkt ─────────────────────────────────────────────────────── */
  --kop:        #2F2838;   /* Deep Plum Ink */
  --tekst:      #4C4458;
  --gedempt:    #6B627A;

  /* ── Het accent ──────────────────────────────────────────────────── */
  --accent:     #FF9466;   /* zacht oranje */
  --accent-op:  #2F2838;   /* tekst óp het oranje */
  --accent-tekst:#B94A1C;  /* oranje als tekst op licht */
  --accent-waas:#FFEDE3;
  --accent-rand:#FFD6C2;

  /* ── De zeven pastels ────────────────────────────────────────────────
     Elk heeft een vlak (licht, om op te zetten) en een inkt (diep, om
     op te schrijven). Die twee horen bij elkaar en halen samen altijd
     genoeg contrast; de schermtest rekent dat na op elk scherm. */
  --perzik:        #FFD9C2;  --perzik-inkt:   #A8521F;
  --roze:          #FBC9D6;  --roze-inkt:     #A33E63;
  --lavendel:      #DCD2F5;  --lavendel-inkt: #5B46A3;
  --salie:         #CFE8D4;  --salie-inkt:    #2F6B47;
  --lucht:         #CFE3F7;  --lucht-inkt:    #1F5A87;
  --boter:         #FDEBC0;  --boter-inkt:    #80601A;
  --mint:          #C9EDE4;  --mint-inkt:     #15675C;

  /* ── Betekeniskleuren ────────────────────────────────────────────── */
  --groen:      #2F6B47;
  --groen-op-waas: #2A6041;
  --groen-waas: #E4F2E8;
  --groenrand:  #BFDFC8;
  --rood:       #B3433A;
  --rood-waas:  #FCE8E6;
  --roodrand:   #F2C9C4;

  /* ── Sfeer en diepte ─────────────────────────────────────────────────
     De achtergrond is geen effen vlak maar een wazig kleurverloop: drie
     grote zachte vlekken die langzaam langs elkaar schuiven. Daar komt
     de diepte vandaan die een effen kleur nooit heeft. */
  --stip:       rgba(47,40,56,.07);
  --gloed-a:    rgba(255,217,194,.95);   /* perzik */
  --gloed-b:    rgba(220,210,245,.80);   /* lavendel */
  --gloed-c:    rgba(201,237,228,.65);   /* mint */
  --knopgloed:  rgba(255,148,102,.55);
  --kaartlicht: rgba(255,148,102,.42);
  --kaartglans: rgba(255,255,255,.6);
  --ringspoor:  #EFE8E1;

  /* ── De donkere kaart ────────────────────────────────────────────────
     De groeikanskaart is in allebei de standen donker; dat is zijn rol
     op een licht dashboard. Hij heeft daarom een eigen reeks. */
  --diep:        #2A2234;
  --diep-licht:  #3A2F47;
  --diep-vlak:   rgba(255,255,255,.07);
  --diep-spoor:  rgba(255,255,255,.14);
  --diep-kop:    #F7F1EC;
  --diep-tekst:  #D6CBDD;
  --diep-gedempt:#A99EB5;
  --diep-accent: #FFA880;

  /* ── Losse onderdelen ────────────────────────────────────────────── */
  --menshuid:   #2F2838;
  --mensoog:    #F9F6F2;
  --mensgloed-a: rgba(255,217,194,.9);
  --mensgloed-b: rgba(255,217,194,0);
  --draadkleur: rgba(47,40,56,.26);
  --belvlak:    #FFFFFF;
  --belrand:    #EDE4DB;
  --bubbel-op:   .34;
  --bubbel-glans: rgba(255,255,255,.75);
  --bubbel-rand:  rgba(47,40,56,.07);

  --zijbalk:    #241E2E;   /* de zijbalk is in beide standen donker */
  --zijbalk-op: #F4EEF2;
  --zijbalk-gedempt:#A99EB5;
  --zijbalk-lijn:#352D42;
  --zijbalk-actief:#322941;

  --schaduw-1: 0 1px 2px rgba(47,40,56,.05);
  --schaduw-2: 0 1px 2px rgba(47,40,56,.04), 0 10px 28px -16px rgba(47,40,56,.18);
  --schaduw-3: 0 2px 4px rgba(47,40,56,.05), 0 24px 48px -24px rgba(47,40,56,.26);

  --letter: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rond:   14px;
  --rond-l: 20px;
  --rond-s: 10px;
  --zijbreedte: 256px;

  /* Binnenkomen remt af, weggaan versnelt, een stand die verandert doet
     allebei. Drie curven, meer heeft een interface niet nodig. */
  --in:  cubic-bezier(.16,.84,.44,1);
  --uit: cubic-bezier(.5,0,.84,.44);
  --wissel: cubic-bezier(.65,0,.35,1);

  --pad: 18px;
}
@media (min-width:760px){ :root{ --pad:28px; } }
@media (min-width:1200px){ :root{ --pad:40px; } }

/* ── Donker: warme nacht met pruim ───────────────────────────────────────
   Een eigen ontwerp en geen omkering. Hier draagt het vlak de hoogte:
   de achtergrond ligt het diepst, een kaart ligt erboven en is lichter,
   en wat daar bovenop zweeft is lichter nog. Schaduwen doen op donker
   bijna niets, dus die vervallen grotendeels.

   De pastels worden hier dieper en minder verzadigd. Een pastel die op
   ivoor zacht is, is op nacht een lamp.                               */
[data-thema="donker"]{
  color-scheme:dark;

  --grond:      #17151E;   /* Warm Midnight */
  --vlak-1:     #211E29;
  --vlak-2:     #2A2634;
  --vlak-3:     #37313F;
  --lijn:       #332E3D;
  --veldlijn:   #4E4759;

  --kop:        #F5EFEA;   /* Warm Cream Text */
  --tekst:      #DAD2E0;
  --gedempt:    #A69CB4;

  --accent:     #FFA880;
  --accent-op:  #17151E;
  --accent-tekst:#FFB899;
  --accent-waas:#352520;
  --accent-rand:#4E362C;

  --perzik:        #E0B295;  --perzik-inkt:   #F0B894;
  --roze:          #D9A0B0;  --roze-inkt:     #EDA7BC;
  --lavendel:      #B8ACDF;  --lavendel-inkt: #C2B4EC;
  --salie:         #A7C9AF;  --salie-inkt:    #A4CFB2;
  --lucht:         #9FBDDC;  --lucht-inkt:    #A3C6E6;
  --boter:         #DFC48E;  --boter-inkt:    #E3C98F;
  --mint:          #9DD3C6;  --mint-inkt:     #96D6C7;

  --groen:      #86C79F;
  --groen-op-waas: #86C79F;
  --groen-waas: #1D2B24;
  --groenrand:  #2C4536;
  --rood:       #E39186;
  --rood-waas:  #2F2022;
  --roodrand:   #49302F;

  --stip:       rgba(245,239,234,.07);
  --gloed-a:    rgba(255,168,128,.20);
  --gloed-b:    rgba(184,172,223,.17);
  --gloed-c:    rgba(157,211,198,.12);
  --knopgloed:  rgba(255,168,128,.40);
  --kaartlicht: rgba(255,168,128,.36);
  --kaartglans: rgba(255,255,255,.035);
  --ringspoor:  #332E3D;

  --diep:        #2A2234;
  --diep-licht:  #3A2F47;
  --diep-kop:    #F7F1EC;
  --diep-tekst:  #D6CBDD;
  --diep-gedempt:#A99EB5;
  --diep-accent: #FFA880;

  --menshuid:   #F0E9F0;
  --mensoog:    #1C1926;
  --mensgloed-a: rgba(255,168,128,.26);
  --mensgloed-b: rgba(255,168,128,0);
  --draadkleur: rgba(245,239,234,.22);
  --belvlak:    #2A2634;
  --belrand:    #332E3D;
  --bubbel-op:   .40;
  --bubbel-glans: rgba(255,255,255,.10);
  --bubbel-rand:  rgba(255,255,255,.08);

  --zijbalk:    #110F17;
  --zijbalk-op: #F4EEF2;
  --zijbalk-gedempt:#A69CB4;
  --zijbalk-lijn:#2B2535;
  --zijbalk-actief:#251F30;

  --schaduw-1: none;
  --schaduw-2: 0 10px 28px -18px rgba(0,0,0,.7);
  --schaduw-3: 0 24px 48px -24px rgba(0,0,0,.8);
}

/* Wie niets heeft gekozen, volgt zijn besturingssysteem. Dezelfde
   waarden; ze staan twee keer omdat een stand die je zelf kiest het
   altijd moet winnen van een stand die je computer voorstelt. */
@media (prefers-color-scheme:dark){
  :root:not([data-thema="licht"]){
    color-scheme:dark;
    --grond:#17151E; --vlak-1:#211E29; --vlak-2:#2A2634; --vlak-3:#37313F;
    --lijn:#332E3D; --veldlijn:#4E4759;
    --kop:#F5EFEA; --tekst:#DAD2E0; --gedempt:#A69CB4;
    --accent:#FFA880; --accent-op:#17151E; --accent-tekst:#FFB899;
    --accent-waas:#352520; --accent-rand:#4E362C;
    --perzik:#E0B295; --perzik-inkt:#F0B894;
    --roze:#D9A0B0; --roze-inkt:#EDA7BC;
    --lavendel:#B8ACDF; --lavendel-inkt:#C2B4EC;
    --salie:#A7C9AF; --salie-inkt:#A4CFB2;
    --lucht:#9FBDDC; --lucht-inkt:#A3C6E6;
    --boter:#DFC48E; --boter-inkt:#E3C98F;
    --mint:#9DD3C6; --mint-inkt:#96D6C7;
    --groen:#86C79F; --groen-op-waas:#86C79F; --groen-waas:#1D2B24;
    --groenrand:#2C4536;
    --rood:#E39186; --rood-waas:#2F2022; --roodrand:#49302F;
    --stip:rgba(245,239,234,.07);
    --gloed-a:rgba(255,168,128,.20); --gloed-b:rgba(184,172,223,.17);
    --gloed-c:rgba(157,211,198,.12);
    --knopgloed:rgba(255,168,128,.40);
    --kaartlicht:rgba(255,168,128,.36); --kaartglans:rgba(255,255,255,.035);
    --ringspoor:#332E3D;
    --diep:#2A2234; --diep-licht:#3A2F47;
    --diep-kop:#F7F1EC; --diep-tekst:#D6CBDD; --diep-gedempt:#A99EB5;
    --diep-accent:#FFA880;
    --menshuid:#F0E9F0; --mensoog:#1C1926;
    --mensgloed-a:rgba(255,168,128,.26); --mensgloed-b:rgba(255,168,128,0);
    --draadkleur:rgba(245,239,234,.22);
    --belvlak:#2A2634; --belrand:#332E3D;
    --bubbel-op:.40; --bubbel-glans:rgba(255,255,255,.10);
    --bubbel-rand:rgba(255,255,255,.08);
    --zijbalk:#110F17; --zijbalk-lijn:#2B2535; --zijbalk-actief:#251F30;
    --schaduw-1:none;
    --schaduw-2:0 10px 28px -18px rgba(0,0,0,.7);
    --schaduw-3:0 24px 48px -24px rgba(0,0,0,.8);
  }
}

/* ── Basis ───────────────────────────────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--grond); color:var(--tekst);
  font-family:var(--letter); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s var(--wissel), color .3s var(--wissel);
}
h1,h2,h3,h4{ font-family:var(--letter); color:var(--kop); margin:0; font-weight:700;
  line-height:1.2; letter-spacing:-.02em; }
h1{ font-size:clamp(26px,4vw,36px); }
h2{ font-size:clamp(21px,3vw,28px); }
h3{ font-size:17px; letter-spacing:-.01em; }
h4{ font-size:15px; }
p{ margin:0; }
a{ color:var(--accent-tekst); text-underline-offset:3px; }
svg{ max-width:100%; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

.overslaan{
  position:absolute; left:12px; top:-60px; z-index:60;
  padding:12px 18px; border-radius:0 0 12px 12px;
  background:var(--accent); color:var(--accent-op);
  text-decoration:none; font-weight:700;
  transition:top .2s var(--in);
}
.overslaan:focus{ top:0; }

/* ══════════════════════════════════════════════════════════════════════
   Het casco: zijbalk links op een breed scherm, lade op een telefoon
   ══════════════════════════════════════════════════════════════════════ */

.schil{ min-height:100dvh; }

.zij{
  position:fixed; inset:0 auto 0 0; z-index:50;
  width:min(84vw, var(--zijbreedte));
  display:flex; flex-direction:column;
  background:var(--zijbalk); color:var(--zijbalk-op);
  border-right:1px solid var(--zijbalk-lijn);
  transform:translateX(-100%);
  transition:transform .24s var(--uit);
  overflow:hidden;
}
.zij.open{ transform:none; transition:transform .28s var(--in); }

/* Het licht dat één keer door de zijbalk trekt als hij verschijnt. Van
   boven naar beneden, anderhalve seconde, en het komt niet terug: dit is
   een binnenkomst en geen knipperlicht. */
.zij::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg,
    rgba(255,122,61,0) 0%, rgba(255,122,61,.18) 42%,
    rgba(120,170,220,.11) 58%, rgba(255,122,61,0) 100%);
  transform:translateY(-100%);
  animation:zij-licht 1.6s var(--in) .15s both;
}
@keyframes zij-licht{
  from{ transform:translateY(-100%); opacity:0; }
  35% { opacity:1; }
  to  { transform:translateY(100%); opacity:0; }
}

/* Een eigen marge, niet die van de pagina. Die loopt op breed scherm op
   tot 40 px, en dan blijft er van 256 px zijbalk zo weinig over dat "Mijn
   AI-assistenten" over twee regels breekt. */
.zij{ --zijpad:16px; }
.zij__kop{ display:flex; align-items:center; padding:20px var(--zijpad) 18px;
  position:relative; z-index:1; }
.zij__merk{ display:flex; flex-direction:column; gap:1px;
  color:var(--zijbalk-op); text-decoration:none; }
.zij__merk b{ font-weight:800; font-size:17px; letter-spacing:-.03em; }
.zij__merk b span{ color:var(--accent); }
.zij__merk em{ font-style:normal; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--zijbalk-gedempt); }

.zij__nav{ flex:1; overflow-y:auto; padding:6px var(--zijpad) 10px;
  position:relative; z-index:1; }
.zij__groep{ margin:18px 0 6px; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--zijbalk-gedempt); }
.zij__groep:first-child{ margin-top:2px; }

.zij__link{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 12px; margin-bottom:2px; min-height:44px;
  border:0; border-radius:10px; background:none; cursor:pointer;
  font-family:var(--letter); font-size:14.5px; font-weight:600; text-align:left;
  color:var(--zijbalk-op); text-decoration:none;
  transition:background-color .15s var(--wissel), color .15s var(--wissel);
}
.zij__link svg{ width:18px; height:18px; flex:0 0 18px; opacity:.72; }
.zij__link:hover{ background:var(--zijbalk-actief); }
.zij__link[aria-current="page"]{
  background:var(--zijbalk-actief); color:#fff;
  box-shadow:inset 3px 0 0 var(--accent);
}
.zij__link[aria-current="page"] svg{ opacity:1; color:var(--accent); }

.zij__voet{ padding:14px var(--zijpad) 18px; border-top:1px solid var(--zijbalk-lijn);
  position:relative; z-index:1; }
.zij__wie{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.zij__bol{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-op); font-weight:800; font-size:13px;
}
.zij__naam{ min-width:0; }
.zij__naam b{ display:block; font-size:13.5px; color:var(--zijbalk-op);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zij__naam span{ display:block; font-size:11.5px; color:var(--zijbalk-gedempt); }

.thema{ display:flex; gap:4px; padding:4px; margin-bottom:10px;
  border-radius:999px; background:var(--zijbalk-actief); }
.thema button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 8px; border:0; border-radius:999px;
  background:none; cursor:pointer; color:var(--zijbalk-gedempt);
  font-family:var(--letter); font-size:11.5px; font-weight:700;
  transition:background-color .15s var(--wissel), color .15s var(--wissel);
}
.thema button svg{ width:14px; height:14px; }
.thema button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-op); }

.bovenbalk{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px; padding:10px var(--pad);
  background:var(--grond); border-bottom:1px solid var(--lijn);
}
.bovenbalk__merk{ display:inline-flex; align-items:center; min-height:44px;
  margin-right:auto; font-weight:800; font-size:16px;
  letter-spacing:-.03em; color:var(--kop); text-decoration:none; }
.bovenbalk__merk span{ color:var(--accent); }
.ladeknop{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:1px solid var(--lijn);
  border-radius:12px; background:var(--vlak-1); color:var(--kop); cursor:pointer;
}
.ladeknop svg{ width:20px; height:20px; }

.sluier{
  position:fixed; inset:0; z-index:45; background:rgba(10,14,20,.5);
  opacity:0; pointer-events:none; transition:opacity .22s var(--wissel);
}
.sluier.aan{ opacity:1; pointer-events:auto; }

@media (min-width:1000px){
  .zij{ transform:none; transition:none; }
  .bovenbalk, .sluier{ display:none; }
  .schil{ padding-left:var(--zijbreedte); }
}

/* Op een breed scherm stond het dashboard als een smalle kolom in het
   midden, met aan weerszijden een paar honderd pixels niets. Elfhonderd
   pixels is een goede maat voor lopende tekst, maar dit is geen artikel;
   het is een werkomgeving. Dus loopt de kolom mee met het scherm, en
   blijft de lópende tekst binnen de kaarten zelf begrensd. */
main{
  position:relative; z-index:1;
  width:100%; margin:0 auto; padding:var(--pad); max-width:1100px;
}
@media (min-width:1500px){ main{ max-width:1280px; } }
@media (min-width:1750px){ main{ max-width:1420px; } }
@media (min-width:2050px){ main{ max-width:1520px; } }
main.smal{ max-width:520px; }
@media (min-width:1500px){ main.smal{ max-width:560px; } }

.demobalk{
  position:relative; z-index:1;
  margin:0; padding:9px var(--pad); text-align:center;
  background:var(--accent-waas); color:var(--accent-tekst);
  border-bottom:1px solid var(--accent-rand); font-size:13px; font-weight:600;
}

.welkom{ margin:0 0 clamp(20px,2.6vw,30px); }
.welkom__oog{ font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gedempt); margin-bottom:10px; }
.welkom__onder{ margin-top:10px; color:var(--gedempt); max-width:56ch; }

/* ══════════════════════════════════════════════════════════════════════
   De assistenten als bollen bovenaan
   ══════════════════════════════════════════════════════════════════════ */

.bollen{ display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 clamp(22px,3vw,34px); padding:0; list-style:none; }
@media (min-width:560px){ .bollen{ gap:14px; } }
.bollen li{ display:block; }

.bol{
  position:relative; width:52px; height:52px; border-radius:50%;
  border:1px solid var(--lijn); background:var(--vlak-1);
  color:var(--accent-tekst); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--schaduw-1);
  /* Elke bol ademt, met een eigen tempo en een eigen startpunt. Zonder dat
     verschil gaan ze met zijn achten tegelijk op en neer en wordt het een
     lichtkrant in plaats van iets dat leeft. */
  animation:adem var(--tempo,6s) var(--wissel) var(--start,0s) infinite;
  transition:transform .2s var(--in), box-shadow .2s var(--in),
             border-color .2s var(--in);
}
@media (min-width:560px){ .bol{ width:58px; height:58px; } }
.bol svg{ width:23px; height:23px; }
@keyframes adem{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-5px) scale(1.015); }
}
.bol:hover, .bol:focus-visible{
  transform:translateY(-6px) scale(1.06); animation-play-state:paused;
  border-color:var(--accent); box-shadow:var(--schaduw-3);
}
.bol--open{ background:var(--accent-waas); border-color:var(--accent-rand); }
.bol--dicht{ color:var(--gedempt); }
.bol__slot{
  position:absolute; right:-2px; bottom:-2px;
  width:19px; height:19px; border-radius:50%;
  background:var(--vlak-2); border:1px solid var(--lijn);
  display:flex; align-items:center; justify-content:center;
}
.bol__slot svg{ width:10px; height:10px; color:var(--gedempt); }

/* Het naamplaatje. Verschijnt bij zweven én bij toetsenbordfocus, want
   anders bestaat die informatie niet voor wie niet met een muis werkt. */
/* display:none en niet opacity:0.

   Een onzichtbaar naamplaatje telt wel mee voor de breedte van de pagina.
   Bij de laatste bol op een rij stak het plaatje tot 17 pixels buiten het
   venster, en op een telefoon van 320 breed kreeg je daar een horizontale
   schuifbalk van. Niet te zien, wel te voelen.

   Met display:none is er geen vak, dus ook geen overloop. De beweging
   loopt daarom via een animatie in plaats van een overgang: een overgang
   start niet vanuit display:none, een animatie wel. */
.bol__naam{
  display:none; position:absolute; left:50%; top:calc(100% + 9px);
  padding:5px 10px; border-radius:8px; white-space:nowrap;
  background:var(--kop); color:var(--grond);
  font-size:11.5px; font-weight:700; pointer-events:none; z-index:5;
}
.bol:hover .bol__naam, .bol:focus-visible .bol__naam{
  display:block; animation:plaatje-op .16s var(--in) both;
}
@keyframes plaatje-op{
  from{ opacity:0; transform:translateX(-50%) translateY(-3px); }
  to  { opacity:1; transform:translateX(-50%) translateY(2px); }
}
@media (prefers-reduced-motion:reduce){
  .bol:hover .bol__naam, .bol:focus-visible .bol__naam{
    animation:none; transform:translateX(-50%) translateY(2px);
  }
}

@media (prefers-reduced-motion:reduce){
  .bol{ animation:none; }
  .bol:hover, .bol:focus-visible{ transform:none; }
  .zij::before{ animation:none; opacity:0; }
  .zij, .zij.open{ transition:none; }
  body{ transition:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Kaarten en onderdelen
   ══════════════════════════════════════════════════════════════════════ */

.kaart{
  background:var(--vlak-1); border:1px solid var(--lijn); border-radius:var(--rond-l);
  padding:clamp(20px,2.6vw,28px); box-shadow:var(--schaduw-2); margin:0 0 16px;
}
.kaart h3{ margin:0 0 4px; }
.kaart__uitleg{ color:var(--gedempt); font-size:14.5px; margin:0 0 18px; }
.kaart--leeg{ background:var(--vlak-2); border-style:dashed; box-shadow:none; }
.kaart--leeg p{ color:var(--gedempt); font-size:15px; margin-top:6px; }
.kaart--bouw{ background:var(--accent-waas); border-color:var(--accent-rand); box-shadow:none; }
.kaart--bouw p{ margin-top:10px; font-size:15px; }
.kaart--demo{ background:var(--vlak-2); box-shadow:none; }
.kaart--demo p{ margin-top:8px; font-size:15px; color:var(--gedempt); }
.kaart--demo form{ margin-top:16px; }

@media (min-width:880px){
  .rooster{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  .rooster .kaart{ margin:0 0 16px; }
}

/* ── De grootste groeikans ───────────────────────────────────────────── */

.groeikans{ position:relative; overflow:hidden; padding:0; border:0;
  background:var(--diep); color:var(--diep-tekst); box-shadow:var(--schaduw-3); }
.groeikans__ring{
  position:absolute; left:50%; top:50%; width:170%; aspect-ratio:1;
  margin:-85% 0 0 -85%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 55%,
    rgba(255,122,61,.55) 72%, rgba(120,170,220,.3) 84%, transparent 94% 100%);
  filter:blur(44px); opacity:.85;
  animation:ringdraai 18s linear infinite;
}
@keyframes ringdraai{ to{ transform:rotate(360deg); } }
.groeikans__in{
  position:relative; margin:2px; border-radius:calc(var(--rond-l) - 2px);
  background:linear-gradient(158deg, var(--diep-licht) 0%, var(--diep) 100%);
  padding:clamp(24px,3vw,36px);
}
.groeikans__label{ font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--diep-accent); margin-bottom:12px; }
.groeikans__label{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.groeikans__label em{
  font-style:normal; color:var(--diep-kop); letter-spacing:.1em;
  padding:3px 9px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
}
.groeikans h2{ color:var(--diep-kop); max-width:22ch; }
.groeikans__waarom{ margin-top:14px; color:var(--diep-tekst); max-width:58ch; }
.groeikans__effect,.groeikans__actie{
  margin-top:18px; padding:16px 18px; border-radius:var(--rond-s);
  background:var(--diep-vlak); color:var(--diep-kop); font-size:15px;
}
.groeikans__effect b,.groeikans__actie b{
  display:block; margin-bottom:4px; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--diep-accent);
}
.groeikans__knoppen{ margin-top:22px; }
.groeikans--leeg{ background:var(--vlak-2); color:var(--tekst);
  border:1px dashed var(--lijn); box-shadow:none; padding:clamp(24px,3vw,36px); }
.groeikans--leeg h2{ color:var(--kop); }
.groeikans--leeg .groeikans__label{ color:var(--gedempt); }
.groeikans__wacht{ margin:12px 0 20px; color:var(--gedempt); max-width:52ch; }
@media (prefers-reduced-motion:reduce){ .groeikans__ring{ animation:none; } }

/* Een maximum, want op een kaart van twaalfhonderd pixels breed duwde de
   eerste kolom het balkje naar de verre rechterrand en hoorden het label
   en zijn balkje niet meer bij elkaar. Een grafiek die je van links naar
   rechts moet overbruggen leest niet. */
.beoordeling{ margin-top:24px; display:grid; gap:11px; max-width:460px; }
/* Op een kleine telefoon blijft er naast een balkje van 128 px nog geen
   vijftig pixels over voor "Bijdrage aan je leven". Daar gaat het label
   dus op een eigen regel, met het balkje eronder. Beter twee regels dan
   een woord dat uit zijn hokje hangt. */
.beoordeling__rij{
  display:grid; grid-template-columns:minmax(0,1fr) 30px;
  gap:4px 12px; align-items:center; font-size:13.5px; color:var(--diep-tekst);
}
.beoordeling__rij > span:first-child{ grid-column:1 / -1; }
.beoordeling__rij .balkje{ grid-column:1; }
@media (min-width:430px){
  .beoordeling__rij{ grid-template-columns:minmax(0,1fr) 128px 30px; gap:14px; }
  .beoordeling__rij > span:first-child{ grid-column:auto; }
  .beoordeling__rij .balkje{ grid-column:auto; }
}
.beoordeling__cijfer{ font-size:12.5px; font-weight:700; color:var(--diep-gedempt);
  text-align:right; font-variant-numeric:tabular-nums; }
.balkje{ display:block; height:6px; border-radius:3px; background:var(--diep-spoor); }
.balkje i{ display:block; height:100%; border-radius:3px; background:var(--diep-accent);
  animation:groei .7s var(--in) both; }

/* ── Voortgang ───────────────────────────────────────────────────────── */

.stappen{ margin:18px 0 0; padding:0; list-style:none; }
.stap{ display:grid; grid-template-columns:34px 1fr auto; gap:14px;
  align-items:center; padding:14px 0; border-top:1px solid var(--lijn); }
.stap:first-child{ border-top:0; padding-top:4px; }
.stap__bol{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--vlak-2); border:2px solid var(--lijn);
  font-weight:700; font-size:13px; color:var(--gedempt);
}
.stap.klaar .stap__bol{ background:var(--groen); border-color:var(--groen); color:var(--grond); }
.stap.open .stap__bol{ background:var(--accent); border-color:var(--accent); color:var(--accent-op); }
.stap__naam{ font-weight:600; color:var(--kop); }
.stap__staat{ font-size:13.5px; color:var(--gedempt); }
.stap.klaar .stap__staat{ color:var(--groen); }

/* ── Staven ──────────────────────────────────────────────────────────── */

.staven{ display:grid; gap:12px; }
.staaf{ display:grid; grid-template-columns:1fr 1fr 44px; gap:12px;
  align-items:center; font-size:14.5px; }
@media (min-width:520px){ .staaf{ grid-template-columns:132px 1fr 44px; } }
.staaf__naam{ color:var(--tekst); }
.staaf__spoor{ display:block; height:8px; border-radius:4px; background:var(--vlak-2); }
.staaf__spoor i{ display:block; height:100%; border-radius:4px;
  background:var(--accent); animation:groei .8s var(--in) both; }
.staaf__waarde{ text-align:right; font-variant-numeric:tabular-nums;
  color:var(--gedempt); font-size:13px; }
@keyframes groei{ from{ transform:scaleX(0); transform-origin:left; } }
@media (prefers-reduced-motion:reduce){
  .staaf__spoor i,.balkje i,.veld__punt,.onthul{ animation:none; }
  .dier,.dier__oog,.dier__blik,.dier__arm--rechts,.dier__kop,.agent__staat i{
    animation:none; }
}

/* ── Nu tegenover gewenst ────────────────────────────────────────────── */

.kloof{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; }
.kloof__kant{ padding:18px; border-radius:var(--rond-s); background:var(--vlak-2);
  text-align:center; }
.kloof__kant span{ display:block; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gedempt); }
.kloof__kant b{ display:block; margin-top:6px;
  font-size:clamp(26px,4vw,34px); line-height:1; color:var(--kop); }
.kloof__kant b small{ font-size:14px; font-weight:600; color:var(--gedempt); }
.kloof__kant--doel{ background:var(--accent-waas); }
.kloof__kant--doel b{ color:var(--accent-tekst); }
.kloof__pijl{ color:var(--gedempt); font-size:20px; }
.kloof__verschil{ margin-top:14px; font-size:14.5px; color:var(--gedempt); text-align:center; }
.kloof__verschil b{ color:var(--kop); }

/* ── Impact tegenover inspanning ─────────────────────────────────────── */

.veld{ display:grid; grid-template-columns:22px 1fr; grid-template-rows:1fr 22px; gap:8px; }
.veld__vlak{
  position:relative; aspect-ratio:1; max-height:320px; overflow:hidden;
  border-radius:var(--rond-s); border:1px solid var(--lijn);
  background:
    linear-gradient(135deg, var(--accent-waas) 0%, transparent 52%),
    repeating-linear-gradient(to right, transparent 0 24%, var(--lijn) 24% calc(24% + 1px)),
    repeating-linear-gradient(to top,   transparent 0 24%, var(--lijn) 24% calc(24% + 1px)),
    var(--vlak-1);
}
.veld__hoek{ position:absolute; left:10px; top:9px; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-tekst); }
.veld__punt{
  position:absolute; width:30px; height:30px; margin:0 0 -15px -15px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--kop); color:var(--grond);
  font-size:13px; font-weight:700; box-shadow:var(--schaduw-2);
  animation:punt-op .45s var(--in) both;
}
.veld__punt--top{ background:var(--accent); color:var(--accent-op); }
@keyframes punt-op{ from{ opacity:0; transform:scale(.6); } }
.veld__as{ display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gedempt); }
.veld__as--y{ grid-row:1; writing-mode:vertical-rl; transform:rotate(180deg); }
.veld__as--x{ grid-column:2; }
.veld__lijst{ margin:18px 0 0; padding:0; list-style:none; }
.veld__lijst li{ display:flex; gap:12px; align-items:center;
  padding:10px 0; border-top:1px solid var(--lijn);
  font-size:14.5px; color:var(--tekst); }
.veld__lijst b{ flex:0 0 22px; height:22px; display:flex; align-items:center;
  justify-content:center; border-radius:50%; background:var(--vlak-2);
  color:var(--kop); font-size:11.5px; }
.veld__lijst li:first-child b{ background:var(--accent); color:var(--accent-op); }

/* ── Punten en tijdlijn ──────────────────────────────────────────────── */

.punten{ margin:0; padding:0; list-style:none; counter-reset:punt; }
.punten li{ counter-increment:punt; position:relative;
  padding:16px 0 16px 40px; border-top:1px solid var(--lijn); }
.punten li:first-child{ border-top:0; }
.punten li::before{ content:counter(punt,decimal-leading-zero);
  position:absolute; left:0; top:18px; font-weight:700; font-size:12px;
  letter-spacing:.08em; color:var(--accent-tekst); }
.punten b{ display:block; color:var(--kop); }
.punten span{ display:block; margin-top:3px; font-size:14.5px; color:var(--gedempt); }

.tijdlijn{ position:relative; margin:6px 0 0; padding:0 0 0 38px; list-style:none; }
.tijdlijn::before{
  content:""; position:absolute; left:13px; top:12px; bottom:12px; width:2px;
  border-radius:2px; background:linear-gradient(var(--accent), var(--lijn));
}
.tl{ position:relative; padding:0 0 26px; }
.tl:last-child{ padding-bottom:0; }
.tl__bol{ position:absolute; left:-38px; top:0;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--vlak-1); border:2px solid var(--accent);
  font-size:12px; font-weight:700; color:var(--accent-tekst); }
.tl__wanneer{ font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-tekst); padding-top:5px; }
.tl h4{ margin:4px 0 10px; }
.tl__acties{ margin:0; padding:0 0 0 18px; }
.tl__acties li{ font-size:14.5px; line-height:1.55; margin-bottom:6px; color:var(--tekst); }
.tl__leeg{ list-style:none; margin-left:-18px; color:var(--gedempt); font-style:italic; }

/* ── Assistentenkaarten ──────────────────────────────────────────────── */

.assistenten{ display:grid; gap:14px; margin-bottom:16px; }
@media (min-width:640px){ .assistenten{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .assistenten{ grid-template-columns:repeat(4,1fr); } }
.assistent{
  background:var(--vlak-1); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:20px; box-shadow:var(--schaduw-2);
  transition:transform .2s var(--in), box-shadow .2s var(--in);
}
@media (hover:hover){
  .assistent:hover{ transform:translateY(-3px); box-shadow:var(--schaduw-3); }
}
/* Hier staat het figuurtje zelf en niet een icoontje in een hokje. Dit
   is de pagina waar je ze komt bekijken; dan hoor je te zien wie het
   zijn. Dezelfde maat als op het dashboard, maar met lucht eromheen. */
/* Dezelfde bubbel als op het overzicht, een slag groter. Dit is de
   pagina waar je ze komt bekijken. */
.assistent__beeld{ width:84px; height:84px; margin:0 0 16px; }
.assistent__icoon{ display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px; background:var(--accent-waas);
  margin-bottom:16px; }
.assistent__icoon svg{ width:25px; height:25px; color:var(--accent-tekst); }
.assistent h3{ font-size:16px; }
.assistent__rol{ font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-tekst); margin:4px 0 8px; }
.assistent p{ font-size:14.5px; color:var(--gedempt); line-height:1.55; }
.assistent__staat{ display:flex; align-items:center; gap:7px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--lijn);
  font-size:12.5px; font-weight:700; color:var(--groen); }
.assistent__staat svg{ width:14px; height:14px; flex:0 0 14px; }
.assistent--dicht{ background:var(--vlak-2); box-shadow:none; }
.assistent--dicht .assistent__icoon{ background:var(--vlak-3); }
.assistent--dicht .assistent__icoon svg{ color:var(--gedempt); }
.assistent--dicht .assistent__staat{ color:var(--gedempt); }

/* ── Knoppen ─────────────────────────────────────────────────────────── */

.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:13px 24px; border:0; border-radius:999px;
  background:var(--accent); color:var(--accent-op);
  font-family:var(--letter); font-size:14.5px; font-weight:700; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:transform .15s var(--in), filter .15s var(--wissel);
}
/* Een knop die ergens op ligt in plaats van ergens in geplakt zit. Drie
   dingen doen dat werk, en alle drie zijn ze klein: een schaduw in de
   accentkleur zodat hij licht lijkt te werpen, een dun lijntje bovenin
   dat het licht vangt, en een veeg die er bij aanwijzen overheen loopt.
   Geen van drieën valt op; samen is het verschil tussen een vlakje en
   een knop. */
.knop{
  position:relative; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,
             0 10px 20px -12px var(--knopgloed);
  transition:transform .18s var(--in), filter .15s var(--wissel),
             box-shadow .22s var(--in);
}
.knop::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%,
    rgba(255,255,255,.3) 42%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .55s var(--in);
}
@media (hover:hover){
  .knop:hover{
    filter:brightness(1.05); transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.3) inset,
               0 16px 26px -12px var(--knopgloed);
  }
  .knop:hover::after{ transform:translateX(120%); }
}
.knop:active{ transform:translateY(1px); }
.knop:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.knop--rand{
  background:transparent; color:var(--kop); border:1.5px solid var(--veldlijn);
  box-shadow:none;
}
@media (hover:hover){
  .knop--rand:hover{
    background:var(--vlak-2); filter:none; border-color:var(--accent-rand);
    box-shadow:0 10px 20px -14px var(--knopgloed);
  }
}
.knop--rand::after{ background:linear-gradient(100deg, transparent 20%,
  var(--accent-waas) 42%, transparent 62%); }

.knop--licht{ background:rgba(255,255,255,.14); color:#fff; box-shadow:none; }
.knop--licht:hover{ background:rgba(255,255,255,.22); filter:none; }

/* Een uitgeschakelde knop gedraagt zich ook als uitgeschakeld: geen
   lift, geen veeg, geen handje. */
.knop[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
.knop[disabled]:hover{ transform:none; filter:none; }
.knop[disabled]::after{ display:none; }

@media (prefers-reduced-motion:reduce){
  .knop, .knop::after{ transition:none; }
  .knop:hover{ transform:none; }
  .knop:hover::after{ transform:translateX(-120%); }
}

/* ── De poort ────────────────────────────────────────────────────────── */

.poort{ position:relative; overflow:hidden; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--pad); background:var(--grond); }
body.uit main{ max-width:none; padding:0; }

/* Twee kleurvlakken die heel traag drijven. Alleen transform beweegt, dus
   het kost de grafische kaart niets, en veertig seconden per cyclus is
   traag genoeg om het niet te zien bewegen maar wel te merken dat het
   leeft. */
.poort__gloed{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.poort__gloed i{ position:absolute; display:block; border-radius:50%;
  width:min(110vw,820px); aspect-ratio:1; will-change:transform; }
.poort__gloed i:nth-child(1){
  left:50%; top:-42%; margin-left:-42%;
  background:radial-gradient(circle, rgba(255,122,61,.22), transparent 66%);
  animation:drijf-a 40s ease-in-out infinite alternate;
}
.poort__gloed i:nth-child(2){
  right:-34%; bottom:-40%;
  background:radial-gradient(circle, rgba(93,140,196,.17), transparent 64%);
  animation:drijf-b 52s ease-in-out infinite alternate;
}
@keyframes drijf-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(6%,5%,0) scale(1.14); }
}
@keyframes drijf-b{
  from{ transform:translate3d(0,0,0) scale(1.06); }
  to  { transform:translate3d(-7%,-4%,0) scale(.94); }
}
@media (prefers-reduced-motion:reduce){ .poort__gloed i{ animation:none; } }

.poort__in{ position:relative; width:100%; max-width:430px; text-align:center;
  animation:poort-op .45s var(--in) both; }
@keyframes poort-op{ from{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce){ .poort__in{ animation:none; } }

/* Ook het merk is een link waar je op kunt tikken, dus ook die haalt de
   44 pixels. Met padding in plaats van een hoogte, zodat de tekst op zijn
   plek blijft staan. */
.merk--groot{ display:inline-flex; align-items:center; min-height:44px;
  padding:0 10px; font-weight:800; font-size:21px;
  letter-spacing:-.03em; color:var(--kop); text-decoration:none; }
.merk--groot span{ color:var(--accent); }
.poort__waar{ margin:8px 0 26px; font-size:14px; color:var(--gedempt); }
.poort__waar b{ color:var(--accent-tekst); font-weight:700; }
.poort__kaart{ background:var(--vlak-1); border:1px solid var(--lijn);
  border-radius:var(--rond-l); padding:clamp(24px,4vw,34px);
  box-shadow:var(--schaduw-3); text-align:left; }
.poort__kaart h1{ font-size:clamp(22px,3.2vw,27px); margin-bottom:6px; }
.poort__onder{ color:var(--gedempt); font-size:14.5px; margin-bottom:4px; }
.poort__voet{ margin:22px auto 0; max-width:34ch; font-size:12.5px;
  line-height:1.5; color:var(--gedempt); }

/* ── Velden ──────────────────────────────────────────────────────────── */

.velden{ display:grid; gap:6px; }
.velden label{ margin-top:14px; font-size:13.5px; font-weight:700; color:var(--kop); }
.velden input{
  width:100%; min-height:48px; padding:12px 14px;
  border:1px solid var(--veldlijn); border-radius:12px;
  background:var(--vlak-1); color:var(--kop);
  font-family:var(--letter); font-size:16px;
  transition:border-color .15s var(--wissel), box-shadow .15s var(--wissel);
}
.velden input::placeholder{ color:var(--gedempt); opacity:1; }
.velden input:focus{ border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(255,122,61,.25); }
.velden .knop{ margin-top:22px; width:100%; }
.hint{ margin-top:8px; font-size:13.5px; color:var(--gedempt); }

.velden__rij{ display:grid; gap:6px; }
@media (min-width:420px){ .velden__rij{ grid-template-columns:1fr 1fr; gap:14px; } }
.velden__rij span{ display:block; }
.velden__rij label{ margin-top:14px; }

/* Het oogje bij het wachtwoord. Een knop ín het veld, niet ernaast: zo
   blijft het veld even breed als de andere en verschuift er niets. */
.wwveld{ position:relative; }
.wwveld input{ padding-right:52px; }
.oogje{
  position:absolute; right:3px; bottom:2px;
  width:44px; height:44px; padding:0; border:0; border-radius:10px;
  background:none; color:var(--gedempt); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.oogje:hover{ color:var(--kop); }
.oogje svg{ width:20px; height:20px; }

.melding{ display:flex; gap:10px; align-items:flex-start;
  padding:13px 16px; border-radius:12px; font-size:14.5px; margin-bottom:18px; }
.melding svg{ width:18px; height:18px; flex:0 0 18px; margin-top:1px; }
.melding--fout{ background:var(--rood-waas); color:var(--rood); }
.melding--goed{ background:var(--groen-waas); color:var(--groen); }

/* ── Beheer ──────────────────────────────────────────────────────────── */

.vrijgave{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.vrijgave form{ margin:0; }
.tabel{ width:100%; border-collapse:collapse; font-size:14.5px; }
.tabel th, .tabel td{ padding:11px 10px; text-align:left;
  border-bottom:1px solid var(--lijn); white-space:nowrap; }
.tabel th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gedempt); font-weight:700; }
.tabel td{ color:var(--tekst); }
.tabel__wikkel{ overflow-x:auto; margin-top:6px; }

/* ── Ritme ───────────────────────────────────────────────────────────── */

.onthul{ opacity:0; transform:translateY(12px); animation:onthul .4s var(--in) both; }
@keyframes onthul{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .onthul{ animation:none; opacity:1; transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   De vragenlijst
   ══════════════════════════════════════════════════════════════════════ */

/* De voortgangsmeter: vier streepjes, waarvan je ziet welke je hebt gehad
   en waar je nu bent. Geen percentage, want "25 procent" zegt niets over
   hoeveel werk er nog komt. */
.meter{ display:flex; gap:6px; margin:0 0 clamp(22px,3vw,30px); padding:0; list-style:none; }
.meter li{
  flex:1; height:4px; border-radius:2px; background:var(--lijn);
  transition:background-color .3s var(--in);
}
.meter li.klaar{ background:var(--accent); }
/* Waar je nu bent is niet half af maar bezig, en dat laat je zien met
   beweging en niet met minder kleur. Een lichter streepje leest als een
   stap die mislukt is. */
.meter li.nu{
  background:linear-gradient(90deg, var(--accent) 0 40%,
    color-mix(in srgb, var(--accent) 35%, var(--lijn)) 55%, var(--accent) 70% 100%);
  background-size:260% 100%;
  animation:meterloop 2.4s var(--wissel) infinite;
}
@keyframes meterloop{ from{ background-position:130% 0; } to{ background-position:-30% 0; } }
@media (prefers-reduced-motion:reduce){
  .meter li.nu{ animation:none; background:var(--accent); opacity:.6; }
}

.vragen{ display:block; }
.vraag{
  border:0; margin:0 0 14px; padding:clamp(18px,2.4vw,24px);
  background:var(--vlak-1); border:1px solid var(--lijn); border-radius:var(--rond);
  box-shadow:var(--schaduw-1);
}
.vraag__kop{
  display:block; margin:0 0 4px; font-family:var(--letter);
  font-size:17px; font-weight:700; line-height:1.35; color:var(--kop);
  letter-spacing:-.01em;
}
.vraag__kop em{ font-style:normal; font-weight:600; font-size:13px; color:var(--gedempt); }
.vraag__hulp{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--gedempt); }
.vraag__fout{
  margin:-8px 0 14px; padding:10px 14px; border-radius:10px;
  background:var(--rood-waas); color:var(--rood); font-size:14px;
}

/* Keuzes als aanraakbare rijen, niet als kale rondjes. Op een telefoon is
   een bolletje van 13 px geen doel; de hele rij wel. */
.keuzes{ display:grid; gap:8px; margin-top:10px; }
.keuze{
  display:flex; align-items:flex-start; gap:12px; min-height:48px;
  padding:12px 14px; border:1px solid var(--lijn); border-radius:12px;
  background:var(--grond); cursor:pointer; font-size:15px; line-height:1.45;
  transition:border-color .15s var(--wissel), background-color .15s var(--wissel);
}
.keuze:hover{ border-color:var(--veldlijn); }
.keuze input{ flex:0 0 20px; width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); }
.keuze:has(input:checked){
  border-color:var(--accent); background:var(--accent-waas);
}
.keuze:has(input:focus-visible){ outline:3px solid var(--accent); outline-offset:2px; }

/* De schuifregelaar met de twee uitersten in woorden eronder. Een 4 op 5
   zegt niets als er niet bij staat wat 1 en 5 betekenen. */
.schuif{ margin-top:12px; }
.schuif input[type="range"]{
  width:100%; height:44px; margin:0; accent-color:var(--accent); cursor:pointer;
}
.schuif__kanten{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center;
  margin-top:2px; font-size:13px; color:var(--gedempt);
}
.schuif__kanten span:last-child{ text-align:right; }
.schuif__nu{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:var(--accent-op);
  font-weight:800; font-size:14px;
}

.getal{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.getal input{
  width:120px; min-height:48px; padding:12px 14px;
  border:1px solid var(--veldlijn); border-radius:12px;
  background:var(--vlak-1); color:var(--kop);
  font-family:var(--letter); font-size:17px; font-weight:700;
}
.getal input:focus{ border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(255,122,61,.25); }
.getal__eenheid{ color:var(--gedempt); font-size:15px; }

.vraag textarea,
.vraag input[type="text"]{
  width:100%; margin-top:10px; padding:12px 14px;
  border:1px solid var(--veldlijn); border-radius:12px;
  background:var(--vlak-1); color:var(--kop);
  font-family:var(--letter); font-size:16px; line-height:1.55;
}
.vraag textarea{ min-height:120px; resize:vertical; }
.vraag textarea:focus,
.vraag input[type="text"]:focus{
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(255,122,61,.25);
}
.vraag input[type="text"]{ min-height:48px; }

.knoprij{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.knoprij--onder{ margin-top:24px; }
.knoprij--onder .knop{ flex:1; min-width:140px; }

.lees{ font-size:17px; line-height:1.7; color:var(--tekst); max-width:60ch; }

/* ══════════════════════════════════════════════════════════════════════
   Jouw agents
   ══════════════════════════════════════════════════════════════════════ */

.agents{ margin:0 0 clamp(24px,3.4vw,38px); }

/* Op een telefoon past de link niet naast een alinea van drie regels;
   daar kwam hij midden in de tekst te hangen. Dus stapelen, en pas naast
   elkaar zetten zodra er ruimte voor is. */
.agents__kop{ margin:0 0 16px; }
.agents__kop p{ margin:5px 0 0; }
@media (min-width:720px){
  .agents__kop{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  }
}
.agents__kop h2{
  margin:0; font-size:clamp(21px,2.6vw,26px); letter-spacing:-.02em; color:var(--kop);
}
.agents__kop h2 span{ color:var(--accent); }
.agents__kop p{ margin:5px 0 0; font-size:14.5px; color:var(--gedempt); max-width:48ch; }

.agents__meer{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  min-height:44px; padding:0 4px; color:var(--accent-tekst);
  font-size:14.5px; font-weight:650; text-decoration:none;
}
.agents__meer svg{ width:17px; height:17px; transition:transform .2s var(--in); }
.agents__meer:hover svg{ transform:translateX(3px); }
.agents__meer:hover span{ text-decoration:underline; text-underline-offset:3px; }

/* Op een telefoon schuift de rij. Acht naast elkaar op 360 px worden
   acht onleesbare streepjes; drie met hun naam eronder zijn drie agents,
   en de rest haal je erbij door te vegen. De schaduwrand aan de
   rechterkant vertelt dat er meer staat. */
.agents__rij{
  display:flex; gap:10px; margin:0; padding:2px 0 10px; list-style:none;
  overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.agents__rij > li{ flex:0 0 118px; scroll-snap-align:start; }

/* Vanaf hier passen er vier naast elkaar en hoeft er niets te schuiven.
   Een tablet is geen telefoon.

   Let op de nul in minmax(0,1fr). Zonder die nul krijgt elke kolom als
   ondergrens de breedte van het langste woord dat erin staat, en dat is
   "Automatiseringsassistent". Acht van die kolommen zijn samen breder dan
   de pagina, en dan steekt de rij agents verder uit dan alle kaarten
   eronder. Precies dat gebeurde er. */
@media (min-width:600px){
  .agents__rij{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
    overflow:visible; padding-bottom:0;
    -webkit-mask-image:none; mask-image:none;
  }
  .agents__rij > li{ flex:none; min-width:0; }
}
/* Pas acht op een rij als er echt ruimte voor is. */
@media (min-width:1600px){
  .agents__rij{ grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; }
}

/* Geen vierkantje om een agent heen. Een agent ís het bolletje; de naam
   staat eronder als bijschrift, zoals bij een portret. */
.agent{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:2px; height:100%; padding:8px 4px 10px; text-align:center;
  border:0; border-radius:18px; background:none; box-shadow:none;
  text-decoration:none; min-width:0;
}
.agent:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* De bubbel. Elke agent heeft zijn eigen kleurtoon, laag van verzadiging
   zodat het acht familieleden blijven en geen snoeppot. Het licht komt
   linksboven binnen, bij alle acht vanuit dezelfde hoek; anders staan ze
   in acht verschillende kamers. */
.agent__beeld{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:84px; height:84px; margin:0 0 10px; border-radius:50%;
  background:
    radial-gradient(78% 74% at 30% 22%,
      hsl(var(--h,22) 86% 70% / var(--bubbel-op, .34)),
      hsl(var(--h,22) 62% 52% / calc(var(--bubbel-op, .34) * .42)) 56%,
      hsl(var(--h,22) 44% 44% / calc(var(--bubbel-op, .34) * .2)) 100%),
    var(--vlak-1);
  box-shadow:inset 0 1px 0 var(--bubbel-glans),
             inset 0 0 0 1px var(--bubbel-rand),
             var(--schaduw-1);
  transition:transform .25s var(--in), box-shadow .25s var(--in);
}
@media (min-width:600px){ .agent__beeld{ width:76px; height:76px; } }
@media (min-width:1600px){ .agent__beeld{ width:82px; height:82px; } }

.agent__slot{
  position:absolute; left:-2px; bottom:2px;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--vlak-2); border:1px solid var(--lijn); color:var(--gedempt);
}
.agent__slot svg{ width:13px; height:13px; }

/* "Automatiseringsassistent" is één woord van drieëntwintig letters. In
   een kolom van honderdtwintig pixels moet dat ergens breken; met
   afbreekstreepjes leest dat beter dan midden in een lettergreep, en
   anywhere staat eronder zodat het hoe dan ook niet uit zijn vak loopt. */
/* Alleen breken waar wij een zacht streepje hebben gezet; "auto" laat de
   browser zelf gokken en dat ging mis. */
.agent__naam{
  font-size:13.5px; font-weight:700; line-height:1.3; color:var(--kop);
  letter-spacing:-.01em; hyphens:manual; overflow-wrap:break-word;
  transition:color .2s var(--in);
}
.agent__rol{ font-size:12px; line-height:1.35; color:var(--gedempt);
  overflow-wrap:break-word; }
/* Onderaan uitlijnen. Breekt één naam over twee regels, dan zakte zijn
   lampje mee en stonden de acht statussen op twee hoogtes. */
.agent__staat{
  display:inline-flex; align-items:center; gap:5px; margin-top:auto;
  padding-top:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gedempt);
}
.agent__staat i{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Wie werkt heeft een groen lampje dat pulseert; wie op slot zit een grijs
   dat stilstaat. Dat verschil moet je zonder tekst al kunnen zien. */
.agent--open .agent__staat{ color:var(--groen); }
.agent--open .agent__staat i{ animation:lampje 2.4s var(--wissel) infinite; }
@keyframes lampje{
  0%,100%{ box-shadow:0 0 0 0 rgba(42,138,94,.55); }
  70%{ box-shadow:0 0 0 5px rgba(42,138,94,0); }
}
.agent--straks .agent__staat{ color:var(--accent-tekst); }

/* Op slot: zijn eigen kleur is er nog, maar gedempt. Zo blijft hij
   herkenbaar als díé agent, en zie je in één oogopslag wie wel en niet
   aanstaat. De kleur helemaal weghalen maakte de zes gesloten agents zes
   keer hetzelfde grijze bolletje. */
.agent--dicht .agent__beeld{ opacity:.68; }
.agent--dicht .agent__naam{ color:var(--tekst); }
.agent--dicht .agent__slot{ background:var(--vlak-2); }

/* ══════════════════════════════════════════════════════════════════════
   De begroeting: een veld in plaats van een vlak
   ══════════════════════════════════════════════════════════════════════

   Hier stond een platte kop op een platte achtergrond. Nu liggen er twee
   lagen achter: een fijn stippenraster en twee zachte lichten. Ze bewegen
   met de muis mee, maar niet even hard: het raster schuift een paar pixels
   tegen de beweging in, de lichten een stuk meer mee. Dat verschil in
   snelheid is het hele effect. Beweeg je niet, dan drijven ze heel langzaam
   van zichzelf, want op een telefoon is er geen muis.

   Allebei de lagen liggen op een eigen diepte binnen de begroeting zelf
   (isolation), zodat ze nooit achter de pagina kunnen zakken.            */

/* Dit lag eerst áchter de begroeting alleen. Daardoor werd het precies
   wat het niet moest zijn: een vlek van een paar honderd pixels naast de
   kop, met randen. Een achtergrond heeft geen randen.

   Nu ligt het vast aan het venster en ligt het dus onder de hele
   werkomgeving. Twee lagen: een fijn stippenraster dat alleen oplicht
   rond waar je muis is, en twee zachte lichten daarachter. Ze bewegen
   allebei mee, maar niet even hard; dat verschil in snelheid is de
   diepte. Beweeg je niet, dan drijven ze heel langzaam van zichzelf,
   want op een telefoon is er geen muis.

   Ze zitten aan de schil en niet aan main, zodat ze doorlopen tot in de
   hoeken en niet ophouden waar de inhoud ophoudt.                      */

.schil{ position:relative; }

/* Laag 1: het raster. Volgt de muis tegen de richting in. */
.schil::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle at center, var(--stip) 1.1px, transparent 1.3px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(42vmax 42vmax at calc(var(--mx,.6) * 100vw) calc(var(--my,.3) * 100vh),
    #000 0%, rgba(0,0,0,.38) 45%, transparent 78%);
  mask-image:radial-gradient(42vmax 42vmax at calc(var(--mx,.6) * 100vw) calc(var(--my,.3) * 100vh),
    #000 0%, rgba(0,0,0,.38) 45%, transparent 78%);
  transform:translate3d(calc((var(--mx,.5) - .5) * -14px), calc((var(--my,.5) - .5) * -10px), 0);
  transition:transform .6s var(--in);
}

/* Laag 2: de lichten. Dezelfde beweging, de andere kant op en ruim drie
   keer zo groot. */
/* Laag 2: de lichten. Ze volgen de muis, en ze drijven daarnaast uit
   zichzelf: twee lagen die allebei traag bewegen maar niet in hetzelfde
   ritme, zodat het nooit precies hetzelfde beeld is. De muisbeweging
   zit op deze laag, het eigen drijven op de laag erbinnen; anders zouden
   de twee elkaars transform overschrijven. */
.schil::after{
  content:''; position:fixed; inset:-10vmax; z-index:0; pointer-events:none;
  transform:translate3d(calc((var(--mx,.5) - .5) * 52px), calc((var(--my,.5) - .5) * 32px), 0);
  transition:transform .8s var(--in);
  /* Vijf vlekken in plaats van drie, en flink groter. Dit is de laag die
     het verschil maakt tussen een effen ivoren pagina en een pagina met
     een eigen atmosfeer. Ze overlappen elkaar, dus waar twee kleuren
     samenkomen ontstaat een derde; dat is wat een kleurovergang doet en
     wat je met losse vlakken nooit krijgt. */
  background:
    radial-gradient(52vmax 42vmax at 18% -4%,  var(--gloed-a), transparent 68%),
    radial-gradient(46vmax 38vmax at 92% 22%,  var(--gloed-b), transparent 66%),
    radial-gradient(44vmax 36vmax at 70% 88%,  var(--gloed-c), transparent 70%),
    radial-gradient(34vmax 30vmax at 6% 72%,   var(--gloed-b), transparent 72%),
    radial-gradient(30vmax 26vmax at 46% 40%,  var(--gloed-a), transparent 76%);
  background-repeat:no-repeat;
  /* Vervagen hoeft niet met een filter: een kleurovergang ís al zacht,
     en blur op een laag van schermgrootte kost op een telefoon merkbaar
     meer dan het oplevert. */
  animation:gloeddrift 54s ease-in-out infinite alternate;
}
/* De lichten verschuiven ten opzichte van elkaar in plaats van samen.
   Samen bewegen leest als een plaatje dat schuift; apart bewegen leest
   als diepte. */
@keyframes gloeddrift{
  from{ background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to  { background-position: 8vmax 5vmax, -7vmax -6vmax, 5vmax -7vmax,
                             6vmax -4vmax, -5vmax 6vmax; }
}
@media (prefers-reduced-motion:reduce){ .schil::after{ animation:none; } }

@media (hover:none){
  .schil::before{ animation:drijf 30s ease-in-out infinite; }
  .schil::after{ animation:drijf 30s ease-in-out infinite reverse; }
}
@keyframes drijf{
  0%,100%{ transform:translate3d(-8px,-6px,0); }
  50%{ transform:translate3d(8px,7px,0); }
}

/* Eén lichtveeg over de begroeting als de pagina opent, hetzelfde gebaar
   als in de zijbalk. De eindstand staat in de regel zelf, dus zonder
   animatie is de kop gewoon leesbaar. */
.welkom h1{
  background:linear-gradient(100deg,
    var(--kop) 0 36%, var(--accent) 47%, var(--kop) 58% 100%);
  background-size:260% 100%; background-position:-20% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:koplicht 1.6s var(--in) .2s both;
}
@keyframes koplicht{
  from{ background-position:130% 0; }
  to{ background-position:-20% 0; }
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .welkom h1{ color:var(--kop); background:none; animation:none; }
}

@media (prefers-reduced-motion:reduce){
  .schil::before, .schil::after{ animation:none; transition:none; transform:none; }
  .welkom h1{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   De kaarten: een opstaande rand in plaats van een omlijnd vak
   ══════════════════════════════════════════════════════════════════════

   Een kaart was een wit vlak met een lijntje eromheen. Nu valt er licht
   op: de bovenrand licht in het midden op, en rechtsboven ligt een flauwe
   glans. Allebei een paar procent dekking. Je ziet het niet als je kijkt,
   je ziet het als je het weghaalt.                                      */

/* Een eigen diepte binnen de kaart. Zonder dit zou de glans hieronder
   over de tekst heen komen te liggen; met een eigen stapel blijft hij
   eronder zonder dat er ook maar iets aan de inhoud hoeft te veranderen. */
.kaart{ position:relative; isolation:isolate; }

/* De bovenrand. Dit is de oorspronkelijke 1 px rand, maar oplichtend in
   het midden, zodat de kaart een bovenkant heeft in plaats van een
   omtrek. */
.kaart::before{
  content:''; position:absolute; left:14px; right:14px; top:-1px; height:1px;
  pointer-events:none; border-radius:1px;
  background:linear-gradient(90deg, transparent, var(--kaartlicht) 22%,
             var(--kaartlicht) 78%, transparent);
}
/* En de glans rechtsboven. Geen overflow:hidden op de kaart zelf, want
   daar hangen tooltips en punten buiten; vandaar een eigen ronding. */
.kaart::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(80% 110% at 100% 0%, var(--kaartglans), transparent 60%);
}

/* Een kaart die een kop heeft, krijgt een streepje in de accentkleur: een
   klein teken dat dit een onderdeel is en niet een alinea. */
.kaart > h3:first-child::before,
.kaart > h3:first-of-type::before{
  content:''; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--accent); margin:0 0 12px; opacity:.85;
}

.kaart--leeg::before, .kaart--leeg::after,
.kaart--bouw::before, .kaart--bouw::after,
.kaart--demo::before, .kaart--demo::after{ display:none; }
.groeikans::before, .groeikans::after{ display:none; }

/* De kaarten komen na elkaar in beeld in plaats van alle acht tegelijk.
   Zeventig milliseconde ertussen: genoeg om een volgorde te zien, te kort
   om op te moeten wachten. */
.onthul{ animation-delay:calc(var(--rang, 0) * 70ms); }
.vraag__hulp--na{ margin:10px 0 0; }

/* ══════════════════════════════════════════════════════════════════════
   Kerngetallen en de tegelindeling
   ══════════════════════════════════════════════════════════════════════ */

.cijfers{
  display:grid; gap:12px; margin:0 0 clamp(22px,3vw,32px);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.cijfer{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:18px 18px 16px; border-radius:var(--rond);
  background:
    linear-gradient(170deg, var(--tegelkleur, var(--perzik)) 0%, transparent 58%),
    var(--vlak-1);
  border:1px solid var(--lijn); box-shadow:var(--schaduw-1);
}
/* Elk kerngetal zijn eigen tint. Vier tegels naast elkaar in vier
   kleuren leest als vier dingen; vier keer wit leest als één tabel. */
.cijfers > .cijfer:nth-child(1){ --tegelkleur:var(--perzik);   --tegelinkt:var(--perzik-inkt); }
.cijfers > .cijfer:nth-child(2){ --tegelkleur:var(--lavendel); --tegelinkt:var(--lavendel-inkt); }
.cijfers > .cijfer:nth-child(3){ --tegelkleur:var(--mint);     --tegelinkt:var(--mint-inkt); }
.cijfers > .cijfer:nth-child(4){ --tegelkleur:var(--lucht);    --tegelinkt:var(--lucht-inkt); }
.cijfer__kop{ color:var(--tegelinkt, var(--gedempt)); }
.cijfer .ring{ background:conic-gradient(var(--tegelinkt, var(--accent))
  calc(var(--deel,0) * 360deg), var(--ringspoor) 0); }
.cijfer__kop{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gedempt);
}
.cijfer__onder{ font-size:12.5px; line-height:1.4; color:var(--gedempt); }
.cijfer--getal{ justify-content:space-between; }
.cijfer__groot{
  margin:2px 0 0; font-size:clamp(30px,3.4vw,38px); font-weight:800;
  line-height:1; letter-spacing:-.03em; color:var(--kop);
  font-variant-numeric:tabular-nums;
}
.cijfer__groot small{ font-size:15px; font-weight:650; color:var(--gedempt); letter-spacing:0; }

/* De ring. Een conische kleurovergang met een gat erin: geen plaatje, geen
   bibliotheek, en hij schaalt mee met de letter. Het getal staat erin,
   zodat je de verhouding ziet én de waarde leest. */
.ring{
  position:relative; display:grid; place-items:center;
  width:84px; height:84px; border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--deel,0) * 360deg),
                            var(--ringspoor) 0);
  animation:ringvul 1s var(--in) both;
}
.ring::before{
  content:''; position:absolute; inset:9px; border-radius:50%;
  background:var(--vlak-1);
}
.ring i{
  position:relative; font-style:normal; font-weight:800; font-size:20px;
  color:var(--kop); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.ring i small{ font-size:12.5px; font-weight:650; color:var(--gedempt); }

/* Een conische overgang laat zich alleen vloeiend vullen als de browser
   weet dat --deel een getal is. Kan hij dat niet, dan staat de ring er
   meteen goed; alleen het vullen gaat dan verloren. */
@property --deel{ syntax:'<number>'; inherits:false; initial-value:0; }
@keyframes ringvul{ from{ --deel:0; } }
@media (prefers-reduced-motion:reduce){ .ring{ animation:none; } }

/* ── De tegelindeling ─────────────────────────────────────────────────
   Op een telefoon één kolom, want dat is het enige dat past. Vanaf een
   brede laptop twee kolommen, zodat de ruimte naast een kaart niet leeg
   blijft. Wat zelf breed hoort te zijn, zoals het veld met impact tegen
   inspanning en het negentigdagenplan, zegt dat met de klasse "breed". */
.mozaiek{ display:grid; gap:16px; }
.mozaiek > *{ margin:0; min-width:0; }
/* Geen height:100% hier. Met gelijke hoogtes kreeg een kaart met één
   verbeterpunt erin evenveel wit als zijn buurman met zes staven, en dan
   lijkt er iets te ontbreken. Kaarten mogen zo hoog zijn als hun inhoud. */
.mozaiek .kaart{ margin:0; }
@media (min-width:1100px){
  .mozaiek{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
  .mozaiek > .breed{ grid-column:1 / -1; }
}

/* ── De weg terug ───────────────────────────────────────────────────────
   Linksboven, boven de kop, op elke pagina waar je naartoe hebt geklikt.
   Hij staat bewust vóór de titel in de voorleesvolgorde, zodat iemand
   met een schermlezer hem tegenkomt voordat hij de hele pagina door is. */
.terug{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; margin:-8px 0 4px; padding:0 12px 0 10px;
  margin-left:-10px; border-radius:999px;
  color:var(--gedempt); font-size:14px; font-weight:650; text-decoration:none;
  transition:color .18s var(--in), background-color .18s var(--in);
}
.terug svg{ width:17px; height:17px; transition:transform .18s var(--in); }
.terug:hover{ color:var(--kop); background:var(--vlak-2); }
.terug:hover svg{ transform:translateX(-3px); }
.terug:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.demobalk a{ color:inherit; text-underline-offset:3px; font-weight:700; }
.demobalk a:hover{ text-decoration-thickness:2px; }

/* ══════════════════════════════════════════════════════════════════════
   Velden waar echt iets in moet
   ══════════════════════════════════════════════════════════════════════ */

/* Een vak dat meegroeit terwijl je typt én dat je zelf kunt slepen. Dat
   eerste doet het script, dit zorgt dat het tweede kan en dat het begint
   op een hoogte die uitnodigt om door te schrijven. */
.groeiveld{
  width:100%; margin-top:10px; padding:14px 16px;
  border:1px solid var(--veldlijn); border-radius:12px;
  background:var(--vlak-1); color:var(--kop);
  font-family:var(--letter); font-size:16px; line-height:1.6;
  resize:vertical; min-height:96px; overflow:hidden;
}
.groeiveld:focus{
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(255,122,61,.25);
}
.groeiveld--klein{ min-height:56px; margin-top:8px; font-size:15px; }

/* Hoeveel je al kwijt bent. Pas zichtbaar zodra je begint, want een
   teller op nul boven een leeg vak is een opdracht en geen hulp. */
.vraag__teller{
  margin:6px 2px 0; font-size:12px; color:var(--gedempt); text-align:right;
  opacity:0; transition:opacity .2s var(--in);
}
.vraag__teller.aan{ opacity:1; }
.vraag__teller.vol{ color:var(--rood); font-weight:700; }

/* ── Zelf iets invullen ─────────────────────────────────────────────── */
.keuze--anders{ display:block; cursor:default; padding:12px 14px 14px; }
/* Minstens 44 px hoog, net als elke andere keuzerij. Dit was de regel
   zelf en niet het vakje erin, dus was het doel hier maar 24 px. */
.keuze__aan{ display:flex; align-items:center; gap:12px; cursor:pointer; min-height:44px; }
.keuze__aan input{ flex:0 0 20px; width:20px; height:20px; margin:0; accent-color:var(--accent); }
.keuze--anders textarea{ display:none; }
.keuze--anders.aan{ border-color:var(--accent); background:var(--accent-waas); }
.keuze--anders.aan textarea{ display:block; }

/* ── Voorzetjes ─────────────────────────────────────────────────────── */
.voorzet{ margin-top:18px; }
.voorzet__kop{ margin:0 0 10px; font-size:13.5px; line-height:1.5; color:var(--gedempt); }
.voorzet__rij{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; }
.chip input{ position:absolute; width:1px; height:1px; opacity:0; }
.chip span{
  display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
  border:1px solid var(--veldlijn); border-radius:999px;
  background:var(--grond); color:var(--tekst);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:border-color .15s var(--wissel), background-color .15s var(--wissel),
             color .15s var(--wissel);
}
.chip span:hover{ border-color:var(--accent-rand); }
.chip input:checked + span{
  border-color:var(--accent); background:var(--accent); color:var(--accent-op);
}
.chip input:focus-visible + span{ outline:3px solid var(--accent); outline-offset:2px; }

/* ── De urenrekenaar ────────────────────────────────────────────────── */
.rekenaar{ margin-top:14px; }
.rekenaar__paar{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.rekenaar__veld{ display:flex; flex-direction:column; gap:6px; }
.rekenaar__veld span{ font-size:13px; font-weight:650; color:var(--gedempt); }
.rekenaar__veld input{
  width:100%; min-height:52px; padding:12px 14px;
  border:1px solid var(--veldlijn); border-radius:12px;
  background:var(--vlak-1); color:var(--kop);
  font-family:var(--letter); font-size:20px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.rekenaar__veld input:focus{ border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(255,122,61,.25); }

.rekenaar__kop{
  margin:22px 0 10px; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gedempt);
}
.keuzes--dicht{ gap:6px; }
.keuzes--dicht .keuze{ min-height:44px; padding:9px 14px; font-size:14.5px; }
.keuze__uur{
  display:inline-block; margin-left:8px; font-style:normal;
  font-size:12px; font-weight:700; color:var(--accent-tekst);
  white-space:nowrap;
}

.rekenaar__som{
  margin-top:18px; padding:16px 18px; border-radius:14px;
  background:var(--vlak-2); border:1px solid var(--lijn);
}
.rekenaar__uitleg{ margin:0 0 12px; font-size:14px; color:var(--gedempt); }
.rekenaar__uitleg b{ color:var(--kop); font-variant-numeric:tabular-nums; }
.rekenaar__uit{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rekenaar__uit > span:first-child{
  font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gedempt);
}
.rekenaar__noot{ margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--gedempt); }

/* ── De vragenlijst op een breed scherm ───────────────────────────────
   Deze pagina's stonden op 520 px, en dat is de breedte van een telefoon
   op een scherm van twee meter. Een vraag met tien vakjes eronder kreeg
   daardoor tien regels van één woord. Nu loopt de kolom mee, en staan de
   vakjes vanaf een brede laptop in twee kolommen naast elkaar: dan zie
   je alle keuzes in één oogopslag in plaats van na drie keer scrollen. */
@media (min-width:700px){ main.smal.vragen{ max-width:720px; } }
@media (min-width:1100px){ main.smal.vragen{ max-width:860px; } }
@media (min-width:1500px){ main.smal.vragen{ max-width:960px; } }

@media (min-width:760px){
  .vragen .keuzes:not(.keuzes--dicht){
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  }
  /* Het eigen antwoord krijgt de volle breedte: daar hoort een vak in. */
  .vragen .keuzes .keuze--anders{ grid-column:1 / -1; }
  .vragen .keuzes--dicht{ grid-template-columns:repeat(2,minmax(0,1fr)); display:grid; }
}

/* ══════════════════════════════════════════════════════════════════════
   Een gesprek met een agent
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width:700px){ main.smal.gesprek{ max-width:760px; } }
@media (min-width:1200px){ main.smal.gesprek{ max-width:820px; } }

/* Hoeveel je nog hebt, als een balk en een zin. In beurten en niet in
   tokens: "nog twaalf beurten" begrijpt iedereen, "nog 180.000 tokens"
   niemand. */
.budget{ margin:0 0 22px; }
.budget__spoor{
  height:5px; border-radius:3px; background:var(--lijn); overflow:hidden;
}
.budget__spoor i{
  display:block; height:100%; border-radius:3px; background:var(--accent);
  transition:width .5s var(--in);
}
.budget__tekst{ margin:8px 0 0; font-size:13px; color:var(--gedempt); }
.budget__tekst b{ color:var(--kop); }

.praat{ display:grid; gap:14px; margin:0 0 22px; }

.zeg{ max-width:88%; }
.zeg__wie{
  margin:0 0 5px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gedempt);
}
.zeg__tekst{
  padding:14px 18px; border-radius:16px;
  font-size:16px; line-height:1.65;
}
.zeg__tekst p{ margin:0 0 10px; }
.zeg__tekst p:last-child{ margin:0; }

/* De agent links op een lichte kaart, jij rechts in de accentkleur. Dat
   onderscheid moet je zonder te lezen kunnen zien, anders ben je in een
   lang gesprek het spoor bijster wie wat zei. */
.zeg--agent .zeg__tekst{
  background:var(--vlak-1); border:1px solid var(--lijn);
  color:var(--tekst); border-top-left-radius:6px;
  box-shadow:var(--schaduw-1);
}
.zeg--mens{ margin-left:auto; }
.zeg--mens .zeg__wie{ text-align:right; }
.zeg--mens .zeg__tekst{
  background:var(--accent); color:var(--accent-op);
  border-top-right-radius:6px; font-weight:500;
}

.praatvak{ margin-top:4px; }
.praatvak .groeiveld{ min-height:88px; }
.praatvak .knoprij{ margin-top:12px; }
.assistent__knop{ margin-top:14px; }
.assistent__knop .knop{ width:100%; justify-content:center; }

/* ══════════════════════════════════════════════════════════════════════
   De uitslag van dag 1
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width:1200px){ main.uitslag{ max-width:1180px; } }


/* ── Het figuurtje in het gesprek ────────────────────────────────────── */

.agentkop{ display:flex; align-items:center; gap:16px; }
.agentkop__beeld{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:50%;
  background:
    radial-gradient(78% 74% at 30% 22%,
      hsl(var(--h,22) 86% 70% / var(--bubbel-op, .34)),
      hsl(var(--h,22) 62% 52% / calc(var(--bubbel-op, .34) * .42)) 56%,
      hsl(var(--h,22) 44% 44% / calc(var(--bubbel-op, .34) * .2)) 100%),
    var(--vlak-1);
  box-shadow:inset 0 1px 0 var(--bubbel-glans),
             inset 0 0 0 1px var(--bubbel-rand), var(--schaduw-1);
}
.agentkop__beeld .robot{ width:74%; height:74%; }

.zeg{ display:flex; align-items:flex-start; gap:10px; }
.zeg__in{ min-width:0; }
.zeg__beeld{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-top:20px; border-radius:50%;
  background:
    radial-gradient(78% 74% at 30% 22%,
      hsl(var(--h,22) 86% 70% / var(--bubbel-op, .34)),
      hsl(var(--h,22) 62% 52% / calc(var(--bubbel-op, .34) * .42)) 60%,
      transparent 100%),
    var(--vlak-1);
  box-shadow:inset 0 0 0 1px var(--bubbel-rand);
}
.zeg__beeld .robot{ width:76%; height:76%; }
.zeg--mens{ justify-content:flex-end; }

/* ── Aan het typen ───────────────────────────────────────────────────────
   Drie puntjes die om de beurt opkomen. Hij staat er altijd en is
   verborgen tot het script hem aanzet bij het versturen, zodat er op dat
   moment niets meer hoeft te worden opgebouwd.

   Dit is geen nagespeeld typen van een antwoord dat er al is: de pagina
   staat op dat moment echt te wachten op het model. Het verdwijnt zodra
   het antwoord er is, want dan komt de pagina opnieuw binnen. */
.zeg--wacht{ display:none; }
.zeg--wacht.aan{ display:flex; animation:onthul .3s var(--in) both; }
.tikt{ display:inline-flex; align-items:center; gap:5px; padding:3px 0; }
.tikt i{
  width:7px; height:7px; border-radius:50%; background:var(--gedempt);
  animation:tik 1.25s var(--wissel) infinite;
}
.tikt i:nth-child(2){ animation-delay:.18s; }
.tikt i:nth-child(3){ animation-delay:.36s; }
@keyframes tik{
  0%,60%,100%{ opacity:.3; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-4px); }
}
@media (prefers-reduced-motion:reduce){ .tikt i{ animation:none; opacity:.6; } }

.praatvak__hint{
  margin:8px 2px 0; font-size:12.5px; color:var(--gedempt);
}
.praatvak.bezig .groeiveld{ opacity:.6; }

/* ══════════════════════════════════════════════════════════════════════
   De achtergrond van het aanmeldscherm
   ══════════════════════════════════════════════════════════════════════

   Bolletjes die langzaam langs drijven en in en uit vervagen. De
   scherptediepte zit in drie lagen, en elke laag verandert drie dingen
   tegelijk: hoe groot, hoe scherp en hoe traag. Alleen vervagen is geen
   diepte; wat verder weg ligt is ook kleiner en beweegt langzamer.

   Alles ligt binnen .poort, en die snijdt af (overflow:hidden). Zonder
   dat zou een bolletje aan de rand de hele pagina breder maken dan het
   venster, en dan krijgt elke pagina een schuifbalk. Dat is hier eerder
   gebeurd en het kostte een halfuur zoeken.                           */

.sfeer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}

.sfeerbel{
  position:absolute; display:flex; flex-direction:column; align-items:center;
  gap:5px; width:132px; margin:-66px 0 0 -66px; padding:14px 12px;
  border-radius:20px; text-align:center;
  background:var(--belvlak); border:1px solid var(--belrand);
  box-shadow:var(--schaduw-2);
  opacity:0; will-change:transform, opacity;
  animation:zweven var(--traag,30s) ease-in-out var(--start,0s) infinite;
}
.sfeerbel b{
  font-size:12.5px; font-weight:750; line-height:1.25; color:var(--kop);
  letter-spacing:-.01em;
}
.sfeerbel em{
  font-style:normal; font-size:11px; line-height:1.3; color:var(--gedempt);
}
.sfeerbel__regel{
  font-size:12.5px; line-height:1.4; font-weight:600; color:var(--tekst);
}
.sfeerbel__beeld{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:
    radial-gradient(78% 74% at 30% 22%,
      hsl(var(--h,22) 86% 70% / var(--bubbel-op, .34)),
      hsl(var(--h,22) 62% 52% / calc(var(--bubbel-op, .34) * .42)) 60%,
      transparent 100%),
    var(--grond);
}
.sfeerbel__beeld .robot{ width:78%; height:78%; }

/* Laag 1 staat vooraan: scherp, groot, en het snelst. Laag 3 ligt het
   verst weg: klein, vaag en traag. De vertraging zit in de duur van de
   animatie, want twee bolletjes die even hard bewegen liggen even ver
   weg, hoe vaag je er ook een maakt. */
.sfeerbel--1{ transform:scale(1); }
.sfeerbel--2{ filter:blur(1.6px); }
.sfeerbel--3{ filter:blur(3.4px); }

@keyframes zweven{
  0%   { opacity:0; transform:translate3d(0,26px,0) scale(.86); }
  18%  { opacity:var(--vol,.96); }
  50%  { transform:translate3d(10px,-18px,0) scale(1); }
  78%  { opacity:var(--vol,.96); }
  100% { opacity:0; transform:translate3d(18px,-46px,0) scale(1.06); }
}
.sfeerbel--2{ --vol:.7; }
.sfeerbel--3{ --vol:.45; }

/* Op een telefoon staat de kaart vrijwel over de hele breedte, en dan
   zitten de bolletjes er alleen maar achter. Daar laten we alleen de
   verste laag staan: genoeg om te leven, niet genoeg om te storen. */
@media (max-width:719px){
  .sfeerbel--1, .sfeerbel--2{ display:none; }
  .sfeerbel--3{ filter:blur(4px); --vol:.4; }
}
@media (prefers-reduced-motion:reduce){
  .sfeerbel{ animation:none; opacity:var(--vol,.5); }
}

/* De kaart komt boven de achtergrond en krijgt dezelfde oplichtende
   bovenrand als de kaarten in het portaal, zodat de poort en het
   dashboard uit dezelfde wereld komen. */
.poort__in{ z-index:1; }
.poort__kaart{ position:relative; isolation:isolate; }
.poort__kaart::before{
  content:''; position:absolute; left:16px; right:16px; top:-1px; height:1px;
  pointer-events:none; border-radius:1px;
  background:linear-gradient(90deg, transparent, var(--kaartlicht) 22%,
             var(--kaartlicht) 78%, transparent);
}
.poort__kaart::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(80% 110% at 100% 0%, var(--kaartglans), transparent 60%);
}

/* En hetzelfde stippenraster als achter het dashboard, zodat het één
   omgeving is en niet twee. */
.poort::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle at center, var(--stip) 1.1px, transparent 1.3px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 76%);
  mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 76%);
}

/* ══════════════════════════════════════════════════════════════════════
   De uitslag van dag 1
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width:1200px){ main.uitslag{ max-width:1180px; } }


/* ── Wie je wilt zijn ───────────────────────────────────────────────────
   Vier kaarten, elk met zijn eigen pastelkleur. De kleur zit in een
   zachte overgang van boven naar beneden en in de kop; de inhoud blijft
   op wit staan, want daar moet je kunnen lezen.                      */

.wieik{ margin:0 0 clamp(28px,4vw,44px); }

.wieik__rij{
  display:grid; gap:14px; margin-top:20px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}

.ikkaart{
  padding:20px; border-radius:18px; min-width:0;
  background:
    linear-gradient(170deg, var(--tint) 0%, transparent 52%),
    var(--vlak-1);
  box-shadow:var(--schaduw-2);
  border-top:3px solid var(--tint-inkt);
}
.ikkaart--perzik  { --tint:var(--perzik);   --tint-inkt:var(--perzik-inkt); }
.ikkaart--lavendel{ --tint:var(--lavendel); --tint-inkt:var(--lavendel-inkt); }
.ikkaart--mint    { --tint:var(--mint);     --tint-inkt:var(--mint-inkt); }
.ikkaart--boter   { --tint:var(--boter);    --tint-inkt:var(--boter-inkt); }

.ikkaart__kop{
  margin:0 0 16px; font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tint-inkt);
}
.ikkaart__lijst{ margin:0; padding:0; list-style:none; display:grid; gap:13px; }
.ikkaart__lijst li{ display:flex; flex-direction:column; gap:2px; }
.ikkaart__lijst b{
  font-size:15px; font-weight:700; line-height:1.3; color:var(--kop);
  letter-spacing:-.01em;
}
.ikkaart__lijst span{ font-size:13px; line-height:1.45; color:var(--gedempt); }
.ikkaart__rest{ margin:13px 0 0; font-size:12.5px; color:var(--gedempt); }
.ikkaart__waar{
  margin:16px 0 0; padding-top:13px; border-top:1px solid var(--lijn);
  font-size:11.5px; line-height:1.45; color:var(--gedempt);
}
.ikkaart__leeg{ margin:0; font-size:14px; line-height:1.5; color:var(--gedempt); }

.blokkop{ max-width:62ch; margin:0 0 6px; }
.blokkop h2{
  margin:0; font-size:clamp(21px,2.8vw,28px); letter-spacing:-.02em; color:var(--kop);
}
.blokkop p{ margin:8px 0 0; font-size:14.5px; color:var(--gedempt); }

/* ── Waar je staat, en waar je naartoe wilt ────────────────────────────
   Deze heette eerst .kloof, en dat was al de naam van de twee vakjes met
   een pijl ertussen op het dashboard. Die regel zet zijn kinderen op één
   rij, dus stonden de kop, de getallen en de twee kolommen hier naast
   elkaar in plaats van onder elkaar. Een klassenaam die al bestaat is
   geen kleine fout: je ziet aan de code niets, en aan het scherm iets
   wat nergens is opgeschreven. */

.naarstraks{ margin:0 0 clamp(28px,4vw,44px); }

/* Geen vlak om het geheel heen: de twee kolommen zweven, met een schaduw
   eronder in plaats van een rand eromheen. */
.sprong{
  display:grid; grid-template-columns:1fr auto 1fr; gap:12px;
  align-items:center; margin:20px 0 22px; max-width:620px;
}
.sprong__kant{
  padding:18px 16px; border-radius:18px; text-align:center;
  background:var(--vlak-1); box-shadow:var(--schaduw-2);
  border-top:3px solid transparent;
}
.sprong__kant--nu{ border-top-color:var(--rood); }
.sprong__kant--straks{ border-top-color:var(--groen); }
.sprong__label{
  margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
}
.sprong__kant--nu .sprong__label{ color:var(--rood); }
.sprong__kant--straks .sprong__label{ color:var(--groen-op-waas); }
.sprong__getal{
  margin:0; font-size:clamp(32px,5vw,46px); font-weight:800; line-height:1;
  letter-spacing:-.03em; color:var(--kop); font-variant-numeric:tabular-nums;
}
.sprong__getal small{
  display:block; margin-top:7px; font-size:12px; font-weight:650;
  letter-spacing:.04em; color:var(--gedempt);
}
.sprong__pijl{
  display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--accent);
}
.sprong__pijl svg{ width:26px; height:26px; animation:pijlwijst 2.8s var(--wissel) infinite; }
@keyframes pijlwijst{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }
@media (prefers-reduced-motion:reduce){ .sprong__pijl svg{ animation:none; } }
.sprong__pijl span{ font-size:11.5px; font-weight:700; color:var(--accent-tekst);
  white-space:nowrap; }

.kanten{ display:grid; gap:14px; }
@media (min-width:860px){
  .kanten{ grid-template-columns:1fr auto 1fr; align-items:stretch; }
}
.kanten__pijl{ display:none; }
@media (min-width:860px){
  .kanten__pijl{ display:flex; align-items:center; justify-content:center;
    color:var(--gedempt); }
  .kanten__pijl svg{ width:24px; height:24px; }
}

.kant{
  padding:20px; border-radius:18px;
  background:var(--vlak-1); box-shadow:var(--schaduw-2);
  border-left:3px solid transparent;
}
.kant--nu{ border-left-color:var(--rood); }
.kant--straks{ border-left-color:var(--groen); }
.kant__kop{
  margin:0 0 15px; font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase;
}
.kant--nu .kant__kop{ color:var(--rood); }
.kant--straks .kant__kop{ color:var(--groen-op-waas); }
.kant__lijst{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.kant__lijst li{
  position:relative; padding-left:20px;
  font-size:15px; line-height:1.5; color:var(--tekst);
}
.kant__lijst li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:8px; height:8px; border-radius:50%;
}
.kant--nu .kant__lijst li::before{ background:var(--rood); opacity:.85; }
.kant--straks .kant__lijst li::before{ background:var(--groen); opacity:.85; }
.kant__leeg, .kant__rest{ margin:12px 0 0; font-size:13px; color:var(--gedempt); }

/* ── Waar de meeste winst zit ────────────────────────────────────────── */

.winst{
  position:relative; margin:0 0 clamp(26px,4vw,38px);
  padding:clamp(26px,4vw,40px) clamp(22px,4vw,44px);
  border-radius:var(--rond-l); text-align:center;
  background:
    radial-gradient(90% 120% at 50% -10%, var(--accent-waas), transparent 70%),
    var(--vlak-1);
  box-shadow:var(--schaduw-3);
  border-top:3px solid var(--accent);
}
.winst__merk{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:62px; height:62px; margin-bottom:16px; color:var(--accent);
}
.winst__merk svg{ width:26px; height:26px; }
/* Eén ring die naar buiten pulseert. Eén, niet drie: dit moet opvallen
   en niet alarmeren. */
.winst__ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent);
  animation:winstpuls 2.6s var(--wissel) infinite;
}
@keyframes winstpuls{
  0%   { transform:scale(.72); opacity:1; }
  100% { transform:scale(1.25); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .winst__ring{ animation:none; transform:scale(1); opacity:.5; }
}
.winst__label{
  margin:0 0 10px; font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-tekst);
}
.winst h2{
  margin:0 auto; max-width:24ch;
  font-size:clamp(24px,4vw,38px); line-height:1.15; letter-spacing:-.03em;
  color:var(--kop);
}
.winst__stap{
  margin:22px auto 0; max-width:46ch; padding:16px 20px;
  border-radius:14px; background:var(--grond);
  font-size:15.5px; line-height:1.55; color:var(--tekst);
}
.winst__stap span{
  display:block; margin-bottom:5px;
  font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gedempt);
}
.winst__meer{ margin:22px 0 0; }

/* De hele alinea is er nog voor wie hem wil, maar dichtgeklapt. */
.alinea{
  margin:0 0 22px; padding:16px 18px; border-radius:14px;
  background:var(--vlak-2);
}
.alinea summary{
  cursor:pointer; font-size:14px; font-weight:700; color:var(--kop);
  min-height:44px; display:flex; align-items:center;
}
.alinea .lees{ margin-top:12px; }

/* ══════════════════════════════════════════════════════════════════════
   Onderdelen die in beeld komen terwijl je scrolt
   ══════════════════════════════════════════════════════════════════════

   Om en om: het ene blok komt van links aanzetten, het volgende van
   rechts. Dat is niet alleen voor de aardigheid. Een pagina waarop alles
   tegelijk staat leest als één lap; een pagina waarop de onderdelen om
   de beurt binnenkomen leest als een verhaal met alinea's.

   De beginstand staat achter .komt, en die klasse wordt door het script
   gezet. Doet het script het niet, dan staat alles er gewoon. Een
   bezoeker hoort nooit een lege pagina te zien omdat een animatie niet
   op gang kwam.                                                        */

/* De beweging is een kleine opschaling vanaf de ene of de andere kant,
   en niet een verschuiving opzij. Dat laatste was de eerste poging, en
   dat duwde elk blok een stuk buiten het venster: een blok dat de volle
   breedte heeft en dan achtentwintig pixels naar rechts schuift, maakt
   de pagina achtentwintig pixels breder. Elke pagina kreeg daardoor een
   horizontale schuifbalk. Opschalen vanaf een hoek kan dat nooit, en het
   leest net zo goed als om en om. */
.komt [data-kom]{
  opacity:0;
  transform-origin:var(--ko, left) center;
  transform:translate3d(0, 20px, 0) scale(.975);
  transition:opacity .6s var(--in), transform .6s var(--in);
  transition-delay:var(--kv, 0ms);
}
.komt [data-kom].in{ opacity:1; transform:none; }

/* Wie al in beeld staat als de pagina opent komt alleen rustig omhoog.
   Daar iets laten groeien wat er al stond voelt als een hapering. */
.komt [data-kom][data-eerst]{ transform:translate3d(0, 12px, 0); }

@media (prefers-reduced-motion:reduce){
  .komt [data-kom]{ opacity:1; transform:none; transition:none; }
}

/* Drie openingen om een gesprek mee te beginnen. Vanuit een leeg vak
   beginnen is voor veel mensen de drempel; dit haalt die weg zonder
   iets te beloven, want het vult alleen het tekstvak vast. */
.openers{ display:grid; gap:9px; }
.opener{
  display:block; width:100%; min-height:48px; padding:13px 18px;
  border:1px solid var(--lijn); border-radius:14px; cursor:pointer;
  background:var(--grond); color:var(--tekst);
  font-family:var(--letter); font-size:15px; line-height:1.45; text-align:left;
  transition:border-color .18s var(--in), background-color .18s var(--in),
             transform .18s var(--in);
}
@media (hover:hover){
  .opener:hover{ border-color:var(--accent-rand); background:var(--accent-waas);
    transform:translateX(3px); }
}
.opener:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.opener[disabled]{ opacity:.5; cursor:not-allowed; }

/* ══════════════════════════════════════════════════════════════════════
   De dieren
   ══════════════════════════════════════════════════════════════════════

   Acht tekeningen met één bouw: een lijf, een kop, een blik en twee
   armen. Wat ze onderscheidt zit in de kop, en hun kleur zit in twee
   variabelen die per agent worden gezet: --tint voor het vlak en --inkt
   voor de lijnen en de naam. Die twee zijn op elkaar afgestemd, zodat de
   naam leesbaar blijft op zijn eigen kleur.                           */

.dier{ width:100%; height:100%; display:block; overflow:visible; }

.dier__hoofd, .dier__romp{ fill:var(--inkt); }
.dier__oor, .dier__kop-top{ fill:var(--inkt); }
.dier__vlek{ fill:var(--tint); opacity:.92; }
.dier__neus, .dier__snavel, .dier__tand, .dier__bolletje{ fill:var(--tint); }
.dier__snuit{ fill:var(--tint); }
.dier__oog{ fill:var(--tint); }
.dier__arm, .dier__hoorn, .dier__voeler, .dier__streep{
  fill:none; stroke:var(--inkt); stroke-width:2.6; stroke-linecap:round;
}
.dier__hoorn, .dier__voeler{ stroke-width:2.2; }
.dier__streep{ stroke:var(--tint); stroke-width:2.4; }
.dier__kuif{ fill:var(--inkt); }
.dier--bij .dier__romp{ fill:var(--inkt); }
.dier__krul{ fill:var(--inkt); }
.dier__mond{ fill:none; stroke:var(--tint); stroke-width:1.8; stroke-linecap:round; }

/* Een echte afbeelding in plaats van de tekening. Hij vult hetzelfde
   vakje, dus alles eromheen hoeft niet te veranderen zodra de renders
   er zijn. */
.dier--foto{ width:100%; height:100%; object-fit:contain; }

/* ── Dat ze leven ───────────────────────────────────────────────────────
   Vier bewegingen over elkaar heen. Ademen gaat altijd door. Knipperen
   en rondkijken zitten op de ogen. En één keer per veertien seconden
   gebeurt er iets extra's: een zwaai met een poot, of even omhoogkijken.

   Dat laatste is wat het verschil maakt. Alleen ademen leest als een
   plaatje met een filter erover; één keer zwaaien leest als iemand die
   je gezien heeft. Elke agent heeft zijn eigen duur, dus ze doen het
   nooit tegelijk; acht dieren die samen zwaaien is een lichtkrant.   */
.dier{ animation:adem var(--tempo,5s) var(--wissel) var(--start,0s) infinite; }
@keyframes adem{
  0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }
  28%    { transform:translate(.6px,-3.4px) rotate(.9deg) scale(1.03); }
  64%    { transform:translate(-.6px,-1.6px) rotate(-1deg) scale(1.015); }
}

.dier__oog{
  transform-box:fill-box; transform-origin:center;
  animation:knip var(--knip,6s) steps(1,end) var(--start,0s) infinite;
}
@keyframes knip{
  0%, 88%   { transform:scaleY(1); }
  89%, 90.2%{ transform:scaleY(.06); }
  91%, 92.4%{ transform:scaleY(1); }
  93%, 94.2%{ transform:scaleY(.06); }
  95%, 100% { transform:scaleY(1); }
}

.dier__blik{
  transform-box:fill-box; transform-origin:center;
  animation:rondkijken var(--blik,11s) var(--wissel) var(--start,0s) infinite;
}
@keyframes rondkijken{
  0%, 20%  { transform:translate(0,0); }
  26%, 42% { transform:translate(2.4px,-.4px); }
  48%, 58% { transform:translate(0,0); }
  64%, 78% { transform:translate(-2.4px,-.4px); }
  84%, 100%{ transform:translate(0,0); }
}

/* Even omhoogkijken: de ogen gaan omhoog en de kop kantelt mee. Kort,
   en maar één keer per ronde. */
.dier__kop{
  transform-box:fill-box; transform-origin:center bottom;
  animation:omhoog var(--gebaar,14s) var(--wissel) var(--start,0s) infinite;
}
@keyframes omhoog{
  0%, 62%  { transform:rotate(0deg) translateY(0); }
  68%, 76% { transform:rotate(-3deg) translateY(-1.5px); }
  82%, 100%{ transform:rotate(0deg) translateY(0); }
}

/* En zwaaien. De rechterpoot draait een paar keer heen en weer, en
   verder staat hij stil. */
.dier__arm--rechts{
  transform-box:fill-box; transform-origin:left center;
  animation:zwaai var(--gebaar,14s) var(--wissel) var(--start,0s) infinite;
}
@keyframes zwaai{
  0%, 20%   { transform:rotate(0deg); }
  24%       { transform:rotate(-34deg); }
  28%       { transform:rotate(-8deg); }
  32%       { transform:rotate(-34deg); }
  36%       { transform:rotate(-8deg); }
  40%, 100% { transform:rotate(0deg); }
}

@media (prefers-reduced-motion:reduce){
  .dier, .dier__oog, .dier__blik, .dier__kop, .dier__arm--rechts{ animation:none; }
}

/* ── Wie welke kleur heeft ──────────────────────────────────────────────
   De lichte tint is het vlak, de inkt zijn de lijnen en de naam. Ze
   staan hier bij elkaar zodat je in één oogopslag ziet of er twee te
   dicht bij elkaar liggen. */
.dier-poedel   { --tint:#FBE6CE; --inkt:#9A6033; }   /* Teddy: crème */
.dier-uil      { --tint:#DCE8F2; --inkt:#2A5B80; }
.dier-papegaai { --tint:#E8E0F1; --inkt:#5A4487; }
.dier-otter    { --tint:#F7D3D0; --inkt:#A24A4A; }
.dier-vos      { --tint:#FBDCC6; --inkt:#914C1F; }
.dier-hert     { --tint:#DEEADF; --inkt:#3B6E52; }
.dier-bij      { --tint:#FBE6C9; --inkt:#8A6218; }
.dier-bever    { --tint:#EEDFD2; --inkt:#7A5440; }

[data-thema="donker"] .dier-poedel   { --tint:#3A2C1E; --inkt:#EFC79B; }
[data-thema="donker"] .dier-uil      { --tint:#1F2A33; --inkt:#A3C6E0; }
[data-thema="donker"] .dier-papegaai { --tint:#2A2433; --inkt:#C4B4DE; }
[data-thema="donker"] .dier-otter    { --tint:#38241F; --inkt:#EAA9A2; }
[data-thema="donker"] .dier-vos      { --tint:#39251A; --inkt:#F0AC7C; }
[data-thema="donker"] .dier-hert     { --tint:#1E2B23; --inkt:#9FC5AC; }
[data-thema="donker"] .dier-bij      { --tint:#36291A; --inkt:#E8C58A; }
[data-thema="donker"] .dier-bever    { --tint:#322721; --inkt:#D9BBA4; }

@media (prefers-color-scheme:dark){
  :root:not([data-thema="licht"]) .dier-poedel   { --tint:#3A2C1E; --inkt:#EFC79B; }
  :root:not([data-thema="licht"]) .dier-uil      { --tint:#1F2A33; --inkt:#A3C6E0; }
  :root:not([data-thema="licht"]) .dier-papegaai { --tint:#2A2433; --inkt:#C4B4DE; }
  :root:not([data-thema="licht"]) .dier-otter    { --tint:#38241F; --inkt:#EAA9A2; }
  :root:not([data-thema="licht"]) .dier-vos      { --tint:#39251A; --inkt:#F0AC7C; }
  :root:not([data-thema="licht"]) .dier-hert     { --tint:#1E2B23; --inkt:#9FC5AC; }
  :root:not([data-thema="licht"]) .dier-bij      { --tint:#36291A; --inkt:#E8C58A; }
  :root:not([data-thema="licht"]) .dier-bever    { --tint:#322721; --inkt:#D9BBA4; }
}

/* ── Het bolletje eromheen ──────────────────────────────────────────────
   Geen kleurverloop uit een losse variabele meer: de bubbel krijgt de
   tint van het dier zelf, met een zacht licht linksboven. */
.agent__beeld, .agentkop__beeld, .zeg__beeld, .sfeerbel__beeld{
  background:
    radial-gradient(78% 74% at 30% 20%,
      color-mix(in srgb, var(--tint, #FDE8D8) 96%, white),
      var(--tint, #FDE8D8) 70%) !important;
}
.agent__beeld .dier, .agentkop__beeld .dier,
.zeg__beeld .dier, .sfeerbel__beeld .dier{ width:74%; height:74%; }

/* De naam krijgt de kleur van zijn eigen dier. Dat is wat een rij van
   acht grijze vlakken met witte tekst erin tot acht agents maakt. */
.agent__naam{ color:var(--inkt, var(--kop)); }
.assistent h3{ color:var(--inkt, var(--kop)); }
.assistent__rol{ color:var(--inkt, var(--accent-tekst)); opacity:.85; }

/* En de kaart op de agentspagina krijgt een vleugje van diezelfde tint,
   met een streep in zijn eigen kleur bovenaan. */
.assistent{
  border-top:3px solid var(--inkt, var(--accent));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tint, #fff) 55%, transparent),
      transparent 42%),
    var(--vlak-1);
}
.assistent--dicht{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tint, #fff) 28%, transparent),
      transparent 42%),
    var(--vlak-2);
}
.assistent--dicht .dier{ opacity:.6; }

/* Een afbeelding ademt mee, maar knippert niet: daar zit geen oog in dat
   wij kunnen bewegen. Dat is het eerlijke verschil tussen een tekening
   in code en een render. */
.dier--foto{ animation:adem var(--tempo,5s) var(--wissel) var(--start,0s) infinite; }