@charset "UTF-8";
/* HRC Rijbewijs - huisstijl. Kleuren uit het logo: oranje #E8822A, antraciet #23262B. */
/* ============================================================
   HRC RIJBEWIJS — site-mockup + merkkit
   Palet: oranje uit het logo (#E8822A), wit en lichtgrijs.
   Antraciet (#23262B, ook uit het logo) draagt de tekst.
   ============================================================ */

:root{
  color-scheme: light;

  --accent:       #E8822A;   /* logo-oranje — vlakken en knoppen */
  --accent-deep:  #CF6E19;   /* hover */
  --accent-text:  #A85510;   /* de enige oranje die als tekst op wit mag */
  --accent-wash:  #FCF1E6;
  --on-accent:    #23262B;   /* tekst ín een oranje vlak */

  --ink:          #23262B;   /* koppen — antraciet uit het logo */
  --ink-deep:     #14161A;
  --body:         #5A6067;
  --muted:        #868D95;

  --paper:        #FFFFFF;
  --surface:      #F7F8F8;
  --mist:         #EDEEEF;
  --line:         #DFE1E3;
  --line-soft:    #EFF0F1;

  --good:         #1A7A4F;
  --good-wash:    #EAF6F0;
  --error:        #C0392B;

  --radius:   10px;
  --radius-s: 7px;
  --shadow-s: 0 1px 2px rgba(35,38,43,.05), 0 2px 6px rgba(35,38,43,.05);
  --shadow-m: 0 2px 6px rgba(35,38,43,.06), 0 10px 26px rgba(35,38,43,.08);
  --maxw: 1120px;

  --f-head: "Archivo", "Segoe UI", Arial, sans-serif;
  --f-body: "Open Sans", "Segoe UI", Arial, sans-serif;
}

/* Deze site is bewust altijd licht — ook als de bezoeker zijn
   telefoon of browser op donker heeft staan. Er is dus geen
   donkere variant; `color-scheme: light` hierboven zorgt er ook
   voor dat invoervelden en scrollbars licht blijven. */

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--f-head);
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
a{ color: var(--accent-text); }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* height:auto is nodig: zonder dat houdt de browser het height-attribuut
   van de afbeelding aan terwijl de breedte krimpt — dan rekt de foto uit. */
img{ max-width:100%; height:auto; display:block; }

.wrap{
  width:100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- basisonderdelen ---------- */
.eyebrow{
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 10px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .97rem;
  padding: 13px 24px;
  border-radius: var(--radius-s);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Witte knoptekst op het logo-oranje: bewuste keuze van de opdrachtgever.
   Let op: wit op #E8822A haalt 2,7:1 en blijft daarmee onder de WCAG-norm
   van 4,5:1. Wordt de leesbaarheid buiten een probleem, dan is het oranje
   verdiepen naar #B35E13 de oplossing — dan haalt wit 4,6:1. */
.btn--primary{ background: var(--accent); color: #fff; }
.btn--primary:hover{ background: var(--accent-deep); }
.btn--dark{ background: var(--ink); color: var(--paper); }
.btn--dark:hover{ background: var(--ink-deep); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--ink); }
.btn--block{ width:100%; }

.todo{
  display:inline-block;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1.5px dashed var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* foto's uit de huidige site */
.photo{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-m); }
.photo img{ width:100%; height:auto; }

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  color: var(--body);
  font-size: .81rem;
}
.topbar__in{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px; padding-block: 8px; }
.topbar a{ color: var(--ink); text-decoration:none; font-weight:700; }
.topbar a:hover{ color: var(--accent-text); }
.topbar__end{ margin-left:auto; }

.siteheader{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.siteheader__in{ display:flex; align-items:center; gap:16px; padding-block: 13px; position:relative; }
.brandmark img{ height: 36px; width:auto; }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a{
  font-weight:600; font-size:.93rem;
  color: var(--ink); text-decoration:none;
  padding: 8px 12px; border-radius: 6px;
}
.nav a:hover{ color: var(--accent-text); background: var(--surface); }
.nav a.is-active{ color: var(--accent-text); }
.siteheader .btn{ padding: 10px 18px; font-size:.9rem; }

.navtoggle{
  display:none; margin-left:auto;
  background: var(--surface); border:1px solid var(--line);
  border-radius: 7px; padding: 9px 13px; cursor:pointer;
  font-family: var(--f-head); font-weight:700; font-size:.85rem; color: var(--ink);
}

/* ============================================================
   HERO
   ============================================================ */
/* De bestaande herofoto blijft, maar onder een witte sluier zodat
   de pagina licht blijft en de tekst leesbaar is. */
.hero{
  background-image:
    linear-gradient(100deg,
      rgba(255,255,255,.975) 0%,
      rgba(255,255,255,.95) 36%,
      rgba(255,255,255,.74) 56%,
      rgba(255,255,255,.42) 100%),
    url("img/hero.jpg");
  background-size: cover;
  background-position: 72% 38%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}
.startgrid{ display:grid; grid-template-columns: 1fr 360px; gap: 48px; align-items:center; }
.hero__in{
  display:grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items:center;
  padding-block: 58px 62px;
}
.hero h1{
  font-size: clamp(2.05rem, 4.2vw, 3.1rem);
  font-weight: 800;
  margin-bottom: 18px;
}
.hero__lead{ font-size: 1.08rem; max-width: 50ch; margin-bottom: 26px; }
.hero__lead strong{ color: var(--ink); }
.hero__cta{ display:flex; flex-wrap:wrap; gap: 11px; }

.herocard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-m);
  padding: 26px;
}
.herocard h2{ font-size: 1.35rem; font-weight:800; color: var(--accent-text); margin-bottom: 6px; }
.herocard > p{ font-size:.92rem; margin-bottom: 18px; }
.facts{ display:grid; gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-s); overflow:hidden; margin-bottom: 18px; }
.facts div{ background: var(--paper); padding: 13px 16px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.facts .k{ font-size:.8rem; color: var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.facts .v{ font-family: var(--f-head); font-weight:800; color: var(--ink); font-size:1.02rem; margin:0; }

/* ============================================================
   SECTIES
   ============================================================ */
.section{ padding-block: 64px; }
.section--tint{ background: var(--surface); border-block: 1px solid var(--line); }
.section--mist{ background: var(--mist); border-block: 1px solid var(--line); }

.section__head{ max-width: 60ch; margin-bottom: 36px; }
.section__head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 12px; }
.section__head p{ font-size: 1.04rem; }

.prose{ max-width: 68ch; }
.prose p{ margin-bottom: 1.1em; }

.split{ display:grid; grid-template-columns: 1fr 340px; gap: 48px; align-items:start; }
.sidecard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-s);
}
.sidecard .amount{
  font-family: var(--f-head); font-weight:800;
  font-size: 2.6rem; color: var(--ink); line-height:1;
  font-variant-numeric: tabular-nums;
}
.sidecard .amount small{ font-size:.34em; color: var(--muted); font-weight:700; }
.sidecard h3,
.sidecard h2{ font-size:1.05rem; font-weight:800; margin-bottom: 8px; }
.sidecard p{ font-size:.92rem; }
.sidecard hr{ border:0; border-top:1px solid var(--line); margin: 18px 0; }

.pill{
  display:inline-block; background: var(--accent-wash); color: var(--accent-text);
  border-radius: 999px; padding: 4px 13px;
  font-size:.8rem; font-weight:700;
}

.reasons{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: 4px 44px; }
.reasons li{
  display:grid; grid-template-columns: 24px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.reasons li::before{
  content: "\2713 "; color: var(--accent-text); font-weight:700; font-size:1.05rem; line-height:1.5;
}
.reasons b{ display:block; font-family: var(--f-head); color: var(--ink); font-size:1rem; font-weight:700; }
.reasons p{ margin:2px 0 0; font-size:.94rem; }

.ctaband{
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 30px 32px;
  display:flex; flex-wrap:wrap; align-items:center; gap: 22px;
}
.ctaband h2{ font-size: 1.45rem; font-weight:800; margin-bottom: 6px; }
.ctaband div{ flex:1 1 320px; }
.ctaband p{ font-size:.97rem; }

/* formulier */
.formwrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.formcard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-m);
}
.field{ margin-bottom: 14px; }
.field label{ display:block; font-size:.8rem; font-weight:700; color: var(--ink); margin-bottom: 5px; }
.field input, .field textarea, .field select{
  width:100%; font: inherit; font-size:.96rem;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: 11px 13px;
}
.field input:hover, .field textarea:hover, .field select:hover{ border-color: var(--muted); }
.field input::placeholder, .field textarea::placeholder{ color: var(--muted); }
.checkrow{ display:flex; gap:11px; align-items:flex-start; margin: 4px 0 16px; }
.checkrow input{ width:19px; height:19px; accent-color: var(--accent); margin-top:3px; flex:none; }
.checkrow label{ font-size:.93rem; color: var(--ink); font-weight:600; }
.formnote{ font-size:.79rem; color: var(--muted); margin: 12px 0 0; }
.formdone{
  background: var(--good-wash); border:1.5px solid var(--good);
  border-radius: var(--radius-s); padding: 18px;
}
.formdone strong{ display:block; font-family: var(--f-head); color: var(--good); font-size:1.08rem; margin-bottom:4px; }
.formdone p{ margin:0; font-size:.9rem; }

/* instructeur */
.mich{ display:grid; grid-template-columns: 320px 1fr; gap: 48px; align-items:start; }
.mich__photo{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-m); }
.mich__photo img{ width:100%; height:auto; aspect-ratio: 480 / 478; object-fit: cover; }
.mich__quote{
  font-family: var(--f-head); font-weight:600;
  font-size: 1.22rem; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: 18px;
  margin: 0 0 26px; line-height:1.45;
}
.qa{ display:grid; gap: 22px; }
.qa h3{ font-size:1.02rem; font-weight:800; color: var(--accent-text); margin-bottom: 4px; }
.qa p{ font-size:.97rem; }

/* beoordelingen — sterren zijn SVG, zodat 4,4 ook echt als 4,4 vult */
.starsvg{ display:block; width: 78px; height: 15.6px; flex:none; }
.starsvg--lg{ width: 100px; height: 20px; }

.ratings{ display:flex; flex-wrap:wrap; gap: 16px 36px; margin-top: 28px; }
.rating{ text-decoration:none; display:block; }
.rating__top{ display:flex; align-items:center; gap: 10px; }
.rating__score{
  font-family: var(--f-head); font-weight:800; font-size: 1.4rem;
  color: var(--ink); line-height:1; font-variant-numeric: tabular-nums;
}
.rating__max{ font-size:.85rem; color: var(--muted); font-weight:700; }
.rating__meta{
  display:flex; align-items:center; gap: 6px; flex-wrap:wrap;
  font-size:.8rem; color: var(--body); margin-top: 7px;
}
.rating__meta b{ color: var(--ink); font-weight:700; }
.rating__meta svg{ width:14px; height:14px; }
.rating:hover .rating__score{ color: var(--accent-text); }
.rating:hover .rating__meta b{ color: var(--accent-text); }

.scores{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 24px; }
.scorecard{
  background: var(--paper); border:1px solid var(--line);
  border-top: 4px solid var(--accent); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-s);
}
.scorecard__top{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.scorecard__num{
  font-family: var(--f-head); font-weight:800; font-size: 2.5rem;
  color: var(--ink); line-height:1; font-variant-numeric: tabular-nums;
}
.scorecard__num small{ font-size:.34em; color: var(--muted); font-weight:700; }
.scorecard h3{ font-size:1.02rem; font-weight:800; margin-bottom: 2px; }
.scorecard__meta{ font-size:.86rem; color: var(--muted); margin: 8px 0 0; }
.scorecard a{ color: var(--accent-text); font-weight:700; text-decoration:none; font-size:.87rem; }
.scorecard a:hover{ text-decoration:underline; }
.subscores{ display:grid; gap: 9px; margin: 18px 0 0; }
.subscore{ display:grid; grid-template-columns: 124px 1fr 30px; gap: 12px; align-items:center; font-size:.85rem; }
.subscore .bar{ height: 6px; border-radius: 99px; background: var(--mist); }
.subscore .bar i{ display:block; height:100%; border-radius:99px; background: var(--accent); }
.subscore b{ text-align:right; color: var(--ink); font-variant-numeric: tabular-nums; }

.quotes{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.quote{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.quote p{ color: var(--ink); font-size:.95rem; }
.quote footer{ font-size:.78rem; color: var(--muted); margin-top: 12px; }

/* geslaagden — oneindige carrousel. De track bevat de kaarten twee keer;
   hij schuift precies één set op en springt dan naadloos terug. */
.marquee{ position: relative; overflow: hidden; --gap: 18px; }
.marquee::before, .marquee::after{
  content: ""; position:absolute; top:0; bottom:0; width: 80px; z-index: 2; pointer-events:none;
}
.marquee::before{ left:0;  background: linear-gradient(90deg,  var(--paper), rgba(255,255,255,0)); }
.marquee::after{  right:0; background: linear-gradient(270deg, var(--paper), rgba(255,255,255,0)); }
.marquee__track{
  display:flex; gap: var(--gap); width: max-content;
  animation: gradslide 48s linear infinite;
}
.marquee__group{ display:flex; gap: var(--gap); }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state: paused; }
@keyframes gradslide{
  from{ transform: translateX(0); }
  to{   transform: translateX(calc(-50% - var(--gap) / 2)); }
}
@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x: auto; }
}

.grad{ width: 228px; flex: none; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.grad__ph{
  aspect-ratio: 4 / 5; background: var(--mist);
  display:grid; place-items:center; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.grad__ph svg{ width: 44px; height: 44px; opacity:.5; }
.grad__ph span{ font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; margin-top:8px; }
.grad__body{ padding: 15px 17px 17px; }
.grad__name{ font-family: var(--f-head); font-weight:800; color: var(--ink); font-size:1rem; line-height:1.3; }
.grad__date{ font-size:.77rem; color: var(--muted); margin-bottom: 9px; }
.grad__quote{ font-size:.89rem; margin: 0; }

/* FAQ */
.faq{ max-width: 780px; }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:16px;
  padding: 18px 0;
  font-family: var(--f-head); font-weight:700; font-size: 1.05rem; color: var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content: "+"; margin-left:auto; flex:none; font-size:1.4rem; color: var(--accent-text); line-height:1; }
.faq details[open] summary::after{ content: "\2013 "; }
.faq details > div{ padding: 0 0 20px; max-width: 66ch; }

/* contact */
.contactgrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.contactlist{ list-style:none; margin: 22px 0 0; padding:0; }
.contactlist li{
  display:grid; grid-template-columns: 104px 1fr; gap:16px;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size:.97rem;
}
.contactlist .k{ color: var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; padding-top:3px; }
.contactlist a{ color: var(--ink); text-decoration:none; font-weight:700; }
.contactlist a:hover{ color: var(--accent-text); }

/* werkgebied */
.places{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 4px; }
.places span{
  display:inline-block;
  background: var(--paper); border:1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; color: var(--ink); font-size:.9rem; font-weight:600;
}
.places span.is-home{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* footer */
.sitefooter{ background: var(--mist); border-top: 1px solid var(--line); font-size:.92rem; }
.sitefooter__in{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-block: 44px 34px; }
.sitefooter h2{ font-family: var(--f-head); color: var(--ink); font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; font-weight:800; margin-bottom: 12px; }
.sitefooter ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.sitefooter a{ color: var(--body); text-decoration:none; }
.sitefooter a:hover{ color: var(--accent-text); }
.sitefooter img{ height: 34px; width:auto; margin-bottom: 14px; }
.footbottom{
  border-top: 1px solid var(--line); padding-block: 16px 22px;
  display:flex; flex-wrap:wrap; gap: 8px 24px; font-size:.82rem; color: var(--muted);
}

/* social — Facebook, Instagram, mail, telefoon.
   Staat bewust ná .topbar a en .sitefooter a: die zetten een eigen
   kleur op elke link en zouden anders de witte icoonkleur overschrijven
   (antraciet icoon op een antraciet rondje = onzichtbaar). */
.social{ display:flex; gap:7px; align-items:center; }
.topbar .social a,
.sitefooter .social a,
.social a{
  width: 30px; height: 30px; border-radius: 50%;
  display:grid; place-items:center;
  background: var(--ink); color: #fff;
  transition: background-color .15s ease, color .15s ease;
}
.topbar .social a:hover,
.sitefooter .social a:hover,
.social a:hover{ background: var(--accent); color: var(--on-accent); }
.social svg{ width: 15px; height: 15px; display:block; }
.social--lg a{ width: 36px; height: 36px; }
.social--lg svg{ width: 17px; height: 17px; }

/* mobiele actiebalk */
.mobilebar{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index:70;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  gap: 9px; box-shadow: 0 -4px 18px rgba(35,38,43,.1);
}
.mobilebar .btn{ flex:1; padding: 12px 8px; font-size:.9rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px){
  .hero__in{ grid-template-columns: 1fr; gap: 34px; padding-block: 42px 48px; }
  /* smal scherm: de foto staat onder de tekst, dus sluier dichttrekken */
  .hero{
    background-image:
      linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.96)),
      url("img/hero.jpg");
    background-position: center 30%;
  }
  .split, .formwrap, .mich, .contactgrid, .startgrid{ grid-template-columns: 1fr; gap: 32px; }
  .scores, .quotes{ grid-template-columns: 1fr; }
  .mich__photo{ max-width: 300px; }
  .reasons{ grid-template-columns: 1fr; gap: 0; }
  .sitefooter__in{ grid-template-columns: 1fr 1fr; }
  .nav{ display:none; }
  .navtoggle{ display:block; }
  .nav.is-open{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; left:0; right:0; top:100%;
    background: var(--paper); border-bottom:1px solid var(--line);
    padding: 8px 20px 16px; gap:2px; margin:0; box-shadow: var(--shadow-m);
  }
  .siteheader .btn{ display:none; }
  .mobilebar{ display:flex; }
  body{ padding-bottom: 70px; }
  .section{ padding-block: 48px; }
}

@media (max-width: 600px){
  body{ font-size: 16px; }
  .sitefooter__in{ grid-template-columns: 1fr; }
  .topbar__end{ margin-left:0; }
  .ctaband{ padding: 24px; }
  .formcard, .sidecard, .herocard{ padding: 20px; }
  .hero__cta .btn{ flex:1; }
}

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


/* ---------- tarievenlijst ---------- */
.pricelist{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--paper); }
.pricerow{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding: 13px 20px; border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.pricerow:last-child{ border-bottom:0; }
.pricerow span:first-child{ color: var(--ink); }
.pricerow b{ font-family: var(--f-head); font-weight:800; color: var(--ink); white-space:nowrap; }
.pricerow.is-highlighted{ background: var(--accent-wash); }
.pricerow.is-highlighted b{ color: var(--accent-text); }

/* ---------- diensten ---------- */
.services{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.service{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  border-top: 4px solid var(--accent); padding: 26px; display:flex; flex-direction:column;
}
.service h3{ font-size:1.2rem; font-weight:800; margin-bottom: 8px; }
.service__price{
  display:inline-block; background: var(--accent-wash); color: var(--accent-text);
  border-radius: 999px; padding: 4px 13px; font-size:.82rem; font-weight:700; margin-bottom: 12px;
  align-self: flex-start;
}
.service p{ font-size:.95rem; }
.service .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- stappenplan ---------- */
.steps{ list-style:none; counter-reset: step; margin:0; padding:0; display:grid; gap: 14px; }
.steps li{
  counter-increment: step; display:grid; grid-template-columns: 34px 1fr; gap:16px;
  align-items:center; font-size:.97rem;
}
.steps li::before{
  content: counter(step);
  width:34px; height:34px; border-radius:50%;
  background: var(--accent); color: var(--on-accent);
  display:grid; place-items:center;
  font-family: var(--f-head); font-weight:800; font-size:.95rem;
}

/* ---------- geslaagdenfoto's ---------- */
.grad__ph{ background: var(--mist) center/cover no-repeat; }

/* ---------- foutmeldingen ---------- */
.field-error{ color:#C0392B; font-size:.82rem; margin-top:5px; font-weight:600; }
.field input.is-invalid, .field textarea.is-invalid{ border-color:#C0392B; }

@media (max-width: 940px){
  .services{ grid-template-columns: 1fr; }
}

/* ---------- correcties ---------- */
/* De prijspil staat in een kolom-flexbox; zonder dit rekt hij over de
   volle breedte uit omdat align-items standaard op stretch staat. */
.service__price{ align-self: flex-start; }

/* ---------- hover op de hoofdknop ---------- */
/* De knop komt iets omhoog, krijgt een warme schaduw en er schuift een
   pijl uit. De pijl staat er standaard niet, zodat de knop in rust
   rustig blijft. */
.btn--primary{
  position: relative;
  transition: background-color .16s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--primary::after{
  content: "\2192 ";
  display: inline-block;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: max-width .22s ease, opacity .18s ease, margin-left .22s ease, transform .22s ease;
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 130, 42, .38);
}
.btn--primary:hover::after{
  max-width: 1.4em;
  opacity: 1;
  margin-left: 9px;
  transform: translateX(0);
}
.btn--primary:active{
  transform: translateY(0);
  box-shadow: none;
}
.btn--primary:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 130, 42, .38);
}

/* In de vaste balk onderaan op mobiel geen lift, dat oogt onrustig. */
.mobilebar .btn--primary:hover{ transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce){
  .btn--primary:hover{ transform: none; box-shadow: none; }
  .btn--primary::after{ display: none; }
}

/* Witte tekst op alle oranje vlakken, gelijk aan de knoppen. */
.steps li::before{ color: #fff; }
.places span.is-home{ color: #fff; }

/* In het stappenblok was de rechterkaart twee keer zo hoog als de stappen
   ernaast, wat een gat linksonder opleverde. Gelijke kolommen laten de
   tekst breder lopen, waardoor de kaart korter wordt en de twee blokken
   elkaar in hoogte benaderen. */
#rijopleiding .split{ grid-template-columns: 1fr 1fr; align-items: start; }

@media (max-width: 940px){
  #rijopleiding .split{ grid-template-columns: 1fr; }
}

/* Het open/dicht-teken was een en-streepje, dat als los teken snel
   verkeerd gedecodeerd wordt. Nu blijft het een plus die 45 graden
   draait en daarmee een kruisje wordt. Scheelt een teken en het
   beweegt netjes mee. */
.faq summary::after{
  content: "+";
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), color .2s ease;
  transform-origin: 50% 50%;
  line-height: 1;
}
.faq details[open] summary::after{
  content: "+";
  transform: rotate(45deg);
}
.faq summary:hover::after{ color: var(--accent); }

@media (prefers-reduced-motion: reduce){
  .faq summary::after{ transition: none; }
}

/* ---------- hero: foto weer zichtbaar ---------- */
/* De oude sluier liep tot 42% dekking aan de rechterkant, precies waar het
   witte proefleskaartje staat. Daardoor was er van de foto niets te zien.
   Nu dekt de sluier alleen nog de linkerhelft af, waar de tekst staat, en
   blijft de foto rechts open. De hero is hoger zodat de foto ook boven en
   onder het kaartje zichtbaar is. */
.hero{
  background-image:
    linear-gradient(95deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.94) 26%,
      rgba(255,255,255,.62) 44%,
      rgba(255,255,255,.20) 62%,
      rgba(255,255,255,.06) 100%),
    url("/img/hero.jpg");
  background-size: cover;
  background-position: 72% 32%;
}
.hero__in{ min-height: 520px; align-items: center; }

@media (max-width: 940px){
  /* Smal scherm: tekst staat boven de foto, dus hier moet de sluier wel
     dicht. Net licht genoeg om de auto te herkennen. */
  .hero{
    background-image:
      linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.94)),
      url("/img/hero.jpg");
    background-position: center 28%;
  }
  .hero__in{ min-height: 0; }
}

/* De herofoto is opnieuw bijgesneden naar 1600x744 met het onderwerp
   rechts, zodat de tekst links vrij blijft. Daardoor kan de sluier
   lichter en komt de foto beter uit. */
.hero{ background-position: center 35%; }
@media (max-width: 940px){
  .hero{ background-position: 62% center; }
}

/* ---------- zwevende WhatsApp-knop ---------- */
/* Oranje cirkel met het witte WhatsApp-teken. Op desktop schuift er een
   label uit bij hover; op mobiel staat hij boven de vaste actiebalk. */
.wa{
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 20px rgba(35, 38, 43, .22);
  transition: transform .2s ease, box-shadow .2s ease, background-color .16s ease;
}
.wa:hover{
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(232, 130, 42, .42);
}
.wa__icon{
  flex: none;
  width: 58px; height: 58px;
  display: grid; place-items: center;
}
.wa__icon svg{ width: 32px; height: 32px; display: block; }
.wa__label{
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .26s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding-left .26s ease;
}
.wa:hover .wa__label,
.wa:focus-visible .wa__label{
  max-width: 11rem;
  opacity: 1;
  padding-left: 20px;
}

@media (max-width: 940px){
  /* boven de vaste balk onderaan */
  .wa{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  .wa__icon{ width: 52px; height: 52px; }
  .wa__icon svg{ width: 28px; height: 28px; }
  .wa__label{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .wa:hover{ transform: none; }
  .wa__label{ transition: none; }
}

/* De looptijd komt uit de template (vier seconden per kaart), zodat de
   snelheid gelijk blijft als er geslaagden bij komen. 60s is de terugval
   als de variabele om wat voor reden dan ook niet gezet is. */
.marquee__track{ animation-duration: var(--marquee-duration, 60s); }

/* ---------- beoordelingen ---------- */
.scorebar{
  display:flex; flex-wrap:wrap; align-items:center; gap: 16px 34px;
  background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius); padding: 18px 24px; margin-bottom: 26px;
}
.scorebar__main{ display:flex; align-items:baseline; gap: 10px; }
.scorebar__num{
  font-family: var(--f-head); font-weight:800; font-size: 2.1rem;
  color: var(--ink); line-height:1; font-variant-numeric: tabular-nums;
}
.scorebar__max{ font-size:.85rem; color: var(--muted); font-weight:600; }
.scorebar__links{ display:flex; flex-wrap:wrap; gap: 10px 28px; margin-left:auto; }
.scorebar__links a{ text-decoration:none; color: var(--body); font-size:.88rem; }
.scorebar__links a b{
  font-family: var(--f-head); font-weight:800; font-size:1.05rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.scorebar__links a span{ display:block; font-size:.75rem; color: var(--muted); margin-top:2px; }
.scorebar__links a:hover b{ color: var(--accent-text); }

/* De kaarten worden door het raster even hoog. Zonder dit zakt de tekst
   naar boven en blijft er een gat onder korte reviews staan: de naam
   hoort onderaan vast te zitten. */
.quote{ display:flex; flex-direction:column; margin:0; }
.quote blockquote{ margin:0; flex:1; color: var(--ink); font-size:.95rem; line-height:1.65; }
.quote figcaption{
  display:flex; align-items:center; gap: 11px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.quote__avatar{
  flex:none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-text);
  display:grid; place-items:center;
  font-family: var(--f-head); font-weight:800; font-size:.88rem;
  text-transform: uppercase;
}
.quote__who{ display:flex; flex-direction:column; line-height:1.35; }
.quote__name{ color: var(--ink); font-weight:700; font-size:.87rem; }
.quote__grade{ font-size:.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 940px){
  .scorebar__links{ margin-left:0; }
}

/* ---------- paginakop op de binnenpagina's ---------- */
.pagehead{
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: 48px 44px;
}
.pagehead h1{
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  margin-bottom: 14px;
}
.pagehead__lead{
  font-size: 1.08rem;
  max-width: 62ch;
  margin: 0;
}

/* ---------- logo's in de scorebalk ---------- */
.scorebar__head{ display:flex; align-items:center; gap: 8px; }
.pflogo{ width: 17px; height: 17px; flex: none; display:block; }
.scorebar__links a span:last-child{ padding-left: 25px; }
@media (max-width: 600px){
  .scorebar__links a span:last-child{ padding-left: 0; }
}

/* ---------- correctie scorebalk ---------- */
/* .scorebar__links a span stond al eerder in dit bestand en heeft een
   hogere specificiteit dan .scorebar__head, waardoor het logo boven de
   tekst belandde in plaats van ernaast. Vandaar deze preciezere regels. */
.scorebar__links a > .scorebar__head{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--body);
  margin-top: 0;
}
.scorebar__links a > .scorebar__head > span{
  display: inline;
  font-size: inherit;
  color: inherit;
  margin: 0;
}
.scorebar__links a > span:last-child{
  display: block;
  padding-left: 25px;
  font-size: .75rem;
  color: var(--muted);
  margin-top: 3px;
}
@media (max-width: 600px){
  .scorebar__links a > span:last-child{ padding-left: 0; }
}

/* ---------- pijl op de knop als echt icoon ---------- */
/* Het tekstteken is vervangen door de arrow-right van Heroicons, als
   masker zodat hij automatisch de tekstkleur van de knop overneemt. */
.btn--primary::after{
  content: "";
  display: inline-block;
  width: 0;
  height: 1.05em;
  max-width: none;
  opacity: 0;
  margin-left: 0;
  overflow: visible;
  transform: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: width .22s cubic-bezier(.4,0,.2,1), opacity .18s ease, margin-left .22s cubic-bezier(.4,0,.2,1);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after{
  width: 1.05em;
  max-width: none;
  opacity: 1;
  margin-left: 10px;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .btn--primary::after{ display: none; }
}

/* ---------- scorebalk opnieuw: raster met gelijke cellen ---------- */
/* De vorige opzet waren twee losse flex-blokken die los van elkaar
   afbraken, wat rommelig oogde. Een raster met een lijn van 1px als
   gat geeft nette scheidingen, ook als de cellen naar een tweede rij
   wikkelen. */
.scorebar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 26px;
  padding: 0;
}
.scoreitem{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--paper);
  text-decoration: none;
  transition: background-color .15s ease;
}
a.scoreitem:hover{ background: var(--surface); }
.scoreitem__top{
  display: flex; align-items: center; gap: 7px;
  font-size: .79rem; font-weight: 700; color: var(--body);
}
.scoreitem__value{
  font-family: var(--f-head); font-weight: 800; font-size: 1.65rem;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.scoreitem__value small{ font-size: .48em; color: var(--muted); font-weight: 700; }
.scoreitem__label{ font-size: .75rem; color: var(--muted); }
a.scoreitem:hover .scoreitem__value{ color: var(--accent-text); }

/* ---------- pijl: geen layoutverschuiving meer ---------- */
/* De breedte animeren herberekent de layout, waardoor de hele regel
   meebewoog. Het pijltje staat nu altijd in de knop en schuift alleen
   op met transform, wat de layout niet raakt. */
.btn--primary::after{
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  max-width: none;
  margin-left: 9px;
  opacity: .85;
  overflow: visible;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after{
  width: 1.05em;
  margin-left: 9px;
  opacity: 1;
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce){
  .btn--primary::after{ display: inline-block; transition: none; }
  .btn--primary:hover::after{ transform: none; }
}

/* ---------- welkomsectie met de instructeur ernaast ---------- */
.welkom{ display:grid; grid-template-columns: 1fr 320px; gap: 52px; align-items: start; }
.introcard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
.introcard img{ width: 100%; height: auto; display: block; }
.introcard__body{ padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.introcard__label{
  font-family: var(--f-head); font-weight: 700;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-text);
}
.introcard__name{
  font-family: var(--f-head); font-weight: 800; font-size: 1.15rem;
  color: var(--ink); line-height: 1.2;
}
.introcard__meta{ font-size: .85rem; color: var(--muted); }
.introcard .btn{ margin-top: 16px; }

/* De chips waren ontworpen voor een donkere ondergrond; op wit hebben ze
   een lichte vulling en de donkerdere oranje tekst nodig om leesbaar te zijn. */
.certs--light{ margin-top: 14px; }
.certs--light li{
  background: var(--accent-wash);
  color: var(--accent-text);
  border-color: rgba(232, 130, 42, .35);
  font-size: .78rem;
  padding: 4px 11px;
}

@media (max-width: 940px){
  .welkom{ grid-template-columns: 1fr; gap: 32px; }
  .introcard{ max-width: 340px; }
}

/* ---------- kerngegevens instructeur ---------- */
/* Deze regels waren verdwenen bij het overzetten van de mockup, waardoor
   cijfer en label aan elkaar plakten. */
.creds{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-top: 28px;
}
.creds div{ background: var(--paper); padding: 16px 18px; }
.creds b{
  display: block; font-family: var(--f-head); font-weight: 800;
  font-size: 1.2rem; color: var(--ink); line-height: 1.2;
  font-variant-numeric: tabular-nums; margin-bottom: 2px;
}
.creds span{ display: block; font-size: .78rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 600px){ .creds{ grid-template-columns: 1fr; } }

/* ---------- tarieven: hoofdtarieven en groepen ---------- */
.pricecards{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 34px; }
.pricecard{
  background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--accent); border-radius: var(--radius);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-s);
}
.pricecard__name{ font-family: var(--f-head); font-weight: 700; font-size: 1rem; color: var(--ink); }
.pricecard__amount{
  font-family: var(--f-head); font-weight: 800; font-size: 2.6rem;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.pricecard__note{ font-size: .87rem; color: var(--muted); }

.pricegroups{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 30px; align-items: start; }
.pricegroup__title{
  font-family: var(--f-head); font-weight: 800; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: 10px;
}
.pricegroups .pricerow{ padding: 11px 16px; font-size: .93rem; }
.pricegroups .pricerow small{ color: var(--muted); font-size: .8rem; }
.pricenote{ font-size: .82rem; color: var(--muted); margin-top: 24px; max-width: 70ch; }

@media (max-width: 940px){
  .pricecards, .pricegroups{ grid-template-columns: 1fr; }
}

/* ---------- lijnknop: omgedraaid ---------- */
/* De donkere rand was voorheen alleen de hover-stand, maar leest beter
   op de herofoto. Die is nu de rusttoestand; bij hover vult de knop zich. */
.btn--ghost{
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------- iconen in de bovenbalk ---------- */
/* Alleen de directe kinderen, anders pakt deze regel ook de ronde
   social-knopjes die verderop in dezelfde balk staan. */
.topbar__in > a,
.topbar__in > .topbar__end{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topbar__in > a > svg,
.topbar__in > .topbar__end > svg{
  width: 15px;
  height: 15px;
  flex: none;
  opacity: .7;
}
.topbar__in > a:hover > svg{ opacity: 1; }

/* Lijnknop zonder vulling in rust: alleen de antracieten rand, zodat de
   herofoto erachter zichtbaar blijft. Bij hover vult hij wel. */
.btn--ghost{ background: transparent; }

/* ---------- specialisatie-chips ---------- */
/* De basisregels hiervoor waren verdwenen bij het overzetten van de
   mockup, waardoor het terugviel op een gewone opsomming met bolletjes. */
.certs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.certs li{
  background: var(--accent-wash);
  color: var(--accent-text);
  border: 1px solid rgba(232, 130, 42, .35);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- instructeurskaart zonder foto ---------- */
/* De portretfoto had een kunstmatige achtergrond; die prominent in een
   kaart zetten maakte dat alleen maar zichtbaarder. Nu een zakelijke
   gegevenskaart. De foto staat nog wel op de pagina Over Michael. */
.introcard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  overflow: visible;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.introcard__facts{
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin: 18px 0 0;
}
.introcard__facts > div{ background: var(--paper); padding: 11px 14px; }
.introcard__facts dt{
  font-size: .71rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.introcard__facts dd{
  margin: 3px 0 0; font-size: .9rem; color: var(--ink); font-weight: 600; line-height: 1.4;
}
.introcard .btn{ margin-top: 20px; }

/* De herofoto komt uit het beheerpaneel, met terugval op het meegeleverde
   bestand. Via een variabele zodat beide schermbreedtes hem oppikken. */
.hero{
  background-image:
    linear-gradient(95deg,
      rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 26%,
      rgba(255,255,255,.62) 44%, rgba(255,255,255,.20) 62%,
      rgba(255,255,255,.06) 100%),
    var(--hero-image, url("/img/hero.jpg"));
}
@media (max-width: 940px){
  .hero{
    background-image:
      linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.94)),
      var(--hero-image, url("/img/hero.jpg"));
  }
}

/* ---------- keuzelijst ---------- */
/* De uitgeklapte lijst wordt door het besturingssysteem getekend en is niet
   te stylen. De dichte staat wel, en dat is wat bezoekers zien. */
.field select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2323262B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 44px;
  cursor: pointer;
}
.field select:focus{ border-color: var(--accent); }
.field select:hover{ background-color: var(--surface); }

/* ---------- tariefgroep ---------- */
.pricegroup{ min-width: 0; }

/* ---------- geslaagden: moment op de foto ---------- */
/* Zonder naam of reactie kreeg een kaart een bijna lege strook eronder.
   Het jaartal staat nu op de foto zelf. */
.grad__ph{ position: relative; }
.grad__when{
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(35, 38, 43, .82);
  color: #fff;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  backdrop-filter: blur(3px);
}
.grad__when b{ font-weight: 700; opacity: .8; }
.grad__body{ padding: 14px 16px 16px; }
.grad__quote{ font-size: .87rem; color: var(--body); margin: 6px 0 0; line-height: 1.55; }

/* ---------- datum bij een beoordeling ---------- */
.quote__date{ font-size: .72rem; color: var(--muted); }

/* ---------- navigatie ---------- */
/* Geen grijs blokje meer maar een streep die vanuit het midden uitgroeit.
   De actieve pagina houdt die streep permanent. */
.nav a{
  position: relative;
  padding: 10px 14px;
  border-radius: 0;
  transition: color .18s ease;
}
.nav a::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.nav a:hover{
  background: transparent;
  color: var(--accent-text);
}
.nav a:hover::after{ transform: scaleX(1); }
.nav a.is-active{ color: var(--ink); }
.nav a.is-active::after{ transform: scaleX(1); }

@media (max-width: 940px){
  /* In het uitgeklapte menu werkt een streep niet; daar weer een vlak. */
  .nav.is-open a{ padding: 11px 12px; border-radius: 7px; }
  .nav.is-open a::after{ display: none; }
  .nav.is-open a:hover,
  .nav.is-open a.is-active{ background: var(--surface); color: var(--accent-text); }
}

@media (prefers-reduced-motion: reduce){
  .nav a::after{ transition: none; }
}

/* ---------- uitgelicht kader ---------- */
.callout{
  background: var(--accent-wash);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  padding: 18px 20px;
  margin-top: 22px;
}
.callout__title{
  font-family: var(--f-head); font-weight: 800; font-size: 1rem;
  color: var(--ink); margin-bottom: 6px;
}
.callout p{ font-size: .92rem; margin: 0; }

/* ---------- tussenkop ---------- */
.subhead{
  font-family: var(--f-head); font-weight: 800; font-size: 1.15rem;
  color: var(--ink); margin: 34px 0 10px;
}

/* ---------- social-iconen strak centreren ---------- */
/* place-items centreert de doos, maar een SVG met een stroke-pad ligt
   optisch niet altijd in het midden van zijn viewBox. line-height op 0
   haalt de laatste pixel eruit. */
.social a{ line-height: 0; }
.social svg{ display: block; margin: 0 auto; }

/* .sitefooter .social a heeft een hogere specificiteit dan .social--lg a,
   waardoor de footer-iconen op 30px bleven staan in plaats van 36px. */
.sitefooter .social--lg a{ width: 36px; height: 36px; }
.sitefooter .social--lg svg{ width: 17px; height: 17px; }

/* ---------- logo in de balk ---------- */
/* Een klein kantelingetje bij hover. Alleen transform beweegt, dus de
   koptekst eromheen blijft exact staan. */
.brandmark{
  display: inline-flex;
  transform-origin: 22% 60%;
  transition: transform .28s cubic-bezier(.34, 1.4, .64, 1);
  will-change: transform;
}
.brandmark:hover,
.brandmark:focus-visible{ transform: rotate(-2.5deg) scale(1.02); }
.brandmark:active{ transform: rotate(-1deg) scale(.99); }

@media (prefers-reduced-motion: reduce){
  .brandmark{ transition: none; }
  .brandmark:hover,
  .brandmark:focus-visible,
  .brandmark:active{ transform: none; }
}

/* ---------- stappen en praktische afspraken ---------- */
/* De stappenlijst loopt over de volle breedte in twee kolommen, de
   praktische afspraken staan eronder als kaarten van gelijke hoogte. */
.steps--wide{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 44px; }

.infogrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.infogrid .sidecard{ margin: 0; }
.infogrid h3{ margin: 0 0 8px; font-size: 1.05rem; }
.infogrid p{ margin: 0 0 10px; }
.infogrid p:last-child{ margin-bottom: 0; }

@media (max-width: 860px){
  .steps--wide{ grid-template-columns: 1fr; }
  .infogrid{ grid-template-columns: 1fr; }
}

/* ---------- scorebalk zonder leeg vak ---------- */
/* Het raster hield bij vijf cellen in drie kolommen een grijze cel over.
   Met flex groeien de cellen van de laatste rij mee tot de rij vol is.
   De scheidingslijnen zitten nu in een schaduw in plaats van in het gat
   tussen de cellen, zodat een halve rij niets grijs laat zien. */
.scorebar{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--paper);
}
.scorebar .scoreitem{
  flex: 1 1 170px;
  box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
}

/* ---------- kerngegevens naast elkaar ---------- */
.facts--row{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts--row div{ flex-direction: column; align-items: flex-start; gap: 5px; }

/* ---------- opsomming met vinkjes over de volle breedte ---------- */
/* Het vinkje staat als CSS-escape genoteerd, zodat het losstaat van de
   codering waarmee dit bestand wordt weggeschreven. */
.checkgrid{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px 32px;
}
.checkgrid li{
  position: relative;
  padding-left: 27px;
  font-size: .95rem;
  color: var(--body);
}
.checkgrid li::before{
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-text);
  font-weight: 800;
}

@media (max-width: 860px){
  .checkgrid{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  .facts--row{ grid-template-columns: 1fr; }
  .facts--row div{ flex-direction: row; align-items: baseline; justify-content: space-between; }
}


/* ---------- smalle schermen: bovenbalk en hero-knoppen ---------- */
@media (max-width: 600px){
  /* De bovenbalk nam ruim honderd pixels in beslag voordat het logo in
     beeld kwam. Adres en de ronde knopjes staan ook in de voettekst;
     bovenaan blijft staan waar op een telefoon meteen op getikt wordt. */
  /* Naast elkaar paste "Gratis Proefles!" niet op een regel, waardoor die
     knop twee regels hoog werd en de twee knoppen ongelijk oogden. Onder
     elkaar over de volle breedte zijn ze even hoog en beter te raken. */
  .hero__cta{ flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn{ flex: none; width: 100%; }
}

/* ---------- contactgegevens in het uitklapmenu ---------- */
/* Op het brede scherm staan ze in de bovenbalk; zodra het menu een
   hamburger wordt verdwijnt die balk en verhuizen ze naar het menu. */
.nav__contact{ display:none; }

@media (max-width: 940px){
  .topbar{ display:none; }
  .nav.is-open .nav__contact{
    display:flex; flex-direction:column; gap:7px;
    margin-top:10px; padding-top:12px;
    border-top:1px solid var(--line);
    font-size:.92rem; font-weight:600; color: var(--body);
  }
  .nav.is-open .nav__contact a{ color: var(--ink); text-decoration:none; font-weight:700; }
  .nav.is-open .nav__contact span{ font-weight:600; }
}


/* ============================================================
   MOBIEL
   ============================================================ */

/* ---------- hamburgerknop ---------- */
/* Drie streepjes die bij openen een kruis worden. Alleen transform en
   opacity bewegen, dus de balk eromheen herschikt niet tijdens de animatie. */
.navtoggle{
  width: 46px; height: 46px; padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px;
  align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.navtoggle:hover{ border-color: var(--ink); }
.navtoggle:focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 2px; }

.navtoggle__box{ position: relative; display: block; width: 20px; height: 14px; }
.navtoggle__bar{
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1),
              top .26s cubic-bezier(.4, 0, .2, 1),
              opacity .14s ease, background-color .2s ease;
}
.navtoggle__bar:nth-child(1){ top: 0; }
.navtoggle__bar:nth-child(2){ top: 6px; }
.navtoggle__bar:nth-child(3){ top: 12px; }

.navtoggle.is-open{ background: var(--accent); border-color: var(--accent); }
.navtoggle.is-open .navtoggle__bar{ background: #fff; }
.navtoggle.is-open .navtoggle__bar:nth-child(1){ top: 6px; transform: rotate(45deg); }
.navtoggle.is-open .navtoggle__bar:nth-child(2){ opacity: 0; transform: scaleX(.2); }
.navtoggle.is-open .navtoggle__bar:nth-child(3){ top: 6px; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce){
  .navtoggle__bar{ transition: none; }
}

@media (max-width: 940px){
  .navtoggle{ display: inline-flex; }

  /* ---------- uitklapmenu ---------- */
  .nav.is-open{
    padding: 6px 14px 14px;
    gap: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 16px 34px rgba(35, 38, 43, .13);
  }
  /* Alleen de directe menupunten, anders krijgen de contactlinks in het
     blok eronder dezelfde royale regelhoogte en valt het menu uit elkaar. */
  .nav.is-open > a{
    padding: 15px 10px;
    font-size: 1rem;
    border-radius: 0;
  }
  /* Alleen tussen de menupunten een lijntje, niet boven het contactblok:
     dat heeft zijn eigen scheiding. */
  .nav.is-open > a + a{ border-top: 1px solid var(--line-soft); }
  .nav.is-open > a:hover,
  .nav.is-open > a.is-active{ background: transparent; color: var(--accent-text); }
  .nav.is-open > a.is-active{ font-weight: 800; }
}

@media (max-width: 600px){
  /* ---------- gecentreerd waar het rustig oogt ----------
     Koppen, inleidingen en knoppen staan op een smal scherm gecentreerd.
     Lopende tekst, formulieren en opsommingen blijven links uitgelijnd:
     gecentreerde alinea's hebben een rafelrand aan béide kanten en lezen
     daardoor merkbaar trager. */
  .pagehead,
  .section__head,
  .hero__in > div:first-child{ text-align: center; }

  .section__head{ margin-left: auto; margin-right: auto; }
  .hero__lead,
  .pagehead__lead{ margin-left: auto; margin-right: auto; }

  .ratings{ justify-content: center; gap: 14px 28px; }
  .rating__top{ justify-content: center; }
  .places{ justify-content: center; }

  .ctaband{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 26px 22px;
  }
  .ctaband .btn{ width: 100%; }
  /* Die 1 1 320px hierboven is een breedte zolang de blokken naast elkaar
     staan. Onder elkaar telt flex-basis als hoogte, en dan werd het
     tekstblok 320 px hoog met een gat tot aan de knop. */
  .ctaband > div{ flex: 0 1 auto; }

  /* ---------- leesbaarheid en tikdoelen ---------- */
  .eyebrow{ font-size: .79rem; }
  .scoreitem__label,
  .quote__grade,
  .introcard__label{ font-size: .8rem; }
  .facts dt,
  .facts .k{ font-size: .82rem; }

  /* Apple en Google houden 44 px aan als kleinste doel dat je met een duim
     betrouwbaar raakt; losse regellinks haalden dat bij lange na niet. */
  .sitefooter ul{ gap: 0; }
  .sitefooter li a{ display: inline-block; padding: 10px 0; }
  .social a{ width: 40px; height: 40px; }
  .social svg{ width: 17px; height: 17px; }

  /* ---------- voettekst gecentreerd ---------- */
  .sitefooter__in{ text-align: center; gap: 28px; }
  .sitefooter .social{ justify-content: center; }
  .sitefooter img{ margin-left: auto; margin-right: auto; }
  .footbottom{ justify-content: center; text-align: center; }
}

@media (max-width: 600px){
  /* De paginakop nam een derde van het scherm voordat de eerste zin begon. */
  .pagehead{ padding-block: 34px 30px; }

  /* Vijf platforms onder elkaar was bijna 600 px scrollen; twee naast
     elkaar halveert dat zonder dat de cijfers kleiner worden. */
  .scorebar .scoreitem{ flex: 1 1 140px; padding: 15px 14px; }

  /* Het logo is een link en hoort dus ook met een duim te raken te zijn. */
  .brandmark{ padding-block: 5px; }

  /* Een vinkje van 19 px mis je op een telefoon; het label ernaast blijft
     ook aanklikbaar, maar het vakje zelf moet raak te tikken zijn. */
  .checkrow input[type="checkbox"]{ width: 22px; height: 22px; }

  .contactlist a{ display: inline-block; padding: 7px 0; }
}

/* ---------- 'toon meer' zonder JavaScript ---------- */
/* Een gewone details-sectie: klapt ook open als scripts geblokkeerd zijn. */
.meer{ margin-top: 22px; }
.meer > summary{
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; list-style: none;
  font-family: var(--f-head); font-weight: 700; font-size: .97rem;
  padding: 13px 24px;
  border: 2px solid var(--line); border-radius: var(--radius-s);
  color: var(--ink); background: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.meer > summary::-webkit-details-marker{ display: none; }
.meer > summary::after{
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s ease;
}
.meer[open] > summary::after{ transform: translateY(2px) rotate(-135deg); }
.meer > summary:hover{ border-color: var(--ink); color: var(--accent-text); }
.meer > summary:focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 2px; }
.meer__open{ display: none; }
.meer[open] .meer__dicht{ display: none; }
.meer[open] .meer__open{ display: inline; }

@media (prefers-reduced-motion: reduce){
  .meer > summary::after{ transition: none; }
}

@media (max-width: 600px){
  .meer{ display: block; }
  .meer > summary{ width: 100%; justify-content: center; }
  /* De foto van Michael staat op een smal scherm midden onder de tekst. */
  .mich__photo{ margin-left: auto; margin-right: auto; }
}

/* ---------- privacyverklaring ---------- */
.legal__body{ max-width: 72ch; margin-top: 26px; }
.legal__body h3{
  font-family: var(--f-head); font-weight: 800;
  font-size: 1.08rem; color: var(--ink);
  margin: 26px 0 8px;
}
.legal__body h3:first-child{ margin-top: 0; }
.legal__body p{ margin: 0 0 12px; }
.legal__meta{
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--muted);
}
.footbottom a{ color: var(--muted); text-decoration: underline; }
.footbottom a:hover{ color: var(--accent-text); }

@media (max-width: 600px){
  .footbottom a{ display: inline-block; padding: 8px 0; }
}

@media (max-width: 600px){
  /* Het instructeurkaartje bleef als enige links uitgelijnd tussen alle
     gecentreerde blokken. De feiten erin zijn korte paren, die lezen
     gecentreerd net zo goed. */
  /* Geen auto-marges: in een raster laat dat het blok krimpen tot de
     breedte van de inhoud, waardoor het smaller werd dan de kaarten
     eromheen. De cel is al even breed als de rest. */
  .introcard{ text-align: center; }

  /* De voettekst zette copyright en de privacylink naast elkaar en de
     fotoverantwoording op een tweede regel. Doordat de link extra
     tikruimte heeft, stonden die twee ook nog eens niet op één lijn.
     Onder elkaar staat alles netjes op de middenas. */
  .footbottom{
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
  }
}

/* ---------- geslaagdenfoto als echte afbeelding ---------- */
/* Stond eerst als achtergrond ingesteld. Een <img> kan de browser uitstellen
   tot hij in beeld komt; een achtergrond nooit. Met veertig foto's op een
   pagina scheelt dat megabytes bij het eerste bezoek. */
.grad__ph{ overflow: hidden; }
.grad__ph > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.grad__when{ z-index: 1; }

/* ---------- vermelding van de maker ---------- */
/* margin-left:auto duwt hem naar de rechterkant van de voetregel, los van
   hoeveel er links van staat. */
/* flex:1 duwt hem tot aan de rechterrand, ook als de regel ervoor kort is;
   met alleen margin-left:auto bleef hij bij de tekst ernaast hangen. */
.footbottom__door{ margin-left: auto; text-align: right; flex: 1 1 auto; }
.footbottom__door a{
  /* Het logo-oranje in plaats van de donkere variant: bewust ingetogen,
     het is een vermelding en geen oproep. */
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.footbottom__door a:hover{ text-decoration: underline; }

@media (max-width: 600px){
  /* Op een smal scherm staat alles onder elkaar gecentreerd, dus daar
     heeft naar rechts duwen geen zin. */
  .footbottom__door{ margin-left: 0; }
}

/* ---------- kruimelpad ---------- */
.kruimels{
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-size: .84rem;
  color: var(--muted);
  padding-block: 10px;
}
.kruimels a{ color: var(--body); text-decoration: none; font-weight: 600; }
.kruimels a:hover{ color: var(--accent-text); text-decoration: underline; }
.kruimels__pijl{ margin: 0 8px; color: var(--line); }

/* ---------- verwante pagina's ---------- */
.verder{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.verder__kaart{
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.verder__kaart:hover{ border-color: var(--ink); transform: translateY(-2px); }
.verder__titel{
  font-family: var(--f-head); font-weight: 800;
  color: var(--ink); font-size: .97rem; line-height: 1.3;
}
.verder__uitleg{ font-size: .86rem; color: var(--body); }

@media (prefers-reduced-motion: reduce){
  .verder__kaart:hover{ transform: none; }
}

@media (max-width: 600px){
  .verder{ grid-template-columns: 1fr; }
  .verder__kaart{ text-align: left; }
}

/* ---------- geplande cursusdata ---------- */
.cursusdata{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cursusdatum{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  padding: 16px 20px;
}
/* Een volle datum blijft staan maar valt niet meer op: dat er iets vol zit
   is informatie, maar het is geen aanbod meer. */
.cursusdatum.is-vol{ border-left-color: var(--line); background: var(--surface); }
.cursusdatum__dag{
  display: block;
  font-family: var(--f-head); font-weight: 800;
  color: var(--ink); font-size: 1.02rem;
}
.cursusdatum__tijd{ display: block; font-size: .9rem; color: var(--body); margin-top: 2px; }
.cursusdatum__noot{ display: block; font-size: .86rem; color: var(--muted); margin-top: 6px; }
.cursusdatum__rechts{ display: flex; align-items: baseline; gap: 14px; }
.cursusdatum__prijs{ font-family: var(--f-head); font-weight: 800; color: var(--ink); }
.cursusdatum__plek{ font-size: .86rem; font-weight: 700; color: var(--good); }
.cursusdatum__vol{ font-size: .86rem; font-weight: 700; color: var(--muted); }

@media (max-width: 600px){
  .cursusdatum{ flex-direction: column; align-items: stretch; text-align: center; }
  .cursusdatum__rechts{ justify-content: center; }
}

/* ---------- meelopende zijkolom ---------- */
/* Naast een lang formulier bleef links een gat van honderden pixels over.
   In plaats van die kolom vol te stoppen laat hij mee omhoog lopen, zodat de
   gegevens in beeld blijven terwijl je het formulier invult.
   Bewust met een eigen klasse en niet op elke .formwrap: op de contactpagina
   is de linkerkolom langer dan het scherm, en dan zou vastzetten juist
   betekenen dat je de onderkant niet meer kunt lezen. */
@media (min-width: 941px){
  .formwrap--volgend > *:first-child,
  .split > .sidecard,
  .welkom > .introcard,
  .mich > .mich__photo{
    position: sticky;
    /* De koptekst blijft bovenin staan; hier net eronder beginnen. */
    top: 96px;
  }
}

@media (prefers-reduced-motion: reduce){
  .formwrap--volgend > *:first-child,
  .split > .sidecard,
  .welkom > .introcard,
  .mich > .mich__photo{ position: static; }
}

/* ---------- onderstreping in het menu ---------- */
/* Stond eerst op transform: scaleX(). Dat schaalt het hele blokje, dus ook
   zijn hoogte van 2 px: tijdens de beweging belandt die lijn tussen twee
   beeldpunten in en oogt hij dikker, om daarna terug te klappen naar scherp.
   Met clip-path wordt de lijn alleen onthuld en blijft de dikte gelijk. */
.nav a::after{
  transform: none;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path .24s cubic-bezier(.4, 0, .2, 1);
}
.nav a:hover::after,
.nav a.is-active::after{
  transform: none;
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce){
  .nav a::after{ transition: none; }
}

/* ---------- kerngegevens op een rij ---------- */
/* De waarden staan in de kopletter, die breed bouwt. Net iets kleiner scheelt
   een regelomslag, en daarmee blijven de drie vakjes laag: in een raster is
   elke cel immers zo hoog als de langste. */
.facts--row .v{ font-size: .97rem; line-height: 1.45; }
.facts--row div{ padding-block: 12px; }

/* ---------- formulier compacter ---------- */
/* Naam naast telefoon en e-mail naast woonplaats: dat scheelt twee volle
   veldhoogtes zonder dat er iets moeilijker in te vullen wordt. Onder de
   700 px staat alles weer onder elkaar, want daar is geen ruimte voor
   twee kolommen. */
.formcard form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.formcard form > *{ grid-column: 1 / -1; }
.formcard form > .field--half{ grid-column: span 1; }

.formcard .field{ margin-bottom: 12px; }
.formcard .field input,
.formcard .field select{ padding: 10px 13px; }

@media (max-width: 700px){
  .formcard form{ grid-template-columns: 1fr; }
  .formcard form > .field--half{ grid-column: 1 / -1; }
}

/* ---------- verder lezen hoort bij de voettekst ---------- */
/* Zelfde ondergrond als de voettekst, zodat het een doorlopend afsluitend
   vlak wordt in plaats van een tweede sectie onder de oproep. */
.verderlezen{
  background: var(--mist);
  border-top: 1px solid var(--line);
  padding-block: 30px 34px;
}
/* De voettekst zet zelf ook een lijn; twee vlak onder elkaar zou een dubbele
   streep geven. */
main:has(.verderlezen) + .sitefooter{ border-top: 0; }
/* Op de homepagina staat de oproep al op dezelfde grijze ondergrond. Dan mag
   er ook geen streep tussen: het wordt een doorlopend afsluitend vlak. */
.section--mist + .verderlezen{ border-top: 0; padding-top: 4px; }
.section--mist:has(+ .verderlezen){ border-bottom: 0; padding-bottom: 40px; }

/* Dezelfde ingetogen kop als de kolomtitels in de voettekst. */
.verderlezen__kop{
  font-family: var(--f-head);
  color: var(--ink);
  font-size: .78rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 16px;
}

/* De kaartjes mogen rustiger: geen schaduw, geen zweefbeweging, want ze
   staan nu in een vlak dat zelf al rustig is. */
.verderlezen .verder__kaart{
  background: var(--paper);
  border-color: var(--line-soft);
  padding: 13px 15px;
}
.verderlezen .verder__kaart:hover{ transform: none; border-color: var(--accent); }
.verderlezen .verder__titel{ font-size: .93rem; }
.verderlezen .verder__uitleg{ font-size: .82rem; color: var(--muted); }

@media (max-width: 600px){
  .verderlezen{ padding-block: 24px 26px; text-align: center; }
  .verderlezen .verder__kaart{ text-align: center; border-left-width: 1px; border-top: 3px solid var(--accent); }
}

/* ---------- losse juridische pagina ---------- */
/* Een privacyverklaring lees je, dus de regel mag niet over de volle
   containerbreedte lopen. Rond de 72 tekens is prettig. */
.legal__body, .legal__terug{ max-width: 72ch; }

.legal__terug{ margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.legal__terug a{ color: var(--accent-text); font-weight: 700; text-decoration: none; }
.legal__terug a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* De koppen in de verklaring zijn h2 nu het een eigen pagina is. */
.legal__body h2{ font-size: 1.12rem; margin: 30px 0 8px; }
.legal__body h2:first-child{ margin-top: 0; }