/* verlanglijstje-indexstijl.css — 2026-10-28: zelfde pastel-achtergrond als index, knipkaarten zoals "SlimmeKids School", Bol-band in blauwe golf zoals Intelligentietests. Alleen presentatie. */

/* 1. Pastel-achtergrond + regenboog-animatie (zelfde als body.index-page .main-content; keyframes uit styles.min.css) */
html body.vl-page:not(#sk-vi) .main-content{position:relative;z-index:1;overflow:hidden;background:radial-gradient(ellipse 80% 50% at 50% -12%,rgba(255,255,255,.45) 0,transparent 55%),linear-gradient(135deg,rgba(255,237,247,.97) 0,rgba(255,249,228,.97) 12%,rgba(246,252,218,.97) 25%,rgba(229,252,237,.97) 38%,rgba(222,246,253,.97) 50%,rgba(237,232,255,.97) 62%,rgba(255,231,245,.97) 75%,rgba(255,243,250,.97) 88%,rgba(255,239,247,.97) 100%)!important}
html body.vl-page:not(#sk-vi) .main-content::before{content:"";position:fixed;inset:-50%;left:-30%;right:-30%;top:-20%;bottom:-20%;background:conic-gradient(from 180deg at 50% 40%,rgba(255,105,135,.22) 0deg,rgba(255,165,100,.2) 45deg,rgba(255,220,100,.2) 90deg,rgba(144,238,144,.18) 135deg,rgba(100,220,255,.18) 180deg,rgba(130,160,255,.2) 225deg,rgba(200,130,255,.2) 270deg,rgba(255,182,193,.22) 315deg,rgba(255,105,135,.22) 360deg);animation:index-rainbow-drift 25s linear infinite;pointer-events:none;z-index:0}
html body.vl-page:not(#sk-vi) .main-content::after{content:"";position:fixed;top:0;left:0;width:60%;height:100%;background:linear-gradient(105deg,transparent 0,transparent 38%,rgba(255,255,255,.14) 48%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.14) 52%,transparent 62%,transparent 100%);animation:index-rainbow-shimmer 10s ease-in-out infinite;pointer-events:none;z-index:1}
html body.vl-page:not(#sk-vi) .main-content>*{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){html body.vl-page:not(#sk-vi) .main-content::before,html body.vl-page:not(#sk-vi) .main-content::after{animation:none!important}}

/* 2. Kaarten zoals "Voor leerkrachten · SlimmeKids School": wit, zachte groene schaduw, gestippelde kniplijn + ✂ */
html body.vl-page:not(#sk-vi) .vl-hero,html body.vl-page:not(#sk-vi) .vl-wrap>.vl-card,html body.vl-page:not(#sk-vi) .vl-feature-card,html body.vl-page:not(#sk-vi) .vl-step,html body.vl-page:not(#sk-vi) #vl-faq,html body.vl-page:not(#sk-vi) a.vl-mine-card,html body.vl-page:not(#sk-vi) .vl-items>.vl-item{
  position:relative!important;overflow:visible!important;background:#fff!important;background-image:none!important;
  border:3px dashed rgba(31,122,58,.55)!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(31,122,58,.08)!important;box-sizing:border-box}
html body.vl-page:not(#sk-vi) .vl-hero,html body.vl-page:not(#sk-vi) .vl-wrap>.vl-card,html body.vl-page:not(#sk-vi) #vl-faq{padding:1.4rem 1.4rem 1.2rem!important}
html body.vl-page:not(#sk-vi) .vl-hero::after,html body.vl-page:not(#sk-vi) .vl-wrap>.vl-card::after,html body.vl-page:not(#sk-vi) .vl-feature-card::after,html body.vl-page:not(#sk-vi) .vl-step::after,html body.vl-page:not(#sk-vi) #vl-faq::after,html body.vl-page:not(#sk-vi) a.vl-mine-card::after,html body.vl-page:not(#sk-vi) .vl-items>.vl-item::after{
  content:"\2702"!important;display:block!important;position:absolute!important;top:-.85rem!important;left:1.2rem!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;z-index:4!important;pointer-events:none!important;
  font-family:"Segoe UI Symbol","Apple Symbols","DejaVu Sans",sans-serif!important;font-size:1.3rem!important;line-height:1!important;color:#1f7a3a!important;background:#fff!important;padding:0 .2rem!important;border-radius:4px!important;opacity:1!important;visibility:visible!important;transform:none!important}
html body.vl-page:not(#sk-vi) .vl-feature-card::after,html body.vl-page:not(#sk-vi) .vl-step::after,html body.vl-page:not(#sk-vi) a.vl-mine-card::after,html body.vl-page:not(#sk-vi) .vl-items>.vl-item::after{font-size:1.05rem!important;top:-.7rem!important}
html body.vl-page:not(#sk-vi) .vl-step{background:#f3faf5!important}
/* koppen/labels in groen met kleine hoofdletters */
html body.vl-page:not(#sk-vi) .vl-eyebrow,html body.vl-page:not(#sk-vi) .vl-feature-title,html body.vl-page:not(#sk-vi) .vl-step strong,html body.vl-page:not(#sk-vi) .vl-wrap>.vl-card>h2,html body.vl-page:not(#sk-vi) .vl-faq-title,html body.vl-page:not(#sk-vi) h1.vl-title{color:#1f7a3a!important;-webkit-text-fill-color:#1f7a3a!important;font-variant:small-caps!important;text-transform:none!important}
html body.vl-page:not(#sk-vi) .vl-lead,html body.vl-page:not(#sk-vi) .vl-feature-text,html body.vl-page:not(#sk-vi) .vl-step span:not(.vl-step-icon),html body.vl-page:not(#sk-vi) .vl-wrap>.vl-card>p{color:#2d3a33!important;-webkit-text-fill-color:#2d3a33!important}

/* knoppen: groen #1f7a3a, kleine hoofdletters */
html body.vl-page:not(#sk-vi) .vl-btn--primary,html body.vl-page:not(#sk-vi) .vl-cta-green,html body.vl-page:not(#sk-vi) .vl-btn:not(.vl-btn--ghost):not(.vl-btn--whatsapp):not(.vl-item-delete):not(.vl-btn--secondary){background:#1f7a3a!important;background-image:none!important;border:0!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-variant:small-caps!important;text-transform:none!important;letter-spacing:.04em!important;font-weight:800!important;border-radius:999px!important;box-shadow:0 3px 10px rgba(31,122,58,.25)!important}
html body.vl-page:not(#sk-vi) .vl-btn--primary:hover,html body.vl-page:not(#sk-vi) .vl-cta-green:hover,html body.vl-page:not(#sk-vi) .vl-btn:not(.vl-btn--ghost):not(.vl-btn--whatsapp):not(.vl-item-delete):not(.vl-btn--secondary):hover{background:#17602d!important}
html body.vl-page:not(#sk-vi) .vl-btn--secondary{background:#fff!important;background-image:none!important;border:2px solid #1f7a3a!important;color:#1f7a3a!important;-webkit-text-fill-color:#1f7a3a!important;font-variant:small-caps!important;text-transform:none!important;letter-spacing:.04em!important;font-weight:800!important;border-radius:999px!important;box-shadow:none!important}
html body.vl-page:not(#sk-vi) .vl-btn--secondary:hover{background:#f3faf5!important}

/* 3. Bol-sectie: blauwe golfband zoals Intelligentietests */
html body.vl-page:not(#sk-vi) section#vl-landing-bol{position:relative!important;z-index:2;overflow:hidden!important;isolation:isolate;border:0!important;border-radius:0!important;box-shadow:none!important;
  width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
  padding:calc(48px + 1.75rem) max(24px,calc((100vw - 1140px) / 2)) calc(48px + 1.75rem)!important;box-sizing:border-box!important;
  background-color:#1a7fd4!important;background-image:radial-gradient(ellipse 110% 80% at 10% 0,rgba(255,255,255,.24) 0,rgba(255,255,255,0) 52%),radial-gradient(ellipse 85% 70% at 95% 100%,rgba(125,211,252,.32) 0,rgba(125,211,252,0) 55%),radial-gradient(ellipse 50% 45% at 50% 50%,rgba(96,165,250,.18) 0,rgba(96,165,250,0) 60%),linear-gradient(145deg,#60a5fa 0,#3b9be8 22%,#1a7fd4 48%,#0d6ec4 72%,#0a4f96 100%)!important;
  background-size:120% 120%,130% 130%,140% 140%,220% 220%!important;background-position:0 0,100% 100%,35% 55%,0 45%!important;animation:sk-intel-bg-shift 17s ease-in-out infinite alternate!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V24C240 0 480 0 720 22S1200 46 1440 20V48z'/%3E%3C/svg%3E") top/100% 48px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 94px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0V24C240 48 480 48 720 26S1200 2 1440 28V0z'/%3E%3C/svg%3E") bottom/100% 48px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V24C240 0 480 0 720 22S1200 46 1440 20V48z'/%3E%3C/svg%3E") top/100% 48px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 94px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0V24C240 48 480 48 720 26S1200 2 1440 28V0z'/%3E%3C/svg%3E") bottom/100% 48px no-repeat}
html body.vl-page:not(#sk-vi) section#vl-landing-bol::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;background:radial-gradient(circle at 20% 25%,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 38%),radial-gradient(circle at 82% 70%,rgba(186,230,253,.26) 0,rgba(186,230,253,0) 42%),radial-gradient(circle at 55% 15%,rgba(56,189,248,.2) 0,rgba(56,189,248,0) 36%);animation:sk-intel-orb-drift 24s ease-in-out infinite alternate}
html body.vl-page:not(#sk-vi) section#vl-landing-bol::after{content:"";position:absolute;top:0;bottom:0;left:-20%;width:45%;z-index:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 0,rgba(255,255,255,.12) 42%,rgba(255,255,255,.04) 58%,rgba(255,255,255,0) 100%);animation:sk-intel-sheen 15s ease-in-out infinite}
html body.vl-page:not(#sk-vi) section#vl-landing-bol>.webshop-bol-inner{position:relative;z-index:1;background:transparent!important;border:0!important;box-shadow:none!important;max-width:1140px;margin:0 auto}
html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-kicker,html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-title,html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-lead,html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-status,html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-inner>p:not(.webshop-bol-kicker){color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(10,40,90,.25)}
html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-kicker{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.4)!important}
html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-inner>p a{color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:underline!important;font-weight:700}
@media (prefers-reduced-motion:reduce){html body.vl-page:not(#sk-vi) section#vl-landing-bol,html body.vl-page:not(#sk-vi) section#vl-landing-bol::before,html body.vl-page:not(#sk-vi) section#vl-landing-bol::after{animation:none!important}}
@media (max-width:767.98px){html body.vl-page:not(#sk-vi) section#vl-landing-bol{padding-left:16px!important;padding-right:16px!important}
  html body.vl-page:not(#sk-vi) .vl-hero,html body.vl-page:not(#sk-vi) .vl-wrap>.vl-card,html body.vl-page:not(#sk-vi) #vl-faq{padding:1.1rem .9rem 1rem!important}}

/* v2 2026-10-28: hero + gelegenheden als één geheel, Bol-knoppen groen, systeem-dropdowns */
html body.vl-page:not(#sk-vi) .vl-hero .vl-hint{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
html body.vl-page:not(#sk-vi) .vl-hero .vl-occasions{margin:1rem 0 0!important;padding:1rem 0 0!important;border:0!important;border-top:1px dashed rgba(31,122,58,.35)!important;background:transparent!important;box-shadow:none!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:.45rem!important}
html body.vl-page:not(#sk-vi) .vl-hero .vl-occasions::before,html body.vl-page:not(#sk-vi) .vl-hero .vl-occasions::after{display:none!important}
html body.vl-page:not(#sk-vi) .vl-hero .vl-chip{background:#f3faf5!important;border:1px solid rgba(31,122,58,.25)!important;color:#1f5130!important;-webkit-text-fill-color:#1f5130!important;box-shadow:none!important}
html body.vl-page:not(#sk-vi) .webshop-bol-card-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;padding:0 1.1rem!important;background:#1f7a3a!important;background-image:none!important;border:0!important;border-radius:999px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-transform:lowercase!important;font-variant:small-caps!important;letter-spacing:.04em!important;font-weight:800!important;font-size:.95rem!important;box-shadow:0 3px 10px rgba(31,122,58,.25)!important;text-decoration:none!important}
html body.vl-page:not(#sk-vi) .webshop-bol-card-link:hover{background:#17602d!important}
html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-dropdown.has-sk-select>.webshop-bol-dropdown-toggle,html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-dropdown.has-sk-select>.webshop-bol-dropdown-menu{display:none!important}
html body.vl-page:not(#sk-vi) section#vl-landing-bol select.sk-bol-select{-webkit-appearance:auto!important;appearance:auto!important;font:inherit!important;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;font-size:.95rem!important;color:#111!important;background:#fff!important;border:1px solid #c9d3dd!important;border-radius:6px!important;min-height:40px!important;padding:0 .6rem!important;min-width:12rem;max-width:100%;box-shadow:none!important;cursor:pointer}
html body.vl-page:not(#sk-vi) section#vl-landing-bol select.sk-bol-select:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}
html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-dropdown.has-sk-select{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
@media (max-width:600px){html body.vl-page:not(#sk-vi) section#vl-landing-bol select.sk-bol-select{min-width:0;width:100%}}

/* v3 2026-10-28: Laad meer groen, compacte Bol-knoppen, gelegenheden als nette labels (geen knoppen) */
html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-more-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;height:auto!important;padding:0 1.3rem!important;background:#1f7a3a!important;background-image:none!important;border:0!important;border-radius:999px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-variant:small-caps!important;text-transform:none!important;letter-spacing:.04em!important;font-weight:800!important;font-size:.95rem!important;box-shadow:0 3px 10px rgba(10,40,90,.25)!important;cursor:pointer;width:auto!important}
html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-more-btn:hover{background:#17602d!important}
html body.vl-page:not(#sk-vi) .webshop-bol-card-link{min-height:0!important;height:auto!important;width:auto!important;max-width:100%!important;padding:.4rem .95rem!important;font-size:.85rem!important;line-height:1.1!important;align-self:center!important;margin-left:auto!important;margin-right:auto!important;box-shadow:0 2px 6px rgba(31,122,58,.22)!important}
html body.vl-page:not(#sk-vi) .vl-hero .vl-occasions{gap:.4rem .5rem!important}
html body.vl-page:not(#sk-vi) .vl-hero .vl-chip{display:inline-flex!important;align-items:center!important;gap:.35rem!important;min-height:0!important;height:auto!important;padding:.28rem .7rem .28rem .55rem!important;border:0!important;border-radius:6px!important;background:#eef7f1!important;color:#1f5130!important;-webkit-text-fill-color:#1f5130!important;font-size:.82rem!important;font-weight:600!important;line-height:1.3!important;box-shadow:none!important;cursor:default!important;pointer-events:none;transform:none!important}
html body.vl-page:not(#sk-vi) .vl-hero .vl-chip::before{content:""!important;display:inline-block!important;width:.7rem!important;height:.4rem!important;border-left:2px solid #1f7a3a!important;border-bottom:2px solid #1f7a3a!important;transform:rotate(-45deg) translateY(-1px)!important;flex:0 0 auto!important;background:none!important;margin:0 .1rem 0 0!important;position:static!important}
html body.vl-page:not(#sk-vi) section#vl-landing-bol .webshop-bol-grid a.webshop-bol-card-link{display:inline-flex!important;flex:0 0 auto!important;min-height:0!important;height:auto!important;width:auto!important;min-width:0!important;padding:.4rem .95rem!important;font-size:.85rem!important;line-height:1.1!important;align-self:center!important;margin:.4rem auto 0!important}
/* SEO-tussenkoppen in de 'Waarom'-kaart */
html body.vl-page:not(#sk-vi) .vl-seo-intro h3.vl-seo-sub{margin:1.2rem 0 .35rem!important;font-size:1rem!important;font-weight:700!important;color:#1f7a3a!important;-webkit-text-fill-color:#1f7a3a!important;font-variant:small-caps!important;letter-spacing:.03em!important;text-align:center!important}
/* 2026-10-28: alle titels/koppen gecentreerd (body-tekst blijft leesbaar links) */
html body.vl-page:not(#sk-vi) main :is(h1,h2,h3,h4,.vl-kicker,.webshop-bol-kicker,.vl-faq-lead,.vl-section-title,.vl-feature-card h3,.vl-step h3){text-align:center!important;margin-left:auto!important;margin-right:auto!important}
html body.vl-page:not(#sk-vi) main summary.sk-faq-s{justify-content:center!important;text-align:center!important}
html body.vl-page:not(#sk-vi) #vl-faq#vl-faq h3.vl-faq-q.vl-faq-q{text-align:center!important;flex:1 1 auto!important}
/* 2026-10-28: desktop — sectieboxen even breed als op de index (1140px) */
@media (min-width:1025px){html body.vl-page:not(#sk-vi) .vl-wrap{max-width:1140px!important;width:calc(100% - 140px)!important;padding-left:0!important;padding-right:0!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}
html body.vl-page:not(#sk-vi) .vl-wrap>:is(.vl-hero,.vl-card,#vl-faq){max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important}}