/* ============================================================================================
   PRIVACY · lichte proef op de gedeelde basis (ronde 1, 04-10-2026). Voortgangsproef, geen kandidaat.
   Laadt NA nx-basis.css. Juridische leespagina: leesbaarheid gaat voor. De tekst staat in privacy.html en is woordelijk
   die van preview-cinematic/privacy.html.
   Compositie (compositievoorstel §12): geen held, geen pauw. Eén vaste rustige achtergrond van licht marmer; de leeskolom
   ligt op een DEKKEND ivoren vlak (geen glas achter lange tekst). Vanaf 1440 px breed staan de attributen in twee vaste
   zijstroken (schema's); smaller staat er één smalle kopband (schema) onder de inleiding.
   Regellengte: de lopende tekst is hooguit 66 tekens breed (38rem).
   Inhoudsopgave: vanaf 1101 px een vaste kolom links van de tekst; smaller, met JavaScript, een knop "Ga naar onderdeel"
   die onder de kopbalk blijft staan (de weg terug naar de inhoudsopgave); zonder JavaScript staat de lijst open in de tekst.
   ============================================================================================ */

body[data-page="privacy"]{--lijn:max(20px,calc(var(--edge) - 12px));background:#f7f3ec}
body[data-page="privacy"] .site-footer{position:relative;z-index:2;padding-inline:var(--lijn)}
body[data-page="privacy"] .site-footer::before{left:var(--lijn);right:var(--lijn)}

.jr{position:relative;isolation:isolate;color:var(--nx-tekst);
  --jr-kolom:min(100% - 2 * var(--lijn),62rem);
  background:
    radial-gradient(60% 520px at 4% 380px,rgba(255,233,190,.5),rgba(255,233,190,0) 70%),
    radial-gradient(48% 640px at 98% 900px,rgba(176,224,222,.3),rgba(176,224,222,0) 70%),
    linear-gradient(180deg,#f7f3ec 0%,#f3eadb 30%,#f8f2e8 62%,#f1e6d4 100%)}
.jr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background:url("../scenes/lp3-marmer-aders.svg") 50% 0 / max(100%,1150px) auto repeat-y}
.jr .kw{font:inherit;color:inherit}
.jr-kolom,.jr-grid,.jr-slot-panel{width:var(--jr-kolom);margin-inline:auto}

/* label "schema, geen beeld": hoort bij de proef en niet bij de site */
.jr-schema{position:absolute;left:8px;bottom:8px;margin:0;padding:3px 9px;border-radius:999px;white-space:nowrap;
  font:400 10px/1.3 var(--sans);letter-spacing:.04em;color:var(--nx-inkt);background:rgba(255,253,248,.92);box-shadow:inset 0 0 0 1px rgba(176,138,69,.4)}
.jr-schema b{margin-right:6px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

/* ---------------------------------------------------------------- zijstroken (alleen vanaf 1440 px breed) */
.jr-strook{display:none}
@media (min-width:1440px){
  .jr-strook{display:block;position:fixed;top:calc(var(--header-h) + 24px);bottom:24px;z-index:-1;pointer-events:none;
    width:min(300px,calc((100vw - 62rem) / 2 - 40px))}
  .jr-strook--links{left:max(16px,calc((100vw - 62rem) / 4 - 150px))}
  .jr-strook--rechts{right:max(16px,calc((100vw - 62rem) / 4 - 150px))}
  .jr-strook img{width:100%;height:100%;object-fit:contain;object-position:50% 40%}
  .jr-band{display:none}
}

/* ---------------------------------------------------------------- inleiding */
.jr-intro{padding:calc(var(--header-h) + clamp(28px,5vw,72px)) 0 0}
.jr-intro .eyebrow{margin-bottom:14px;color:var(--nx-goud-tekst)}
.jr-intro h1{font:400 clamp(2.25rem,5.2vw,4.25rem)/1.05 var(--serif);letter-spacing:-.006em;color:var(--nx-navy);overflow-wrap:anywhere}
.jr-lead{max-width:34em;margin-top:18px;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.5;color:var(--nx-tekst);text-wrap:pretty}
.jr-status{display:flex;align-items:flex-start;gap:10px;width:fit-content;max-width:100%;margin-top:20px;padding:8px 14px;border-radius:12px;
  font-size:.9375rem;line-height:1.45;color:var(--nx-navy);background:#fffdf8;box-shadow:inset 0 0 0 1px rgba(176,138,69,.55)}
.jr-status-ic{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--nx-goud-tekst)}
.jr-status-ic svg{width:100%;height:100%}
.jr-band{position:relative;margin-top:clamp(20px,3vw,36px);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--nx-goud-zacht)}
.jr-band .jr-schema{left:8px;top:8px;bottom:auto}
.jr-band-plaat{display:block;width:100%;height:clamp(96px,17vw,176px);object-fit:cover;object-position:50% 100%}

/* ---------------------------------------------------------------- leeskolom op een dekkend licht vlak */
.jr-body{padding:clamp(28px,4vw,56px) 0 0}
.jr-grid{display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(20px,3.4vw,48px) clamp(18px,3.4vw,48px) clamp(28px,4vw,56px);
  border-radius:22px;background:#fffdf8;box-shadow:inset 0 0 0 1px var(--nx-goud-zacht),0 24px 48px -36px rgba(11,44,41,.35)}
.jr-tekst{min-width:0;max-width:38rem;font:400 1.0625rem/1.65 var(--sans);color:var(--nx-tekst)}
.jr-tekst p{margin-top:.9em;text-wrap:pretty}
.jr-kop h2{font:400 clamp(1.875rem,3.1vw,2.75rem)/1.08 var(--serif);letter-spacing:-.008em;color:var(--nx-navy);text-wrap:balance}
.jr-kop-lead{font-size:1.125rem}
.jr-gegevens{font-size:.9375rem;line-height:1.5;color:var(--nx-tekst)}
.jr-blok{position:relative;margin-top:clamp(36px,4.4vw,56px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--nx-goud-lijn);scroll-margin-top:calc(var(--header-h) + 76px)}
.jr-ic{display:block;width:22px;height:22px;margin-bottom:10px;color:var(--nx-petrol)}
.jr-ic svg{width:100%;height:100%}
.jr-concept{width:fit-content;margin:0 0 8px!important;padding:2px 10px;border-radius:999px;font:600 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--nx-goud-tekst);box-shadow:inset 0 0 0 1px rgba(104,74,16,.5)}
.jr-blok h2{font:400 clamp(1.5rem,2.2vw,1.9375rem)/1.12 var(--serif);color:var(--nx-navy);text-wrap:balance}
.jr-sub{margin-top:1.5em;font:400 1.3125rem/1.2 var(--serif);color:var(--nx-navy)}
.jr-tekst strong{font-weight:700;color:var(--nx-navy)}
.jr-check{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:2px}
.jr-check li{position:relative;padding:5px 0 5px 28px;font-size:.96875rem;line-height:1.45;color:var(--nx-navy);overflow-wrap:anywhere}
.jr-check li::before{content:"";position:absolute;left:4px;top:.72em;width:11px;height:6px;border-left:2px solid var(--nx-petrol);border-bottom:2px solid var(--nx-petrol);transform:rotate(-45deg)}
.jr-rechten{margin:1.1em 0 0;border-top:1px solid var(--nx-goud-zacht)}
.jr-rechten dt{margin:0;padding-top:12px;font:400 1.1875rem/1.2 var(--serif);color:var(--nx-navy)}
.jr-rechten dd{margin:0;padding:4px 0 12px;border-bottom:1px solid var(--nx-goud-zacht)}
/* links in de lopende tekst: onderstreept, raakvlak 44 px hoog zonder de regelafstand te veranderen */
.jr-tekst p a:not(.tekstlink),.jr-gegevens a{display:inline-block;margin:-10px 0;padding:10px 0;min-height:44px;color:var(--nx-navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--nx-goud);text-underline-offset:4px;overflow-wrap:anywhere}
.jr-tekst a:active{opacity:.62}
@media (hover:hover) and (pointer:fine){.jr-tekst p a:not(.tekstlink):hover,.jr-gegevens a:hover{color:var(--nx-focus);text-decoration-color:rgba(11,44,41,.5);text-decoration-thickness:2px}}
.jr-terug{margin-top:clamp(32px,4vw,48px)!important}
.jr-terug .tekstlink{color:var(--nx-navy)}

/* ---------------------------------------------------------------- inhoudsopgave */
.jr-toc-knop{display:none}
.jr-toc-paneel{padding:0 0 clamp(20px,3vw,32px)}
.jr-toc-titel{margin:0;font:500 .78125rem/1.35 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.jr-toc ol{list-style:none;margin:8px 0 0;padding:0;counter-reset:toc;border-top:1px solid var(--nx-goud-zacht)}
.jr-toc li{counter-increment:toc;border-bottom:1px solid var(--nx-goud-zacht)}
.jr-toc a{display:flex;align-items:center;gap:12px;min-height:46px;padding:6px 4px;font:400 1rem/1.3 var(--sans);color:var(--nx-navy);text-decoration:none;border-radius:6px}
.jr-toc a::before{content:counter(toc);flex:0 0 1.4em;font:400 1.0625rem/1 var(--serif);color:var(--nx-goud-tekst)}
.jr-toc a.is-actief{font-weight:700;box-shadow:inset 3px 0 0 var(--nx-petrol);padding-left:10px}
.jr-toc a:active{opacity:.62}
@media (hover:hover) and (pointer:fine){.jr-toc a:hover{color:var(--nx-focus);text-decoration:underline;text-underline-offset:4px}}
@media (min-width:1101px){
  .jr-grid{grid-template-columns:15rem minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:start}
  .jr-toc{position:sticky;top:calc(var(--header-h) + 28px)}
  .jr-toc-paneel{padding-bottom:0}
}
/* smal met JavaScript: de knop blijft onder de kopbalk staan; de lijst klapt eronder open als een dekkend vlak */
@media (max-width:1100px){
  html.pv-js .jr-toc{position:sticky;top:calc(var(--header-h) + 8px);z-index:20;margin-bottom:20px}
  html.pv-js .jr-toc-knop{display:inline-flex;--kn-bg:#fffdf8;--kn-schaduw:inset 0 0 0 1px rgba(11,44,41,.4),0 8px 16px -10px rgba(11,44,41,.45)}
  html.pv-js .jr-toc-knop[aria-expanded="true"] .arr{transform:rotate(180deg)}
  html.pv-js .jr-toc-paneel{position:absolute;left:0;top:calc(100% + 8px);width:min(100%,24rem);padding:16px 18px 10px;border-radius:16px;background:#fffdf8;box-shadow:inset 0 0 0 1px rgba(11,44,41,.3),0 22px 36px -22px rgba(11,44,41,.5)}
  html.pv-js .jr-toc-paneel[hidden]{display:none}
}

/* ---------------------------------------------------------------- slot */
.jr-slot{padding:clamp(56px,7vw,112px) 0 clamp(72px,8vw,128px)}
.jr-slot .eyebrow{color:var(--nx-goud-tekst)}
.jr-slot h2{font:400 clamp(2rem,3.7vw,3.625rem)/1.06 var(--serif);letter-spacing:-.012em;color:var(--nx-navy)}
.jr-slot-panel>p:not(.eyebrow){max-width:36em;margin-top:16px;font-size:clamp(1.03rem,1.25vw,1.1875rem);line-height:1.55;color:var(--nx-tekst)}
.jr-slot .glas-knop{margin-top:24px}
@media (max-width:599.98px){.jr-slot-panel>p br{display:none}}

@media (prefers-contrast:more){
  .jr{--nx-tekst:#131d33;--nx-goud-tekst:#3d2c06;--nx-goud-lijn:rgba(19,29,51,.7);--nx-goud-zacht:rgba(19,29,51,.5);background:#fffdf8}
  .jr::before{display:none}
  .jr-tekst p a:not(.tekstlink),.jr-gegevens a{text-decoration-color:currentColor}
}
@media (forced-colors:active){
  .jr-grid,.jr-status,.jr-concept,.jr-toc-paneel{border:1px solid CanvasText}
  .jr-check li::before{border-color:CanvasText}
  .jr-toc a.is-actief{outline:2px solid CanvasText;outline-offset:-2px}
}
@media print{.jr-strook,.jr-band,.site-header,.proefbadge{display:none}.jr-grid{box-shadow:none}}

/* ============================================================================================
   RONDE 2 (05-10-2026). Alleen stijl; geen woord, link of volgorde gewijzigd.
   ============================================================================================ */
/* 1. Toetsenbord. De basis houdt boven al ruimte vrij voor de vaste kopbalk (scroll-padding-top). Zelfde oplossing als
      Website Build ronde 2: 28 px vrij ONDER een element dat de focus krijgt, zodat het niet op de schermrand staat.
      Smal met JavaScript staat onder de kopbalk ook de knop "Ga naar onderdeel" vast (46 px + 8 px): de vrije ruimte
      boven is daar zo groot dat een halte ook niet achter die knop valt. */
html{scroll-padding-bottom:28px}
@media (max-width:1100px){html.pv-js{scroll-padding-top:calc(var(--header-h) + 8px + max(46px,3.4rem) + 14px)}}
/* een gekozen hoofdstuk begint direct onder die vrije ruimte (ronde 1: 180 px onder de kopbalk, door de ruimte dubbel te tellen) */
.jr-blok{scroll-margin-top:12px}
/* 2. Kopband: het schema wordt niet meer afgesneden (ronde 1: de kruin van de jade viel op 820-1439 px breed buiten de band);
      het hele schema past in de band, de ondergrond van de band loopt in dezelfde kleuren door. */
.jr-band{background:linear-gradient(180deg,#f7f3ec 0,#e9eeec 37.5%,#f6dcb8 67.8%,#d6c9ae 67.8%,#d6c9ae 68.7%,#f3ecdf 68.7%)}
.jr-band-plaat{object-fit:contain;object-position:50% 100%}
/* 3. Lage liggende schermen (1366x650, liggende telefoon): minder lucht boven en een lagere band, zodat het leesvlak
      eerder begint. De band blijft staan (weglaten is een eigenaarskeuze). */
@media (orientation:landscape) and (max-height:700px){
  .jr-intro{padding-top:calc(var(--header-h) + 24px)}
  .jr-band{margin-top:16px}
  .jr-band-plaat{height:120px}
  .jr-body{padding-top:20px}
}
@media (orientation:landscape) and (max-height:520px){
  .jr-intro{padding-top:calc(var(--header-h) + 12px)}
  .jr-lead{margin-top:10px}
  .jr-status{margin-top:12px}
  .jr-band{margin-top:12px}
  .jr-band-plaat{height:96px}
  .jr-body{padding-top:14px}
}
/* 4. Grote letter (200 %) en zoom: een lang woord mag afbreken in plaats van de pagina breder te duwen (gemeten: op 390 px
      breed met letter 32 px liep de tekst 15 px buiten beeld en werd de hele pagina, met de kopbalk, breder). */
.jr,body[data-page="privacy"] .site-footer{overflow-wrap:anywhere}
/* de zijstroken alleen als er naast de leeskolom werkelijk ruimte is, ook bij een grote letter: de grens telt in letterbreedtes
   (90em = 1440 px bij de gewone letter). Bij letter 200 % op 1536 px stak het schemalabel 129 px buiten beeld. */
@media (max-width:89.99em){.jr-strook{display:none}.jr-band{display:block}}