/* KidsDigitaal - werkboeken kiezen. Zelfde knoppen en kleuren als het werkblad. */
.kdk-beheer{background:#32365f;color:#fff;font-size:14px;padding:8px 14px;border-radius:10px;margin:0 0 16px;}
.kdk-beheer a{color:#fff;font-weight:700;}
.kdk{max-width:1100px;margin:0 auto 90px;color:#1e2933;font-size:16px;line-height:1.5;box-sizing:border-box;}
.kdk *{box-sizing:border-box;}
.kdk-intro{font-size:18px;color:#42525f;max-width:68ch;margin:0 0 26px;}
.kdk-stap{margin:0 0 34px;scroll-margin-top:90px;}
.kdk-kop{display:flex;align-items:center;gap:12px;font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.2;margin:0 0 14px;}
.kdk-nr{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#00a8ff;color:#fff;font-size:18px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
.kdk-zoek{width:100%;max-width:440px;height:46px;border:2px solid #d6dee6;border-radius:12px;padding:0 14px;font:inherit;margin:0 0 14px;background:#fff;}
.kdk-zoek:focus{outline:none;border-color:#00a8ff;}
.kdk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.kdk-groepen{display:flex;flex-wrap:wrap;gap:10px;}
.kdk-tegel{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;color:#1e2933;background:#fff;border:2px solid #e3e9ef;border-radius:14px;padding:12px 14px;cursor:pointer;}
.kdk-tegel:hover{border-color:#bfe0ff;background:#f7fbff;}
.kdk-tegel b{font-weight:700;font-size:16px;line-height:1.25;}
.kdk-tegel small{font-size:14px;color:#5b7084;}
.kdk-tegel.is-gekozen{border-color:#00a8ff;background:#eef8ff;}
.kdk-tegel[hidden]{display:none;}
.kdk-tegel--groep{min-width:150px;}
.kdk-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start;}
.kdk-kaart{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:2px solid #e3e9ef;border-radius:18px;padding:20px;}
.kdk-kaart.is-hoofd{border-color:#00a8ff;box-shadow:0 6px 18px rgba(0,120,200,.10);}
.kdk-kaart h3{font-size:20px;font-weight:700;line-height:1.25;margin:0;}
.kdk-kaart p{margin:0;color:#42525f;}
.kdk-label{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#007a3d;background:#e3f7ea;border-radius:999px;padding:3px 10px;}
.kdk-prijs{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;}
.kdk-prijs b{font-size:26px;font-weight:800;}
.kdk-prijs span{font-size:14px;color:#5b7084;}
.kdk-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:#fff !important;background:#00a8ff;border:0;border-radius:12px;min-height:46px;padding:8px 20px;box-shadow:0 4px 0 #0087d6;cursor:pointer;text-align:center;line-height:1.2;}
.kdk-knop:active{transform:translateY(3px);box-shadow:0 1px 0 #0087d6;}
.kdk-knop:disabled{background:#b9c6d2;box-shadow:0 4px 0 #9aa9b6;cursor:default;}
.kdk-knop.is-tweede{background:#fff;color:#0077cc !important;border:2px solid #00a8ff;box-shadow:none;}
.kdk-link{color:#0077cc;font-weight:700;text-decoration:underline;align-self:flex-start;}
.kdk-heeft{color:#007a3d !important;font-weight:700;}
.kdk-inmand{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#e3f7ea;color:#007a3d;font-weight:700;border-radius:12px;padding:11px 14px;}
.kdk-inmand a{color:#007a3d;}
.kdk-lessen{list-style:none;margin:0;padding:0;max-height:340px;overflow:auto;border:1px solid #e3e9ef;border-radius:12px;}
.kdk-lessen li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid #eef2f6;}
.kdk-lessen li:last-child{border-bottom:0;}
.kdk-lessen label{flex:1;display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0;}
.kdk-lessen input{width:20px;height:20px;flex:0 0 auto;accent-color:#00a8ff;}
.kdk-lessen em{font-style:normal;font-size:13px;color:#007a3d;white-space:nowrap;}
.kdk-voorbeeld{font-size:13px;color:#5b7084;white-space:nowrap;}
.kdk-los-totaal{font-weight:700;}
.kdk-tip{background:#fff6dc;border-radius:12px;padding:10px 12px;color:#5c4400 !important;}
.kdk-tip[hidden]{display:none;}
.kdk-online{margin:26px 0 0;}
.kdk-online h3{font-size:18px;font-weight:700;margin:0 0 10px;}
.kdk-online-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.kdk-mini{display:flex;flex-direction:column;gap:3px;background:#F1F3F7;border-radius:14px;padding:14px 16px;text-decoration:none;color:#1e2933;}
.kdk-mini:hover{background:#e8edf3;}
.kdk-mini b{font-size:16px;}
.kdk-mini span{font-size:14px;color:#5b7084;}
.kdk-mini .kdk-mini-prijs{font-weight:700;color:#1e2933;}
.kdk-klein{font-size:14px;color:#5b7084;margin:18px 0 0;max-width:75ch;}
.kdk-mandbalk{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:16px;background:#1e2933;color:#fff;border-radius:16px;padding:10px 10px 10px 18px;box-shadow:0 10px 30px rgba(20,40,70,.3);max-width:calc(100% - 24px);font-weight:700;}
.kdk-mandbalk[hidden]{display:none;}
.kdk-mandbalk .kdk-knop{min-height:40px;white-space:nowrap;}
@media (max-width:640px){
  .kdk-raster{grid-template-columns:1fr 1fr;}
  .kdk-kaarten{grid-template-columns:1fr;}
  .kdk-mandbalk{left:12px;right:12px;transform:none;justify-content:space-between;font-size:14px;}
}
@media (max-width:380px){ .kdk-raster{grid-template-columns:1fr;} }

/* =====================================================================
   De winkelpagina in de stijl van de voorpagina (12 nov 2026). Dezelfde
   kd2-onderdelen als de homepage-widget (pagina 88): kleuren, knoppen,
   golven, hero met sticker en de stappen. Alleen op deze pagina geladen.
   ===================================================================== */
.kdk-pagina{
  --kd2-groen:#00C300;--kd2-groen-rand:#009E00;--kd2-groen-zacht:#E2F9E2;
  --kd2-blauw:#0099FF;--kd2-blauw-rand:#007ACC;--kd2-blauw-zacht:#E5F4FF;
  --kd2-geel:#FFC440;--kd2-geel-rand:#E0A41E;--kd2-mint-zacht:#DDF8F3;
  --kd2-tekst:#3C3C3C;--kd2-tekst-kop:#2c3e50;--kd2-grijs:#777777;--kd2-rand:#E5E5E5;
}
/* Van de themapagina alleen de inhoud: geen eigen titel, de volle breedte, geen witrand boven. */
body:has(.kdk-pagina) .entry-header{display:none;}
body:has(.kdk-pagina) .site-main > .ct-container,
body:has(.kdk-pagina) .site-main > div[data-vertical-spacing]{padding-top:0;padding-bottom:0;}
.kdk-pagina{position:relative;width:100vw;max-width:none !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;font-family:'Baloo 2','Segoe UI',sans-serif;color:var(--kd2-tekst);background:#fff;overflow-x:hidden;line-height:1.5;}
.kdk-pagina *,.kdk-pagina *::before,.kdk-pagina *::after{box-sizing:border-box;}
.kdk-pagina .kd2-inner{max-width:1140px;margin:0 auto;padding:0 24px;}
.kdk-pagina .kd2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;letter-spacing:.8px;text-transform:uppercase;text-decoration:none;padding:14px 30px;border-radius:16px;border:none;cursor:pointer;transition:filter .15s ease,transform .08s ease,box-shadow .08s ease;}
.kdk-pagina .kd2-btn--groen,.kdk-pagina .kd2-btn--groen:hover,.kdk-pagina .kd2-btn--groen:visited{background:var(--kd2-groen);color:#fff;box-shadow:0 4px 0 var(--kd2-groen-rand);}
.kdk-pagina .kd2-btn--blauw,.kdk-pagina .kd2-btn--blauw:hover,.kdk-pagina .kd2-btn--blauw:visited{background:var(--kd2-blauw);color:#fff;box-shadow:0 4px 0 var(--kd2-blauw-rand);}
.kdk-pagina .kd2-btn--wit,.kdk-pagina .kd2-btn--wit:hover,.kdk-pagina .kd2-btn--wit:visited{background:#fff;color:var(--kd2-blauw);border:2px solid var(--kd2-rand);box-shadow:0 4px 0 var(--kd2-rand);}
.kdk-pagina .kd2-btn:hover{filter:brightness(1.05);text-decoration:none;}
.kdk-pagina .kd2-btn:active{transform:translateY(4px);box-shadow:0 0 0 transparent;}
.kdk-pagina .kd2-btn:focus-visible{outline:3px solid var(--kd2-blauw);outline-offset:3px;}
.kdk-pagina .kd2-golf{display:block;width:100%;height:56px;margin:-1px 0;position:relative;}
@media (max-width:768px){.kdk-pagina .kd2-golf{height:32px;}}

/* Kop */
.kdk-pagina .kd2-hero{padding:56px 0 40px;position:relative;overflow:hidden;}
.kdk-pagina .kd2-hero__inner{display:flex;align-items:center;gap:48px;max-width:1140px;margin:0 auto;padding:0 24px;}
.kdk-pagina .kd2-hero__tekst{flex:1;}
.kdk-pagina .kd2-sticker{display:inline-flex;align-items:center;gap:8px;background:var(--kd2-geel);color:#6B4A00;font-weight:800;font-size:16px;padding:7px 20px;border-radius:14px;transform:rotate(-2deg);box-shadow:0 3px 0 var(--kd2-geel-rand);margin-bottom:18px;}
.kdk-pagina .kd2-sticker svg{width:17px;height:17px;flex:0 0 auto;}
.kdk-pagina .kd2-hero__tekst h1{font-family:'Baloo 2',sans-serif;font-size:clamp(34px,4.4vw,54px);font-weight:800;line-height:1.1;color:var(--kd2-tekst-kop);margin:0 0 16px;}
.kdk-pagina .kd2-accent-groen{color:var(--kd2-groen);}
.kdk-pagina .kd2-accent-blauw{color:var(--kd2-blauw);}
.kdk-pagina .kd2-hero__tekst p{font-size:18px;margin:0 0 26px;max-width:560px;}
.kdk-pagina .kd2-hero__knoppen{display:flex;flex-wrap:wrap;gap:14px;}
.kdk-hero__beeld{flex:0 0 42%;display:flex;justify-content:center;}
.kdk-hero__beeld img{width:100%;max-width:480px;height:auto;}
@media (max-width:900px){
  .kdk-pagina .kd2-hero{padding:32px 0 28px;}
  .kdk-pagina .kd2-hero__inner{flex-direction:column-reverse;gap:22px;text-align:left;}
  .kdk-hero__beeld img{max-width:340px;}
}

/* Zo werkt het, op de groene band */
.kdk-stappen{background:var(--kd2-groen);padding:36px 0 56px;text-align:center;}
.kdk-stappen h2{font-size:clamp(28px,4vw,40px);font-weight:800;color:#fff;margin:0 0 8px;}
.kdk-stappen .kd2-stappen__sub{font-size:18px;color:#fff;opacity:.95;margin:0 0 36px;}
.kdk-stappen .kd2-stappen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.kdk-stappen .kd2-stap{background:#fff;border-radius:24px;padding:32px 26px 28px;box-shadow:0 6px 0 rgba(0,0,0,.15);}
.kdk-stappen .kd2-stap__nummer{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;margin:0 auto 14px;}
.kdk-stappen .kd2-stap__nummer--groen{background:var(--kd2-groen);box-shadow:0 4px 0 var(--kd2-groen-rand);}
.kdk-stappen .kd2-stap__nummer--blauw{background:var(--kd2-blauw);box-shadow:0 4px 0 var(--kd2-blauw-rand);}
.kdk-stappen .kd2-stap__nummer--geel{background:var(--kd2-geel);box-shadow:0 4px 0 var(--kd2-geel-rand);}
.kdk-stappen .kd2-stap h3{font-size:21px;font-weight:800;color:var(--kd2-tekst-kop);margin:0 0 8px;}
.kdk-stappen .kd2-stap p{font-size:16px;color:var(--kd2-grijs);margin:0;}
@media (max-width:820px){.kdk-stappen .kd2-stappen__grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}}

/* De keuze */
.kdk-kies{padding:40px 0 30px;scroll-margin-top:80px;}
.kdk-kies > .kd2-inner > h2{text-align:center;font-size:clamp(28px,4vw,40px);font-weight:800;color:var(--kd2-tekst-kop);margin:0 0 18px;}
.kdk-kies .kdk{margin-bottom:40px;}
.kdk-kies .kdk > h3{font-size:22px;font-weight:800;color:var(--kd2-tekst-kop);}
.kdk-kies .kdk > p.kdk-intro{margin-left:auto;margin-right:auto;text-align:center;}

/* Super en het pakket, zoals op de voorpagina */
.kdk-meer{background:var(--kd2-mint-zacht);padding:40px 0 72px;text-align:center;}
.kdk-meer h2{font-size:clamp(28px,4vw,40px);font-weight:800;color:var(--kd2-tekst-kop);margin:0 0 12px;}
.kdk-meer__sub{font-size:18px;color:var(--kd2-grijs);max-width:640px;margin:0 auto 34px;line-height:1.6;}
.kdk-meer__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto;}
.kdk-plan{background:#fff;border:2px solid var(--kd2-rand);border-radius:24px;padding:30px 26px 28px;display:flex;flex-direction:column;align-items:center;}
.kdk-plan--super{border-color:var(--kd2-groen);box-shadow:0 4px 0 var(--kd2-groen-rand);}
.kdk-plan h3{font-size:20px;font-weight:800;color:var(--kd2-tekst-kop);margin:0 0 8px;}
.kdk-plan p{font-size:15.5px;color:var(--kd2-grijs);margin:0 0 20px;line-height:1.55;max-width:420px;}
.kdk-plan p strong{color:var(--kd2-tekst-kop);}
.kdk-plan .kd2-btn{margin-top:auto;}
@media (max-width:700px){.kdk-meer__grid{grid-template-columns:1fr;}}

/* Zodra de keuze een eigen aanbod toont (het pakket van dit onderwerp en Super),
   valt het algemene blok onderaan weg, met de golf ervoor. */
.kdk-pagina:has(.kdk-online) .kdk-kies + .kd2-golf,
.kdk-pagina:has(.kdk-online) .kdk-meer{display:none;}

/* =====================================================================
   De keuze als stappen, in de stijl van de keuzehulp bij de lessen
   (leer-engine/kd-keuzehulp.css): voortgangsbalk, de robot met de vraag,
   kale keuzekaarten, groepstegels, zoekveld met onderstreping, Terug.
   ===================================================================== */
.kdk-wiz{max-width:860px;}
.kdk-wiz-kop{margin:0 0 18px;}
.kdk-stand{display:flex;align-items:center;gap:14px;margin:0 0 18px;}
.kdk-stand-tekst{flex:none;font-size:14px;font-weight:700;color:#5b7084;}
.kdk-buis{flex:1;min-width:0;height:16px;background:#F0F7FF;border:1px solid #b3d9f2;border-radius:9999px;overflow:hidden;}
.kdk-buis i{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,#4BADFF,#00D68F);transition:width .6s cubic-bezier(.16,1,.3,1);}
.kdk-praat{display:flex;align-items:center;gap:6px;}
.kdk-pop{width:104px;flex:none;}
.kdk-pop img{width:100%;display:block;}
.kdk-bubbel{position:relative;background:#fff;border:2px solid #E6E8EC;border-radius:18px;padding:15px 20px;box-shadow:0 4px 14px rgba(0,0,0,.06);margin-left:12px;}
.kdk-bubbel p{margin:0;font-size:1.25rem;font-weight:600;line-height:1.3;color:#1A1D29;}
.kdk-bubbel::before,.kdk-bubbel::after{content:"";position:absolute;top:50%;right:100%;width:0;height:0;border-style:solid;}
.kdk-bubbel::before{margin-top:-11px;border-width:11px 13px 11px 0;border-color:transparent #E6E8EC transparent transparent;}
.kdk-bubbel::after{margin-top:-8px;border-width:8px 10px 8px 0;border-color:transparent #fff transparent transparent;}
.kdk-gekozen{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;}
.kdk-chip{font:inherit;font-size:.9rem;font-weight:600;color:#2E8FD9;background:#E3F3FF;border:2px solid #bfe2ff;border-radius:9999px;padding:5px 14px;cursor:pointer;}
.kdk-chip:hover{border-color:#4BADFF;}
.kdk-chip::after{content:"\2715";margin-left:8px;font-size:.75rem;}

/* Stap 1: zoeken en de onderwerpen */
.kdk-wiz input.kdk-zoek{display:block;width:100%;max-width:none;box-sizing:border-box;font:inherit;font-size:1rem;font-weight:600;color:#1A1D29;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1AC' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 2px 45% / 18px 18px;
  border:0;border-bottom:2px solid #E6E8EC;border-radius:0;padding:10px 4px 12px 30px;margin:0 0 18px;box-shadow:none;-webkit-appearance:none;appearance:none;}
.kdk-wiz input.kdk-zoek::placeholder{color:#9AA1AC;font-weight:600;}
.kdk-wiz input.kdk-zoek:focus{outline:none;border-bottom-color:#4BADFF;}
.kdk-wiz .kdk-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.kdk-wiz .kdk-tegel{display:grid;align-content:start;gap:2px;font:inherit;text-align:left;background:#fff;border:2px solid #D9DCE1;border-radius:14px;padding:13px 16px;cursor:pointer;box-shadow:none;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.kdk-wiz .kdk-tegel b{font-size:1rem;font-weight:700;line-height:1.25;color:#1A1D29;}
.kdk-wiz .kdk-tegel small{font-size:.8rem;font-weight:500;color:#8A919C;}
.kdk-wiz .kdk-tegel:hover{border-color:#4BADFF;transform:translateY(-3px);box-shadow:0 10px 28px -12px rgba(75,173,255,.5);}
.kdk-wiz .kdk-tegel.is-gekozen{border-color:#4BADFF;background:#E3F3FF;}
.kdk-wiz .kdk-tegel.is-gekozen b,.kdk-wiz .kdk-tegel.is-gekozen small{color:#2E8FD9;}
.kdk-wiz .kdk-tegel:focus-visible{outline:3px solid #4BADFF;outline-offset:3px;}
.kdk-niets{text-align:center;color:#6B7280;font-weight:600;margin:18px 0 0;}
.kdk-niets[hidden],.kdk-wiz .kdk-tegel[hidden]{display:none;}

/* Stap 2: de groepen als grote tegels */
.kdk-wiz .kdk-groepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.kdk-wiz .kdk-tegel--groep{justify-items:center;text-align:center;border-width:3px;border-color:#C9CCD2;border-radius:16px;padding:22px 10px 17px;}
.kdk-wiz .kdk-tegel--groep b{font-size:1.5rem;}
.kdk-wiz .kdk-tegel--groep small{font-size:.9rem;font-weight:600;color:#6B7280;}

/* Onderaan: Terug */
.kdk-wiz-onder{display:flex;justify-content:center;margin:26px 0 0;}
.kdk-wiz-onder[hidden]{display:none;}
.kdk-terug{font:inherit;font-size:1.05rem;font-weight:600;color:#1A1D29;background:#fff;border:3px solid #C9CCD2;border-radius:15px;padding:12px 34px;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;}
.kdk-terug:hover{border-color:#4BADFF;background:#E3F3FF;color:#2E8FD9;}
.kdk-terug:focus-visible{outline:3px solid #4BADFF;outline-offset:3px;}

@media (max-width:700px){
  .kdk-wiz .kdk-raster{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kdk-pop{width:80px;}
  .kdk-bubbel p{font-size:1.05rem;}
  .kdk-wiz .kdk-groepen{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .kdk-terug{width:100%;}
}
@media (prefers-reduced-motion:reduce){.kdk-wiz .kdk-tegel:hover{transform:none;}}

/* =====================================================================
   12 nov 2026, ronde 2 (Robert): de keuzehulp opent schermvullend, net als
   die bij de lessen (leer-engine/kd-keuzehulp.css). Op de pagina eerst
   verkopen, uitleg later, online eerst oefenen, voettekst van de voorpagina.
   ===================================================================== */

/* Het themavoetje weg: de pagina heeft de voettekst van de voorpagina. */
body:has(.kdk-pagina) #footer,
body:has(.kdk-pagina) footer.ct-footer{display:none !important;}

/* Kaarten in de witte secties (Zo werkt het) */
.kdk-hoe{background:#fff;padding:20px 0 56px;text-align:center;}
.kdk-hoe h2,.kdk-meer h2,.kdk-cta h2{font-size:clamp(28px,4vw,40px);font-weight:800;color:var(--kd2-tekst-kop);margin:0 0 8px;}
.kdk-hoe .kd2-stappen__sub{font-size:18px;color:var(--kd2-grijs);margin:0 0 36px;}
.kdk-hoe .kd2-stappen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.kdk-hoe .kd2-stap{background:#fff;border:2px solid var(--kd2-rand);border-radius:24px;padding:32px 26px 28px;}
.kdk-hoe .kd2-stap__nummer{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;margin:0 auto 14px;}
.kdk-hoe .kd2-stap__nummer--groen{background:var(--kd2-groen);box-shadow:0 4px 0 var(--kd2-groen-rand);}
.kdk-hoe .kd2-stap__nummer--blauw{background:var(--kd2-blauw);box-shadow:0 4px 0 var(--kd2-blauw-rand);}
.kdk-hoe .kd2-stap__nummer--geel{background:var(--kd2-geel);box-shadow:0 4px 0 var(--kd2-geel-rand);}
.kdk-hoe .kd2-stap h3{font-size:21px;font-weight:800;color:var(--kd2-tekst-kop);margin:0 0 8px;}
.kdk-hoe .kd2-stap p{font-size:16px;color:var(--kd2-grijs);margin:0;}
@media (max-width:820px){.kdk-hoe .kd2-stappen__grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}}

/* De startkaart op de pagina */
.kdk-kies{padding:44px 0 40px;}
.kdk.kdk-start{max-width:760px;margin:0 auto;}
.kdk-startkaart{display:flex;align-items:center;gap:22px;background:var(--kd2-blauw-zacht,#E5F4FF);border:2px solid #bfe2ff;border-radius:24px;padding:26px 30px;}
.kdk-startpop{width:120px;height:auto;flex:none;}
.kdk-starttekst{flex:1;}
.kdk-starttekst p{margin:0 0 6px;font-size:17px;color:#42525f;}
.kdk-starttekst p.kdk-startvraag{font-size:24px;font-weight:800;color:var(--kd2-tekst-kop);}
.kdk-knop.kdk-knop--groot{margin-top:12px;font-size:17px;min-height:54px;padding:12px 30px;border-radius:16px;background:var(--kd2-groen,#00C300);box-shadow:0 4px 0 var(--kd2-groen-rand,#009E00);}
@media (max-width:600px){.kdk-startkaart{flex-direction:column;text-align:center;padding:22px 18px;}.kdk-startpop{width:96px;}.kdk-knop.kdk-knop--groot{width:100%;}}

/* Online oefenen op de pagina: onderwerpkaarten zoals op de voorpagina */
.kdk-meer{background:var(--kd2-mint-zacht);padding:40px 0 64px;text-align:center;}
.kdk-meer__sub{font-size:18px;color:var(--kd2-grijs);max-width:640px;margin:0 auto 30px;line-height:1.6;}
.kdk-oefen-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 30px;}
.kdk-oefen-kaart{display:block;background:#fff;border:2px solid var(--kd2-rand);border-radius:24px;padding:22px 18px;text-decoration:none;transition:transform .25s ease,border-color .25s ease;}
.kdk-oefen-kaart:hover{transform:translateY(-6px);border-color:var(--kd2-groen);}
.kdk-oefen-kaart strong{display:block;font-size:19px;font-weight:800;color:var(--kd2-tekst-kop);margin:0 0 4px;}
.kdk-oefen-kaart span{display:block;font-size:15px;color:var(--kd2-grijs);font-weight:500;}
@media (max-width:820px){.kdk-oefen-raster{grid-template-columns:1fr 1fr;gap:14px;}}

/* Afsluiter en voettekst, zoals op de voorpagina */
.kdk-cta{background:var(--kd2-groen);padding:30px 0 64px;text-align:center;color:#fff;}
.kdk-cta img{max-width:220px;width:55%;height:auto;margin:0 auto 8px;display:block;}
.kdk-cta h2{color:#fff;}
.kdk-cta p{font-size:19px;margin:0 0 26px;opacity:.95;}
.kdk-pagina .kd2-btn--wit-op-groen,.kdk-pagina .kd2-btn--wit-op-groen:hover,.kdk-pagina .kd2-btn--wit-op-groen:visited{background:#fff;color:var(--kd2-groen);box-shadow:0 4px 0 rgba(0,0,0,.18);}
.kdk-footer{background:#FFF3D6;color:#7E5C0C;padding:40px 0 28px;text-align:left;}
.kdk-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:36px;max-width:1140px;margin:0 auto;padding:0 24px;}
.kdk-footer__merk img{height:52px;width:auto;margin-bottom:12px;}
.kdk-footer__merk p{color:#9A7B2D;font-size:15.5px;line-height:1.6;margin:0;max-width:280px;}
.kdk-footer h4{color:#6B4A00;font-size:17px;font-weight:800;margin:0 0 14px;}
.kdk-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.kdk-footer ul a,.kdk-footer ul a:visited{color:#7E5C0C;text-decoration:none;font-weight:600;font-size:15.5px;}
.kdk-footer ul a:hover{color:#4F3A00;text-decoration:underline;text-underline-offset:3px;}
.kdk-footer__onder{max-width:1140px;margin:32px auto 0;padding:18px 24px 0;border-top:1px solid rgba(107,74,0,.15);text-align:center;color:#9A7B2D;font-size:14px;}
@media (max-width:900px){.kdk-footer__grid{grid-template-columns:1fr 1fr;gap:28px;}}
@media (max-width:560px){.kdk-footer__grid{grid-template-columns:1fr;}}

/* ---------- De keuzehulp zelf, schermvullend ---------- */
html.kdk-laag-open,html.kdk-laag-open body{overflow:hidden;}
.kdk-laag{position:fixed;inset:0;z-index:100000;background:#F7F9FB;display:flex;flex-direction:column;font-family:'Baloo 2','Segoe UI',sans-serif;color:#1A1D29;}
.kdk-laag[hidden]{display:none;}
.kdk-laag *,.kdk-laag *::before,.kdk-laag *::after{box-sizing:border-box;}
.kdk-laag-top{flex:none;display:flex;align-items:center;gap:14px;max-width:860px;width:100%;margin:0 auto;padding:18px 20px 8px;}
.kdk-laag .kdk-stand{flex:1;display:flex;align-items:center;gap:14px;margin:0;}
.kdk-laag .kdk-stand-tekst{flex:none;font-size:14px;font-weight:700;color:#5b7084;}
.kdk-laag .kdk-buis{flex:1;min-width:0;height:16px;background:#fff;border:1px solid #b3d9f2;border-radius:9999px;overflow:hidden;}
.kdk-laag .kdk-buis i{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,#4BADFF,#00D68F);transition:width .6s cubic-bezier(.16,1,.3,1);}
.kdk-sluit{flex:none;width:40px;height:40px;border-radius:12px;border:2px solid #E6E8EC;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.kdk-sluit svg{width:16px;height:16px;stroke:#6B7280;stroke-width:2.5;fill:none;stroke-linecap:round;}
.kdk-sluit:hover{border-color:#4BADFF;background:#E3F3FF;}
.kdk-laag-midden{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.kdk-laag-binnen{max-width:860px;margin:0 auto;padding:10px 20px 30px;}
.kdk-laag-onder{flex:none;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px 20px 16px;border-top:1px solid #E6E8EC;background:#fff;}
.kdk-laag .kdk-mandbalk{position:static;transform:none;box-shadow:none;}
.kdk-laag .kdk-mandbalk[hidden]{display:none;}

.kdk-laag .kdk-praat{display:flex;align-items:center;gap:6px;margin:6px 0 16px;}
.kdk-laag .kdk-pop{width:110px;flex:none;}
.kdk-laag .kdk-pop img{width:100%;display:block;}
.kdk-laag .kdk-bubbel{position:relative;background:#fff;border:2px solid #E6E8EC;border-radius:18px;padding:15px 20px;box-shadow:0 4px 14px rgba(0,0,0,.06);margin-left:12px;}
.kdk-laag .kdk-bubbel p{margin:0;font-size:1.3rem;font-weight:600;line-height:1.3;}
.kdk-laag .kdk-bubbel::before,.kdk-laag .kdk-bubbel::after{content:"";position:absolute;top:50%;right:100%;width:0;height:0;border-style:solid;}
.kdk-laag .kdk-bubbel::before{margin-top:-11px;border-width:11px 13px 11px 0;border-color:transparent #E6E8EC transparent transparent;}
.kdk-laag .kdk-bubbel::after{margin-top:-8px;border-width:8px 10px 8px 0;border-color:transparent #fff transparent transparent;}
.kdk-laag .kdk-gekozen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.kdk-laag .kdk-chip{font:inherit;font-size:.9rem;font-weight:600;color:#2E8FD9;background:#E3F3FF;border:2px solid #bfe2ff;border-radius:9999px;padding:5px 14px;cursor:pointer;}
.kdk-laag .kdk-chip::after{content:"\270E";margin-left:8px;font-size:.8rem;}
.kdk-laag .kdk-chip:hover{border-color:#4BADFF;}

/* Zoeken */
.kdk-laag input.kdk-zoek{display:block;width:100%;font:inherit;font-size:1.05rem;font-weight:600;color:#1A1D29;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1AC' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 14px 50% / 18px 18px;
  border:2px solid #E6E8EC;border-radius:14px;padding:13px 14px 13px 42px;margin:0 0 16px;box-shadow:none;-webkit-appearance:none;appearance:none;}
.kdk-laag input.kdk-zoek::placeholder{color:#9AA1AC;}
.kdk-laag input.kdk-zoek:focus{outline:none;border-color:#4BADFF;}

/* Keuzekaarten, zoals .kdkh-keuze */
.kdk-laag .kdk-keuzes{display:grid;gap:12px;}
.kdk-laag .kdk-keuzes--kaal{grid-template-columns:repeat(3,minmax(0,1fr));}
.kdk-laag .kdk-keuzes--twee{grid-template-columns:1fr 1fr;gap:16px;}
.kdk-laag .kdk-keuze{display:grid;align-content:start;gap:3px;font:inherit;text-align:left;color:#1A1D29;background:#fff;border:3px solid #C9CCD2;border-radius:16px;padding:15px 18px;cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.kdk-laag .kdk-keuze[hidden]{display:none;}
.kdk-laag .kdk-keuze--kaal{border-width:2px;border-color:#D9DCE1;border-radius:14px;padding:13px 16px;}
.kdk-laag .kdk-keuze b{font-size:1.05rem;font-weight:700;line-height:1.25;}
.kdk-laag .kdk-keuze small{font-size:.82rem;font-weight:500;color:#8A919C;}
.kdk-laag .kdk-keuze--groot{padding:22px 22px;gap:6px;}
.kdk-laag .kdk-keuze--groot b{font-size:1.3rem;}
.kdk-laag .kdk-keuze--groot span{font-size:1rem;color:#5b6b7a;line-height:1.45;}
.kdk-laag .kdk-keuze:hover{border-color:#4BADFF;transform:translateY(-3px);box-shadow:0 10px 28px -12px rgba(75,173,255,.5);}
.kdk-laag .kdk-keuze.aan{border-color:#4BADFF;background:#E3F3FF;}
.kdk-laag .kdk-keuze.aan b,.kdk-laag .kdk-keuze.aan small{color:#2E8FD9;}
.kdk-laag .kdk-niets{text-align:center;color:#6B7280;font-weight:600;margin:18px 0 0;}
.kdk-laag .kdk-niets[hidden]{display:none;}

/* Groepstegels, zoals .kdkh-niveau */
.kdk-laag .kdk-niveaus{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;}
.kdk-laag .kdk-niveau{font:inherit;display:grid;gap:2px;justify-items:center;text-align:center;color:#6B7280;background:#fff;border:3px solid #C9CCD2;border-radius:16px;padding:18px 8px 15px;cursor:pointer;transition:border-color .2s ease,transform .2s ease;}
.kdk-laag .kdk-niveau span{font-size:.9rem;font-weight:600;}
.kdk-laag .kdk-niveau b{font-size:2rem;font-weight:700;color:#1A1D29;line-height:1.05;}
.kdk-laag .kdk-niveau b.kdk-niveau-naam{font-size:1.25rem;}
.kdk-laag .kdk-niveau small{font-size:.85rem;font-weight:600;}
.kdk-laag .kdk-niveau:hover{border-color:#4BADFF;transform:translateY(-3px);}
.kdk-laag .kdk-niveau.aan{border-color:#4BADFF;background:#E3F3FF;}
.kdk-laag .kdk-niveau.aan b{color:#2E8FD9;}
.kdk-laag .kdk-niveau--alle{border-style:dashed;border-color:#00C300;background:#F2FDF2;}
.kdk-laag .kdk-niveau--alle b{color:#009E00;}

/* Het antwoord: een product */
.kdk-laag .kdk-product{display:block;max-width:560px;margin:0 auto;background:#fff;border:3px solid #4BADFF;border-radius:22px;padding:24px;box-shadow:0 14px 36px -18px rgba(75,173,255,.6);}
.kdk-laag .kdk-product-beeld img{width:100%;height:auto;display:block;}
.kdk-laag .kdk-product h3{margin:0 0 10px;font-size:1.45rem;font-weight:800;line-height:1.2;color:#1A1D29;}
.kdk-laag .kdk-punten{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px;}
.kdk-laag .kdk-punten li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;color:#42525f;}
.kdk-laag .kdk-punten li::before{content:"\2713";flex:none;width:22px;height:22px;border-radius:50%;background:#00C300;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.kdk-laag .kdk-prijs{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 14px;}
.kdk-laag .kdk-prijs b{font-size:2rem;font-weight:800;color:#1A1D29;}
.kdk-laag .kdk-prijs span{font-size:.95rem;color:#5b6b7a;}
.kdk-laag .kdk-product .kdk-knop{width:100%;min-height:52px;font-size:16px;border-radius:14px;}
.kdk-laag .kdk-product .kdk-link{display:inline-block;margin-top:12px;}
.kdk-laag .kdk-inmand,.kdk-laag .kdk-heeft{font-weight:700;color:#007a3d;margin:0 0 10px;}
.kdk-laag .kdk-verder{display:flex;justify-content:center;margin:16px 0 0;}
.kdk-laag .kdk-knop--wit{background:#fff;color:#0077cc !important;border:2px solid #C9CCD2;box-shadow:0 4px 0 #E5E5E5;}
.kdk-laag .kdk-knop--groen{background:#00C300;box-shadow:0 4px 0 #009E00;}

/* Losse werkbladen, achter een link */
.kdk-laag .kdk-los{margin:20px 0 0;text-align:center;}
.kdk-laag .kdk-los-open{font:inherit;font-size:1rem;font-weight:600;color:#2E8FD9;background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px;}
.kdk-laag .kdk-los .kdk-lessen{text-align:left;margin:12px 0 10px;background:#fff;max-height:none;}
.kdk-laag .kdk-los-totaal{font-weight:700;margin:6px 0;}
.kdk-laag .kdk-los .kdk-knop{width:100%;max-width:420px;}
/* Witte vinkjes in een blauw vakje */
.kdk-laag input.kdk-vink{-webkit-appearance:none;appearance:none;width:22px;height:22px;flex:none;margin:0;border:2px solid #C9CCD2;border-radius:6px;background:#fff;cursor:pointer;display:inline-grid;place-content:center;transition:background .15s ease,border-color .15s ease;}
.kdk-laag input.kdk-vink:checked{background:#0099FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 16px 16px;border-color:#0099FF;}
.kdk-laag input.kdk-vink:disabled{background:#F1F3F5;border-color:#E1E4E8;cursor:default;}
.kdk-laag input.kdk-vink:focus-visible{outline:3px solid #4BADFF;outline-offset:2px;}

/* Online: eerst oefenen, dan pas het pakket en Super */
.kdk-laag .kdk-oefen{background:#fff;border:3px solid #00C300;border-radius:22px;padding:24px;text-align:center;box-shadow:0 14px 36px -18px rgba(0,195,0,.5);}
.kdk-laag .kdk-oefen h3{margin:0 0 8px;font-size:1.45rem;font-weight:800;}
.kdk-laag .kdk-oefen p{margin:0 0 18px;color:#42525f;font-size:1rem;}
.kdk-laag .kdk-oefen .kdk-knop{min-width:260px;min-height:52px;font-size:16px;}
.kdk-laag .kdk-tussenkop{margin:26px 0 12px;font-weight:800;font-size:1.05rem;color:#42525f;text-align:center;}
.kdk-laag .kdk-plan{display:grid;gap:4px;align-content:start;text-decoration:none;color:#1A1D29;background:#fff;border:2px solid #D9DCE1;border-radius:16px;padding:16px 18px;transition:border-color .2s ease;}
.kdk-laag .kdk-plan:hover{border-color:#4BADFF;}
.kdk-laag .kdk-plan-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5b7084;}
.kdk-laag .kdk-plan b{font-size:1.1rem;}
.kdk-laag .kdk-plan-prijs{font-weight:700;}
.kdk-laag .kdk-plan-sub{font-size:.92rem;color:#5b6b7a;}

.kdk-laag .kdk-terug{font:inherit;font-size:1.05rem;font-weight:600;color:#1A1D29;background:#fff;border:3px solid #C9CCD2;border-radius:15px;padding:11px 34px;cursor:pointer;}
.kdk-laag .kdk-terug:hover{border-color:#4BADFF;background:#E3F3FF;color:#2E8FD9;}

@media (max-width:700px){
  .kdk-laag-top{padding:12px 14px 6px;}
  .kdk-laag-binnen{padding:6px 14px 24px;}
  .kdk-laag .kdk-pop{width:78px;}
  .kdk-laag .kdk-bubbel p{font-size:1.05rem;}
  .kdk-laag .kdk-keuzes--kaal{grid-template-columns:1fr 1fr;gap:10px;}
  .kdk-laag .kdk-keuzes--twee{grid-template-columns:1fr;}
  .kdk-laag .kdk-niveaus{grid-template-columns:1fr 1fr;gap:10px;}
  .kdk-laag .kdk-product{grid-template-columns:1fr;gap:14px;padding:18px;}
  .kdk-laag .kdk-product-beeld{max-width:220px;margin:0 auto;}
  .kdk-laag .kdk-terug{flex:1;}
}
@media (prefers-reduced-motion:reduce){.kdk-laag .kdk-keuze:hover,.kdk-laag .kdk-niveau:hover{transform:none;}}

/* Aantallen in de kop */
.kdk-aantallen{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px;padding:0;}
.kdk-aantallen li{display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:2px solid var(--kd2-rand);border-radius:16px;padding:10px 18px 8px;min-width:120px;}
.kdk-aantallen li:nth-child(1){border-color:var(--kd2-groen);background:var(--kd2-groen-zacht);}
.kdk-aantallen li:nth-child(2){border-color:var(--kd2-blauw);background:var(--kd2-blauw-zacht);}
.kdk-aantallen li:nth-child(3){border-color:var(--kd2-geel);background:#FFF3D6;}
.kdk-aantallen b{font-size:28px;font-weight:800;line-height:1.1;color:var(--kd2-tekst-kop);}
.kdk-aantallen span{font-size:15px;font-weight:600;color:var(--kd2-grijs);}
@media (max-width:520px){.kdk-aantallen{gap:8px;}.kdk-aantallen li{min-width:0;flex:1;padding:8px 10px;}.kdk-aantallen b{font-size:22px;}.kdk-aantallen span{font-size:13px;}}

/* Steekproef op 360 breed (12 nov): kaarten liepen rechts van het scherm af,
   het mandje in de keuzehulp nam te veel ruimte. */
.kdk-oefen-raster{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:820px){.kdk-oefen-raster{grid-template-columns:repeat(2,minmax(0,1fr));}}
.kdk-oefen-kaart strong{overflow-wrap:anywhere;}
@media (max-width:420px){.kdk-oefen-kaart{padding:16px 10px;border-radius:18px;}.kdk-oefen-kaart strong{font-size:16px;}}
@media (max-width:700px){
  .kdk-laag .kdk-keuzes--kaal{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kdk-laag .kdk-niveaus{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kdk-laag .kdk-keuze b,.kdk-laag .kdk-niveau b{overflow-wrap:anywhere;}
  .kdk-laag-onder{flex-wrap:nowrap;gap:10px;padding:10px 12px 12px;}
  .kdk-laag .kdk-terug{flex:0 0 auto;width:auto;padding:10px 18px;font-size:1rem;}
  .kdk-laag-onder:has(.kdk-mandbalk[hidden]) .kdk-terug{width:100%;}
  .kdk-laag .kdk-mandbalk{flex:1;min-width:0;gap:8px;padding:6px 6px 6px 12px;border-radius:14px;font-size:13px;line-height:1.25;}
  .kdk-laag .kdk-mandbalk .kdk-knop{min-height:38px;padding:6px 12px;font-size:12px;}
  .kdk-laag-onder:has(.kdk-mandbalk[hidden]) .kdk-terug{flex:1;}
}

/* Gelijk aan de keuzehulp bij de lessen (leer-engine/kd-keuzehulp.css): witte
   achtergrond, kop en midden 1000 breed met de inhoud op 800, ronde sluitknop,
   onderrand 2px, robot 132 breed. Geen gloed om de kaarten (Robert, 12 nov). */
.kdk-laag{background:#fff;}
.kdk-laag-top{max-width:1000px;padding:18px 24px 0;gap:18px;}
.kdk-laag .kdk-buis{height:18px;background:rgba(255,255,255,.5);}
.kdk-sluit{width:34px;height:34px;border-radius:9999px;border:2px solid #C9CCD2;}
.kdk-laag-binnen{max-width:800px;padding:40px 0 30px;}
.kdk-laag-midden{padding:0 24px;}
.kdk-laag-onder{border-top:2px solid #eceef1;padding:18px 24px 24px;background:#fff;}
.kdk-laag .kdk-pop{width:132px;}
.kdk-laag .kdk-bubbel p{font-size:1.25rem;}
.kdk-laag .kdk-keuze{font-size:1.1rem;}
.kdk-laag .kdk-product,.kdk-laag .kdk-oefen{box-shadow:none;}
.kdk-laag .kdk-product{border-color:#4BADFF;}
@media (max-width:700px){
  .kdk-laag-top{padding:14px 16px 0;}
  .kdk-laag-midden{padding:0 16px;}
  .kdk-laag-binnen{padding:22px 0 24px;}
  .kdk-laag .kdk-pop{width:92px;}
  .kdk-laag .kdk-bubbel p{font-size:1.05rem;}
  .kdk-laag-onder{padding:12px 16px 16px;}
}