/* Homepage: de SalesDNA-bouwer in een donkere, rustige stijl.
   Kleuren en klassen gelden alleen binnen .dn, zodat de andere pagina's niet veranderen. */
.dn {
  --nacht: #0b0b0a; --nacht-2: #121211; --nacht-3: #191917; --nacht-4: #22221f;
  --haar: rgba(255,255,255,.09); --haar-2: rgba(255,255,255,.16);
  --wit: #f5f4ee; --wit-2: #c9c7bd; --wit-3: #8f8d84; --wit-4: #64625b;
  --geel: #fed800; --geel-zacht: rgba(254,216,0,.14); --geel-lijn: rgba(254,216,0,.45);
  --papier: #fbfaf6; --papier-inkt: #121211; --papier-stil: #6b6a63; --papier-lijn: #e4e2da;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  background: var(--nacht); color: var(--wit); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.dn h1, .dn h2, .dn h3, .dn h4, .dn p { margin: 0; }
.dn button, .dn input, .dn select, .dn textarea { font: inherit; color: inherit; }
.dn button { cursor: pointer; }
.dn .binnen { max-width: 1280px; }
.dn .mono { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wit-3); }
.dn .knop--stil { background: none; border: 0; color: var(--wit-2); padding: 0 12px; min-height: 40px; font-weight: 600; font-size: 14.5px; }
.dn .knop--stil:hover { color: var(--wit); }
.dn .knop svg { width: 16px; height: 16px; }
.dn .dn-hero-acties { display: flex; flex-wrap: wrap; gap: 10px; }
/* ── Hero ── */
.dn-hero { position: relative; padding-block: 96px 56px; overflow: hidden; }
.dn-hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 120%; background: radial-gradient(closest-side, rgba(254,216,0,.10), rgba(254,216,0,0)); pointer-events: none; }
.hero-kop { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: end; position: relative; }
.dn-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(52px, 8.4vw, 124px); line-height: .94; letter-spacing: -.045em; }
.dn-hero h1 em { font-style: italic; font-weight: 400; color: var(--geel); }
.hero-tekst { display: grid; gap: 28px; padding-bottom: 12px; }
.hero-tekst p { font-size: 19px; line-height: 1.6; color: var(--wit-2); max-width: 44ch; }
.dn-hero-acties { display: flex; flex-wrap: wrap; gap: 10px; }
.dn-hero .mono { display: block; margin-bottom: 28px; }

/* ── De bouwer ── */
.bouwer-wrap { position: relative; margin-top: 64px; }
.dn-bouwer { display: grid; grid-template-columns: 250px minmax(0, 1fr) 460px; background: var(--nacht-2); border: 1px solid var(--haar-2); border-radius: 20px; overflow: hidden; box-shadow: 0 60px 120px -60px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset; min-height: 640px; }
.bouwer-balk { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--haar); background: var(--nacht-3); }
.bouwer-balk .mono { color: var(--wit-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.voortgang { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.voortgang-staaf { width: 160px; height: 4px; background: var(--haar-2); border-radius: 4px; overflow: hidden; }
.voortgang-staaf i { display: block; height: 100%; width: 0; background: var(--geel); border-radius: 4px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.voorbeeld-label { font-size: 12px; color: var(--wit-3); border: 1px dashed var(--haar-2); padding: 3px 10px; border-radius: 999px; }

/* Lagen-navigatie */
.lagen-nav { border-right: 1px solid var(--haar); padding: 14px 10px; display: grid; gap: 2px; align-content: start; }
.dn-laag-knop { display: grid; grid-template-columns: 30px minmax(0,1fr) 18px; align-items: center; gap: 8px; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px 10px; color: var(--wit-2); transition: background .2s, color .2s; }
.dn-laag-knop:hover { background: var(--nacht-3); color: var(--wit); }
.dn-laag-knop[aria-current="step"] { background: var(--nacht-4); color: var(--wit); }
.dn-laag-knop .nr { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--wit-4); text-align: center; }
.dn-laag-knop[aria-current="step"] .nr { color: var(--wit); }
.dn-laag-knop b { display: block; font-size: 14px; font-weight: 600; }
.dn-laag-knop small { display: block; font-size: 11.5px; color: var(--wit-3); }
.status { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--wit-4); justify-self: end; position: relative; }
.status--ingevuld { border-color: var(--geel-lijn); background: var(--geel-zacht); }
.status--bevestigd { border-color: var(--geel); background: var(--geel); }
.status--bevestigd::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 6px; border: solid var(--nacht); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }

/* Stap */
.dn-stap { padding: 36px 40px 32px; display: grid; gap: 26px; align-content: start; min-width: 0; }
.stap-kop { display: grid; gap: 10px; }
.stap-kop h2 { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.stap-kop p { color: var(--wit-2); font-size: 15.5px; max-width: 54ch; }
.veld { display: grid; gap: 8px; }
.veld > label, .veld > .veld-label { font-size: 13px; font-weight: 600; color: var(--wit-2); }
.veld input[type="text"], .veld textarea, .veld select { width: 100%; background: var(--nacht); border: 1px solid var(--haar-2); border-radius: 12px; padding: 13px 15px; font-size: 16px; color: var(--wit); transition: border-color .2s; }
.veld textarea { resize: vertical; min-height: 96px; font-family: var(--serif); font-size: 19px; line-height: 1.45; }
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: none; border-color: var(--geel-lijn); box-shadow: 0 0 0 3px var(--geel-zacht); }
.veld input::placeholder, .veld textarea::placeholder { color: var(--wit-4); }
.hint { font-size: 12.5px; color: var(--wit-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dn-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--haar-2); background: transparent; font-size: 13.5px; color: var(--wit-2); transition: all .2s; }
.dn-chip:hover { border-color: var(--wit-3); color: var(--wit); }
.dn-chip[aria-pressed="true"] { background: var(--geel-zacht); border-color: var(--geel-lijn); color: var(--wit); }
.dn-chip[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--geel); }
.dn-chip:disabled { opacity: .35; cursor: not-allowed; }
.chip--suggestie { border-style: dashed; }
.lijst { display: grid; gap: 8px; counter-reset: f; }
.lijst-item { display: grid; grid-template-columns: 30px minmax(0,1fr) 32px; align-items: center; gap: 10px; background: var(--nacht); border: 1px solid var(--haar); border-radius: 12px; padding: 8px 8px 8px 12px; counter-increment: f; }
.lijst-item::before { content: counter(f); font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--geel); text-align: center; }
.lijst-item span { font-size: 15px; }
.lijst-item .weg { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--wit-3); display: grid; place-items: center; }
.lijst-item .weg:hover { background: var(--nacht-4); color: var(--wit); }
.toevoegen { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.toevoegen .knop { border-radius: 12px; min-height: 48px; }
.ritme { display: grid; gap: 10px; }
.ritme-rij { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: center; background: var(--nacht); border: 1px solid var(--haar); border-radius: 12px; padding: 12px 14px; }
.klasse { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--serif); font-size: 19px; font-weight: 700; background: var(--nacht-4); }
.ritme-rij:first-child .klasse { background: var(--geel); color: var(--nacht); }
.ritme-rij small { display: block; color: var(--wit-3); font-size: 12.5px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--haar-2); background: none; font-size: 18px; line-height: 1; }
.stepper button:hover { border-color: var(--wit-3); }
.stepper output { min-width: 44px; text-align: center; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.kpi-lijst { display: grid; gap: 8px; }
.kpi { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 12px; align-items: center; text-align: left; width: 100%; background: var(--nacht); border: 1px solid var(--haar); border-radius: 12px; padding: 12px 14px; transition: border-color .2s; }
.kpi:hover { border-color: var(--haar-2); }
.kpi[aria-pressed="true"] { border-color: var(--geel-lijn); background: linear-gradient(90deg, var(--geel-zacht), transparent 70%); }
.kpi .vakje { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--wit-4); position: relative; }
.kpi[aria-pressed="true"] .vakje { background: var(--geel); border-color: var(--geel); }
.kpi[aria-pressed="true"] .vakje::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--nacht); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kpi b { font-size: 14.5px; font-weight: 600; display: block; }
.kpi small { color: var(--wit-3); font-size: 12.5px; }
.kpi .norm { font-family: var(--mono); font-size: 12px; color: var(--wit-2); }
.stap-voet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--haar); margin-top: 4px; }
.stap-voet .knop--geel { border-radius: 12px; min-height: 48px; padding: 0 22px; }
.ai-noot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--wit-3); margin-left: auto; }
.ai-noot svg { width: 14px; height: 14px; color: var(--geel); }

/* Voorbeeld-paneel: helix en handboek */
.zicht { border-left: 1px solid var(--haar); background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(254,216,0,.07), transparent 70%), var(--nacht); position: relative; display: grid; grid-template-rows: auto minmax(0,1fr); }
.zicht-tabs { display: flex; gap: 4px; padding: 12px; border-bottom: 1px solid var(--haar); }
.zicht-tab { flex: 1; min-height: 38px; border-radius: 10px; border: 0; background: none; font-size: 13.5px; font-weight: 600; color: var(--wit-3); }
.zicht-tab[aria-selected="true"] { background: var(--nacht-4); color: var(--wit); }
.zicht-paneel { position: relative; min-height: 560px; }
#helix { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.helix-labels { position: absolute; inset: 0; pointer-events: none; }
.helix-label { position: absolute; left: 22px; transform: translateY(-50%); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wit-4); transition: color .3s; }
.helix-label.aan { color: var(--wit-2); }
.helix-label.dn-actief { color: var(--geel); }
.helix-tel { position: absolute; right: 22px; bottom: 20px; text-align: right; }
.helix-tel b { display: block; font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.helix-tel span { font-size: 12.5px; color: var(--wit-3); }

.handboek-paneel { padding: 24px; overflow-y: auto; max-height: 640px; }
.dn-papier { background: var(--papier); color: var(--papier-inkt); border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); padding: 34px 32px 38px; display: grid; gap: 22px; font-size: 13px; line-height: 1.55; }
.p-kop { display: grid; gap: 6px; padding-bottom: 18px; border-bottom: 2px solid var(--papier-inkt); }
.p-kop .p-mono { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--papier-stil); display: flex; justify-content: space-between; }
.p-kop h3 { font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.p-belofte { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.4; border-left: 3px solid var(--geel); padding-left: 12px; }
.p-sectie { display: grid; gap: 8px; }
.p-sectie h4 { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--papier-stil); display: flex; gap: 8px; align-items: center; }
.p-sectie h4 span { color: var(--papier-inkt); }
.p-fasen { display: flex; gap: 0; }
.p-fase { flex: 1; min-width: 0; border-top: 3px solid var(--papier-inkt); padding-top: 6px; font-size: 10.5px; font-weight: 600; line-height: 1.25; padding-right: 6px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.p-fase:nth-child(odd) { border-top-color: #3a3a36; }
.p-fase small { display: block; font-family: var(--mono); font-size: 8.5px; color: var(--papier-stil); margin-bottom: 2px; }
.p-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.p-lijst li { display: flex; gap: 8px; }
.p-lijst li::before { content: ""; flex: 0 0 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 1px #d8b700; }
.p-tabel { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.p-tabel td { padding: 5px 0; border-top: 1px solid var(--papier-lijn); color: var(--papier-inkt); font-size: 11.5px; }
.p-tabel td:last-child { text-align: right; font-family: var(--mono); font-size: 10.5px; }
.p-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.skelet { display: grid; gap: 5px; }
.skelet i { display: block; height: 7px; border-radius: 2px; background: #ebe9e2; }
.skelet i:nth-child(2) { width: 78%; }
.skelet i:nth-child(3) { width: 56%; }
.p-voet { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-stil); border-top: 1px solid var(--papier-lijn); padding-top: 10px; }

/* Afgerond */
.dn-klaar { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 4; background: rgba(18,18,17,.92); backdrop-filter: blur(10px); border: 1px solid var(--geel-lijn); border-radius: 16px; padding: 18px 20px; display: grid; gap: 10px; animation: op .5s cubic-bezier(.2,.8,.2,1); }
.dn-klaar b { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.dn-klaar p { font-size: 13.5px; color: var(--wit-2); }
.dn-klaar .dn-rij { display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes op { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); z-index: 5; background: var(--geel); color: var(--nacht); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; animation: op .35s ease; white-space: nowrap; }

/* ── Onder de hero ── */
.band { padding-block: 128px; border-top: 1px solid var(--haar); }
.stelling { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; align-items: start; }
.stelling h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -.03em; }
.stelling h2 em { color: var(--geel); }
.stelling-feiten { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; margin-top: 72px; }
.dn-feit { display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--haar-2); padding-top: 20px; }
.dn-feit b { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.25; }
.dn-feit p { color: var(--wit-2); font-size: 15.5px; }

.index-kop { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; }
.index-kop h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; letter-spacing: -.03em; max-width: 16ch; }
.index-kop p { color: var(--wit-2); max-width: 40ch; font-size: 16px; }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--haar-2); }
.index li { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--haar); align-items: baseline; transition: background .3s; }
.index li:hover { background: linear-gradient(90deg, rgba(254,216,0,.05), transparent 60%); }
.index .dn-n { font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1; color: var(--wit-4); transition: color .3s; }
.index li:hover .dn-n { color: var(--geel); }
.index h3 { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.index h3 small { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--wit-3); letter-spacing: 0; margin-top: 4px; }
.index p { color: var(--wit-2); font-size: 15px; }
.index .dn-subs { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--wit-3); line-height: 1.8; }

.regels { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--haar); border: 1px solid var(--haar); border-radius: 20px; overflow: hidden; }
.regels > div { background: var(--nacht); padding: 48px; display: grid; gap: 24px; align-content: start; }
.regels h3 { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.regels ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.regels li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; color: var(--wit-2); font-size: 15.5px; }
.regels li svg { width: 18px; height: 18px; margin-top: 3px; }
.regels .wel svg { color: var(--geel); }
.regels .niet svg { color: var(--wit-4); }

.dn-slot { text-align: center; padding-block: 160px; position: relative; overflow: hidden; border-top: 1px solid var(--haar); }
.dn-slot::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1100px; height: 700px; transform: translate(-50%, -55%); background: radial-gradient(closest-side, rgba(254,216,0,.16), transparent); pointer-events: none; }
.dn-slot .binnen { position: relative; display: grid; justify-items: center; gap: 28px; }
.dn-slot h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 7vw, 100px); line-height: .98; letter-spacing: -.04em; max-width: 12ch; }
.dn-slot h2 em { font-weight: 400; color: var(--geel); }
.dn-slot p { color: var(--wit-2); font-size: 18px; max-width: 46ch; }

/* ── Responsief ── */
@media (max-width: 1180px) {
  .dn-bouwer { grid-template-columns: 220px minmax(0, 1fr); }
  .zicht { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--haar); }
  .zicht-paneel { min-height: 460px; }
}
@media (max-width: 860px) {
  
  .dn-hero { padding-block: 56px 32px; }
  .hero-kop, .stelling { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dn-bouwer { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .lagen-nav { border-right: 0; border-bottom: 1px solid var(--haar); display: flex; overflow-x: auto; gap: 4px; padding: 10px; scrollbar-width: none; }
  .dn-laag-knop { flex: 0 0 auto; grid-template-columns: auto auto 14px; }
  .dn-laag-knop small { display: none; }
  .dn-stap { padding: 26px 20px; }
  .stap-kop h2 { font-size: 28px; }
  .voortgang-staaf { width: 80px; }
  .voorbeeld-label { display: none; }
  .stelling-feiten, .regels { grid-template-columns: minmax(0, 1fr); }
  .regels > div { padding: 32px 24px; }
  .index li { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; }
  .index li p { grid-column: 2; }
  .index .dn-n { font-size: 32px; }
  .index-kop { flex-direction: column; align-items: start; }
  .band { padding-block: 88px; }
  .ai-noot { margin-left: 0; }
  .p-twee { grid-template-columns: minmax(0,1fr); }
}

/* ── Homepage-aanvullingen: vergelijking, familie, FAQ ── */
.dn .band { background: var(--nacht); }
.dn .index-meer { margin-top: 28px; }
.dn .index-meer a, .dn .tekstlink { color: var(--wit); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--geel-lijn); padding-bottom: 2px; }
.dn .index-meer a:hover, .dn .tekstlink:hover { border-color: var(--geel); }
.vgl-wrap { overflow-x: auto; border: 1px solid var(--haar-2); border-radius: 20px; }
.vgl-wrap:focus-visible { outline: 2px solid var(--geel); }
.vgl { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15.5px; color: var(--wit-2); }
.vgl th, .vgl td { text-align: left; padding: 22px 26px; border-top: 1px solid var(--haar); vertical-align: top; }
.vgl thead th { border-top: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wit-3); }
.vgl tbody th { color: var(--wit); font-weight: 600; width: 24%; }
.vgl .wij { background: linear-gradient(180deg, rgba(254,216,0,.08), rgba(254,216,0,.03)); color: var(--wit); font-weight: 600; }
.vgl thead .wij { color: var(--geel); }
.familie3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--haar); border: 1px solid var(--haar); border-radius: 20px; overflow: hidden; }
.familie3 li { background: var(--nacht); padding: 40px 36px; display: grid; gap: 12px; align-content: start; }
.familie3 b { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.familie3 p { color: var(--wit-2); font-size: 15.5px; }
.familie3 .nu { background: linear-gradient(180deg, rgba(254,216,0,.09), var(--nacht) 80%); }
.familie3 .nu b { color: var(--geel); }
.faq-dn { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.index-kop--kolom { flex-direction: column; align-items: start; margin-bottom: 0; }
.dn .faq { border-top: 1px solid var(--haar-2); }
.dn .faq-item { border-bottom: 1px solid var(--haar-2); }
.dn .faq-item summary { color: var(--wit); font-family: var(--serif); font-weight: 600; font-size: 21px; padding: 24px 0; }
.dn .faq-item summary::after { background: transparent; border: 1px solid var(--haar-2); color: var(--wit); border-radius: 50%; }
.dn .faq-item[open] summary::after { background: var(--geel); color: var(--nacht); border-color: var(--geel); }
.dn .faq-antwoord p { color: var(--wit-2); }
.dn .faq-antwoord a { color: var(--wit); text-decoration-color: var(--geel-lijn); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 860px) {
  .familie3, .faq-dn { grid-template-columns: minmax(0, 1fr); }
  .faq-dn { gap: 32px; }
}
.dn .knop { gap: 10px; }