/* PrivaSearch: de publieke site (marketing, juridische pagina's, het doorstuurformulier).

   Dezelfde taal als de werkruimte-app: de tokens (--priva-*) en de klassen voor glas, diepte,
   bediening en beweging komen uit priva.css, dat de layout vóór dit bestand koppelt. Hier staat
   alleen wat van de site zelf is: de opbouw, de typografie, de iconen en de donkere panelen.

   Afspraken (7 oktober 2026):
   - geen kleur als losse hexwaarde, behalve de eigen tinten van de site in :root hieronder;
   - een glaslaag heeft een dekkende terugval; doorschijnend en vervagen staan onder @supports;
   - alles wat verschuift of animeert staat in het ene blok onder prefers-reduced-motion:
     no-preference, onderaan. Wie minder beweging vraagt ziet meteen de eindtoestand;
   - geen inline stijl of script: de pagina draait onder een strikte CSP. */

:root {
    --ink: var(--priva-ink);
    --muted: var(--priva-muted);
    --paper: var(--priva-paper);
    --line: var(--priva-line);
    --soft: var(--priva-soft);
    --dark: var(--priva-primary);
    --warn: var(--priva-danger);
    --warn-soft: var(--priva-danger-bg);
    --ease: var(--priva-ease-out);

    /* De eigen tinten van de site: het mint van de huisstijl (versiering, en tekst op een donker
       paneel) en het donkere paneel zelf. Het contrast van elk paar hieronder wordt nagerekend in
       resources/js/marketing/__tests__/glass.test.ts. */
    --site-mint: #b7e3c0;
    --site-mint-deep: #5f9e84;
    --site-dark-top: #1d4f45;
    --site-dark-bottom: #0f2b27;
    --site-on-dark: #e8f1ea;
    --site-on-dark-muted: #c9dbcf;
    --site-warn-tile: #f3ddd4;

    /* De gloed op een donker paneel: mint linksonder en diep mint rechtsboven. De dekking is zo
       gekozen dat tekst ook op het lichtste punt van het paneel 4,5:1 haalt. */
    --site-glow-mint: 14%;
    --site-glow-deep: 28%;

    /* De bovenbalk van de site is dichter dan die van de app (88% tegen 78%): hier schuift ze over
       een donker paneel, en de focusring van een menulink moet daar 3:1 halen. */
    --site-glass-bar: 88%;

    /* Afgeleiden van de gedeelde tokens: de lichte bovenrand van een gevulde knop, de vulling van
       een rij bij de muis en van een tabelkop op glas, en de duur van een illustratie (een icoon dat
       één keer beweegt, de regels van het voorbeeld). */
    --site-sheen: inset 0 1px 0 color-mix(in srgb, var(--priva-surface) 22%, transparent);
    --site-hover: color-mix(in srgb, var(--priva-surface) 60%, transparent);
    --site-link-tint: color-mix(in srgb, var(--priva-accent) 18%, transparent);
    --site-head: color-mix(in srgb, var(--priva-soft) 60%, transparent);
    --site-illustration: 700ms;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--priva-font-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* De achtergrond van de site is die van de app (de klasse `mesh` uit priva.css): het papier met de
   drie tinten. Een marketingpagina is vele schermen hoog, dus hier herhalen de tinten zich om de
   120rem, elk met haar middelpunt ruim binnen die strook zodat er geen naad is. Geen beweging: de
   drie drijvende lichtvlekken van vroeger zijn weg. */
body.mesh {
    min-height: 100dvh;
    background-image:
        radial-gradient(ellipse 52rem 30rem at 6% 20%, var(--priva-mesh-sage), transparent 72%),
        radial-gradient(ellipse 44rem 28rem at 98% 40%, var(--priva-mesh-warm), transparent 72%),
        radial-gradient(ellipse 48rem 30rem at 64% 64%, var(--priva-mesh-mint), transparent 72%),
        radial-gradient(ellipse 40rem 26rem at 2% 82%, var(--priva-mesh-warm), transparent 72%);
    background-size: 100% 120rem;
    background-repeat: repeat-y;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Eén focusring voor alles wat focus kan krijgen, dezelfde als in de app. */
:focus-visible {
    outline: 3px solid var(--priva-focus);
    outline-offset: 3px;
    border-radius: var(--priva-radius-label);
}

/* Op een donker paneel is de groene ring te donker (onder 3:1); daar is hij mint. */
.cta :focus-visible,
.panel-dark :focus-visible {
    outline-color: var(--site-mint);
}

html {
    scroll-padding-top: 5.5rem;
}

/* --- Raamwerk ----------------------------------------------------------- */

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
}

/* De bovenbalk is de glaslaag `glass-bar` (de klasse staat in de layout): doorschijnend papier dat
   vervaagt wat eronder schuift. Met JavaScript is hij bovenaan de pagina nog doorzichtig en wordt hij
   glas zodra de pagina schuift (`is-stuck`) of het menu open is. Op de balk staat alleen inkt:
   gedempte tekst haalt 4,5:1 niet boven een donker paneel. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--priva-line);
    transition:
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out);
}

.js .topbar:not(.is-stuck):not(.nav-open) {
    --priva-elev: 0 0 transparent;
    --priva-edge: 0 0 transparent;
    border-bottom-color: transparent;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ruimte tussen het woordmerk en het menu, ook met de langere Duitse labels (PRIV-242). */
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--priva-target);
    flex: 0 0 auto;
}

.brand-logo {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

/* Het woordmerk: Priva in het lettertype van de tekst, Search in dat van de koppen. */
.brand-word {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.03em;
}

.brand-word span {
    color: var(--muted);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
}

/* Het woordmerk op de balk: het tweede deel is ook inkt zodra de balk glas is. */
.topbar .brand-word span {
    color: var(--ink);
    opacity: 0.82;
}

.topbar nav {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 14px;
    margin-left: auto;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 26px;
}

/* Hamburger: alleen zichtbaar op smalle schermen en alleen als JavaScript draait. */
.nav-toggle {
    display: none;
    width: var(--priva-target);
    height: var(--priva-target);
    padding: 0;
    align-items: center;
    justify-content: center;
    background-color: var(--priva-surface);
    border: 1px solid var(--priva-outline);
    border-radius: var(--priva-radius-control);
    box-shadow: var(--priva-shadow-1);
    color: var(--ink);
    cursor: pointer;
    transition:
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out);
}

.nav-toggle:hover {
    background-color: var(--priva-soft);
    border-color: var(--ink);
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
}

.nav-toggle-bars::before {
    transform: translateY(-6px);
}

.nav-toggle-bars::after {
    transform: translateY(6px);
}

.topbar.nav-open .nav-toggle-bars {
    background: transparent;
}

.topbar.nav-open .nav-toggle-bars::before {
    transform: rotate(45deg);
}

.topbar.nav-open .nav-toggle-bars::after {
    transform: rotate(-45deg);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.topbar nav a:not(.button) {
    position: relative;
    padding: 10px 0;
    white-space: nowrap;
    color: var(--ink);
    transition: color var(--priva-duration) var(--priva-ease-out);
}

.topbar nav a:not(.button)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--priva-accent);
    opacity: 0;
    transition: opacity var(--priva-duration) var(--priva-ease-out);
}

.topbar nav a.active {
    font-weight: 600;
}

.topbar nav a:not(.button):hover::after,
.topbar nav a.active::after {
    opacity: 1;
}

/* --- Knoppen ------------------------------------------------------------ */

/* Dezelfde rangorde als in de app: de hoofdknop is dekkend donker met een lichte bovenrand, de
   tweede knop is een dekkend wit vlak met de omlijning (3:1 op elk vlak). Minstens 44 pixels hoog. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--priva-target);
    padding: 9px 22px;
    border: 1px solid var(--priva-primary);
    border-radius: var(--priva-radius-control);
    background-color: var(--priva-primary);
    color: var(--priva-on-primary);
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--site-sheen), var(--priva-shadow-1);
    transition:
        color var(--priva-duration) var(--priva-ease-out),
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out),
        translate var(--priva-duration) var(--priva-ease-out);
}

.button:hover {
    border-color: var(--priva-primary-hover);
    background-color: var(--priva-primary-hover);
    box-shadow: var(--site-sheen), var(--priva-shadow-2);
}

.button.secondary {
    border-color: var(--priva-outline);
    background-color: var(--priva-surface);
    color: var(--ink);
    box-shadow: var(--priva-shadow-1);
}

.button.secondary:hover {
    border-color: var(--ink);
    background-color: var(--priva-soft);
    box-shadow: var(--priva-shadow-2);
}

/* --- Typografie --------------------------------------------------------- */

.eyebrow {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0 0 18px;
}

h1 {
    font-size: clamp(34px, 4vw, 52px);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    letter-spacing: -1.2px;
    line-height: 1.12;
    /* Het kleurverloop vult alleen het vlak van de kop: zonder deze ruimte valt de staart van een g of
       een j van de onderste regel erbuiten en is ze afgekapt. De marge geeft dezelfde ruimte terug. */
    padding-bottom: 0.18em;
    margin: 0 0 calc(22px - 0.18em);
    max-width: 22ch;
    background: linear-gradient(165deg, var(--ink) 30%, var(--priva-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h2 {
    font-size: clamp(26px, 3vw, 38px);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    letter-spacing: -1.2px;
    line-height: 1.15;
    margin: 0 0 18px;
    max-width: 22ch;
}

h3 {
    font-size: 18px;
    margin: 0 0 8px;
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
}

.lead {
    font-size: 19px;
    color: var(--muted);
    max-width: 560px;
    margin: 0 0 32px;
}

/* Een label: een pil met een dekkende tint, een scherpe rand en een punt ervoor, zoals in de app.
   Het is informatie, geen knop: geen toestand bij de muis. */
.tagline,
.chip,
.mock .badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--priva-outline);
    border-radius: 999px;
    background-color: var(--priva-badge-neutral);
    color: var(--ink);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
    padding: 3px 11px;
    white-space: nowrap;
    box-shadow: var(--site-sheen), var(--priva-shadow-1);
}

.tagline::before,
.chip::before,
.mock .badge::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.tagline {
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.inline-link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

/* Onder de muis vult een tint van het accent de link vanaf de onderstreping: de lijn wordt een
   markeerstreep. Het vullen zelf staat in het blok voor beweging; zonder dat blok staat de tint er
   meteen. */
.inline-link,
.footer-note a {
    background-image: linear-gradient(var(--site-link-tint), var(--site-link-tint));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0;
    border-radius: 2px;
}

.inline-link:hover,
.footer-note a:hover {
    background-size: 100% 100%;
    text-decoration-color: var(--ink);
}

/* --- Glas: de panelen van de site ---------------------------------------

   Elk vlak hieronder is de laag `glass-panel` van de app (wit) of `glass-soft` (salie), opgebouwd
   uit dezelfde tokens. Buiten @supports is het de dekkende vulkleur. Een laag in de pagina vervaagt
   niet: ze ligt op de egale achtergrond, en vervagen kost op een lange pagina alleen rekentijd. */
.mock,
.price,
.verder a,
.duo article,
.objections article,
.legal-facts,
.tiers-wrap,
.mail,
.form,
.faq-accordion details,
section.legal,
.done,
.toc {
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--priva-surface);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-1);
}

.callout,
.quote,
footer {
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--priva-soft);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-1);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .topbar.glass-bar {
        --priva-layer-opacity: var(--site-glass-bar);
    }

    .mock,
    .price,
    .verder a,
    .duo article,
    .objections article,
    .legal-facts,
    .tiers-wrap,
    .mail,
    .form,
    .faq-accordion details,
    section.legal,
    .done,
    .toc {
        background-color: color-mix(in srgb, var(--priva-surface) var(--priva-glass-panel), transparent);
    }

    .callout,
    .quote,
    footer {
        background-color: color-mix(in srgb, var(--priva-soft) var(--priva-glass-soft), transparent);
    }
}

/* --- Iconentegel -------------------------------------------------------- */

/* Eén rand en één lichtlijn, op een dekkend wit vlak met de eerste trede schaduw. */
.icon-tile {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: var(--priva-radius-panel);
    color: var(--priva-accent);
    background-color: var(--priva-surface);
    border: 1px solid var(--priva-line);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-1);
    transition:
        color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        background-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out),
        translate var(--priva-duration) var(--priva-ease-out);
}

.icon {
    flex: 0 0 auto;
    color: var(--priva-accent);
}

/* Het aanraakvlak is de hele li, pijler of kaart, niet de tegel van 46px: je hovert een kaart,
   niet een icoontje. De tegel komt een trede omhoog; wat de glyph daarbij doet staat in het blok
   met beweging onderaan. */
:is(li, .pillar, .card):hover > .icon-tile {
    color: var(--ink);
    border-color: var(--priva-outline);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.rail li:hover::after {
    color: var(--priva-accent);
}

/* Een glyphdeel dat wegschuift mag buiten de 24×24 vallen; in de tegel van 46px is daar ruimte voor. */
.icon-tile svg {
    overflow: visible;
}

.icon-tile svg > * {
    transform-box: fill-box;
    transform-origin: center;
}

/* Lijnen die zich laten tekenen dragen hun eigen lengte in --len; de dasharray staat er altijd op,
   want een streep die precies even lang is als het pad zie je niet. */
.i-draw {
    --len: 30;
    stroke-dasharray: var(--len);
    stroke-dashoffset: 0;
}

[data-icon="review"] .i-check {
    --len: 9;
}

[data-icon="eye-off"] .i-slash {
    --len: 25;
}

[data-icon="trail"] .i-lines {
    --len: 19;
}

[data-icon="shield"] .i-check {
    --len: 10;
}

[data-icon="file"] .i-lines {
    --len: 11;
}

[data-icon="pulse"] .i-wave {
    --len: 32;
}

/* De wijzers draaien om het midden van de wijzerplaat, niet om het midden van hun eigen bounding
   box: vandaar view-box in plaats van fill-box. */
[data-icon="clock"] .i-hands {
    transform-box: view-box;
    transform-origin: 12px 12px;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
    padding: 56px 0 76px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.hero > * {
    min-width: 0;
}

/* De kop van de homepage is twee zinnen lang: op de maat van een korte paginakop liep hij over zeven
   regels. Kleiner en breder, zodat hij in drie à vier regels naast het voorbeeld staat. */
.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-note {
    font-size: 13px;
    color: var(--muted);
    margin-top: 18px;
    max-width: 46ch;
}

/* Onder een vertaalde juridische pagina (15 oktober 2026, besluit van de eigenaar): de zin dat ze met
   hulp van AI uit het Nederlands is vertaald en dat de Nederlandse versie geldt. Klein en stil, in de
   kleur van een onderschrift, op de breedte van de juridische tekst. */
.translation-note {
    max-width: 760px;
    margin: 8px 0 56px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.translation-note a {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--priva-outline);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.translation-note a:hover {
    color: var(--ink);
}

/* Een verwijzing naar een wetsartikel in lopende tekst of in een kop: ze staat er, voor wie haar
   zoekt, maar leest niet mee. Kleiner, zonder gewicht en in de kleur van een onderschrift. */
.law-ref {
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--muted);
    white-space: nowrap;
}

.panel-dark .law-ref,
.cta .law-ref {
    color: inherit;
    opacity: 0.78;
}

/* De merktekens onder de hero, over de volle breedte: de kaders waar de inrichting op is afgestemd
   en, als de hosting er zo staat, twee eigenschappen van de hosting. Een verwijzing, geen keurmerk:
   geen vlak en geen kleur van een ander, alleen inkt met de rand in het accent. Zonder de tweede
   groep staat de verwijzing ernaast, met de tweede groep eronder. */
.frameworks {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: space-between;
    gap: 26px 44px;
    align-items: start;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.frameworks .eyebrow {
    margin: 0 0 16px;
}

.frameworks ul {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.frameworks li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.framework-mark {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    color: var(--ink);
}

.framework-ring {
    color: var(--priva-accent);
}

.frameworks strong,
.frameworks small {
    display: block;
}

.frameworks strong {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.frameworks small,
.frameworks-note {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

/* De verwijzing naar de pagina's waar het staat uitgelegd: stil, in de kleur van een onderschrift. */
.frameworks-note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    align-self: end;
}

.frameworks-note a {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--priva-outline);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--priva-duration) var(--priva-ease-out);
}

.frameworks-note a:hover {
    color: var(--ink);
}

.frameworks-group + .frameworks-group + .frameworks-note {
    grid-column: 1 / -1;
    justify-self: start;
}

/* De assistenten die je koppelt: het beeldmerk in één kleur, die van de huisstijl, met de naam
   ernaast. Een verwijzing naar wat de bezoeker al gebruikt: geen vlak, geen rand en geen kleur van
   het merk zelf. */
.assistants {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 56px;
    list-style: none;
    margin: 0 0 44px;
    padding: 0;
}

.assistants li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.assistant-logo {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    color: var(--priva-accent);
}

.assistants strong,
.assistants small {
    display: block;
}

.assistants strong {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.assistants small {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

/* Het voorbeeld in de hero ligt een trede hoger dan een gewoon paneel. */
.mock {
    position: relative;
    padding: 26px;
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.mock .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.mock .badge {
    border-color: var(--priva-success);
    background-color: var(--priva-badge-success);
    color: var(--priva-success);
    font-size: 10.5px;
}

.mock pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--ink);
}

.mock small {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
}

/* De eindtoestand van het voorbeeld: het origineel doorgehaald, het pseudoniem ernaast. Zonder
   JavaScript en voor wie minder beweging vraagt staat het er meteen zo; de overgang ernaartoe staat
   in het blok met beweging. De doorhaling zit in de kleur van de tekst: geen dekking, want gedimde
   tekst haalt het contrast niet. */
.mock .del {
    color: var(--warn);
    text-decoration: line-through;
    text-decoration-color: var(--warn);
}

.mock .tag {
    display: inline-block;
    background-color: var(--priva-badge-success);
    border: 1px solid var(--priva-success);
    border-radius: var(--priva-radius-label);
    padding: 0 6px;
    font-weight: 600;
    color: var(--priva-success);
}

/* --- Secties ------------------------------------------------------------ */

section {
    padding: 74px 0;
    border-top: 1px solid var(--line);
}

.page-head {
    padding: 40px 0 8px;
    max-width: 820px;
}

.page-head + section,
.page-head + .toc + section {
    border-top: 0;
    padding-top: 46px;
}

.section-head {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 48px;
}

.section-head .lead {
    margin: 0;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.split > * {
    min-width: 0;
}

/* --- Editorial rijen ---------------------------------------------------- */

.rows {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: row;
    border-top: 1px solid var(--line);
}

/* Een rij is genummerd, als in een rapport: een cijfer in het kopletter, geen icoon in een vakje. */
.rows li {
    counter-increment: row;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 28px;
    align-items: baseline;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
}

.rows li::before {
    content: counter(row, decimal-leading-zero);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-size: 30px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--priva-accent);
}

.rows.warn li::before {
    color: var(--warn);
}

.rows h3 {
    margin-bottom: 10px;
}

.rows p {
    margin: 0;
    color: var(--muted);
    max-width: 68ch;
}


/* --- Flow-rail ---------------------------------------------------------- */

.rail {
    list-style: none;
    counter-reset: r;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    position: relative;
}

.rail::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--site-mint) 18%,
        var(--site-mint-deep) 50%,
        var(--site-mint) 82%,
        transparent
    );
    transform-origin: left;
}

.rail li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
}

.rail li::after {
    counter-increment: r;
    content: "0" counter(r);
    position: absolute;
    top: 4px;
    left: 58px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1px;
    color: var(--muted);
    transition: color var(--priva-duration) var(--priva-ease-out);
}

.rail strong {
    font-size: 15px;
    margin-top: 4px;
}

.rail span {
    color: var(--muted);
}

.rail.rail-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* --- Pijlers en kaarten ------------------------------------------------- */

.pillars {
    display: grid;
    border-top: 1px solid var(--line);
}

/* Twee pijlers als lijst met lijnen: geen vlak, geen streep, geen icoon. */
.pillar {
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}

.pillar h3 {
    margin-bottom: 8px;
}

/* De streep links is dezelfde als op een melding in de app: de kleur van de betekenis. */
.price::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--priva-accent);
}

.pillar p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.pillar .tagline {
    margin-bottom: 8px;
}

/* De maatregelen per thema op de pagina Security & vertrouwen: een rij per thema, het thema links
   en de maatregelen rechts in twee kolommen. Geen kaarten: zo staat alles dicht op elkaar en leest
   het als een overzicht. */
.cards {
    display: grid;
    border-top: 1px solid var(--line);
}

.card {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 10px 40px;
    align-items: baseline;
    min-width: 0;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.card h3 {
    margin: 0;
    font-size: 19px;
}

.card .plain-list {
    margin: 0;
    /* Twee kolommen alleen als elk minstens 18rem breed is; daaronder één. */
    columns: 18rem 2;
    column-gap: 36px;
    font-size: 14.5px;
    line-height: 1.6;
}

.card .plain-list li {
    break-inside: avoid;
}

/* De kaders in de kop en de inhoudsopgave van een lange pagina. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chip {
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
}

.toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 28px 0 0;
    padding: 8px 12px;
    font-size: 14px;
}

.toc strong {
    padding: 0 10px 0 6px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.toc a {
    display: inline-flex;
    align-items: center;
    min-height: var(--priva-target);
    padding: 0 12px;
    border-radius: var(--priva-radius-control);
    font-weight: 600;
    transition: background-color var(--priva-duration) var(--priva-ease-out);
}

.toc a:hover {
    background-color: var(--site-hover);
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* --- Check-list --------------------------------------------------------- */

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 20px;
}

.check-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: start;
    font-size: 15px;
}

.check-list li::before {
    content: "✓";
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--priva-success);
    border-radius: 50%;
    background-color: var(--priva-badge-success);
    box-shadow: var(--site-sheen), var(--priva-shadow-1);
    color: var(--priva-success);
    font-weight: 700;
    font-size: 12px;
}

.check-list li > b,
.check-list li > span {
    grid-column: 2;
}

.check-list b {
    display: block;
}

.check-list span {
    color: var(--muted);
}

/* --- Video -------------------------------------------------------------- */

.video {
    margin: 0 0 56px;
}

.video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--priva-radius-panel);
    box-shadow: var(--priva-shadow-2);
}

.video figcaption {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--muted);
    max-width: 68ch;
}

/* --- Formulier ---------------------------------------------------------- */

/* Het formulier is een glazen paneel. Een veld draagt de klasse `field` uit priva.css (bijna dekkend
   wit met een zachte binnenschaduw); hier staan alleen zijn maat en zijn rand. */
.form {
    display: grid;
    gap: 24px;
    align-content: start;
    padding: 32px;
}

.form-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
}

.form-field > span:not(.select),
.form-field legend {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.1px;
    padding: 0;
}

.form-field > span em,
.field-hint {
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
}

.field-hint {
    font-size: 12.5px;
    display: block;
    margin: 6px 0 12px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form .field {
    width: 100%;
    min-height: var(--priva-target);
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    border: 1px solid var(--priva-field-border);
    border-radius: var(--priva-radius-control);
    padding: 10px 14px;
}

.form .field::placeholder {
    color: var(--muted);
    opacity: 1;
}

.form textarea.field {
    resize: vertical;
    min-height: 116px;
    line-height: 1.6;
}

.form .field[aria-invalid="true"] {
    border-color: var(--warn);
    border-width: 2px;
}

.form .select {
    display: block;
}

.choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Een keuze is een schakelaar met zijn tekst: het hele vak is het doel, minstens 44 pixels hoog. */
.choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--priva-target);
    font-size: 14.5px;
    padding: 8px 14px;
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-control);
    background-color: var(--site-hover);
    cursor: pointer;
    transition:
        border-color var(--priva-duration) var(--priva-ease-out),
        background-color var(--priva-duration) var(--priva-ease-out);
}

.choice:hover {
    border-color: var(--priva-outline);
}

.choice:has(input:checked) {
    border-color: var(--priva-accent);
    background-color: var(--priva-surface);
}

/* De melding bij een veld: dezelfde vorm als in de app, tekst met een streep ervoor. */
.field-note {
    display: block;
    border-left: 2px solid var(--warn);
    padding-left: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--warn);
}

/* De melding boven een formulier is de laag `glass-tone` met `tone-error` (de klassen staan in de
   view): hier alleen de maat en het teken. */
.form-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 18px 14px 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--priva-radius-control);
    font-size: 14px;
    font-weight: 600;
    color: var(--warn);
}

.form-error .icon {
    color: currentColor;
    margin-top: 1px;
}

.form-actions {
    display: grid;
    gap: 12px;
    justify-items: start;
    margin-top: 4px;
}

.form-actions small {
    font-size: 12.5px;
    color: var(--muted);
    max-width: 52ch;
}

/* Privacymelding bij het demoformulier (art. 13 AVG). */
.form-privacy {
    max-width: 62ch;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
}

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots. */
.hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Het doorstuurformulier naar een werkruimte: één smal paneel. */
.form.narrow {
    max-width: 560px;
}

/* De bevestiging na een aanvraag: een paneel met een teken ervoor. */
.done {
    display: grid;
    gap: 22px;
    max-width: 820px;
    margin: 40px 0 70px;
    padding: 40px 44px 44px;
}

.done .icon-tile {
    color: var(--priva-success);
    border-color: var(--priva-success);
    background-color: var(--priva-badge-success);
}

.done .eyebrow {
    color: var(--priva-success);
}

.done h1,
.done .lead {
    margin-bottom: 0;
}

/* --- Donkere panelen ---------------------------------------------------- */

.panel-dark,
.cta {
    position: relative;
    isolation: isolate;
    color: var(--site-on-dark);
    background:
        radial-gradient(
            90% 70% at 12% 100%,
            color-mix(in srgb, var(--site-mint) var(--site-glow-mint), transparent) 0%,
            transparent 62%
        ),
        radial-gradient(
            80% 60% at 95% 4%,
            color-mix(in srgb, var(--site-mint-deep) var(--site-glow-deep), transparent) 0%,
            transparent 58%
        ),
        linear-gradient(165deg, var(--site-dark-top) 0%, var(--dark) 55%, var(--site-dark-bottom) 100%);
    border: 1px solid var(--site-dark-top);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--priva-surface) 14%, transparent),
        var(--priva-shadow-3);
}

.panel-dark {
    border-radius: var(--priva-radius-panel);
    padding: 32px;
}

/* Het etiket op een donker paneel: licht glas op donker. */
.panel-dark .flag {
    display: inline-block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--site-on-dark);
    background: color-mix(in srgb, var(--priva-surface) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--priva-surface) 30%, transparent);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 20px;
}

.panel-dark ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2px;
}

.panel-dark li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    padding: 11px 10px;
    border-radius: var(--priva-radius-control);
    transition: background-color var(--priva-duration) var(--priva-ease-out);
}

.panel-dark li:hover {
    background-color: color-mix(in srgb, var(--priva-surface) 8%, transparent);
}

.panel-dark .icon {
    color: var(--site-mint);
    margin-top: 1px;
}

.panel-dark strong {
    color: var(--priva-on-primary);
    font-weight: 600;
}

.panel-dark p {
    color: var(--site-on-dark-muted);
}

.panel-dark h2,
.panel-dark h3 {
    color: var(--priva-on-primary);
}

.panel-dark .inline-link {
    --site-link-tint: color-mix(in srgb, var(--site-mint) 24%, transparent);
    color: var(--priva-on-primary);
    text-decoration-color: var(--site-mint);
}

.panel-dark .inline-link:hover {
    text-decoration-color: var(--priva-on-primary);
}

/* Het contactblok onderaan een pagina: een donker paneel met één alinea en één knop. */
.panel-dark.contact {
    padding: 44px 48px 48px;
}

.panel-dark.contact h2 {
    max-width: 24ch;
}

.panel-dark.contact p {
    max-width: 68ch;
    margin: 0 0 26px;
    font-size: 16px;
}

/* De lichte knop op een donker paneel. */
.cta .button,
.panel-dark .button {
    border-color: var(--priva-surface);
    background-color: var(--priva-surface);
    color: var(--dark);
    box-shadow: var(--priva-shadow-2);
}

.cta .button:hover,
.panel-dark .button:hover {
    border-color: var(--site-mint);
    background-color: var(--site-mint);
}

/* --- Callout / quote ---------------------------------------------------- */

.callout {
    margin-top: 38px;
    padding: 26px 30px;
    font-size: 14.5px;
    color: var(--muted);
}

.callout strong {
    color: var(--ink);
}

.panel-dark + .callout {
    margin-top: 20px;
}

.quote {
    margin: 44px 0 0;
    padding: 36px 40px;
    font-size: 20px;
    line-height: 1.5;
    max-width: 860px;
}

.quote small {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 14px;
}

/* --- "Meer" link met pijl ----------------------------------------------- */

.more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--priva-target);
    margin-top: 22px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

.more:hover {
    text-decoration-color: var(--priva-accent);
}

.more + .more {
    margin-left: 32px;
}

.more::after {
    content: "→";
    display: inline-block;
    transition: translate var(--priva-duration) var(--priva-ease-out);
}

/* --- Verder lezen ------------------------------------------------------- */

.verder {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 44px;
}

.verder a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 20px 22px;
    transition:
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out),
        translate var(--priva-duration) var(--priva-ease-out);
}

.verder a:hover {
    border-color: var(--priva-outline);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.verder strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}

.verder span {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
}

/* --- CTA ---------------------------------------------------------------- */

.cta {
    border-radius: 10px;
    padding: 60px;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 44px;
    align-items: center;
    margin: 24px 0 70px;
}

.cta > * {
    min-width: 0;
}

.cta h2 {
    color: var(--priva-on-primary);
    max-width: none;
}

.cta p {
    color: var(--site-on-dark-muted);
    margin: 0 0 26px;
    font-size: 17px;
}

.cta ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: var(--site-on-dark-muted);
    display: grid;
    gap: 14px;
}

.cta li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cta .icon {
    color: var(--site-mint);
    margin-top: 1px;
}

/* --- Footer ------------------------------------------------------------- */

/* De voet is een saliegroene glaslaag onderaan de pagina: links het merk, daarnaast twee kolommen
   met een kop (het product, en juridisch met contact), en onder een lijn de toelichting en de
   gegevens van de dienstverlener. */
footer {
    margin: 0 0 28px;
    padding: 40px 40px 30px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px 56px;
}

.footer-brand p {
    margin: 10px 0 0;
    max-width: 34ch;
}

.footer-brand .footer-tagline {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ink);
}

/* De merktekens onder in de eerste kolom: dezelfde tekens als onder de hero, klein, met alleen de
   naam ernaast, onder elkaar. */
.footer-marks {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.footer-marks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.footer-marks .framework-mark {
    width: 34px;
    height: 34px;
}

.footer-heading {
    margin: 0 0 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
}

.footer-nav,
.footer-legal {
    display: grid;
}

.footer-nav a,
.footer-legal a {
    display: flex;
    align-items: center;
    min-height: 34px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

.footer-nav a:hover,
.footer-legal a:hover {
    text-decoration-color: var(--priva-accent);
}

/* De taalwisselaar (PRIV-242, fase 7): alleen op een pagina die in meer dan één publieke taal bestaat,
   en alleen in de footer (besluit van de eigenaar, 15 oktober 2026), met de namen van de talen. De taal
   van nu is tekst, geen link. */
.language-switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.language-switch-label .icon {
    flex: none;
    width: 20px;
    height: 20px;
}

.language-switch ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-switch a,
.language-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--priva-target);
    padding: 8px 16px;
    border: 1px solid var(--priva-field-border);
    border-radius: 999px;
    background: var(--paper);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
}

.language-switch a:hover {
    border-color: var(--priva-accent);
    background: var(--soft);
}

.language-current {
    border-color: var(--priva-primary);
    background: var(--priva-primary);
    color: var(--priva-on-primary);
    font-weight: 600;
}

.language-suggestion {
    position: fixed;
    z-index: 30;
    inset-inline: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 740px;
    margin-inline: auto;
    padding: 16px 60px 16px 20px;
    border: 1px solid var(--priva-field-border);
    border-radius: var(--priva-radius-panel);
    background: var(--paper);
    box-shadow: var(--priva-shadow-2);
    color: var(--ink);
}

.language-suggestion[hidden] {
    display: none;
}

.language-suggestion > .icon {
    flex: none;
}

.language-suggestion p {
    flex: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.language-suggestion .button {
    flex: none;
    font-size: 14px;
}

.language-suggestion-close {
    position: absolute;
    inset-inline-end: 8px;
    top: 8px;
    display: grid;
    place-items: center;
    width: var(--priva-target);
    height: var(--priva-target);
    padding: 0;
    border: 0;
    border-radius: var(--priva-radius-label);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.language-suggestion-close:hover {
    background: var(--soft);
}

@media (max-width: 600px) {
    .language-suggestion {
        flex-wrap: wrap;
        padding: 16px 56px 16px 16px;
    }

    .language-suggestion p {
        flex-basis: calc(100% - 32px);
    }

    .language-suggestion .button {
        margin-inline-start: 32px;
    }
}

.footer-bottom {
    display: grid;
    gap: 12px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 12px;
}

.footer-note,
.footer-identity {
    margin: 0;
}

.footer-note {
    max-width: 760px;
}

.footer-note a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

/* --- Reveal ------------------------------------------------------------- */

/* Een blok met data-reveal staat er altijd. Alleen met JavaScript én voor wie niet om minder
   beweging vroeg komt het in beeld: de regel `.js [data-reveal]` staat in het blok onderaan. */
@media print {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --- Prijzen ------------------------------------------------------------ */

.prices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.price {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px 28px;
    transition: box-shadow var(--priva-duration) var(--priva-ease-out);
}

.price:hover {
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.price h3 {
    margin: 0 0 18px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
}

.price .amount {
    margin: 0;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -1.4px;
    color: var(--ink);
}

/* "per maand" hangt onder het bedrag, niet ernaast: anders breekt het op smalle kaarten. */
.price .amount span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--muted);
}

.price .alt {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

.price ul {
    list-style: none;
    padding: 22px 0 0;
    margin: 22px 0 26px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
    font-size: 14.5px;
}

.price li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
}

.price li::before {
    content: "\2713";
    color: var(--priva-success);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

/* De knop zakt naar de onderkant zodat de drie kaarten gelijk uitlijnen. */
.price .button {
    margin-top: auto;
    align-self: start;
}

.price-note {
    margin: 22px 0 0;
    font-size: 13.5px;
    color: var(--muted);
    max-width: 78ch;
}

/* --- Aanvullende diensten ----------------------------------------------- */

.addons {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}

.addons li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: start;
    padding: 30px 14px;
    border-bottom: 1px solid var(--line);
    transition: background-color var(--priva-duration) var(--priva-ease-out);
}

.addons li:hover {
    background-color: var(--site-hover);
}

.addons strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
}

.addons span {
    display: block;
    color: var(--muted);
    font-size: 15px;
    max-width: 62ch;
}

.addon-price {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-size: 21px;
    letter-spacing: -0.5px;
    color: var(--ink);
}

.addon-price small {
    font-size: 13.5px;
    letter-spacing: normal;
    color: var(--muted);
}

.addon-price span {
    display: block;
    margin-top: 6px;
    text-align: right;
    font-size: 13px;
}

/* --- Tabellen ----------------------------------------------------------- */

/* Een tabel schuift op een smal scherm binnen haar eigen kader; de pagina zelf wordt nooit breder.
   De kop is salie op het glas, een rij licht op bij de muis. */
.tiers-wrap {
    overflow-x: auto;
}

.tiers {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 14.5px;
    line-height: 1.5;
}

.tiers th,
.tiers td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.tiers tbody tr:last-child th,
.tiers tbody tr:last-child td {
    border-bottom: 0;
}

.tiers thead th {
    font-weight: 600;
    color: var(--ink);
    background-color: var(--site-head);
}

.tiers thead small {
    display: block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--priva-accent);
    margin-bottom: 4px;
}

.tiers tbody th {
    width: 22%;
    font-weight: 500;
    color: var(--ink);
}

.tiers td {
    color: var(--muted);
}

.tiers tbody tr,
.legal-table tbody tr {
    transition: background-color var(--priva-duration) var(--priva-ease-out);
}

.tiers tbody tr:hover,
.legal-table tbody tr:hover {
    background-color: var(--site-hover);
}

.tiers td.yes,
.tiers td.no,
.tiers td.maybe {
    padding-left: 44px;
    position: relative;
}

.tiers td.yes::before,
.tiers td.no::before,
.tiers td.maybe::before {
    position: absolute;
    left: 16px;
    top: 17px;
    width: 18px;
    height: 18px;
    border: 1px solid;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.tiers td.yes::before {
    content: "✓";
    color: var(--priva-success);
    background: var(--priva-badge-success);
}

.tiers td.no::before {
    content: "×";
    color: var(--warn);
    background: var(--priva-badge-danger);
}

.tiers td.maybe::before {
    content: "–";
    color: var(--ink);
    border-color: var(--priva-outline);
    background: var(--priva-badge-neutral);
}

.footnote {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--muted);
    max-width: 90ch;
}

/* --- Genummerde stappen en codevoorbeeld -------------------------------- */

.steps {
    list-style: none;
    counter-reset: s;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 18px;
}

.steps li {
    counter-increment: s;
    position: relative;
    padding-left: 46px;
}

.steps li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--priva-primary);
    box-shadow: var(--site-sheen), var(--priva-shadow-1);
    color: var(--priva-on-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}

.steps b {
    display: block;
    font-weight: 600;
}

.steps span {
    color: var(--muted);
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: var(--priva-radius-label);
    background: var(--soft);
    color: var(--ink);
}

.code-sample {
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: var(--priva-radius-panel);
    background: color-mix(in srgb, var(--site-dark-bottom) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--priva-surface) 16%, transparent);
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.6;
}

.code-sample code {
    padding: 0;
    background: none;
    color: var(--site-on-dark);
}

/* --- Veelgestelde vragen als uitklaplijst ------------------------------- */

/* Elke vraag is een eigen glazen paneel; het plusje draait een kwartslag als het antwoord open is. */
.faq-accordion {
    display: grid;
    gap: 10px;
}

/* Vragen direct onder een lijst (zoals op /eu-hosting) krijgen lucht. */
.check-list + .faq-accordion {
    margin-top: 44px;
}

.faq-accordion details {
    transition:
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out);
}

.faq-accordion details:hover,
.faq-accordion details[open] {
    border-color: var(--priva-outline);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.faq-accordion summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--priva-target);
    padding: 18px 64px 18px 24px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    border-radius: var(--priva-radius-panel);
}

.faq-accordion summary::-webkit-details-marker {
    display: none;
}

.faq-accordion summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    border: 1px solid var(--priva-outline);
    background-color: var(--priva-surface);
    font-size: 17px;
    font-weight: 500;
    line-height: 25px;
    text-align: center;
    color: var(--ink);
}

.faq-accordion details[open] summary::after {
    content: "–";
}

.faq-accordion details p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--muted);
    font-size: 15px;
    max-width: 82ch;
}

.faq-accordion + .verder {
    margin-top: 64px;
}

/* --- Overtuig je werkgever ---------------------------------------------- */

.duo,
.objections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.duo article,
.objections article {
    min-width: 0;
    padding: 30px 32px;
}

.duo h3 {
    margin-bottom: 12px;
}

.duo p,
.objections p {
    margin: 0;
    color: var(--muted);
}

/* Wat je kunt zeggen: een melding in de vorm van de app, met de streep in de accentkleur. */
.duo .duo-say {
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid color-mix(in srgb, var(--priva-accent) 45%, transparent);
    border-radius: var(--priva-radius-control);
    background-color: var(--priva-soft);
    box-shadow: inset 3px 0 0 var(--priva-accent);
    color: var(--ink);
}

.objections .objection {
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--warn);
}

.mail {
    overflow: hidden;
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.mail-head {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 18px 24px;
    font-size: 14px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background-color: var(--site-head);
}

.mail-head b {
    display: inline-block;
    min-width: 92px;
    font-weight: 600;
    color: var(--ink);
}

.mail pre {
    margin: 0;
    padding: 22px 24px 26px;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.button[hidden] {
    display: none;
}

.copy-status {
    font-size: 14px;
    font-weight: 600;
    color: var(--priva-success);
}

/* --- Veelgestelde vragen ------------------------------------------------ */

.faq {
    margin: 0;
    border-top: 1px solid var(--line);
}

.faq dt {
    padding-top: 26px;
    font-weight: 600;
    color: var(--ink);
}

.faq dd {
    margin: 10px 0 0;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 15px;
    max-width: 78ch;
}

/* --- Juridische pagina's ------------------------------------------------- */

/* Lopende tekst op één rustig glazen paneel; de tekst blijft smal omdat dit leeswerk is, maar
   tabellen mogen de volle breedte van het paneel gebruiken. */
section.legal {
    max-width: 1120px;
    margin: 34px 0 70px;
    padding: 44px 48px 48px;
    border: 1px solid var(--priva-line);
}

.legal h2,
.legal h3,
.legal p,
.legal .plain-list,
.legal .check-list,
.legal .callout,
.legal .steps,
.legal .legal-facts {
    max-width: 760px;
}

.legal h2 {
    font-size: 22px;
    letter-spacing: -0.5px;
    margin: 44px 0 14px;
}

.legal h2:first-child {
    margin-top: 0;
}

.legal h3 {
    font-size: 17px;
    margin: 28px 0 10px;
}

.legal p {
    color: var(--muted);
    margin: 0 0 16px;
}

.legal .check-list,
.legal .callout {
    margin-top: 24px;
}

.plain-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    color: var(--muted);
}

.plain-list li {
    position: relative;
    padding: 0 0 12px 22px;
}

.plain-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--priva-accent);
}

/* Bedrijfsgegevens: labels links, waarden rechts, op mobiel onder elkaar. */
.legal-facts {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 10px 20px;
    margin: 0 0 8px;
    padding: 22px 26px;
    background-color: var(--site-hover);
}

.legal-facts dt {
    font-weight: 600;
}

.legal-facts dd {
    margin: 0;
    color: var(--muted);
}

/* Een tabel op het paneel: licht glas op glas, met een saliegroene kop. */
.legal-table {
    max-width: 1120px;
    margin: 8px 0 20px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--site-hover);
    box-shadow: var(--priva-shadow-1);
}

.legal-table table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.legal-table th,
.legal-table td {
    text-align: left;
    vertical-align: top;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.legal-table th {
    color: var(--ink);
    font-weight: 600;
    background-color: var(--site-head);
}

.legal-table tbody th {
    width: 24%;
    background-color: transparent;
}

.legal-table tr:last-child td,
.legal-table tbody tr:last-child th {
    border-bottom: 0;
}

/* Waar het bewijs staat: een verwijzing binnen een tabel, kleiner dan de tekst ernaast. */
.legal-table .proof {
    width: 26%;
    font-size: 13px;
}

/* --- Blog ---------------------------------------------------------------- */

/* Een artikel is leeswerk op het paneel van de juridische pagina's (section.legal); hieronder staat
   alleen wat een artikel daarbovenop nodig heeft. De lijst van artikelen is een redactionele lijst
   met lijnen, geen raster van kaarten. */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 28px;
    font-size: 13.5px;
    color: var(--muted);
}

.crumbs a {
    font-weight: 600;
}

.crumbs a:hover,
.post-list a:hover {
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.crumbs + .page-head {
    padding-top: 18px;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
}

.post-list {
    list-style: none;
    max-width: 860px;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.post-list li {
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
}

.post-list h2,
.post-list h3 {
    max-width: none;
    margin: 10px 0;
    font-size: 22px;
    letter-spacing: -0.4px;
    line-height: 1.3;
}

.post-list h3 {
    font-size: 19px;
}

.post-list li > p:last-child {
    max-width: 68ch;
    margin: 0;
    color: var(--muted);
}

/* Het overzicht: het nieuwste artikel uitgelicht op een paneel, met zijn korte samenvatting op het
   donkere vlak ernaast; daaronder de andere artikelen als rijen. Een hele rij is de link: de titel
   draagt haar, en het vlak eromheen rekt die link op. */
.post-feature {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 32px;
    align-items: stretch;
    margin: 34px 0 0;
    padding: 36px;
    border: 1px solid var(--priva-line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--priva-surface);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.post-feature-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.post-feature .post-meta {
    align-items: center;
}

.post-feature h2 {
    max-width: 20ch;
    margin: 22px 0 16px;
    font-size: clamp(26px, 2.6vw, 34px);
    letter-spacing: -0.9px;
}

.post-feature h2 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--priva-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.post-feature-text > p:not(.post-meta) {
    max-width: 52ch;
    margin: 0 0 28px;
    font-size: 17px;
    color: var(--muted);
}

.post-feature .button {
    margin-top: auto;
}

.post-feature .panel-dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-feature .panel-dark .flag {
    align-self: flex-start;
}

.post-feature .panel-dark li::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 9px;
    border-radius: 2px;
    background: var(--site-mint);
}

.post-feature .panel-dark strong {
    color: inherit;
}

.post-rows {
    max-width: none;
    display: grid;
    gap: 6px;
    border-top: 0;
}

/* Een rij is in rust alleen tekst. Onder de muis of met de focus op de titel wordt ze een paneel van
   de site (vulkleur, rand en schaduw), kleurt de onderstreping van de titel naar het accent en vult
   de pijl zich. Geen egaal getint vlak over de volle breedte. */
.post-rows li {
    position: relative;
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 28px;
    align-items: start;
    padding: 26px 24px;
    border: 1px solid transparent;
    border-radius: var(--priva-radius-panel);
    transition:
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        box-shadow var(--priva-duration) var(--priva-ease-out);
}

.post-rows li:hover,
.post-rows li:focus-within {
    border-color: var(--priva-line);
    background-color: var(--priva-surface);
    box-shadow: var(--priva-glass-edge), var(--priva-shadow-2);
}

.post-rows .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 4px;
}

.post-rows h3 {
    margin: 0 0 8px;
    font-size: 21px;
}

.post-rows h3 a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-decoration-color var(--priva-duration) var(--priva-ease-out);
}

.post-rows li:hover h3 a,
.post-rows h3 a:focus-visible {
    text-decoration-color: var(--priva-accent);
}

.post-rows h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--priva-radius-panel);
}

.post-rows li p {
    max-width: 66ch;
    margin: 0;
    color: var(--muted);
}

.post-rows .post-more {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
    white-space: nowrap;
}

.post-arrow {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--priva-outline);
    border-radius: 50%;
    font-size: 16px;
    color: var(--ink);
    transition:
        background-color var(--priva-duration) var(--priva-ease-out),
        border-color var(--priva-duration) var(--priva-ease-out),
        color var(--priva-duration) var(--priva-ease-out),
        translate var(--priva-duration) var(--priva-ease-out);
}

.post-rows li:hover .post-arrow,
.post-rows li:focus-within .post-arrow {
    border-color: var(--dark);
    background-color: var(--dark);
    color: var(--priva-surface);
}

.post h2,
.post h3 {
    scroll-margin-top: 96px;
}

.post strong {
    color: var(--ink);
}

.post ol {
    max-width: 760px;
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--muted);
}

.post ol li {
    padding-bottom: 10px;
}

.post blockquote {
    max-width: 760px;
    margin: 24px 0;
    padding: 20px 24px 4px;
    border: 1px solid var(--line);
    border-radius: var(--priva-radius-panel);
    background-color: var(--site-hover);
}

.post blockquote p {
    color: var(--ink);
}

.post .post-takeaways {
    margin: 0 0 40px;
}

.post-takeaways h2 {
    margin-top: 0;
}

.post-takeaways .plain-list {
    margin: 0;
}

.post-faq {
    max-width: 860px;
    margin-top: 24px;
}

.post-faq details p + p {
    margin-top: -8px;
}

/* --- Responsief --------------------------------------------------------- */

@media (max-width: 900px) {
    .post-feature {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .post-rows li {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 18px;
    }

    .post-rows .post-meta {
        flex-direction: row;
        align-items: center;
    }

    .post-rows .post-more {
        display: none;
    }

    .duo,
    .objections,
    .rail.rail-3,
    .prices,
    .cards {
        grid-template-columns: 1fr;
    }
    .addons li {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .addon-price,
    .addon-price span {
        text-align: left;
    }
    .hero,
    .split,
    .section-head {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .frameworks {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
    .frameworks ul {
        flex-wrap: wrap;
    }
    .section-head {
        gap: 20px;
        align-items: start;
    }
    .rail {
        grid-template-columns: 1fr 1fr;
    }
    .rail::before {
        display: none;
    }
    .verder {
        grid-template-columns: 1fr;
    }
    .cta {
        grid-template-columns: 1fr;
        padding: 40px 28px;
    }
    .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* De bovenbalk klapt eerder in dan de rest van de pagina. De taalwisselaar staat alleen in de footer
   (15 oktober 2026); zonder hem is de volle balk met de langere Duitse labels (PRIV-242) 973 pixels
   breed in het lettertype van de site, en 1046 als het lettertype niet laadt en dat van het apparaat invalt. Vanaf
   1061 pixels staat alles op één regel; daaronder het menu achter de knop. De drempel staat ook in
   public/marketing.js. Het hoofdmenu is `.topbar-inner > nav`. */
@media (max-width: 1060px) {
    .nav-toggle {
        display: inline-flex;
    }
    .topbar-actions {
        margin-left: 0;
        gap: 10px;
    }
    .topbar-inner > nav {
        gap: 0;
    }
    /* Met JavaScript wordt de nav een uitklappaneel onder de balk: een laag die boven de inhoud
       zweeft (de dekking en de vervaging van `glass-float`). */
    .js .topbar nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--priva-duration) var(--priva-ease-out),
            visibility var(--priva-duration);
    }
    .js .topbar-inner > nav {
        display: grid;
        padding: 6px 28px 16px;
        background-color: var(--priva-surface);
        border-top: 1px solid var(--priva-line);
        border-bottom: 1px solid var(--priva-line);
        box-shadow: var(--priva-shadow-3);
    }
    .js .topbar.nav-open nav {
        opacity: 1;
        visibility: visible;
    }
    .js .topbar-inner > nav a:not(.button) {
        display: flex;
        align-items: center;
        min-height: var(--priva-target);
        padding: 12px 2px;
        font-size: 16px;
        border-bottom: 1px solid var(--priva-line);
    }
    .js .topbar-inner > nav a:not(.button):last-child {
        border-bottom: 0;
    }
    .js .topbar-inner > nav a:not(.button)::after {
        display: none;
    }
    .js .topbar-inner > nav a.active {
        font-weight: 600;
    }
    /* Zonder JavaScript: geen paneel, maar de links netjes onder elkaar in de balk. */
    html:not(.js) .topbar-inner {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    html:not(.js) .topbar-inner > nav {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 0 18px;
        margin-left: 0;
    }
    html:not(.js) .nav-toggle {
        display: none;
    }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    @media (max-width: 1060px) {
        .js .topbar-inner > nav {
            background-color: color-mix(in srgb, var(--priva-surface) var(--priva-glass-float), transparent);
            -webkit-backdrop-filter: blur(var(--priva-glass-blur)) saturate(var(--priva-glass-saturate));
            backdrop-filter: blur(var(--priva-glass-blur)) saturate(var(--priva-glass-saturate));
        }
    }
}

@media (max-width: 700px) {
    .legal-facts {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 20px;
    }
    .legal-facts dd {
        margin-bottom: 10px;
    }
    .legal h2 {
        font-size: 20px;
        margin-top: 36px;
    }
    section.legal {
        padding: 28px 20px 32px;
    }
    .form {
        padding: 22px 18px;
    }
    .done {
        padding: 28px 22px 32px;
    }
    footer {
        padding: 26px 20px 26px;
    }
}

@media (max-width: 560px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
    .wrap {
        padding: 0 16px;
    }
    .topbar-inner {
        padding: 10px 16px;
    }
    .js .topbar-inner > nav {
        padding-right: 16px;
        padding-left: 16px;
    }
    .rail {
        grid-template-columns: 1fr;
    }
    .rows li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 16px;
        padding: 26px 0;
    }
    .rows li::before {
        font-size: 24px;
    }
    .icon-tile {
        width: 40px;
        height: 40px;
    }
    .card {
        grid-template-columns: minmax(0, 1fr);
    }
    .card .plain-list {
        columns: 1;
    }
    .field-row,
    .choices {
        grid-template-columns: 1fr;
    }
    h1 {
        max-width: none;
    }
    section {
        padding: 54px 0;
    }
    .quote {
        padding: 26px 22px;
        font-size: 17px;
    }
    .rail li::after {
        left: 52px;
    }
    .mock {
        padding: 20px 16px;
    }
    .more + .more {
        margin-left: 0;
    }
    .more {
        display: flex;
    }
    .duo article,
    .objections article {
        padding: 24px 20px;
    }
    .callout {
        padding: 22px 20px;
    }
    .panel-dark,
    .panel-dark.contact {
        padding: 24px 18px;
    }
    .cta {
        padding: 32px 20px;
    }
    .faq-accordion summary {
        padding-left: 18px;
    }
    .faq-accordion details p {
        padding: 0 18px 20px;
    }
}

/* --- Beweging -----------------------------------------------------------

   Alles wat verschuift, schaalt, draait of animeert. Wie minder beweging vraagt krijgt dit blok niet
   en ziet meteen de eindtoestand; kleur, rand en schaduw mogen hierboven wel verlopen. Bediening
   beweegt in 150, 200 of 250 ms (de tokens van de app). Een illustratie (een icoon dat één keer iets
   doet, het voorbeeld in de hero, de lijn van de rail) speelt één keer en niets herhaalt zich. */
/* --- Vergelijken (PRIV-235) ---------------------------------------------
   De vergelijkingspagina's en hun verzamelpagina. Een redactionele opbouw: lijnen in plaats van
   kaarten, een genummerde lijst in het kopletter, een tabel als grootboek. Geen vlak met een icoon
   erin en geen dikke rand als accent. De logo's van de partijen staan in de inktkleur van de
   huisstijl, nooit in de kleur van het merk. */

.party-logo {
    flex: 0 0 auto;
    display: block;
    height: 30px;
    width: auto;
    max-width: 100%;
    color: var(--ink);
}

.party-logo-ictrecht {
    height: 46px;
}

.party-logo-greenpt {
    height: 44px;
}

/* Twee lagen op elkaar: het logo in de inktkleur van de huisstijl, en hetzelfde logo in de kleur van
   het merk, dat bij aanwijzen of focus verschijnt. De kleuren zelf staan als fill op de vormen. */
.logo-swap {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
}

.logo-swap .logo-brand {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.parties a:hover .logo-brand,
.parties a:focus-visible .logo-brand,
.duel-side:hover .logo-brand {
    opacity: 1;
}

/* Alleen een logo met een tweede laag wisselt: een logo zonder merkkleur blijft staan. */
.parties a:hover .logo-swap .logo-mono,
.parties a:focus-visible .logo-swap .logo-mono,
.duel-side:hover .logo-swap .logo-mono {
    opacity: 0;
}

.party-logo-aiaiai {
    height: 38px;
}

.duel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0 40px;
    align-items: start;
    padding: 34px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.duel-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--ink);
}

.duel-mark .brand-word {
    font-size: 28px;
}

.duel-line {
    margin: 0 0 14px;
    max-width: 38ch;
    color: var(--muted);
}

.duel-price {
    margin: 0;
    font-size: 14.5px;
    color: var(--muted);
}

.duel-price strong {
    color: var(--ink);
    font-weight: 600;
}

.duel-site {
    margin: 14px 0 0;
    font-size: 14.5px;
}

/* De partij staat rechts uitgelijnd tegenover PrivaSearch; op een smal scherm staan ze onder elkaar
   en lijnt alles links uit. */
.duel-or + .duel-side {
    text-align: right;
}

.duel-or + .duel-side .duel-mark {
    justify-content: flex-end;
}

.duel-or + .duel-side .duel-line {
    margin-left: auto;
}

.duel-or {
    align-self: center;
    margin: 0;
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-style: italic;
    font-size: 26px;
    color: var(--priva-accent);
}

.verdict {
    list-style: none;
    counter-reset: verdict;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.verdict li {
    counter-increment: verdict;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: baseline;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    line-height: 1.55;
    max-width: none;
}

.verdict li::before {
    content: counter(verdict);
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-size: 44px;
    line-height: 1;
    color: var(--priva-accent);
}

.verdict li > strong {
    grid-column: 2;
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--ink);
}

.verdict li > strong ~ * {
    grid-column: 2;
}

.ledger-wrap {
    overflow-x: auto;
}

.ledger {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.55;
}

.ledger th,
.ledger td {
    padding: 20px 22px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.ledger thead th {
    padding-top: 0;
    padding-bottom: 14px;
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-size: 21px;
    letter-spacing: -0.3px;
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.ledger tbody th {
    width: 19%;
    padding-left: 0;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.6px;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--muted);
}

.ledger td {
    width: 40.5%;
    color: var(--muted);
}

.ledger td:first-of-type,
.ledger-own td,
.ledger-own th {
    color: var(--ink);
    background-color: var(--site-head);
}

.ledger thead th {
    padding-top: 16px;
}

.ledger thead th:nth-child(2) {
    background-color: var(--site-head);
}

.ledger-wide td {
    width: auto;
}

.ledger-wide td:first-of-type {
    background-color: transparent;
    color: var(--muted);
}

.ledger-wide thead th {
    font-family: inherit;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted);
    background-color: transparent;
}

.ledger-wide thead th:nth-child(2) {
    background-color: transparent;
}

.ledger-wide tbody th {
    padding-left: 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.ledger-wide .ledger-own td:first-of-type {
    background-color: var(--site-head);
    color: var(--ink);
}

/* Wat je aan een risico doet (PRIV-238): een regel onder de uitleg op /risicos. */
.remedy {
    margin-top: 8px;
}

/* Wat het abonnement van een assistent zelf regelt (PRIV-238): lopende tekst op leesbreedte. */
.own-plan {
    display: grid;
    gap: 1rem;
    max-width: 46rem;
}

.own-plan p {
    margin: 0;
}

.weigh {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 72px;
}

.weigh h2 {
    font-size: clamp(22px, 2.2vw, 28px);
}

.weigh-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.weigh-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.parts {
    list-style: none;
    counter-reset: parts;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 72px;
}

.parts li {
    counter-increment: parts;
    break-inside: avoid;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.parts li::before {
    content: counter(parts, decimal-leading-zero);
    grid-row: span 2;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 1.2px;
    line-height: 1.9;
    color: var(--priva-accent);
}

.parts strong {
    font-weight: 600;
    color: var(--ink);
}

.parts span {
    color: var(--muted);
    font-size: 15px;
}

.parties {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);
}

.parties li {
    border-bottom: 1px solid var(--line);
}

.parties a {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 190px auto;
    gap: 8px 32px;
    align-items: center;
    padding: 24px 0;
    color: inherit;
    text-decoration: none;
}

.parties a:hover .parties-go,
.parties a:focus-visible .parties-go {
    text-decoration: underline;
}

.parties-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}

.parties-mark .party-logo {
    height: 24px;
    max-width: 150px;
}

.parties-mark .party-logo-ictrecht,
.parties-mark .party-logo-aiaiai,
.parties-mark .party-logo-greenpt {
    height: 32px;
}

.parties-mark .assistant-logo,
.duel-mark .assistant-logo {
    width: 30px;
    height: 30px;
}

/* Een partij zonder logo als vorm: de naam in het kopletter. */
.parties-name {
    font-family: var(--priva-font-heading);
    font-weight: var(--priva-heading-weight);
    font-size: 21px;
    letter-spacing: -0.3px;
}

.duel-mark .parties-name {
    font-size: 28px;
}

.parties-text {
    color: var(--muted);
    font-size: 15px;
}

.parties-text small {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink);
}

.parties-price {
    font-size: 14px;
    color: var(--ink);
}

.parties-go {
    font-weight: 600;
    color: var(--priva-accent);
    white-space: nowrap;
}

.sources {
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
}

.sources p {
    max-width: 78ch;
}

.sources ul {
    margin: 12px 0 0;
    padding-left: 18px;
}

@media (max-width: 860px) {
    .duel {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .duel-or {
        align-self: start;
    }

    .duel-or + .duel-side {
        text-align: left;
    }

    .duel-or + .duel-side .duel-mark {
        justify-content: flex-start;
    }

    .duel-or + .duel-side .duel-line {
        margin-left: 0;
    }

    .verdict li {
        grid-template-columns: 52px minmax(0, 1fr);
        font-size: 16.5px;
    }

    .verdict li::before {
        font-size: 32px;
    }

    .weigh {
        grid-template-columns: minmax(0, 1fr);
    }

    .parts {
        columns: 1;
    }

    .parties a {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Op een smal scherm is de tabel een stapel: het onderwerp als kopje, daaronder elke kolom met
       haar naam ervoor. */
    .ledger {
        min-width: 0;
    }

    .ledger thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .ledger tr,
    .ledger tbody th,
    .ledger td {
        display: block;
        width: auto;
    }

    .ledger tbody th {
        padding: 22px 0 10px;
        border-bottom: 0;
    }

    .ledger td,
    .ledger-wide tbody th {
        padding: 14px 16px;
    }

    .ledger td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 650;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: var(--ink);
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* De wissel naar de merkkleur vloeit over: de rustige curve, want met de steile is hij in een
       paar beelden voorbij en oogt hij als een sprong. */
    .logo-swap svg {
        transition: opacity var(--priva-duration-slow) var(--priva-ease-icon);
    }

    html {
        scroll-behavior: smooth;
    }

    /* Bediening: een knop en een kaart komen een pixel omhoog, een knop zakt bij het indrukken. */
    .button:hover,
    .verder a:hover {
        translate: 0 -1px;
    }

    .button:active {
        translate: 0 1px;
        transition-duration: var(--priva-duration-fast);
    }

    :is(li, .pillar, .card):hover > .icon-tile {
        translate: 0 -2px;
    }

    .more:hover::after,
    .post-rows li:hover .post-arrow {
        translate: 4px 0;
    }

    .inline-link,
    .footer-note a {
        transition:
            background-size var(--priva-duration) var(--priva-ease-out),
            text-decoration-color var(--priva-duration) var(--priva-ease-out);
    }

    .brand-logo {
        transition: rotate var(--priva-duration-slow) var(--priva-ease-out);
    }

    .brand:hover .brand-logo {
        rotate: -90deg;
    }

    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
        transition:
            transform var(--priva-duration) var(--priva-ease-out),
            background-color var(--priva-duration-fast) var(--priva-ease-out);
    }

    /* Het menu van een smal scherm zakt in beeld. */
    @media (max-width: 1060px) {
        .js .topbar nav {
            translate: 0 -8px;
            transition:
                opacity var(--priva-duration) var(--priva-ease-out),
                translate var(--priva-duration) var(--priva-ease-out),
                visibility var(--priva-duration);
        }

        .js .topbar.nav-open nav {
            translate: 0 0;
        }
    }

    /* Wat in beeld komt: een blok met data-reveal, zodra het script het `is-in` geeft. */
    .js [data-reveal] {
        transition:
            opacity var(--priva-duration-slow) var(--priva-ease-out),
            transform var(--priva-duration-slow) var(--priva-ease-out);
    }

    .js [data-reveal]:not(.is-in) {
        opacity: 0;
        transform: translateY(8px);
    }

    /* Een antwoord dat openklapt. */
    .faq-accordion details[open] > p {
        animation: site-drop var(--priva-duration-slow) var(--priva-ease-out) backwards;
    }

    .faq-accordion summary::after {
        transition: rotate var(--priva-duration) var(--priva-ease-out);
    }

    .faq-accordion details[open] summary::after {
        rotate: 180deg;
    }

    /* Illustratie: de lijn van de rail tekent zich als de sectie in beeld komt. */
    .rail::before {
        transition: transform var(--site-illustration) var(--priva-ease-out);
    }

    .js section[data-reveal]:not(.is-in) .rail::before {
        transform: scaleX(0);
    }

    /* Illustratie: de pseudonimisering speelt zich af zodra het voorbeeld in beeld komt, regel voor
       regel. De kleur van het origineel verloopt, het pseudoniem verschijnt ernaast. */
    .js .mock .del {
        transition:
            color var(--priva-duration-slow) var(--priva-ease-out),
            text-decoration-color var(--priva-duration-slow) var(--priva-ease-out);
    }

    .js .mock .tag {
        transition:
            opacity var(--priva-duration-slow) var(--priva-ease-out),
            transform var(--priva-duration-slow) var(--priva-ease-out);
    }

    .js .mock:not(.is-in) .del {
        color: var(--ink);
        text-decoration-color: transparent;
    }

    .js .mock:not(.is-in) .tag {
        opacity: 0;
        transform: translateY(-0.3em) scale(0.92);
    }

    .mock .swap:nth-of-type(1) .del,
    .mock .swap:nth-of-type(1) .tag {
        transition-delay: 350ms;
    }

    .mock .swap:nth-of-type(2) .del,
    .mock .swap:nth-of-type(2) .tag {
        transition-delay: 650ms;
    }

    .mock .swap:nth-of-type(3) .del,
    .mock .swap:nth-of-type(3) .tag {
        transition-delay: 950ms;
    }

    .mock .swap:nth-of-type(4) .del,
    .mock .swap:nth-of-type(4) .tag {
        transition-delay: 1250ms;
    }

    /* Illustratie: de glyph doet één keer iets dat bij de stap hoort. Eenmalig, niet lopend, want
       vijf doorlopende loops naast elkaar is kermis. */
    [data-icon="review"] .i-page-a,
    [data-icon="review"] .i-page-b,
    [data-icon="lock"] .i-shackle,
    [data-icon="layers"] .i-top {
        transition: transform var(--priva-duration-slow) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="review"] .i-page-a {
        transform: translateX(-1.2px);
    }

    :is(li, .pillar, .card):hover > [data-icon="review"] .i-page-b {
        transform: translateX(1.2px);
    }

    :is(li, .pillar, .card):hover > [data-icon="lock"] .i-shackle,
    :is(li, .pillar, .card):hover > [data-icon="layers"] .i-top {
        transform: translateY(-2px);
    }

    :is(li, .pillar, .card):hover > [data-icon="upload"] .i-arrow,
    :is(li, .pillar, .card):hover > [data-icon="cloud-out"] .i-arrow {
        animation: glyph-liftoff var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="scan"] .i-ring {
        animation: glyph-ping var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="scan"] .i-pupil,
    :is(li, .pillar, .card):hover > [data-icon="sparkle"] .i-spark {
        animation: glyph-pop var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="search"] .i-glass {
        animation: glyph-sweep var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="plug"] svg {
        animation: glyph-plugin var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="eye-off"] .i-slash,
    :is(li, .pillar, .card):hover > [data-icon="trail"] .i-lines,
    :is(li, .pillar, .card):hover > [data-icon="file"] .i-lines,
    :is(li, .pillar, .card):hover > [data-icon="review"] .i-check,
    :is(li, .pillar, .card):hover > [data-icon="shield"] .i-check,
    :is(li, .pillar, .card):hover > [data-icon="pulse"] .i-wave {
        animation: glyph-draw var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="alert"] svg {
        animation: glyph-shake var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="scale"] svg {
        animation: glyph-tilt var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="key"] svg {
        animation: glyph-nudge var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover
        > :is(
            [data-icon="ghost"],
            [data-icon="europe"],
            [data-icon="users"],
            [data-icon="building"],
            [data-icon="server"],
            [data-icon="layers"]
        )
        svg {
        animation: glyph-bob var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="clock"] .i-hands {
        animation: glyph-spin var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="server"] .i-led {
        animation: glyph-blink var(--site-illustration) var(--priva-ease-out);
    }

    :is(li, .pillar, .card):hover > [data-icon="server"] .i-led:nth-of-type(2) {
        animation-delay: 120ms;
    }

    @keyframes site-drop {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
    }

    @keyframes glyph-draw {
        from {
            stroke-dashoffset: var(--len);
        }
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes glyph-liftoff {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        42% {
            transform: translateY(-9px);
            opacity: 0;
        }
        43% {
            transform: translateY(9px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes glyph-ping {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        55% {
            transform: scale(1.4);
            opacity: 0;
        }
        56% {
            transform: scale(0.72);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes glyph-pop {
        0%,
        100% {
            transform: scale(1);
        }
        45% {
            transform: scale(1.5);
        }
    }

    @keyframes glyph-sweep {
        0%,
        100% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(2px, -1.6px);
        }
        50% {
            transform: translate(0.6px, 2px);
        }
        75% {
            transform: translate(-2px, 0.6px);
        }
    }

    @keyframes glyph-plugin {
        0%,
        100% {
            transform: translateY(0);
        }
        38% {
            transform: translateY(2.6px);
        }
        68% {
            transform: translateY(-1.1px);
        }
    }

    @keyframes glyph-tilt {
        0%,
        100% {
            transform: rotate(0);
        }
        30% {
            transform: rotate(7deg);
        }
        68% {
            transform: rotate(-5deg);
        }
    }

    @keyframes glyph-shake {
        0%,
        100% {
            transform: translateX(0);
        }
        20% {
            transform: translateX(-1.7px);
        }
        40% {
            transform: translateX(1.7px);
        }
        60% {
            transform: translateX(-1.1px);
        }
        80% {
            transform: translateX(0.7px);
        }
    }

    @keyframes glyph-bob {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2.6px);
        }
    }

    @keyframes glyph-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes glyph-nudge {
        0%,
        100% {
            transform: translateX(0);
        }
        45% {
            transform: translateX(2.2px);
        }
    }

    @keyframes glyph-blink {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.2;
        }
    }
}

/* Het vangnet voor wie minder beweging vraagt, hetzelfde als in de app: elke overgang die hierboven
   buiten het blok staat (kleur, rand, schaduw) is dan meteen klaar. */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-name: none !important;
    }
}