/* Gegenereerd door site/tools/port_prototypes.py uit design/prototypes/v2-zaal/index.html.
   Niet met de hand wijzigen: pas het prototype of het portscript aan. */
:root{
  --blue:#009AD7; --orange:#EF9221; --green:#5ED79B; --red:#FF5A4E;
  --bg:#02060A; --bg-2:#07121B; --line:rgba(150,205,255,.16);
  --ink:#ECF1F4; --ink-2:#A9B7C1; --ink-3:#7F8E99;
  --holo:#8FD8FF;
  --f-display:"Instrument Serif","Times New Roman",serif;
  --f-text:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --m:56px; --e:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
/* Deze scène is altijd donker (studio); ook bij een licht systeemthema. */
@media (prefers-color-scheme: light){ :root:not([data-theme="light"]){ --bg:#02060A; } }
:root[data-theme="dark"]{ --bg:#02060A; }
@media (max-width:1099px){ :root{ --m:32px; } }
@media (max-width:699px){ :root{ --m:16px; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.55 var(--f-text); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono{ font:500 12px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; }

/* ---------- Stage layers ---------- */
#poster{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 44%, rgba(210,240,255,.95) 0 2px, rgba(0,154,215,.55) 5px, rgba(0,154,215,.12) 26px, transparent 70px),
    radial-gradient(ellipse at 50% 44%, rgba(0,154,215,.10), transparent 55%), var(--bg);
  transition:opacity 1.2s var(--e); }
#poster.gone{ opacity:0; }
#gl{ position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; z-index:1; display:block; opacity:0; transition:opacity 1.4s var(--e); }
#gl.on{ opacity:1; }
#fallback{ position:fixed; inset:0; z-index:1; display:none; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 35%, #06243A 0%, var(--bg) 70%); }
#fallback svg{ width:min(1200px, 100vw); height:auto; max-height:92vh; }
@media (min-width:761px){ #fallback{ justify-content:flex-end; padding-right:5vw; } #fallback svg{ width:min(1100px, 70vw); } }
body.no-gl #fallback{ display:flex; }
body.no-gl #gl, body.no-gl #poster{ display:none; }
.vignette{ position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }

/* ---------- Top bar ---------- */
.counter{ position:fixed; z-index:20; right:var(--m); top:calc(50% - 150px); color:var(--ink-3); }
.counter b{ color:var(--ink); font-weight:500; }

.chapters{ position:fixed; z-index:20; right:var(--m); top:50%; transform:translateY(-50%); }
.chapters ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.chapters a{ display:flex; align-items:center; justify-content:flex-end; gap:12px; text-decoration:none; color:var(--ink-3); padding:6px 0; }
.chapters a .t{ opacity:0; transform:translateX(6px); transition:all .4s var(--e); }
.chapters a .d{ width:22px; height:1px; background:currentColor; transition:all .4s var(--e); }
.chapters a:hover .t, .chapters a:focus-visible .t, .chapters a[aria-current="step"] .t{ opacity:1; transform:none; }
.chapters a[aria-current="step"]{ color:var(--ink); }
.chapters a[aria-current="step"] .d{ width:40px; background:var(--blue); box-shadow:0 0 12px var(--blue); }

/* ---------- Chapters ---------- */
.zr-main{ position:relative; z-index:10; }
.ch{ position:relative; height:250vh; }
.ch#punt{ height:230vh; }
.ch#vergelijk, .ch#collectie{ height:330vh; }
.ch#pia{ height:200vh; }
/* Compacte kaders aan de rand: de zaal en de lucht vullen het beeld */
.stick{ position:sticky; top:0; height:100vh; height:100svh; display:grid; align-content:end; justify-content:start; padding:96px calc(var(--m) + 64px) 32px var(--m); pointer-events:none; }
.panel{ pointer-events:auto; width:min(372px, 100%); }
.panel h1, .panel h2{ font-family:var(--f-display); font-weight:400; letter-spacing:-.01em; margin:8px 0 8px; }
.panel h1{ font-size:clamp(34px, 4.6vw, 76px); line-height:.94; }
.panel h1 em, .panel h2 em{ font-style:italic; color:var(--holo); }
.panel h2{ font-size:clamp(24px, 2.5vw, 40px); line-height:1.02; }
.panel p{ color:var(--ink-2); margin:0 0 10px; font-size:14.5px; line-height:1.5; max-width:40ch; }
.kicker{ color:var(--holo); display:flex; gap:10px; align-items:center; font-size:12px; }
.kicker::before{ content:""; width:22px; height:1px; background:currentColor; box-shadow:0 0 8px currentColor; }
.src, .panel p.src{ font:400 12px/1.45 var(--f-mono); color:var(--ink-3); letter-spacing:.03em; margin:8px 0 0; }
/* specs: label en waarde op een regel, bron klein erachter */
.spec{ list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--line); }
.spec li{ display:flex; align-items:baseline; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.3; color:var(--ink-2); }
.spec .k{ flex:1; min-width:0; }
.spec .v{ color:var(--ink); font-weight:500; white-space:nowrap; }
.spec .s{ font:400 12px/1 var(--f-mono); color:var(--ink-3); white-space:nowrap; min-width:3.6em; text-align:right; }
/* Scroll-aanwijzing: een kanaaltje waarin koele lucht omlaag stroomt, tekst die langzaam oplicht (2,8 s, geen flitsen) */
.hint{ position:fixed; right:clamp(18px,3.5vw,56px); bottom:clamp(20px,4.5vh,44px); z-index:30; display:flex; flex-direction:row; gap:14px; align-items:center; text-align:right; margin:0; max-width:15em; font-size:13.5px; line-height:1.35; letter-spacing:.16em; color:#E6F6FF; opacity:0; transform:translateY(12px); transition:opacity 1.2s var(--e), transform 1.2s var(--e); pointer-events:none; }
.hint.on{ opacity:1; transform:none; }
.hint.on.gone{ opacity:0; transform:translateY(-8px); transition-duration:.7s; }
.hint .ht{ animation:hintGlow 2.8s ease-in-out infinite; }
@keyframes hintGlow{ 0%,100%{ color:#AEE2FA; text-shadow:0 0 6px rgba(0,154,215,.35); } 50%{ color:#F2FAFF; text-shadow:0 0 12px rgba(0,154,215,.95), 0 0 28px rgba(0,154,215,.5); } }
.hint .cue{ flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; }
.hint .tube{ position:relative; width:18px; height:54px; border-radius:9px; border:1px solid rgba(143,216,255,.55); box-shadow:inset 0 0 10px rgba(0,154,215,.35), 0 0 14px rgba(0,154,215,.3); overflow:hidden; }
.hint .tube i{ position:absolute; left:50%; top:-12px; width:3px; height:12px; margin-left:-1.5px; border-radius:2px; background:linear-gradient(rgba(143,216,255,0), #BFE9FF); box-shadow:0 0 6px #009AD7; animation:hintFall 1.8s cubic-bezier(.45,0,.75,1) infinite; }
.hint .tube i:nth-child(2){ left:32%; animation-delay:.6s; }
.hint .tube i:nth-child(3){ left:68%; animation-delay:1.2s; }
@keyframes hintFall{ 0%{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translateY(66px); opacity:0; } }
.hint .chev{ width:9px; height:9px; border-right:1.5px solid #8FD8FF; border-bottom:1.5px solid #8FD8FF; transform:rotate(45deg); filter:drop-shadow(0 0 4px #009AD7); animation:hintBob 2.8s ease-in-out infinite; }
@keyframes hintBob{ 0%,100%{ transform:translateY(-2px) rotate(45deg); opacity:.6; } 50%{ transform:translateY(3px) rotate(45deg); opacity:1; } }
@media (max-width:760px), (max-height:620px){ .hint{ position:static; max-width:none; text-align:left; margin-top:18px; gap:12px; font-size:13px; } .hint .tube{ height:42px; } }
.hint .ht{ order:-1; }
@media (prefers-reduced-motion: reduce){
  .hint{ opacity:1; transform:none; }
  .hint .ht{ color:#F2FAFF; text-shadow:0 0 10px rgba(0,154,215,.8); }
  .hint .tube i{ top:10px; opacity:1; } .hint .tube i:nth-child(2){ top:24px; } .hint .tube i:nth-child(3){ top:38px; }
}
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
#punt .panel{ width:min(560px, 100%); }
.motto{ font:italic 400 clamp(18px, 1.5vw, 22px)/1.15 var(--f-display) !important; color:var(--holo) !important; margin:12px 0 0 !important; padding-top:10px; border-top:1px solid var(--line); }

.glass{ background:linear-gradient(180deg, rgba(6,18,28,.58), rgba(3,10,17,.5)); border:1px solid rgba(143,216,255,.13); border-radius:14px; padding:14px 16px 12px; backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); box-shadow:0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04); }

/* Toggle */
.switch{ display:grid; grid-template-columns:1fr 1fr; position:relative; width:100%; margin:8px 0 10px; padding:4px; border-radius:999px; border:1px solid rgba(143,216,255,.22); background:rgba(2,10,16,.7); cursor:pointer; font:500 12px/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.switch .s1{ order:-1; }
.switch span{ position:relative; z-index:1; padding:10px 12px; text-align:center; transition:color .4s var(--e); }
.switch::before{ content:""; position:absolute; top:4px; bottom:4px; left:50%; width:calc(50% - 4px); border-radius:999px; background:rgba(255,90,78,.18); border:1px solid rgba(255,90,78,.55); box-shadow:0 0 24px rgba(255,90,78,.25); transition:all .55s var(--e); }
.switch[aria-checked="true"]::before{ left:4px; background:rgba(94,215,155,.16); border-color:rgba(94,215,155,.6); box-shadow:0 0 24px rgba(94,215,155,.25); }
.switch span{ color:var(--ink-2); } /* geen opacity: contrast >= 4,5:1 (a11y #4, 30-09-2026) */
.switch span::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; border:1px solid currentColor; vertical-align:1px; transition:all .4s var(--e); }
.switch[aria-checked="false"] .s0{ color:#FFB09E; opacity:1; font-weight:600; text-shadow:0 0 12px rgba(255,90,78,.55); }
.switch[aria-checked="true"] .s1{ color:#9BF0C4; opacity:1; font-weight:600; text-shadow:0 0 12px rgba(94,215,155,.55); }
.switch[aria-checked="false"] .s0::before{ background:#FF5A4E; border-color:#FF5A4E; box-shadow:0 0 8px #FF5A4E; }
.switch[aria-checked="true"] .s1::before{ background:#5ED79B; border-color:#5ED79B; box-shadow:0 0 8px #5ED79B; }
.switch:focus-visible{ outline:2px solid var(--holo); outline-offset:3px; }
.switch[aria-checked="false"]{ border-color:rgba(255,90,78,.4); }
.switch[aria-checked="true"]{ border-color:rgba(94,215,155,.45); }
.switch[aria-checked="true"]::before{ background:linear-gradient(90deg, rgba(0,154,215,.22), rgba(94,215,155,.2)); }
.switch[aria-checked="false"]::before{ background:linear-gradient(90deg, rgba(255,90,78,.24), rgba(239,146,33,.16)); }
.state{ min-height:3em; }
.state p{ margin:0; }
.keys{ display:flex; gap:14px; flex-wrap:wrap; margin:8px 0 0; color:var(--ink-3); font:400 12px/1.4 var(--f-mono); }
.keys span{ display:inline-flex; gap:6px; align-items:center; }
.keys i{ width:8px; height:8px; border-radius:50%; display:inline-block; }

/* Legenda: klein en los, rechtsonder (desktop) of bovenaan (mobiel); nooit over een kader */
.legend{ position:fixed; z-index:15; right:calc(var(--m) + 64px); bottom:30px; width:230px; opacity:0; transform:translateY(8px); transition:all .6s var(--e); pointer-events:none; }
.legend.on{ opacity:1; transform:none; }
.legend .bar{ height:3px; border-radius:3px; background:linear-gradient(90deg, var(--blue), #7FC6E0 45%, var(--orange)); box-shadow:0 0 14px rgba(0,154,215,.5); margin:6px 0 0; }
.legend .row{ display:flex; justify-content:space-between; color:var(--ink-2); font:400 12px/1.2 var(--f-mono); letter-spacing:.04em; }

/* 3D labels */
.labels{ position:fixed; inset:0; z-index:5; pointer-events:none; }
.lab{ position:absolute; left:0; top:0; color:var(--ink); font:500 12px/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; opacity:0; transition:opacity .5s; will-change:transform; }
.lab::before{ content:""; position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; border:1px solid var(--holo); box-shadow:0 0 10px var(--holo); }
.lab span{ position:absolute; left:14px; bottom:10px; padding-left:10px; border-left:1px solid rgba(143,216,255,.5); }
.lab small{ display:block; color:var(--ink-3); font-size:12px; letter-spacing:.06em; text-transform:none; font-weight:400; }   /* QA 02-10: min. 12 px */
.lab.ex::before{ border-color:var(--orange); box-shadow:0 0 10px var(--orange); }

/* Collectie: twee zaalconcepten; de zaal zelf is de viewer (slepen/pijltjes draaien de zaal) */
#collectie .panel{ position:relative; z-index:1; width:min(360px, 100%); }
#collectie .panel h2{ font-size:clamp(22px, 2vw, 30px); }
.viewer{ position:absolute; inset:0; pointer-events:auto; cursor:grab; touch-action:pan-y; outline-offset:-10px; border-radius:18px; }
.viewer:active{ cursor:grabbing; }
.viewer .vh{ position:absolute; right:calc(var(--m) + 64px); bottom:92px; color:var(--ink-3); font-size:12px; }
.concepts{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:8px 0 8px; padding:4px; border-radius:14px; border:1px solid rgba(143,216,255,.22); background:rgba(2,10,16,.7); }
.concepts button{ appearance:none; border:1px solid transparent; background:none; border-radius:10px; padding:7px 8px 6px; text-align:left; cursor:pointer; color:var(--ink-2); font:500 12px/1.25 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; transition:all .45s var(--e); } /* geen opacity: contrast (a11y #5) */
.concepts button b{ display:block; font:500 12px/1.2 var(--f-mono); letter-spacing:.1em; color:var(--ink-2); margin-top:2px; }
.concepts button[aria-checked="true"]{ opacity:1; color:var(--holo); border-color:rgba(0,154,215,.6); background:linear-gradient(90deg, rgba(0,154,215,.22), rgba(94,215,155,.16)); box-shadow:0 0 22px rgba(0,154,215,.25); }
.concepts button[aria-checked="true"] b{ color:#BFF3FF; }
.cspec{ list-style:none; margin:6px 0 0; padding:0; border-top:1px solid var(--line); }
.cspec li{ display:flex; align-items:baseline; gap:8px; padding:4px 0; border-bottom:1px solid var(--line); font-size:12.5px; line-height:1.3; color:var(--ink-2); }
.cspec li.t{ padding-top:7px; color:var(--ink); font:500 12px/1.2 var(--f-mono); letter-spacing:.08em; border-bottom:0; }
.cspec li.t small{ color:var(--ink-3); font-size:12px; font-weight:400; letter-spacing:.04em; text-transform:none; margin-left:6px; }
.cspec .k{ flex:1; min-width:0; }
.cspec .v{ color:var(--ink); font-weight:500; white-space:nowrap; }
.cspec .s{ font:400 12px/1 var(--f-mono); color:var(--ink-3); white-space:nowrap; text-align:right; }
.why{ font-size:13.5px !important; margin:0 0 4px !important; }

/* Pia: hologram en tekst als een compact blok linksonder */
.pia-block{ display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:end; width:min(520px, 100%); }
.pia-block .glass{ align-self:end; }
.holo{ position:relative; width:100%; aspect-ratio:4/5; border-radius:14px; overflow:hidden; isolation:isolate;
  background:#031019; box-shadow:0 0 0 1px rgba(143,216,255,.35), 0 0 44px rgba(0,154,215,.35), inset 0 0 30px rgba(0,154,215,.3);
  transform:perspective(900px) rotateY(9deg) rotateX(2deg); animation:float 7s ease-in-out infinite; }
@keyframes float{ 50%{ transform:perspective(900px) rotateY(6deg) rotateX(-1deg) translateY(-6px); } }
.holo img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.6) contrast(1.08) brightness(1.02) sepia(.25) hue-rotate(160deg); mix-blend-mode:screen; opacity:.92; }
.holo::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(143,216,255,.10) 0 1px, transparent 1px 3px); mix-blend-mode:screen; animation:scan 6s linear infinite; }
.holo::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, transparent 0 40%, rgba(143,216,255,.22) 50%, transparent 60%); background-size:100% 260%; animation:sweep 5.5s var(--e) infinite; }
@keyframes scan{ to{ background-position:0 60px; } }
@keyframes sweep{ 0%{ background-position:0 120%; } 100%{ background-position:0 -140%; } }
.holo .edge{ position:absolute; inset:0; z-index:4; border-radius:14px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(143,216,255,.5), inset 0 0 24px rgba(0,154,215,.35); }
.holo .tag{ position:absolute; z-index:5; left:10px; right:10px; bottom:8px; display:flex; justify-content:space-between; color:var(--holo); text-shadow:0 0 8px rgba(0,154,215,.8); font-size:12px; }
.holo .tag .off::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ink-3); margin-right:6px; vertical-align:1px; }
.holo-base{ width:80%; height:18px; margin:-4px auto 0; border-radius:50%; background:radial-gradient(ellipse, rgba(0,154,215,.55), transparent 70%); filter:blur(4px); }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:999px; border:1px solid rgba(239,146,33,.6); color:#140A02; background:var(--orange); font:500 14px/1 var(--f-text); cursor:pointer; box-shadow:0 0 26px rgba(239,146,33,.35); transition:transform .3s var(--e), box-shadow .3s; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 0 40px rgba(239,146,33,.55); }
.note{ min-height:0; font-size:12.5px; color:var(--ink-3); margin:8px 0 0; }
.note:empty{ display:none; }


.stats{ position:fixed; z-index:30; right:12px; bottom:10px; font:400 12px/1.3 var(--f-mono); color:#8fd; background:rgba(0,0,0,.5); padding:6px 8px; border-radius:6px; display:none; white-space:pre; }
body.debug .stats{ display:block; }
body.debug .legend{ bottom:64px; }

/* ---------- Small screens ---------- */
@media (max-width:760px){
  .chapters, .counter{ display:none; }
  /* onderrand 72px: de chatknop (rechtsonder, ca. 60px hoog) staat anders over de laatste regel van het kader */
  .stick{ padding:84px var(--m) calc(72px + env(safe-area-inset-bottom)) var(--m); justify-content:stretch; }
  .panel{ width:100%; }
  /* Compacte kaders (web-designer 06-10-2026, akkoord Ruud 05-10): kleiner, smaller en doorzichtiger,
     zodat de zaal erdoorheen zichtbaar blijft. Alles blijft >= 12px. Contrastmetingen: design/prototypes/homepage-mobiel/notitie.md */
  #zaal .panel, #leefzone .panel, #vergelijk .panel, #collectie .panel{ width:min(100%, 312px); }
  .panel h1, .panel h2{ margin:6px 0 6px; }
  .panel p{ font-size:13px; line-height:1.45; margin:0 0 8px; }
  .panel h1{ font-size:clamp(28px, 8vw, 40px); }
  .panel h2{ font-size:clamp(20px, 5.8vw, 26px); }
  .glass{ padding:10px 12px 10px; border-radius:12px; background:linear-gradient(180deg, rgba(6,18,28,.50), rgba(3,10,17,.44)); backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15); box-shadow:0 12px 36px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04); }
  /* Lichtere inkt op het doorzichtige glas: AA gemeten tegen de gemiddelde achtergrond per hoofdstuk */
  .glass p, .glass .spec li, .glass .cspec li{ color:#B9C6CF; }   /* schakelaars houden hun eigen (donkerdere) vlak en kleuren */
  .glass .src, .glass p.src, .glass .spec .s, .glass .cspec .s, .glass .cspec li.t small, .glass .note, .glass .pia-status{ color:#A2AFB9 !important; }
  .glass .spec .v, .glass .cspec .v, .glass .cspec li.t, .glass .closing{ color:var(--ink); }
  .spec{ margin-top:8px; } .spec li{ font-size:12.5px; padding:5px 0; }
  .cspec li{ font-size:12px; }
  .switch{ margin:6px 0 8px; } .switch span{ padding:8px 10px; }
  .state{ min-height:0; }
  .concepts{ margin:6px 0 6px; } .concepts button{ padding:6px 7px 5px; }
  .why{ font-size:13px !important; }
  .btn{ padding:10px 15px; font-size:13px; }
  #punt .brandline{ font-size:13px !important; margin-top:12px !important; }
  #punt .zr-actions{ margin-top:12px; }
  .motto{ font-size:17px !important; margin-top:8px !important; padding-top:8px; }
  /* Pia staat in het lichtste deel van de zaal (gemeten L 0,09): iets dekkender glas */
  #pia .glass{ background:linear-gradient(180deg, rgba(6,18,28,.62), rgba(3,10,17,.56)); }
  /* "Meer"-knop: lange delen (specs, bronregels, privacytekst) staan ingeklapt; de knop is een echte button (aria-expanded) */
  .panel .more{ display:none; }
  .panel.is-more .more{ display:block; }
  .more-btn{ display:flex; align-items:center; gap:7px; margin:2px 0 0; padding:7px 0; min-height:24px; background:none; border:0; color:var(--holo); font:500 12px/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
  .more-btn::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--e); }
  .more-btn[aria-expanded="true"]::after{ transform:translateY(2px) rotate(225deg); }
  .more-btn:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
  #collectie .panel h2{ font-size:21px; }
  #collectie .cspec li.s2{ display:none; }
  .viewer .vh{ display:none; }
  .pia-block{ grid-template-columns:84px 1fr; gap:10px; width:100%; }
  .legend{ right:var(--m); left:var(--m); bottom:auto; top:58px; width:auto; }
  body.debug .legend{ bottom:auto; }
  .labels{ display:none; }
  /* Compacte mobiele reis (borging 01-10-2026, B3): kortere pin-afstanden en overlappende secties,
     zodat het volgende kader al onderin binnenschuift terwijl de scene bovenin staat. */
  .ch{ height:150vh; }
  .ch#punt{ height:140vh; }
  .ch#vergelijk{ height:180vh; }
  .ch#collectie{ height:190vh; }
  .ch#pia{ height:140vh; }
  .ch + .ch{ margin-top:-40vh; }
  .panel:focus-within{ opacity:1 !important; pointer-events:auto !important; }
  /* LCP (B2): de scroll-aanwijzing hoort bij de eerste paint, niet 2,2 s later */
  .hint{ opacity:1; transform:none; transition:opacity .6s var(--e); margin-top:12px; font-size:12px; }
  .hint.on.gone, .hint.gone{ opacity:0; transform:none; }
}
/* Desktop: alles staat uitgeklapt, de meer-knop bestaat daar niet */
@media (min-width:761px){ .more-btn{ display:none; } }
@media (max-height:620px) and (max-width:760px){ .legend{ display:none; } }
@media (max-height:520px){
  .stick{ padding-top:64px; padding-bottom:12px; }
  #collectie .panel .why, #collectie .src{ display:none; }
  .panel h2{ font-size:24px; }
  .pia-block{ grid-template-columns:80px 1fr; }
  .holo .tag{ display:none; }
}

/* Reduced motion: rustig en statisch */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .holo{ transform:none; }
}

/* ---------- WordPress-aanvullingen (peek-core) ---------- */
.zr-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; }
.zr-actions .btn{ text-decoration:none; }
.btn--ghost{ background:rgba(2,10,16,.55); color:var(--ink); border-color:rgba(143,216,255,.3); box-shadow:none; }
.btn--ghost:hover{ box-shadow:0 0 24px rgba(0,154,215,.3); }
.brandline{ font-size:12.5px !important; color:var(--ink-3) !important; margin-top:10px !important; }
/* hero zonder inleidende alinea (Ruud 29-09-2026): de merkregel is de enige lopende tekst onder de H1 */
#punt .brandline{ font-size:13.5px !important; color:var(--ink-2) !important; margin-top:18px !important; }
#punt .zr-actions{ margin-top:18px; }
.zr-link{ display:inline-block; margin-top:10px; font:500 12px/1.3 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--holo); text-decoration:none; }
.zr-link:hover{ text-decoration:underline; }
.closing{ font-size:13px !important; color:var(--ink) !important; margin-top:8px !important; }
.pia-status{ font-size:12px !important; color:var(--ink-3) !important; }
.peek-tbc{ font:400 12px/1.4 var(--f-mono); color:var(--ink-3); letter-spacing:.02em; }
/* VR-link (vr-link.js): alleen ingevoegd bij immersive-vr; regel onder de hero. */
.zr-vr{ display:inline-block; margin-top:14px; font:500 13px/1.4 var(--f-mono); letter-spacing:.04em; color:var(--holo); text-decoration:underline; text-underline-offset:3px; }
.zr-vr:hover{ color:#fff; }
.zr-vr:focus-visible{ outline:2px solid var(--holo); outline-offset:3px; }

.panel .peek-simnote a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }