/* Kapsalon Mus'ab — kleuren uit hun logo, poster en stylesheet */
:root{
  --rood:#ED1F25;
  --rood-diep:#B8151A;
  --rood-knop:#D81B21;   /* knopvlak, wit erop = 5.12:1 */
  --zwart:#0d0d0d;
  --zwart-2:#161616;
  --inkt:#2b2b2b;
  --grijs:#6f6f6f;
  --papier:#f6f5f3;
  --wit:#ffffff;
  --blauw:#1b3a8f;
  --rand:#e4e2df;
  --breed:1240px;
  --kop:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --tekst:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--tekst);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(100% - 2.4rem,var(--breed));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--kop);font-weight:700;line-height:.98;letter-spacing:.005em;
  text-transform:uppercase;margin:0 0 .7rem}
h1{font-size:clamp(2rem,8.8vw,5.6rem)}
h2{font-size:clamp(1.7rem,5.6vw,3.4rem)}
h3{font-size:clamp(1.15rem,2.5vw,1.5rem)}
p{margin:0 0 1rem}

.tag{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--kop);
  font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rood);
  font-weight:700;margin-bottom:.7rem}
.tag::before{content:"";width:34px;height:3px;background:var(--rood)}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--kop);font-size:1.08rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;padding:.95rem 1.9rem;
  border-radius:2px;border:2px solid transparent;min-height:50px;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.knop--rood{background:var(--rood-knop);color:#fff}
.knop--rood:hover{background:var(--rood-diep);transform:translateY(-2px)}
.knop--rand{border-color:currentColor;color:var(--zwart);background:transparent}
.knop--rand:hover{background:var(--zwart);color:#fff;border-color:var(--zwart)}
.knop--licht{border-color:rgba(255,255,255,.55);color:#fff}
.knop--licht:hover{background:#fff;color:var(--zwart);border-color:#fff}
.knop:focus-visible{outline:3px solid var(--rood);outline-offset:3px}

/* ---------- kop: licht, want hun logo is rood met zwart ---------- */
.kop{position:sticky;top:0;z-index:60;background:var(--wit);
  border-bottom:1px solid var(--rand);box-shadow:0 1px 12px rgba(0,0,0,.05)}
.kop__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 0;min-height:66px}
.kop__logo img{height:46px;width:auto}
@media(min-width:940px){.kop__logo img{height:56px}}
.nav{display:none}
@media(min-width:980px){
  .nav{display:flex;align-items:center;gap:2.1rem}
  .nav a{font-family:var(--kop);font-size:1.1rem;font-weight:600;letter-spacing:.09em;
    text-transform:uppercase;color:var(--zwart);text-decoration:none;padding:.3rem 0;
    border-bottom:3px solid transparent}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--rood)}
  .kop__bel{background:var(--rood);color:#fff !important;padding:.65rem 1.3rem !important;
    border-bottom:0 !important;border-radius:2px}
  .kop__bel:hover{background:var(--rood-diep)}
}
.ham{display:grid;place-items:center;width:48px;height:48px;background:none;
  border:1px solid var(--rand);border-radius:2px;cursor:pointer;padding:0}
.ham span{display:block;width:22px;height:2px;background:var(--zwart);position:relative}
.ham span::before,.ham span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--zwart)}
.ham span::before{top:-7px}.ham span::after{top:7px}
@media(min-width:980px){.ham{display:none}}
.mob{display:none;background:var(--zwart);border-top:3px solid var(--rood)}
.mob[data-open="true"]{display:block}
.mob a{display:block;padding:1rem 1.2rem;color:#fff;text-decoration:none;font-family:var(--kop);
  font-size:1.2rem;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.09)}
@media(min-width:980px){.mob{display:none !important}}

/* ---------- barberpaal ----------
   Hangt aan een muurbeugel, zoals bij een echte kapper naast de deur.
   Smallere strepen, koepelvormige doppen en een glasreflectie, want brede
   platte banen zien er als plastic uit. */
.paal{position:relative;width:var(--paalbreed,54px);flex:0 0 var(--paalbreed,54px);
  filter:drop-shadow(-10px 14px 16px rgba(0,0,0,.5))}
/* muurbeugel: staander tegen de muur plus een arm naar de paal */
.paal__arm{position:absolute;top:22%;right:100%;width:26px;height:8px;z-index:1;
  background:linear-gradient(180deg,#b9b9b9,#6d6d6d 46%,#333);border-radius:2px 0 0 2px}
.paal__arm::before{content:"";position:absolute;right:100%;top:-15px;width:9px;height:38px;
  background:linear-gradient(180deg,#a5a5a5,#5c5c5c 50%,#2c2c2c);border-radius:2px}
.paal__dop{position:relative;z-index:2;height:15px;
  background:radial-gradient(120% 150% at 30% 20%,#ffffff 0%,#e2e2e2 22%,#a8a8a8 48%,
    #5f5f5f 74%,#2e2e2e 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.6)}
.paal__dop--boven{border-radius:50% 50% 3px 3px / 78% 78% 3px 3px}
.paal__dop--onder{border-radius:3px 3px 50% 50% / 3px 3px 78% 78%}
.paal__buis{position:relative;height:var(--paalhoogte,240px);overflow:hidden;
  border-radius:26px/7px;background:#f2f2f2}
.paal__strepen{position:absolute;left:-55%;right:-55%;top:-80%;bottom:-80%;
  background:repeating-linear-gradient(-63deg,
    #d81b21 0 11px,#f7f7f7 11px 22px,#16357f 22px 33px,#f7f7f7 33px 44px);
  animation:paaldraai 2.9s linear infinite;will-change:transform}
@keyframes paaldraai{from{transform:translateY(0)}to{transform:translateY(44px)}}
/* cilindervorm: donker aan beide randen, glans links, randlicht rechts */
.paal__rond{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,
  rgba(0,0,0,.75) 0%,rgba(0,0,0,.42) 7%,rgba(0,0,0,.06) 22%,
  rgba(255,255,255,.30) 32%,rgba(255,255,255,.04) 44%,
  rgba(0,0,0,.14) 60%,rgba(0,0,0,.52) 84%,
  rgba(255,255,255,.34) 95%,rgba(0,0,0,.45) 100%)}
/* smalle, scherpe glasreflectie */
.paal__glans{position:absolute;top:3%;bottom:3%;left:21%;width:5px;pointer-events:none;
  border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.35) 55%,rgba(255,255,255,.8));
  filter:blur(.6px)}
/* tweede, zachtere reflectie rechts van het midden */
.paal__vonk{position:absolute;top:8%;bottom:8%;left:56%;width:9px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));
  filter:blur(2px)}
@media(prefers-reduced-motion:reduce){.paal__strepen{animation:none}}


/* ---------- hero ---------- */
.hero{position:relative;background:var(--zwart);color:#fff;overflow:hidden}
.hero__in{position:relative;display:grid;gap:0;align-items:stretch;min-width:0}

@media(min-width:960px){.hero__in{grid-template-columns:1fr 1fr}}
@media(min-width:1500px){.hero__in{grid-template-columns:1fr 1.12fr}}
.hero__tekst{padding:2.4rem 0 2.8rem;padding-left:1.2rem;position:relative;z-index:3;min-width:0}
@media(min-width:960px){.hero__tekst{padding:4.4rem 3rem 4.6rem 0}}
.hero h1{color:#fff;margin-bottom:1.1rem}
.hero h1 em{font-style:normal;color:var(--rood);display:block}
.hero__claim{font-size:clamp(1.02rem,2.1vw,1.24rem);color:#cfcfcf;max-width:44ch;margin-bottom:1.8rem}
.hero__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2rem}
.jubileum{display:inline-flex;align-items:center;gap:.6rem;background:var(--rood);color:#fff;
  font-family:var(--kop);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:.95rem;padding:.42rem 1.05rem;border-radius:2px;margin-bottom:1.2rem}
/* steden onder de hero-tekst, meteen klikbaar */
.hero__steden{display:flex;flex-wrap:wrap;gap:.45rem}
.hero__steden a{font-family:var(--kop);font-size:.95rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#dcdcdc;text-decoration:none;padding:.4rem .85rem;
  border:1px solid rgba(255,255,255,.24);border-radius:2px;transition:all .16s ease}
.hero__steden a:hover{background:var(--rood);border-color:var(--rood);color:#fff}
/* foto rechts, doorlopend tot de schermrand */
/* Let op: aspect-ratio samen met min-height levert een minimumBREEDTE op
   (300px hoog x 41/30 = 410px breed). Dat rekte de hele rasterkolom op. */
/* aspect-ratio ALLEEN op smalle schermen. In de tweekolomsopmaak wordt dit
   element uitgerekt tot de rijhoogte, en dan leidt aspect-ratio de BREEDTE
   af uit die hoogte (791 x 41/30 = 1081px). Daardoor stak de foto 491px
   buiten het scherm en viel hun logo op de muur eraf. */
.hero__beeld{position:relative;min-width:0}
@media(max-width:959px){.hero__beeld{aspect-ratio:41/30}}
@media(min-width:960px){
  /* De foto loopt door tot de schermrand, maar niet ervoorbij. De marge is
     exact de zijmarge van .wrap: (schermbreedte - wrapbreedte) / 2.
     Mijn eerdere formule schoot 491px over, waardoor hun logo op de muur
     buiten beeld viel. */
  .hero__beeld{min-height:auto;
    margin-right:calc((min(100vw - 2.4rem, var(--breed)) - 100vw) / 2)}
}
.hero__beeld img{position:absolute;left:0;right:0;top:-4%;height:108%;object-fit:cover;
  object-position:62% 30%}
.hero__beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--zwart) 0%,rgba(13,13,13,.55) 22%,rgba(13,13,13,0) 60%)}
/* de paal staat vóór de foto, dat geeft diepte */
/* De paal staat tegen de linkerrand over de volle hoogte, als een deurpost.
   Geen beugel meer: hij staat op de grond in plaats van aan de muur.
   Hoogte via flex, want een percentage op .paal__buis heeft geen houvast. */
/* Ook op een telefoon zichtbaar, alleen smaller. Het is het handelsmerk
   van de zaak, dus die hoort niet te verdwijnen op het scherm waarop
   de meeste mensen kijken. */
.hero__paal{display:flex;position:absolute;left:0;top:0;bottom:0;z-index:5;--paalbreed:18px}
.hero__paal .paal{display:flex;flex-direction:column;height:100%;
  filter:drop-shadow(6px 0 14px rgba(0,0,0,.6))}
.hero__paal .paal__buis{flex:1 1 auto;height:auto;border-radius:0}
.hero__paal .paal__arm{display:none}
.hero__paal .paal__dop{height:8px;border-radius:0}
.hero__paal .paal__glans{left:18%;width:2px}
.hero__paal .paal__vonk{display:none}
@media(min-width:900px){
  .hero__paal{--paalbreed:44px}
  .hero__paal .paal__dop{height:13px}
  .hero__paal .paal__glans{left:21%;width:5px}
  .hero__paal .paal__vonk{display:block}
  .hero__paal .paal{display:flex;flex-direction:column;height:100%;
    filter:drop-shadow(12px 0 22px rgba(0,0,0,.65))}
  .hero__paal .paal__buis{flex:1 1 auto;height:auto;min-height:110px;border-radius:0}
  .hero__paal .paal__arm{display:none}
  .hero__paal .paal__dop{height:13px;border-radius:0}
  /* de tekst moet de paal vrijhouden */
  .hero__tekst{padding-left:2.6rem}
}
@media(min-width:1200px){
  .hero__paal{--paalbreed:54px}
  .hero__tekst{padding-left:3.4rem}
}

/* ---------- troeven ---------- */
.troeven{background:var(--papier);padding:3rem 0}
.troeven__raster{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.troef{padding:1.4rem 1.6rem;border-left:3px solid var(--rood)}
.troef h3{margin-bottom:.3rem}
.troef p{color:var(--grijs);font-size:.93rem;margin:0}

section{padding:4rem 0}
.donker{background:var(--zwart);color:#fff}
.donker h2{color:#fff}
.donker p{color:#c8c8c8}

/* ---------- vestigingen ---------- */
.vest__raster{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.vest{position:relative;display:flex;flex-direction:column;background:var(--zwart-2);
  color:#fff;border-radius:3px;padding:1.5rem 1.4rem 1.3rem;text-decoration:none;
  overflow:hidden;isolation:isolate;
  transition:transform .2s ease,box-shadow .2s ease}
.vest::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:repeating-linear-gradient(-58deg,
    rgba(237,31,37,.5) 0 15px,transparent 15px 30px,
    rgba(27,58,143,.42) 30px 45px,transparent 45px 60px);
  transition:opacity .25s ease}
.vest:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.3)}
.vest:hover::before{opacity:1}
.vest__nr{font-family:var(--kop);font-size:.82rem;letter-spacing:.2em;color:var(--rood);
  font-weight:700;margin-bottom:.3rem}
.vest h3{color:#fff;font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:.35rem}
.vest__adres{color:#a9a9a9;font-size:.9rem;margin:0 0 1rem;line-height:1.45}
.vest__nu{font-family:var(--kop);font-size:.88rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;
  color:#a9a9a9}
.vest__nu::before{content:"";width:9px;height:9px;border-radius:50%;background:#7a7a7a}
.vest__nu[data-open="ja"]{color:#3ddc84}
.vest__nu[data-open="ja"]::before{background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.2)}
.lint{position:absolute;top:0;right:0;background:var(--rood);color:#fff;font-family:var(--kop);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.28rem .8rem}

/* ---------- lopende steden ---------- */
.loper{overflow:hidden;background:var(--rood);padding:.7rem 0}
.loper__spoor{display:flex;gap:2.6rem;width:max-content;animation:loop 26s linear infinite}
.loper span{font-family:var(--kop);font-size:1.4rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:2.6rem}
.loper span::after{content:"";width:9px;height:9px;background:#fff;transform:rotate(45deg)}
@keyframes loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.loper__spoor{animation:none}}

/* ---------- wax ---------- */
.wax{display:grid;gap:2.4rem;align-items:center}
@media(min-width:900px){.wax{grid-template-columns:.95fr 1.05fr;gap:3.6rem}}
.wax img{border-radius:3px}
.waxlijst{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:flex;flex-wrap:wrap;gap:.5rem}
.waxlijst li{font-family:var(--kop);font-size:.92rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.38rem .9rem;border:1px solid rgba(255,255,255,.26);border-radius:2px}

/* ---------- koffie ---------- */
.koffie{display:grid;gap:1.6rem;align-items:center}
@media(min-width:820px){.koffie{grid-template-columns:1.2fr 1fr 1fr}}
.koffie img{border-radius:3px;aspect-ratio:1/1;object-fit:cover;width:100%}

/* ---------- detailpagina ---------- */
.detail{display:grid;gap:2.4rem}
@media(min-width:900px){.detail{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
.gegevens{margin:0 0 1.6rem;display:grid;gap:1rem}
.gegevens dt{font-family:var(--kop);font-size:.84rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--grijs);font-weight:700;margin-bottom:.1rem}
.gegevens dd{margin:0;font-size:1.1rem;font-weight:600}
.tijden{width:100%;border-collapse:collapse;font-size:.97rem}
.tijden th{text-align:left;font-family:var(--kop);font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs);padding-bottom:.5rem;font-weight:700}
.tijden td{padding:.58rem 0;border-top:1px solid var(--rand)}
.tijden td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.tijden tr[data-vandaag="ja"] td{background:#fff4f4;font-weight:700;color:var(--zwart)}
.tijden .dicht{color:var(--grijs);font-weight:400}

/* ---------- prijzen ---------- */
.actie{background:var(--zwart);color:#fff;border-radius:3px;overflow:hidden;border:3px solid var(--rood)}
.actie__kop{background:var(--rood);padding:1rem 1.4rem}
.actie__kop h3{margin:0;color:#fff}
.actie__kop span{font-size:.9rem;letter-spacing:.09em;text-transform:uppercase;font-family:var(--kop)}
.actie__lijst{list-style:none;margin:0;padding:.6rem 1.4rem 1.4rem}
.actie__lijst li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.actie__lijst li:last-child{border-bottom:0}
.actie__prijs{font-family:var(--kop);font-size:2rem;font-weight:700;color:var(--rood)}
.let-op{background:#fff8e6;border-left:4px solid #e0a800;padding:1rem 1.2rem;font-size:.93rem;
  color:#5c4600;border-radius:0 3px 3px 0}

/* ---------- voet ---------- */
.voet{background:var(--zwart);color:#b4b4b4;padding:3.2rem 0 2rem;font-size:.92rem}
.voet__in{display:grid;gap:2rem}
@media(min-width:800px){.voet__in{grid-template-columns:1.3fr 1fr 1fr}}
/* Hun logo heeft zwarte letters, dus op een zwarte voet moet er een licht
   vlak onder. Anders valt "Herenkapsalon" volledig weg. */
.voet__logo{background:#fff;display:inline-block;padding:.7rem 1rem;border-radius:3px;
  margin-bottom:1.1rem}
.voet__logo img{height:46px;width:auto;margin:0}
.voet h3{color:#fff;font-size:1.15rem;margin-bottom:.8rem}
.voet a{color:#b4b4b4;text-decoration:none}
.voet a:hover{color:#fff;text-decoration:underline}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.voet__onder{border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.83rem;color:#828282}

/* ---------- belbalk ---------- */
.belbalk{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;background:var(--zwart);
  border-top:3px solid var(--rood)}
.belbalk a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem .6rem;color:#fff;text-decoration:none;font-family:var(--kop);font-size:1.02rem;
  letter-spacing:.07em;text-transform:uppercase;min-height:52px}
.belbalk a+a{border-left:1px solid rgba(255,255,255,.18)}
@media(min-width:980px){.belbalk{display:none}}
body{padding-bottom:56px}
@media(min-width:980px){body{padding-bottom:0}}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
[data-rv].in{opacity:1;transform:none}
html.rm [data-rv]{opacity:1;transform:none;transition:none}


/* ---------- compacter op een telefoon ----------
   Op 390px was de pagina bijna 6000px lang. Ruimte is daar duur. */
@media(max-width:699px){
  section{padding:2.6rem 0}
  .troeven{padding:1.8rem 0}
  .troef{padding:1rem 1.1rem}
  .hero__knoppen{gap:.6rem;margin-bottom:1.4rem}
  .hero__knoppen .knop{flex:1 1 auto;padding:.85rem 1rem;font-size:.98rem}
  .hero__claim{margin-bottom:1.3rem}
  .jubileum{margin-bottom:.9rem}
  .vest__raster{gap:.7rem;grid-template-columns:1fr 1fr}
  .vest{padding:1.1rem .9rem}
  .vest h3{font-size:1.35rem}
  .vest__adres{font-size:.82rem;margin-bottom:.7rem}
  .vest__nu{font-size:.78rem}
  .koffie{gap:1rem}
  .voet{padding:2.4rem 0 1.4rem}
  .voet__in{gap:1.6rem}
}
@media(max-width:400px){
  .vest__raster{grid-template-columns:1fr}
}

/* ============================================================
   BEWEGINGSLAAG
   Alles via transform en opacity, dus geen herberekening van de
   opmaak tijdens het scrollen. Alles valt stil bij
   prefers-reduced-motion, dat wordt via html.rm afgedwongen.
   ============================================================ */

/* --- voortgangsbalk in het streepmotief van de paal --- */
.voortgang{position:fixed;top:0;left:0;height:4px;width:100%;z-index:80;
  transform:scaleX(0);transform-origin:0 50%;
  background:repeating-linear-gradient(90deg,
    var(--rood) 0 14px,#fff 14px 28px,var(--blauw) 28px 42px,#fff 42px 56px)}

/* --- koppen die van onderaf onthullen ---
   LET OP: de clip-path staat op het BINNENSTE element. Op het element
   zelf zetten betekent nul oppervlak, en dan ziet de observer hem nooit
   binnenkomen en blijft de kop voorgoed onzichtbaar. */
.onthul{display:block;overflow:hidden}
.onthul > span{display:block;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.16,1,.3,1)}
.onthul.in > span{transform:translateY(0)}
.onthul:nth-of-type(2) > span{transition-delay:.08s}

/* --- hero: choreografie bij het laden --- */
.hero__tekst > *{opacity:0;transform:translateY(22px);
  animation:opkomst .9s cubic-bezier(.16,1,.3,1) forwards}
.hero__tekst > *:nth-child(1){animation-delay:.05s}
.hero__tekst > *:nth-child(2){animation-delay:.15s}
.hero__tekst > *:nth-child(3){animation-delay:.25s}
.hero__tekst > *:nth-child(4){animation-delay:.35s}
.hero__tekst > *:nth-child(5){animation-delay:.45s}
@keyframes opkomst{to{opacity:1;transform:none}}
/* de foto schuift zachtjes in beeld */
.hero__beeld img{animation:beeldin 1.4s cubic-bezier(.16,1,.3,1) both}
@keyframes beeldin{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
/* de paal groeit uit de grond omhoog */
.hero__paal{transform-origin:50% 100%;animation:paalop 1s cubic-bezier(.16,1,.3,1) both}
@keyframes paalop{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* stadsknoppen komen één voor één */
.hero__steden a{opacity:0;animation:opkomst .5s ease forwards}
.hero__steden a:nth-child(1){animation-delay:.55s}
.hero__steden a:nth-child(2){animation-delay:.61s}
.hero__steden a:nth-child(3){animation-delay:.67s}
.hero__steden a:nth-child(4){animation-delay:.73s}
.hero__steden a:nth-child(5){animation-delay:.79s}
.hero__steden a:nth-child(6){animation-delay:.85s}
.hero__steden a:nth-child(7){animation-delay:.91s}

/* --- cijferstrook --- */
.cijfers{background:var(--zwart);color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.cijfers__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  padding:2.2rem 0;text-align:center}
.cijfer{position:relative}
.cijfer+.cijfer::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:rgba(255,255,255,.14)}
.cijfer b{display:block;font-family:var(--kop);font-weight:700;
  font-size:clamp(2.4rem,7vw,3.8rem);line-height:1;color:var(--rood);
  font-variant-numeric:tabular-nums}
.cijfer span{display:block;font-family:var(--kop);font-size:.85rem;letter-spacing:.16em;
  text-transform:uppercase;color:#b9b9b9;margin-top:.35rem}

/* --- kaarten met lichte 3D-kanteling --- */
.vest{transform-style:preserve-3d;will-change:transform}
.vest__glans{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.16),transparent 62%);transition:opacity .25s ease}
.vest:hover .vest__glans{opacity:1}

/* --- knoppen met een veeg eroverheen --- */
.knop{position:relative;overflow:hidden}
.knop::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .55s cubic-bezier(.16,1,.3,1)}
.knop:hover::after{left:120%}

/* --- foto's die bij het scrollen meebewegen --- */
.parallax{will-change:transform}

/* --- de open-stip klopt zachtjes --- */
.vest__nu[data-open="ja"]::before{animation:kloppen 2.4s ease-in-out infinite}
@keyframes kloppen{0%,100%{box-shadow:0 0 0 3px rgba(61,220,132,.22)}
  50%{box-shadow:0 0 0 7px rgba(61,220,132,0)}}

/* --- alles uit bij minder beweging --- */
html.rm .voortgang{display:none}
html.rm .onthul > span{transform:none;transition:none}
html.rm .hero__tekst > *,
html.rm .hero__steden a{opacity:1;transform:none;animation:none}
html.rm .hero__beeld img,
html.rm .hero__paal{animation:none;transform:none}
html.rm .vest__nu[data-open="ja"]::before{animation:none}
html.rm .knop::after{display:none}
html.rm .parallax{transform:none !important}

/* ---------- kruimelpad ---------- */
.kruimels{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.85rem;
  color:var(--grijs);margin-bottom:1.2rem}
.kruimels a{text-decoration:none;color:var(--grijs)}
.kruimels a:hover{color:var(--rood);text-decoration:underline}
.kruimels span[aria-current]{color:var(--zwart);font-weight:600}

/* ---------- goed om te weten ---------- */
.weetjes{margin-top:1.6rem;background:var(--papier);border-left:4px solid var(--rood);
  border-radius:0 3px 3px 0;padding:1.1rem 1.3rem}
.weetjes h3{font-size:1.05rem;margin-bottom:.5rem}
.weetjes ul{margin:0;padding-left:1.1rem;color:var(--grijs);font-size:.94rem}
.weetjes li{margin-bottom:.35rem}
.weetjes li:last-child{margin-bottom:0}

/* ---------- vragen ---------- */
.vraag{border-top:1px solid var(--rand);padding:1.2rem 0}
.vraag:first-of-type{border-top:0}
.vraag h3{margin-bottom:.3rem}
.vraag p{margin:0;color:var(--grijs)}

/* ---------- overzichtstabel ---------- */
.tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch}
.overzicht{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.overzicht th{background:var(--zwart);color:#fff;font-family:var(--kop);letter-spacing:.09em;
  text-transform:uppercase;font-size:.85rem;text-align:left;padding:.75rem .9rem}
.overzicht td{padding:.8rem .9rem;border-bottom:1px solid var(--rand)}
.overzicht tbody tr:last-child td{border-bottom:0}
.overzicht tbody tr:hover{background:var(--papier)}
.overzicht a{color:var(--zwart);font-weight:600;text-decoration:none}
.overzicht a:hover{color:var(--rood);text-decoration:underline}
.nieuwtje{background:var(--rood);color:#fff;font-family:var(--kop);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.1rem .45rem;border-radius:2px;
  vertical-align:middle}

/* ---------- voettekst op een telefoon ----------
   Drie blokken onder elkaar maakte de voet 804px hoog. Het logoblok blijft
   over de volle breedte, daaronder komen de twee lijsten naast elkaar en
   staan de zeven vestigingen in twee kolommen. */
@media(max-width:799px){
  .voet__in{grid-template-columns:1.35fr 1fr;gap:1.7rem 1.1rem}
  .voet__in > div:first-child{grid-column:1 / -1}
  .voet__in > div:nth-child(2) ul{grid-template-columns:1fr 1fr;gap:.45rem .7rem}
  .voet h3{font-size:1rem;margin-bottom:.55rem}
  .voet__in > div:first-child p{margin-bottom:.6rem;font-size:.88rem}
  .voet__onder{margin-top:1.6rem;flex-direction:column;gap:.35rem}
}
@media(max-width:359px){
  .voet__in{grid-template-columns:1fr}
  .voet__in > div:first-child{grid-column:auto}
  .voet__in > div:nth-child(2) ul{grid-template-columns:1fr 1fr}
}

/* ---------- belkiezer ----------
   Mus'ab heeft zeven nummers en geen algemeen nummer. "Bel ons" opent
   daarom een keuze in plaats van te doen alsof er één centrale lijn is. */
.belbalk__knop{flex:1;background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--kop);font-size:1.02rem;letter-spacing:.07em;text-transform:uppercase;
  min-height:52px;padding:.95rem .6rem}
.belvel[hidden]{display:none}
.belvel{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end}
.belvel__achter{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.belvel__paneel{position:relative;width:100%;background:#fff;border-top:4px solid var(--rood);
  border-radius:10px 10px 0 0;max-height:82vh;overflow-y:auto;
  animation:velop .28s cubic-bezier(.16,1,.3,1)}
@keyframes velop{from{transform:translateY(100%)}to{transform:none}}
html.rm .belvel__paneel{animation:none}
.belvel__kop{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem .6rem;border-bottom:1px solid var(--rand);position:sticky;top:0;background:#fff}
.belvel__kop h2{margin:0;font-size:1.35rem}
.belvel__x{width:44px;height:44px;border:1px solid var(--rand);border-radius:3px;background:none;
  font-size:1.6rem;line-height:1;cursor:pointer;color:var(--zwart)}
.belvel__lijst{list-style:none;margin:0;padding:.4rem 0 1rem}
.belvel__lijst a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.1rem;text-decoration:none;min-height:56px;border-bottom:1px solid var(--rand)}
.belvel__lijst li:last-child a{border-bottom:0}
.belvel__lijst a:hover,.belvel__lijst a:focus-visible{background:var(--papier)}
.belvel__stad{font-family:var(--kop);font-size:1.2rem;font-weight:700;text-transform:uppercase;
  color:var(--zwart)}
.belvel__nr{color:var(--rood);font-weight:600;font-variant-numeric:tabular-nums}
@media(min-width:980px){.belvel{display:none}}
.belvel__uitleg{margin:0;padding:.8rem 1.1rem 0;color:var(--grijs);font-size:.9rem}

/* ---------- kaartje per vestiging ---------- */
.kaart{display:block;position:relative;margin-top:1.6rem;border:1px solid var(--rand);
  border-radius:3px;overflow:hidden;text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease}
.kaart:hover{border-color:var(--rood);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.kaart img{width:100%;aspect-ratio:25/14;object-fit:cover}
.kaart__balk{display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--zwart);color:#fff;font-family:var(--kop);font-size:.95rem;
  letter-spacing:.07em;text-transform:uppercase;padding:.75rem 1rem;min-height:46px}
.kaart:hover .kaart__balk{background:var(--rood)}
.kaart:focus-visible{outline:3px solid var(--rood);outline-offset:3px}


/* ---------- koffie en thee op een telefoon ----------
   Onder elkaar nam dit blok drie schermen in beslag. De tekst blijft over de
   volle breedte, de twee foto's komen daaronder naast elkaar. */
@media(max-width:819px){
  .koffie{grid-template-columns:1fr 1fr;gap:.8rem}
  .koffie__tekst{grid-column:1 / -1}
}


/* ---------- prijzen per vestiging ---------- */
.stad{position:relative;list-style:none}
.stad label{display:block;cursor:pointer}
.stad input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.stad span{display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.15rem;
  border:1px solid var(--rand);border-radius:2px;background:#fff;cursor:pointer;
  font-family:var(--kop);font-size:1.05rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--zwart);transition:all .15s ease}
.stad input:hover + span{border-color:var(--zwart)}
.stad input:checked + span{background:var(--rood-knop);border-color:var(--rood-knop);color:#fff}
.stad input:focus-visible + span{outline:3px solid var(--rood);outline-offset:2px}
.prijsblok[hidden]{display:none}
.prijsblok{margin-top:1.8rem;max-width:640px}
.prijsblok h2{margin-bottom:.9rem}
.prijslijst{list-style:none;padding:0;margin:0}
.prijslijst li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--rand)}
.prijslijst li:last-child{border-bottom:0}
.prijslijst b{font-family:var(--kop);font-size:1.5rem;color:var(--rood-diep);white-space:nowrap}