.klein-hero{min-height:auto;padding:110px 16px 70px}
.teller-groot{display:inline-block;margin-top:10px;padding:18px 30px;border:1px solid var(--rand);border-radius:var(--radius);background:rgba(13,20,48,.7)}
.teller-groot .g{display:block;font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.6rem);color:var(--goud);line-height:1.1}
.teller-groot small{color:var(--zacht)}
.menu a[aria-current]{color:var(--goud)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter{padding:8px 16px;border-radius:99px;border:1px solid var(--rand);background:transparent;color:var(--zacht);font:600 .9rem var(--sans);cursor:pointer}
.filter:hover{color:var(--tekst)}
.filter.actief{background:var(--goud);color:var(--nacht);border-color:var(--goud)}

.planeetlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.laadtekst{color:var(--zacht);grid-column:1/-1}
.planeet{position:relative;padding:22px;border-radius:var(--radius);border:1px solid var(--rand);background:linear-gradient(165deg,var(--vlak),var(--diep));display:flex;flex-direction:column;gap:12px;overflow:hidden}
.planeet.nieuw::before{content:"Nieuw";position:absolute;top:14px;right:14px;font:700 .7rem var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--goud);color:var(--nacht);padding:4px 10px;border-radius:99px}
.p-boven{display:flex;gap:16px;align-items:center}
.p-tekening{flex:none;width:96px;height:96px;display:flex;align-items:flex-end;justify-content:center;gap:8px;position:relative}
.p-bol{border-radius:50%;box-shadow:inset -8px -6px 16px rgba(0,0,0,.55),0 0 18px var(--gloed,transparent);position:relative;overflow:hidden}
.p-bol.banden::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(170deg,transparent 0 12%,rgba(255,255,255,.12) 12% 18%,transparent 18% 30%)}
.p-aarde{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7fc4ff,#2a6fb5);flex:none;margin-bottom:2px}
.p-naam{font-family:var(--serif);font-size:1.2rem;margin:0;line-height:1.2;word-break:break-word}
.p-soort{font-size:.82rem;color:var(--goud);font-weight:600}
.p-feiten{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0;font-size:.85rem}
.p-feiten dt{color:var(--zacht);font-size:.75rem}
.p-feiten dd{margin:0;font-weight:600}
.p-zin{font-size:.9rem;color:var(--zacht);margin:0}
.p-link{font-size:.82rem;margin-top:auto}

.methodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.methode{padding:22px;border-radius:var(--radius);border:1px solid var(--rand);background:var(--diep)}
.methode h3{font-size:1.1rem;margin:14px 0 6px}
.methode p{font-size:.9rem;color:var(--zacht);margin:0}
.m-anim{display:block;position:relative;height:70px;border-radius:12px;background:rgba(0,0,0,.25);overflow:hidden}
.m-anim::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle,#fff6d8,#f0b85a);box-shadow:0 0 22px #f0b85a}
.m-anim i{position:absolute;width:10px;height:10px;border-radius:50%;background:#26304f;top:50%;margin-top:-5px}
.transit i{animation:langs 4s linear infinite}
@keyframes langs{from{left:-10px}to{left:100%}}
.transit::before{animation:dim 4s linear infinite}
@keyframes dim{0%,40%,60%,100%{opacity:1}48%,52%{opacity:.7}}
.wiebel::before{animation:wieb 1.6s ease-in-out infinite alternate}
@keyframes wieb{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
.wiebel i{display:none}
.lens::before{width:14px;height:14px;margin:-7px 0 0 -7px;animation:flits 3s ease-in-out infinite}
@keyframes flits{0%,100%{transform:scale(1)}45%,55%{transform:scale(2.4)}}
.lens i{display:none}
.foto::before{opacity:.25}
.foto i{left:72%;background:#9ad0ff;box-shadow:0 0 8px #9ad0ff;width:6px;height:6px;margin-top:-3px;animation:pinken 2s infinite}
@keyframes pinken{50%{opacity:.3}}

.objectlijst{display:flex;flex-wrap:wrap;gap:10px}
.object{display:inline-flex;flex-direction:column;padding:12px 16px;border-radius:12px;border:1px solid var(--rand);background:var(--diep);text-decoration:none;color:var(--tekst);transition:transform .2s,border-color .2s;max-width:100%}
.object:hover{transform:translateY(-2px);border-color:var(--goud)}
.object strong{font-weight:600;word-break:break-word}
.object small{color:var(--zacht);font-size:.75rem}
.meer{margin-top:16px}
.planeet.nieuw .p-boven{padding-top:20px}
