/* Gegenereerd door site/tools/port_prototypes.py uit design/prototypes/v2-adem/index.html.
   Niet met de hand wijzigen: pas het prototype of het portscript aan. */
:root{
  --c-studio:#040506; --c-ink:#ECEBE7; --c-ink-2:#A4A7AA; --c-ink-3:#7E8286; --c-line:rgba(236,235,231,.14);
  --c-blue:#009AD7; --c-orange:#EF9221; --c-focus:#EF9221;
  --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;
  --fs-hero:clamp(58px, 10.2vw, 176px);
  --margin:56px; --e-adem:cubic-bezier(0.22,1,0.36,1);
  color-scheme:dark;
}
@media (max-width:1099px){ :root{ --margin:32px; } }
@media (max-width:699px){ :root{ --margin:16px; --fs-hero:clamp(46px, 15.5vw, 84px); } }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--c-studio); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--c-studio); color:var(--c-ink); font:400 16px/1.55 var(--f-text); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--c-focus); outline-offset:3px; border-radius:4px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.label{ font:500 12px/1.3 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); }

/* ---------- Stage ---------- */
#gl{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; touch-action:pan-y; }
.fb{ position:fixed; inset:0; z-index:0; display:none; overflow:hidden; background:#040506; }
.fb::before{ content:""; position:absolute; left:50%; top:52%; width:130vmax; height:130vmax; transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(170,225,255,.55), rgba(0,154,215,.35) 9%, rgba(0,154,215,.08) 34%, transparent 62%),
    repeating-conic-gradient(from 10deg, rgba(0,154,215,.20) 0 4deg, transparent 6deg 15deg),
    radial-gradient(closest-side, transparent 30%, rgba(239,146,33,.12) 55%, transparent 75%);
  -webkit-mask:radial-gradient(closest-side, #000 20%, transparent 70%); mask:radial-gradient(closest-side, #000 20%, transparent 70%);
  filter:blur(6px); }
.fb::after{ content:""; position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.no-gl .fb{ display:block; }
html.no-gl #gl{ display:none; }

/* ---------- Header ---------- */
.rs-tools{ position:fixed; z-index:10; top:calc(76px + env(safe-area-inset-top)); right:var(--margin); display:flex; gap:10px; align-items:center; }
.chip{ appearance:none; border:1px solid var(--c-line); background:rgba(8,10,12,.42); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:999px; height:40px; padding:0 16px 0 12px; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font:500 13px/1 var(--f-text); letter-spacing:.01em; transition:border-color .3s, background .3s; }
.chip:hover{ border-color:rgba(236,235,231,.34); }
.chip .ico{ width:18px; height:18px; flex:none; }
.chip[aria-pressed="true"]{ border-color:rgba(239,146,33,.6); background:rgba(40,22,6,.5); }
.pia-mini{ display:none; }


/* ---------- Scenes ---------- */
.rs-main{ position:relative; z-index:2; pointer-events:none; }
.scene{ position:relative; height:100vh; height:100svh; }
.scene > *{ pointer-events:auto; }
.head-wrap{ position:absolute; left:var(--margin); top:clamp(92px, 15vh, 170px); max-width:min(62vw, 1040px); }
.kicker{ margin:0 0 18px; display:flex; gap:12px; align-items:center; }
.kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-blue); box-shadow:0 0 12px var(--c-blue); }
.head{ margin:0; font:400 var(--fs-hero)/.88 var(--f-display); letter-spacing:-.022em; }
.head .line{ display:block; width:max-content; white-space:nowrap; }
.head em{ font-style:italic; }
html.sim .head{ color:transparent; }      /* the visible headline lives in the simulation */
html.sim .head ::selection{ color:var(--c-ink); }

.foot{ position:absolute; left:var(--margin); bottom:calc(24px + env(safe-area-inset-bottom)); width:min(248px, calc(100vw - 2*var(--margin))); display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.lede{ margin:0; color:var(--c-ink-2); font-size:12.5px; line-height:1.45; }
.lede strong{ color:var(--c-ink); font-weight:500; }
.lede small{ font-size:12px; }   /* borging K1: minimaal 12 px */
.scene--top .foot{ top:clamp(84px, 13vh, 150px); bottom:auto; left:auto; right:calc(var(--margin) + 150px); }

.card{ border:1px solid var(--c-line); border-radius:10px; padding:7px 9px 5px;
  background:linear-gradient(180deg, rgba(14,17,20,.58), rgba(8,10,12,.46)); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); }
.card header{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }
.card .code{ font:500 12.5px/1 var(--f-mono); letter-spacing:.03em; }
.card .code i{ font-style:normal; color:var(--c-blue); }
.card header .label{ font-size:12px; letter-spacing:.1em; }
.card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font:400 12px/1.3 var(--f-mono); }
.card dt{ color:var(--c-ink-3); white-space:nowrap; }
.card dd{ margin:0; text-align:right; color:var(--c-ink); white-space:nowrap; }
.card dd small{ color:var(--c-ink-3); font-size:12px; margin-left:4px; }
.card .src{ margin:4px 0 0; padding-top:4px; border-top:1px solid var(--c-line); font:400 12px/1.4 var(--f-mono); color:var(--c-ink-3); letter-spacing:.04em; }
.card .src summary{ cursor:pointer; list-style:none; text-transform:uppercase; letter-spacing:.12em; display:inline-flex; gap:6px; align-items:center; }
.card .src summary::-webkit-details-marker{ display:none; }
.card .src summary::after{ content:"+"; font-size:12px; }
.card .src[open] summary::after{ content:"−"; }
.card .src span{ display:block; margin-top:3px; }

.view{ display:inline-flex; align-self:flex-start; border:1px solid var(--c-line); border-radius:999px; padding:2px; background:rgba(8,10,12,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.view button{ appearance:none; border:0; background:none; border-radius:999px; min-height:28px; display:inline-flex; align-items:center; padding:0 10px;   /* QA 02-10: doelgrootte >= 24 px (2.5.8) */ font:500 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); cursor:pointer; transition:background .3s, color .3s; }
.view button[aria-pressed="true"]{ background:var(--c-ink); color:#080a0c; }
.room{ position:fixed; z-index:3; right:calc(var(--margin) + 170px); width:1px; pointer-events:none; opacity:0; transition:opacity .2s; }
.room__line{ position:absolute; inset:0; border-left:1px dashed rgba(236,235,231,.28); }
.room__line::before, .room__line::after{ content:""; position:absolute; left:-5px; width:9px; border-top:1px solid rgba(236,235,231,.45); }
.room__line::before{ top:0; } .room__line::after{ bottom:0; }
.room__lbl{ position:absolute; top:50%; right:10px; text-align:right; transform:translateY(-50%); display:flex; flex-direction:column; gap:3px; white-space:nowrap; font:400 12px/1.3 var(--f-mono); letter-spacing:.06em; color:var(--c-ink-2); }
.room__lbl b{ font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--c-ink-3); font-size:12px; }
.room__lbl i{ font-style:normal; display:none; }
.room[data-code="ddn"] .ddn, .room[data-code="inv"] .inv{ display:block; }
.room__zone{ position:absolute; bottom:8px; right:10px; font:500 12px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap; }
@media (max-width:899px) and (orientation:portrait){ .room{ right:34px; }  }
.hint{ position:fixed; z-index:8; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); margin:0; white-space:nowrap;
  font:500 12px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--c-ink-3); transition:opacity 1.2s; pointer-events:none; }
.hint.gone{ opacity:0; }
@media (max-width:1279px){ .hint{ display:none; } }
.status{ position:fixed; z-index:11; top:calc(72px + env(safe-area-inset-top)); right:var(--margin); max-width:320px; margin:0; text-align:right; font-size:13px; color:var(--c-ink-2); pointer-events:none; }

/* ---------- Pia ---------- */
.pia{ position:fixed; z-index:9; right:var(--margin); bottom:calc(24px + env(safe-area-inset-bottom)); border-radius:999px; width:max-content; max-width:calc(100vw - 2*var(--margin));
  border:1px solid var(--c-line); border-radius:16px; background:rgba(8,10,12,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); overflow:hidden; transition:width .6s var(--e-adem); }
.pia__row{ display:flex; gap:8px; align-items:center; padding:4px 4px 4px 4px; }
.pia__img{ width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:50% 20%; flex:none; }
.pia__who{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pia__who .label{ font-size:12px; display:block; }
.pia__who .name{ font:400 21px/1 var(--f-display); display:block; margin:0 0 3px; }
.pia__btn{ appearance:none; border:0; background:var(--c-ink); color:#080a0c; border-radius:999px; height:28px; padding:0 11px; font:500 12px/1 var(--f-text); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.pia__btn .d{ width:7px; height:7px; border-radius:50%; background:var(--c-blue); box-shadow:0 0 0 0 rgba(0,154,215,.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(0,154,215,0); } 100%{ box-shadow:0 0 0 0 rgba(0,154,215,0); } }
@media (prefers-reduced-motion: reduce){ .pia__btn .d{ animation:none; } }
.pia__cap{ display:none; padding:0 16px 14px; }
.pia.on{ width:340px; border-radius:14px; }
.pia.on .pia__btn{ display:none; }
.pia.on .pia__cap{ display:block; }
.pia__text{ margin:0 0 10px; font:400 19px/1.28 var(--f-display); min-height:3.9em; }
.pia__text .w{ opacity:.22; transition:opacity .25s; }
.pia__text .w.said{ opacity:1; }
.pia__text .w.code{ color:#6fd0ff; font-family:var(--f-mono); font-size:.78em; letter-spacing:.02em; }
.pia__meta{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pia__meta .label{ font-size:12px; color:var(--c-ink-3); }
.pia__stop{ appearance:none; background:none; border:1px solid var(--c-line); border-radius:999px; height:28px; padding:0 12px; font:500 12px/1 var(--f-text); cursor:pointer; }
.voice{ display:flex; gap:3px; align-items:center; height:18px; }
.voice i{ width:3px; border-radius:2px; background:var(--c-blue); height:calc(3px + var(--v,0)*15px); transition:height .06s linear; }

/* ---------- Narrow screens ---------- */
@media (max-height:620px) and (orientation:landscape){
  .head-wrap{ top:76px; }
  .kicker{ margin-bottom:10px; }
  .lede{ display:none; }
  .foot{ bottom:14px; width:248px; }
  .scene--top .foot{ top:72px; }
  .pia{ bottom:16px; }
}
@media (max-width:899px) and (orientation:portrait){
  .head-wrap{ top:calc(80px + env(safe-area-inset-top)); max-width:calc(100vw - 2*var(--margin)); }
  .kicker{ margin-bottom:10px; }
  .foot, .scene--top .foot{ left:var(--margin); right:var(--margin); width:auto; top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); }
  .lede{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .card dl{ font-size:12px; }
  .pia{ left:var(--margin); right:var(--margin); width:auto; bottom:calc(12px + env(safe-area-inset-bottom)); display:none; }
  .pia.on{ display:block; width:auto; }
  .pia.on .pia__row{ display:none; }
  .pia.on .pia__cap{ padding-top:14px; }
  .pia__text{ font-size:18px; }
  .pia-mini{ display:inline-flex; padding:0 12px 0 4px; }
  .pia-mini img{ width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:50% 20%; }
}
.pat-pick select{ pointer-events:auto; font:500 12px/1 var(--f-mono); letter-spacing:.06em; color:var(--c-ink); background:rgba(10,12,14,.72); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 12px; max-width:280px; }

/* ---------- WordPress-aanvullingen (peek-core) ---------- */
.status{ top:calc(128px + env(safe-area-inset-top)); }
.peek-rs{ position:relative; }
.peek-rs #gl, .peek-rs .fb, .peek-rs .room, .peek-rs .hint, .peek-rs .status, .peek-rs .rs-tools, .peek-rs .pia{ transition:opacity .5s, visibility 0s; }
.peek-rs.rs-off #gl, .peek-rs.rs-off .fb, .peek-rs.rs-off .room, .peek-rs.rs-off .hint, .peek-rs.rs-off .status, .peek-rs.rs-off .rs-tools, .peek-rs.rs-off .pia{ opacity:0 !important; visibility:hidden; transition:opacity .5s, visibility 0s .5s; }
.rs-nick{ color:var(--c-ink-3); }
.rs-sub{ margin:14px 0 0; font:400 clamp(15px, 1.25vw, 19px)/1.3 var(--f-text); color:var(--c-ink-2); letter-spacing:.005em; }
.rs-family{ margin:6px 0 0; }
.rs-cap{ margin:0; color:var(--c-ink-3); font-size:12px; line-height:1.45; }
.rs-links{ display:flex; gap:14px; }
.rs-links a{ font:500 12px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; padding:6px 0; }
.rs-links a:hover{ color:var(--c-ink); }
.rs-note{ margin:0; font:400 12px/1.4 var(--f-mono); color:var(--c-ink-3); letter-spacing:.04em; }
a.pia{ text-decoration:none; color:inherit; }
.card .code{ white-space:nowrap; }
.pia-mini{ text-decoration:none; }
.peek-tbc{ font:400 12px/1.4 var(--f-mono); color:var(--c-ink-3); letter-spacing:.02em; font-style:normal; }
@media (max-width:899px) and (orientation:portrait){
  .rs-sub{ font-size:14px; margin-top:8px; } .rs-cap, .rs-note{ display:none; }
  .rs-tools{ top:calc(64px + env(safe-area-inset-top)); }
  .head-wrap{ top:calc(122px + env(safe-area-inset-top)); }
  .status{ top:calc(112px + env(safe-area-inset-top)); }
}

/* ---------- Kader (Ruud 30-09-2026): de luchtsimulatie is een benadering, een instrument naast de tekst ----------
   De simulatie staat in een eigen, rustig venster (.rs-frame) rechts van de tekstkolom (mobiel: volle breedte onder de
   lede). De hero zelf is de rustige studio; de titel is gewone, leesbare tekst. scene.js volgt de maat van het venster. */
.peek-rs--framed{ --fw:clamp(480px, 44vw, 640px); background:radial-gradient(70% 60% at 74% 48%, rgba(0,154,215,.06), transparent 70%), radial-gradient(50% 40% at 18% 20%, rgba(236,235,231,.03), transparent 70%), var(--c-studio); }
.peek-rs--framed .scene{ height:auto; min-height:100vh; min-height:100svh; box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1fr) var(--fw); grid-template-rows:auto 1fr;
  column-gap:clamp(28px, 4vw, 72px); row-gap:26px; align-items:start; padding:clamp(96px, 13vh, 150px) var(--margin) clamp(48px, 8vh, 96px); }
.peek-rs--framed .scene .head-wrap{ position:static; grid-column:1; grid-row:1; max-width:none; min-width:0; top:auto; }
.peek-rs--framed .head{ font-size:clamp(48px, 5.8vw, 116px); }
html.sim .peek-rs--framed .head{ color:var(--c-ink); }
.peek-rs--framed .head .line{ width:auto; white-space:normal; }
.peek-rs--framed .scene .foot{ position:static; grid-column:1; grid-row:2; width:auto; max-width:440px; top:auto; right:auto; bottom:auto; left:auto; gap:12px; }
.peek-rs--framed .lede{ font-size:14px; }
.rs-side{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.rs-side:empty{ display:none; }
.peek-rs--framed .rs-stage{ grid-column:2; grid-row:1 / span 2; align-self:center; display:flex; flex-direction:column; gap:10px; min-width:0; }
.rs-frame{ position:relative; width:100%; aspect-ratio:4 / 3; max-height:calc(100svh - 190px); border:1px solid var(--c-line); border-radius:18px; overflow:hidden; background:#040506; isolation:isolate;
  box-shadow:0 30px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.015) inset; touch-action:pan-y; }
.rs-frame #gl, .rs-frame .fb{ position:absolute; inset:0; width:100%; height:100%; }
.rs-frame .fb::before{ width:130%; height:130%; }
.rs-frame .room{ position:absolute; right:16px; z-index:3; }
.rs-frame .status{ position:absolute; z-index:5; top:50px; left:12px; right:12px; max-width:none; font-size:12px; }
.rs-frame .hint{ display:none; }            /* in het kleine kader botst de hint met het onderschrift */
.rs-frame .rs-note{ position:absolute; z-index:4; left:12px; bottom:10px; margin:0; display:block; pointer-events:none; }
.peek-rs--framed .rs-still{ position:absolute; z-index:2; }
.rs-tools--page .pia-mini{ display:none; }
.rs-heat-lbls{ position:absolute; z-index:4; left:12px; top:12px; max-width:calc(100% - 150px); pointer-events:none; }
.rs-heat-lbl{ margin:0; display:flex; gap:8px; align-items:flex-start; padding:6px 9px; border-radius:8px; font:500 12px/1.35 var(--f-mono); letter-spacing:.04em; color:var(--c-ink);
  background:rgba(8,10,12,.58); border:1px solid rgba(239,146,33,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:rs-in .6s var(--e-adem, ease) both; }
.rs-heat-lbl .d{ width:6px; height:6px; margin-top:3px; flex:none; border-radius:50%; background:var(--c-orange); box-shadow:0 0 10px var(--c-orange); }
.rs-heat-lbl[hidden], .rs-alt[hidden]{ display:none; }
@keyframes rs-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.rs-ctl{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.rs-ctl .view{ align-self:auto; }
.rs-seg{ display:inline-flex; border:1px solid var(--c-line); border-radius:999px; padding:2px; background:rgba(8,10,12,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.rs-seg button{ appearance:none; border:0; background:none; border-radius:999px; height:24px; padding:0 10px; font:500 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); cursor:pointer; transition:background .3s, color .3s; }
.rs-seg button[aria-pressed="true"]{ background:var(--c-ink); color:#080a0c; }
.rs-seg button[data-heat="1"][aria-pressed="true"]{ background:var(--c-orange); color:#080a0c; }
.rs-seg button:disabled{ opacity:.4; cursor:default; }
.rs-alt{ appearance:none; border:0; background:none; height:25px; padding:0 4px; display:inline-flex; gap:7px; align-items:center; cursor:pointer; font:500 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); }
.rs-alt .box{ width:10px; height:10px; border:1px solid currentColor; border-radius:3px; transition:background .3s, border-color .3s; }
.rs-alt[aria-pressed="true"]{ color:var(--c-ink); }
.rs-alt[aria-pressed="true"] .box{ background:var(--c-orange); border-color:var(--c-orange); }
.rs-stage .rs-cap{ max-width:var(--fw); }
html.rs-heat .peek-rs .kicker .dot{ background:var(--c-orange); box-shadow:0 0 12px var(--c-orange); }
@media (prefers-reduced-motion: reduce){ .rs-heat-lbl{ animation:none; } }
/* Overgang collectie -> product (inc/overgang.php, @view-transition): de kaartfoto morpht naar het productbeeld. Eén naam per pagina. */
.rs-still .rs-still__box{ view-transition-name:foto; }
.rs-still.has-model .rs-still__box{ view-transition-name:none; }
.rs-still.has-model{ view-transition-name:foto; }
.peek-rs:not(:has(.rs-still)) .rs-flacon{ view-transition-name:foto; }
@media (max-width:899px){
  .peek-rs--framed .scene{ display:flex; flex-direction:column; gap:16px; padding:calc(84px + env(safe-area-inset-top)) var(--margin) 48px; }
  .peek-rs--framed .scene .foot{ display:contents; }
  .peek-rs--framed .scene .head-wrap{ order:1; }
  .peek-rs--framed .scene .lede{ order:2; position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; display:block; }
  .peek-rs--framed .rs-stage{ order:3; width:100%; }
  .peek-rs--framed .scene .foot > :not(.lede){ order:4; }
  .peek-rs--framed .head{ font-size:clamp(40px, 12vw, 76px); }
  .rs-frame{ max-height:56vh; max-height:56svh; border-radius:14px; }
  .rs-heat-lbls{ max-width:calc(100% - 130px); }
  .rs-frame .rs-note{ display:block; }
}
/* Videogesprek met Pia (Ruud 05-10-2026): camera-icoon en de regel "met geluid en microfoon" onder de knop. */
.pia__col{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; padding-right:6px; }
.pia__cam{ flex:none; color:var(--c-blue); }
.pia__sub{ font:400 10px/1 var(--f-mono); letter-spacing:.08em; color:var(--c-ink-3); padding-left:11px; white-space:nowrap; }
.pia.on .pia__sub{ display:none; }
@media (max-width:699px){ .pia__sub{ display:none; } }

/* Videogesprek-pil in dezelfde vorm als de chatknop "Chat met Pia" (inc/chat.php .pch-fab; Ruud 06-10-2026):
   donker glas, holo-rand, ronde foto 40px, icoon holo-blauw, tekst licht 14px, "Nieuw" als badge rechtsboven. */
.pia:not(.on){ box-sizing:border-box; width:252px; height:52px; right:max(16px, env(safe-area-inset-right)); overflow:visible; border-radius:999px; border:1px solid rgba(143,216,255,.35); background:rgba(6,12,18,.82);
  box-shadow:0 8px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,154,215,.15); transition:border-color .3s, box-shadow .3s; }
.pia:not(.on):hover{ border-color:rgba(239,146,33,.8); box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 24px rgba(239,146,33,.25); }
.pia:not(.on):focus-visible{ outline:2px solid #8FD8FF; outline-offset:3px; }
.pia:not(.on) .pia__row{ gap:10px; height:100%; padding:5px 18px 5px 5px; box-sizing:border-box; }
.pia:not(.on) .pia__img{ width:40px; height:40px; }
.pia:not(.on) .pia__btn{ background:none; color:#ECEBE7; height:auto; padding:0; gap:10px; font:500 14px/1 var(--f-text); }
.pia:not(.on) .pia__cam{ color:#8FD8FF; width:18px; height:18px; }
.pia:not(.on) .pia__sub{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }   /* staat al in het aria-label */
@media (max-width:699px){ .pia:not(.on){ width:232px; height:48px; right:12px; } .pia:not(.on) .pia__row{ padding:3px 14px 3px 3px; } .pia:not(.on) .pia__img{ width:40px; height:40px; } .pia:not(.on) .pia__btn{ font-size:13px; } }

.peek-simnote{ margin:8px 0 0; font:400 12px/1.4 var(--f-mono, ui-monospace, monospace); letter-spacing:.03em; color:var(--c-ink-2, #A4A7AA); }
.peek-simnote a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.peek-simnote a:hover{ color:var(--c-ink, #ECEBE7); }