/* ===========================================================================
   De juridische pagina's.

   Donker met lichte letters, en met opzet zonder motief, zonder carrousel en
   zonder chat: dit zijn pagina's die iemand komt zoeken en niet pagina's die
   iets verkopen. Eigen bestand en niet pagina.css, want daar zit de hele
   productpagina in en die heeft hier niets te doen.

   Kleuren uit het salie-palet, letterlijk overgenomen zodat ze niet uit
   elkaar lopen: als het palet daar wijzigt, hoort dit mee te wijzigen.

   Hetzelfde geldt voor de twee maten van het woordmerk hieronder
   (--wordmark-bar-o/--wordmark-bar-rest): letterlijk overgenomen uit
   pagina.css, zodat de "Ōmata" hier altijd exact even groot en even zwaar
   oogt als in de navigatiebalk en de hero op de rest van de site. Wijzigt
   pagina.css die twee waarden, dan hoort dit bestand mee te wijzigen.
   =========================================================================== */
:root {
  --sumi:        #1e261f;
  --sumi-deep:   #141a15;
  --washi:       #eaf2e0;
  --washi-dim:   #a8bd9b;
  --lijn:        rgba(234, 242, 224, 0.16);
  --accent:      #93b39c;
  --gutter:      clamp(20px, 5vw, 48px);
  --wordmark-bar-o:    28px;
  --wordmark-bar-rest: 24px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--sumi-deep);
  color: var(--washi);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  /* Dezelfde twee regels als body in pagina.css, met dezelfde toelichting
     daar. Deze pagina's laden dat bestand niet — ze staan op hun eigen
     juridisch.css — en de wettelijke teksten staan vol met precies de
     woorden waar het om gaat ("gegevensbeschermingsautoriteit",
     "verwerkingsverantwoordelijke"). Nagemeten op /juridisch/privacy/: de
     lijstregels liepen buiten hun kolom. */
  hyphens: auto;
  overflow-wrap: break-word;
  /* Nagerekend: washi haalde als #dce8cf op sumi-deep #141a15 12,9:1, en
     als #eaf2e0 sinds 15 september 2026 meer; de
     gedempte tint #a8bd9b nog 7,7:1. De eis is 4,5. */
}

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px;
  background: var(--washi); color: var(--sumi-deep);
  text-decoration: none; font-weight: 500;
}
.overslaan:focus { left: 0; }

.jbalk {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 10px;
  gap: 16px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--lijn);
}
.jbalk a { color: var(--washi); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Het woordmerk en de taalknop: dezelfde opbouw als de echte navigatiebalk op
   de rest van de site (site/pagina.css, .wordmark/.taalkiezer), hier in de donkere
   uitvoering, permanent in plaats van voorwaardelijk. Deze pagina's hebben
   geen lichte stand om tussen te wisselen, dus is er geen "over een donker
   hero"-attribuut nodig zoals daar: dit ís altijd de donkere balk.

   Geen aparte "terug naar de hoofdpagina"-link en geen inlogknop meer (stond
   hier eerder): op verzoek is het woordmerk zelf de enige weg terug, en een
   inlogknop die alsnog naar de hoofdpagina doorstuurt in plaats van een
   scherm te openen, voegde niets toe naast die ene link.

   De kleurwaarde van de rand om de taalknop (washi op 0,65 dekking) is niet
   opnieuw gemeten, maar bewust hetzelfde genomen als de al gemeten "donkere
   balk over donker hero"-variant in pagina.css (regels rond .navbar[data-
   over-hero="true"] .taalkiezer__knop): dat haalt daar 3,70:1 voor een randkleur op een
   vergelijkbaar donkere ondergrond, en de kleurwaarde van washi hier
   (#eaf2e0) ligt dicht genoeg bij die daar (#e8eee1) om dezelfde marge aan
   te houden. Tekstkleur zelf is gewoon --washi, en die haalt op deze
   pagina's al 12,9:1 tegen --sumi-deep (zie bovenaan dit bestand). */
.jbalk__merk { display: inline-flex; align-items: baseline; }
/* leading 1,12 op de Ō: bij 0,9 wordt het macron afgesneden (zelfde reden als
   in pagina.css). Maat, gewicht, leading en letterafstand zijn hier bewust
   identiek aan .wordmark daar: geen eigen kleinere variant meer. */
.jbalk__merk .mark { font-size: var(--wordmark-bar-o); font-weight: 600; line-height: 1.12; letter-spacing: 0.01em; }
.jbalk__merk .rest { font-size: var(--wordmark-bar-rest); font-weight: 500; line-height: 0.9; letter-spacing: 0.02em; margin-left: -1px; }

.jbalk__acties { display: flex; align-items: center; gap: 12px; }

/* De taalkiezer. Zelfde klassenamen en zelfde opbouw als in pagina.css, en
   daarom hier opnieuw uitgeschreven in plaats van overgeërfd: deze pagina's
   laden pagina.css niet. Wijzig je de een, wijzig dan de ander.

   Alle drie de talen werken echt (juridisch.js/juridisch-vertaling.js); de
   actieve taal krijgt aria-current, gezet door dat script bij het laden, en
   de klik erop wordt daar ook afgevangen. Openen en sluiten van het paneel
   staat los in taalkiezer.js. */
.taalkiezer { position: relative; }
.taalkiezer__knop {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(234, 242, 224, 0.65);
  background: transparent; border-radius: 999px;
  padding: 7px 12px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--washi); white-space: nowrap; cursor: pointer;
}
.taalkiezer__knop:hover { background: rgba(234, 242, 224, 0.10); }
.taalkiezer__knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.taalkiezer__knop svg { flex: none; }
.taalkiezer__pijl { transition: transform 160ms var(--ease, ease); }
.taalkiezer__knop[aria-expanded="true"] .taalkiezer__pijl { transform: rotate(180deg); }

/* Het paneel is licht, ook al is de balk hier permanent donker: het hangt
   onder de balk over de pagina heen en hoort bij de pagina, niet bij de balk.
   Zelfde keuze als op de hoofdpagina boven een donker hero. */
.taalkiezer__paneel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 176px; padding: 5px;
  /* LIQUID GLASS, OP ELKE PAGINA.

     De vier waarden komen uit glas.css (de lichte ruit uit de overdracht
     van 14 september 2026), maar staan hier als terugval achter de tokens
     in plaats van als token: de taalkiezer staat op élke pagina en glas.css
     wordt maar door drie pagina's geladen. Waar dat bestand er wél is,
     volgt het paneel vanzelf mee als de ruit ooit wijzigt; waar het er niet
     is, staat dezelfde ruit er alsnog.

     De eigen schaduw blijft, en die is krapper dan de kaartschaduw uit de
     overdracht (0 10px 28px tegen 0 18px 40px). Dit is een uitklappaneel
     en geen kaart: het hoort aan zijn knop vast te zitten, niet los boven
     de pagina te zweven.

     Nagerekend op de twee ondergronden waar dit paneel over hangt. Op het
     lichte papier blijft het licht. In het donkere uitklapmenu van de
     hoofdpagina zakt het naar ongeveer #acb4a7, en --text-body haalt daar
     nog 8,2:1 — ruim boven de 4,5. */
  /* 0,90 en niet de 0,58 van de ruit elders: een menu ligt over lopende
     tekst en moet die afdekken. Zie de toelichting in pagina.css. */
  background: rgba(var(--glas-rgb, 240, 246, 232), 0.95);
  border: 1px solid var(--glas-rand-licht, rgba(255, 255, 255, 0.60));
  box-shadow: var(--glas-glans, inset 0 1px 0 rgba(255, 255, 255, 0.55)),
              0 10px 28px rgba(27, 25, 24, 0.28);
  backdrop-filter: blur(var(--glas-blur, 18px)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glas-blur, 18px)) saturate(140%);
  border-radius: 12px;
}
.taalkiezer__paneel[hidden] { display: none; }

/* Zonder backdrop-filter is een halfdoorschijnend paneel onrustig in plaats
   van mat; dan dekking omhoog. Zelfde afspraak als in glas.css. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .taalkiezer__paneel { background: rgba(240, 246, 232, 0.96); }
}

/* .jbalk a hierboven zet elke link in de balk op --washi; het paneel ligt
   binnen die balk in de DOM, dus die kleur moet hier terug naar de tekst. */
.jbalk .taalkiezer__paneel a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: var(--sumi-deep); font-size: 14px;
}
.taalkiezer__paneel a:hover { background: rgba(27, 25, 24, 0.07); }
/* --accent en niet --sumi-deep is hier fout, en dat is nagerekend: #93b39c op
   het lichte paneel (#eaf2e0) haalt 1,99:1, terwijl een focusrand en een
   statusicoon allebei 3:1 moeten halen. Op de donkere balk klopt --accent
   wel, en daar staat hij dan ook nog. Binnen het paneel is de ondergrond
   omgekeerd, dus de kleur moet mee omkeren: #141a15 haalt er 14,3:1. */
.taalkiezer__paneel a:focus-visible { outline: 3px solid var(--sumi-deep); outline-offset: -1px; }
.taalkiezer__code {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--sumi-light, #6a6864); width: 22px; flex: none;
}
.taalkiezer__paneel a[aria-current="true"] { font-weight: 600; }
.taalkiezer__vink { margin-left: auto; flex: none; color: var(--sumi-deep); }
.taalkiezer__paneel a:not([aria-current="true"]) .taalkiezer__vink { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .taalkiezer__pijl { transition: none; }
}

.jinhoud {
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 96px);
}

h1 {
  margin: 0 0 6px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 600;
}
h2 {
  margin: 40px 0 10px;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
}
p { margin: 0 0 14px; }
.jlead { color: var(--washi-dim); font-size: clamp(17px, 1.8vw, 20px); }

ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--accent); }

.jbron { color: var(--washi-dim); font-size: 15px; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: rgba(234, 242, 224, 0.1); padding: 0.1em 0.4em; border-radius: 4px; }

/* De cookietabel op de cookiepagina (Microsoft Clarity, 7 september 2026).
   Losse omwikkeling met overflow-x: op een telefoon past de vierde kolom
   niet naast de derde, en horizontaal scrollen binnen de tabel is dan beter
   dan tekst laten afbreken tot onleesbaarheid. */
.jtabel-wrap { overflow-x: auto; margin: 0 0 20px; }
.jtabel { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.jtabel caption { text-align: left; color: var(--washi-dim); font-size: 13px; margin-bottom: 8px; }
.jtabel th, .jtabel td { text-align: left; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.jtabel th { color: var(--washi-dim); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.jtabel code { font-size: 0.95em; color: var(--washi); }

/* Het kader met de waarschuwing dat deze pagina, ondanks de echte tekst
   erin, nog niet volledig of nagekeken is. Gestreept en niet vol: het moet
   eruitzien als iets wat nog niet af is. */
.jvlag {
  margin: 0 0 32px;
  padding: 16px 18px;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: rgba(147, 179, 156, 0.08);
}
.jvlag p:last-child { margin-bottom: 0; }
.jvlag strong { color: var(--washi); }

/* 10 september 2026: van --washi-dim naar --washi. Die gedempte tint haalde
   8,77:1 op de grond hier, ruim boven de eis van 4,5, en was toch te matig om
   comfortabel te lezen — dezelfde bevinding als bij .voet in pagina.css, met
   dezelfde reden: een contrastverhouding zegt niets over hoe een dunne lichte
   letter op een bijna zwarte grond oogt. Deze voet draagt de wettelijke
   identificatie, dus dit is niet de plek om er stil te houden. */
.jvoet {
  border-top: 1px solid var(--lijn);
  padding: 24px var(--gutter) 40px;
  color: var(--washi);
  font-size: 15px;
}
.jvoet__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; list-style: none; }
.jvoet a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.jvoet a:hover { color: var(--washi); }

/* Zie de toelichting bij .voet__sociaal in pagina.css. Hier herhaald omdat de
   juridische pagina's alleen dit bestand laden, en ná .jvoet a hierboven:
   beide selectors wegen even zwaar, dus de laatste wint en het logo houdt
   zijn witte stand. */
.voet__sociaal { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 16px; }
.voet__sociaal a { display: inline-flex; align-items: center; color: var(--washi); opacity: .85; padding: 10px; margin: -10px; }
.voet__sociaal a:hover { color: var(--washi); opacity: 1; }
.voet__sociaal a:focus-visible { outline: 3px solid var(--washi); outline-offset: 0; border-radius: 6px; }
.voet__logo { width: 24px; height: 24px; fill: currentColor; display: block; }

/* De links in de inhoud. Er stond hier tot 17 september 2026 geen regel voor:
   de balk had er een en de voet had er een, maar een link in een <li> of een
   alinea van de tekst zelf kreeg het browserblauw #0000EE — op --sumi-deep
   (#141a15) een contrast van 1,88 op 1, tegen de 4,5 die WCAG voor
   tekst vraagt. Dat gold voor alle elf inhoudslinks: de vier mailto's, het
   telefoonnummer van Group Induver, de twee KBO-fiches, de FSMA-fiche en de
   privacyverklaring van Microsoft, in alle drie de talen. Dezelfde kleur als
   de voet (7,72 op 1), zodat een link overal op deze pagina’s hetzelfde is. */
.jinhoud a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.jinhoud a:hover { color: var(--washi); }

/* De drie wettelijke voetregels. Sinds 10 september 2026 staan ze ook hier,
   uit dezelfde bron als op de lichte pagina's (voet.js via voet_regels.js).
   Daarvoor stond er één zin die zei dat het FSMA-nummer van Ōmata nog moest
   volgen — een eigen inschrijving die er niet komt zolang de rol
   leadgenerator is, en die de tekst veertig regels hoger al ontkende. */
.jvoet .voet__regel { margin: 0 0 6px; max-width: 92ch; }
.jvoet .voet__regel:last-child { margin-bottom: 0; }
.jvoet .voet__klein { font-size: 13.5px; opacity: .85; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}