/* ==========================================================================
   YESFIT, stijl v6
   Overgenomen uit het goedgekeurde ontwerpvoorstel (mockup v6).
   Merkkleuren, typografie en componentnamen ongewijzigd; aangevuld met de
   onderdelen die de echte site nodig heeft: dropdown-nav, mobiel menu,
   reviews, partners, carwash en de subpagina-onderdelen.
   ========================================================================== */

:root{
  --bg:#0a0908;
  --bg-elevated:#131211;
  --bg-card:#1a1917;
  --lime:#bfff00;
  --red:#ff2a2a;
  --blauw:#2ea8ff;
  --txt:#fafaf9;
  --txt-2:#8a8a87;
  --txt-3:#5c5c59;
  --border:rgba(255,255,255,0.07);
  --border-sterk:rgba(255,255,255,0.16);
  --display:'Anton',Impact,sans-serif;
  --logo:'Anton',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --stencil:'Stardos Stencil','Anton',sans-serif;
  --wrap:1280px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],div[id]{scroll-margin-top:78px}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sectie{padding-block:clamp(64px,9vw,116px);position:relative}
.sectie + .sectie{border-top:1px solid var(--border)}

.kop{display:flex;flex-direction:column;gap:14px;margin-bottom:44px;max-width:62ch}
.label{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:12px;
}
.label::after{content:"";height:1px;width:56px;background:var(--lime);opacity:.5}
h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:.98;letter-spacing:.01em;
}
.kop p{color:var(--txt-2);font-size:1.02rem}
.lime{color:var(--lime)}
.rood{color:var(--red)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(10,9,8,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;gap:22px;height:66px}
.merk{
  font-family:var(--logo);font-size:1.55rem;letter-spacing:.05em;text-decoration:none;
  text-transform:uppercase;line-height:1;display:flex;align-items:center;gap:10px;
}
.merk img{height:30px;width:30px}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:.86rem;color:var(--txt-2)}
.nav-links > a,.nav-item > a{text-decoration:none;white-space:nowrap}
.nav-links > a:hover,.nav-item > a:hover{color:var(--txt)}

/* uitklapmenu naar de lespagina's, alleen open na een klik */
.nav-item{position:relative;display:flex;align-items:center}
.nav-knop{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font-family:inherit;font-size:inherit;line-height:inherit;white-space:nowrap;
  display:flex;align-items:center;
}
.nav-knop:hover,.nav-item.open .nav-knop{color:var(--txt)}
.nav-knop::after{
  content:"";width:6px;height:6px;margin-left:8px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s ease;
}
.nav-item.open .nav-knop::after{transform:translateY(1px) rotate(225deg)}
.nav-uitklap{
  position:absolute;top:100%;left:-16px;min-width:216px;padding-top:14px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-item.open .nav-uitklap{opacity:1;visibility:visible;transform:none}
.nav-uitklap-inner{
  background:var(--bg-elevated);border:1px solid var(--border-sterk);
  display:flex;flex-direction:column;padding:8px 0;
}
.nav-uitklap-inner a{
  text-decoration:none;padding:9px 18px;font-size:.86rem;color:var(--txt-2);
}
.nav-uitklap-inner a:hover{color:var(--lime);background:rgba(191,255,0,.06)}

.knop{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 22px;border-radius:2px;border:0;cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.knop:hover{transform:translateY(-2px)}
.knop-primair{background:var(--lime);color:#0a0908;font-weight:700}
.knop-primair:hover{background:#d4ff3d}
.knop-rand{border:1px solid var(--border-sterk);color:var(--txt);background:none}
.knop-rand:hover{border-color:var(--lime);color:var(--lime)}
.nav .knop{padding:11px 18px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* hamburger, alleen op mobiel zichtbaar */
.nav-toggle{
  display:none;width:40px;height:34px;background:none;border:1px solid var(--border-sterk);
  border-radius:2px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--txt);transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* overlay-menu op mobiel */
.mobiel-menu{
  position:fixed;inset:0;z-index:65;background:var(--bg);
  padding:78px 24px calc(96px + env(safe-area-inset-bottom));
  overflow-y:auto;display:none;flex-direction:column;gap:2px;
}
.mobiel-menu.open{display:flex}
.mm-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lime);margin:22px 0 8px;
}
.mobiel-menu > a{
  text-decoration:none;font-family:var(--display);font-size:1.5rem;text-transform:uppercase;
  letter-spacing:.02em;padding:9px 0;border-bottom:1px solid var(--border);
}
.mobiel-menu > a:hover{color:var(--lime)}
.mobiel-menu .knop{margin-top:26px;justify-content:center;font-size:12px}
.mm-groep{display:flex;flex-direction:column}
.mm-knop{
  background:none;border:0;border-bottom:1px solid var(--border);cursor:pointer;
  color:var(--txt);font-family:var(--display);font-size:1.5rem;text-transform:uppercase;
  letter-spacing:.02em;padding:9px 0;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.mm-knop::after{
  content:"";width:8px;height:8px;margin-right:4px;
  border-right:1.5px solid var(--txt-3);border-bottom:1.5px solid var(--txt-3);
  transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;
}
.mm-groep.open .mm-knop{color:var(--lime)}
.mm-groep.open .mm-knop::after{border-color:var(--lime);transform:translateY(1px) rotate(225deg)}
.mm-sub{display:none;flex-direction:column;padding:6px 0 10px}
.mm-groep.open .mm-sub{display:flex}
.mm-sub a{
  text-decoration:none;color:var(--txt-2);font-size:1rem;padding:10px 0 10px 16px;
  border-bottom:1px solid var(--border);box-shadow:inset 2px 0 0 rgba(191,255,0,.28);
}
.mm-sub a:hover{color:var(--lime)}

/* ---------- hero ---------- */
/* het beeld vult de hele banner, de tekst ligt erop. De kopbalk is 67px
   hoog en plakt, dus die trekken we van de schermhoogte af. */
.hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--border);
  min-height:calc(100vh - 67px);display:flex;align-items:center;
}
.hero-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 40%;
  filter:contrast(1.08) saturate(.88);
}
/* twee doeken over de foto: van links donker zodat de tekst leesbaar blijft,
   en onderaan een overgang naar de paginakleur zodat de balk aansluit. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.86) 34%,rgba(10,9,8,.5) 66%,rgba(10,9,8,.32) 100%),
    linear-gradient(180deg,rgba(10,9,8,.55) 0%,transparent 22%,transparent 58%,rgba(10,9,8,.9) 100%);
}
.hero-inhoud{position:relative;z-index:1;padding-block:clamp(56px,8vw,104px)}
.hero-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:18px;
}
h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.9rem,7.4vw,5.4rem);line-height:.92;letter-spacing:.005em;
}
.hero-sub{color:var(--txt-2);font-size:1.06rem;margin-top:20px;max-width:46ch}
.hero-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-knoppen{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:34px}
.knop-start{
  display:inline-flex;align-items:center;justify-content:space-between;gap:44px;
  border:1px solid var(--lime);color:var(--lime);background:none;text-decoration:none;
  font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1;
  font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:.02em;padding:20px 26px;
  transition:background .18s ease,color .18s ease;
}
.knop-start:hover{background:var(--lime);color:#0a0908}
.knop-duo{display:inline-flex;border:1px solid var(--border-sterk)}
.knop-duo a{
  padding:12px 26px;text-decoration:none;color:var(--txt-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:color .15s ease,background .15s ease;
}
.knop-duo a + a{border-left:1px solid var(--border-sterk)}
.knop-duo a:hover{color:var(--lime);background:rgba(191,255,0,.06)}
.hero-onder{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--txt-3);text-transform:uppercase;
}
.hero-onder span{display:flex;align-items:center;gap:8px}
.hero-onder span::before{content:"";width:5px;height:5px;background:var(--lime);border-radius:50%}

/* ---------- bewijsbalk ---------- */
.balk{border-bottom:1px solid var(--border);background:var(--bg-elevated);overflow:hidden}
.balk-inner{display:flex;flex-wrap:wrap;gap:0}
.balk-item{
  flex:1 1 190px;padding:20px 24px;border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:3px;
}
.balk-item:last-child{border-right:none}
.balk-item b{font-family:var(--display);font-size:1.5rem;font-weight:400;letter-spacing:.02em;line-height:1.1}
.balk-item span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}

/* ---------- proefles ---------- */
#proefles{background:var(--bg-elevated)}
.proef-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.stappen{display:flex;flex-direction:column;gap:0;margin-top:8px}
.stap{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--border)}
.stap:last-child{border-bottom:1px solid var(--border)}
.stap-nr{font-family:var(--mono);font-size:12px;color:var(--lime);letter-spacing:.1em;padding-top:3px}
.stap h3{font-family:var(--body);font-size:1.02rem;font-weight:600;margin-bottom:3px}
.stap p{color:var(--txt-2);font-size:.93rem}
.proef-beeld{position:relative}
.proef-beeld img{width:100%;height:clamp(320px,40vw,470px);object-fit:cover}
.proef-citaat{
  position:absolute;right:0;bottom:0;left:22%;
  background:var(--bg);border-left:2px solid var(--lime);padding:18px 20px;
  font-family:var(--display);font-size:1.15rem;line-height:1.25;text-transform:uppercase;letter-spacing:.01em;
}
.proef-punten{
  display:flex;flex-direction:column;gap:0;margin-top:26px;border-top:1px solid var(--border);
}
.proef-punt{
  padding:11px 0 11px 24px;border-bottom:1px solid var(--border);position:relative;
  font-size:.9rem;color:var(--txt-2);
}
.proef-punt::before{content:"✓";position:absolute;left:0;top:11px;color:var(--lime);font-family:var(--mono);font-size:12px}

.proefform{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.veld-breed{grid-column:1 / -1}
.veld input,.veld select{
  font-family:var(--body);font-size:16px;color:var(--txt);
  background:var(--bg);border:1px solid var(--border-sterk);border-radius:2px;
  padding:13px 14px;width:100%;appearance:none;
}
.veld select{
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-2) 50%),linear-gradient(135deg,var(--txt-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px;
}
.veld select option,.veld select optgroup{background:var(--bg-elevated);color:var(--txt)}
.veld input:focus,.veld select:focus{border-color:var(--lime);outline:none}
.veld input::placeholder{color:var(--txt-3)}
.proefform > .knop{grid-column:1 / -1;justify-content:center;margin-top:4px}
.proefform-klein{grid-column:1 / -1;font-size:.82rem;color:var(--txt-2)}
.proefform-ok{
  margin-top:26px;border-left:2px solid var(--lime);background:rgba(191,255,0,.06);
  padding:18px 20px;font-size:.92rem;color:var(--txt-2);
}
.proefform-ok b{
  display:block;font-family:var(--display);font-size:1.2rem;font-weight:400;
  text-transform:uppercase;color:var(--txt);margin-bottom:5px;letter-spacing:.02em;
}
.proefform-ok a{color:var(--lime)}

/* ---------- hoofddisciplines op de homepage ---------- */
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.disc{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--bg);overflow:hidden;
}
.disc img{
  width:100%;aspect-ratio:4 / 5;object-fit:cover;display:block;
  filter:contrast(1.06) saturate(.8);transition:transform .55s ease,filter .3s ease;
}
.disc:hover img{transform:scale(1.05);filter:contrast(1.06) saturate(1)}
.disc::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,.08) 0%,rgba(10,9,8,.5) 48%,rgba(10,9,8,.95) 100%);
}
.disc-tekst{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px 24px 26px}
.disc-tekst h3{
  font-family:var(--display);font-size:clamp(1.6rem,2.5vw,2.15rem);font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;line-height:1;
}
.disc:hover .disc-tekst h3{color:var(--lime)}
.disc-tekst p{color:var(--txt-2);font-size:.92rem;margin-top:11px;max-width:32ch}
.disc-meer{
  display:flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
  transition:color .2s ease;
}
.disc:hover .disc-meer{color:var(--lime)}
.disc-nieuw{
  position:absolute;top:0;left:0;z-index:2;background:var(--lime);color:#0a0908;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:5px 11px;
}

/* ---------- groepslessen op een lespagina ---------- */
.groep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.groep{
  border:1px solid var(--border);background:var(--bg-elevated);
  display:flex;flex-direction:column;overflow:hidden;
}
.groep img{width:100%;aspect-ratio:3 / 2;object-fit:cover;display:block;filter:contrast(1.05) saturate(.85)}
.groep-tekst{padding:22px 20px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.groep-tekst h3{
  font-family:var(--display);font-size:1.32rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.1;
}
.groep-tijd{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--lime);
  font-variant-numeric:tabular-nums;
}
.groep-om{color:var(--txt-2);font-size:.9rem}
.groep-leeftijd{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
}

/* ---------- lessen ---------- */
.les-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.les{
  background:var(--bg);padding:30px 26px 26px;display:flex;flex-direction:column;gap:10px;
  min-height:148px;position:relative;transition:background .2s ease;
  text-decoration:none;color:inherit;
}
.les:hover{background:var(--bg-card)}
.les h3{font-family:var(--display);font-size:1.5rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.les:hover h3{color:var(--lime)}
.les p{color:var(--txt-2);font-size:.92rem;flex:1}
.les-tag{margin-top:auto}
.les-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
  display:flex;align-items:center;gap:8px;
}
.les-tag::before{content:"";width:14px;height:1px;background:var(--lime)}
.les-pijl{
  position:absolute;right:24px;bottom:24px;font-family:var(--mono);font-size:14px;color:var(--txt-3);
  transition:transform .2s ease,color .2s ease;
}
.les:hover .les-pijl{color:var(--lime);transform:translateX(4px)}
.les-uit{border-top:2px solid var(--lime)}
.vlag{
  position:absolute;top:0;right:0;background:var(--lime);color:#0a0908;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:4px 9px;
}

/* ---------- wedstrijdteam ---------- */
#team{background:#0d0b0b;position:relative;overflow:hidden}
#team::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 380px at 78% 12%,rgba(255,42,42,.13),transparent 68%);
  pointer-events:none;
}
#team .label{color:var(--red)}
#team .label::after{background:var(--red)}
.team-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;position:relative}
.team-beelden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.team-beelden figure{margin:0}
.team-beelden img{width:100%;height:clamp(230px,27vw,320px);object-fit:cover}
.team-beelden figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);padding-top:8px;
}
.team-breed{grid-column:1 / -1}
.team-breed img{height:clamp(200px,22vw,260px)}
.team-lijst{display:flex;flex-direction:column;gap:0;margin-top:26px}
.team-rij{
  display:grid;grid-template-columns:150px 1fr;gap:20px;padding:15px 0;border-top:1px solid var(--border);
  font-size:.94rem;
}
.team-rij:last-child{border-bottom:1px solid var(--border)}
.team-rij b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:500}
.team-rij span{color:var(--txt-2)}
.team-kaart{
  border:1px solid rgba(255,42,42,.35);background:rgba(255,42,42,.05);
  padding:24px;display:flex;flex-direction:column;gap:12px;
}
.team-kaart h3{font-family:var(--display);font-size:1.5rem;font-weight:400;text-transform:uppercase}
.team-kaart p{color:var(--txt-2);font-size:.92rem}
.team-kaart .knop{align-self:flex-start;margin-top:4px}
.team-kaart .bedrag{font-family:var(--display);font-size:2.6rem;line-height:1;font-weight:400;color:var(--txt)}
.team-kaart .bedrag small{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--txt-2);
  margin-left:8px;text-transform:uppercase;
}
.team-eis{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);line-height:1.9;border-top:1px solid var(--border);padding-top:12px;
}

/* ---------- rooster ---------- */
.week{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);
}
.dag{background:var(--bg);display:flex;flex-direction:column;min-height:250px;position:relative}
.dag-kop{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-2);padding:13px 14px;border-bottom:1px solid var(--border);background:var(--bg-elevated);
}
.dag.vandaag .dag-kop{color:#0a0908;background:var(--lime);font-weight:700}
.vandaag-vlag{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);padding:8px 14px 0;
}
.les-blok{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.les-blok:last-child{border-bottom:none}
.les-blok time{font-family:var(--mono);font-size:11px;color:var(--txt);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.les-blok b{font-size:.83rem;font-weight:600;letter-spacing:.01em}
.t-wedstrijd{box-shadow:inset 2px 0 0 var(--red)}
.t-wedstrijd b{color:var(--red)}
.t-kids{box-shadow:inset 2px 0 0 var(--lime)}
.t-kids b{color:var(--lime)}
.t-open{box-shadow:inset 2px 0 0 var(--txt-3)}
.leeg{flex:1}
.legenda{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
}
.legenda i{display:inline-block;width:16px;height:2px;margin-right:8px;vertical-align:middle}
.rooster-balk{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--border);
}
.rooster-open{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.rooster-open b{color:var(--txt)}
.rooster-knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- reviews ---------- */
#reviews{background:var(--bg-elevated)}
.reviews-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:40px}
.g-badge{
  display:flex;align-items:center;gap:16px;border:1px solid var(--border-sterk);
  padding:16px 22px;background:var(--bg);
}
.g-badge svg{width:26px;height:26px;flex:0 0 auto}
.g-num{font-family:var(--display);font-size:2rem;line-height:1;font-weight:400}
.g-sterren{color:var(--lime);letter-spacing:.12em;font-size:.8rem}
.g-sub{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-top:3px}
.g-sub b{color:var(--txt-2)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.review{background:var(--bg);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.r-sterren{color:var(--lime);letter-spacing:.14em;font-size:.78rem}
.r-tekst{font-size:.95rem;color:var(--txt);flex:1}
.r-wie{display:flex;align-items:center;gap:12px}
.r-letter{
  width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:1px solid var(--border-sterk);
  font-family:var(--display);font-size:1rem;color:var(--lime);
}
.r-wie b{display:block;font-size:.88rem;font-weight:600}
.r-wie span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.reviews-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);
}
.reviews-link svg{width:15px;height:15px}
.reviews-link:hover{color:var(--lime)}

/* ---------- prijzen ---------- */
#prijzen{background:var(--bg-elevated)}
.prijstabel{width:100%;border-collapse:collapse;font-size:.95rem}
.prijstabel + .prijstabel{margin-top:44px}
.prijstabel caption{
  text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-3);padding-bottom:12px;
}
.prijstabel th{
  text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);padding:0 14px 12px 0;border-bottom:1px solid var(--border-sterk);
}
.prijstabel th.num,.prijstabel td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.prijstabel td{padding:14px 14px 14px 0;border-bottom:1px solid var(--border);vertical-align:baseline}
.prijstabel td.num{font-family:var(--mono);font-size:.95rem}
.prijstabel td small{display:block;color:var(--txt-3);font-size:.8rem}
.prijstabel tr.uit td{background:rgba(191,255,0,.05)}
.prijstabel tr.uit td:first-child{box-shadow:inset 2px 0 0 var(--lime)}
.mini{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--lime);color:#0a0908;padding:2px 6px;margin-left:9px;font-weight:700;
}
.prijs-blokken{display:grid;grid-template-columns:1.4fr 1fr;gap:52px;align-items:start}
.los{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.los-rij{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--border);font-size:.92rem}
.los-rij span{color:var(--txt-2)}
.los-rij b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.los-rij a{color:var(--txt-2);text-decoration:none}
.los-rij a:hover{color:var(--lime)}
.zij-kop{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);margin-bottom:12px}
.zij + .zij{margin-top:34px}
.zij-noot{font-size:.82rem;color:var(--txt-3);margin-top:10px}
.bron{margin-top:34px;color:var(--txt-3);font-size:.85rem;max-width:78ch}
.extra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:46px}
.extra-grid .zij + .zij{margin-top:0}

/* ---------- abonnementen ---------- */
.abo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.abo{
  border:1px solid var(--border-sterk);background:var(--bg-elevated);
  padding:34px 30px 30px;display:flex;flex-direction:column;
}
.abo-uit{border-color:var(--lime)}
.abo-wie{
  font-family:var(--display);font-size:1.9rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;line-height:1;
}
.abo-leeftijd{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-3);margin-top:9px;
}
.abo-prijs{
  font-family:var(--display);font-size:clamp(3.2rem,7vw,4.6rem);line-height:1;
  color:var(--lime);margin-top:24px;display:flex;align-items:flex-start;gap:4px;
}
.abo-prijs .euro{font-size:.44em;margin-top:.22em}
.abo-prijs sup{font-size:.42em;line-height:1;margin-top:.18em}
.abo-per{color:var(--txt-2);font-size:.92rem;margin-top:10px}
.abo-punten{list-style:none;padding:0;margin:24px 0 26px;display:flex;flex-direction:column}
.abo-punten li{
  position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--border);
  color:var(--txt-2);font-size:.92rem;
}
.abo-punten li:first-child{border-top:1px solid var(--border)}
.abo-punten li::before{
  content:"✓";position:absolute;left:0;top:12px;color:var(--lime);
  font-family:var(--mono);font-size:12px;
}
.abo .knop{margin-top:auto;justify-content:center}
.incasso{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);margin-top:34px;
}
.incasso-item{background:var(--bg);padding:24px 22px}
.incasso-item b{
  display:block;font-family:var(--display);font-size:1.5rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;color:var(--lime);
}
.incasso-item span{display:block;color:var(--txt-2);font-size:.9rem;margin-top:9px}

/* ---------- erelijst ---------- */
.ere-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ere{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--bg-elevated)}
.ere img{width:100%;aspect-ratio:3 / 4;object-fit:cover;display:block;filter:contrast(1.08) saturate(.8)}
.ere figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 18px;
  background:linear-gradient(180deg,transparent,rgba(10,9,8,.94));
}
.ere-naam{
  display:block;font-family:var(--display);font-size:1.25rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;
}
.ere-titel{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin-top:7px;
}

/* ---------- partnerpagina ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.partner-kaart{
  border:1px solid var(--border);background:var(--bg-elevated);padding:28px 26px;
  display:flex;flex-direction:column;gap:14px;
}
.partner-logo{
  height:56px;display:flex;align-items:center;
}
.partner-logo img{max-height:52px;width:auto;max-width:150px;opacity:.92}
.partner-kaart h3{font-size:1.1rem;letter-spacing:.01em}
.partner-kaart p{color:var(--txt-2);font-size:.92rem;flex:1}
.partner-link{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);text-decoration:none;
}
.partner-link:hover{color:var(--lime)}

/* ---------- Leergeld ---------- */
.leergeld-vak{
  border:1px solid var(--border-sterk);background:var(--bg-elevated);
  padding:28px 26px;margin-top:30px;
}
.leergeld-vak h3{font-size:1.15rem;margin-bottom:14px}
.leergeld-stap{
  display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.leergeld-stap:last-child{border-bottom:none}
.leergeld-nr{
  font-family:var(--mono);font-size:11px;color:var(--lime);letter-spacing:.1em;padding-top:3px;
}
.leergeld-stap b{display:block;margin-bottom:5px}
.leergeld-stap span{color:var(--txt-2);font-size:.92rem}
.grens{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:8px}
.grens td{padding:12px 0;border-bottom:1px solid var(--border);color:var(--txt-2)}
.grens td:last-child{
  text-align:right;font-family:var(--mono);color:var(--txt);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.grens tr:last-child td{border-bottom:none}

/* ---------- waarde ---------- */
.waarde-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.waarde-beeld{position:sticky;top:92px}
.waarde-beeld img{width:100%;height:clamp(340px,42vw,520px);object-fit:cover}
.waarde-lijst{display:flex;flex-direction:column;gap:0}
.waarde-rij{display:grid;grid-template-columns:26px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.waarde-rij:first-child{border-top:1px solid var(--border)}
.vink{color:var(--lime);font-family:var(--mono);font-size:14px;line-height:1.5}
.waarde-rij h3{font-family:var(--body);font-size:1rem;font-weight:600;margin-bottom:2px}
.waarde-rij p{color:var(--txt-2);font-size:.92rem}

/* ---------- drempel ---------- */
#drempel{background:var(--bg-elevated)}
.drempel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.drempel-kaart{background:var(--bg);padding:30px 28px;display:flex;flex-direction:column;gap:10px}
.drempel-kaart h3{font-family:var(--display);font-size:1.35rem;font-weight:400;text-transform:uppercase}
.drempel-kaart p{color:var(--txt-2);font-size:.93rem}
.drempel-kaart a{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);text-decoration:none;margin-top:auto;padding-top:8px;
}
.drempel-kaart a:hover{text-decoration:underline}

/* ---------- praktisch ---------- */
.prak-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.prak-beeld img{width:100%;height:clamp(300px,36vw,420px);object-fit:cover}
.prak-lijst{display:flex;flex-direction:column;gap:0;margin-top:8px}
.prak-rij{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--border);font-size:.95rem}
.prak-rij:first-child{border-top:1px solid var(--border)}
.prak-rij b{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);font-weight:500;padding-top:3px;
}
.prak-rij a{color:var(--lime);text-decoration:none}
.prak-rij a:hover{text-decoration:underline}
.prak-noot{margin-top:22px;color:var(--txt-3);font-size:.88rem;max-width:56ch}
.prak-noot a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
.prak-noot a:hover{color:var(--lime)}

/* ---------- carwash, zelfde eigenaar ---------- */
.carwash{background:var(--bg-elevated);border-top:1px solid var(--border)}
.carwash .label{color:var(--blauw)}
.carwash .label::after{background:var(--blauw)}
.carwash-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center}
.carwash-grid p{color:var(--txt-2);margin-top:16px;max-width:52ch}
.carwash-grid .knop{margin-top:24px;border:1px solid rgba(46,168,255,.5);color:var(--blauw);background:none}
.carwash-grid .knop:hover{background:rgba(46,168,255,.1)}
.carwash-zegel{
  border:1px solid rgba(46,168,255,.35);background:rgba(46,168,255,.06);
  padding:26px;text-align:center;display:flex;flex-direction:column;gap:4px;
}
.carwash-zegel span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-2)}
.carwash-zegel strong{font-family:var(--display);font-size:3rem;line-height:1;font-weight:400;color:var(--blauw)}

/* ---------- partners ---------- */
.partners{border-top:1px solid var(--border);background:var(--bg);padding:34px 0;overflow:hidden}
.partners-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-3);text-align:center;margin-bottom:22px;
}
.partners-spoor{display:flex;align-items:center;gap:52px;animation:partners-loop 42s linear infinite}
.partners-spoor img{width:120px;height:auto;opacity:.5;filter:grayscale(1);flex:0 0 auto;transition:opacity .2s ease}
.partners-spoor img:hover{opacity:.95}
@keyframes partners-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- slot-cta ---------- */
.slot{position:relative;text-align:center;overflow:hidden;padding:clamp(76px,10vw,130px) 0}
.slot-ghost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--stencil);font-size:min(26vw,340px);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(191,255,0,.09);pointer-events:none;user-select:none;
}
.slot h2{font-size:clamp(2.4rem,7vw,4.6rem);position:relative}
.slot p{color:var(--txt-2);margin:18px auto 0;max-width:52ch;position:relative}
.slot .hero-acties{justify-content:center;position:relative}
.slot .hero-knoppen{align-items:center;position:relative;margin-top:30px}

/* ---------- subpagina's ---------- */
.pagina-hero{position:relative;border-bottom:1px solid var(--border);overflow:hidden}
.pagina-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.18) saturate(.35) brightness(.66) grayscale(.3);
}
.pagina-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.55),rgba(10,9,8,.92));
}
.pagina-hero-inner{
  position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(54px,8vw,96px) 24px clamp(40px,6vw,68px);
}
.kruimel{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:18px;
}
.kruimel a{color:var(--txt-2);text-decoration:none}
.kruimel a:hover{color:var(--lime)}
.pagina-hero h1{font-size:clamp(2.4rem,6.4vw,4.2rem)}
.pagina-hero .lede{color:var(--txt-2);font-size:1.05rem;margin-top:18px;max-width:52ch}
.pagina-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:52px;align-items:start}
.tekst h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:16px}
.tekst h2 + p{margin-top:0}
.tekst p{color:var(--txt-2);margin-bottom:16px}
.tekst p:last-child{margin-bottom:0}
.punten{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:0}
.punten li{
  padding:13px 0 13px 26px;border-bottom:1px solid var(--border);position:relative;
  color:var(--txt-2);font-size:.95rem;
}
.punten li:first-child{border-top:1px solid var(--border)}
.punten li::before{content:"✓";position:absolute;left:0;top:13px;color:var(--lime);font-family:var(--mono);font-size:12px}
.zijkaart{border:1px solid var(--border-sterk);background:var(--bg-elevated);padding:26px 24px}
.zijkaart h3{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:14px;font-weight:500;
}
.zij-rij{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--border)}
.zij-rij .lbl{font-size:.92rem}
.zij-rij .lbl small{display:block;color:var(--txt-3);font-size:.78rem}
.zij-rij .val{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.zij-rij .val.lime{color:var(--lime)}
.zijkaart .noot{font-size:.82rem;color:var(--txt-3);margin:14px 0 18px}
.zijkaart .knop{width:100%;justify-content:center}
.pagina-slot{
  border-top:1px solid var(--border);background:var(--bg-elevated);
  padding:clamp(52px,7vw,84px) 24px;text-align:center;
}
.pagina-slot h2{margin-bottom:26px}
.sectie-lede{color:var(--txt-2);font-size:1.05rem;max-width:62ch;margin-bottom:38px}
.sectie-lede strong{color:var(--txt)}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--border);padding:52px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
.foot-logo{font-family:var(--logo);font-size:1.7rem;letter-spacing:.05em;text-transform:uppercase}
.foot-grid h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:12px;font-weight:500;
}
.foot-grid p{color:var(--txt-2);font-size:.92rem}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.foot-grid ul a{color:var(--txt-2);text-decoration:none;font-size:.92rem}
.foot-grid ul a:hover{color:var(--lime)}
.foot-grid p a{color:var(--txt-2);text-decoration:none}
.foot-grid p a:hover{color:var(--lime)}
.foot-social{display:flex;gap:12px;margin-top:18px}
.foot-social a{
  width:36px;height:36px;border:1px solid var(--border-sterk);display:flex;align-items:center;justify-content:center;
  color:var(--txt-2);transition:color .2s ease,border-color .2s ease;
}
.foot-social a:hover{color:var(--lime);border-color:var(--lime)}
.foot-social svg{width:16px;height:16px}
.foot-onder{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);
}
.foot-onder a{color:var(--txt-2);text-decoration:none}
.foot-onder a:hover{color:var(--lime)}

/* ---------- whatsapp-knop en mobiele actiebalk ---------- */
.wa-knop{
  position:fixed;right:20px;bottom:20px;z-index:55;
  width:52px;height:52px;border-radius:50%;background:#25d366;color:#0a0908;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .15s ease;
}
.wa-knop:hover{transform:translateY(-3px)}
.wa-knop svg{width:26px;height:26px}
/* Zwevende actiebalk: geen vaste plank onderin, maar een pil die pas
   omhoog komt zodra je voorbij de hero scrolt. Klasse .toon zet het script. */
.mobiel-balk{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:0 14px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(160%);opacity:0;pointer-events:none;
  transition:transform .34s cubic-bezier(.22,.9,.28,1),opacity .22s ease;
}
.mobiel-balk.toon{transform:none;opacity:1;pointer-events:auto}
.balk-binnen{
  display:flex;align-items:center;gap:8px;padding:8px;border-radius:999px;
  background:rgba(19,18,17,.92);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--border-sterk);
  box-shadow:0 16px 40px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
}
.mobiel-balk .knop{
  flex:1 1 auto;justify-content:center;border-radius:999px;
  padding:14px 16px;font-size:11.5px;letter-spacing:.09em;
}
.mobiel-balk .wa-mobiel{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;color:#0a0908;
}
.mobiel-balk .wa-mobiel svg{width:22px;height:22px}
/* het uitklapmenu ligt eronder, de balk hoort er niet overheen te zweven */
.mobiel-menu.open ~ .mobiel-balk{display:none}

/* ==========================================================================
   Schermbreedtes
   ========================================================================== */

@media (max-width:1080px){
  .week{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:980px){
  .proef-grid,.team-grid,.waarde-grid,.prak-grid,.prijs-blokken,
  .carwash-grid,.pagina-grid{grid-template-columns:1fr;gap:36px}
  .les-grid,.review-grid,.groep-grid,.partner-grid{grid-template-columns:repeat(2,1fr)}
  .abo-grid{grid-template-columns:1fr}
  .extra-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .disc-grid{grid-template-columns:1fr;gap:1px}
  .disc img{aspect-ratio:5 / 4}
  /* smallere kaart, dus het doek onder de tekst mag zwaarder */
  .disc::after{background:linear-gradient(180deg,rgba(10,9,8,.12) 0%,rgba(10,9,8,.72) 42%,rgba(10,9,8,.97) 100%)}
  .disc-tekst{padding:22px 20px 20px}
  .waarde-beeld{position:static}
  /* de banner toont eerst het beeld, dan pas de tekst */
  .proef-citaat{position:static;left:auto;margin-top:14px}
  .reviews-kop{align-items:flex-start}
  /* een kolom die omklapt naar volle breedte krijgt anders regels van
     ruim honderd tekens, en dat leest niet meer prettig. */
  .pagina-grid .tekst p,.pagina-grid .tekst li,.pagina-hero-inner .lede{max-width:66ch}
}

@media (max-width:860px){
  .nav-links{display:none}
  .nav .knop{display:none}
  .nav-toggle{display:flex;margin-left:auto}
  .mobiel-balk{display:block}
  body{padding-bottom:88px}

  /* subpagina-banner: het beeld staat boven de tekst in plaats van erachter,
     zodat je op een telefoon eerst de zaal ziet en daarna leest. */
  .pagina-hero{display:flex;flex-direction:column}
  .pagina-hero img{
    position:static;height:min(54vw,260px);
    filter:contrast(1.12) saturate(.5) brightness(.82) grayscale(.2);
  }
  .pagina-hero::after{
    bottom:auto;height:min(54vw,260px);
    background:linear-gradient(180deg,rgba(10,9,8,.15) 45%,rgba(10,9,8,.92));
  }
  .pagina-hero-inner{padding-top:26px}
}

@media (max-width:720px){
  .wrap{padding:0 18px}
  /* padding-block, nooit de shorthand: .sectie zit ook op .wrap-elementen en
     een 0 in de shorthand haalt daar stil de zijkant weg. */
  .sectie{padding-block:56px 60px}
  .kop{margin-bottom:30px;gap:11px}
  h2{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .kop p,.hero-sub{font-size:.98rem}
  .nav-inner{height:56px}
  .merk{font-size:1.4rem;gap:9px}
  .merk img{height:26px;width:26px}
  .mobiel-menu{padding-inline:18px}
  .wa-knop{display:none}

  /* de banner blijft schermvullend, de tekst zakt naar de onderkant */
  .hero{min-height:calc(100svh - 57px);align-items:flex-end}
  .hero-foto{object-position:52% 46%}
  .hero::after{
    background:
      linear-gradient(180deg,rgba(10,9,8,.6) 0%,rgba(10,9,8,.28) 26%,rgba(10,9,8,.86) 62%,rgba(10,9,8,.97) 100%);
  }
  .hero-inhoud{padding-block:0 40px}
  h1{font-size:clamp(2.6rem,13vw,3.6rem)}
  .hero-eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:14px}
  .hero-acties{margin-top:24px}
  .hero-acties .knop{flex:1 1 100%;justify-content:center}
  .hero-knoppen{margin-top:26px;align-items:stretch;gap:12px}
  .knop-start{width:100%;font-size:1.6rem;padding:18px 20px;gap:20px}
  .knop-duo{display:grid;grid-template-columns:1fr 1fr}
  .knop-duo a{text-align:center;padding:13px 10px;font-size:10.5px}
  .slot .hero-knoppen{align-items:stretch}
  .hero-onder{flex-direction:column;gap:7px;margin-top:22px;font-size:10px}

  /* bewijsbalk: randen tot de schermrand, tekst op dezelfde kantlijn */
  .balk-inner{display:grid;grid-template-columns:1fr 1fr;margin-inline:-18px}
  .balk-item{padding:15px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
  .balk-item:nth-child(2n){border-right:none}
  .balk-item:nth-last-child(-n+2){border-bottom:none}
  .balk-item b{font-size:1.2rem}
  .balk-item span{font-size:9.5px;letter-spacing:.14em}

  /* stappen: het nummer boven de titel, alles op de kantlijn */
  .stap{grid-template-columns:1fr;gap:2px;padding:17px 0}
  .stap-nr{padding-top:0;font-size:11px}
  .stap h3{font-size:1rem}

  /* lessen, reviews, drempel: kaarten lopen door tot de schermrand, zodat de
     tekst erin op dezelfde kantlijn staat als de koppen erboven */
  .groep-grid,.partner-grid,.ere-grid{grid-template-columns:1fr;gap:16px}
  .extra-grid{grid-template-columns:1fr;gap:30px}
  .incasso{grid-template-columns:1fr}
  .abo{padding:26px 22px 24px}
  .les-grid,.drempel-grid,.review-grid{grid-template-columns:1fr;margin-inline:-18px}
  .drempel-grid,.review-grid{border-left:0;border-right:0}
  .les,.drempel-kaart,.review{padding:24px 18px}
  .les{min-height:0}
  .les h3{font-size:1.3rem}
  .les-tag{padding-right:26px}
  .les-pijl{position:static;align-self:flex-end;margin-top:-27px;line-height:17px;font-size:13px}
  .drempel-kaart h3{font-size:1.25rem}
  .reviews-kop{margin-bottom:28px}
  .review-grid{border-top:1px solid var(--border)}

  /* wedstrijdteam */
  .team-beelden img{height:min(60vw,300px)}
  .team-rij,.prak-rij{grid-template-columns:1fr;gap:3px;padding:13px 0}
  .team-kaart{padding:22px 18px}
  .team-eis{letter-spacing:.1em;line-height:1.75}
  .team-kaart .bedrag{font-size:2.2rem}

  /* rooster: per dag een blok, tijden onder elkaar in een vaste kolom */
  .week{grid-template-columns:1fr;border:none;gap:10px;background:none}
  .dag{min-height:0;border:1px solid var(--border)}
  .dag-kop{padding:11px 16px}
  .vandaag-vlag{padding:8px 16px 0}
  .les-blok{display:grid;grid-template-columns:46px 1fr;align-items:baseline;gap:14px;padding:11px 16px}
  .les-blok time{font-size:11.5px}
  .les-blok b{font-size:.9rem}
  .leeg{display:none}
  .legenda{gap:7px 18px}
  .rooster-balk{flex-direction:column;align-items:stretch;gap:18px}
  .rooster-knoppen .knop{flex:1 1 100%;justify-content:center}

  /* prijzen: van tabel naar leesbare rijen */
  .prijstabel thead{display:none}
  .prijstabel,.prijstabel tbody,.prijstabel tr,.prijstabel td{display:block;width:100%}
  .prijstabel tr{border-bottom:1px solid var(--border);padding:14px 0 13px}
  .prijstabel td{border:none;padding:0}
  .prijstabel td:first-child{font-weight:600;margin-bottom:7px}
  .prijstabel caption{display:block;padding-bottom:14px}
  .prijstabel td.num{
    display:inline-flex;align-items:baseline;gap:8px;text-align:left;width:auto;
    margin-right:22px;color:var(--txt-2);font-size:.9rem;
  }
  .prijstabel td.num::before{
    content:attr(data-kop);font-family:var(--mono);font-size:9px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--txt-3);
  }
  .prijstabel tr.uit td{background:none}
  .prijstabel tr.uit td:first-child{box-shadow:none}
  /* het uitgelichte vlak loopt door tot de rand, de tekst blijft op de kantlijn */
  .prijstabel tr.uit{
    box-shadow:inset 2px 0 0 var(--lime);background:rgba(191,255,0,.05);
    margin-inline:-18px;padding-inline:18px;
  }
  .mini{display:inline-block;margin:5px 0 0 0}
  .zij + .zij{margin-top:26px}

  /* proefformulier */
  .proefform{grid-template-columns:1fr;gap:12px;margin-top:22px}
  .proefform-ok{padding:18px}

  /* subpagina's: hero-tekst op dezelfde kantlijn als de tekst eronder */
  .pagina-hero-inner{padding-inline:18px}
  .pagina-slot{padding-inline:18px}
  .pagina-grid{gap:34px}
  .tekst h2{font-size:clamp(1.6rem,6.6vw,2rem)}
  .punten li{padding-left:24px}
  .zijkaart{padding:22px 18px}
  .sectie-lede{margin-bottom:28px}
  .map-embed{margin:36px -18px 0;width:calc(100% + 36px)}

  /* beeld en slot */
  .waarde-beeld img,.prak-beeld img,.proef-beeld img{height:min(64vw,320px)}
  .waarde-rij{grid-template-columns:20px 1fr;gap:12px}
  .proef-citaat{padding:16px 18px}
  .slot{padding:64px 0 70px}
  .slot-ghost{font-size:36vw}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-onder{justify-content:flex-start;gap:8px 16px;margin-top:32px}
  .partners-label{text-align:left;padding-inline:18px}
  .partners-spoor{gap:36px}
  .partners-spoor img{width:96px}
  .carwash-zegel{padding:22px 18px}
  .carwash-zegel strong{font-size:2.4rem}
}

@media (max-width:400px){
  .g-badge{padding:14px 16px;gap:12px}
  .mobiel-balk .knop{font-size:11px;padding:14px 12px;letter-spacing:.07em}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* kaart op de contactpagina */
.map-embed{
  display:block;width:100%;height:clamp(300px,42vw,440px);border:0;
  margin-top:52px;border:1px solid var(--border);filter:grayscale(1) contrast(1.1) invert(.92) hue-rotate(180deg);
}

/* fotoband onder de tekst van een lespagina */
.beeldband{padding-bottom:clamp(56px,8vw,96px)}
.beeldband-grid{display:grid;gap:12px}
.beeldband-grid[data-aantal="1"]{grid-template-columns:1fr}
.beeldband-grid[data-aantal="3"]{grid-template-columns:repeat(3,1fr)}
.beeldband figure{margin:0}
.beeldband img{
  width:100%;height:clamp(240px,30vw,420px);object-fit:cover;display:block;
  filter:contrast(1.1) saturate(.55) brightness(.86);
}
.beeldband-grid[data-aantal="3"] img{height:clamp(200px,22vw,300px)}
.beeldband figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);padding-top:9px;
}
@media (max-width:720px){
  .beeldband-grid[data-aantal="3"]{grid-template-columns:1fr}
  .beeldband img,.beeldband-grid[data-aantal="3"] img{height:min(62vw,300px)}
}