/*
Theme Name: Kleurplaat Center
Theme URI: https://kleurplaat.center
Author: Kleurplaat.center
Description: Montessori-geïnspireerd thema voor Kleurplaat.center — kleurplaten, spellen en verjaardagspakketten.
Version: 1.0
Text Domain: kleurplaatcenter
*/

/* ══════════════════════════════════════
   DESIGNSYSTEEM — kleuren, typografie
══════════════════════════════════════ */
:root{
  --linnen:#F2EFE3; --linnen-diep:#E8E2CF; --hout:#5B4130; --hout-licht:#8C6A4A;
  --klei:#AC5D3B; --klei-donker:#954E30; --salie:#78876A; --salie-donker:#5D6C52;
  --oker:#D2A23F; --lucht:#6C86A0; --inkt:#35302A; --inkt-zacht:#6B6255;
  --wit-papier:#FCFAF4;
  --rand:1px solid rgba(53,48,42,0.10);
  --schaduw:0 10px 22px -14px rgba(91,65,48,0.35),0 2px 4px rgba(91,65,48,0.08);
  --schaduw-z:0 4px 14px rgba(91,65,48,0.10);
  --r-s:10px; --r-m:16px; --r-l:26px;
  --serif:'Fraunces','Iowan Old Style',serif;
  --sans:'Nunito Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0; overflow-x:hidden;
  background-image:radial-gradient(circle at 1px 1px, rgba(91,65,48,0.06) 1px, transparent 1px), linear-gradient(120deg,#F2EFE3,#F6E9DA,#EFF0E0,#F2E5EA,#F2EFE3);
  background-size:22px 22px, 400% 400%;
  background-position:0 0, 0% 50%;
  animation:kleur-vloeien 18s ease-in-out infinite;
  color:var(--inkt); font-family:var(--sans); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@keyframes kleur-vloeien{
  0%{background-position:0 0, 0% 50%;} 50%{background-position:0 0, 100% 50%;} 100%{background-position:0 0, 0% 50%;}
}
h1,h2,h3,h4{font-family:var(--serif); color:var(--hout); margin:0 0 .4em; font-weight:600; line-height:1.15;}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(242,239,227,0.92); backdrop-filter:blur(6px);
  border-bottom:var(--rand); padding:14px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.site-logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.15rem;color:var(--hout);font-weight:700;text-decoration:none;}
.site-logo .mark{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 210deg,var(--klei),var(--oker),var(--salie),var(--lucht),var(--klei));display:grid;place-items:center;font-size:.95rem;}
.site-menu{display:flex; gap:22px; margin-left:auto; list-style:none; padding:0;}
.site-menu a{text-decoration:none; font-weight:700; font-size:.92rem; color:var(--hout-licht); transition:color .2s;}
.site-menu a:hover, .site-menu .current-menu-item a{color:var(--klei);}
.nav-cta{
  font-size:.85rem; font-weight:700; color:var(--klei);
  border:1.5px solid var(--klei); padding:7px 16px; border-radius:999px; text-decoration:none;
  transition:background .2s,color .2s;
}
.nav-cta:hover{background:var(--klei);color:#fff;}

/* ══════════════════════════════════════
   NIEUWSTICKER
══════════════════════════════════════ */
.marquee-balk{background:var(--hout); color:#F6EFDF; padding:9px 0; overflow:hidden; white-space:nowrap; font-weight:800; font-size:.8rem; letter-spacing:.04em;}
.marquee-inner{display:inline-block; animation:scroll-links 16s linear infinite;}
.marquee-balk span{margin:0 26px;}
@keyframes scroll-links{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero{padding:64px 0 48px; position:relative; overflow:hidden; min-height:540px;}
.categorie-hero{padding:44px 0 8px;}

/* ══════════════════════════════════════
   LEERKRACHT-PAKKETTEN — PRIJSKAARTEN
══════════════════════════════════════ */
.pakketten-sectie{padding:40px 0 60px;}
.pakketten-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; margin-bottom:32px;}
.pakket-kaart{
  background:var(--wit-papier); border:var(--rand); border-radius:var(--r-l);
  padding:34px 26px 28px; box-shadow:var(--schaduw-z); display:flex; flex-direction:column;
  position:relative; text-align:center;
}
.pakket-kaart.pakket-uitgelicht{border:2px solid var(--klei); box-shadow:var(--schaduw);}
.pakket-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--klei); color:#fff; font-size:.72rem; font-weight:800;
  letter-spacing:.03em; padding:5px 16px; border-radius:999px; white-space:nowrap;
}
.pakket-naam{font-size:1.25rem; margin-bottom:8px;}
.pakket-prijs{font-family:var(--serif); font-size:2.3rem; color:var(--klei); font-weight:700; margin-bottom:14px; line-height:1;}
.pakket-prijs span{display:block; font-size:.85rem; color:var(--inkt-zacht); font-weight:600; font-family:var(--sans); margin-top:6px;}
.pakket-beschrijving{color:var(--inkt-zacht); font-size:.92rem; line-height:1.6; margin-bottom:26px; flex:1;}
.pakket-kaart .btn{width:100%; justify-content:center; margin-top:auto;}
.pakketten-status{
  max-width:640px; margin:0 auto; text-align:center; background:var(--linnen-diep);
  border:1px dashed var(--hout-licht); border-radius:var(--r-m); padding:16px 20px;
  font-size:.88rem; color:var(--inkt-zacht);
}
@media(max-width:800px){ .pakketten-grid{grid-template-columns:1fr;} }

/* ══════════════════════════════════════
   TIPS-BLOG
══════════════════════════════════════ */
.tips-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:24px; margin-bottom:24px;}
.tip-kaart{
  background:var(--wit-papier); border:var(--rand); border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--schaduw-z); text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tip-kaart:hover{transform:translateY(-6px); box-shadow:var(--schaduw); border-color:var(--klei);}
.tip-kaart-beeld{aspect-ratio:16/9; background:var(--linnen-diep); overflow:hidden;}
.tip-kaart-beeld img{width:100%; height:100%; object-fit:cover; display:block;}
.tip-kaart-inhoud{padding:20px; display:flex; flex-direction:column; gap:6px; flex:1;}
.tip-datum{font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--salie-donker); font-weight:800;}
.tip-kaart-inhoud h3{font-size:1.1rem; margin:2px 0;}
.tip-kaart-inhoud p{font-size:.88rem; color:var(--inkt-zacht); line-height:1.5; flex:1;}
.tip-lees-meer{font-weight:800; color:var(--klei); font-size:.88rem; margin-top:6px;}
.tips-paginering{display:flex; justify-content:center; gap:12px; margin-top:20px;}
.tips-paginering .page-numbers{padding:8px 14px; border-radius:999px; border:1.5px solid var(--hout-licht); color:var(--hout); text-decoration:none; font-weight:700; font-size:.88rem;}
.tips-paginering .page-numbers.current{background:var(--klei); border-color:var(--klei); color:#fff;}

.tip-artikel{padding:20px 0 40px;}
.tip-artikel-beeld{border-radius:var(--r-l); overflow:hidden; margin-bottom:28px; box-shadow:var(--schaduw-z);}
.tip-artikel-beeld img{width:100%; height:auto; display:block;}
.tip-artikel-tekst{max-width:720px; margin:0 auto; font-size:1.05rem; line-height:1.75; color:var(--inkt);}
.tip-artikel-tekst p{margin:0 0 20px;}
.tip-artikel-tekst h2{font-size:1.4rem; margin:32px 0 14px;}
.tip-artikel-tekst h3{font-size:1.15rem; margin:24px 0 10px;}
.tip-artikel-tekst ul, .tip-artikel-tekst ol{margin:0 0 20px; padding-left:22px;}
.tip-artikel-tekst li{margin-bottom:8px;}

/* ══════════════════════════════════════
   NAAM-KLEURPLAAT GENERATOR
══════════════════════════════════════ */
.naamgenerator-invoer{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:520px; margin:0 auto 28px;}
.naamgenerator-invoer input{
  flex:1; min-width:200px; padding:14px 20px; border-radius:999px; border:1.5px solid var(--hout-licht);
  font-size:1.05rem; font-family:var(--sans); background:var(--wit-papier); color:var(--inkt);
  text-align:center; text-transform:uppercase; letter-spacing:.03em;
}
.naamgenerator-invoer input:focus{outline:none; border-color:var(--klei);}
.naamgenerator-canvas-wrap{
  max-width:900px; margin:0 auto 24px; background:var(--wit-papier); border-radius:var(--r-l);
  padding:12px; box-shadow:var(--schaduw-z); border:var(--rand);
}
.naamgenerator-canvas-wrap canvas{width:100%; height:auto; display:block; border-radius:var(--r-m);}
.naamgenerator-acties{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.naamgenerator-lettertypes{display:flex; gap:10px; justify-content:center; margin-bottom:24px; flex-wrap:wrap;}
.naamgenerator-font-optie{
  padding:10px 22px; border-radius:999px; border:1.5px solid var(--hout-licht); background:var(--wit-papier);
  color:var(--hout); font-size:1.1rem; cursor:pointer; transition:all .2s;
}
.naamgenerator-font-optie:hover{border-color:var(--klei);}
.naamgenerator-font-optie.actief{background:var(--klei); border-color:var(--klei); color:#fff;}

/* Compactere versie specifiek voor deze pagina, zodat alles (incl. knoppen) in beeld past */
.naamgenerator-hero{padding:20px 0 4px;}
.naamgenerator-hero h1{font-size:clamp(1.5rem, 3vw, 2rem);}
.naamgenerator-hero .hero-lead{font-size:.95rem; max-width:560px;}
.naamgenerator-sectie{padding:14px 0 20px;}
.naamgenerator-sectie .naamgenerator-invoer{margin-bottom:14px;}
.naamgenerator-sectie .naamgenerator-lettertypes{margin-bottom:14px;}
.naamgenerator-sectie .naamgenerator-canvas-wrap{margin-bottom:14px; max-height:48vh; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.naamgenerator-sectie .naamgenerator-canvas-wrap canvas{max-height:calc(48vh - 24px); width:auto; max-width:100%;}
@media(max-height:800px){
  .naamgenerator-sectie .naamgenerator-canvas-wrap{max-height:38vh;}
  .naamgenerator-sectie .naamgenerator-canvas-wrap canvas{max-height:calc(38vh - 24px);}
}
.categorie-terug-link{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:var(--hout); text-decoration:none; margin-bottom:20px; padding:9px 18px; border-radius:999px; border:1.5px solid var(--hout-licht); background:var(--wit-papier); transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;}
.categorie-terug-link:hover{background:var(--klei); border-color:var(--klei); color:#fff; transform:translateX(-2px);}
.hero-tekst{position:relative; z-index:2; max-width:600px;}
.hero-tekst-gecentreerd{max-width:640px; margin:0 auto; text-align:center;}
.hero-tekst-gecentreerd .eyebrow{justify-content:center;}
.hero-tekst-gecentreerd h1{margin-left:auto; margin-right:auto;}
.hero-tekst-gecentreerd .hero-badges{justify-content:center;}
.hero-tekst-gecentreerd .hero-actions{justify-content:center;}
.hero-tekst-gecentreerd .hero-zoek-wrap{margin:0 auto;}
.hero-tekst-gecentreerd .hero-actions .btn{padding:18px 36px; font-size:1.05rem;}
.hero-tekst-gecentreerd .hero-actions .btn-klei{box-shadow:0 8px 0 var(--klei-donker);}
.hero-tekst-gecentreerd .hero-actions .btn-klei:hover{box-shadow:0 4px 0 var(--klei-donker);}
.hero-tekst-gecentreerd .hero-actions .btn-outline{box-shadow:0 8px 0 var(--hout-licht);}
.hero-tekst-gecentreerd .hero-actions .btn-outline:hover{box-shadow:0 4px 0 var(--hout-licht);}

.eyebrow{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800;
  color:var(--salie-donker); display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--salie-donker);}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem); line-height:1.02; font-weight:900;}
.hero h1 em{font-style:normal;color:var(--klei);}
.hero h1 .woord{display:inline-block; animation:woord-bounce 2.4s ease-in-out infinite;}
@keyframes woord-bounce{0%,60%,100%{transform:translateY(0) rotate(0deg);} 30%{transform:translateY(-14px) rotate(-3deg);}}
.hero-lead{color:var(--hout-licht); font-size:1.15rem; font-weight:700; max-width:520px; margin:16px auto 0;}

/* Badges — "gestempeld papier" voor materiaalfeiten (PDF, A4...) */
.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 26px;}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  padding:4px 10px; border-radius:999px;
  background:var(--wit-papier); border:1px dashed var(--hout-licht);
  color:var(--inkt-zacht);
  animation:badge-wiebel 3s ease-in-out infinite;
}
.hero-badges span:nth-child(2){animation-delay:.25s;}
.hero-badges span:nth-child(3){animation-delay:.5s;}
@keyframes badge-wiebel{0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg);}}

/* Knoppen */
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:24px;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px;
  font-weight:800; font-size:.95rem; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .3s ease;
}
.btn-klei{background:var(--klei); color:#fff; box-shadow:0 6px 0 var(--klei-donker);}
.btn-klei:hover{transform:translateY(4px); box-shadow:0 2px 0 var(--klei-donker);}
.btn-outline{background:var(--wit-papier); color:var(--hout); box-shadow:0 6px 0 var(--hout-licht);}
.btn-outline:hover{transform:translateY(4px); box-shadow:0 2px 0 var(--hout-licht);}

.hero-zoek{
  max-width:420px; margin:0; display:flex; gap:10px; background:var(--wit-papier);
  border:var(--rand); border-radius:999px; padding:6px 6px 6px 20px; box-shadow:var(--schaduw-z);
}
.hero-zoek input{flex:1; border:none; background:none; font-family:var(--sans); font-size:.95rem; outline:none;}
.hero-zoek button{
  background:var(--klei); color:#fff; border:none; border-radius:999px; padding:10px 22px;
  font-weight:800; font-size:.88rem; cursor:pointer;
}
.hero-zoek-wrap{position:relative; max-width:420px;}
.kc-zoek-dropdown{display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--wit-papier); border:var(--rand); border-radius:var(--r-m); box-shadow:var(--schaduw); overflow:hidden; z-index:50;}
.kc-zoek-dropdown.kc-zoek-actief{display:block;}
.kc-zoek-item{display:flex; align-items:center; gap:12px; padding:10px 16px; text-decoration:none; color:var(--inkt); border-bottom:var(--rand);}
.kc-zoek-item:last-child{border-bottom:none;}
.kc-zoek-item:hover{background:var(--linnen-diep);}
.kc-zoek-item img{width:36px; height:36px; object-fit:cover; border-radius:8px; flex-shrink:0;}
.kc-zoek-item-fallback{width:36px; height:36px; display:grid; place-items:center; font-size:1.2rem; flex-shrink:0;}
.kc-zoek-item span{font-size:.9rem; font-weight:600;}
.kc-zoek-alles{display:block; padding:10px 16px; text-align:center; font-size:.85rem; font-weight:700; color:var(--klei); text-decoration:none; background:var(--linnen-diep);}
.kc-zoek-leeg{padding:14px 16px; margin:0; font-size:.88rem; color:var(--inkt-zacht); text-align:center;}

/* Verspreide, zwevende potloden op de achtergrond van de hero */
.wolk-laag{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.potlood{position:absolute; width:70px; animation-timing-function:ease-in-out; animation-iteration-count:infinite;}
.potlood svg{width:100%; display:block; filter:drop-shadow(0 6px 8px rgba(91,65,48,.2));}
@keyframes zweven-a{0%,100%{transform:translateY(0) rotate(-8deg);} 50%{transform:translateY(-32px) rotate(8deg);}}
@keyframes zweven-b{0%,100%{transform:translateY(0) rotate(10deg);} 50%{transform:translateY(24px) rotate(-10deg);}}
@keyframes zweven-c{0%,100%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(16px,-20px) rotate(14deg);} 66%{transform:translate(-12px,12px) rotate(-14deg);}}

/* Pop-in animatie voor kaarten (categorieën, waarom-kaarten) */
.kaart-pop{opacity:0; transform:translateY(24px) scale(.94); animation:kaart-pop-in .55s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes kaart-pop-in{to{opacity:1; transform:translateY(0) scale(1);}}

/* Sparkle-cursor en confetti (homepage) */
.sparkle{position:fixed; width:8px; height:8px; border-radius:50%; pointer-events:none; z-index:200; animation:sparkle-verval .7s ease-out forwards;}
@keyframes sparkle-verval{to{transform:translateY(-30px) scale(0); opacity:0;}}
.confetti{position:fixed; width:9px; height:13px; z-index:210; pointer-events:none; animation:confetti-val linear forwards;}
@keyframes confetti-val{to{transform:translateY(110vh) rotate(720deg); opacity:.2;}}

/* ══════════════════════════════════════
   ONLINE KLEURTOOL
══════════════════════════════════════ */
.kc-kleurtool-overlay{position:fixed; inset:0; background:rgba(53,48,42,.6); z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;}
.kc-kleurtool-venster{background:var(--wit-papier); border-radius:var(--r-l); padding:20px; max-width:1180px; width:100%; height:92vh; max-height:92vh; overflow:hidden; position:relative; box-shadow:var(--schaduw); display:flex; flex-direction:column;}
.kc-kleurtool-sluiten{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:var(--rand); background:var(--wit-papier); font-size:1.3rem; line-height:1; cursor:pointer; color:var(--hout); z-index:2;}
.kc-kleurtool-venster h2{font-size:1.15rem; margin-bottom:12px; padding-right:44px; flex-shrink:0;}

.kc-kleurtool-hoofdgrid{display:flex; gap:20px; align-items:stretch; flex:1; min-height:0;}
.kc-kleurtool-zijbalk{width:240px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding-right:6px;}

.kc-kleurtool-modus{display:flex; flex-wrap:wrap; gap:6px;}
.kc-modus-knop{font-family:var(--sans); font-weight:800; font-size:.76rem; padding:7px 11px; border-radius:999px; border:2px solid var(--hout-licht); background:var(--wit-papier); color:var(--hout); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;}
.kc-modus-knop.actief{background:var(--klei); border-color:var(--klei); color:#fff;}

.kc-penseel-opties, .kc-stempel-opties{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--inkt-zacht); font-weight:700; background:var(--linnen-diep); padding:8px 12px; border-radius:var(--r-m);}
.kc-penseel-opties input[type=range]{flex:1; accent-color:var(--klei);}
.kc-stempel-opties{flex-wrap:wrap;}
.kc-stempel-optie{font-size:1.2rem; line-height:1; background:none; border:2px solid transparent; border-radius:8px; padding:3px 5px; cursor:pointer; transition:border-color .2s;}
.kc-stempel-optie.actief{border-color:var(--klei);}

.kc-kleurtool-palet{display:grid; grid-template-columns:repeat(auto-fill, 26px); gap:5px; background:var(--linnen-diep); padding:10px; border-radius:var(--r-m);}
.kc-kleur-swatch{width:26px; height:26px; border-radius:50%; border:2px solid var(--wit-papier); box-shadow:0 0 0 1.5px rgba(53,48,42,0.15); cursor:pointer; padding:0; transition:transform .15s;}
.kc-kleur-swatch:hover{transform:scale(1.1);}
.kc-kleur-swatch.actief{box-shadow:0 0 0 2.5px var(--hout);}
.kc-kleur-eigen{position:relative; overflow:hidden; display:inline-block;}
.kc-kleur-eigen input[type=color]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; padding:0;}

.kc-kleurtool-weergave-acties{display:flex; gap:6px; flex-wrap:wrap; align-items:center; background:var(--linnen-diep); padding:8px; border-radius:var(--r-m);}
.kc-icon-knop{width:30px; height:30px; border-radius:50%; border:1.5px solid var(--hout-licht); background:var(--wit-papier); cursor:pointer; font-size:.85rem; display:grid; place-items:center; transition:background .2s ease;}
.kc-icon-knop:hover:not(:disabled){background:var(--wit-papier); border-color:var(--klei);}
.kc-icon-knop:disabled{opacity:.35; cursor:default;}
#kc-zoom-niveau{font-size:.75rem; font-weight:700; color:var(--inkt-zacht); min-width:36px; text-align:center;}

.kc-kleurtool-hoofdacties{display:flex; flex-direction:column; gap:8px; flex-shrink:0;}
.kc-kleurtool-hoofdacties .btn{width:100%; justify-content:center; padding:11px 18px; font-size:.85rem;}

.kc-kleurtool-canvas-wrap{position:relative; flex:1; background:var(--linnen-diep); border-radius:var(--r-m); display:flex; align-items:flex-start; justify-content:center; min-height:0; overflow:auto;}
#kc-kleurtool-canvas{flex-shrink:0; cursor:crosshair; border-radius:var(--r-m); touch-action:none; display:block;}
#kc-kleurtool-canvas.kc-modus-verplaatsen{cursor:grab;}
#kc-kleurtool-canvas.kc-modus-verplaatsen.kc-slepen{cursor:grabbing;}
#kc-kleurtool-canvas.kc-modus-gum{cursor:cell;}

@media(max-width:800px){
  .kc-kleurtool-venster{height:96vh; max-height:96vh; padding:14px;}
  .kc-kleurtool-hoofdgrid{flex-direction:column;}
  .kc-kleurtool-zijbalk{width:100%; max-height:42vh;}
  .kc-kleurtool-canvas-wrap{width:100%; min-height:200px;}
}
.kc-kleurtool-laden{padding:60px 20px; margin:0; color:var(--inkt-zacht); font-weight:700; text-align:center;}

/* ══════════════════════════════════════
   DYNAMISCHE HOMEPAGE — NU ACTUEEL
══════════════════════════════════════ */
.actueel-sectie{padding:28px 0 8px;}
.actueel-kop{font-size:1.4rem; margin-bottom:2px;}
.seizoen-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(120deg, var(--klei), var(--oker));
  color:#fff; padding:22px 28px; border-radius:var(--r-l); text-decoration:none;
  margin-bottom:32px; box-shadow:var(--schaduw-z);
  transition:transform .25s ease, box-shadow .25s ease;
}
.seizoen-banner:hover{transform:translateY(-3px); box-shadow:var(--schaduw);}
.seizoen-banner-label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.25); padding:5px 14px; border-radius:999px; font-weight:800; flex-shrink:0;
}
.seizoen-banner-titel{font-family:var(--serif); font-size:1.25rem; font-weight:700;}

/* ══════════════════════════════════════
   ADVERTENTIE-BLOK
   Duidelijk gelabeld en visueel apart van content, zodat het nooit
   aanvoelt als een kleurplaat en nooit te dicht bij klikbare knoppen
   staat (voorkomt "per ongeluk klikken", tegen de AdSense-regels).
   Plaats hier later de AdSense ad-unit code van Google.
══════════════════════════════════════ */
.ad-slot{
  border: 1px dashed var(--hout-licht); border-radius: var(--r-m);
  background: repeating-linear-gradient(135deg, rgba(91,65,48,0.035) 0 12px, transparent 12px 24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding: 26px; text-align:center; color: var(--inkt-zacht);
  min-height: 120px; margin: 20px 0;
}
.ad-slot .ad-label{ font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ad-slot--banner{ min-height: 100px; }
.ad-slot--rail{ min-height: 250px; }

/* ══════════════════════════════════════
   WAAROM-KAARTEN
══════════════════════════════════════ */
.waarom-sectie{padding:20px 0 56px;}
.waarom-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;}
.waarom-kaart{background:var(--wit-papier); border:var(--rand); border-radius:var(--r-l); padding:24px; text-align:center; box-shadow:var(--schaduw-z);}
.waarom-icoon{width:100%;aspect-ratio:1/1;margin:0 0 14px;border-radius:var(--r-m);background:var(--linnen-diep);display:grid;place-items:center;overflow:hidden;box-shadow:var(--schaduw-z);animation:waarom-bounce 3s ease-in-out infinite;transition:transform .45s var(--ease-spring), background .3s ease;}
.waarom-icoon svg{width:34%;height:34%;color:var(--klei);animation:waarom-adem 3s ease-in-out infinite;transition:color .3s ease;}
.waarom-icoon img{width:100%;height:100%;object-fit:cover;animation:waarom-adem 3s ease-in-out infinite;}
.waarom-kaart:nth-child(2) .waarom-icoon{animation-delay:.25s;}
.waarom-kaart:nth-child(3) .waarom-icoon{animation-delay:.5s;}
.waarom-kaart:nth-child(4) .waarom-icoon{animation-delay:.75s;}
.waarom-kaart:nth-child(2) .waarom-icoon svg,.waarom-kaart:nth-child(2) .waarom-icoon img{animation-delay:.25s;}
.waarom-kaart:nth-child(3) .waarom-icoon svg,.waarom-kaart:nth-child(3) .waarom-icoon img{animation-delay:.5s;}
.waarom-kaart:nth-child(4) .waarom-icoon svg,.waarom-kaart:nth-child(4) .waarom-icoon img{animation-delay:.75s;}
@keyframes waarom-bounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }
@keyframes waarom-adem{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }
@keyframes waarom-hover-pop{ from{ transform: scale(1) rotate(0deg); } to{ transform: scale(1.18) rotate(-8deg); } }
.waarom-kaart:hover .waarom-icoon{ animation: waarom-hover-pop .6s var(--ease-spring) forwards; background: var(--klei); }
.waarom-kaart:hover .waarom-icoon svg{ color: #fff; }
.waarom-kaart h3{font-size:1.05rem;}
.waarom-kaart p{color:var(--inkt-zacht); font-size:.88rem; margin:0;}

/* ══════════════════════════════════════
   CATEGORIE-SCHAP ("open shelf")
══════════════════════════════════════ */
.schap-sectie{padding:20px 0 60px;}
.schap-titel{text-align:center; margin-bottom:36px;}
.categorie-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px;}
.categorie-kaart{
  background:var(--wit-papier); border:var(--rand); border-radius:var(--r-l); padding:26px 20px;
  text-decoration:none; box-shadow:var(--schaduw-z); text-align:center;
  transition:transform .3s var(--ease-spring), box-shadow .3s ease, border-color .3s ease;
}
.categorie-kaart:hover{transform:translateY(-6px) rotate(-1.5deg); box-shadow:var(--schaduw); border-color:var(--klei);}
.categorie-icoon{font-size:2.4rem; display:block; margin-bottom:10px;}
.categorie-afbeelding-wrap{display:block; width:100%; aspect-ratio:1/1; margin:0 0 14px; border-radius:var(--r-m); overflow:hidden; box-shadow:var(--schaduw-z);}
.categorie-afbeelding{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-spring);}
.categorie-kaart:hover .categorie-afbeelding{transform:scale(1.1);}
.categorie-kaart h3{font-size:1.05rem; margin-bottom:4px;}
.categorie-kaart span{font-size:.78rem; color:var(--inkt-zacht); font-weight:700;}

/* ══════════════════════════════════════
   KLEURPLATEN GRID (archief/categorie)
   — aangepast: flexbox + gecentreerd, zodat een onvolledige laatste rij
   niet meer links uitgelijnd blijft hangen met een leeg gat rechts
══════════════════════════════════════ */
.categorie-acties-rij{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; padding:28px 0 32px;}
.categorie-zoek-melding{margin:-16px 0 24px; font-size:.88rem; color:var(--inkt-zacht); text-align:center;}
.categorie-zoek-melding a{color:var(--salie-donker); font-weight:700; text-decoration:none;}

/* ══════════════════════════════════════
   SPELLEN-PAGINA
══════════════════════════════════════ */
.spel-sectie{margin:0 0 56px; scroll-margin-top:24px;}
.spel-sectie-kop{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.spel-sectie-kop h2{margin:0; display:flex; align-items:center; gap:10px; font-size:1.5rem;}
.spel-icoon{font-size:1.6rem;}
.spel-nieuw-tabblad{font-size:.85rem; font-weight:700; color:var(--salie-donker); text-decoration:none;}
.spel-nieuw-tabblad:hover{text-decoration:underline;}
.spel-frame-wrap{background:var(--wit-papier); border:var(--rand); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--schaduw-z);}
.spel-frame{width:100%; height:600px; border:none; display:block;}
@media(max-width:600px){ .spel-frame{height:460px;} }

.kleurplaten-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:22px; padding:32px 0 70px;
}
.kleurplaat-kaart{
  position:relative;
  flex:1 1 230px; max-width:270px;
  background:var(--wit-papier); border:var(--rand); border-radius:var(--r-m); overflow:hidden;
  text-decoration:none; box-shadow:var(--schaduw-z); transition:transform .3s var(--ease-spring), box-shadow .3s ease;
}
.kleurplaat-kaart:hover{transform:translateY(-4px); box-shadow:var(--schaduw);}
.kleurplaat-kaart > a{display:block; text-decoration:none; color:inherit;}
.kleurplaat-thumb{aspect-ratio:4/3; background:var(--linnen-diep); display:grid; place-items:center; overflow:hidden;}
.kleurplaat-thumb img{width:100%; height:100%; object-fit:cover;}
.kleurplaat-info{padding:16px 18px;}
.kleurplaat-info h3{font-size:1rem; margin-bottom:4px;}
.kleurplaat-info span{font-size:.78rem; color:var(--inkt-zacht);}
.deel-knop{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(252,250,244,0.92); border:var(--rand); display:grid; place-items:center;
  color:var(--hout); cursor:pointer; box-shadow:var(--schaduw-z);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.deel-knop:hover{background:var(--klei); color:#fff; transform:scale(1.08);}
.deel-knop svg{width:16px; height:16px;}

/* ══════════════════════════════════════
   KLEURPLAAT DETAILPAGINA
══════════════════════════════════════ */
.kleurplaat-detail{padding:40px 0 70px; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start;}
.kleurplaat-detail-beeld{background:var(--wit-papier); border:var(--rand); border-radius:var(--r-l); padding:20px; box-shadow:var(--schaduw-z);}
.kleurplaat-detail-beeld img{border-radius:var(--r-m);}
.kleurplaat-detail-info .breadcrumb{font-size:.82rem; color:var(--inkt-zacht); margin-bottom:14px;}
.kleurplaat-detail-info .breadcrumb a{color:var(--salie-donker); text-decoration:none; font-weight:700;}
.kleurplaat-detail-info h1{font-size:2rem; margin-bottom:10px;}
.kleurplaat-detail-info .beschrijving{color:var(--inkt-zacht); margin-bottom:24px;}
.download-knop{
  display:inline-flex; align-items:center; gap:10px; background:var(--klei); color:#fff;
  font-weight:800; font-size:1rem; padding:16px 28px; border-radius:999px; text-decoration:none;
  box-shadow:var(--schaduw-z); transition:background .2s, transform .2s;
}
.download-knop:hover{background:var(--klei-donker); transform:translateY(-2px);}
.download-knop svg{width:20px;height:20px;}
.gerelateerd-sectie{padding:20px 0 60px;}
.gerelateerd-sectie h2{font-size:1.3rem; margin-bottom:20px;}

/* ══════════════════════════════════════
   ONTDEK MEER — andere categorieën, onderaan de categoriepagina
══════════════════════════════════════ */
.ontdek-meer-sectie{
  background:var(--linnen-diep); padding:50px 0; text-align:center; margin-top:20px;
}
.ontdek-meer-sectie h2{font-size:1.4rem; margin-bottom:24px;}
.ontdek-meer-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:900px; margin:0 auto;
}
.ontdek-meer-item{
  display:flex; align-items:center; gap:10px; background:var(--wit-papier); border:var(--rand);
  border-radius:999px; padding:10px 20px; text-decoration:none; color:var(--hout); font-weight:700;
  font-size:.92rem; box-shadow:var(--schaduw-z); transition:transform .2s, border-color .2s;
}
.ontdek-meer-item:hover{transform:translateY(-2px); border-color:var(--klei);}
.ontdek-meer-item img{width:22px; height:22px; object-fit:contain;}

/* ══════════════════════════════════════
   NIEUWSBRIEF
══════════════════════════════════════ */
.nieuwsbrief-sectie{padding:20px 0 70px;}
.nieuwsbrief-kaart{background:var(--hout); border-radius:var(--r-l); padding:44px 32px; text-align:center; max-width:640px; margin:0 auto;}
.nieuwsbrief-kaart h2{color:#fff; margin-bottom:10px;}
.nieuwsbrief-kaart > p{color:#D9CDBA; margin:0 0 22px; font-size:.95rem;}
.nieuwsbrief-form{display:flex; gap:10px; max-width:420px; margin:0 auto; background:var(--wit-papier); border-radius:999px; padding:6px 6px 6px 20px;}
.nieuwsbrief-form input[type=email]{flex:1; border:none; background:none; font-family:var(--sans); font-size:.95rem; outline:none;}
.nieuwsbrief-form button{background:var(--klei); color:#fff; border:none; border-radius:999px; padding:10px 22px; font-weight:800; font-size:.88rem; cursor:pointer;}
.nieuwsbrief-melding{font-weight:700; padding:14px; border-radius:var(--r-m); max-width:420px; margin:0 auto;}
.nieuwsbrief-melding--ok{background:rgba(120,135,106,0.3); color:#fff;}
.nieuwsbrief-melding--fout{background:rgba(180,98,62,0.4); color:#fff;}

/* ══════════════════════════════════════
   ALGEMENE PAGINA-INHOUD
══════════════════════════════════════ */
.pagina-inhoud{padding:50px 0 70px; max-width:760px; margin:0 auto;}
.pagina-inhoud h1{font-size:2.1rem; margin-bottom:20px;}
.pagina-inhoud p{margin-bottom:16px; color:var(--inkt-zacht);}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer{background:var(--hout); color:#EFE7DA; padding:44px 0; margin-top:20px;}
.site-footer .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.site-footer p{margin:0; color:#D9CDBA; font-size:.9rem;}
.site-footer a{color:#F6EFDF; font-weight:700; text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
.footer-links{display:flex; gap:18px; list-style:none; padding:0; margin:0;}
.footer-links a{color:#D9CDBA; font-weight:600; font-size:.85rem;}

@media(max-width:800px){
  .kleurplaat-detail{grid-template-columns:1fr;}
  .site-menu{display:none;}
  .wolk-laag{opacity:.55;}
  .potlood{width:50px;}
  .hero{min-height:auto;}
  .ad-slot--banner{min-height:60px; padding:14px;}
}