/* ============================================================================
   Sugardad.nl — leden.css
   Flow-specifieke stijlen voor de Fase 2-ledenschermen. Bron: Aanmelden.dc.html,
   Verificatie.dc.html, Welkom.dc.html, TotZiens.dc.html (Claude Design-handoff).
   Bouwt uitsluitend op de tokens uit styles.css.
   ==========================================================================*/

/* ── Gedeeld: eyebrow in de flows ───────────────────────────────────────── */
.flow-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--goud-link); font-weight: 600; margin-bottom: 10px; }
.flow-eyebrow--op-donker { letter-spacing: .2em; color: var(--goud); margin-bottom: 14px; }
.flow-eyebrow--vervolg { margin-top: 30px; }

/* ── Gedeeld: chips zonder JavaScript (input:checked + label) ───────────── */
.chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip__label { display: inline-block; cursor: pointer; font-size: 14px; padding: 11px 18px; border-radius: var(--r-pill); border: 1.5px solid #E2DDD1; background: #FFFFFF; color: #4A4E56; font-weight: 500; transition: all .2s ease; }
.chip .chip-input:checked + .chip__label { border-color: var(--goud); background: var(--creme-tint); color: var(--inkt); font-weight: 600; }
.chip .chip-input:focus-visible + .chip__label { outline: 2px solid var(--goud); outline-offset: 2px; }
.chips__hint { font-size: 12.5px; color: var(--tekst-donker-4); margin-top: 10px; }
.chipveld { border: none; padding: 0; margin: 0; min-width: 0; }
.chipveld legend { padding: 0; }

/* Veldfout onder een los veld */
.veld-fout { font-size: 13px; color: var(--rood); margin-top: 8px; }

/* ── Gedeeld: voortgangsbalk (progress-element, geen inline styles) ─────── */
.voortgang { flex: 1; display: block; width: 100%; height: 6px; border: none; appearance: none; -webkit-appearance: none; background: #EDE8DD; border-radius: 4px; overflow: hidden; }
.voortgang::-webkit-progress-bar { background: #EDE8DD; border-radius: 4px; }
.voortgang::-webkit-progress-value { background: var(--goud); border-radius: 4px; transition: width .4s ease; }
.voortgang::-moz-progress-bar { background: var(--goud); border-radius: 4px; }

/* Registratie: twee stap-balkjes (stap 1 · stap 2) */
.stap-balkjes { display: flex; gap: 8px; margin-bottom: 22px; }
.stap-balkjes span { flex: 1; height: 4px; border-radius: 4px; background: #EDE8DD; }
.stap-balkjes span.is-af { background: var(--goud); }
.stap-balkjes--op-donker { max-width: 240px; margin: 0 auto 26px; }
.stap-balkjes--op-donker span { background: rgba(255, 255, 255, .14); }
.stap-balkjes--op-donker span.is-af { background: var(--goud); }

/* ── Login: split-screen (Aanmelden.dc.html · isLogin) ──────────────────── */
.login-split { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-brand { position: relative; background: linear-gradient(165deg, #12181F 0%, var(--donker-vlak) 100%); color: var(--wit-zacht); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.login-brand__glow { position: absolute; top: -140px; right: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(198, 169, 104, .16) 0%, rgba(198, 169, 104, 0) 68%); pointer-events: none; }
.login-brand .logo { position: relative; }
.login-brand__midden { position: relative; }
.login-brand h1 { font-size: 46px; line-height: 1.08; color: var(--wit-warm); margin-bottom: 18px; }
.login-brand__tekst { font-size: 16px; line-height: 1.65; color: #A7AEB8; max-width: 380px; }
.login-brand__trust { position: relative; display: flex; gap: 24px; font-size: 13px; color: #7A828D; }
.login-formkant { background: #FFFFFF; display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.login-form { width: 100%; max-width: 380px; animation: fadeUp .6s ease both; }
.login-form h2 { font-size: 32px; color: var(--inkt); margin-bottom: 8px; }
.login-form__sub { font-size: 14.5px; color: var(--tekst-4); margin-bottom: 30px; }
.login-form__sub a { font-weight: 600; }
.login-form__velden { display: flex; flex-direction: column; gap: 18px; }
.login-form .veld { margin-bottom: 0; }
.veld__kopregel { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.veld__kopregel .veld__label { margin-bottom: 0; }
.veld__kopregel a { font-size: 12.5px; }
.login-form .btn--goud { width: 100%; margin-top: 4px; font-size: 15px; font-weight: 700; padding: 15px; }
.login-form__voetnoot { margin-top: 24px; text-align: center; font-size: 12px; color: var(--tekst-donker-4); }
@media (max-width: 860px) {
  .login-split { grid-template-columns: 1fr; }
  .login-brand { min-height: 260px; }
}
@media (max-width: 600px) {
  .login-brand { padding: 40px 28px; }
}

/* ── Auth-kaarten op donker (forgot / reset / e-mailverificatie / stap 2) ── */
.auth-scherm { min-height: 100vh; background: linear-gradient(165deg, #10161F 0%, var(--donker-vlak) 100%); display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-kaart { width: 100%; max-width: 420px; background: #FFFFFF; border-radius: 12px; padding: 40px 34px; animation: fadeUp .5s ease both; }
.auth-kaart__logo { display: flex; align-items: baseline; gap: 2px; justify-content: center; margin-bottom: 26px; }
.auth-kaart__intro { text-align: center; }
.auth-kaart h1 { font-size: 27px; color: var(--inkt); margin-bottom: 8px; }
.auth-kaart__tekst { font-size: 14px; color: var(--tekst-4); line-height: 1.6; margin-bottom: 24px; }
.auth-kaart .veld__label { text-align: left; }
.auth-kaart .btn--goud { width: 100%; font-size: 15px; font-weight: 700; padding: 14px; }
.auth-kaart__secundair { display: block; width: 100%; cursor: pointer; border: 1px solid var(--rand-input); background: #FFFFFF; color: var(--tekst-2); font-family: inherit; font-size: 14px; font-weight: 500; padding: 12px; border-radius: var(--r-btn); text-align: center; transition: border-color var(--overgang), color var(--overgang); }
.auth-kaart__secundair:hover { border-color: var(--goud); color: var(--inkt); }
.auth-kaart__terug { display: block; text-align: center; font-size: 13.5px; color: var(--tekst-5); margin-top: 18px; }
.auth-kaart__terug:hover { color: var(--goud-link); }
.auth-icoon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 20px; }
.auth-icoon--groen { background: var(--groen-bg); color: #2E8B57; }
.auth-icoon--goud { background: rgba(198, 169, 104, .16); color: var(--goud-link); }

/* 18+-verklaringskaart (isAge uit de handoff) */
.akkoord-kaart { position: relative; display: flex; align-items: flex-start; gap: 11px; cursor: pointer; background: var(--creme-veld); border: 1px solid #D3CDBF; border-radius: 4px; padding: 14px 15px; margin-bottom: 16px; text-align: left; transition: border-color .2s ease; }
.akkoord-kaart__vink { width: 20px; height: 20px; border-radius: 3px; border: 1.5px solid #D3CDBF; background: #FFFFFF; color: var(--nachtblauw); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; margin-top: 1px; transition: background .2s ease, border-color .2s ease; }
.akkoord-kaart__tekst { font-size: 13.5px; line-height: 1.5; color: var(--tekst-2); }
.akkoord-kaart .chip-input:checked + .akkoord-kaart__vink { background: var(--goud); border-color: var(--goud); }
.akkoord-kaart .chip-input:checked + .akkoord-kaart__vink::after { content: "✓"; }
.akkoord-kaart .chip-input:focus-visible + .akkoord-kaart__vink { outline: 2px solid var(--goud); outline-offset: 2px; }
.akkoord-kaart:has(.chip-input:checked) { border-color: var(--goud); }

/* ── Rolkeuze (Aanmelden.dc.html · isRole) ──────────────────────────────── */
.rol-scherm { min-height: 100vh; background: linear-gradient(165deg, #10161F 0%, var(--donker-vlak) 100%); display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.rol-scherm__in { width: 100%; max-width: 760px; animation: fadeUp .6s ease both; }
.rol-kop { text-align: center; margin-bottom: 40px; }
.rol-kop .logo { display: inline-flex; margin-bottom: 30px; }
.rol-kop h1 { font-size: 44px; line-height: 1.08; color: var(--wit-warm); margin-bottom: 12px; }
.rol-kop__sub { font-size: 16px; color: #A7AEB8; }
.rol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rol-kaart { display: block; text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid rgba(198, 169, 104, .22); border-radius: 8px; padding: 40px 34px; transition: border-color .3s, background .3s, transform .3s; }
.rol-kaart:hover { border-color: rgba(198, 169, 104, .55); background: rgba(255, 255, 255, .07); transform: translateY(-4px); }
.rol-kaart__icoon { width: 60px; height: 60px; border-radius: 50%; background: rgba(198, 169, 104, .12); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 22px; }
.rol-kaart h2 { font-size: 27px; color: var(--wit-zacht); margin-bottom: 10px; }
.rol-kaart p { font-size: 14.5px; line-height: 1.6; color: var(--tekst-donker-4); margin-bottom: 20px; }
.rol-kaart__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--goud); font-size: 14px; font-weight: 600; }
.rol-voet { text-align: center; margin-top: 26px; }
.rol-voet a { font-size: 13.5px; color: var(--tekst-5); }
.rol-voet a:hover { color: var(--goud-licht); }
@media (max-width: 860px) {
  .rol-grid { grid-template-columns: 1fr; }
  .rol-kop h1 { font-size: 36px; }
}

/* ── App-kop (witte sticky kop met logo + voortgang; onboarding/verificatie) */
.app-kop { background: #FFFFFF; border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 20; }
.app-kop__in { max-width: 720px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 20px; }
.app-kop .logo { flex-shrink: 0; }
.app-kop__stap { flex-shrink: 0; font-size: 12.5px; color: var(--tekst-5); font-weight: 500; white-space: nowrap; }

/* ── Onboarding-wizard (Aanmelden.dc.html · isOnboarding) ───────────────── */
.wizard { min-height: calc(100vh - 63px); background: var(--creme-sectie); display: flex; flex-direction: column; }
.wizard__form { flex: 1; display: flex; flex-direction: column; }
.wizard__main { flex: 1; display: flex; justify-content: center; padding: 44px 24px 60px; }
.wizard__in { width: 100%; max-width: 560px; animation: fadeUp .4s ease both; }
.wizard h1 { font-size: 34px; line-height: 1.1; color: var(--inkt); margin-bottom: 28px; }
.wizard__velden { display: flex; flex-direction: column; gap: 26px; }
.wizard .veld, .wizard .chipveld { margin-bottom: 0; }
.wizard .veld__label { font-size: 14px; color: #2E323A; margin-bottom: 10px; }
.wizard-voet { position: sticky; bottom: 0; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--rand); }
.wizard-voet__in { max-width: 560px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.wizard-voet__terug { cursor: pointer; background: none; border: none; color: var(--tekst-4); font-size: 14.5px; font-weight: 500; padding: 10px 4px; font-family: inherit; }
.wizard-voet__terug:hover { color: var(--inkt); }
.wizard-voet__verder { margin-left: auto; font-size: 15px; font-weight: 700; padding: 14px 30px; }

/* ── Verificatie (Verificatie.dc.html, SSR op één pagina) ───────────────── */
.tracker { display: flex; align-items: center; gap: 6px; margin-bottom: 30px; }
.tracker__stap { display: flex; align-items: center; gap: 6px; flex: 1; }
.tracker__stap:last-child { flex: 0 0 auto; }
.tracker__dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; background: #E7E1D3; color: #A69E8A; }
.tracker__stap.is-af .tracker__dot { background: var(--goud); color: var(--nachtblauw); }
.tracker__label { font-size: 12px; color: #A69E8A; font-weight: 500; white-space: nowrap; }
.tracker__stap.is-af .tracker__label { color: var(--inkt); }
.tracker__lijn { flex: 1; height: 1.5px; background: #E7E1D3; min-width: 8px; }
.tracker__stap.is-af .tracker__lijn { background: var(--goud); }

.verif-kop { margin-bottom: 26px; }
.verif-kop h1 { font-size: 34px; line-height: 1.1; color: var(--inkt); margin-bottom: 10px; }
.verif-kop p { font-size: 15.5px; line-height: 1.65; color: var(--tekst-4); }
.verif-sectie { background: #FFFFFF; border: 1px solid var(--rand); border-radius: 12px; padding: 26px 24px; margin-bottom: 20px; }
.verif-sectie h2 { font-size: 26px; line-height: 1.1; color: var(--inkt); margin-bottom: 8px; }
.verif-sectie h3 { font-size: 22px; line-height: 1.15; color: var(--inkt); margin: 0 0 8px; }
.verif-sectie__tekst { font-size: 14.5px; line-height: 1.6; color: var(--tekst-4); margin-bottom: 20px; }
.verif-sectie .btn--goud { font-size: 15px; font-weight: 700; padding: 14px; margin-top: 20px; }

.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.upload-grid--een { grid-template-columns: 1fr; }
.upload-slot { border: 1.5px dashed #CFC9BC; background: var(--creme-veld); border-radius: 8px; padding: 20px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; transition: border-color .2s; }
.upload-slot.is-af { border: 1.5px solid var(--groen-rand); background: var(--groen-bg); }
.upload-slot__icoon { font-size: 26px; color: #A99C82; }
.upload-slot.is-af .upload-slot__icoon { color: #2E8B57; }
.upload-slot__titel { font-size: 13.5px; font-weight: 600; color: var(--inkt); cursor: pointer; }
.upload-slot__hint { font-size: 11.5px; color: var(--tekst-donker-4); }
.upload-slot.is-af .upload-slot__hint { color: var(--groen); font-weight: 600; }
.upload-slot input[type="file"] { width: 100%; max-width: 240px; font-size: 12px; color: var(--tekst-4); margin-top: 6px; }
.tip-strook { display: flex; gap: 10px; align-items: flex-start; background: var(--creme-tint); border: 1px solid #E7DAB9; border-radius: 8px; padding: 13px 15px; }
.tip-strook__icoon { font-size: 15px; }
.tip-strook__tekst { font-size: 12.5px; line-height: 1.5; color: var(--goud-tekst); }
.selfie-tips { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 14px 0 0; padding: 0; }
.selfie-tips li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tekst-donker-4); }
.selfie-tips li::before { content: "○"; }
.upload-slot.is-af ~ .selfie-tips li { color: var(--groen); }

.tel-rij { display: flex; gap: 10px; margin-bottom: 18px; }
.tel-rij__land { display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--rand-input); border-radius: 4px; font-size: 15px; color: var(--inkt); background: var(--creme-veld); }
.tel-rij .veld__input { flex: 1; border-radius: 4px; }
.code-veld { letter-spacing: .5em; text-align: center; font-size: 22px; font-weight: 700; }
.verif-ok { display: flex; align-items: center; gap: 10px; background: var(--groen-bg); border: 1px solid var(--groen-rand); border-radius: 8px; padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--groen); }

.btn--inactief { background: #E4DECF; color: #A69E8A; cursor: not-allowed; }
.btn--inactief:hover { background: #E4DECF; color: #A69E8A; transform: none; }
.verif-privacy { font-size: 12px; color: var(--tekst-donker-4); text-align: center; margin-top: 16px; }

/* Review-/done-kaart (status ingediend/goedgekeurd) */
.verif-status { text-align: center; animation: fadeUp .4s ease both; }
.verif-status__ring { width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%; border: 3px solid #EDE8DD; border-top-color: var(--goud); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.verif-status__vink { width: 84px; height: 84px; border-radius: 50%; background: var(--groen-bg); color: #2E8B57; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 24px; }
.verif-status h1 { font-size: 32px; line-height: 1.1; color: var(--inkt); margin-bottom: 10px; }
.verif-status > p { font-size: 15px; line-height: 1.65; color: var(--tekst-4); margin-bottom: 28px; }
.verif-status__lijst { background: #FFFFFF; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 20px; text-align: left; margin-bottom: 26px; }
.verif-status__rij { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid #F1ECE2; }
.verif-status__rij:last-child { border-bottom: none; }
.verif-status__rij span:first-child { font-size: 14px; color: #2E323A; }
.verif-status__ok { font-size: 13px; font-weight: 600; color: #2E8B57; }
.verif-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--groen-bg); border: 1px solid var(--groen-rand); color: var(--groen); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: var(--r-pill); margin-bottom: 28px; }
.verif-status .btn--goud { display: block; width: 100%; font-size: 15px; font-weight: 700; padding: 16px; }

/* ── Welkom (Welkom.dc.html) ────────────────────────────────────────────── */
@keyframes floatGlow { 0%, 100% { transform: translateY(0) scale(1); opacity: .5; } 50% { transform: translateY(-20px) scale(1.06); opacity: .78; } }
@keyframes popIn { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.welkom { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(165deg, #10161F 0%, var(--gradient-diep) 55%, var(--nachtblauw) 100%); color: var(--wit-zacht); padding: 40px 24px; }
.welkom__glow { position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(198, 169, 104, .16) 0%, rgba(198, 169, 104, 0) 66%); animation: floatGlow 9s ease-in-out infinite; pointer-events: none; }
.welkom__in { position: relative; z-index: 2; width: 100%; max-width: 540px; text-align: center; animation: fadeUp .7s ease both; }
.welkom__vink { width: 92px; height: 92px; margin: 0 auto 28px; border-radius: 50%; background: var(--goud); display: flex; align-items: center; justify-content: center; font-size: 42px; color: var(--nachtblauw); animation: popIn .6s ease both .2s; box-shadow: 0 0 40px rgba(198, 169, 104, .4); }
.welkom .badge-pill { margin-bottom: 22px; }
.welkom h1 { font-size: 46px; line-height: 1.08; color: var(--wit-warm); margin-bottom: 16px; }
.welkom__lead { font-size: 16.5px; line-height: 1.65; color: var(--tekst-donker-3); max-width: 420px; margin: 0 auto 34px; }
.welkom__stappen { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 22px 26px; margin-bottom: 30px; text-align: left; }
.welkom__stappen-kop { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--goud-link); font-weight: 600; margin-bottom: 14px; }
.welkom__stappen-lijst { display: flex; flex-direction: column; gap: 12px; counter-reset: welkomstap; }
.welkom__stap { display: flex; align-items: center; gap: 12px; color: var(--tekst-donker-1); }
.welkom__stap:hover { color: var(--goud-licht); }
.welkom__stap-nr { width: 26px; height: 26px; border-radius: 50%; background: rgba(198, 169, 104, .15); color: var(--goud); font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.welkom__stap-nr::before { counter-increment: welkomstap; content: counter(welkomstap); }
.welkom__stap-tekst { font-size: 14.5px; }
.welkom__stap-pijl { margin-left: auto; color: var(--goud); }
.welkom__cta { display: block; width: 100%; font-size: 15px; font-weight: 700; padding: 16px; }
.welkom__uitloggen { margin-top: 22px; }
.welkom__uitloggen button { cursor: pointer; background: none; border: none; font-family: inherit; color: var(--tekst-donker-5); font-size: 13px; padding: 6px 10px; }
.welkom__uitloggen button:hover { color: var(--tekst-donker-2); text-decoration: underline; }

/* ── Afscheid (TotZiens.dc.html) + account verwijderen ──────────────────── */
.afscheid { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(165deg, #10161F 0%, var(--gradient-diep) 55%, var(--nachtblauw) 100%); color: var(--wit-zacht); padding: 40px 24px; }
.afscheid__in { position: relative; z-index: 2; width: 100%; max-width: 500px; text-align: center; animation: fadeUp .7s ease both; }
.afscheid__in .logo { display: inline-flex; margin-bottom: 40px; }
.afscheid__kaart { background: rgba(255, 255, 255, .03); border: 1px solid rgba(198, 169, 104, .18); border-radius: 20px; padding: 44px 38px; }
.afscheid__icoon { width: 70px; height: 70px; margin: 0 auto 24px; border-radius: 50%; border: 1px solid rgba(198, 169, 104, .4); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.afscheid h1 { font-size: 36px; color: var(--wit-warm); margin-bottom: 16px; }
.afscheid__tekst { font-size: 15.5px; line-height: 1.65; color: var(--tekst-donker-3); margin-bottom: 14px; }
.afscheid__avg { font-size: 14px; line-height: 1.6; color: var(--grijs); margin-bottom: 30px; }
.afscheid__box { background: rgba(198, 169, 104, .06); border: 1px solid rgba(198, 169, 104, .2); border-radius: 12px; padding: 20px; margin-bottom: 28px; }
.afscheid__box p { font-size: 14px; color: var(--goud-licht); line-height: 1.55; }
.afscheid .btn { display: block; width: 100%; }
.afscheid .btn--goud { font-size: 15px; font-weight: 700; padding: 15px; margin-bottom: 12px; }
.afscheid__ghost { display: block; background: transparent; border: 1px solid rgba(255, 255, 255, .14); color: var(--tekst-donker-2); font-size: 14px; font-weight: 500; padding: 14px; border-radius: var(--r-btn-soft); }
.afscheid__ghost:hover { border-color: rgba(198, 169, 104, .4); color: var(--wit-zacht); }
.afscheid__voetnoot { font-size: 12.5px; color: var(--tekst-donker-5); margin-top: 24px; line-height: 1.6; }
.afscheid .veld { text-align: left; }
.afscheid .veld__label { color: var(--tekst-donker-1); }
.afscheid .form-fout { text-align: left; }
.afscheid__annuleer { display: block; text-align: center; font-size: 13.5px; color: var(--tekst-donker-4); margin-top: 16px; }
.afscheid__annuleer:hover { color: var(--tekst-donker-1); }