/* MollieFix — one page. Handgeschreven CSS, geen framework, geen build-stap. */

:root {
    /* Kluis: de donkere basis. Goud = vrijgegeven, baksteen = vastgehouden. */
    --kluis: #0B2A2E;
    --kluis-diep: #061B1E;
    --kluis-op: #0F343A;
    --kluis-rand: rgba(234, 236, 231, 0.16);

    --papier: #EAECE7;
    --papier-diep: #E0E3DC;
    --kaart: #FBFBF9;

    --inkt: #16211F;
    --gedempt: #566461;
    --gedempt-licht: rgba(234, 236, 231, 0.66);

    --goud: #D9A227;
    --goud-diep: #8F6710;
    --baksteen: #A63D2F;
    --baksteen-licht: #E8927F;

    --lijn: rgba(11, 42, 46, 0.14);

    --display: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --tekst: "Source Serif 4", Iowan Old Style, Georgia, "Times New Roman", serif;

    --omhulsel: 1140px;
    --kop-hoogte: 68px;
    --soepel: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--kop-hoogte) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--papier);
    color: var(--inkt);
    font-family: var(--tekst);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.06;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
    max-width: 68ch;
}

a {
    color: inherit;
}

img, svg {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--goud);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 60;
    background: var(--kluis);
    color: var(--papier);
    padding: 12px 18px;
    font-family: var(--display);
}

.skip:focus {
    left: 12px;
    top: 12px;
}

.omhulsel {
    width: min(100% - 40px, var(--omhulsel));
    margin-inline: auto;
}

/* Smalle secties houden dezelfde linkerkantlijn als de rest van de pagina;
   alleen de regellengte wordt korter. */
.omhulsel--smal > * {
    max-width: 800px;
}

/* ---------- Merk en knoppen ---------- */

.merk {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: -0.02em;
}

.merk__teken {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 7l14 17h-9v14H27V24h-9z' fill='%23D9A227'/%3E%3Crect x='14' y='45' width='36' height='7' rx='3.5' fill='%23D9A227' opacity='.45'/%3E%3C/svg%3E") center/contain no-repeat;
}

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 1px solid var(--goud);
    border-radius: 3px;
    background: var(--goud);
    color: var(--kluis-diep);
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.97rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s var(--soepel), transform 0.2s var(--soepel);
}

.knop:hover {
    background: #EDB13A;
    border-color: #EDB13A;
}

.knop:active {
    transform: translateY(1px);
}

.knop--klein {
    padding: 9px 16px;
    font-size: 0.9rem;
}

.knop--stil {
    background: transparent;
    border-color: var(--kluis-rand);
    color: var(--papier);
}

.knop--stil:hover {
    background: rgba(234, 236, 231, 0.08);
    border-color: rgba(234, 236, 231, 0.4);
}

.knop--vol {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.02rem;
}

/* ---------- Kop ---------- */

.kop {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(234, 236, 231, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s var(--soepel), background 0.25s var(--soepel);
}

.kop.is-gescrold {
    border-bottom-color: var(--lijn);
    background: rgba(234, 236, 231, 0.96);
}

.kop__binnen {
    width: min(100% - 40px, var(--omhulsel));
    margin-inline: auto;
    height: var(--kop-hoogte);
    display: flex;
    align-items: center;
    gap: 28px;
}

.kop__nav {
    margin-left: auto;
    display: flex;
    gap: 26px;
    font-family: var(--display);
    font-size: 0.94rem;
    font-weight: 500;
}

.kop__nav a {
    text-decoration: none;
    color: var(--gedempt);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.kop__nav a:hover {
    color: var(--inkt);
    border-bottom-color: var(--goud);
}

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

.hero {
    background: var(--kluis);
    color: var(--papier);
    padding-block: clamp(52px, 8vw, 92px) clamp(64px, 9vw, 108px);
}

.hero__binnen {
    width: min(100% - 40px, var(--omhulsel));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}

.hero__titel {
    font-size: clamp(2.75rem, 6.2vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.038em;
    max-width: 12ch;
}

.hero__lead {
    margin-top: 26px;
    font-size: clamp(1.06rem, 1.5vw, 1.22rem);
    line-height: 1.62;
    color: rgba(234, 236, 231, 0.84);
    max-width: 46ch;
}

.hero__acties {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero__voet {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 0.94rem;
    color: var(--gedempt-licht);
    max-width: 44ch;
}

/* ---------- Grootboek ---------- */

.grootboek {
    margin: 0;
}

.grootboek__cap {
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gedempt-licht);
    margin-bottom: 10px;
}

.grootboek__kaart {
    background: var(--kluis-op);
    border: 1px solid var(--kluis-rand);
    border-radius: 6px;
    padding: 22px 24px 20px;
    box-shadow: 0 30px 70px rgba(3, 15, 17, 0.4);
}

.grootboek__hoofd {
    display: flex;
    justify-content: space-between;
    font-family: var(--display);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gedempt-licht);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kluis-rand);
}

.grootboek__regels {
    list-style: none;
    margin: 0;
    padding: 0;
}

.regel {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(234, 236, 231, 0.09);
    font-family: var(--display);
}

.regel__datum {
    font-size: 0.85rem;
    color: var(--gedempt-licht);
}

.regel__bedrag {
    font-size: 1.06rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    transition: color 0.5s var(--soepel);
}

.regel--doel.is-vrij .regel__bedrag {
    color: var(--goud);
}

.pil {
    justify-self: end;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.pil--klaar {
    color: rgba(234, 236, 231, 0.62);
    background: rgba(234, 236, 231, 0.08);
}

.pil--vast {
    color: var(--baksteen-licht);
    background: rgba(166, 61, 47, 0.24);
}

.pil--vrij {
    color: var(--goud);
    background: rgba(217, 162, 39, 0.18);
}

.grootboek__totaal {
    margin: 18px 0 0;
    display: grid;
    gap: 12px;
    font-family: var(--display);
}

.grootboek__totaal > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.grootboek__totaal dt {
    font-size: 0.88rem;
    color: var(--gedempt-licht);
}

.grootboek__totaal dd {
    margin: 0;
    font-size: 1.14rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}

.grootboek__totaal dd.is-nul {
    color: rgba(234, 236, 231, 0.4);
}

.grootboek__totaal dd:not(.is-nul) {
    color: var(--goud);
}

/* ---------- Gratis gids ---------- */

.gids {
    background: var(--papier-diep);
    padding-block: clamp(58px, 8vw, 96px);
}

.gids__raster {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}

.omslagje {
    margin: 0;
}

.omslagje__vel {
    aspect-ratio: 1 / 1.414;
    background: var(--kaart);
    border: 1px solid var(--lijn);
    border-radius: 2px;
    box-shadow: 0 18px 44px rgba(11, 42, 46, 0.16);
    padding: 20px 19px 16px;
    display: flex;
    flex-direction: column;
}

.omslagje__merk {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: -0.02em;
}

.omslagje__merk .merk__teken {
    width: 14px;
    height: 14px;
}

.omslagje__titel {
    margin-top: auto;
    font-size: 1.38rem;
    line-height: 1.04;
    letter-spacing: -0.032em;
    padding-bottom: 11px;
    border-bottom: 2px solid var(--goud);
}

.omslagje__inhoud {
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: hoofdstuk;
    font-family: var(--display);
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--gedempt);
}

.omslagje__inhoud li {
    counter-increment: hoofdstuk;
    display: flex;
    gap: 7px;
    padding: 3px 0;
    border-bottom: 1px solid var(--lijn);
}

.omslagje__inhoud li::before {
    content: counter(hoofdstuk);
    color: var(--goud-diep);
    font-weight: 600;
}

.omslagje__voet {
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--display);
    font-size: 0.68rem;
    color: var(--gedempt);
}

.gids__tekst h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    margin-bottom: 16px;
}

.gids__tekst > p {
    color: var(--gedempt);
    max-width: 54ch;
}

.gids__label {
    display: block;
    margin: 24px 0 8px;
    font-family: var(--display);
    font-size: 0.88rem;
    font-weight: 600;
}

.gids__rij {
    display: flex;
    gap: 10px;
    max-width: 520px;
}

.gids__rij input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: 3px;
    font-family: var(--display);
    font-size: 1rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.gids__rij input:focus {
    outline: none;
    border-color: var(--goud);
    box-shadow: 0 0 0 3px rgba(217, 162, 39, 0.22);
}

.gids__rij input[aria-invalid="true"] {
    border-color: var(--baksteen);
}

.gids__rij input::placeholder {
    color: #9AA5A2;
}

.gids__rij .knop {
    flex: 0 0 auto;
}

.gids__klein,
.gids__formulier .veld__fout {
    margin: 12px 0 0;
    max-width: 52ch;
}

.gids__klein {
    font-size: 0.87rem;
    color: var(--gedempt);
}

/* Even breed als het formulier dat het vervangt, zodat de kolom niet verspringt.
   De selector is bewust iets zwaarder dan .melding, die max-width opheft. */
.gids__tekst .gids__klaar {
    margin: 24px 0 0;
    max-width: 520px;
}

.gids__download {
    margin: 16px 0 0;
}

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

.sectie {
    padding-block: clamp(66px, 9vw, 116px);
}

.sectie--licht {
    background: var(--kaart);
}

.sectie__kop {
    max-width: 52ch;
    margin-bottom: clamp(38px, 5vw, 60px);
}

.sectie__kop h2 {
    font-size: clamp(1.95rem, 3.6vw, 2.9rem);
}

.sectie__lead {
    margin-top: 18px;
    margin-bottom: 0;
    font-size: 1.1rem;
    color: var(--gedempt);
}

/* ---------- Situaties ---------- */

.gevallen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 clamp(32px, 5vw, 64px);
    border-top: 1px solid var(--lijn);
}

.geval {
    padding: 26px 0 28px;
    border-bottom: 1px solid var(--lijn);
    position: relative;
    padding-left: 20px;
}

.geval::before {
    content: "";
    position: absolute;
    left: 0;
    top: 32px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--baksteen);
}

.geval h3 {
    font-size: 1.09rem;
    line-height: 1.28;
    letter-spacing: -0.018em;
}

.geval p {
    margin: 10px 0 0;
    color: var(--gedempt);
    font-size: 0.99rem;
}

/* ---------- Stappen ---------- */

.stappen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stap {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: clamp(20px, 4vw, 48px);
    padding: 30px 0;
    border-top: 1px solid var(--lijn);
}

.stap:last-child {
    border-bottom: 1px solid var(--lijn);
}

.stap__wanneer {
    font-family: var(--display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--goud-diep);
    padding-top: 3px;
}

.stap__inhoud h3 {
    font-size: 1.32rem;
    letter-spacing: -0.024em;
}

.stap__inhoud p {
    margin: 12px 0 0;
    color: var(--gedempt);
}

/* ---------- Eerlijk ---------- */

.eerlijk {
    background: var(--kluis);
    color: var(--papier);
    padding-block: clamp(64px, 9vw, 108px);
}

.eerlijk h2 {
    font-size: clamp(1.95rem, 3.6vw, 2.7rem);
    margin-bottom: 34px;
}

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

.eerlijk__lijst li {
    padding-top: 22px;
    border-top: 1px solid var(--kluis-rand);
    color: rgba(234, 236, 231, 0.78);
    max-width: 62ch;
}

.eerlijk__lijst strong {
    display: block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
    color: var(--papier);
    margin-bottom: 6px;
}

/* ---------- Tarieven ---------- */

.tarieven {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    align-items: start;
}

.tarief {
    border: 1px solid var(--lijn);
    border-radius: 5px;
    padding: 32px 30px 34px;
    background: var(--kaart);
}

.tarief--uit {
    background: var(--kluis);
    border-color: var(--kluis);
    color: var(--papier);
}

.tarief__naam {
    font-size: 1.16rem;
    letter-spacing: -0.02em;
}

.tarief__prijs {
    margin: 16px 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.tarief__bedrag {
    font-family: var(--display);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.tarief--uit .tarief__bedrag {
    color: var(--goud);
}

.tarief__eenheid {
    font-size: 0.9rem;
    color: var(--gedempt);
}

.tarief--uit .tarief__eenheid {
    color: var(--gedempt-licht);
}

.tarief__samenvatting {
    margin: 14px 0 0;
    color: var(--gedempt);
}

.tarief--uit .tarief__samenvatting {
    color: rgba(234, 236, 231, 0.8);
}

.tarief__punten {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
    font-size: 0.98rem;
}

.tarief__punten li {
    padding-left: 22px;
    position: relative;
    color: var(--gedempt);
}

.tarief--uit .tarief__punten li {
    color: rgba(234, 236, 231, 0.8);
}

.tarief__punten li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 2px;
    background: var(--goud);
}

.kosten__voet {
    margin: 28px 0 0;
    font-size: 0.98rem;
    color: var(--gedempt);
    max-width: 62ch;
}

/* ---------- Vragen ---------- */

.vragen {
    border-top: 1px solid var(--lijn);
}

.vraag {
    border-bottom: 1px solid var(--lijn);
}

.vraag summary {
    cursor: pointer;
    list-style: none;
    padding: 22px 40px 22px 0;
    position: relative;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.06rem;
    letter-spacing: -0.018em;
}

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

.vraag summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--goud-diep);
    transform: translateY(-50%);
}

.vraag summary::before {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 2px;
    height: 12px;
    background: var(--goud-diep);
    transform: translateY(-50%);
    transition: transform 0.22s var(--soepel), opacity 0.22s var(--soepel);
}

.vraag[open] summary::before {
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
}

.vraag p {
    margin: 0 0 24px;
    color: var(--gedempt);
    max-width: 66ch;
}

/* ---------- Dossier ---------- */

.dossier {
    background: var(--papier-diep);
    padding-block: clamp(66px, 9vw, 112px);
}

.dossier__raster {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
}

.dossier__zij h2 {
    font-size: clamp(1.95rem, 3.4vw, 2.6rem);
    margin-bottom: 18px;
}

.dossier__zij p {
    color: var(--gedempt);
}

.dossier__punten {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
    font-family: var(--display);
    font-size: 0.96rem;
}

.dossier__punten li {
    padding-left: 22px;
    position: relative;
}

.dossier__punten li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 10px;
    height: 2px;
    background: var(--goud);
}

.dossier__mailen {
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--lijn);
    font-family: var(--display);
    font-size: 1.02rem;
    color: var(--inkt);
}

.dossier__mailen a {
    color: var(--goud-diep);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.dossier__formulier {
    background: var(--kaart);
    border: 1px solid var(--lijn);
    border-radius: 5px;
    padding: clamp(24px, 3.5vw, 38px);
}

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

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

.veld {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.veld--breed {
    grid-column: 1 / -1;
}

.veld label {
    font-family: var(--display);
    font-size: 0.88rem;
    font-weight: 600;
}

.veld__opt {
    font-weight: 400;
    color: var(--gedempt);
}

.veld input,
.veld select,
.veld textarea {
    width: 100%;
    padding: 12px 13px;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: 3px;
    font-family: var(--display);
    font-size: 0.98rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.veld textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.55;
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
    outline: none;
    border-color: var(--goud);
    box-shadow: 0 0 0 3px rgba(217, 162, 39, 0.22);
}

.veld input::placeholder,
.veld textarea::placeholder {
    color: #9AA5A2;
}

.veld [aria-invalid="true"] {
    border-color: var(--baksteen);
}

.veld__fout {
    margin: 0;
    font-size: 0.88rem;
    color: var(--baksteen);
}

.formulier__voet {
    margin-top: 6px;
}

.formulier__klein {
    margin: 12px 0 0;
    font-size: 0.87rem;
    color: var(--gedempt);
}

.honing {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.melding {
    padding: 18px 20px;
    border-radius: 4px;
    margin: 0 0 18px;
    max-width: none;
}

.melding--fout {
    background: rgba(166, 61, 47, 0.1);
    border: 1px solid rgba(166, 61, 47, 0.35);
    color: #7C2C21;
}

.melding--goed {
    background: rgba(217, 162, 39, 0.12);
    border: 1px solid rgba(217, 162, 39, 0.4);
    margin-bottom: 0;
}

.melding--goed h3 {
    font-size: 1.24rem;
    margin-bottom: 10px;
}

.melding--goed p {
    margin: 0;
    color: var(--gedempt);
}

/* ---------- Voet ---------- */

.voet {
    background: var(--kluis-diep);
    color: var(--papier);
    padding-block: 56px 34px;
}

.voet__raster {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--kluis-rand);
}

.voet__regel {
    margin: 16px 0 0;
    color: var(--gedempt-licht);
    font-size: 0.98rem;
    max-width: 46ch;
}

.voet__contact {
    font-family: var(--display);
    font-size: 0.95rem;
}

.voet__contact p {
    margin: 0 0 10px;
    color: var(--gedempt-licht);
}

.voet__contact a {
    color: var(--papier);
    text-decoration-color: rgba(234, 236, 231, 0.4);
    text-underline-offset: 3px;
}

.voet__disclaimer {
    margin: 26px 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(234, 236, 231, 0.5);
    max-width: 88ch;
}

/* ---------- Smaller ---------- */

@media (max-width: 900px) {
    .hero__binnen,
    .dossier__raster,
    .voet__raster {
        grid-template-columns: 1fr;
    }

    .hero__titel {
        max-width: 100%;
    }

    .gevallen,
    .tarieven {
        grid-template-columns: 1fr;
    }

    .gids__raster {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .omslagje__vel {
        width: 232px;
    }

    .kop__nav {
        display: none;
    }

    .kop__binnen {
        justify-content: space-between;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 16px;
    }

    .stap {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .formulier {
        grid-template-columns: 1fr;
    }

    .hero__acties .knop {
        flex: 1 1 100%;
    }

    .gids__rij {
        flex-direction: column;
    }

    .regel {
        grid-template-columns: 3.9rem 1fr;
        row-gap: 6px;
    }

    .pil {
        grid-column: 2;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}