/* RedFoxBlue AI-scan · design tokens uit docs/02-huisstijl.md (merkboek 2025). Mobile first, geen dark mode:
   het merk kent alleen gebroken wit als achtergrond. */
@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url("../fonts/barlow/barlow-latin-400-normal.81419bf5abb5.woff2") format("woff2"); }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url("../fonts/barlow/barlow-latin-500-normal.8e986e86d57e.woff2") format("woff2"); }
@font-face { font-family: Barlow; font-weight: 700; font-display: swap; src: url("../fonts/barlow/barlow-latin-700-normal.15481e4eab6d.woff2") format("woff2"); }
@font-face { font-family: Barlow; font-weight: 800; font-display: swap; src: url("../fonts/barlow/barlow-latin-800-normal.8a60890dcf69.woff2") format("woff2"); }

:root {
  --rood: #bf1622;
  --rood-donker: #a5121d;
  --donkerblauw: #002b56;
  --lichtblauw: #a6cee8;
  --zachtgroen: #d6f8d6;
  --zwart: #1d1d1b;
  --wit: #ffffff;
  --gebroken-wit: #f4f2ee;
  --radius-kaart: 1.125rem;
  --inhoud: 40rem;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { background: var(--gebroken-wit) }
body { color: var(--zwart); font-family: Barlow, system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased }
h1, h2, h3 { color: var(--donkerblauw); font-weight: 800; line-height: 1.1 }
a { color: var(--donkerblauw) }
:focus-visible { outline: 3px solid var(--donkerblauw); outline-offset: 3px }
[hidden] { display: none !important }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Raamwerk: één kolom, linkslijnend; grote zachte cirkels half buiten beeld. */
.raam { position: relative; isolation: isolate; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden }
.raam > .binnen { width: 100%; max-width: 48rem; margin: 0 auto; padding: 1.25rem 1rem; flex: 1; display: flex; flex-direction: column }
.cirkel { position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; pointer-events: none }
.cirkel.blauw { background: rgb(166 206 232 / .3); width: 20rem; right: -8rem; top: -8rem }
.cirkel.groen { background: var(--zachtgroen); opacity: .6; width: 18rem; right: -6rem; bottom: -7rem }
main { width: 100%; max-width: var(--inhoud); margin: 0 auto; flex: 1 }

.kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem }
.merk { display: flex; align-items: center; gap: .6rem; text-decoration: none }
.merk img { width: 2.75rem; height: auto }
.woordmerk { font-size: .95rem; font-weight: 800; letter-spacing: .06em; color: var(--donkerblauw); line-height: 1 }
.payoff { margin-top: .25rem; font-size: .7rem; font-weight: 500; color: var(--rood); line-height: 1 }

.label { color: var(--rood); font-size: .875rem; font-weight: 700 }
.pil { display: inline-flex; align-items: center; border-radius: 99px; padding: .25rem .75rem; font-size: .875rem; font-weight: 500; color: var(--donkerblauw); background: var(--wit) }
.pil.groen { background: var(--zachtgroen); font-weight: 700 }
.pillen { display: flex; flex-wrap: wrap; gap: .5rem }
#teller:empty { display: none }

.knop { display: inline-flex; align-items: center; gap: .75rem; border: 0; border-radius: 99px; background: var(--rood); color: var(--wit); padding: .875rem 1.75rem; font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s }
.knop:hover { background: var(--rood-donker) }
.knop:disabled { opacity: .6; cursor: default }
.knop .toets { font-size: .75rem; font-weight: 500; color: rgb(255 255 255 / .75) }
.terug { border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 500; color: rgb(0 43 86 / .7); cursor: pointer; padding: 0 .25rem; border-radius: 99px }
.terug:hover { color: var(--donkerblauw); text-decoration: underline; text-underline-offset: 4px }
.kaart { background: var(--wit); border-radius: var(--radius-kaart); padding: 1.25rem }

/* Welkom */
.welkom main { padding-top: 3rem }
.welkom h1 { margin-top: .25rem; font-size: 2.1rem }
.welkom .intro { margin-top: 1rem; max-width: 34rem }
.pijlerrij { list-style: none; margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem }
.pijlerrij li { display: flex; align-items: center; gap: .5rem; border-radius: 99px; background: var(--wit); padding: .25rem .75rem .25rem .25rem; font-size: .875rem; color: var(--donkerblauw) }
.pijlerrij b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--lichtblauw); font-size: .75rem }
.partnerregel { margin-top: 1.25rem; max-width: 34rem; border-radius: var(--radius-kaart); background: var(--wit); padding: .875rem 1.25rem; font-size: .98rem; color: var(--donkerblauw) }
.welkom .knop { margin-top: 2rem }

/* Homepage: secties onder de hero */
.sectie { margin-top: 3.5rem }
.sectie h2 { font-size: 1.6rem }
.sectie .sub { margin-top: .375rem; color: rgb(29 29 27 / .75) }
.video { display: block; width: 100%; margin-top: 1rem; border-radius: var(--radius-kaart); background: var(--donkerblauw); aspect-ratio: 16 / 9 }
.videoplek { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--donkerblauw); color: var(--wit); font-weight: 700; font-size: 1.05rem; text-align: center; padding: 1rem }
.videoplek .speel { width: 4rem; height: 4rem; border-radius: 50%; background: var(--rood); position: relative }
.videoplek .speel::after { content: ""; position: absolute; left: 1.55rem; top: 1.2rem; border-left: 1.25rem solid var(--wit); border-top: .8rem solid transparent; border-bottom: .8rem solid transparent }
.stappen { list-style: none; margin-top: 1.25rem; display: grid; gap: .75rem }
.stappen .kaart { display: flex; gap: 1rem }
.stappen h3 { font-size: 1.1rem }
.stappen p { margin-top: .25rem; font-size: .98rem }
.stapnr { display: grid; flex-shrink: 0; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--rood); color: var(--wit); font-weight: 700 }
.lees { margin-top: .75rem; max-width: 36rem }
.wie { background: var(--donkerblauw); color: var(--wit) }
.wie h2 { color: var(--wit) }
.wie p { margin-top: .5rem }
.vragen { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem }
.vragen details { padding: .875rem 1.25rem }
.vragen summary { cursor: pointer; font-weight: 700; color: var(--donkerblauw) }
.vragen p { margin-top: .5rem; font-size: .98rem }
.slot { border-radius: var(--radius-kaart); background: var(--zachtgroen); padding: 1.5rem }
.slot .pillen { margin-top: .75rem }
.slot .knop { margin-top: 1.25rem }
.voet { width: 100%; max-width: var(--inhoud); margin: 3rem auto 0; padding-bottom: 1rem; font-size: .8rem; color: rgb(29 29 27 / .6) }
.voet a { color: inherit }

/* Vragen */
.vraagscherm main { padding-top: 2rem }
.voortgang { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: .375rem }
.voortgang .balk { display: block; height: .375rem; border-radius: 99px; background: var(--wit); overflow: hidden }
.voortgang .vulling { display: block; height: 100%; border-radius: 99px; background: var(--rood); transition: width .2s }
.voortgang .klaar .vulling { background: var(--donkerblauw) }
.voortgang .naam { display: block; margin-top: .375rem; font-size: .68rem; font-weight: 500; color: var(--donkerblauw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.voortgang .actief .naam { font-weight: 700 }
.vraagscherm .label { margin-top: 2rem }
.deelintro { margin-top: .25rem; font-size: .95rem; color: var(--donkerblauw) }
.vraagscherm h1 { margin-top: .375rem; font-size: 1.5rem; outline: none }
.hint { margin-top: .5rem; font-size: .875rem; color: rgb(29 29 27 / .7) }
.antwoorden { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: .625rem }
.antwoord { display: flex; width: 100%; align-items: center; gap: .75rem; border: 0; border-radius: var(--radius-kaart); padding: .75rem; text-align: left; font: inherit; font-size: .98rem; font-weight: 500; line-height: 1.35; color: var(--zwart); background: var(--wit); cursor: pointer; transition: background .15s, color .15s }
.antwoord:hover { background: rgb(166 206 232 / .25) }
.antwoord .nr { display: grid; flex-shrink: 0; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--lichtblauw); color: var(--donkerblauw); font-size: .875rem; font-weight: 700 }
.antwoord[aria-pressed="true"] { background: var(--donkerblauw); color: var(--wit) }
.antwoord[aria-pressed="true"] .nr { background: var(--zachtgroen) }
.vraagscherm .terug { margin-top: 1.5rem }
@media (hover: none) { .alleen-toetsenbord { display: none } }

/* Contact */
.contactscherm main { padding-top: 2.5rem }
.contactscherm h1 { margin-top: .25rem; font-size: 1.9rem; outline: none }
.formulier { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem }
.veld label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 700; color: var(--donkerblauw) }
.veld .uitleg { margin: -.125rem 0 .375rem; font-size: .85rem; color: rgb(29 29 27 / .75) }
.veld input, .veld select { width: 100%; border: 2px solid transparent; border-radius: 99px; background: var(--wit); padding: .625rem 1rem; font: inherit; font-size: 1rem; color: var(--zwart); outline: none; transition: border-color .15s }
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--donkerblauw) 50%), linear-gradient(135deg, var(--donkerblauw) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.5rem }
.veld input:focus, .veld select:focus { border-color: var(--donkerblauw) }
.veld input[aria-invalid="true"] { border-color: var(--rood) }
.fout { margin-top: .375rem; font-size: .875rem; font-weight: 700; color: var(--rood) }
.melding { border-radius: var(--radius-kaart); background: var(--wit); padding: .75rem 1rem; font-size: .875rem; font-weight: 500; color: var(--rood) }
.optin { display: flex; align-items: flex-start; gap: .75rem }
.optin input { margin-top: .15rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; accent-color: var(--donkerblauw) }
.optin label { font-size: .875rem; line-height: 1.4 }
.acties { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem }
.klein { font-size: .875rem; color: rgb(29 29 27 / .7) }
.honing { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden }

/* Uitslag */
.uitslagscherm main { padding-top: 2.5rem }
.uitslagscherm .sub { margin-top: .125rem; font-size: .875rem; color: var(--donkerblauw) }
.uitslagscherm h1 { margin-top: .25rem; font-size: 2.6rem; outline: none }
.niveaus { list-style: none; margin-top: 1rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: .375rem }
.niveaus .balk { display: block; height: .375rem; border-radius: 99px; background: var(--wit) }
.niveaus .aan .balk { background: var(--donkerblauw) }
.niveaus .huidig .balk { background: var(--rood) }
.niveaus .naam { display: block; margin-top: .375rem; font-size: .62rem; font-weight: 500; color: var(--donkerblauw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.niveaus .huidig .naam { font-weight: 700 }
.hefboom { margin-top: 2rem; display: flex; gap: 1rem }
.hefboom .nr { display: grid; flex-shrink: 0; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--rood); color: var(--wit); font-size: 1.125rem; font-weight: 700 }
.hefboom h2 { font-size: 1.5rem }
.hefboom p { margin-top: .5rem; font-size: .98rem }
.vooruitblik { margin-top: .75rem; font-size: .98rem }
.rapportkomt { margin-top: .75rem; border-radius: var(--radius-kaart); background: var(--zachtgroen); padding: .875rem 1.25rem; font-size: .98rem; font-weight: 500; color: var(--donkerblauw) }

/* Privacy (Markdown) */
.tekst { margin-top: 1.5rem; padding-bottom: 4rem }
.tekst h3 { margin: 1.75rem 0 .5rem; font-size: 1.25rem }
.tekst p, .tekst ul { margin-bottom: .9rem }
.tekst ul { padding-left: 1.25rem }
.tekst li { margin-bottom: .35rem }
.tekst strong { color: var(--donkerblauw) }

@media (min-width: 640px) {
  .raam > .binnen { padding: 2rem }
  .cirkel.blauw { width: 28rem; right: -6rem; top: -10rem }
  .cirkel.groen { width: 24rem }
  .welkom main { padding-top: 5rem }
  .welkom h1 { font-size: 3rem }
  .vraagscherm main { padding-top: 3rem }
  .vraagscherm h1 { font-size: 1.9rem }
  .voortgang { gap: .5rem }
  .voortgang .naam, .niveaus .naam { font-size: .75rem }
  .contactscherm main, .uitslagscherm main { padding-top: 4rem }
  .contactscherm h1 { font-size: 2.25rem }
  .uitslagscherm h1 { font-size: 3.75rem }
  .kaart { padding: 1.5rem }
  .stappen { grid-template-columns: repeat(3, 1fr) }
  .stappen .kaart { flex-direction: column }
  .sectie h2 { font-size: 1.9rem }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }