/* Homepagina in de stijl "Speels" (gekozen door Björn, 6 nov 2026).
   Alleen geladen op de startpagina. Geen animatie in de hero: Björn wil daar niets wat vanzelf beweegt. */
body{background:#f7f6ff}
header.kop{background:rgba(247,246,255,.92);border-bottom-color:transparent}
.speels{--lila:#f1efff;--limoen:#c8f560;--munt:#dcf5e6;--hemel:#dfe7ff}
.speels .knop{border-radius:999px}
.speels section{padding:64px 0}
.speels .sectiekop h2{color:var(--indigo-diep)}

/* hero */
.speels .hero{padding:56px 0 72px;background:
  radial-gradient(55% 60% at 90% 0%,#ddd8ff 0,transparent 70%),
  radial-gradient(45% 45% at 0% 35%,#ffe2d8 0,transparent 70%)}
.hlabel{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:#fff;font-weight:700;font-size:.82rem;color:var(--indigo);box-shadow:0 2px 0 var(--lijn);margin-bottom:20px}
.hlabel i{width:8px;height:8px;border-radius:50%;background:#2fb37a;box-shadow:0 0 0 4px var(--munt)}
.speels .hero h1{color:var(--indigo-diep);font-size:clamp(2.8rem,7.2vw,5.2rem)}
.speels .hero h1 em{color:var(--koraal);white-space:nowrap;background:linear-gradient(var(--zon),var(--zon)) 0 88%/100% .16em no-repeat}
.speels .vertrouw li::before{color:#2fb37a}

.podium-h{position:relative;min-height:540px;max-width:520px;width:100%;margin:0 auto}
.podium-h .app{position:absolute;right:0;top:0;width:min(420px,100%);background:#fff;border-radius:26px;padding:22px;box-shadow:0 40px 80px -36px rgba(28,27,85,.45),0 0 0 1px var(--lijn);z-index:2}
.podium-h h2{font-size:1.4rem;color:var(--indigo-diep)}
.podium-h .sub{font-size:.9rem;color:var(--zacht);margin:4px 0 14px}
.ttabs{display:flex;gap:6px;margin-bottom:8px}
.ttabs button{border:0;background:var(--lila);color:var(--indigo);font:700 .82rem var(--f-tekst);padding:9px 13px;border-radius:999px;cursor:pointer}
.ttabs button[aria-pressed=true]{background:var(--indigo);color:#fff}
.taken{list-style:none;margin:0;padding:0}
.taak{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--lijn)}
.taak:last-child{border-bottom:0}
.taak[hidden]{display:none}
.taak input{appearance:none;width:24px;height:24px;flex:none;margin:0;border:2px solid #c9c6e6;border-radius:8px;cursor:pointer;display:grid;place-content:center;transition:background .15s,border-color .15s}
.taak input:checked{background:#2fb37a;border-color:#2fb37a}
.taak input:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.taak label{flex:1;font-weight:600;font-size:.94rem;line-height:1.3;cursor:pointer}
.taak input:checked+label{color:#6f6d90;text-decoration:line-through}
.chip{font-size:.72rem;font-weight:800;padding:4px 8px;border-radius:8px;white-space:nowrap}
.c-feest{background:var(--koraal-licht);color:var(--koraal-2)}
.c-gezin{background:var(--hemel);color:#2f47b3}
.c-wonen{background:var(--zon-licht);color:#7a5600}
.c-werk{background:var(--munt);color:#136b45}
.voortgang{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:.8rem;font-weight:700;color:var(--zacht)}
.voortgang b{flex:1;height:8px;border-radius:9px;background:var(--lila);overflow:hidden}
.voortgang i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--koraal-fel),var(--zon));transition:width .3s}
.badge{position:absolute;right:-14px;top:-28px;width:112px;height:112px;border-radius:50%;background:var(--limoen);display:grid;place-items:center;text-align:center;padding:12px;font:800 .9rem/1.1 var(--f-titel);color:var(--indigo-diep);transform:rotate(12deg)}
.briefje{position:absolute;right:6px;bottom:6px;z-index:3;width:140px;margin:0;background:var(--zon);padding:16px 14px 18px;font:700 1.05rem/1.15 var(--f-titel);color:var(--inkt);box-shadow:0 14px 24px -14px rgba(0,0,0,.35);transform:rotate(6deg)}
.briefje::before{content:"";position:absolute;top:-9px;left:50%;width:56px;height:18px;margin-left:-28px;background:rgba(255,255,255,.6);transform:rotate(-4deg)}
.mascotte{position:absolute;left:-36px;bottom:-24px;width:230px;z-index:3}

/* vier tegels */
.speels .tegels{padding:0;margin-top:-28px;position:relative;z-index:4}
.tegels .wrap{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tegel{display:grid;grid-template-columns:auto 1fr;column-gap:14px;background:#fff;border-radius:22px;padding:20px;box-shadow:0 2px 0 var(--lijn)}
.tegel .ic{grid-row:span 2;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:var(--t)}
.tegel h3{font-size:1.15rem;color:var(--indigo-diep);margin:2px 0 4px}
.tegel p{margin:0;color:var(--zacht);font-size:.93rem;line-height:1.45}

/* hoe het werkt als wit paneel */
.speels #hoe>.wrap{background:#fff;border-radius:40px;padding:48px 40px;box-shadow:0 2px 0 var(--lijn)}

/* werkt met + prijzen */
.speels .duo-sectie{padding-top:0}
.duo{display:grid;gap:20px}
@media (min-width:880px){.duo{grid-template-columns:1fr 1fr}}
.groen{background:#d9f7a8;border-radius:36px;padding:36px}
.prijskaart{background:#fff;border-radius:36px;padding:36px;box-shadow:0 2px 0 var(--lijn)}
.groen h2,.prijskaart h2{font-size:clamp(1.7rem,3vw,2.1rem);color:var(--indigo-diep);margin-bottom:8px}
.groen>p{color:#3d4a1f;margin:0 0 20px}
.prijskaart>p{color:var(--zacht);margin:0 0 20px}
.mee{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.mee li{background:#fff;border-radius:16px;padding:14px;font-weight:700;font-size:.95rem;display:flex;gap:10px;align-items:center}
.mee span{font-size:1.3rem}
.prijzen{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pkk{border:2px solid var(--lijn);border-radius:20px;padding:16px;position:relative}
.pkk.top{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pkk small{font-weight:700;font-size:.8rem;opacity:.8}
.pkk b{display:block;font:800 1.6rem/1.05 var(--f-titel);margin:8px 0 6px}
.pkk span{display:block;font-size:.84rem;line-height:1.35;opacity:.85}

/* stemming als donkere vlek */
.speels #stem{background:none;padding:24px 0 64px}
.speels #stem>.wrap{background:var(--indigo-diep);border-radius:48px 48px 48px 120px;padding:56px 48px}
.speels #stem .sectiekop h2{color:#fff}
.speels #stem .knop{background:var(--limoen);color:var(--indigo-diep)}
.speels #stem .knop:hover{background:#b7e84a}

/* ideeënbox als wit paneel */
.speels #ideeenbox>.wrap{background:#fff;border-radius:40px;padding:48px 40px;box-shadow:0 2px 0 var(--lijn)}

@media (max-width:879px){
  .podium-h{min-height:560px}
  .podium-h .app{left:50%;right:auto;transform:translateX(-50%)}
  .speels .tegels{margin-top:0}
}
@media (max-width:600px){
  .speels .hero{padding-top:32px}
  .podium-h{min-height:520px}
  .badge{width:88px;height:88px;font-size:.74rem;right:-4px;top:-22px}
  .briefje{display:none}
  .mascotte{width:150px;left:-10px;bottom:-30px}
  .speels #hoe>.wrap,.speels #ideeenbox>.wrap{border-radius:28px;padding:30px 18px}
  .speels #stem>.wrap{border-radius:32px;padding:36px 20px}
  .groen,.prijskaart{border-radius:28px;padding:26px 20px}
}