/* Footer: onderwerpen als rustige uitklapmenu's (links blijven in de HTML voor zoekmachines). */
.hzf-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;border-top:1px solid rgba(242,244,250,.1);border-bottom:1px solid rgba(242,244,250,.1)}
.hzf-topic{border:0;margin:0}
.hzf-topic summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgb(169,175,194);transition:color .25s}
.hzf-topic summary::-webkit-details-marker{display:none}
.hzf-topic summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.2,1);flex:none}
.hzf-topic[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.hzf-topic summary:hover,.hzf-topic[open] summary{color:#F2F4FA}
.hzf-topic summary:focus-visible{outline:2px solid var(--hz-accent-l,#8FA3FF);outline-offset:4px}
.hzf-topic ul{list-style:none;margin:0;padding:0 0 20px;display:flex;flex-direction:column;gap:10px}
.hzf-topic a{font-family:"Archivo",sans-serif;font-size:15px;color:rgb(169,175,194);text-decoration:none;transition:color .2s}
.hzf-topic a:hover{color:var(--hz-accent-l,#8FA3FF)}
@media (max-width:900px){.hzf-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hzf-topics{grid-template-columns:1fr;gap:0}.hzf-topic+.hzf-topic summary{border-top:1px solid rgba(242,244,250,.08)}}

/* SEO-pagina's: H1 past op elk scherm, ook met lange woorden (woordafbreking staat bewust uit). */
@media (max-width:600px){.hzt-h1.hzt-h1 .elementor-heading-title{font-size:clamp(26px,7.4vw,40px)}}
@media (min-width:601px) and (max-width:900px){.hzt-h1.hzt-h1 .elementor-heading-title{font-size:clamp(34px,5.6vw,48px)}}
@media (min-width:901px){.hzt-h1.hzt-h1 .elementor-heading-title{font-size:clamp(40px,4.4vw,72px)}}

/* Stappen: 3 of 5 stappen vullen de rij, geen losse kaart op een nieuwe regel. */
@media (min-width:1101px){
 .hzp-steps:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
 .hzp-steps:has(>li:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
 .hzp-steps:has(>li:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:601px) and (max-width:1100px){.hzp-steps>li:last-child:nth-child(odd){grid-column:1/-1}}

/* Tijdlijn op desktop: kolommen volgen het aantal stappen (max 6 per rij). */
@media (min-width:1101px){
 .hzp-tl:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
 .hzp-tl:has(>li:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
 .hzp-tl:has(>li:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr));row-gap:40px}
 .hzp-tl:has(>li:nth-child(7))>li:nth-child(4n)::before,.hzp-tl:has(>li:nth-child(7))>li:nth-child(4n)::after{display:none}
}

/* Vergelijkingstabellen: tekstcellen links uitlijnen; drie kolommen scrollen op mobiel in plaats van te knellen. */
.hzp-compare td:not(:has(.hzp-yes,.hzp-no)){text-align:left;line-height:1.45}
.hzp-compare thead th:not(:first-child){text-align:left}
.hzp-compare thead th:not(:first-child):has(~th),.hzp-compare thead th:last-child{text-align:left}
@media (max-width:600px){
 .hzp-compare table:has(thead th:nth-child(3)){min-width:560px}
 .hzp-compare{-webkit-overflow-scrolling:touch}
 .hzp-compare tbody th{min-width:120px}
}
.hzt-block .hzt-note{box-sizing:border-box;max-width:880px;margin:0 0 20px;padding:0 clamp(20px,4vw,56px);font-size:17px;line-height:1.6;color:#D3D8E6}