/* echt.css (AI-review 7 okt 2026: Vale ai-tells, Impeccable detect en Hallmark audit over castle, camping,
   event en expo). Laadt na v3.css, op alle markten. Elk blok noemt het patroon dat het weghaalt.
   Zie ook rust.css (25 sep) en sites-niet-ai in het geheugen. */

/* Lichtvlek die de muis volgt (newhome.js schreef hem nog steeds aan): het bekendste AI-sjabloondecor. */
.hbstory .cursorglow{display:none !important}

/* Render in een gekleurd vak met ronde hoeken (regel 30 sep): de telefoon in het dagverhaal staat los op de pagina. */
.hbstory .jstick::after,.hbstory .jstick.phoneup::after{display:none !important}

/* Verloopbalk bovenaan die meeloopt met scrollen: sjabloon, en een tweede balk naast de pijlerbalk. */
.hbstory .scrollprog{display:none !important}

/* Reuzenwoordmerk als spookletter onder de footer. */
.hbstory .voetmerk{display:none !important}

/* Merkkleur alleen op knoppen, links en het slotvlak (regel 25 sep). Labels en vragen in inkt. */
.hbstory .bewijs3 .b3kop,
.hbstory .hlabel .hnr,
.hbstory .hnaamblok b,
.hbstory .physical .jstep .je,
.hbstory .physical .jstep .je *,
.hbstory .physical span.je,
.hbstory .jstep .je,
.hbstory details > summary{color:var(--inkt,#1a1a1a) !important}
.hbstory .hlabel .hnr{border-color:currentColor !important}

/* De klantlogo's lopen weer als slider (14 okt, Nout: "alleen logo's gebruiken voor de klanten en in een slider
   zetten"); dat gaat voor de stille rij van 7 okt. Bij minder beweging staan ze stil (v3.css). */

/* Koppen: Poppins op -0,042em drukte de letters op elkaar. */
.hbstory h1{letter-spacing:-.02em}

/* Blarney op mobiel: .kcgrid.zonder won van de mobiele regel en hield twee kolommen (kop een woord per regel). */
@media (max-width: 820px){
  .hbstory .klantcase .kcgrid.zonder{grid-template-columns:1fr !important}
}

/* 7 okt 2026, unfold minder AI, alle markten (Tessa: "ja beter zo", na de proef op castle).
   Lessen van de dummy's op maat van 29-30 sep: geen render op een gekleurd vlak met ronde hoeken,
   geen dimlaag, geen spooktekst van de vorige en volgende stap, niets dat omhoog zweeft. */
@media (min-width:821px){
  .hbstory .jstick::after{display:none !important}
  .hbstory .jstep{opacity:0 !important;transform:none !important;transition:opacity .35s ease !important}
  .hbstory .jstep.on{opacity:1 !important}
  .hbstory .pgstage.jhl .bqface::after,.hbstory .pgstage.jhl .mback::after{opacity:0 !important}
  .hbstory .pgstage.jhl .bqcell.jact>.bqface{box-shadow:0 0 0 2px var(--merkdiep,var(--gold)) !important}
}
/* De tijd boven elke stap van het dagverhaal (pages.home.dagverhaal.stappen[].tijd): in inkt, gewone cijfers,
   zonder het "1 · " van het pijlerlabel (v3.css). */
.hbstory .physical.dagv .jstep .je.tijd{color:var(--inkt) !important;font-variant-numeric:tabular-nums;font-size:1rem !important;font-weight:600 !important;letter-spacing:0 !important;text-transform:none !important}
.hbstory .physical.dagv .jstep .je.tijd::before{content:none !important}

/* 7 okt 2026, de hero (Tessa): "foto helemaal uitvullen, geen ronde hoeken, alleen heel subtiel; hero 20% minder hoog;
   handen iets meer naar het midden; tekst iets naar boven; geen pills". Voor alle markten. */
.hbstory .h3{padding:0 !important}
.hbstory .h3kader{border-radius:0 !important;min-height:clamp(448px,calc((100svh - 76px) * .8),720px) !important;align-items:center !important}
.hbstory .h3tekst{padding-top:clamp(28px,3vw,48px) !important;padding-bottom:clamp(56px,7vw,112px) !important;padding-left:var(--links) !important}
/* handen naar het midden door ze groter te maken, niet door ze te verschuiven: de armen moeten uit de rand lopen */
.hbstory .h3hand{right:0 !important;bottom:-10% !important;height:107% !important;max-width:56% !important}
/* geen pillen: het bewijsregeltje is gewoon tekst, knoppen en de taalkeuze hebben een heel kleine ronding */
.hbstory .h3 .h3bewijs.groot{background:none !important;padding:0 !important;border-radius:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  font-weight:600 !important;color:#fff !important;white-space:normal !important}
.hbstory .btn,.hbstory .h3knoppen .btn,.langbtn,.lang{border-radius:4px !important}
.langmenu{border-radius:6px !important}.langmenu button{border-radius:3px !important}
@media (max-width:820px){
  .hbstory .h3kader{min-height:0 !important;align-items:stretch !important}
  .hbstory .h3hand{bottom:0 !important;height:98% !important;max-width:78% !important}
  .hbstory .h3beeld{border-radius:0 !important;height:clamp(180px,46vw,260px) !important}
  .hbstory .h3tekst{padding:18px 18px 22px !important}
  .hbstory .h3 .h3bewijs.groot{border:0 !important;color:var(--grijs) !important;font-weight:500 !important}
  .hbstory .h3voor2{padding:14px 18px 0 !important}
}