@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"),url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Makerspaneel, Mijn profiel: links invullen, rechts het kaartje. */
.chp{--chp-inkt:#1B2A4A;--chp-papier:#F4EFE4;--chp-lijn:#D9D0BC;--chp-rood:#C2321F;--chp-blauw:#1E47E0;--chp-groen:#1d6b3a;--d-keramiek:#b5652b;--d-textiel:#2a8c82;--d-schrijven:#3c4f7a;--d-anders:#5e548e;--d-beeld:#d4553a;--d-muziek:#2f62c9;--d-theater:#8a3b8f;--d-dans:#c2187a;--d-film:#3d3d3d;--d-erfgoed:#7a5b14}
.chp .fi-section-header-heading{font-family:"Archivo",system-ui,sans-serif;font-weight:750;font-stretch:112%;letter-spacing:-.01em;font-size:1.15rem;color:var(--chp-inkt)}
.dark .chp .fi-section-header-heading{color:#fff}
.chp .fi-section-header-icon{color:var(--chp-rood)}
.chp .fi-section{border-radius:18px}
@media (min-width:1024px){.chp-side{position:sticky;top:5.5rem;align-self:start}}
.chp-side .fi-section{background:var(--chp-papier);border-color:var(--chp-lijn)}
.dark .chp-side .fi-section{background:rgba(255,255,255,.04)}
.chp-voorbeeld{display:flex;flex-direction:column;gap:18px;color:var(--chp-inkt)}
.dark .chp-voorbeeld{color:#fff}
.chp-kaart{background:#fff;border:1px solid var(--chp-lijn);border-radius:18px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(27,42,74,.35);transform:rotate(-1.2deg);transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.chp-kaart:hover{transform:rotate(0) translateY(-2px)}
.chp-kaart-img{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.chp-kaart-img img{width:100%;height:100%;object-fit:cover;display:block}
.chp-init{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-stretch:120%;font-size:3rem;color:#fff;letter-spacing:-.02em}
.chp-chip{position:absolute;left:12px;top:12px;color:#fff;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;box-shadow:0 0 0 2px #fff}
.chp-kaart-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:2px;color:#1B2A4A}
.chp-kaart-body b{font-family:"Archivo",system-ui,sans-serif;font-weight:750;font-stretch:110%;font-size:1.2rem;line-height:1.2}
.chp-kaart-body span{color:#44506A}
.chp-kaart-body small{color:#44506A;font-size:.85rem}
.chp .d-beeldend{background:var(--d-beeld)}.chp .d-muziek{background:var(--d-muziek)}.chp .d-dans{background:var(--d-dans)}.chp .d-theater{background:var(--d-theater)}.chp .d-fotografie,.chp .d-film{background:var(--d-film)}.chp .d-erfgoed{background:var(--d-erfgoed)}.chp .d-keramiek{background:var(--d-keramiek)}.chp .d-textiel{background:var(--d-textiel)}.chp .d-schrijven{background:var(--d-schrijven)}.chp .d-anders{background:var(--d-anders)}
.chp-stand-kop{margin:0 0 8px;font-size:.95rem}
.chp-stand-kop b{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-stretch:115%;font-size:1.6rem;margin-right:4px;color:var(--chp-rood)}
.chp-balk{height:8px;border-radius:999px;background:rgba(27,42,74,.12);overflow:hidden}
.chp-balk span{display:block;height:100%;background:var(--chp-rood);border-radius:999px;transition:width .5s cubic-bezier(.2,1.4,.4,1)}
.chp-lijst{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.95rem}
.chp-lijst li{display:flex;align-items:center;gap:10px;color:#44506A}
.dark .chp-lijst li{color:#C9CFDA}
.chp-lijst li.is-klaar{color:var(--chp-inkt)}
.dark .chp-lijst li.is-klaar{color:#fff}
.chp-vink{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--chp-lijn);display:grid;place-items:center;background:#fff}
.is-klaar .chp-vink{background:var(--chp-groen);border-color:var(--chp-groen)}
.chp-vink svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chp-bekijk{font-weight:600;color:var(--chp-blauw);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.chp-kaart,.chp-balk span{transition:none}.chp-kaart{transform:none}}
.chp-bonus{margin:0;padding:12px 14px;background:#fff;border:1.5px dashed var(--chp-rood);border-radius:14px;font-size:.92rem;line-height:1.45;color:var(--chp-inkt)}
.chp-bonus::before{content:"Bonus";display:block;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chp-rood);margin-bottom:2px}

/* Meer bereik: superkrachten als verzamelkaarten */
.kk{display:flex;flex-direction:column;gap:44px;--kk-papier:#FBF7EE;--kk-inkt:#1B2A4A}
.kk-deck-kop h2{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-stretch:118%;font-size:1.9rem;letter-spacing:-.02em;line-height:1;margin:0 0 6px;color:var(--kk-inkt)}
.kk-deck-kop h2 span{color:#C2321F}
.kk-deck-kop p{margin:0;color:#44506A;max-width:62ch}
.kk-alleen{margin-top:10px!important;display:inline-block;background:#F6DFD9;color:#7d1d12!important;padding:6px 12px;border-radius:999px;font-size:.88rem;font-weight:600}
.kk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:26px 22px;margin-top:20px;perspective:1100px}
.kk-kaart{--k1:#C2321F;--k2:#7d1d12;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;border-radius:20px;padding:9px;background:linear-gradient(150deg,var(--k1),var(--k2));color:var(--kk-inkt);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 14px 30px -16px rgba(27,42,74,.55);transform:rotateX(var(--ry)) rotateY(var(--rx));transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s ease;overflow:hidden;isolation:isolate}
.kk-kaart:hover{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 26px 44px -18px rgba(27,42,74,.6)}
.kk-kaart.is-tilt{transition:transform .05s linear}
.kk-rood{--k1:#E0503B;--k2:#8E1F12}.kk-blauw{--k1:#3E63F0;--k2:#122A8C}.kk-keramiek{--k1:#D07A3A;--k2:#6E3812}
.kk-textiel{--k1:#33A396;--k2:#145049}.kk-theater{--k1:#A6509F;--k2:#4B1C4F}.kk-erfgoed{--k1:#A88326;--k2:#4A3608}
.kk-dans{--k1:#E0378F;--k2:#6D0B43}.kk-inkt{--k1:#3A4C78;--k2:#0B1426}
.kk-glans{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),rgba(255,255,255,0) 45%);opacity:0;transition:opacity .2s ease;mix-blend-mode:soft-light}
.kk-kaart:hover .kk-glans{opacity:1}
.kk-kaart.is-verdiend{background:linear-gradient(150deg,#F7D774,#C9962A 40%,var(--k1) 75%,var(--k2))}
.kk-kaart.is-verdiend .kk-glans{opacity:.85;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 38%,rgba(150,220,255,.35) 46%,rgba(255,170,230,.35) 54%,transparent 70%);background-size:250% 250%;background-position:var(--mx) var(--my);mix-blend-mode:overlay;animation:kk-holo 6s ease-in-out infinite}
@keyframes kk-holo{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(40deg)}}
.kk-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 8px 8px;color:#fff}
.kk-top h3{margin:0;font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-stretch:115%;font-size:1.22rem;letter-spacing:-.01em;line-height:1.1;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.kk-prijs{flex:none;font-weight:800;font-size:.82rem;background:rgba(255,255,255,.95);color:var(--k2);padding:3px 9px;border-radius:999px}
.kk-beeld{position:relative;height:124px;border-radius:12px;display:grid;place-items:center;background:
  radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 55%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 8px,transparent 8px 16px),
  linear-gradient(160deg,var(--k1),var(--k2));box-shadow:0 0 0 3px rgba(255,255,255,.75) inset}
.kk-schild{width:76px;height:86px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));transform:translateZ(30px)}
.kk-schild-vorm{fill:rgba(255,255,255,.2);stroke:#fff;stroke-width:3;stroke-linejoin:round}
.kk-schild-rand{fill:var(--k2);fill-opacity:.55;stroke:rgba(255,255,255,.55);stroke-width:1.2}
.kk-schild-icoon{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-verdiend .kk-schild-vorm{fill:#F7D774;stroke:#fff}
.is-verdiend .kk-schild-rand{fill:#C9962A;fill-opacity:1;stroke:#FCEBB0}
.kk-staat{position:absolute;left:10px;bottom:9px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(11,20,38,.55);color:#fff;padding:3px 8px;border-radius:999px;backdrop-filter:blur(2px)}
.is-verdiend .kk-staat{background:#F7D774;color:#4A3608}
.kk-soort,.kk-kracht,.kk-stats,.kk-voet{background:var(--kk-papier)}
.kk-soort{margin:8px 0 0;padding:8px 12px 2px;border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--k2)}
.kk-zeldzaam{letter-spacing:0;font-size:.85rem;color:#C9962A}.kk-zeldzaam i{font-style:normal;color:#D9D0BC}
.kk-kracht{margin:0;padding:4px 12px 10px;font-size:.9rem;line-height:1.45;flex:1}
.kk-stats{margin:0;padding:8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px dashed #D9D0BC}
.kk-stats div{display:flex;flex-direction:column}
.kk-stats dt{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8E99B3}
.kk-stats dd{margin:0;font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:1.02rem;color:var(--kk-inkt)}
.kk-voet{padding:4px 12px 12px;border-radius:0 0 12px 12px;display:flex;flex-direction:column;gap:8px}
.kk-balk{height:9px;border-radius:999px;background:#EAE3D3;overflow:hidden}
.kk-balk span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--k1),var(--k2))}
.kk-uitleg,.kk-verdiend{margin:0;font-size:.82rem;color:#44506A}
.kk-verdiend{font-weight:700;color:#7a5b14}
.kk-knop{display:inline-flex;justify-content:center;align-items:center;min-height:38px;padding:8px 14px;border-radius:999px;border:2px solid var(--k2);color:var(--k2);font-weight:800;font-size:.86rem;background:transparent;cursor:pointer;text-decoration:none}
.kk-knop:hover{background:var(--k2);color:#fff}
.kk-actie .fi-btn{width:100%;justify-content:center;border-radius:999px;background:linear-gradient(90deg,var(--k1),var(--k2))}
.kk-aanvragen h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:1.15rem;margin:0 0 10px}
.kk-aanvragen ul{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #D9D0BC;border-radius:14px}
.kk-aanvragen li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid #EAE3D3;font-size:.9rem}
.kk-aanvragen li:first-child{border-top:0}
.kk-st{flex:none;font-size:.75rem;padding:2px 9px;border-radius:999px;background:#f7e6c4;color:#8a5200}
.kk-st-bevestigd{background:#dcefe0;color:#1d6b3a}.kk-st-afgewezen{background:#E8E0D0;color:#44506A}
@media (prefers-reduced-motion:reduce){.kk-kaart{transform:none!important}.kk-kaart.is-verdiend .kk-glans{animation:none}}
.dark .kk-deck-kop h2,.dark .kk-aanvragen h3{color:#fff}.dark .kk-deck-kop p{color:#C9CFDA}
.is-verdiend .kk-top h3{color:#3a2a05;text-shadow:0 1px 0 rgba(255,255,255,.45)}
/* Een ingezette kaart vliegt naar Mijn profiel; daar licht het knopje op. */
.kk-vliegt{box-shadow:0 30px 60px -20px rgba(27,42,74,.7)!important}
.kk-ontvangt{position:relative;border-radius:10px;animation:kk-ontvang 2.1s ease-out}
.kk-ontvangt::after{content:"";position:absolute;inset:-4px;border-radius:12px;pointer-events:none;box-shadow:0 0 0 3px #F7D774,0 0 22px 6px rgba(247,215,116,.75);animation:kk-ring 2.1s ease-out forwards}
@keyframes kk-ontvang{0%{transform:scale(1)}15%{transform:scale(1.08);background:#FCEBB0}35%{transform:scale(.98)}55%{transform:scale(1.03);background:#FDF3D2}100%{transform:scale(1);background:transparent}}
@keyframes kk-ring{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
/* Je krachten op je profiel, als kleine schildjes */
.chp-krachten{display:flex;flex-direction:column;gap:8px}
.chp-krachten-kop{margin:0;font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chp-rood)}
.chp-krachten ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chp-krachten li{display:flex;flex-direction:column;align-items:center;gap:3px;width:66px;text-align:center;font-size:.7rem;font-weight:700;line-height:1.2;color:var(--chp-inkt)}
.chp-krachten li.is-aangevraagd{opacity:.55}
.chp-schild{width:42px;height:48px;filter:drop-shadow(0 3px 5px rgba(27,42,74,.25))}
.chp-krachten .kk-schild-vorm{fill:var(--k1);stroke:#fff}
.chp-krachten .is-verdiend .kk-schild-vorm,.chp-krachten .is-actief .kk-schild-vorm{fill:#F7D774}
.chp-krachten .is-verdiend .kk-schild-rand,.chp-krachten .is-actief .kk-schild-rand{fill:var(--k2);fill-opacity:1}
.chp-krachten-leeg{margin:0;font-size:.85rem;color:#44506A}

/* Tekst alleen voor schermlezers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Meer bereik: witte tekst op de gekleurde knoppen, anders valt "Inzetten" weg in het blauw */
.kk-actie .fi-btn,.kk-actie .fi-btn .fi-btn-label,.kk-actie .fi-btn .fi-icon{color:#fff}
.kk-actie .fi-btn:hover{filter:brightness(1.08)}