/* Menshoek, onderdelen */
.logo-ster{color:var(--nevel);display:inline-block;animation:klop 1.1s ease-in-out infinite}
@keyframes klop{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}36%{transform:scale(1.12)}50%{transform:scale(1)}}
.vers.links{text-align:left;margin:32px 0 0;max-width:720px}
.knoppen.links{justify-content:flex-start}
.kaart{padding:22px;border-radius:var(--radius);background:var(--diep);border:1px solid var(--rand)}

/* hero */
.nuwidget{border-radius:22px;max-width:100%;padding:12px 20px 12px 14px}
.nuwidget .hartje{font-size:1.8rem;color:var(--nevel);display:inline-block;animation:klop 1.1s ease-in-out infinite;flex:none}
.nuwidget b{color:var(--tekst);font-variant-numeric:tabular-nums}

/* lichaamsplaatje */
.lichaam{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.figuur{position:relative;background:radial-gradient(ellipse at 50% 40%,rgba(232,114,122,.10),transparent 65%),var(--diep);border:1px solid var(--rand);border-radius:var(--radius);padding:16px 12px 12px}
.lagen{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px}
.figuur svg{display:block;width:100%;max-width:360px;height:auto;margin:0 auto}
.figuur .klein{text-align:center;margin:6px 0 0}
.lv-huid{fill:url(#huidVerloop);stroke:rgba(219,170,98,.35);stroke-width:1.2}
.lv-ledemaat{fill:none;stroke:url(#huidVerloop);stroke-linecap:round}
.lv-rand{fill:none;stroke:rgba(219,170,98,.32);stroke-linecap:round}
.orgaan,.bot,.vat,.zenuw{cursor:pointer;transition:filter .2s,opacity .25s,stroke .2s}
.orgaan{stroke:rgba(0,0,0,.35);stroke-width:1}
.orgaan:hover,.bot:hover,.orgaan:focus,.bot:focus{filter:brightness(1.35) drop-shadow(0 0 6px rgba(219,170,98,.8));outline:none}
.orgaan.actief,.bot.actief,.spier.actief{stroke:#ffe2a8;stroke-width:2.4;filter:drop-shadow(0 0 8px rgba(255,214,140,.9))}
.bot{fill:#efe4cf;stroke:#a9967a;stroke-width:1}
.spier{cursor:pointer;fill:#b84a56;stroke:#e48a8f;stroke-width:.8;transition:filter .2s}
.spier:hover,.spier:focus,.vat:hover,.zenuw:hover,.vat:focus,.zenuw:focus{filter:brightness(1.35) drop-shadow(0 0 6px rgba(219,170,98,.8));outline:none}
.lijn{fill:none!important;stroke-linecap:round;stroke-linejoin:round}
.vat,.zenuw{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lijn.actief,.vat.actief,.zenuw.actief{stroke:#ffe2a8!important;filter:drop-shadow(0 0 7px rgba(255,214,140,.95))}
.deco{pointer-events:none}
.huidvlak{cursor:pointer}
.laag-groep{transition:opacity .35s}
.verborgen{opacity:0;pointer-events:none}
.stip{fill:var(--nevel);stroke:#fff;stroke-width:2}
.stip-gloed{fill:none;stroke:var(--nevel);stroke-width:2;animation:gloed 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes gloed{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(2.4)}}
.info{position:sticky;top:90px;padding:24px;border-radius:var(--radius);background:linear-gradient(170deg,var(--vlak),var(--diep));border:1px solid var(--rand);min-height:300px}
.info .stelsel{display:inline-block;font:600 .75rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--nacht);background:var(--goud);padding:5px 10px;border-radius:99px;margin-bottom:14px}
.info h3{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.2em}
.info .latijn{font-style:italic;color:var(--zacht);margin:0 0 14px}
.weetje{margin-top:16px;padding:12px 16px;border-left:3px solid var(--goud);background:rgba(219,170,98,.08);border-radius:0 10px 10px 0;font-size:.95rem}
.weetje strong{color:var(--goud)}
.feitjes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.feitjes li{background:rgba(255,255,255,.05);border:1px solid var(--rand);border-radius:99px;padding:6px 12px;font-size:.88rem}
.info .knoppen{justify-content:flex-start;margin-top:20px}
.snelkies{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.snelkies.midden{justify-content:center}
.snelkies button{background:none;border:1px solid var(--rand);color:var(--zacht);border-radius:99px;padding:6px 12px;font:500 .85rem var(--sans);cursor:pointer}
.snelkies button:hover{color:var(--tekst);border-color:var(--goud)}
@media(max-width:820px){.lichaam{grid-template-columns:1fr}.info{position:static}}

/* chips (lagen, stelsels, galerij, zoals .chip van de aardehoek) */
.onderwerpen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;border:1px solid var(--rand);background:rgba(255,255,255,.03);color:var(--zacht);font:600 .88rem var(--sans);cursor:pointer}
.chip:hover{color:var(--tekst)}
.chip.actief,.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--goud);color:var(--nacht);border-color:var(--goud)}

/* stelsels */
.paneel{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start}
.paneel .groot{font-size:4.4rem;line-height:1;text-align:center;padding:22px 0;border-radius:var(--radius);background:var(--nacht);border:1px solid var(--rand)}
.paneel h3{font-size:1.7rem}
.paneel ul{padding-left:20px;margin:12px 0}
.paneel li{margin:6px 0}
.paneel .delen{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.paneel .delen a{font-size:.85rem;text-decoration:none;border:1px solid var(--rand);border-radius:99px;padding:5px 12px;color:var(--zacht)}
.paneel .delen a:hover{color:var(--tekst);border-color:var(--goud)}
@media(max-width:700px){.paneel{grid-template-columns:1fr}.paneel .groot{font-size:3rem;padding:14px 0}}

/* hart (invoervak en feitenblokjes zoals bij de aardehoek) */
.zk-invoer{padding:22px;border-radius:var(--radius);background:var(--diep);border:1px solid var(--rand)}
.zk-invoer label{display:block;font-weight:600;margin:6px 0}
.zk-rij{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.zk-rij input{width:110px;padding:10px 14px;border-radius:10px;border:1px solid var(--rand);background:var(--nacht);color:var(--tekst);font:600 1.1rem var(--sans)}
.laag-feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.laag-feiten div{padding:12px;border-radius:12px;background:var(--nacht);border:1px solid var(--rand)}
.laag-feiten dt{font-size:.75rem;color:var(--zacht)}
.laag-feiten dd{margin:2px 0 0;font-weight:600;font-size:.92rem}
.hartblok{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.hartvak{text-align:center}
.hartvak svg{width:min(260px,70vw);height:auto;transform-origin:50% 55%}
.hartvak svg.slaat{animation:hartslag var(--duur,.86s) ease-in-out infinite}
@keyframes hartslag{0%,100%{transform:scale(1)}14%{transform:scale(1.10)}28%{transform:scale(.98)}42%{transform:scale(1.05)}60%{transform:scale(1)}}
.bpm{font:600 3rem/1 var(--serif);color:var(--goud);font-variant-numeric:tabular-nums}
.tikknop{width:100%;max-width:320px;margin:16px auto 0;padding:22px;font-size:1.1rem}
.rekenaar{display:grid;gap:14px;align-content:start}
.bpm small{font-family:var(--sans)}
.rekenaar label{display:block;font-weight:600;margin-bottom:6px}
.uitkomst{font:600 1.2rem/1.25 var(--serif);color:var(--goud);font-variant-numeric:tabular-nums;word-break:break-word;margin:0}
.rekenaar .laag-feiten{margin:0}
@media(max-width:820px){.hartblok{grid-template-columns:1fr}}
@media(max-width:480px){.rekenaar .laag-feiten{grid-template-columns:1fr}}

/* zoomreis (zelfde opbouw als de reis in de universumhoek) */
.reis-beeld{margin:0}
.reis-beeld .beeld{background:radial-gradient(circle,var(--vlak),var(--nacht) 72%)}
.reis-beeld .beeld svg{position:absolute;left:11%;top:11%;width:78%;height:78%}
.reis-maat{display:block}

/* groei-tijdlijn (opbouw .tl uit aarde.css, hier klikbaar) */
.tijdlijn.acht{grid-template-columns:repeat(8,1fr);margin-bottom:26px}
button.tl{display:block;align-self:start;background:none;border:0;color:var(--tekst);font:inherit;cursor:pointer}
button.tl .tl-punt{background:var(--vlak);color:var(--goud)}
button.tl[aria-selected="true"] .tl-punt{background:var(--goud);color:var(--nacht)}
button.tl[aria-selected="true"] strong{color:var(--goud)}
.tl-paneel{display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:center}
.tl-paneel .groot{font-size:4rem;text-align:center}
@media(max-width:820px){.tijdlijn.acht{grid-template-columns:1fr;gap:10px}.tl-paneel{grid-template-columns:1fr;gap:6px}.tl-paneel .groot{font-size:3rem;text-align:left}}

/* slaap */
.slaapgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start}
.hypnogram{width:100%;height:auto;display:block}
.slaapgrid ul{padding-left:20px;margin:0 0 1em}
@media(max-width:820px){.slaapgrid{grid-template-columns:1fr}}

/* wist je dat */
.wonder{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:28px;border-radius:var(--radius);border:1px solid var(--rand);background:radial-gradient(circle at 10% 50%,rgba(232,114,122,.16),transparent 55%),linear-gradient(170deg,var(--vlak),var(--diep))}
.wonder .groot{font-size:3.6rem;line-height:1}
.wonder p{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.45;margin:0 0 14px}
@media(max-width:600px){.wonder{grid-template-columns:1fr;padding:22px}.wonder .groot{font-size:2.8rem}}
#encyclopedie-banner{padding-top:20px;padding-bottom:20px}

/* galerij en slot */
.foto .credit{margin-top:6px}
.meer-wrap{text-align:center;margin-top:20px}
.lb-datum{font-size:.85rem}
.lb-besch{font-size:.88rem;max-width:760px;margin:6px auto!important;max-height:7.5em;overflow:auto;text-align:left}
.slot .let-op{max-width:620px;margin:28px auto 0;font-size:.85rem;color:var(--zacht)}

/* subpagina's (zoals de kop van Grondstoffen) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.atlas-kop{max-width:1180px;margin:0 auto;padding:clamp(56px,8vw,90px) clamp(16px,5vw,48px) 10px;text-align:center;background:radial-gradient(ellipse at 50% 0,rgba(232,114,122,.16),transparent 60%)}
.atlas-kop h1{font-size:clamp(2.2rem,5.5vw,3.8rem)}
.atlas-kop h1 em{color:var(--goud);font-weight:400}
.atlas-kop .vers{margin-top:28px}
.bronlijst{display:grid;gap:12px;padding:0;list-style:none}
.bronlijst li{background:var(--diep);border:1px solid var(--rand);border-radius:14px;padding:14px 18px;word-break:break-word}
.bronlijst strong{font-family:var(--serif)}
.tabelvak{overflow-x:auto;border:1px solid var(--rand);border-radius:14px;background:var(--diep);margin-bottom:12px}
.tabel{width:100%;border-collapse:collapse;font-size:.92rem}
.tabel th,.tabel td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top;word-break:break-word}
.tabel th{color:var(--goud);font-weight:600}
.sub-h{font-size:1.6rem;margin-top:40px}