/* Echt gebeurd! Waargebeurde verhalen voor kinderen */
@font-face{font-family:"Andika";src:url(fonts/andika-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url(fonts/andika-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Andika";src:url(fonts/andika-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--papier:#FFF9EF;--kaart:#fff;--inkt:#23201C;--zacht:#5A534A;--lijn:#F0E3CC;--geel:#FFD23F;--kleur:#E4572E;--donker:#A63A1C;--kop:"Fredoka","Trebuchet MS",sans-serif;--tekst:"Andika","Verdana",sans-serif;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--papier:#1B1915;--kaart:#26231E;--inkt:#F4EDE2;--zacht:#CFC4B4;--lijn:#3B352C}}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 1.18rem/1.75 var(--tekst)}
a{color:var(--donker)}
@media (prefers-color-scheme:dark){a{color:var(--geel)}}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem;z-index:9}
.balk{background:var(--kleur);color:#fff}
.balk .w{max-width:64rem;margin:0 auto;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.balk a{color:#fff;text-decoration:none;font:600 1rem var(--kop)}
.balk .merk{font-size:1.35rem}
.balk nav{display:flex;gap:1rem;flex-wrap:wrap}
.held{background:var(--kleur);color:#fff;text-align:center;padding:2.5rem 1rem 3rem;position:relative;overflow:hidden}
.held::before,.held::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.held::before{width:22rem;height:22rem;left:-8rem;top:-9rem}.held::after{width:16rem;height:16rem;right:-5rem;bottom:-7rem}
.held h1{font:600 clamp(2.4rem,8vw,4.2rem)/1.05 var(--kop);margin:.3rem 0 .6rem;position:relative}
.held p{max-width:36rem;margin:0 auto;font-size:1.25rem;position:relative}
.held .klein{font:600 .95rem var(--kop);letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.streep{width:6rem;height:6px;border-radius:3px;background:var(--geel);margin:1rem auto;position:relative}
main{max-width:64rem;margin:0 auto;padding:1.5rem 1rem 3rem}
h2{font:600 1.7rem/1.2 var(--kop);color:var(--donker);margin:2.2rem 0 .8rem}
@media (prefers-color-scheme:dark){h2{color:var(--geel)}}
.boeken{list-style:none;padding:0;margin:0;display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}
.boeken li{background:var(--kaart);border-radius:22px;overflow:hidden;box-shadow:0 10px 24px -16px rgba(0,0,0,.45);display:flex;flex-direction:column;position:relative;transition:transform .15s}
.boeken li:hover{transform:translateY(-3px) rotate(-.4deg)}
.boeken img{width:100%;height:auto;display:block;aspect-ratio:1600/2560;object-fit:cover}
.boeken .tekst{padding:1rem 1.1rem 1.2rem}
.boeken h3{font:600 1.3rem/1.2 var(--kop);margin:0 0 .3rem}
.boeken h3 a{text-decoration:none;color:inherit}
.boeken h3 a::after{content:"";position:absolute;inset:0}
.boeken p{margin:0;font-size:1rem;color:var(--zacht);line-height:1.5}
.knoppen{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.knop{display:inline-block;padding:.65rem 1.1rem;border-radius:999px;font:600 1rem var(--kop);text-decoration:none;border:3px solid var(--kleur);color:var(--donker);background:var(--kaart)}
.knop--vol{background:var(--kleur);color:#fff}
@media (prefers-color-scheme:dark){.knop{color:var(--inkt)}}
.lijst{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.lijst li{background:var(--kaart);border:3px solid var(--lijn);border-radius:18px;padding:.9rem 1.1rem;position:relative;display:flex;gap:1rem;align-items:center}
.lijst .nr{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--kleur);color:#fff;font:600 1.2rem/2.6rem var(--kop);text-align:center}
.lijst a{font:600 1.15rem/1.3 var(--kop);text-decoration:none;color:var(--inkt)}
.lijst a::after{content:"";position:absolute;inset:0}
.lijst span.ondertitel{display:block;font:400 1rem var(--tekst);color:var(--zacht)}
.lijst li:hover{border-color:var(--kleur)}
.boekkop{display:grid;gap:1.5rem;align-items:start}
@media (min-width:44rem){.boekkop{grid-template-columns:15rem 1fr}}
.boekkop img{width:100%;height:auto;max-width:18rem;border-radius:18px;box-shadow:0 12px 28px -14px rgba(0,0,0,.5)}
.lezen{max-width:40rem;margin:0 auto}
.lezen h2{font-size:1.45rem}
.lezen p{margin:0 0 1rem}
.kader{border-radius:20px;padding:1.1rem 1.3rem;margin:1.4rem 0;background:var(--kaart);border:3px solid var(--lijn)}
.kader h2{margin:0 0 .5rem;font-size:1.3rem}
.kader.echt{border-color:var(--geel);background:#FFF4CC}
@media (prefers-color-scheme:dark){.kader.echt{background:#3a321a}}
.kader.bijbel{font-style:italic}
.kader ul{margin:0;padding-left:1.3rem}
.duur{font:600 .95rem var(--kop);color:var(--zacht);text-align:center;margin:.3rem 0 1.5rem}
.verder{display:flex;justify-content:space-between;gap:1rem;max-width:40rem;margin:2rem auto 0;flex-wrap:wrap}
.verder a{flex:1 1 14rem;border:3px solid var(--lijn);border-radius:18px;padding:.8rem 1rem;text-decoration:none;color:var(--inkt);background:var(--kaart)}
.verder a:hover{border-color:var(--kleur)}
.verder .label{display:block;font:600 .85rem var(--kop);color:var(--zacht);text-transform:uppercase;letter-spacing:.08em}
.verder b{font:600 1.1rem var(--kop)}
.verder .volgende{text-align:right}
.leesbalk{position:fixed;top:0;left:0;height:6px;background:var(--geel);width:0;z-index:5}
.ouders{background:var(--kaart);border-radius:20px;padding:1.2rem 1.4rem;border:3px dashed var(--lijn);font-size:1.05rem}
.voet{background:var(--kleur);color:#fff;padding:1.5rem 1rem;margin-top:3rem;text-align:center;font-size:1rem}
.voet a{color:#fff}