/* ---------------------------------------------------------------------------
   Donkere modus voor de hele site, op één plek.

   Waarom dit bestand bestaat: elke pagina had zijn eigen kopie van de kleuren.
   Alleen de voorpagina kende een nachtmodus, dus wie daar donker koos en
   doorklikte naar de kennisbank, de privacyverklaring of het aanmeldformulier
   kreeg een wit scherm in zijn gezicht. En een kleurcorrectie moest vier keer
   gemaakt worden, wat in de praktijk niet gebeurde.

   Werkwijze: elke pagina houdt zijn eigen LICHTE kleuren in zijn eigen :root.
   Dit bestand overschrijft alleen de donkere waarden, met een selector die
   zwaarder weegt dan :root, dus de volgorde van laden maakt niet uit. Twee
   prefixen omdat het aanmeldformulier zijn eigen naamgeving heeft (ob-).

   De waarden staan twee keer: één keer voor de handmatige keuze
   (data-thema="donker") en één keer voor de systeemvoorkeur zonder keuze. Dat
   is geen slordigheid maar de enige manier: CSS kan een blok declaraties niet
   delen tussen een selector en een mediaquery. Pas ze dus altijd samen aan.
   --------------------------------------------------------------------------- */

/* De lichte waarden voor de kop stonden alleen in index.html. Sinds de kop-CSS
   hier staat, hebben de kennisbank en de juridische pagina's ze ook nodig; zonder
   --pl5-knopvlak werd "Account aanmaken" witte tekst op wit. Dit zijn alleen
   terugvalwaarden: zet een pagina ze zelf, dan wint die (die staat later). */
:root {
  --pl5-knopvlak: #2553d6;
  --pl5-nav-bg: rgba(255,255,255,.9);
  --pl5-lijn-zacht: #f0eeea;
  --pl5-accent-z: #e9eefc;
  --pl5-schaduw-k: 0 2px 8px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.08);
}
html[data-thema="donker"] {
  --pl5-accent: #5b82ee; --pl5-accent-d: #7d9cf3; --pl5-accent-z: #1c2742;
  --pl5-inkt: #f2f0eb; --pl5-grijs: #a29f98; --pl5-lijn: #34322f; --pl5-lijn-zacht: #2a2926;
  --pl5-bg: #161513; --pl5-vlak: #1d1c1a; --pl5-kaart: #232220; --pl5-balk: #1a1917;
  --pl5-schaduw: 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.4);
  --pl5-schaduw-k: 0 0 0 1px rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.45);
  --pl5-schaduw-b: 0 0 0 1px rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.55);
  --pl5-groen: #4fc47f; --pl5-groen-z: #17301f; --pl5-nav-bg: rgba(22,21,19,.9);
  --pl5-knopvlak: #3f66d9;
  --ob-accent: #5b82ee; --ob-accent-d: #7d9cf3; --ob-accent-z: #1c2742;
  --ob-inkt: #f2f0eb; --ob-grijs: #a29f98; --ob-lijn: #34322f;
  --ob-bg: #161513; --ob-kaart: #232220; --ob-groen: #4fc47f; --ob-rood: #e77b6f;
  --ob-knopvlak: #3f66d9;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-thema="licht"]) {
    --pl5-accent: #5b82ee; --pl5-accent-d: #7d9cf3; --pl5-accent-z: #1c2742;
    --pl5-inkt: #f2f0eb; --pl5-grijs: #a29f98; --pl5-lijn: #34322f; --pl5-lijn-zacht: #2a2926;
    --pl5-bg: #161513; --pl5-vlak: #1d1c1a; --pl5-kaart: #232220; --pl5-balk: #1a1917;
    --pl5-schaduw: 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.4);
    --pl5-schaduw-k: 0 0 0 1px rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.45);
    --pl5-schaduw-b: 0 0 0 1px rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.55);
    --pl5-groen: #4fc47f; --pl5-groen-z: #17301f; --pl5-nav-bg: rgba(22,21,19,.9);
    --pl5-knopvlak: #3f66d9;
    --ob-accent: #5b82ee; --ob-accent-d: #7d9cf3; --ob-accent-z: #1c2742;
    --ob-inkt: #f2f0eb; --ob-grijs: #a29f98; --ob-lijn: #34322f;
    --ob-bg: #161513; --ob-kaart: #232220; --ob-groen: #4fc47f; --ob-rood: #e77b6f;
    --ob-knopvlak: #3f66d9;
    color-scheme: dark;
  }
}

/* De schakelaar. Op een breed scherm een rond icoon in de balk; in het
   uitklapmenu op de telefoon een gewone regel met een bijschrift erbij. */
.pl5-thema {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1.5px solid var(--pl5-lijn, #d2d2d7); background: var(--pl5-kaart, #fff);
  color: var(--pl5-inkt, #1d1d1f); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; margin-left: 6px;
  transition: transform .15s ease, border-color .15s ease;
}
.pl5-thema:hover { transform: scale(1.06); border-color: var(--pl5-accent, #2553d6); }
.pl5-thema svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl5-thema .pl5-maan { display: block; }
.pl5-thema .pl5-zon { display: none; }
html[data-thema="donker"] .pl5-thema .pl5-maan { display: none; }
html[data-thema="donker"] .pl5-thema .pl5-zon { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-thema="licht"]) .pl5-thema .pl5-maan { display: none; }
  html:not([data-thema="licht"]) .pl5-thema .pl5-zon { display: block; }
}
.pl5-thema-tekst { display: none; }

/* Het logovierkant staat op de inktkleur. In het donker is inkt bijna wit, dus
   dan zou er een wit blokje in de balk staan; daar wordt het het accent. */
html[data-thema="donker"] .pl5-logo-blok,
html[data-thema="donker"] .ob-logo-blok { background: var(--pl5-accent, #5b82ee); }
@media (prefers-color-scheme: dark) {
  html:not([data-thema="licht"]) .pl5-logo-blok,
  html:not([data-thema="licht"]) .ob-logo-blok { background: var(--pl5-accent, #5b82ee); }
}

/* Beeldmateriaal en losse vlakken die in het donker te hard oplichten. */
html[data-thema="donker"] img:not([src$=".svg"]) { filter: brightness(.92); }
@media (prefers-color-scheme: dark) { html:not([data-thema="licht"]) img:not([src$=".svg"]) { filter: brightness(.92); } }

/* Het beeldmerk staat altijd wit in het gekleurde vierkant, in beide thema's. */
/* Het merk is breder dan hoog; met een vaste vierkante maat bleef het klein in
   het midden van het vierkantje hangen. */
.pl5-logo-blok svg, .ob-logo-blok svg { width: 16px; height: 16px; }


/* ---------------------------------------------------------------------------
   De kop, gedeeld door alle pagina's.

   De kennisbank had een eigen, uitgeklede kop: alleen Prijs, Kennisbank en een
   demoknop, geen inlogknop en geen menu. Wie via Google op een kennisbankartikel
   binnenkomt, kreeg dus een andere site te zien dan wie op de voorpagina landt.
   Deze opmaak stond alleen in index.html; nu staat hij hier, zodat elke pagina
   dezelfde kop heeft zonder dat het vier keer onderhouden moet worden.
   --------------------------------------------------------------------------- */
.pl5-nav { position: sticky; top: 0; background: var(--pl5-nav-bg); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--pl5-lijn-zacht); z-index: 10; }
.pl5-nav .pl5-nav-in { display: flex; align-items: center; justify-content: space-between;
  height: 52px; max-width: 1060px; margin: 0 auto; padding: 0 22px; }
/* De balk deelt .pl5-kolom met de inhoud van de pagina. Op de juridische
   pagina's heeft die een padding van 46 en 80 pixels, en dan wordt de balk
   126 pixels hoog in plaats van 52. Vandaar deze zwaardere selector. */
.pl5-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--pl5-inkt); text-decoration: none; }
.pl5-logo-blok { width: 26px; height: 26px; border-radius: 7px; background: var(--pl5-inkt); display: inline-flex; align-items: center; justify-content: center; }
.pl5-logo-blok svg { width: 16px; height: 16px; }
.pl5-nav-rechts { display: flex; align-items: center; gap: 22px; }
.pl5-nav-rechts a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--pl5-inkt); }
.pl5-knop { display: inline-block; background: var(--pl5-knopvlak); color: #fff !important; font-weight: 600; font-size: 17px; padding: 13px 28px; border: 1.5px solid var(--pl5-knopvlak); border-radius: 999px; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.pl5-knop:hover { transform: scale(1.03); background: var(--pl5-accent-d); }
.pl5-knop-licht { display: inline-block; background: transparent; color: var(--pl5-accent-d) !important; font-weight: 600; font-size: 17px; padding: 13px 28px; border-radius: 999px; border: 1.5px solid var(--pl5-accent-d); text-decoration: none; }
.pl5-nav .pl5-knop { padding: 7px 17px; font-size: 13.5px; }
.pl5-knop-vol { display: block; text-align: center; margin-top: 22px; }
.pl5-menuknop { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--pl5-inkt); }
.pl5-menuknop svg { width: 24px; height: 24px; display: block; }
.pl5-knop-licht { display: inline-block; padding: 13px 24px; border-radius: 999px; border: 1.5px solid var(--pl5-lijn); color: var(--pl5-inkt); text-decoration: none; font-weight: 600; font-size: 15px; transition: border-color .15s ease; }
.pl5-knop-licht:hover { border-color: var(--pl5-accent); }
.pl5-nav-links { display: inline-flex; align-items: center; gap: 14px; }
.pl5-inlogknop { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--pl5-inkt); background: none; border: 1.5px solid var(--pl5-lijn); border-radius: 999px;
  padding: 6px 15px; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.pl5-inlogknop:hover { border-color: var(--pl5-accent); background: var(--pl5-accent-z); }
.pl5-inlogknop svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl5-paneel { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; }
.pl5-paneel.pl5-aan { display: flex; }
.pl5-paneel-waas { position: absolute; inset: 0; background: rgba(10,10,10,.44); backdrop-filter: blur(3px); }
.pl5-paneel-kaart { position: relative; width: 100%; max-width: 430px; background: var(--pl5-kaart); border: 1px solid var(--pl5-lijn);
  border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.28); padding: 32px 32px 26px; animation: pl5-paneel-in .2s ease-out; }
.pl5-paneel-kaart h2 { font-size: 22px; letter-spacing: -.7px; margin: 0 0 6px; color: var(--pl5-inkt); }
.pl5-paneel-kaart p { color: var(--pl5-grijs); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.pl5-paneel-sluit { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--pl5-vlak); color: var(--pl5-grijs); font-size: 18px; line-height: 1; cursor: pointer; }
.pl5-paneel-sluit:hover { color: var(--pl5-inkt); }
.pl5-adresveld { display: flex; align-items: stretch; border: 1.5px solid var(--pl5-lijn); border-radius: 12px; overflow: hidden; background: var(--pl5-kaart); }
.pl5-adresveld:focus-within { border-color: var(--pl5-accent); }
.pl5-adresveld input { flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--pl5-inkt);
  background: none; border: none; padding: 12px 4px 12px 14px; }
.pl5-adresveld input:focus { outline: none; }
.pl5-adresveld span { display: flex; align-items: center; padding: 0 14px 0 0; font-size: 16px; font-weight: 600; color: var(--pl5-grijs); white-space: nowrap; }
.pl5-paneel-knop { width: 100%; margin-top: 14px; font-family: inherit; font-size: 16px; font-weight: 600; color: #fff;
  background: var(--pl5-accent); border: none; border-radius: 999px; padding: 13px 20px; cursor: pointer; }
.pl5-paneel-knop:disabled { opacity: .45; cursor: default; }
.pl5-paneel-fout { display: none; margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: #c0392b; }
.pl5-paneel-fout.pl5-aan { display: block; }
.pl5-paneel-voet { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--pl5-lijn); font-size: 13.5px; color: var(--pl5-grijs); line-height: 1.7; }
.pl5-paneel-voet a { color: var(--pl5-accent); font-weight: 600; text-decoration: none; }
.pl5-paneel-voet a:hover { text-decoration: underline; }
.pl5-paneel-hulp { display: none; margin-top: 10px; font-size: 13.5px; color: var(--pl5-grijs); line-height: 1.7; }
.pl5-paneel-hulp.pl5-aan { display: block; }

/* Op een telefoon klapt het menu uit onder de balk. Zonder dit blok blijven de
   links op een binnenpagina naast elkaar staan en lopen ze uit het scherm. */
@media (max-width: 760px) {
  .pl5-menuknop { display: block; }
  .pl5-nav-rechts { display: none; position: fixed; inset: 52px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 18px 18px; border-bottom: 1px solid var(--pl5-lijn);
    box-shadow: 0 18px 40px rgba(0,0,0,.10); background: var(--pl5-kaart); backdrop-filter: none; }
  .pl5-nav-rechts.pl5-open { display: flex; }
  .pl5-nav-rechts a:not(.pl5-knop) { display: block; padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--pl5-lijn); }
  .pl5-nav-rechts .pl5-knop { margin-top: 14px; text-align: center; }
  .pl5-nav-rechts .pl5-thema { width: auto; height: auto; margin: 14px 0 0; padding: 13px 16px;
    border-radius: 12px; justify-content: flex-start; gap: 11px; font-family: inherit; font-size: 15px; font-weight: 500; }
  .pl5-nav-rechts .pl5-thema .pl5-naar-donker { display: inline; }
  .pl5-nav-rechts .pl5-thema .pl5-naar-licht { display: none; }
  html[data-thema="donker"] .pl5-nav-rechts .pl5-thema .pl5-naar-donker { display: none; }
  html[data-thema="donker"] .pl5-nav-rechts .pl5-thema .pl5-naar-licht { display: inline; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  html:not([data-thema="licht"]) .pl5-nav-rechts .pl5-thema .pl5-naar-donker { display: none; }
  html:not([data-thema="licht"]) .pl5-nav-rechts .pl5-thema .pl5-naar-licht { display: inline; }
}
@media (max-width: 400px) { .pl5-inlogknop span { display: none; } .pl5-inlogknop { padding: 6px 10px; } }