/* tekstvoorstel 17-10-2026, live 18-10-2026 */
.bz-kaart .intro + .intro { margin-top: 0; }
.bz-kaart .intro:last-of-type { margin-bottom: 0; }
.dr-tekst .intro { margin-bottom: 0; }
.dr-tekst .dr-intro2 { margin-top: 1em; margin-bottom: clamp(28px, 3vw, 40px); }
.wr-kaart .wr-knop { margin-top: clamp(20px, 2.4vw, 28px); }
.af-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 64px); margin: clamp(32px, 4vw, 56px) 0; }
.af-item { border-top: 1px solid var(--zwart-3); padding-top: 20px; }
.af-item h3 { margin: 0 0 10px; }
.af-item p { margin: 0; line-height: 1.6; color: var(--fg-2); max-width: 32em; }
@media (max-width: 720px) { .af-lijst { grid-template-columns: 1fr; } }
.dk-uitleg { font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
.dk-noot { font-size: 14px; line-height: 1.5; margin: 0 0 24px; opacity: .75; }
.dk-kaart .dk-noot + .knop, .dk-kaart .dk-uitleg + .knop { margin-top: auto; }
.slot-regel { max-width: 34em; margin-left: auto; margin-right: auto; }
.bz-kaart .intro:has(+ .knop) { margin-bottom: clamp(28px, 3vw, 40px); }
/* werkwijze: formulier als brede strook onder tekst en kaart */
.dr-strook { grid-column: 1 / -1; max-width: none; margin-top: 0; }
.dr-strook .vl-velden { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.vl-veld { display: flex; flex-direction: column; gap: 6px; }
.vl-label { font-size: 14px; font-weight: 700; color: var(--zwart); }
.dr-tekst .intro.dr-intro2 { margin-bottom: 0; }
@media (max-width: 760px) { .dr-strook .vl-velden { grid-template-columns: minmax(0, 1fr); } }
/* vergelijking: kolom Werfmeester wit in plaats van lime, zodat hij niet op de keuzeknop lijkt */
.vb-tabel .vb-wm { background: var(--wit); color: var(--zwart); }
.vb-tabel thead .vb-wm { color: var(--zwart); }
@media (max-width: 640px) { .vb-tabel thead .vb-wm { background: none; color: var(--wit); } }
/* vergelijking per vraag (vervangt tabel met wisselknop) */
.vv-lijst { margin-top: clamp(32px, 4vw, 56px); max-width: 1200px; }
.vv-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.5fr); gap: 12px clamp(24px, 3vw, 48px); padding: clamp(20px, 2.2vw, 28px) 0; border-top: 1px solid var(--zwart-3); }
.vv-rij:last-child { border-bottom: 1px solid var(--zwart-3); }
.vv-vraag { margin: 0; }
.vv-wm p { margin: 0; }
.vv-wm p:last-child { font: 700 clamp(18px, 1.5vw, 21px)/1.35 var(--f-tekst); color: var(--wit); }
.vv-naam, .vv-alt dt { margin: 0 0 6px; font-size: 12px; }
.vv-naam { color: var(--lime); }
.vv-alt { margin: 0; display: grid; gap: 14px; }
.vv-alt dt { color: var(--fg-2); }
.vv-alt dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
@media (max-width: 900px) {
  .vv-rij { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vv-alt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 4px; }
}
@media (max-width: 420px) { .vv-alt { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
/* vergelijking als twee panelen (Parker): zonder op donker, met op wit */
.pv-tabel { margin-top: clamp(32px, 4vw, 56px); max-width: 1040px; border-radius: var(--r-groot); overflow: hidden; border: 1px solid var(--zwart-3); }
.pv-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pv-z, .pv-m { display: flex; gap: 12px; align-items: flex-start; padding: 18px clamp(18px, 2.4vw, 32px); }
.pv-z { background: var(--zwart-2); color: var(--fg-2); }
.pv-m { background: var(--wit); color: var(--zwart); }
.pv-rij + .pv-rij .pv-z { border-top: 1px solid var(--zwart-3); }
.pv-rij + .pv-rij .pv-m { border-top: 1px solid rgba(0, 0, 0, .1); }
.pv-z p, .pv-m p { margin: 0; font-size: 16px; line-height: 1.5; }
.pv-m p { font-weight: 700; }
.pv-ico { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.pv-z .pv-ico { color: rgba(255, 255, 255, .4); }
.pv-m .pv-ico { color: var(--zwart); }
.pv-kop .pv-z, .pv-kop .pv-m { flex-direction: column; gap: 4px; padding-top: 24px; padding-bottom: 20px; }
.pv-kop .kopje { margin: 0; font-size: clamp(18px, 1.6vw, 22px); }
.pv-kop .pv-z .kopje { color: var(--wit); }
.pv-kop p.pv-sub { font-size: 14px; font-weight: 400; opacity: .7; }
@media (max-width: 600px) {
  .pv-z, .pv-m { padding: 14px 14px; gap: 10px; }
  .pv-z p, .pv-m p { font-size: 14px; }
  .pv-ico { width: 16px; height: 16px; }
}
/* zoals Parker: koprij in één kleur (lime), rijen eronder in één kleur (wit); scheiding met lijnen */
.pv-tabel { border: 0; background: var(--wit); }
.pv-z, .pv-m { background: var(--wit); }
.pv-z { color: #5C5C5C; border-right: 1px solid rgba(0, 0, 0, .1); }
.pv-rij + .pv-rij .pv-z, .pv-rij + .pv-rij .pv-m { border-top: 1px solid rgba(0, 0, 0, .1); }
.pv-z .pv-ico { color: rgba(0, 0, 0, .35); }
.pv-kop .pv-z, .pv-kop .pv-m { background: var(--lime); color: var(--zwart); }
.pv-kop .pv-z { border-right-color: rgba(0, 0, 0, .15); }
.pv-kop .pv-z .kopje, .pv-kop .kopje { color: var(--zwart); }
.pv-kop p.pv-sub { opacity: .75; }
/* zonder-kolom niet meer grijs: tekst en icoon zwart (niet vet) */
.pv-z { color: var(--zwart); }
.pv-z .pv-ico { color: var(--zwart); }
/* afspraken op wit, de vier punten als blauwe kaarten met witte tekst */
.af-item.t-blauw { border-top: 0; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-vlak); }
.af-item.t-blauw h3, .af-item.t-blauw p { color: var(--wit); }
.af-lijst { gap: clamp(12px, 1.6vw, 20px); }
/* variant: alleen blauwe omlijning, zwarte tekst */
.af-item.af-lijn { border: 2px solid var(--blauw); padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-vlak); background: var(--wit); }
.af-item.af-lijn h3, .af-item.af-lijn p { color: var(--zwart); }
/* bijzaak-kaart: minder ruimte tussen de alinea's */
.bz-kaart .intro { margin-bottom: 0; }
.bz-kaart .intro + .intro { margin-top: .75em; }
.bz-kaart .intro:has(+ .knop) { margin-bottom: clamp(24px, 2.6vw, 32px); }
/* werkwijze: kaart wisselt alleen op klik; kort indraaien in plaats van de doorlopende draai */
.dr-stapel.draait .dr-kaart.nu { animation: dr-in .45s cubic-bezier(.15, .75, .3, 1) both; }
@keyframes dr-in { from { transform: rotate(-3deg) rotateY(-90deg) scale(.94); } to { transform: rotate(-3deg) rotateY(0deg) scale(1); } }
.dr-beeld { display: flex; flex-direction: column; align-items: center; }
.dr-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 28px; }
.dr-nav-knop { padding: 9px 12px 8px; border: 1px solid var(--zwart-3); border-radius: var(--r-pil); background: none; color: var(--fg); font-family: var(--f-sub); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; line-height: 1; cursor: pointer; opacity: .75; }
.dr-nav-knop:hover { opacity: 1; }
.dr-nav-knop[aria-current="step"] { background: var(--lime); border-color: var(--lime); color: var(--zwart); opacity: 1; }
.dr-nav-knop:focus-visible { outline: 3px solid var(--focus, var(--blauw)); outline-offset: 2px; }
.dr-nav { align-items: center; }
.dr-pijl { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: var(--wit); color: var(--zwart); font-size: 18px; line-height: 1; cursor: pointer; }
.dr-pijl:hover { background: var(--lime); }
.dr-pijl:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }
.dr-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; width: 100%; max-width: 560px; }
.dr-nav-rij { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
/* formulier zonder wit vlak, direct op zwart */
.dr-strook { padding: 0; background: none; border-radius: 0; box-shadow: none; }
.dr-strook .vl-titel { color: var(--wit); }
.dr-strook .vl-label { color: var(--wit); }
/* alleen de pijltjes, zonder stapknoppen */
.dr-nav-rij { display: none; }
.dr-nav { display: flex; justify-content: center; gap: 16px; }
/* formuliertitel in Contrail One, zoals de bovenkoppen */
.dr-strook .vl-titel { font-family: var(--f-sub); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.15; }
/* volgende-pijl knippert rustig (lime gloed) tot de eerste klik */
.dr-pijl.lokt { animation: lokt 2.4s ease-in-out infinite; }
@keyframes lokt {
  0%, 100% { background: var(--wit); box-shadow: 0 0 0 0 rgba(208, 255, 0, 0); }
  50% { background: var(--lime); box-shadow: 0 0 0 8px rgba(208, 255, 0, .25); }
}
@media (prefers-reduced-motion: reduce) { .dr-pijl.lokt { animation: none; background: var(--lime); } }
/* opvallender: sneller, iets groter en een bredere gloed */
.dr-pijl.lokt { animation: lokt2 1.6s ease-in-out infinite; }
@keyframes lokt2 {
  0%, 100% { background: var(--wit); transform: scale(1); box-shadow: 0 0 0 0 rgba(208, 255, 0, .6); }
  50% { background: var(--lime); transform: scale(1.12); box-shadow: 0 0 0 14px rgba(208, 255, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .dr-pijl.lokt { animation: none; } }
/* werkwijze: kaarten in 3D. De stapel kantelt (volgt de muis), de kaart krijgt dikte, en twee kaarten liggen erachter. */
.dr-beeld { perspective: 1400px; }
.dr-stapel { --rx: 8deg; --ry: -16deg; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.dr-stapel.volgt { transition: transform .12s linear; }
.dr-stapel::before, .dr-stapel::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-vlak); pointer-events: none; }
.dr-stapel::before { background: var(--blauw); transform: translateZ(-70px) rotate(4deg) translate(14px, 10px); }
.dr-stapel::after { background: var(--lime); transform: translateZ(-35px) rotate(1deg) translate(7px, 5px); }
.dr-kaart { box-shadow:
  1px 1px 0 #ececec, 2px 2px 0 #e4e4e4, 3px 3px 0 #dcdcdc, 4px 4px 0 #d4d4d4, 5px 5px 0 #cccccc, 6px 6px 0 #c4c4c4,
  0 50px 90px -30px rgba(0, 0, 0, .8); }
@media (prefers-reduced-motion: reduce) { .dr-stapel { transition: none; } }
/* 3D zoals Linktree: geen stapel erachter, maar de inhoud van de kaart komt in lagen naar voren */
.dr-stapel::before, .dr-stapel::after { content: none; }
.dr-kaart { overflow: visible; transform-style: preserve-3d; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.dr-kaart > * { transform-style: preserve-3d; }
.dr-stap { translate: 0 0 20px; }
.dr-plaat { translate: 0 0 70px; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .18)); }
.dr-status { translate: 0 0 50px; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .15)); }
.dr-kaart .term { translate: 0 0 35px; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .15)); }
.dr-stapel { --rx: 10deg; --ry: -18deg; }
/* minder schuin: in rust bijna recht, alleen een lichte kanteling */
.dr-stapel { --rx: 3deg; --ry: -5deg; }
/* alleen de icoontjes komen naar voren; stapnummer, stapwoord en regel liggen plat op de kaart */
.dr-stap, .dr-status, .dr-kaart .term { translate: none; filter: none; }
/* afspraken: mooiere kaarten met nummer en vlag, dunnere blauwe rand, zachte schaduw, licht optillen bij hover */
.af-item.af-lijn { position: relative; border: 1.5px solid var(--blauw); border-radius: var(--r-vlak); padding: clamp(24px, 2.8vw, 36px); box-shadow: 0 18px 40px -24px rgba(0, 70, 160, .35); transition: transform .25s ease, box-shadow .25s ease; }
.af-item.af-lijn:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -24px rgba(0, 70, 160, .45); }
.af-nr { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--f-sub); font-size: 15px; letter-spacing: .06em; color: var(--blauw); }
.af-nr .vlag { display: inline-block; width: 28px; height: 14px; background: var(--lime); }
.af-item.af-lijn h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; margin: 0 0 10px; }
.af-item.af-lijn p:not(.af-nr) { color: #3A3A3A; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .af-item.af-lijn { transition: none; } .af-item.af-lijn:hover { transform: none; } }
.af-item.af-lijn p.af-nr { color: var(--blauw); margin: 0 0 16px; font-size: 16px; }
/* zelftest: kop boven, daaronder links het pakket en rechts de vragen */
.zt-grid { display: block; }
.zt-grid > #zt-kop { margin-bottom: clamp(32px, 4vw, 56px); }
.zt-onder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px var(--tussen); align-items: stretch; }
@media (max-width: 900px) { .zt-onder { grid-template-columns: minmax(0, 1fr); } }
.zt-pakket { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-vlak); background: var(--zwart-2); border: 1px dashed rgba(255, 255, 255, .25); transition: background-color .4s ease, color .4s ease; }
.zt-pakket p { margin: 0; }
.zt-pk-label { color: var(--lime); }
.zt-pk-naam { color: var(--wit); }
.zt-pk-lead { font-weight: 700; color: var(--fg); }
.zt-pk-tekst { color: var(--fg-2); line-height: 1.6; }
.zt-pk-tekst:empty { display: none; }
.zt-pk-knop { margin-top: auto; }
.zt-pakket.gevuld { background: var(--wit); border: 0; }
.zt-pakket.gevuld .zt-pk-label { color: var(--blauw); }
.zt-pakket.gevuld .zt-pk-naam, .zt-pakket.gevuld .zt-pk-lead { color: var(--zwart); }
.zt-pakket.gevuld .zt-pk-tekst { color: #3A3A3A; }
.zt-pakket.gevuld .zt-pk-knop { background: var(--zwart); color: var(--wit); }
.zt-pk-knop[hidden] { display: none; }
/* gewone flip: eerst draait de oude kaart weg tot op zijn kant, daarna draait de nieuwe in (na elkaar, om het midden) */
.dr-kaart { transform-origin: 50% 50%; }
.dr-stapel.draait .dr-kaart.weg { animation: dr-flip-uit .2s cubic-bezier(.5, 0, 1, .6) both; }
.dr-stapel.draait .dr-kaart.nu { animation: dr-flip-in .26s cubic-bezier(0, .4, .4, 1) .2s both; }
@keyframes dr-flip-uit { from { transform: rotate(-3deg) rotateY(0deg); } to { transform: rotate(-3deg) rotateY(90deg); } }
@keyframes dr-flip-in { from { transform: rotate(-3deg) rotateY(-90deg); } to { transform: rotate(-3deg) rotateY(0deg); } }
/* pakketvak toont de dienstkaart (logo + kaart) zoals die eerder op de homepage stond */
.zt-pakket.gevuld { background: none; padding: 0; border: 0; }
.zt-pakket .zt-pk-leeg { display: flex; flex-direction: column; gap: 14px; }
.zt-pakket [hidden] { display: none !important; }
.zt-pk-dienst { width: 100%; }
.zt-pk-dienst .sub-wm { font-size: clamp(40px, 4.4vw, 64px); }
.zt-pk-dienst .dk-kaart { border: 0; }
.zt-pk-dienst .dk-kaart .kop, .zt-pk-dienst .dk-kaart li { color: var(--zwart); }
.zt-pk-dienst .dk-uitleg { color: var(--zwart); margin-bottom: 24px; }
.zt-pk-dienst .dk-lead { margin-bottom: 16px; }
/* 18-10-2026: woordmerk en kop weg; de dienstnaam is een lime kopvlak over de volle breedte bovenin de kaart */
.zt-pk-dienst .dk-kaart { padding-top: 0; }
.zt-pk-dienst .dk-naam { position: static; transform: none; width: auto; max-width: none;
  margin: 0 calc(-1 * clamp(22px, 2.4vw, 32px)) clamp(20px, 2vw, 24px); padding: 18px clamp(22px, 2.4vw, 32px) 14px;
  border-radius: var(--r-vlak) var(--r-vlak) 0 0;
  font-family: var(--f-kop); font-optical-sizing: none; font-variation-settings: var(--fvs-kop); letter-spacing: var(--ls-kop);
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1; }
/* zelftest-kop: op desktop twee regels, op smal drie */
.zt-smal { display: none; }
@media (max-width: 700px) { .zt-smal { display: inline; } }
#afspraken .af-item.af-lijn { border-width: 3px; }   /* dikkere blauwe rand */
/* afspraken: kaarten draaien om (klik) naar een blauwe achterkant met het voordeel */
.af-item.af-flip { padding: 0; border: 0; background: none; border-radius: var(--r-vlak); perspective: 1200px; cursor: pointer; transition: transform .25s ease; }
.af-item.af-flip:hover { transform: translateY(-4px); }
.af-item.af-flip:focus-visible { outline: 3px solid var(--blauw); outline-offset: 4px; }
.af-binnen { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.af-flip.om .af-binnen { transform: rotateY(180deg); }
.af-kant { grid-area: 1 / 1; display: flex; flex-direction: column; padding: clamp(24px, 2.8vw, 36px); border-radius: var(--r-vlak); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.af-voor { background: var(--wit); border: 3px solid var(--zwart); box-shadow: 0 18px 40px -24px rgba(0, 70, 160, .35); }
.af-achter { background: var(--blauw); border: 3px solid var(--blauw); transform: rotateY(180deg); box-shadow: 0 18px 40px -24px rgba(0, 70, 160, .5); }
.af-kant .af-nr { margin: 0 0 16px; }
.af-kant .kopje { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; margin: 0 0 10px; }
.af-kant p { margin: 0; line-height: 1.6; font-size: 16px; }
.af-voor .kopje { color: var(--zwart); }
.af-voor p:not(.af-nr) { color: #3A3A3A; }
.af-achter .kopje, .af-achter p { color: var(--wit); }
.af-hint { margin-top: auto; padding-top: 18px; font-family: var(--f-sub); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.af-voor .af-hint { color: var(--zwart); }
.af-achter .af-hint { color: var(--wit); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .af-binnen { transition: none; } .af-item.af-flip:hover { transform: none; } }