/* Pagina Eerste stap: routes in de kop, trap van drie, voorbeeld van een eerste blik */
.es-routes{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.es-route{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);border-radius:6px;padding:10px 14px;color:#fff;min-width:150px}
.es-route b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:20px;letter-spacing:.02em}
.es-route span{font-size:14px;opacity:.85}
.es-pijl{color:var(--light);font-size:22px;line-height:1}
.es-merk{background:#fff;color:var(--blue);border-color:#fff}
.es-merk span{opacity:1;color:var(--muted)}

.es-trap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.es-tree{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--blue);border-radius:6px;padding:28px 26px 26px}
.es-tree .es-nr{font-family:var(--display);font-size:56px;line-height:.9;color:var(--light)}
.es-tree h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:28px;line-height:1;color:var(--blue);margin:10px 0 6px}
.es-prijs{display:inline-block;align-self:flex-start;font-family:var(--display);text-transform:uppercase;font-size:15px;letter-spacing:.04em;padding:5px 10px;border-radius:4px;background:var(--paper);color:var(--ink);margin-bottom:14px}
.es-tree p{margin:0 0 12px;color:var(--ink);line-height:1.5}
.es-tree ul{margin:0 0 18px;padding-left:18px;color:var(--ink);line-height:1.5}
.es-tree li{margin-bottom:6px}
.es-tree .es-knop{margin-top:auto}
.es-tree.es-uit{background:var(--blue);border-color:var(--blue)}
.es-tree.es-uit .es-nr{color:var(--sky)}
.es-tree.es-uit h2,.es-tree.es-uit p,.es-tree.es-uit ul{color:#fff}
.es-tree.es-uit .es-prijs{background:#fff;color:var(--blue)}
.es-tree:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:42px;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2}
.es-knop{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-family:var(--display);text-transform:uppercase;font-size:16px;letter-spacing:.02em;padding:11px 16px;border-radius:4px;background:#25D366;color:#0b1f14;text-decoration:none}
.es-knop.wit{background:#fff;color:var(--blue)}
.es-knop:hover{transform:translateY(-1px)}

.es-voorbeeld{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;padding:36px;align-items:start}
.es-label{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:15px;color:var(--blue);margin-bottom:14px}
.es-blad{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 14px 34px rgba(23,32,40,.12);padding:26px 26px 22px;position:relative}
.es-blad .es-stempel{position:absolute;top:14px;right:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line);padding:3px 8px;border-radius:3px}
.es-blad h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;line-height:1.05;color:var(--ink);margin:0 90px 4px 0}
.es-blad .es-datum{font-size:13px;color:var(--muted);margin:0 0 16px}
.es-bev{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.es-bev b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:15px;letter-spacing:.03em;color:var(--blue)}
.es-bev p{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.es-bev .es-getal{display:block;font-family:var(--display);font-size:24px;line-height:1.1;color:var(--ink);margin-bottom:2px}
.es-open{border-top:1px solid var(--line);padding-top:12px;font-size:14px;color:var(--muted);line-height:1.45}
.es-open b{color:var(--ink)}
.es-scan h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:34px;line-height:1;color:var(--blue);margin:0 0 10px}
.es-scan > p{color:var(--ink);line-height:1.55;margin:0 0 18px}
.es-check{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.es-check li{display:grid;grid-template-columns:22px 1fr;gap:10px;line-height:1.45;color:var(--ink)}
.es-check li::before{content:"✓";display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--paper);color:var(--blue);font-size:13px;font-weight:700}
.es-check li b{font-weight:600}

@media (max-width:900px){
  .es-trap{grid-template-columns:1fr}
  .es-tree:not(:last-child)::after{content:"↓";right:auto;left:26px;top:auto;bottom:-17px}
  .es-voorbeeld{grid-template-columns:1fr;padding:22px;gap:28px}
  .es-pijl{display:none}
  .es-route{min-width:0;flex:1 1 40%}
}
@media (max-width:480px){
  .es-blad{padding:20px 16px}
  .es-bev{grid-template-columns:1fr;gap:4px}
  .es-blad h3{margin-right:0;margin-top:22px}
}

/* specifieker dan de algemene kop- en tekstregels van de site */
.cs .es-trap .es-tree h2{font-size:30px!important;line-height:1!important;margin:10px 0 8px!important;word-break:normal;hyphens:none}
.cs .es-trap .es-tree p,.cs .es-trap .es-tree li{font-size:16px}
.cs .es-trap .es-tree.es-uit p,.cs .es-trap .es-tree.es-uit li{color:#fff!important}
.cs .es-trap .es-tree.es-uit .es-prijs{color:var(--blue)!important}
.cs .es-blad .es-stempel{position:static;display:inline-block;margin-bottom:12px}
.cs .es-blad h3{margin:0 0 4px!important}
@media (max-width:900px){.cs .es-trap .es-tree h2{font-size:28px!important}}

/* Wanneer dit helpt: de momenten vóór een besluit */
.es-momenten{padding:32px 36px}
.cs .es-momenten h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:34px!important;line-height:1!important;color:var(--blue);margin:0 0 8px!important}
.es-momenten > p{color:var(--ink);margin:0 0 16px}
.es-moment-lijst{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media (max-width:900px){.es-momenten{padding:22px}.es-moment-lijst{grid-template-columns:1fr}}

/* Volledige scan: diepte en wat ik bekijk */
.es-diepte h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1;color:var(--blue);margin:0 0 12px}
.es-diepte>p{max-width:760px;margin:0 0 22px;line-height:1.55}
.es-tellers{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--blue)}
.es-tellers li{padding:14px 18px 6px 0;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-klein,15px);line-height:1.4;color:var(--kleur-steun,#57616b)}
.es-tellers b{font-family:var(--display);font-weight:400;font-size:clamp(38px,4vw,56px);line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.es-kijk{display:grid;grid-template-columns:3fr 2fr;gap:44px}
.es-kijk h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:var(--fs-label,16px);color:var(--blue);margin:0 0 14px;letter-spacing:.04em}
.es-kijk p{line-height:1.55;margin:0}
@media(max-width:760px){.es-tellers{grid-template-columns:repeat(2,minmax(0,1fr))}.es-kijk{grid-template-columns:1fr;gap:28px}}
.es-sub{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:var(--fs-label,16px);letter-spacing:.04em;color:var(--blue);margin:0 0 14px}
.es-inzichten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 20px}
.es-inzichten>div{border:1px solid var(--blue);border-radius:6px;padding:18px 20px}
.es-inzichten b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--blue);margin-bottom:8px}
.es-diepte .es-inzichten .es-kop{font-family:var(--display);text-transform:uppercase;font-size:24px;line-height:1.05;color:var(--ink,#172028)!important;margin:0 0 10px}
.es-diepte .es-inzichten p{margin:0;line-height:1.5}
.es-diepte .es-b2b{max-width:none;margin:0 0 34px}
@media(max-width:760px){.es-inzichten{grid-template-columns:1fr}}
