/* Licht (25 sep 2026). Tessa: "te donker, te AI". 63% van een pagina was bijna
   zwart met één felle merkkleur en gloed: precies de herkenbare AI-look. Nu een
   lichte ondergrond met een vleugje merkkleur, donkere tekst, de merkkleur als
   accent, en geen gloed, lichtstraal of glanzende kop meer. De voet blijft donker. */
.hbstory{--papier:hsl(calc(var(--hb-h,42.93) + 2) 38% 97%);--wit:#fff;--inkt:hsl(calc(var(--hb-h,42.93) - 6) 26% 12%);--grijs:hsl(calc(var(--hb-h,42.93) - 4) 12% 38%);--rand:hsl(calc(var(--hb-h,42.93) - 4) 22% 87%)}

/* menubalk: licht vanaf de eerste pixel */
.hbstory .topnav,.hbstory .topnav:not(.scrolled){background:hsl(calc(var(--hb-h,42.93) + 2) 38% 97% / .92) !important}
.hbstory .topnav:not(.scrolled) .navlinks a{color:var(--inkt) !important}
.hbstory .topnav:not(.scrolled) .navlinks a:hover,.hbstory .topnav:not(.scrolled) .navlinks a.active{color:var(--gold) !important}
.hbstory .topnav:not(.scrolled) .navlinks a::after{background:var(--gold) !important}
.hbstory .topnav:not(.scrolled) .navlogo{color:var(--inkt) !important}
.hbstory .topnav:not(.scrolled) .navlogo svg path,.hbstory .topnav:not(.scrolled) .navlogo svg polygon,.hbstory .topnav:not(.scrolled) .navlogo svg rect{fill:currentColor !important}
.hbstory .topnav:not(.scrolled) .navlogo svg .markt,.hbstory .topnav:not(.scrolled) .navlogo svg .markt *{fill:var(--gold) !important}
.hbstory .topnav:not(.scrolled) .langbtn{color:var(--inkt) !important;border-color:var(--rand) !important}
.hbstory .topnav:not(.scrolled) .navburger span,.hbstory .topnav:not(.scrolled) .navburger span::before,.hbstory .topnav:not(.scrolled) .navburger span::after{background:var(--inkt) !important}

/* hero */
.hbstory .hero{background:var(--papier) !important;color:var(--inkt)}
.hbstory .hero h1{color:var(--inkt) !important}
.hbstory .hero h1 span,.hbstory .hero .gold-shine{background:none !important;-webkit-text-fill-color:var(--gold) !important;color:var(--gold) !important;animation:none !important}
.hbstory .hero .sub{color:var(--inkt) !important;font-weight:500}
.hbstory .hero .kicker,.hbstory .hero .kicker .wie{color:var(--grijs) !important}
.hbstory .hero .kicker .rit{color:var(--gold) !important;background:color-mix(in srgb,var(--gold) 9%,transparent) !important;border-color:color-mix(in srgb,var(--gold) 28%,transparent) !important}
.hbstory .hero .heroproof{color:var(--grijs) !important;opacity:1}
.hbstory .hero .btn{background:var(--gold) !important;color:#fff !important;border:0 !important}
.hbstory .hero .btn.o{background:transparent !important;color:var(--inkt) !important;border:1px solid color-mix(in srgb,var(--inkt) 30%,transparent) !important}
.hbstory .hero .plek{box-shadow:0 30px 60px -34px rgba(20,24,30,.45),0 0 0 1px rgba(0,0,0,.04) !important}

/* uitvouwverhaal */
.hbstory .physical{background:var(--wit) !important;color:var(--inkt)}
.hbstory .physical h2,.hbstory .physical h3,.hbstory .physical .ritual,.hbstory .physical .physhead h2{color:var(--inkt) !important}
.hbstory .physical h2 span,.hbstory .physical .ritual span,.hbstory .physical .gold-shine{background:none !important;-webkit-text-fill-color:var(--gold) !important;color:var(--gold) !important;animation:none !important}
.hbstory .physical p,.hbstory .physical .jstep p{color:var(--grijs) !important}
.hbstory .physical .jstep .je,.hbstory .physical span.je{color:var(--gold) !important}
.hbstory .physical .act span,.hbstory .physical .eyebrow{color:var(--gold) !important}
.hbstory .physical .jstep h3{color:var(--inkt) !important}
.hbstory .physical .pr b{color:var(--inkt) !important}
.hbstory .physical .pr i{background:var(--rand) !important}
.hbstory .physical .jann .jt{fill:var(--inkt) !important}
.hbstory .physical .jann .jl{stroke:var(--gold) !important}
.hbstory .physical .jann .jh{fill:var(--gold) !important}
.hbstory .physical .beam,.hbstory .physical .glow{display:none !important}
.hbstory .physical .sustain{background:var(--papier) !important;color:var(--inkt) !important;border:1px solid var(--rand)}
.hbstory .physical .sustain b,.hbstory .physical .sustain h3,.hbstory .physical .sustain h4{color:var(--inkt) !important}
.hbstory .physical .sustain p{color:var(--grijs) !important}
.hbstory .physical .stbig{color:var(--gold) !important}
.hbstory .physical .lf b{color:var(--inkt) !important}
.hbstory .physical .lfi{color:var(--gold) !important}
.hbstory .physical .tourcap span{background:var(--inkt) !important;color:#fff !important}

/* de afsluiter: één massief vlak in de merkkleur, geen zwart verloop */
.hbstory .cta-final{background:var(--gold) !important;color:#fff}
.hbstory .cta-final h2{color:#fff !important}
.hbstory .cta-final h2 span,.hbstory .cta-final .gold-shine{background:none !important;-webkit-text-fill-color:#fff !important;color:#fff !important;animation:none !important;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.45)}
.hbstory .cta-final p,.hbstory .cta-final span{color:rgba(255,255,255,.88) !important}
.hbstory .cta-final .btn.g{background:#fff !important;color:var(--gold) !important}
.hbstory .cta-final .btn.gh{border-color:rgba(255,255,255,.6) !important;color:#fff !important}

/* het uitvouwverhaal van vijftien naar zes stappen (audit: "twaalf schermen is te
   veel"): dicht, open, kaartzijde, achterkant, scannen, de live gids */
/* Tessa 25 sep: de uitleg van de app hoort er wel in, dus de vijf app-stappen
   blijven; alleen de tussenstappen over legenda, bonnen en pijlers gaan weg. */
.hbstory .jstep[data-step="3"],.hbstory .jstep[data-step="4"],.hbstory .jstep[data-step="5"],
.hbstory .jstep[data-step="7"],.hbstory .jstep[data-step="8"]{display:none !important}
.hbstory .hero .vis .phone{filter:drop-shadow(0 22px 28px rgba(20,24,30,.22)) !important}

/* ---- nieuwe blokken (25 sep) ---- */
.hbstory .herofor{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;color:var(--grijs)}
.hbstory .herofor span{color:var(--grijs)}
.hbstory .herofor a{color:var(--inkt);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.hbstory .herofor a:hover{color:var(--gold)}

.hbstory .bewijsband{background:var(--wit);border-bottom:1px solid var(--rand);padding-block:22px}
.hbstory .bewijsband p{margin:0 0 12px;font-size:.92rem;color:var(--grijs)}
.hbstory .bewijsband .bblogos{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center}
.hbstory .bewijsband img{height:34px;width:auto;filter:grayscale(1);opacity:.75}

.hbstory .zondermet{background:var(--wit);padding-block:clamp(56px,7vw,96px);border-bottom:1px solid var(--rand)}
.hbstory .zondermet h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem);line-height:1.1;letter-spacing:-.025em;color:var(--inkt);margin:0 0 28px;max-width:20ch}
.hbstory .zmtabel{border-top:2px solid var(--inkt)}
.hbstory .zmkop,.hbstory .zmrij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(16px,4vw,56px);padding:16px 0;border-bottom:1px solid var(--rand)}
.hbstory .zmkop span{font-size:.85rem;font-weight:600;color:var(--grijs)}
.hbstory .zmkop span:last-child{color:var(--gold)}
.hbstory .zmrij s{color:var(--grijs);text-decoration-color:color-mix(in srgb,var(--grijs) 55%,transparent);text-decoration-thickness:1px;font-size:1.02rem;line-height:1.5}
.hbstory .zmrij b{color:var(--inkt);font-weight:600;font-size:1.06rem;line-height:1.45}

.hbstory .dagmet{background:var(--papier);padding-block:clamp(56px,7vw,96px)}
.hbstory .dagmet h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem);line-height:1.1;letter-spacing:-.025em;color:var(--inkt);margin:0 0 28px}
.hbstory .dagrij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);counter-reset:dag}
.hbstory .dagmoment{counter-increment:dag}
.hbstory .dagbeeld{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--wit);border:1px solid var(--rand);display:grid;place-items:center}
.hbstory .dagbeeld img{width:100%;height:100%;object-fit:contain;padding:10px}
.hbstory .dagmoment.foto .dagbeeld img{object-fit:cover;padding:0}
.hbstory .dagmoment.scherm .dagbeeld img{object-fit:cover;object-position:top;padding:0}
.hbstory .dagmoment h3{margin:14px 0 6px;font-size:1.05rem;line-height:1.3;color:var(--inkt)}
.hbstory .dagmoment h3::before{content:counter(dag) ". ";color:var(--gold)}
.hbstory .dagmoment p{margin:0;font-size:.95rem;line-height:1.55;color:var(--grijs)}
@media (max-width:980px){.hbstory .dagrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hbstory .dagrij{grid-template-columns:1fr}.hbstory .zmkop,.hbstory .zmrij{grid-template-columns:1fr;gap:6px}.hbstory .zmkop span:first-child{display:none}}

.hbstory .ctastappen{list-style:none;margin:18px auto 22px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;counter-reset:st;color:#fff}
.hbstory .ctastappen li{counter-increment:st;display:flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem}
.hbstory .ctastappen li::before{content:counter(st);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);font-size:.8rem}

/* resultaten als staven (idee 5): het getal blijft, de staaf maakt het vergelijkbaar */
.hbstory .stat[style*="--w"]{position:relative;padding-bottom:22px}
.hbstory .stat[style*="--w"]::before{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:4px;background:color-mix(in srgb,var(--gold) 14%,transparent)}
.hbstory .stat[style*="--w"]::after{content:'';position:absolute;left:0;bottom:0;height:8px;width:var(--w);border-radius:4px;background:var(--gold)}
.hbstory .cta-final .ctabadges{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.hbstory .cta-final .ctabadges span{background:none !important;border:0 !important;padding:0 !important;font-size:.88rem;color:rgba(255,255,255,.85) !important}
.hbstory .cta-final .ctabadges span::before{content:none !important}
.hbstory .cta-final .ctabadges span + span::before{content:"·" !important;margin-right:18px;color:rgba(255,255,255,.5)}
/* contrast: witte tekst op de merkkleur haalde bij goud (hotel, marina) geen AA;
   een diepere tint van dezelfde kleur wel, en de andere markten blijven herkenbaar */
.hbstory{--merkdiep:color-mix(in srgb,var(--gold) 76%,#000)}
.hbstory .hero .btn{background:var(--merkdiep) !important}
.hbstory .cta-final{background:var(--merkdiep) !important}
.hbstory .cta-final .btn.g{color:var(--merkdiep) !important}
.hbstory .topnav .navcta{background:var(--merkdiep) !important;color:#fff !important}
/* lange koppen (marina: zes regels) duwden de knoppen onder de vouw */
@media (min-width:901px){
  .hbstory .hero .wrap{grid-template-columns:1.1fr .9fr}
  .hbstory .hero h1{font-size:clamp(2.1rem,1.2rem + 2.1vw,3.25rem) !important}
}
/* cookiekaart rechtsonder, boven de chatknop: over het beeld, nooit over de knoppen */
@media (min-width:601px){.hbstory .cookiebar{left:auto !important;right:16px !important;bottom:92px !important}}

/* resultaten en case (hotel, museum): ook licht, het bewijs hoort niet in het donker */
.hbstory .results,.hbstory .casestudy{background:var(--papier) !important;color:var(--inkt) !important}
.hbstory .results h2,.hbstory .results h3,.hbstory .casestudy h2,.hbstory .casestudy h3,.hbstory .results .v,.hbstory .casestudy b{color:var(--inkt) !important}
.hbstory .results h2 span,.hbstory .casestudy h2 span,.hbstory .results .gold-shine,.hbstory .casestudy .gold-shine{background:none !important;-webkit-text-fill-color:var(--gold) !important;color:var(--gold) !important;animation:none !important}
.hbstory .results p,.hbstory .results .l,.hbstory .casestudy p,.hbstory .casestudy span{color:var(--grijs) !important}
.hbstory .results .stat{border-color:var(--rand) !important;background:transparent !important}
.hbstory .results .tcard{background:var(--wit) !important;border:1px solid var(--rand) !important;box-shadow:none !important;color:var(--inkt) !important}
.hbstory .results .tcard p{background:none !important;color:var(--inkt) !important}
.hbstory .results .tcard .who b,.hbstory .results .tcard .who strong{color:var(--inkt) !important}
.hbstory .results .tcard .who span,.hbstory .results .tcard .who small{color:var(--grijs) !important}
.hbstory .results .tcard .stars{color:var(--gold) !important}
.hbstory .results .tcard .tlogo{filter:none}
.hbstory .casestudy [class*="num"] b,.hbstory .casestudy .cnum,.hbstory .casestudy strong{color:var(--gold) !important}
.hbstory .results .tcard blockquote{color:var(--inkt) !important;opacity:1 !important}
.hbstory .results .tcard .who{color:var(--grijs) !important}
.hbstory .results .tcard .tlogo img{filter:brightness(0) !important;opacity:.78}
.hbstory .results .tcard .tlogo .wm{color:var(--inkt) !important}
@media (max-width:600px){.hbstory .cta-final .ctabadges span + span::before{content:none !important}.hbstory .cta-final .ctabadges{gap:4px 16px}}