/* huisstijl-fonts, lokaal gehost zoals op de site zelf */
  @font-face{font-family:'Plus Jakarta Sans Variable';
    src:url('fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2') tech(variations),
        url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
    font-weight:200 800;font-style:normal;font-display:swap}
  @font-face{font-family:'Geist Variable';
    src:url('fonts/geist-latin-ext-wght-normal.woff2') format('woff2') tech(variations),
        url('fonts/geist-latin-wght-normal.woff2') format('woff2');
    font-weight:100 900;font-style:normal;font-display:swap}
  :root{
    --navy:#0e2c48; --navy2:#0a2342; --ink:#eaf2fb;
    --card1:rgba(24,60,98,.95); --card2:rgba(16,44,74,.95);
    --sheetcard1:rgba(24,60,98,.99); --sheetcard2:rgba(16,44,74,.99);
    --panel:rgba(16,44,74,.9); --deep1:#0b2439; --deep2:#081c2d;
    --cyan:#19c3e6; --cyan-dim:#0096c7; --vignette:rgba(0,0,0,.65); --line:rgba(25,195,230,.22);
    --line-strong:rgba(25,195,230,.5);
    --mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;
    --sans:'Geist Variable',system-ui,sans-serif;
    --display:'Plus Jakarta Sans Variable',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{min-height:100%;background:var(--navy);color:var(--ink);font-family:var(--sans);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  /* Zonder JavaScript is dit een gewone pagina: het canvas en zijn lagen blijven weg,
     de uitgeschreven inhoud staat er. Draait het canvas wel, dan keert dat om. */
  html:not(.canvas-on) .grid,html:not(.canvas-on) .vignette,html:not(.canvas-on) .floors,
  html:not(.canvas-on) #stage,html:not(.canvas-on) #nav,html:not(.canvas-on) #overviewBtn,
  html:not(.canvas-on) #back,html:not(.canvas-on) .hud,
  html:not(.canvas-on) #meet{display:none!important}
  html.canvas-on{height:100%;overflow:hidden}
  html.canvas-on body{height:100%;overflow:hidden}
  html.canvas-on .fallback{display:none}
  .grid{position:fixed;inset:0;z-index:0;background-color:var(--navy);transition:background-color .8s,background-size .8s;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px),
      radial-gradient(circle at 50% 40%,rgba(25,195,230,.10),transparent 60%);
    background-size:40px 40px,40px 40px,100% 100%;}
  /* dieper niveau = ander 'binnen'-gevoel: fijner raster, donkerder, sterkere gloed */
  body.depth1 .grid{background-color:var(--deep1);background-size:26px 26px,26px 26px,100% 100%;}
  body.depth2 .grid{background-color:var(--deep2);background-size:18px 18px,18px 18px,100% 100%;}
  .vignette{position:fixed;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 240px 40px var(--vignette)}
  /* onderliggende verdiepingen, half zichtbaar op de achtergrond (hoofdverdieping = onderste) */
  .floors{position:fixed;inset:0;z-index:1;pointer-events:none}
  .floor{position:absolute;left:50%;top:50%;width:64vw;height:58vh;
    border:1px solid rgba(25,195,230,.5);background:rgba(13,40,66,.10);
    box-shadow:0 24px 70px -30px rgba(0,0,0,.7);
    transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s}
  .floor::before,.floor::after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--cyan);opacity:.6}
  .floor::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .floor::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
  /* mini-constellatie van de echte kaarten op dat onderliggende vlak */
  .floor-inner{position:absolute;inset:11%}
  .mini{position:absolute;border:1px solid rgba(25,195,230,.4);background:rgba(12,40,68,.22);
    padding:7px 9px;overflow:hidden;display:flex;align-items:flex-start}
  .mini span{font-family:var(--display);font-weight:600;font-size:12px;line-height:1.12;
    color:rgba(234,242,251,.4);letter-spacing:-.01em}

  #stage{position:fixed;inset:0;z-index:2;overflow:hidden;cursor:grab;touch-action:none}
  #stage.dragging{cursor:grabbing}
  #world{position:absolute;top:0;left:0;transform-origin:0 0;
    transition:transform .9s cubic-bezier(.16,1,.3,1);will-change:transform}
  svg.links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;z-index:0}

  .panel{position:absolute;width:520px;min-height:340px;z-index:2;
    background:linear-gradient(160deg,var(--card1),var(--card2));
    border:1px solid var(--line-strong);
    box-shadow:0 0 0 1px rgba(0,0,0,.3),0 30px 80px -30px rgba(0,0,0,.8);
    padding:38px 40px 34px;cursor:pointer;user-select:none;-webkit-user-select:none;
    transition:border-color .3s,box-shadow .3s,opacity .5s,filter .5s}
  /* Het blok met het voorbeeldrapport is op het vlak een kaart als alle andere: zelfde
     breedte, zelfde typografie, met de pagina erin als voorproefje en zonder bediening.
     Pas als je hem opent groeit hij naar zijn volle breedte, want een liggend A4 is op
     520 px een postzegel. */
  .panel.wide{width:520px}
  .panel.wide:not(.active) .gallery{margin-top:22px}
  .panel.wide:not(.active) .galarrow,
  .panel.wide:not(.active) .galbar{display:none}
  .panel.wide:not(.active) .galveil{gap:12px;padding:0 16px}
  .panel.wide:not(.active) .galfoot{font-size:11.5px;gap:12px;margin-top:12px}
  /* Geopend: het canvas zoomt dit blok op een gewoon scherm tot ongeveer de helft uit,
     dus alles erin staat op ruwweg dubbel formaat, anders is de bediening niet te
     vinden. De kop staat links en de inleiding ernaast, zodat de hoogte naar de pagina
     zelf gaat. Alleen de directe kinderen zijn rastervakken; anders erft de tekst in het
     waas de uitlijning van de inleiding en schuift hij naar rechts. */
  /* geopend groeit het blok over zijn buren heen; zonder een hogere laag vangt de kaart
     ernaast de klik op de bladerpijl */
  .panel.wide.active{width:1760px;z-index:4;padding:52px 56px 44px;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:56px;align-content:start}
  .panel.wide.active > .eyebrow{grid-column:1;grid-row:1;font-size:17px;margin-bottom:18px}
  .panel.wide.active > h2{grid-column:1;grid-row:2;font-size:48px;margin-bottom:0}
  .panel.wide.active > p{grid-column:2;grid-row:1/3;align-self:end;max-width:none;
    font-size:22px;line-height:1.55}
  .panel.wide.active > .gallery{grid-column:1/-1}
  .panel.wide.active .galveil p{font-size:22px}
  /* dezelfde knop, alleen meegeschaald met de rest van het geopende blok (x1,47),
     zodat hij niet het kleinste element op het scherm is */
  .panel.wide.active .galveil .routebtn{font-size:19px;padding:18px 23px}
  .panel.grabbed{z-index:3}
  .panel:hover{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan-dim),0 0 60px -10px rgba(25,195,230,.4),0 30px 80px -30px #000}
  .panel.active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan-dim),0 0 70px -10px rgba(25,195,230,.35),0 30px 80px -30px #000}
  .panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--cyan)}
  .panel::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .panel::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
  .panel h2{font-family:var(--display);font-size:34px;line-height:1.1;font-weight:600;
    letter-spacing:-.02em;margin-bottom:16px;overflow-wrap:break-word;hyphens:none}
  .panel p{font-size:15px;line-height:1.6;color:#b9cbe0;max-width:42ch}
  .price{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
  .price b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);
    border:1px solid var(--line-strong);padding:9px 13px;letter-spacing:.04em}
  .price b span{color:var(--cyan);font-weight:700}
  /* subtiel merkteken: deze kaart heeft een eigen verdieping */
  .layericon{position:absolute;top:16px;right:18px;width:22px;height:20px;color:var(--cyan);
    opacity:.45;pointer-events:none;transition:opacity .3s}
  .panel.active .layericon{opacity:.85}
  /* kaart met extra verdieping: subtiel 2e vel erachter (peekt rechtsonder) */
  .ghostsheet{position:absolute;width:520px;z-index:1;pointer-events:none;
    background:var(--navy2);border:1px solid rgba(25,195,230,.30)}

  /* de kern is geen cluster maar het anker: volle rand en een eigen gloed */
  .panel.core{border-color:var(--cyan);
    background:linear-gradient(160deg,rgba(13,41,74,.97),rgba(8,28,52,.97));
    box-shadow:0 0 0 1px var(--cyan-dim),0 0 70px -12px rgba(25,195,230,.45),0 30px 80px -30px #000}
  .panel.core .eyebrow{color:var(--cyan)}
  .panel.core::before,.panel.core::after{width:20px;height:20px}
  body.focusview .panel:not(.active){opacity:.2;filter:saturate(.4)}

  .hud{position:fixed;z-index:5;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,242,251,.55);pointer-events:none}
  .hud.tl{top:20px;left:22px}
  .hud.bl{bottom:88px;left:22px;color:var(--cyan)}
  /* de stapel verdiepingen: waar je staat bovenaan, de lagen eronder waar je vandaan komt */
  #coords{pointer-events:auto}
  /* De verdiepingen als gestapelde vloeren in perspectief: elke laag een schuin vlak,
     de actieve steekt naar voren. */
  .layer{display:flex;align-items:center;gap:15px;padding:0;margin-bottom:7px;
    cursor:pointer;transition:transform .25s ease}
  .layer i{display:block;width:66px;height:12px;flex:none;transform:skewX(-42deg);
    background:rgba(234,242,251,.07);border:1px solid rgba(234,242,251,.34);
    transition:background .25s,border-color .25s,box-shadow .25s}
  .layer span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(234,242,251,.62);transition:color .25s}
  .layer.active{cursor:default;transform:translateX(18px)}
  .layer.active i{background:rgba(25,195,230,.3);border-color:var(--cyan);
    box-shadow:0 0 16px -5px var(--cyan)}
  .layer.active span{color:var(--cyan)}
  .layer.empty{cursor:default}
  .layer.empty i{border-style:dashed;border-color:rgba(234,242,251,.45);background:rgba(234,242,251,.03)}
  .layer:not(.active):not(.empty):hover{transform:translateX(9px)}
  .layer:not(.active):not(.empty):hover i{border-color:var(--cyan)}
  .layer:not(.active):not(.empty):hover span{color:var(--ink)}
  .hud.tc{top:22px;left:50%;transform:translateX(-50%);text-align:center;font-size:10.5px;
    letter-spacing:.16em;color:rgba(234,242,251,.55)}
  .brand{color:var(--ink);font-weight:700;letter-spacing:.3em}
  /* Het logo is donker aangeleverd; omkeren maakt er de lichte variant van. */
  .brandlogo{width:138px;height:29px;display:block;margin:0 0 6px -3px;filter:brightness(0) invert(1);opacity:.9}

  #nav{position:fixed;z-index:6;left:50%;bottom:22px;transform:translateX(-50%);
    display:flex;align-items:center;gap:18px;background:rgba(25,195,230,.3);
    border:1px solid var(--cyan);padding:10px 16px;backdrop-filter:blur(8px);
    box-shadow:0 0 16px -5px var(--cyan)}
  #nav button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    background:transparent;color:var(--ink);border:none;cursor:pointer;padding:6px 8px}
  /* Een vlak met één kaart heeft niets om doorheen te stappen; dan hoort de balk weg.
     De id-regel hierboven wint het van de browserregel voor [hidden], vandaar deze. */
  #nav[hidden]{display:none}
  #nav button:disabled{opacity:.3;cursor:default}
  #nav button.cta{color:var(--cyan);border:1px solid var(--cyan-dim);padding:7px 14px}
  #nav button.cta:hover{background:var(--cyan);color:var(--navy)}
  #dots{display:flex;gap:9px}
  #dots i{width:8px;height:8px;border:1px solid var(--cyan-dim);border-radius:50%;
    cursor:pointer;transition:background .3s}
  #dots i.on{background:var(--cyan);border-color:var(--cyan)}

  #overviewBtn{position:fixed;z-index:6;top:18px;right:20px;display:none;
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    background:var(--panel);color:var(--cyan);border:1px solid var(--cyan-dim);padding:9px 14px;cursor:pointer}
  #overviewBtn:hover{background:var(--cyan);color:var(--navy)}
  body.focusview #overviewBtn{display:block}
  /* Op een leespagina staat één kaart op het vlak, dus "overzicht" levert diezelfde
     pagina op, klein en onleesbaar. De knop hoort daar niet. */
  body.readview #overviewBtn{display:none}

  /* ===== de bevestiging na het versturen van het formulier =====
     Rechtsonder, boven de voetregel. Stond eerst onderaan in het midden, maar landde
     daar op de contactkaart. Verdwijnt vanzelf, want er valt niets te doen. */
  #toast{position:fixed;z-index:20;right:22px;bottom:84px;
    transform:translateY(14px);
    display:flex;align-items:center;gap:13px;max-width:min(420px,calc(100vw - 44px));
    padding:15px 21px;background:var(--panel);border:1px solid var(--cyan-dim);
    box-shadow:0 0 0 1px rgba(25,195,230,.18),0 24px 60px -24px #000;
    font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--ink);
    opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
  #toast.show{opacity:1;transform:translateY(0)}
  #toast::before{content:"";flex:none;width:9px;height:9px;background:var(--cyan);
    box-shadow:0 0 14px 2px rgba(25,195,230,.55)}
  @media (prefers-reduced-motion:reduce){ #toast{transition:opacity .3s ease} }

  /* ===== knoppen en routes op de kaarten ===== */
  .routes{display:flex;flex-direction:column;gap:10px;margin-top:22px}
  .routebtn{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-align:left;
    background:transparent;color:var(--cyan);border:1px solid var(--cyan-dim);
    padding:12px 16px;cursor:pointer;text-decoration:none;display:block;transition:background .2s}
  .routebtn:hover{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}
  .baselist{list-style:none;margin-top:14px}
  .baselist li{font-size:13.5px;color:#b9cbe0;padding:4px 0 4px 18px;position:relative}
  .baselist li::before{content:"+";position:absolute;left:0;color:var(--cyan)}
  .modmeta{font-family:var(--mono);font-size:12px;color:var(--cyan);margin-top:16px;letter-spacing:.04em}
  /* punten met een eigen kop op een kaart: de vijf rapportonderdelen, de zeven vragen,
     en wat er wel en niet bij de prijs hoort */
  /* het stoplicht op de rapportkaart: dezelfde drie kleuren als in het rapport zelf */
  .cardverdict{margin-top:20px;border:1px solid var(--line-strong);padding:16px 18px 14px;
    background:linear-gradient(160deg,rgba(13,41,74,.62),rgba(8,28,52,.8))}
  .verdictline{display:flex;align-items:baseline;gap:10px;padding:5px 0}
  .verdictline .lamp{width:10px;height:10px;flex:none;display:block;transform:translateY(1px)}
  .verdictline .lamp.groen{background:#22c55e}
  .verdictline .lamp.oranje{background:#fbbf24}
  .verdictline .lamp.rood{background:#ef4444}
  .verdictline b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink)}
  .verdictline span{font-size:13.5px;line-height:1.5;color:#b9cbe0}
  /* de inleiding boven de punten loopt net zo breed als de punten eronder, anders staat
     er een smalle kolom boven een brede lijst */
  .panel:has(.cardpoints) p{max-width:none}
  .cardpoints{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
  .cardpoints li{padding:10px 0;border-bottom:1px solid var(--line)}
  .cardpoints b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px}
  .cardpoints span{display:block;font-size:13.5px;line-height:1.55;color:#b9cbe0}
  /* ===== het voorbeeldrapport: één blok waarin je door twaalf pagina's bladert ===== */
  .gallery{margin-top:34px}
  .galstage{display:flex;align-items:center;gap:20px}
  /* de verhouding van een liggend A4, zodat het blok niet springt bij het bladeren */
  .galframe{position:relative;flex:1;min-width:0;aspect-ratio:841.89/595.28;
    background:#fff;border:1px solid var(--line-strong);overflow:hidden}
  .galpage{position:absolute;inset:0;display:none}
  .galpage.on{display:block}
  .galpage img{display:block;width:100%;height:100%;object-fit:contain;
    user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
  /* een pagina die niet vrij is: het beeld staat er echt, maar vervaagd en op lage
     resolutie, dus scherpstellen levert niets op */
  .galblur{position:absolute;inset:0;filter:blur(8px);transform:scale(1.05);
    pointer-events:none;user-select:none;-webkit-user-select:none}
  .galveil{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:26px;padding:0 40px;text-align:center;
    background:linear-gradient(180deg,rgba(11,36,57,.3),rgba(11,36,57,.85) 55%,rgba(8,28,45,.96))}
  /* zelfde maat als de tekst op een kaart; in het geopende blok schaalt hij mee met
     de inleiding daarboven, en niet naar een eigen getal */
  .galveil p{font-size:15px;line-height:1.6;color:var(--ink);max-width:none}
  /* de gewone knop van de site, alleen inline zoals in het leesvel (.readcta), want in
     het waas staat hij gecentreerd onder één regel en niet als balk onderaan een kaart */
  .galveil .routebtn{display:inline-block}
  .galctl{font-family:var(--mono);background:transparent;color:var(--cyan);padding:0;
    border:1px solid var(--cyan-dim);cursor:pointer;transition:background .2s,border-color .2s}
  .galctl:hover{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}
  .galarrow{flex:none;width:72px;height:104px;font-size:26px;line-height:1}
  .galbar{display:flex;gap:7px;margin-top:18px}
  .galdot{flex:1;height:14px;border-color:var(--line)}
  .galdot.open{background:rgba(25,195,230,.22);border-color:var(--cyan-dim)}
  .galdot.on{background:var(--cyan);border-color:var(--cyan)}
  .galfoot{display:flex;gap:18px;margin-top:16px;font-family:var(--mono);font-size:19px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
  .galfoot .galname{color:rgba(234,242,251,.6)}
  /* zonder JavaScript: de leesbare pagina's onder elkaar, zonder bediening */
  .galstatic figure{margin:0 0 18px}
  .galstatic img{display:block;width:100%;height:auto;border:1px solid var(--line-strong)}
  .galstatic figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--cyan);margin-top:7px}
  /* beeld loopt tot de rand van de kaart door, over de padding heen */
  /* De muis moet door het beeld heen de kaart raken, anders pakt de browser de foto
     op als eigen sleepobject en verplaatst de kaart niet. */
  .cardimage{display:block;width:calc(100% + 80px);height:180px;object-fit:cover;
    object-position:center 25%;margin:-38px -40px 22px;
    border-bottom:1px solid var(--line-strong);
    pointer-events:none;-webkit-user-drag:none;user-select:none}
  .fallback .image{width:100%;height:auto;display:block;margin-bottom:22px;
    border:1px solid var(--line)}
  .modlist{columns:2;column-gap:22px;margin-top:12px;list-style:none}
  .modlist li{font-size:13px;line-height:1.5;color:#b9cbe0;break-inside:avoid;
    padding-left:13px;position:relative}
  .modlist li::before{content:"·";position:absolute;left:2px;color:var(--cyan)}
  #meet{position:fixed;z-index:6;top:18px;right:20px;font-family:var(--mono);font-size:12px;
    font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--cyan);
    color:var(--navy);border:1px solid var(--cyan);padding:13px 20px;text-decoration:none;
    box-shadow:0 0 24px -8px var(--cyan);transition:background .2s,box-shadow .2s}
  #meet:hover{background:#57d8f2;border-color:#57d8f2;box-shadow:0 0 30px -6px var(--cyan)}
  #overviewBtn{top:64px}
  #back{display:none;position:fixed;z-index:6;left:16px;bottom:18px;
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    background:var(--panel);color:var(--cyan);border:1px solid var(--cyan-dim);
    padding:11px 16px;cursor:pointer}
  #back:hover{background:var(--cyan);color:var(--navy)}
  .hud.br{bottom:22px;right:22px;text-align:right;line-height:1.7}
  .footerlinks a{color:rgba(234,242,251,.55);text-decoration:none;pointer-events:auto}
  .footerlinks a:hover{color:var(--cyan)}

  /* ===== uitgeschreven pagina (zonder JavaScript, en wat crawlers lezen) ===== */
  .fallback{max-width:760px;margin:0 auto;padding:64px 24px 96px}
  .fallback header{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:40px}
  .fallback .brandline{display:block;width:172px;height:36px;margin-bottom:22px;
    filter:brightness(0) invert(1);opacity:.9}
  .fallback h1{font-family:var(--display);font-size:34px;line-height:1.12;font-weight:600;
    letter-spacing:-.02em;margin-bottom:14px}
  .fallback .lead{font-size:17px;line-height:1.6;color:#cadaea}
  .fallback section{margin-bottom:34px}
  .fallback h2{font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:8px}
  .fallback p{font-size:15px;line-height:1.65;color:#b9cbe0}
  .fallback ul{margin:10px 0 0 18px}
  .fallback li{font-size:15px;line-height:1.7;color:#b9cbe0}
  .fallback .meta{font-family:var(--mono);font-size:12.5px;color:var(--cyan);margin-top:6px}
  /* Leesvel: lange tekst opent midden in de ruimte in plaats van op een losse pagina.
     Zelfde randen en hoeken als een kaart, maar breed en met eigen scroll. */
  #readsheet{position:fixed;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
    padding:56px 24px;background:rgba(3,13,24,.72);backdrop-filter:blur(3px)}
  #readsheet[hidden]{display:none}
  /* Het blad is de vaste omlijsting met de hoeken; alleen de inhoud erbinnen scrollt,
     anders schuift de hoekmarkering met de tekst mee en zweeft hij ergens in beeld. */
  /* Een verdiepingsvel (over, case, cluster) is breder dan een readsheet met juridische
     of achtergrondtekst; daar leest een smalle kolom juist prettiger. */
  .readsheet-page.wide{width:min(1000px,100%)}
  .readsheet-page{position:relative;width:min(760px,100%);max-height:100%;
    display:flex;flex-direction:column;overflow:hidden;
    background:linear-gradient(160deg,var(--sheetcard1),var(--sheetcard2));
    border:1px solid var(--line-strong);
    box-shadow:0 0 0 1px rgba(0,0,0,.3),0 40px 100px -30px rgba(0,0,0,.9)}
  .readsheet-scroll{overflow-y:auto;overflow-x:hidden;padding:52px 56px 44px}
  /* Op een aanwijzerscherm is een leesvel geen venster over het canvas maar een pagina op
     zichzelf: hij staat als enig vlak op een eigen verdieping, en de tekst scrollt
     binnenin. Breedte en hoogte zet app.js per pagina; de hoogte is 80% van het scherm,
     zodat de camera op 1:1 uitkomt en de letters niet geschaald worden. */
  .panel.readpanel{padding:0;overflow:hidden;
    background:linear-gradient(160deg,var(--sheetcard1),var(--sheetcard2))}
  .readpanel-body{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    padding:52px 56px 44px}
  /* Een leespagina draagt ook de klasse .panel, en daarmee de kaartopmaak. Die klemt
     elke alinea op 42ch (een smalle streep tekst in een vlak van 1180 breed) en zet
     letterafstand op de koppen. Binnen een leespagina geldt de veltypografie: een
     leesbare regellengte, en geen kaart-letterafstand. */
  .panel.readpanel .readsheet-content p{max-width:none}
  .panel.readpanel .readsheet-content h2{letter-spacing:normal}
  #readsheet-close{position:absolute;top:14px;right:16px;z-index:3;
    background:transparent;border:none;color:var(--cyan);font-size:26px;line-height:1;
    cursor:pointer;padding:4px 8px}
  #readsheet-close:hover{color:var(--ink)}
  .readsheet-content .brandline,.readsheet-content nav{display:none}
  /* beeld in een vel is een strook, geen paginavullende foto */
  .readsheet-content .image{width:calc(100% + 112px);max-width:none;margin:0 -56px 26px;
    height:240px;object-fit:cover;object-position:center 30%;border:none}
  /* Contactformulier: twee kolommen zodat het niet uitgroeit tot een hoge stapel, met
     labels in gewone tekst dicht op hun veld in plaats van monospace-kapitalen. */
  .sheetform{display:grid;grid-template-columns:1fr 1fr;gap:15px 22px;margin-top:10px;
    align-items:end}
  .sheetform .full{grid-column:1/-1}
  .sheetform label{display:block;margin:0;font-family:var(--sans);font-size:12.5px;
    letter-spacing:normal;text-transform:none;color:rgba(234,242,251,.72)}
  .sheetform label span{color:var(--cyan)}
  .sheetform input,.sheetform select,.sheetform textarea{display:block;width:100%;margin-top:5px;
    background:rgba(6,20,36,.55);border:1px solid var(--line);color:var(--ink);
    font-family:var(--sans);font-size:14.5px;padding:9px 12px;border-radius:0;
    transition:border-color .2s,box-shadow .2s}
  .sheetform textarea{resize:vertical;line-height:1.5}
  .sheetform input:focus,.sheetform select:focus,.sheetform textarea:focus{outline:none;
    border-color:var(--cyan);box-shadow:0 0 0 1px rgba(25,195,230,.4)}
  .sheetform .honeypot{position:absolute;left:-9999px;height:0;overflow:hidden}
  .sheetaction{display:flex;justify-content:flex-end;align-items:end}
  .sheetsend{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;background:transparent;color:var(--cyan);
    border:1px solid var(--cyan-dim);padding:11px 20px;cursor:pointer;transition:background .2s}
  .sheetsend:hover{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}
  .sheetmessage{margin:2px 0 0;font-size:13.5px;color:var(--cyan);min-height:1em}
  .sheetmessage.error{color:#ff8080}

  /* over-blad: kennismaking met portret, verhaal in een leeskolom, punten als raster */
  .sheetintro{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:center;
    padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:30px}
  .sheetportrait-frame{position:relative;width:300px;
    box-shadow:0 0 0 1px rgba(0,0,0,.25),0 30px 70px -34px rgba(0,0,0,.85)}
  .sheetportrait-frame::before,.sheetportrait-frame::after{content:"";position:absolute;
    width:13px;height:13px;border:2px solid var(--cyan);opacity:.5;pointer-events:none}
  .sheetportrait-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .sheetportrait-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
  .sheetportrait{width:300px;height:300px;object-fit:cover;object-position:center 20%;display:block}
  .sheetintro-text h1{font-family:var(--display);font-size:32px;line-height:1.12;font-weight:600;
    letter-spacing:-.02em;margin:0 0 16px}
  .sheetintro-text .lead{font-size:17px;line-height:1.6;margin:0}
  /* zelfde blok, kleiner: in het contactvel staat het portret naast het formulier-intro */
  .sheetintro.compact{grid-template-columns:160px 1fr;gap:26px;padding-bottom:24px;margin-bottom:26px}
  .sheetintro.compact .sheetportrait-frame,.sheetintro.compact .sheetportrait{width:160px}
  .sheetintro.compact .sheetportrait{height:160px}
  .readsheet-content .sheetintro.compact h2,.fallback .sheetintro.compact h2{font-family:var(--display);
    font-size:23px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
  .readsheet-content .sheetintro.compact p,.fallback .sheetintro.compact p{font-size:14px;
    line-height:1.65;margin:0 0 10px}
  .sheetintro.compact .contactline{font-family:var(--mono);font-size:12.5px;color:var(--cyan);
    letter-spacing:.03em}
  .sheetstory h2{margin-top:0}
  /* vier punten als omlijnde blokjes met een icoon, zoals op de site */
  .sheetvalues{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0 30px}
  .sheetvalue{border:1px solid var(--line-strong);padding:19px 18px 19px;
    background:linear-gradient(160deg,rgba(24,60,98,.5),rgba(16,44,74,.5))}
  .value-icon{width:24px;height:24px;color:var(--cyan);display:block;margin-bottom:14px}
  .readsheet-content .sheetvalue h3{margin:0 0 7px;font-size:15px}
  .sheetvalue p{margin:0;font-size:13.5px;line-height:1.6}

  /* case: genummerde stappen, uitkomst uitgelicht, modules als labels */
  .sheetstep{display:grid;grid-template-columns:52px 1fr;gap:0 18px;margin-bottom:26px}
  .sheetstep-nr{font-family:var(--mono);font-size:13px;color:var(--cyan);padding-top:4px;
    border-right:1px solid var(--line-strong);height:100%}
  .readsheet-content .sheetstep h2{margin:0 0 8px}
  .sheetstep p{margin:0}
  /* second opinion: oordeelpaneel met stoplicht, genummerde onderdelen, groot bedrag */
  .sheeteyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--cyan);margin-top:40px}
  .readsheet-content .sheeteyebrow+h2{margin-top:10px}
  /* de bestelknop in dezelfde stijl als de vaste Kennismaken-knop in de schil */
  .readsheet-content .sheetcta a.buybtn{font-size:12px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;background:var(--cyan);color:var(--navy);border:1px solid var(--cyan);
    padding:13px 20px;box-shadow:0 0 24px -8px var(--cyan)}
  .readsheet-content .sheetcta a.buybtn:hover{background:#57d8f2;border-color:#57d8f2;
    box-shadow:0 0 30px -6px var(--cyan)}
  .verdicthead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .verdictbadge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    background:var(--cyan);color:var(--navy);padding:3px 8px}
  .stoplights{display:flex;gap:6px}
  .stoplights i{width:10px;height:10px;display:block}
  .stoplights i:nth-child(1){background:#22c55e}
  .stoplights i:nth-child(2){background:#fbbf24}
  .stoplights i:nth-child(3){background:#ef4444}
  .readsheet-content .sheetstep h3{margin:0 0 6px;font-size:15px}
  .pricebig{display:flex;align-items:baseline;gap:12px;margin:18px 0 6px}
  .pricebig b{font-family:var(--mono);font-size:44px;font-weight:700;color:var(--cyan);line-height:1}
  .pricebig span{font-family:var(--mono);font-size:11px;color:#8fa6bf}
  .sheetoutcome{border:1px solid var(--cyan-dim);background:rgba(25,195,230,.09);
    padding:22px 24px;margin:6px 0 28px}
  .readsheet-content .sheetoutcome h2{margin:0 0 8px;color:var(--cyan)}
  .sheetoutcome p{margin:0}
  .sheetresult{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;margin:0 0 4px;
    border-top:1px solid var(--line);padding-top:24px}
  .sheetresult.only{grid-template-columns:1fr}
  .sheetresult .sheetpanel{margin:0}
  .sheetpoints{border:1px solid var(--line-strong);padding:20px 22px}
  .sheetpoints-head{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(234,242,251,.5);margin-bottom:15px}
  .sheetpoint+.sheetpoint{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .sheetpoint span{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;
    text-transform:uppercase;color:var(--cyan);margin-bottom:5px}
  .readsheet-content .sheetpoint p{font-size:14px;line-height:1.62;color:#b9cbe0;margin:0}
  .sheetresult.only .sheetpoints{display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px}
  .sheetresult.only .sheetpoints-head{grid-column:1/-1}
  .sheetresult.only .sheetpoint+.sheetpoint{margin-top:0;padding-top:0;border-top:none;
    border-left:1px solid var(--line);padding-left:26px}
  .readsheet-content .sheetvalue>*:last-child,
  .readsheet-content .sheetoutcome>*:last-child,.readsheet-content .sheetstep p:last-child,
  .readsheet-content .sheetpanel>*:last-child{margin-bottom:0}
  .sheetpanel{position:relative;border:1px solid var(--line-strong);padding:22px 24px;margin:0 0 28px;
    background:linear-gradient(160deg,rgba(13,41,74,.62),rgba(8,28,52,.8));
    box-shadow:0 0 0 1px rgba(0,0,0,.25),0 30px 70px -34px rgba(0,0,0,.85)}
  .sheetpanel::before,.sheetpanel::after{content:"";position:absolute;width:13px;height:13px;
    border:2px solid var(--cyan);opacity:.5;pointer-events:none}
  .sheetpanel::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .sheetpanel::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
  .sheetpanel-head{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(234,242,251,.62);margin-bottom:10px}
  .sheetpanel-big{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--cyan);
    line-height:1}
  .sheetpanel-sub{font-family:var(--mono);font-size:13px;color:var(--ink);margin-top:8px}
  .sheetpanel-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;
    color:rgba(234,242,251,.62);border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
  .sheetpanel-row b{color:var(--ink);font-weight:600}
  .sheetpanel-note{font-size:12.5px;line-height:1.6;color:rgba(234,242,251,.55);margin:10px 0 0}
  .sheetcomposition{margin:0 0 24px}

  .routebtn.ghost{background:none;cursor:pointer;font-family:var(--mono);font-size:13px}
  .sheetchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
  .sheetchips span{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
    border:1px solid var(--line-strong);padding:7px 12px;color:#b9cbe0}

  .sheetgrid{columns:2;column-gap:46px;margin-top:4px}
  .sheetitem{break-inside:avoid;margin-bottom:24px}
  .readsheet-content .sheetitem h2{margin-top:0}
  .readsheet-content h3{font-family:var(--display);font-size:15px;font-weight:600;
    margin:22px 0 4px;color:var(--ink)}
  .readsheet-content .sheetcta a{display:inline-block;font-family:var(--mono);font-size:12px;
    letter-spacing:.08em;color:var(--cyan);border:1px solid var(--cyan-dim);
    padding:11px 16px;text-decoration:none;margin-top:10px;transition:background .2s}
  .readsheet-content .sheetcta a:hover{background:var(--cyan);color:var(--navy)}
  .sheetback{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--cyan);text-decoration:none;margin-bottom:16px;
    border-bottom:1px solid transparent}
  .sheetback:hover{border-bottom-color:var(--cyan)}
  .readsheet-content .sheetback{border-bottom:1px solid transparent}
  /* adres- en gegevensblokken horen bij elkaar, niet als losse alinea's uit elkaar */
  .readsheet-content .block,.fallback .block{line-height:1.85}
  /* De standaardschuifbalk is te zwaar voor een vel. Dit gold alleen voor het venster in
     het deck; een leespagina in het canvas kreeg daardoor de grijze balk van de browser. */
  .readsheet-scroll,.readpanel-body{scrollbar-width:thin;
    scrollbar-color:rgba(25,195,230,.45) transparent}
  .readsheet-scroll::-webkit-scrollbar,.readpanel-body::-webkit-scrollbar{width:11px}
  .readsheet-scroll::-webkit-scrollbar-track,.readpanel-body::-webkit-scrollbar-track{background:transparent}
  .readsheet-scroll::-webkit-scrollbar-thumb,.readpanel-body::-webkit-scrollbar-thumb{
    background:rgba(25,195,230,.35);
    border:3px solid transparent;background-clip:content-box;border-radius:99px}
  .readsheet-scroll::-webkit-scrollbar-thumb:hover,.readpanel-body::-webkit-scrollbar-thumb:hover{
    background:rgba(25,195,230,.65);
    border:3px solid transparent;background-clip:content-box}
  .readsheet-content h1{font-family:var(--display);font-size:30px;line-height:1.15;font-weight:600;
    letter-spacing:-.02em;margin-bottom:22px}
  .readsheet-content .eyebrowread{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
  .readsheet-content header{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:30px}
  .readsheet-content h2{font-family:var(--display);font-size:19px;font-weight:600;margin:34px 0 10px}
  .readsheet-content p{font-size:15px;line-height:1.7;color:#b9cbe0;margin-bottom:15px}
  .readsheet-content .lead{font-size:17px;margin-bottom:26px}
  .readsheet-content ul{margin:0 0 18px 18px}
  .readsheet-content li{font-size:15px;line-height:1.7;color:#b9cbe0;margin-bottom:7px}
  .readsheet-content a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(25,195,230,.4)}
  .readsheet-content a:hover{border-bottom-color:var(--cyan)}
  @media (max-width:760px){
  .sheetresult{grid-template-columns:1fr}
    #readsheet{padding:0}
    .readsheet-page{max-height:100%;height:100%;border:none}
    .readsheet-scroll{padding:70px 22px 40px}
    .readsheet-content .image{width:calc(100% + 44px);margin:0 -22px 20px;height:180px}
    .sheetgrid{columns:1}
    .sheetform{grid-template-columns:1fr}
    .sheetintro{grid-template-columns:1fr;gap:20px}
    .sheetportrait-frame{width:100%}
    .sheetportrait{width:100%;height:280px}
    .sheetvalues{grid-template-columns:1fr}
    .sheetstep{grid-template-columns:38px 1fr;gap:0 12px}
  }

  /* leespagina zonder JavaScript: lange lopende tekst, meer lucht tussen de blokken */
  .fallback.read{max-width:720px}
  .fallback.read h2{margin:36px 0 10px;font-size:19px}
  .fallback.read p{margin-bottom:15px}
  .fallback.read ul{margin:0 0 18px 18px}
  .fallback.read li{margin-bottom:7px}
  .fallback.read a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(25,195,230,.4)}
  .fallback.read a:hover{border-bottom-color:var(--cyan)}
  .fallback.read .lead{font-size:17px;margin-bottom:26px}
  .fallback .eyebrowread{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
  .fallback nav{border-top:1px solid var(--line);padding-top:24px;margin-top:48px;
    display:flex;flex-wrap:wrap;gap:16px}
  .fallback nav a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
    color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent}
  .fallback nav a:hover{border-bottom-color:var(--cyan)}

  /* ===== inzichten: overzicht als kaartraster, artikel met genummerde secties ===== */
  .readgrid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:10px}
  /* Een leeskaart is een kaart zoals elke andere op deze site: dezelfde vulling, dezelfde
     hoekmarkeringen en dezelfde gloed bij aanwijzen. Hij had een eigen vorm met een lichtere
     vulling en een sprongetje omhoog, en dat kwam nergens anders voor. */
  .readcard{position:relative;display:block;text-decoration:none;color:inherit;
    border:1px solid var(--line-strong);padding:26px 28px 24px;
    background:linear-gradient(160deg,var(--card1),var(--card2));
    box-shadow:0 0 0 1px rgba(0,0,0,.3),0 30px 80px -30px rgba(0,0,0,.8);
    transition:border-color .3s,box-shadow .3s}
  .readcard::before,.readcard::after{content:"";position:absolute;width:10px;height:10px;
    border:2px solid var(--cyan)}
  .readcard::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .readcard::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
  .readcard:hover{border-color:var(--cyan);
    box-shadow:0 0 0 1px var(--cyan-dim),0 0 60px -10px rgba(25,195,230,.4),0 30px 80px -30px #000}
  .readcard.featured{grid-column:1/-1}

  /* Het overzicht: één uitgelichte kaart en daaronder regels van één lijn hoog. */
  .readlist{margin-top:30px;border-top:1px solid var(--line)}
  .readrow{display:grid;grid-template-columns:150px 1fr 22px;align-items:baseline;gap:20px;
    padding:14px 6px;text-decoration:none;color:inherit;
    transition:background .2s,padding-left .2s}
  .readsheet-content a.readrow,.fallback.read a.readrow{border-bottom:1px solid var(--line)}
  .readrow:hover{background:rgba(25,195,230,.07)}
  .readsheet-content a.readrow:hover,.fallback.read a.readrow:hover{border-bottom-color:var(--cyan)}
  .readrow-meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--cyan)}
  .readrow-title{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.3;
    letter-spacing:-.01em;color:var(--ink)}
  .readrow-arrow{font-family:var(--mono);color:var(--cyan);text-align:right;
    opacity:0;transition:opacity .2s}
  .readrow:hover .readrow-arrow{opacity:1}
  @media (max-width:760px){
    .readrow{grid-template-columns:1fr 22px;gap:4px 12px}
    .readrow-meta{grid-column:1/-1}
  }
  /* de kaart is zelf de link; de onderstreping van gewone links hoort er niet onder */
  .readsheet-content a.readcard,.fallback.read a.readcard{border-bottom:none}
  .readcard-meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
  .readsheet-content .readcard h3,.fallback.read .readcard h3{font-family:var(--display);
    font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
  .readsheet-content .readcard.featured h3,.fallback.read .readcard.featured h3{font-size:23px}
  .readsheet-content .readcard p,.fallback.read .readcard p{font-size:13.5px;line-height:1.6;margin:0 0 14px}
  .readcard-link{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--cyan)}

  .readsheet-content .article>p.lead,.fallback.read .article>p.lead{
    font-size:17px;line-height:1.6;color:#cadaea;margin-bottom:28px}
  /* de kolom staat rechts, de tekst loopt er links langs en daarna eronder door */
  .readside{float:right;width:320px;margin:0 0 26px 40px}
  /* De kolom zweeft rechts, dus naast de kolom is er 708px voor de tekst (1068 in de
     pagina min 320 kolom min 40 marge) en daaronder ineens de volle 1068. Die sprong in
     regellengte zit middenin het artikel. Elk tekstblok houdt daarom dezelfde 708, of de
     kolom er nu naast staat of niet. De lead staat boven de kolom en blijft breed. */
  .readsheet-content .article>*:not(.readside):not(.lead),
  .fallback.read .article>*:not(.readside):not(.lead){max-width:708px}
  .readside .readgrid{grid-template-columns:1fr;gap:16px;margin-top:0}
  .readsheet-content .readside .readcard,.fallback.read .readside .readcard{padding:18px 20px 16px}
  .readsheet-content .readside .readcard h3,.fallback.read .readside .readcard h3{font-size:15px}
  .readsheet-content .readside .readcard p,.fallback.read .readside .readcard p{font-size:13px;margin-bottom:10px}
  .article::after{content:"";display:block;clear:both}

  /* ===== veelgestelde vragen: genummerde klapregels per groep ===== */
  /* De vorm van de vorige site, waar hij goed werkte: een genummerde regel per vraag, een
     vierkant met een plus rechts dat cyaan wordt zodra de vraag openstaat, en het antwoord
     ingesprongen onder de vraag. Daar draaide er een script onder; hier niet, want het
     beveiligingsbeleid laat geen scripts in de pagina toe. <details> klapt zelf, gelijke
     namen binnen een groep houden er één open, en de nummers komen uit een teller in de
     opmaak, zodat een vraag ertussen niet alle andere hoeft te verschuiven. */
  .faqgroup{margin-top:72px}
  .faqgroup:first-of-type{margin-top:40px}
  .readsheet-content .faqhead,.fallback.read .faqhead{font-size:25px;line-height:1.2;
    letter-spacing:-.015em;margin:0 0 24px}
  .faqlist{border-top:1px solid var(--line);counter-reset:faq}
  .faqitem{border-bottom:1px solid var(--line)}
  .faqitem>summary{display:flex;align-items:flex-start;gap:16px;padding:18px 4px;
    cursor:pointer;list-style:none;
    font-family:var(--display);font-size:16.5px;font-weight:600;line-height:1.4;
    letter-spacing:-.01em;color:var(--ink);transition:color .15s}
  .faqitem>summary::-webkit-details-marker{display:none}
  .faqitem>summary::before{counter-increment:faq;
    content:counter(faq,decimal-leading-zero);flex:none;padding-top:3px;
    font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;
    color:var(--cyan)}
  .faqitem>summary::after{content:"+";flex:none;margin-left:auto;
    width:21px;height:21px;border:1px solid var(--line-strong);
    font-family:var(--mono);font-size:13px;font-weight:400;line-height:19px;text-align:center;
    color:var(--cyan);transition:background .2s,border-color .2s,color .2s}
  .faqitem>summary:hover{color:var(--cyan)}
  .faqitem>summary:hover::after{border-color:var(--cyan)}
  .faqitem[open]>summary::after{content:"\2013";
    background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
  /* het antwoord staat onder de vraag, voorbij de kolom met de nummers */
  .readsheet-content .faqitem p,.fallback.read .faqitem p{margin:0 0 20px;padding-left:39px;
    font-size:14.5px}

  .readcta{margin:0 0 26px}
  .readsheet-content .readcta p,.fallback.read .readcta p{margin:0 0 16px;font-size:14px}
  .readcta .routebtn{display:inline-block}
  .readmore{margin-top:0}
  .readmore-head{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(234,242,251,.5);margin-bottom:14px}
  /* een inzicht-pagina is breder dan een juridische tekst: er staat een kolom naast */
  .fallback.read.wide{max-width:1180px}
  .readsheet-page.reading{width:min(1180px,100%)}
  @media (max-width:760px){
    .readgrid{grid-template-columns:1fr;gap:20px}
    /* De kolom hangt in de opmaak direct na de inleiding, zodat hij op desktop rechts
       kan floaten. Zonder float hoort hij aan het eind van het artikel, niet middenin. */
    .article{display:flex;flex-direction:column}
    .readside{float:none;width:auto;margin:32px 0 0;order:99}
    /* In het deck is er geen kolom naast de tekst, dus ook geen maat om vast te houden. */
    .readsheet-content .article>*,.fallback.read .article>*{max-width:none}
    .readsheet-content .readcard.featured h3,.fallback.read .readcard.featured h3{font-size:19px}
  }

  /* ===== MOBILE = kaarten-deck per niveau ===== */
  @media (max-width:760px),(pointer:coarse){
    /* proximity, niet mandatory: kaarten zijn vaak hoger dan het scherm, en mandatory
       vecht dan met de lezer om de scrollpositie (vooral iOS Safari) */
    #stage{overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;cursor:default;touch-action:pan-y}
    #world{position:static;transform:none!important;transition:none;width:100%!important;height:auto!important}
    svg.links{display:none}
    /* De ruimte tussen kaarten hing aan .panel+.panel, maar tussen twee kaarten staat het
       verborgen tweede vel van een kaart met verdieping. Daardoor viel de tussenruimte weg
       bij elke kaart die daarop volgde. De marge hoort dus aan de kaart zelf. */
    .panel{position:relative!important;left:auto!important;top:auto!important;width:auto;
      margin:0 16px 22px;min-height:auto;padding:30px 24px;scroll-snap-align:start;
      opacity:1!important;filter:none!important}
    .panel:first-of-type{margin-top:90px}
    .panel h2{font-size:28px}
    .modlist{columns:1}
    .cardimage{width:calc(100% + 48px);margin:-30px -24px 18px;height:150px}
    /* Op een telefoon staat het blok gewoon tussen de andere kaarten en zoomt het canvas
       niet uit: het dubbele formaat moet eraf, en het blok is hier altijd te bedienen,
       ook als het niet de geopende kaart is. */
    .panel.wide,.panel.wide.active{width:auto;display:block;padding:30px 24px}
    .panel.wide > .eyebrow,.panel.wide.active > .eyebrow{font-size:12px;margin-bottom:14px}
    .panel.wide > h2,.panel.wide.active > h2{font-size:28px;margin-bottom:16px}
    .panel.wide > p,.panel.wide.active > p{font-size:15px;line-height:1.6}
    .gallery,.panel.wide:not(.active) .gallery{margin-top:20px}
    .panel.wide:not(.active) .galarrow{display:block}
    .panel.wide:not(.active) .galbar{display:flex}
    /* Op deze breedte kosten pijlen naast de pagina te veel: dan blijft er van een
       liggend A4 niets over. Ze staan hier over de randen van de pagina heen. */
    .galstage{display:block;position:relative}
    .galarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
      width:34px;height:56px;font-size:15px;background:rgba(10,35,66,.78)}
    .galprev{left:7px}
    .galnext{right:7px}
    .galveil{gap:12px;padding:0 18px}
    .galbar{gap:4px;margin-top:12px}
    .galdot{height:8px}
    .galfoot{font-size:10.5px;gap:10px;margin-top:10px}
    #nav,#overviewBtn,.hud.bl,.hud.tc,.floors,.ghostsheet{display:none!important}
    .hud.br{left:0;right:0;bottom:0;top:auto;margin:0;padding:11px 16px 11px 112px;
      text-align:right;background:var(--navy);border-top:1px solid var(--line);
      z-index:5;pointer-events:auto;line-height:1.6;font-size:9.5px;letter-spacing:.12em}
    #stage{padding-bottom:104px}
    #back{bottom:12px;left:12px;z-index:6;padding:9px 13px}
    .panel:last-of-type{margin-bottom:26px}
    /* balk bovenaan, anders schuift de eerste kaart onder merk en knop door; hoog
       genoeg voor logo mét ondertitel (tot ~70px) en de knop, anders steken die
       over de eerste kaart heen */
    html.canvas-on body::before{content:"";position:fixed;top:0;left:0;right:0;height:74px;
      background:var(--navy);border-bottom:1px solid var(--line);z-index:4}
    /* merk en knop compacter, zodat ze ook op een smal toestel naast elkaar passen */
    .brandlogo{width:118px;height:25px;margin-bottom:5px}
    .hud.tl{top:16px;left:16px;font-size:10px;letter-spacing:.14em}
    #meet{top:19px;right:16px;padding:11px 15px;font-size:11px}
    #stage{scroll-padding-top:90px}
    html.canvas-on body.depth1 #back,html.canvas-on body.depth2 #back{display:block}
  }
  /* Breed aanraakscherm (tablet): het deck geldt daar ook, maar een kaart over de volle
     breedte geeft metersbrede koppen boven een smalle tekstkolom. Kaarten op leesbreedte
     en gecentreerd; de galerijkaart mag iets breder voor het liggende A4. */
  @media (pointer:coarse) and (min-width:761px){
    .panel,.panel.wide,.panel.wide.active{width:min(660px,calc(100% - 32px));
      margin-left:auto;margin-right:auto}
    .panel.wide,.panel.wide.active{width:min(860px,calc(100% - 32px))}
  }