@view-transition { navigation: auto; }
.radar-wereld { display: inline-flex; align-items: center; gap: 15px; margin-top: 15px; padding: 8px 0 5px 12px; border: 0; border-bottom: 1px solid var(--rand); background: transparent; color: var(--tekst); font: inherit; font-size: 12px; cursor: pointer; }
.radar-wereld span { color: var(--flare); transition: transform .2s; }
.radar-wereld:hover span { transform: translate(2px,-2px); }
.radar-wereld { position: relative; overflow: hidden; isolation: isolate; }
.radar-wereld::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 25%,#ffffff08 40%,#ffffff65 50%,#ffffff08 60%,transparent 75%); transform: translateX(-140%); animation: wereld-knop-glans 12s ease-in-out 3s infinite; }
@keyframes wereld-knop-glans { 0%, 85% { transform: translateX(-140%); opacity: 0; } 87% { opacity: .7; } 97% { opacity: .7; } 100% { transform: translateX(140%); opacity: 0; } }
@media(prefers-reduced-motion:reduce) { .radar-wereld::after { animation: none; display: none; } }
body.wereld-open { overflow: hidden; }
body > .hero, body > main, body > .balk { transition: opacity .45s, filter .45s; }
body.wereld-open > .hero, body.wereld-open > main, body.wereld-open > .balk { opacity: .1; filter: blur(8px); }
.wereld-scherm, .wereld-artikel { color-scheme: dark; color: #eef2f6; font-family: Inter, sans-serif; border: 0; padding: 0; }
.wereld-scherm { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; background: radial-gradient(ellipse at 38% 56%,#15273970,transparent 55%),radial-gradient(ellipse at 80% 10%,#622d2926,transparent 40%),#070c16; overflow-y: auto; }
.wereld-scherm[open] { display: flex; flex-direction: column; }
.wereld-scherm::backdrop { background: #070c16bb; }
.wereld-scherm button, .wereld-scherm select, .wereld-artikel button { font: inherit; cursor: pointer; }
.wereld-scherm button:focus-visible, .wereld-scherm select:focus-visible, .wereld-scherm canvas:focus-visible, .wereld-artikel button:focus-visible, .wereld-artikel a:focus-visible { outline: 2px solid #ff857a; outline-offset: 5px; }
.wereld-balk { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 4vw; border-bottom: 1px solid #ffffff10; }
.wereld-terug, .wereld-pauze { color: #c8d0db; background: #ffffff05; border: 1px solid #ffffff1c; border-radius: 30px; padding: 10px 16px; font-size: 12px !important; }
.wereld-terug:hover, .wereld-pauze:hover { background: #ffffff10; }
.wereld-logo { font-size: 11px; letter-spacing: .12em; font-weight: 700; }
.wereld-logo span { color: #768597; font-size: 9px; font-weight: 400; }
.wereld-intro { padding: 30px 4vw 0; pointer-events: none; }
.wereld-eyebrow { color: #f08074; font-size: 9px; letter-spacing: .19em; font-weight: 600; }
.wereld-intro h2 { font-family: Outfit,Inter,sans-serif; font-size: clamp(32px,4vw,54px); font-weight: 500; letter-spacing: -.045em; margin: 8px 0; }
.wereld-intro h2 span { color: #ff7567; }
.wereld-intro > p:last-child { font-size: 13px; color: #8d9aab; margin: 0; }
.wereld-inhoud { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 18px; padding: 0 4vw 24px; flex: 1; min-height: 0; }
.wereld-toneel { min-width: 0; position: relative; display: flex; flex-direction: column; min-height: 450px; }
.wereld-bol { position: relative; min-height: 380px; flex: 1; }
.wereld-bol canvas { width: 100%; height: 100%; position: absolute; inset: 0; display: block; touch-action: none; cursor: grab; }
.wereld-bol canvas:active { cursor: grabbing; }
.wereld-punten, .wereld-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wereld-punt { position: absolute; padding: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid #ff9a7840; border-radius: 50%; background: #ff775c0c; color: #ffc3a6; pointer-events: auto; transition: opacity .6s; }
.wereld-punt::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #ffc2a3; box-shadow: 0 0 14px #ff7b50; }
.wereld-punt:hover { background: #ff967433; border-color: #ffc2a3; }
.wereld-label { position: absolute; width: 208px; border: 1px solid #94b0c52e; border-left: 2px solid #ff8c6b; border-radius: 3px 12px 12px 3px; text-align: left; padding: 11px 13px; background: linear-gradient(125deg,#1d3043dc,#101a2be0); backdrop-filter: blur(16px); box-shadow: 0 8px 28px #0005; color: #eaf0f6; pointer-events: auto; transition: opacity .8s; }
.wereld-label small { display: block; color: #f7a08b; font-size: 9px; letter-spacing: .07em; margin-bottom: 6px; }
.wereld-label strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; font-weight: 500; line-height: 1.5; }
.wereld-label:hover { border-color: #ff9775; background: #243a50ed; }
.wereld-zoom { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 40px; padding: 12px 0; border: 1px solid #ffffff1c; border-radius: 24px; background: #101a2bc9; backdrop-filter: blur(12px); color: #cdd8e4; font-size: 16px; }
.wereld-zoom input { writing-mode: vertical-lr; direction: rtl; width: 32px; height: clamp(220px, 32dvh, 320px); margin: 0; padding: 0; accent-color: #ff927b; cursor: ns-resize; touch-action: none; }
.wereld-zoom input:focus-visible { outline: 2px solid #ff857a; outline-offset: 3px; border-radius: 12px; }
.wereld-zij { align-self: stretch; margin-top: 20px; border: 1px solid #a4b8cf1f; border-radius: 18px; background: linear-gradient(155deg,#24324759,#10182788); backdrop-filter: blur(12px); padding: 22px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 260px); }
.wereld-zij-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wereld-dekking { font-size: 10px; color: #9eafbd; }
.wereld-keuze { margin-top: 18px; color: #a7b6c4; font-size: 10px; }
.wereld-keuze select { display: block; width: 100%; margin-top: 7px; padding: 10px; color: #e3ebf5; background: #0b1523; border: 1px solid #ffffff22; border-radius: 8px; font-size: 12px; }
.wereld-status { color: #8696a9; font-size: 11px; line-height: 1.5; margin: 13px 0; }
.wereld-lijst { overflow-y: auto; min-height: 80px; flex: 1; scrollbar-width: thin; scrollbar-color: #687b8e50 transparent; }
.wereld-verhaal { display: block; width: 100%; text-align: left; padding: 14px 0; color: #d8e2ed; border: 0; border-top: 1px solid #ffffff12; background: transparent; }
.wereld-verhaal:hover { color: #fff; }
.wereld-verhaal small { display: block; font-size: 9px; color: #8e9fb2; margin-bottom: 6px; }
.wereld-verhaal strong { font-size: 12px; font-weight: 500; line-height: 1.55; }
.wereld-uitleg { border-top: 1px solid #ffffff12; margin-top: 12px; padding-top: 13px; color: #8e9fb2; font-size: 10px; line-height: 1.65; }
.wereld-uitleg summary { cursor: pointer; }
.wereld-uitleg p { margin: 8px 0; }
.wereld-uitleg a { color: #b2c5d8; }
.wereld-opnieuw { border: 1px solid #ff997855; background: #ff997811; color: #f8c2b4; padding: 10px; border-radius: 8px; }
.wereld-artikel { width: min(760px,calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 64px); margin: auto; border: 1px solid #d7e9ff38; border-radius: 23px; background: linear-gradient(135deg,#243348ee,#101827f2); backdrop-filter: blur(30px); box-shadow: 0 30px 100px #0009,inset 0 1px #ffffff20; }
.wereld-artikel[open] { display: flex; flex-direction: column; }
.wereld-artikel::backdrop { background: #02071390; backdrop-filter: blur(5px); }
.wereld-artikel-balk { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #ffffff16; color: #93a6bb; font-size: 9px; letter-spacing: .14em; flex: 0 0 auto; }
.wereld-artikel-sluit { border: 1px solid #ffffff26; border-radius: 50%; width: 36px; height: 36px; background: #ffffff08; color: #edf3fa; font-size: 25px !important; line-height: 1; }
.wereld-artikel-scroll { padding: 28px 38px 38px; overflow-y: auto; overscroll-behavior: contain; }
.wereld-artikel-meta { color: #efa491; font-size: 11px; margin: 0 0 15px; }
.wereld-artikel h2 { font-family: Outfit,Inter,sans-serif; font-weight: 500; font-size: clamp(24px,3.2vw,38px); letter-spacing: -.025em; line-height: 1.18; margin: 0 0 25px; }
.wereld-artikel-tekst { font-size: 15px; line-height: 1.85; color: #d0dbe7; }
.wereld-artikel-tekst p { margin: 0 0 18px; }
.wereld-artikel-tekst ul { padding: 18px 18px 18px 35px; background: #ffffff05; border-radius: 12px; margin-bottom: 24px; }
.wereld-artikel-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #ffffff20; }
.wereld-artikel-links a { color: #ffb6a5; font-size: 12px; text-decoration: none; }
@media(max-width:1000px) { .wereld-inhoud { grid-template-columns: minmax(0,1fr) 285px; padding-inline: 20px; gap: 0; } .wereld-zij { padding: 17px; } .wereld-label { width: 175px; } }
@media(max-width:700px) {
 .wereld-balk { padding: 8px 16px; gap: 8px; } .wereld-logo { display: none; }
 .wereld-terug,.wereld-pauze { padding: 9px 11px; font-size: 10px !important; }
 .wereld-intro { padding: 22px 22px 0; } .wereld-intro h2 { font-size: 36px; }
 .wereld-intro > p:last-child { font-size: 11px; }
 .wereld-inhoud { display: block; padding: 0 14px 25px; }
 .wereld-toneel { height: 400px; min-height: 0; } .wereld-bol { min-height: 0; }
 .wereld-zij { margin-top: 15px; max-height: 460px; }
 .wereld-label { width: 160px; padding: 9px 11px; } .wereld-label strong { font-size: 10px; }
 .wereld-artikel { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 18px; }
 .wereld-artikel-scroll { padding: 22px; } .wereld-artikel-balk { padding: 12px 18px; }
 .wereld-artikel-tekst { font-size: 14px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; } .wereld-label,.wereld-punt,body > .hero,body > main,body > .balk { transition: none; } }
