/* ============================================================
   ABSOLUTE RUN — PREMIUM LIGHT THEME
   ============================================================ */

:root {
  --cyan:        #00aec7;
  --cyan-dim:    #0090a8;
  /* Lichte variant voor tekst op een donkere foto. --cyan haalt daar
     maar 2,16 op 1 en dat is te weinig om te kunnen lezen. */
  --cyan-licht:  #7fe0f0;
  /* Eigen linkkleur voor lopende tekst, donkerder dan --cyan-dim.
     Linktekst is gewone tekst en heeft dus 4,5 op 1 nodig. --cyan
     haalt 2,67 en --cyan-dim 3,78. Deze haalt 5,45 op wit en 5,00
     op de lichtblauwe secties. */
  --link:        #00757f;
  --cyan-glow:   rgba(0,174,199,0.15);
  --cyan-glow2:  rgba(0,174,199,0.06);

  /* Warme accentkleur (Fries rood, sluit aan op pompebled) */
  --accent:      #e63946;
  --accent-dim:  #c92d3a;

  --bg:          #ffffff;
  --bg2:         #f0f6f8;
  --bg3:         #ebebeb;
  --bg4:         #e0e0e0;

  --text:        #111111;
  --text-dim:    rgba(17,17,17,0.58);
  --text-faint:  rgba(17,17,17,0.22);
  --muted:       #999;

  --border:      rgba(0,0,0,0.07);
  --border-cyan: rgba(0,174,199,0.2);

  /* ── TYPOGRAFIE ────────────────────────────────────────────────
     Eén schaal voor de hele site. Hiervoor stonden er 31 losse
     lettergroottes in dit bestand, 19 vaste en 12 geschaalde, en dan
     gaat het onvermijdelijk ergens mis: dezelfde soort tekst kreeg op
     de ene pagina 13px en op de andere 14px.

     De basis is 16px. Dat is de standaardgrootte van elke browser, en
     wie hem groter heeft gezet omdat hij slechter ziet, krijgt alles
     netjes mee. Kleiner dan 12px gebruiken we niet voor lopende tekst.

     De labels zijn hoofdletters met flinke letterafstand. Die lezen
     optisch groter dan gewone tekst, dus 11px kan daar wel. Ze stonden
     op 10 en 11 door elkaar; dat is nu één maat.

     Koppen schalen mee met het scherm via clamp(min, groei, max). De
     maximumwaarden zijn zo gekozen dat de desktop er vrijwel hetzelfde
     uitziet als hiervoor; de minimumwaarden zijn verlaagd, want op een
     telefoon waren de koppen te groot voor de regel.
     ───────────────────────────────────────────────────────────── */
  --label:      11px;   /* hoofdletterlabels, kruimelpad, kleine kopjes */
  --tekst-xs:   12px;   /* bijschriften, voetnoten */
  --tekst-s:    14px;   /* knoppen, meta, kaarttekst */
  --tekst-m:    16px;   /* lopende tekst, de basis */
  --tekst-l:    18px;   /* introtekst */
  --tekst-xl:   20px;   /* kopjes in kaarten */
  --tekst-2xl:  22px;   /* grootste tekstmaat onder de koppen */

  --kop-1: clamp(64px, 10vw, 140px);   /* de kop op de homepagina */
  --kop-2: clamp(46px,  8vw, 100px);   /* de titel van een pagina */
  --kop-3: clamp(40px,  6vw,  84px);   /* een sectiekop */
  --kop-4: clamp(34px,  5vw,  64px);   /* grote subkop, artikeltitel */
  --kop-5: clamp(26px, 3.5vw, 44px);   /* kaarttitel, categorie */
  --kop-6: clamp(20px, 2.5vw, 30px);   /* kop binnen een artikel */

  /* Grote sierciijfers: stapnummers, afstanden, initialen. Die stonden
     op een vaste maat tot 80px en liepen daardoor op een telefoon van
     het scherm af. */
  --cijfer-l: clamp(52px,   7vw, 80px);
  --cijfer-m: clamp(40px,   5vw, 64px);
  --cijfer-s: clamp(26px,   3vw, 32px);

  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);

  /* Afronding. Eén plek om de hele site strakker of ronder te zetten.
     --radius geldt voor kaarten en panelen, --radius-sm voor knoppen,
     invoervelden en kleine labels. Dezelfde radius op een lage knop
     maakt er een pil van, vandaar de helft. Zie het blok
     "AFRONDING HOEKEN" onderaan dit bestand. */
  --radius:    12px;
  --radius-sm: 6px;

  /* HOOGTE VAN DE VASTE MENUBALK
     #site-nav staat op position:fixed en ligt dus over de pagina heen
     in plaats van erboven. Alles wat bovenaan een pagina begint moet
     daar zelf omheen werken, en dat ging mis: de subhero had een
     bovenmarge van nul, dus bij een kop van drie regels schoven de
     kruimel en het bovenkopje onder de balk door.

     De balk is zo hoog als zijn eigen padding plus het logo:
     28 + 66 + 28. Op smallere schermen wordt die padding kleiner, dus
     de waarde wordt verderop in de mediaqueries bijgesteld. Verander
     je de padding van #site-nav of de hoogte van .nav-logo-img, pas
     dit dan mee aan, anders klopt de ruimte eronder niet meer. */
  --nav-hoogte: 122px;

  /* SCHADUW OP KAARTEN
     Eén schaduw voor de hele site, zie het blok "KAARTSCHADUW"
     onderaan dit bestand voor waar hij op zit.
     Bijstellen doe je hier, niet per onderdeel.

     Stond op 4 en 6 procent. Op wit is dat onder de drempel waarop
     je iets waarneemt, dus lagen de kaarten alsnog plat. Nu vier
     lagen:

     1. een haarlijn van 1px als ring om de kaart. Dat is wat een
        kaart op wit echt begrenst. Een schaduw alleen doet dat niet,
        want die heeft geen scherpe rand.
     2 t/m 4. contact, midden en hoogte. Drie afstanden geeft een
        natuurlijker verloop dan twee, waarbij je het gat ertussen
        ziet als een tweede randje.

     De kleur is niet neutraal grijs maar een donker blauwgroen, de
     schaduwkant van #f0f6f8. Zwart op een koele ondergrond oogt
     vuil.
     ───────────────────────────────────────────────────────────── */
  --schaduw:       0 0 0 1px rgba(16,42,52,0.055),
                   0 1px 2px rgba(16,42,52,0.05),
                   0 6px 12px rgba(16,42,52,0.055),
                   0 16px 32px rgba(16,42,52,0.07);
  --schaduw-hover: 0 0 0 1px rgba(16,42,52,0.075),
                   0 2px 4px rgba(16,42,52,0.06),
                   0 10px 20px rgba(16,42,52,0.075),
                   0 28px 52px rgba(16,42,52,0.12);
}

/* RESET ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}



/* ── LINKS IN LOPENDE TEKST ──────────────────────────────────────
   Het thema had geen enkele algemene regel voor links. Elk onderdeel
   regelde zijn eigen kleur, en alles wat daarbuiten viel kreeg de
   standaard van de browser: blauwpaars met een streep eronder. Dat
   zag je terug in zinnen als "kijk dan bij onze diensten", verspreid
   over vrijwel elke pagina.

   Deze regel pakt alleen links zonder class, en dat is precies de
   goede scheiding. Heeft een link een class, dan hoort hij bij een
   onderdeel (een knop, een kaart, het menu) en wordt hij daar
   geregeld. Heeft hij er geen, dan staat hij in lopende tekst.

   Staat bewust hier bovenaan. Alle onderdeelregels verderop hebben
   dezelfde zwaarte, dus die winnen op volgorde. Nagelopen dat ze
   allemaal echt een eigen kleur zetten.

   De kleur is een eigen, donkerdere cyaan en niet --cyan of
   --cyan-dim. Die halen 2,67 en 3,78 op 1 tegen wit, en linktekst
   is gewone tekst en heeft dus 4,5 nodig. Deze haalt 5,45 op wit en
   5,00 op de lichtblauwe secties.

   De streep eronder blijft. Kleur alleen is geen goede aanwijzing
   dat iets een link is, zeker niet voor wie kleuren slecht
   onderscheidt. Wel losser van de tekst gezet zodat hij niet door
   de staartletters heen snijdt. */
a:not([class]) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s;
}
a:not([class]):hover {
  color: var(--cyan-dim);
}

/* GRAIN OVERLAY -------------------------------------------- */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* NAV ------------------------------------------------------ */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 60px;
  background: transparent;
  transition: padding .4s, background .4s, box-shadow .4s;
}
#site-nav.scrolled {
  padding: 16px 60px;
  /* Bewust niet helemaal dicht: de pagina schemert er licht doorheen.
     De saturate zorgt dat kleuren achter de balk niet vaal wegvallen. */
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
/* Zonder backdrop-filter zou de balk gewoon half doorzichtig zijn en
   de tekst onleesbaar worden. Dan alsnog vrijwel dichtzetten. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #site-nav.scrolled { background: rgba(255,255,255,0.97); }
}

.nav-logo {
  display: flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 66px;
  width: auto;
  display: block;
  transition: opacity .2s, filter .4s, height .4s;
  filter: brightness(0) invert(1);
}
/* Krimpt mee met de balk, maar blijft fors genoeg om leesbaar te blijven. */
#site-nav.scrolled .nav-logo-img { height: 56px; }
#site-nav.scrolled .nav-logo-img { filter: none; }
.nav-logo:hover .nav-logo-img { opacity: .82; }

.nav-links {
  display: flex; align-items: center; gap: 32px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-head);
  /* Meeschalend: 14px op een ruim scherm, maar krimpt terug naar 12px
     zodra de balk krap wordt. Zeven menu-items plus logo plus knop
     passen anders niet meer tussen 1024 en 1200 pixels. */
  font-size: var(--tekst-s);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  position: relative;
  transition: color .2s;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 100%; height: 1px;
  background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out-expo);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }

/* After scroll: donkere nav, donkere tekst */
#site-nav.scrolled .nav-links a { color: var(--muted); }
#site-nav.scrolled .nav-links a:hover { color: var(--text); }
#site-nav.scrolled .nav-cta { color: var(--cyan); border-color: rgba(0,174,199,0.4); }

.nav-cta {
  font-family: var(--font-head);
  font-size: var(--tekst-s);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 12px 26px;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: color .25s, border-color .25s;
}
.nav-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--cyan);
  /* scaleX i.p.v. translateX: het blokje blijft altijd binnen de knop, zodat
     de backdrop-filter op de nav geen cyaan streepje naast de knop kan laten staan */
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out-expo);
}
.nav-cta span { position: relative; z-index: 1; }
.nav-cta:hover { color: #fff; }
.nav-cta:hover::before { transform: scaleX(1); }

.nav-hamburger {
  display: none;
  flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  background: none; border: none;
  cursor: pointer;
  /* Was 32 bij 17 pixels. Dat is de belangrijkste knop op een telefoon
     en veel te klein om betrouwbaar te raken; de richtlijn is 44 bij
     44. De marge zit binnen de knop, zodat de balkjes op hun plek
     blijven staan. */
  padding: 13px 6px;
  min-width: 44px; min-height: 44px;
  margin-right: -6px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--text);
  transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:first-child { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.open span:last-child { transform: translateY(-7.5px) rotate(-45deg); }

/* MOBILE MENU */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 490;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-100%);
  transition: transform .5s var(--ease-out-expo);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu ul { list-style: none; text-align: center; }
.mobile-menu li { margin-bottom: 8px; }
.mobile-menu a {
  font-family: var(--font-head);
  font-size: var(--kop-4);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.0139em;
  color: var(--text-dim);
  text-decoration: none;
  display: block;
  transition: color .2s;
}
.mobile-menu a:hover { color: var(--cyan); }
.mobile-menu .mobile-cta {
  font-size: var(--kop-5);
  color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 14px 40px;
  margin-top: 16px; display: inline-block;
}

/* HERO ----------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  padding: 0 60px;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: heroKenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; transform: scale(1.06); }
}
.hero-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.68) 45%,
    rgba(0,0,0,0.28) 72%,
    rgba(0,0,0,0.05) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 920px;
  width: 100%;
  padding-top: 120px;
}

.pompebled-sep {
  width: 18px; height: 18px;
  display: block;
  flex-shrink: 0;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 32px;
}

.hero-title {
  font-family: var(--font-head);
  font-size: var(--kop-1);
  font-weight: 900;
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -0.0286em;
  margin-bottom: 40px;
  display: block;
  color: #fff;
}
.hero-title .split-word { display: block; }

.hero-desc {
  font-size: var(--tekst-l); line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin-bottom: 52px;
  font-weight: 300;
}

.hero-actions {
  display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap;
}

/* HERO VISUAL — SVG Shoe */
@keyframes shoeFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1deg); }
}
@keyframes scanMove {
  0%   { top: 18%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 85%; opacity: 0; }
}

/* Shoe label */
@keyframes pillFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}


/* BUTTONS -------------------------------------------------- */
.btn-primary {
  font-family: var(--font-head);
  font-size: var(--tekst-s); letter-spacing: 2.5px;
  text-transform: uppercase;
  background: var(--cyan);
  color: #fff;
  padding: 16px 40px;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
  position: relative; overflow: hidden;
  transition: color .25s;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: #00c8e0;
  transform: translateX(-101%);
  transition: transform .3s var(--ease-out-expo);
}
.btn-primary span,
.btn-primary svg { position: relative; z-index: 1; }
.btn-primary:hover::before { transform: translateX(0); }

.btn-ghost {
  font-family: var(--font-head);
  font-size: var(--tekst-s); letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(17,17,17,0.2);
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--cyan); border-color: var(--cyan); }

.hero .btn-ghost {
  color: rgba(255,255,255,0.75);
  border-bottom-color: rgba(255,255,255,0.3);
}
.hero .btn-ghost:hover { color: var(--cyan); border-color: var(--cyan); }

.btn-dark {
  font-family: var(--font-head);
  font-size: var(--tekst-s); letter-spacing: 2.5px;
  text-transform: uppercase;
  background: #111111;
  color: #fff;
  padding: 18px 48px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
  position: relative; overflow: hidden;
  flex-shrink: 0;
  transition: color .25s;
}
.btn-dark::before {
  content: '';
  position: absolute; inset: 0;
  background: #222;
  transform: translateX(-101%);
  transition: transform .3s var(--ease-out-expo);
}
.btn-dark span { position: relative; z-index: 1; }
.btn-dark:hover::before { transform: translateX(0); }

/* MAGNETIC EFFECT
   Geen CSS-transition op transform: main.js interpoleert zelf per frame.
   Een transition eroverheen zou de beweging dubbel smoothen en juist
   traag en schokkerig maken. */
.magnetic { backface-visibility: hidden; }

/* STATS BAR ------------------------------------------------ */
.stat-number {
  font-family: var(--font-head);
  font-size: var(--cijfer-m); font-weight: 900;
  color: var(--accent);
  line-height: 1; margin-bottom: 6px;
  letter-spacing: -1px;
}

/* SECTION GEMEENSCHAPPELIJK -------------------------------- */
section { padding: 130px 60px; }

/* Subtiele diagonale onderkanten secties */
.services {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px));
  padding-bottom: calc(130px + 28px);
}
.about-teaser {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
  padding-bottom: calc(130px + 28px);
}

.section-tag {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.section-tag::before {
  content: '';
  display: block; width: 14px; height: 14px;
  background-image: url('../logos/Pompebled.svg');
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.section-title {
  font-family: var(--font-head);
  font-size: var(--kop-3);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.0179em;
  margin-bottom: 24px;
  color: var(--text);
  /* De winkel kan deze kop zelf aanpassen. Past een woord niet op
     een smal scherm, dan breekt hij af in plaats van dat hij het
     scherm uit loopt. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* De tweede regel van een sectiekop, als omtrek. Staat op 46 plekken
   verspreid over 16 templates, altijd binnen .section-title en nooit
   over een foto, dus altijd op wit of op lichtblauw.

   De omtrek stond op 1,5px in 30% zwart. Dat is een contrast van 1,99
   op 1, terwijl grote letters minimaal 3 op 1 nodig hebben, en het
   randje was met 1,5px op een letter van 84px ongeveer twee procent
   van de letterhoogte. Het las niet als een keuze maar als iets dat
   nog moest inladen.

   Nu 2px in 55% zwart, wat neerkomt op 4,17 op 1 tegen wit en 3,82
   tegen het lichtblauw. Allebei boven de norm.

   Hier heeft een cyaan schaduw met een harde verspringing gestaan,
   de gezeefdrukte-posterversie. Zag er in het voorbeeld goed uit maar
   viel in het echt tegen, dus terug naar het simpele antwoord: niets
   toevoegen, alleen repareren wat er stuk was.

   De dikte staat bewust in pixels en niet in em. .section-title loopt
   van 52px tot 84px, en een vaste 2px is op de kleinste maat dus
   relatief zwaarder. Dat is precies goed: kleine letters hebben meer
   lijn nodig om te blijven staan, niet minder. */
.title-outline {
  -webkit-text-stroke: 2px rgba(17,17,17,0.55);
  color: transparent;
}

/* PROBLEEM + OPLOSSING ------------------------------------- */

/* HET PROCES ----------------------------------------------- */

/* SERVICES ------------------------------------------------- */
.services { background: var(--bg2); }
.services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: end;
  margin-bottom: 80px;
}
/* Staat naast een kop van 84px in gewicht 900. Op 16px in gewicht 300
   en lichtgrijs verdween deze alinea daar volledig tegen weg. Groter,
   iets zwaarder, een kortere regel en een cyaan streepje als anker. */
.services-intro {
  position: relative;
  font-size: var(--tekst-l); line-height: 1.7;
  color: var(--text-dim); font-weight: 400;
  max-width: 30em;   /* ~70 tekens per regel, daarboven wordt het sjouwen */
  padding-top: 26px;
}
.services-intro::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--cyan);
}
/* Tussenruimte was 2px, uit de tijd dat de kaarten geen rand hadden en
   die naad zelf de scheiding was. Nu er een haarlijn om elke kaart zit
   plakken twee van die randen met 2px ertussen aan elkaar vast, en dat
   leest als één dik streepje. Zelfde 24px als .spage-features-grid,
   zodat elke kaartenrij op de site dezelfde maat heeft. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card-photo {
  margin: -44px -36px 28px;
  height: 200px;
  overflow: hidden;
}
.service-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .5s var(--ease-out-expo);
}
.service-card:hover .service-card-photo img { transform: scale(1.04); }

.service-card {
  background: var(--bg);
  padding: 44px 36px;
  position: relative; overflow: hidden;
  cursor: default;
  transition: background .3s;
}
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out-expo);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { background: var(--bg2); }
.service-title {
  font-family: var(--font-head);
  font-size: var(--tekst-2xl); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 14px;
  color: var(--text);
}
.service-desc {
  font-size: var(--tekst-s); line-height: 1.7;
  color: var(--text-dim); font-weight: 400;
}
.service-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px;
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cyan); text-decoration: none;
  transition: gap .2s;
}
.service-link:hover { gap: 14px; }

.service-step-row {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
/* Stond in het rood. Dat was het laatste zichtbare rode accent op de
   site nadat de teller onder de reviews verdween, en één losse
   steunkleur die verder nergens terugkomt leest als een restje. */
.service-step-num {
  font-family: var(--font-head);
  font-size: var(--label); font-weight: 700;
  letter-spacing: 3px; color: var(--cyan);
  text-transform: uppercase;
}
.service-link-cta { color: var(--text); font-weight: 700; }
.service-link-cta:hover { color: var(--cyan); }
.service-badge {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--label); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(0,174,199,0.3);
  padding: 5px 12px;
  margin-bottom: 20px;
}

/* PHOTO PLACEHOLDER */

/* WERKWIJZE ------------------------------------------------ */
.werkwijze {
  background: var(--bg2);
  position: relative;
}
.werkwijze::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,174,199,0.18), transparent);
}

/* SCAN DEVICE */

/* COMMUNITY ------------------------------------------------ */
.community {
  background: var(--bg);
  position: relative; overflow: hidden;
}
.community-bg-glow {
  position: absolute;
  right: -200px; top: 50%;
  transform: translateY(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(0,174,199,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.community-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: center;
  position: relative; z-index: 1;
}
/* Zelfde rol als .services-intro: een alinea die het moet opnemen
   tegen een kop van 84px. Dus ook groter, met een cyaan anker. */
.community-intro {
  position: relative;
  font-size: var(--tekst-l); line-height: 1.7;
  color: var(--text-dim); font-weight: 400;
  margin-bottom: 40px; max-width: 30em;
  padding-top: 26px;
}
.community-intro::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--cyan);
}
.route-card {
  background: var(--bg2);
  border: 1px solid rgba(0,174,199,0.18);
  padding: 36px; margin-bottom: 36px;
}
.route-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.route-label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted);
}
.route-day {
  font-family: var(--font-head);
  font-size: var(--tekst-xs); font-weight: 700;
  color: var(--cyan); letter-spacing: 2px;
  text-transform: uppercase;
}
.route-distance {
  font-family: var(--font-head);
  font-size: var(--cijfer-m); font-weight: 900;
  color: var(--text); line-height: 1; margin-bottom: 4px;
}
.route-distance span { font-size: var(--tekst-2xl); color: var(--muted); font-weight: 400; }
.route-meta {
  display: flex; gap: 32px;
  margin-top: 20px; padding-top: 20px;
}
.route-meta-val {
  font-family: var(--font-head);
  font-size: var(--tekst-2xl); font-weight: 800; color: var(--text);
}
.route-location {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--tekst-s); line-height: 1.5; color: var(--muted);
  margin-top: 16px;
}
.route-meta-key {
  font-size: var(--label); letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
}

/* COMMUNITY PHOTOS */
.community-photo-stack {
  position: relative;
  height: 580px;
  margin-bottom: 48px;
}
.community-photo-main {
  position: absolute;
  left: 0; top: 0;
  width: 62%; height: 100%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.community-photo-main img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform .6s var(--ease-out-expo);
}
.community-photo-main:hover img { transform: scale(1.04); }

.community-photo-accent {
  position: absolute;
  right: 0; top: 64px;
  width: 44%; height: 88%;
  overflow: hidden;
  border: 5px solid var(--bg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}
.community-photo-accent img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform .6s var(--ease-out-expo);
}
.community-photo-accent:hover img { transform: scale(1.04); }

.community-accent-line {
  position: absolute;
  bottom: -28px; left: 0;
  width: 48px; height: 2px;
  background: var(--cyan);
}
.community-accent-line::after {
  content: '';
  position: absolute;
  left: 56px; top: 0;
  width: 8px; height: 2px;
  background: var(--cyan);
  opacity: .4;
}

@media (max-width: 600px) {
  .community-photo-stack { height: auto; margin-bottom: 0; }
  .community-photo-main { position: relative; width: 100%; height: 380px; }
  .community-photo-accent { position: relative; width: 80%; height: 260px; top: -40px; left: 20%; border-width: 4px; }
}

/* BRANDS --------------------------------------------------- */
/* Geen randen: de balk is lichtblauw tussen twee witte secties, dus de
   overgang blijkt al uit de kleur. Een streep erbij wordt een dubbele
   rand. */
.brands-bar {
  background: var(--bg2);
  padding: 40px 0; overflow: hidden;
}
.brands-label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted);
  text-align: center; margin-bottom: 32px; padding: 0 60px;
}
.brands-track { overflow: hidden; }
.brands-scroll {
  display: flex; gap: 64px; align-items: center;
  animation: brandScroll 32s linear infinite;
  width: max-content;
}
.brands-scroll:hover { animation-play-state: paused; }
@keyframes brandScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.brand-logo-item {
  display: flex; align-items: center;
  opacity: 0.22;
  transition: opacity .25s;
  flex-shrink: 0;
}
.brand-logo-item:hover { opacity: 0.65; }
.brand-logo-item img {
  height: 28px;
  width: auto;
  display: block;
  filter: grayscale(100%);
}

/* ABOUT ---------------------------------------------------- */
.about-teaser { background: var(--bg2); }
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: center;
}
.about-photo-stack { position: relative; height: 520px; }
.about-photo-main {
  position: absolute; top: 0; left: 0;
  width: 78%; height: 100%;
  overflow: hidden;
}
.about-photo-main img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.about-photo-accent {
  position: absolute; bottom: -32px; right: 0;
  width: 54%; height: 54%;
  border: 3px solid var(--bg2);
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
  overflow: hidden;
}
.about-photo-accent img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.about-accent-line {
  position: absolute; top: 40px; right: 28px;
  width: 2px; height: 90px;
  background: var(--cyan);
}
/* Twee alinea's onder elkaar. Alleen de eerste krijgt het streepje,
   anders wordt het een opsomming van accenten. */
.about-body {
  position: relative;
  font-size: var(--tekst-l); line-height: 1.7;
  color: var(--text-dim); font-weight: 400;
  margin-bottom: 20px; max-width: 30em;
}
.about-body:first-of-type {
  padding-top: 26px;
}
.about-body:first-of-type::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--cyan);
}

/* CTA BANNER ----------------------------------------------- */
.cta-banner {
  position: relative; overflow: hidden;
  padding: 110px 60px;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--cyan);
}
.cta-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.cta-content { position: relative; z-index: 1; }
.cta-overline {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
  margin-bottom: 12px;
}
.cta-headline {
  font-family: var(--font-head);
  font-size: var(--kop-4);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.92; letter-spacing: -0.0221em;
}
.cta-banner .btn-dark { position: relative; z-index: 1; }

/* FOOTER --------------------------------------------------- */
/* Geen bovenrand: de footer is lichtblauw en ligt onder de cyaan
   CTA-balk, dus daar valt niets te scheiden. */
#site-footer {
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}

/* Decoratief pompeblêd linksboven, volledig in beeld, met het logo
   erin. Bewust een omtrek en geen vulling: gevuld legt het een waas
   over het logo en wordt het een vlek in plaats van een vorm. De
   lijndikte zit via non-scaling-stroke op de SVG zelf, dus die blijft
   1,5px hoe groot het blad ook staat. Pointer-events uit zodat het
   nooit een link in de weg zit.

   Het blad staat schuin op 34,695 graden, de stand uit Pompebled.svg.
   De stand is bepalend voor hoe strak het in de hoek lijkt te liggen,
   want een pompeblêd is een ronde vorm met een inkeping. Alle 360
   standen doorgerekend op de holte die overblijft in de
   linkerbovenhoek: rechtop is met 11% het strakst, deze schuine stand
   zit op 17%, en met het inhammetje naar de hoek toe loopt het op naar
   41%. Die laatste zag er los uit, alsof het blad zweefde. Het
   omhullende vak op (0,0) zetten is dus niet genoeg, de stand moet ook
   kloppen.

   De translate haalt de 0,4 lucht weg die in de viewBox zit voor de
   lijndikte, zodat het blad zelf tegen de hoek ligt en niet het
   onzichtbare vak eromheen. Bewust procenten en geen pixels: een
   transform in procenten rekent met de eigen maat van het element,
   dus dit klopt bij elke waarde van width. Met vaste pixels viel het
   blad op mobiel net buiten de hoek en knipte de overflow van de
   footer de lijn daar af. */
.footer-pompebled {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-1.41%, -1.46%);
  width: clamp(190px, 19vw, 260px);
  height: auto;
  color: var(--cyan);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

.footer-inner { padding: 72px 60px 40px; position: relative; z-index: 1; }
/* Vijf kolommen sinds de kolom "Ook in de winkel" erbij kwam. Het
   merkblok links stond op 2fr, dat is teruggebracht omdat er anders
   te weinig overblijft voor de vijfde kolom. De tussenruimte is
   daarvoor ook iets kleiner. */
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 60px;
}
.footer-logo {
  height: 66px; width: auto;
  display: block; margin-bottom: 20px;
  opacity: .85;
}
.footer-tagline {
  font-size: var(--tekst-s); color: var(--muted);
  line-height: 1.7; max-width: 280px;
  font-weight: 400; margin-bottom: 24px;
}
.footer-socials { display: flex; gap: 16px; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  color: var(--muted); text-decoration: none;
  transition: border-color .2s, color .2s;
}
.social-link:hover { border-color: var(--cyan); color: var(--cyan); }
.footer-col-title {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 20px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-size: var(--tekst-s); color: rgba(17,17,17,0.4);
  text-decoration: none; transition: color .2s;
}
.footer-links a:hover { color: var(--cyan); }
.footer-bottom {
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-copy { font-size: var(--label); color: rgba(17,17,17,0.3); letter-spacing: 1px; }
.footer-copy a { color: var(--cyan-dim); text-decoration: none; }
.footer-copy a:hover { color: var(--cyan); }

/* DIENSTEN PAGINA ------------------------------------------ */
.dienst-section { overflow: hidden; }
.dienst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.dienst-grid--reverse .dienst-photo { order: 2; }
.dienst-grid--reverse .dienst-content { order: 1; }
.dienst-photo {
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.1);
}
.dienst-photo img {
  width: 100%; height: 480px;
  object-fit: cover; display: block;
  transition: transform .5s var(--ease-out-expo);
}
.dienst-photo:hover img { transform: scale(1.03); }
.dienst-step {
  font-family: var(--font-head);
  font-size: var(--cijfer-l); font-weight: 900;
  color: rgba(0,174,199,0.08);
  line-height: 1; letter-spacing: -3px;
  margin-bottom: -16px;
}
.dienst-title {
  font-family: var(--font-head);
  font-size: var(--kop-5); font-weight: 900;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text); line-height: 1.05;
  margin: 12px 0 20px;
}
/* Staat onder een eigen titel in een smallere kolom naast een foto,
   dus wel groter maar geen streepje. Drie diensten onder elkaar met
   elk een accent zou te druk worden. */
.dienst-intro {
  font-size: var(--tekst-l); line-height: 1.7;
  color: var(--text-dim); font-weight: 400;
  margin-bottom: 28px; max-width: 30em;
}
.dienst-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 36px;
}
.dienst-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: var(--tekst-s); color: var(--text-dim); line-height: 1.6;
}
.dienst-list li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); flex-shrink: 0; margin-top: 5px;
}
.dienst-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: var(--label); font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--cyan);
  text-decoration: none; transition: gap .2s;
}
.dienst-link:hover { gap: 14px; }

/* FootBalance sectie */
/* De sectie stond op 1100 terwijl de rest van de pagina op 1400 zit,
   waardoor hij smaller oogde dan zijn buren. Nu gelijk. */
.footbalance-tag-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.footbalance-logo { height: 28px; opacity: .55; flex-shrink: 0; }

/* Video links, de drie blokken rechts. */
.footbalance-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  margin-top: 40px;
}
/* Liggend, want de video van FootBalance is 1920x1080. Hier stond
   9/16 met object-fit cover, en dan sneed de browser tweederde van de
   breedte weg: het MyFootBalance-logo rechtsonder verdween en er bleef
   een close-up van een wit vlak over. Wordt de video ooit vervangen
   door een staande opname, dan moet deze verhouding mee. */
.footbalance-video-wrap {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schaduw);
  aspect-ratio: 16/9;
}
.footbalance-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.footbalance-grid {
  display: flex; flex-direction: column;
  gap: 28px;
}
.footbalance-block { display: flex; flex-direction: column; gap: 8px; }
.footbalance-block-title {
  font-family: var(--font-head);
  font-size: var(--tekst-m); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text);
}
.footbalance-block-desc {
  font-size: var(--tekst-s); line-height: 1.7;
  color: var(--text-dim); font-weight: 400;
}

/* De modellen staan nu op de volle breedte onder de video en de
   blokken. Een raster dat vanzelf afbreekt in plaats van drie vaste
   kolommen: bij drie naast elkaar op een telefoon werd elk plaatje
   nog geen honderd pixels breed. */
.footbalance-products {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.footbalance-product-label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 24px;
}
.footbalance-product-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}
.footbalance-product-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.footbalance-product-item img {
  width: 100%; max-width: 180px;
  height: auto;
  object-fit: contain; display: block;
}
.footbalance-product-item span {
  font-family: var(--font-head);
  font-size: var(--label); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
}

/* De intro van deze sectie is een losse alinea over de volle breedte
   en niet de kolomtekst van een dienstblok. Met de 30em van
   .dienst-intro bleef de rechterhelft leeg. */
.footbalance-section .dienst-intro { max-width: 62ch; }

@media (max-width: 1024px) {
  .dienst-grid { grid-template-columns: 1fr; gap: 48px; }
  .dienst-grid--reverse .dienst-photo { order: 0; }
  .dienst-grid--reverse .dienst-content { order: 0; }
  .footbalance-layout { grid-template-columns: 1fr; gap: 40px; }
  .footbalance-tag-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ── AANRAAKVLAKKEN ──────────────────────────────────────────────
   Op een telefoon bedien je de site met je duim. Deze knoppen en
   links waren 13 tot 24 pixels hoog, terwijl de richtlijn 44 bij 44
   is en de ondergrens 24 bij 24.

   Het vlak wordt vergroot met een onzichtbaar laagje over de knop
   heen, niet met extra marge. Zo blijft de vormgeving precies zoals
   hij is en wordt alleen het gebied waarop je kunt drukken groter. */
.service-link,
.service-link-cta,
.dienst-link,
.btn-ghost,
.reviews-footer-link,
.footer-cookie-link,
.winkelstrook-item,
.spage-feature-link,
.event-link,
.kb-card-link,
.notfound-card-link,
.spage-related-card-link,
.article-related-list a,
.footer-links a,
.subhero-breadcrumb a,
.reviews-dot,
.social-link {
  position: relative;
}
.service-link::after,
.service-link-cta::after,
.dienst-link::after,
.btn-ghost::after,
.reviews-footer-link::after,
.footer-cookie-link::after,
.winkelstrook-item::after,
.spage-feature-link::after,
.event-link::after,
.kb-card-link::after,
.notfound-card-link::after,
.spage-related-card-link::after,
.article-related-list a::after,
.footer-links a::after,
.subhero-breadcrumb a::after,
.social-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 44px;
  height: 100%;
}
/* De stippen staan 10px uit elkaar, dus een vlak van 44 breed zou dat
   van de buurman overlappen en klikken van elkaar afpakken. Alleen de
   hoogte oprekken, de breedte tot net binnen de tussenruimte. */
.reviews-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 44px;
}

/* SCROLL REVEAL -------------------------------------------- */
/* SCROLL PROGRESS BAR */
#scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--cyan);
  z-index: 9999;
  transition: width .1s linear;
  pointer-events: none;
}

/* REVEAL ANIMATIONS */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* TESTIMONIALS --------------------------------------------- */
.testimonials {
  background: var(--bg2);
  position: relative;
}
/* Deze sectie liep van rand tot rand terwijl de rest van de site op
   1400 zit. Op een breed scherm werd de kop daardoor bijna 1800 breed
   en bleef "Wat hardlopers zeggen" alleen in de linkerhoek hangen,
   met de halve sectie leeg ernaast. De kaarten rekten mee en stonden
   half leeg. Dezelfde maat als elders lost dat op. */
.testimonials > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.testimonials::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,174,199,0.15), transparent);
}
/* Kop links, het Google-vlaggetje rechts op dezelfde onderlijn. Het
   stond eronder, waardoor de hele rechterhelft van de sectie leeg
   bleef en het geheel uit elkaar viel. */
.testimonials-header {
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
}
/* Dat deze reviews van Google komen is het sterkste bewijs op deze
   pagina, en dat stond er als grijze voetnoot van 11px bij. Nu een
   herkenbaar keurmerkje: iets groter, leesbaar gezet en op een eigen
   vlakje zodat het als bron leest en niet als bijschrift. */
.testimonials-google-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: var(--bg2);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: var(--tekst-xs); font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.reviews-stage {
  display: block;
}
/* Pijlen en stippen op één rij onder de slider. Zo houden de kaarten
   de volle breedte van de sectie. */
.reviews-bediening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}
/* De tussenruimte staat als variabele omdat hij op drie plekken moet
   kloppen: hier, in de breedte van .testimonial-card (twee kaarten
   plus een tussenruimte moeten precies passen) en in de stapgrootte
   van de slider in main.js. Die laatste leest hem uit de opmaak.
   Stond eerder als 2px, 4px en 2 los van elkaar in de code, en toen ik
   alleen deze op 24 zette pasten er nog maar 2,9 kaarten in beeld. */
.reviews-track {
  --reviews-gap: 24px;
  flex: 1;
  display: flex;
  gap: var(--reviews-gap);
  overflow: hidden;
}
.reviews-prev,
.reviews-next {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 20px 4px;
  cursor: pointer;
  color: var(--cyan);
  display: flex; align-items: center;
  transition: opacity .3s, transform .4s cubic-bezier(.25,.46,.45,.94);
}
.reviews-prev {
  transform: perspective(700px) rotateY(22deg);
  transform-origin: right center;
}
.reviews-next {
  transform: perspective(700px) rotateY(-22deg);
  transform-origin: left center;
}
.reviews-prev:hover:not(:disabled) {
  transform: perspective(700px) rotateY(22deg) translateX(-6px);
}
.reviews-next:hover:not(:disabled) {
  transform: perspective(700px) rotateY(-22deg) translateX(6px);
}
.reviews-prev:disabled,
.reviews-next:disabled { opacity: .12; cursor: default; }

/* ── STIPPEN ONDER DE REVIEWS ────────────────────────────────────
   Verving de teller met voortgangsbalk. Die telde hoeveel reviews je
   gezien had, dus met drie kaarten naast elkaar begon hij op 03
   terwijl er 07 naast stond. Een stip per stand kan dat niet fout
   doen, en er zit geen rood meer in.

   De knop is 8 bij 24 en het streepje zit erin als ::before. Zo is er
   24px om aan te tikken zonder dat de stip zelf groter wordt. De
   stand waar je staat rekt uit tot een liggend streepje, dat leest
   duidelijker dan alleen een kleurverschil.
   ───────────────────────────────────────────────────────────── */
.reviews-dots {
  display: flex; justify-content: center;
  /* 16 in plaats van 10, zodat het aanraakvlak van elke stip 24 breed
     kan zijn zonder dat van de buurstip te overlappen. */
  gap: 16px;
  margin-top: 40px;
}
.reviews-dot {
  width: 8px; height: 24px;
  padding: 0; border: none; background: none;
  cursor: pointer;
  position: relative;
  transition: width .35s var(--ease-out-expo);
}
.reviews-dot::before {
  content: '';
  position: absolute; inset: 8px 0;
  border-radius: 999px;
  background: rgba(17,17,17,0.16);
  transition: background .25s;
}
.reviews-dot:hover::before { background: rgba(17,17,17,0.34); }
.reviews-dot.is-actief { width: 28px; }
.reviews-dot.is-actief::before,
.reviews-dot.is-actief:hover::before { background: var(--cyan); }

.reviews-footer {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 32px;
}
.reviews-footer-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: var(--tekst-xs); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transition: color .2s;
}
.reviews-footer-link:hover { color: var(--cyan); }
.reviews-footer-divider {
  color: var(--border);
  font-size: var(--tekst-l); line-height: 1;
}
.reviews-footer-write { color: var(--muted); }
.reviews-footer-write:hover { color: var(--cyan); }
/* ── REVIEWKAARTEN ───────────────────────────────────────────────
   Er stonden er drie naast elkaar. Op de beschikbare 937px werd een
   kaart daarmee 296 breed, min de padding blijft er 224px tekst over,
   en dat is bij 17px zo'n 29 tekens per regel. Comfortabel lezen
   begint rond de 45. Vandaar dat het las als snippers tekst in hokjes
   in plaats van als een citaat.

   Nu twee naast elkaar: 456px per kaart, 384px tekst, ongeveer 50
   tekens per regel. De kaart is daarmee ook breder dan hoog, wat het
   dozengevoel wegneemt. main.js toont er nog maar twee tegelijk, dat
   getal staat daar.

   De inhoud staat als één blok in het midden. Eerder hingen de
   sterren bovenaan en de naam onderaan met de tekst zwevend
   daartussen, en bij een korte review viel dat uit elkaar. Zo blijft
   een korte review een compact geheel.

   De cyaan streep bovenaan is nodig, niet decoratief. Lichtblauw op
   wit is een contrast van 1,09 op 1, dus zonder die streep heeft de
   kaart geen zichtbare bovenrand. Zelfde gebaar als bij .kb-card.
   ───────────────────────────────────────────────────────────── */
.testimonial-card {
  flex: 0 0 calc((100% - var(--reviews-gap) * 2) / 3);
  min-width: 0;
  background: var(--bg);
  padding: 40px 36px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 26px;
  position: relative; overflow: hidden;
  transition: background .3s;
}
.testimonial-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cyan);
}
/* Zweven maakt de kaart wit in plaats van donkerder: hij komt naar je
   toe. De cyaan streep blijft dan als enige rand over en dat werkt. */
.testimonial-card:hover { box-shadow: var(--schaduw-hover); }

.testimonial-stars { display: flex; gap: 5px; }
.testimonial-stars svg { width: 17px; height: 17px; }

/* De quote stond op --text-dim, de kleur voor bijzinnen. Maar dit ís
   de inhoud: wat iemand hier komt lezen is precies deze tekst. Op de
   gewone tekstkleur leest hij als bewijs in plaats van als
   onderschrift, en het contrast komt boven de norm uit. */
.testimonial-quote {
  font-size: var(--tekst-l);
  line-height: 1.7;
  color: var(--text);
  font-weight: 400;
  font-style: normal;
}

.testimonial-author {
  display: flex; align-items: center; gap: 15px;
}
/* Geen randje meer om de avatar. Die haarlijn op 20% cyaan was net
   zichtbaar genoeg om rommelig te zijn en niet genoeg om iets te
   doen. De vulling is verdubbeld, de letters staan in --link zodat
   de initialen ook echt leesbaar zijn. */
.author-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(0,174,199,0.16);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: var(--tekst-s); font-weight: 700;
  letter-spacing: .5px;
  color: var(--link); flex-shrink: 0;
}
.author-name {
  font-family: var(--font-head);
  font-size: var(--tekst-m); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text);
}
.author-meta {
  font-size: var(--tekst-xs); letter-spacing: .3px;
  color: var(--muted); margin-top: 3px;
}

/* De opmaak van .store-info-bar stond hier. Dat blok is van de
   homepage gehaald omdat het adres, de openingstijden en het
   telefoonnummer daarna nog een keer in de winkelstrook stonden.
   Zie de opmerking in front-page.php. */

/* ============================================================
   SUBPAGES
   ============================================================ */

/* Nav: altijd wit op inner pages zonder subhero */
body.page:not(.has-subhero) #site-nav,
body.single:not(.has-subhero) #site-nav {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  padding: 16px 60px;
}
body.page:not(.has-subhero) #site-nav .nav-links a,
body.single:not(.has-subhero) #site-nav .nav-links a { color: var(--muted); }
body.page:not(.has-subhero) #site-nav .nav-links a:hover,
body.single:not(.has-subhero) #site-nav .nav-links a:hover { color: var(--text); }
body.page:not(.has-subhero) #site-nav .nav-cta,
body.single:not(.has-subhero) #site-nav .nav-cta { color: var(--cyan); border-color: rgba(0,174,199,0.4); }
body.page:not(.has-subhero) #site-nav .nav-logo-img,
body.single:not(.has-subhero) #site-nav .nav-logo-img { filter: none; }

/* Nav: transparant op subhero-paginas, wit na scrollen */
body.has-subhero #site-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 28px 60px;
}
body.has-subhero #site-nav .nav-links a { color: rgba(255,255,255,0.82); }
body.has-subhero #site-nav .nav-links a:hover { color: #fff; }
body.has-subhero #site-nav .nav-cta { color: #fff; border-color: rgba(255,255,255,0.35); }
body.has-subhero #site-nav .nav-logo-img { filter: brightness(0) invert(1); }
body.has-subhero #site-nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  padding: 16px 60px;
}
body.has-subhero #site-nav.scrolled .nav-links a { color: var(--muted); }
body.has-subhero #site-nav.scrolled .nav-links a:hover { color: var(--text); }
body.has-subhero #site-nav.scrolled .nav-cta { color: var(--cyan); border-color: rgba(0,174,199,0.4); }
body.has-subhero #site-nav.scrolled .nav-logo-img { filter: none; }

/* Subpage hero */
/* De inhoud hangt onderaan, zodat de onderkant op elke pagina op
   dezelfde hoogte zit ongeacht hoe lang de kop is. Dat werkte, tot
   een kop van drie regels meer ruimte vroeg dan er was. De bovenmarge
   stond op nul, dus dan schuift de bovenkant gewoon onder de vaste
   menubalk door. Nu is er altijd minstens de hoogte van die balk plus
   32px lucht, en groeit de subhero mee als een kop langer is. */
.subhero {
  position: relative;
  min-height: 65vh;
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-hoogte) + 32px) 60px 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.subhero-overlay {
  position: absolute; inset: 0;
  /* Stond bovenaan op 22 procent terwijl het kruimelpad en het kopje
     daar juist staan. Gemeten kwam dat kopje op 2,16 op 1 uit, ruim
     onder de 4,5 die tekst nodig heeft. Nu loopt de laag van 90 naar
     58 procent. */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.90) 0%,
    rgba(0,0,0,0.70) 45%,
    rgba(0,0,0,0.58) 100%
  );
  pointer-events: none;
}
.subhero-content {
  position: relative; z-index: 2;
  max-width: 860px;
}
.subhero-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 24px;
}
.subhero-breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color .2s; }
.subhero-breadcrumb a:hover { color: var(--cyan); }
.subhero-breadcrumb-sep { color: rgba(255,255,255,0.25); }
.subhero-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 4px;
  text-transform: uppercase; color: var(--cyan-licht);
  margin-bottom: 20px;
}
.subhero-title {
  font-family: var(--font-head);
  font-size: var(--kop-2);
  font-weight: 900;
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 24px;
  /* De winkel kan deze kop zelf aanpassen. Past een woord niet op
     een smal scherm, dan breekt hij af in plaats van dat hij het
     scherm uit loopt. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Het laatste deel van een paginakop, gezet door ar_kop_accent(). */
.kop-accent { color: var(--cyan); }

.subhero-desc {
  font-size: var(--tekst-l); line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin-bottom: 40px;
  font-weight: 300;
}

/* Generieke subpage sectie wrapper */
.spage-section { padding: 100px 60px; }
.spage-section-inner { max-width: 1400px; margin: 0 auto; }

/* Intro split: tekst + foto */
.spage-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.spage-intro-body {
  font-size: var(--tekst-m); line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 20px; max-width: 34em;
}
.spage-intro-photo {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.spage-intro-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out-expo);
}
.spage-intro-photo:hover img { transform: scale(1.03); }
.spage-intro-accent {
  position: absolute;
  bottom: -24px; right: -24px;
  width: 46%;
  aspect-ratio: 1;
  border: 4px solid var(--bg);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.spage-intro-accent img { width: 100%; height: 100%; object-fit: cover; }
.spage-intro-line {
  position: absolute;
  top: 24px; left: -4px;
  width: 3px; height: 72px;
  background: var(--cyan);
}

/* Features kaarten */
.spage-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}

/* Variant met drie kaarten in plaats van vier. Gebruikt op
   /schaatsen/, waar de verhuurkaart eruit ging omdat we dat niet meer
   doen. Zonder dit blijft de vierde kolom leeg staan. */
.spage-features-grid--drie { grid-template-columns: repeat(3, 1fr); }
.spage-feature {
  padding: 36px 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  position: relative;
  transition: box-shadow .25s, border-color .25s;
}
.spage-feature:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
  border-color: var(--border-cyan);
}
/* Variant waarbij de hele kaart een link is. Zo hoeft er geen blauwe
   link in de lopende tekst te staan om ergens te komen. */
.spage-feature--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.spage-feature--link .spage-feature-desc { flex: 1; }
.spage-feature-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-family: var(--font-head);
  font-size: var(--label); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--link);
  transition: gap .25s var(--ease-out-expo);
}
.spage-feature--link:hover .spage-feature-link { gap: 14px; }

.spage-feature::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--cyan);
  transition: height .35s var(--ease-out-expo);
}
.spage-feature:hover::before { height: 100%; }
.spage-feature-icon { color: var(--cyan); margin-bottom: 20px; }
.spage-feature-title {
  font-family: var(--font-head);
  font-size: var(--tekst-l); font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 12px;
}
.spage-feature-desc { font-size: var(--tekst-s); line-height: 1.7; color: var(--text-dim); }

/* Stappen grid (3 kolommen) */
.spage-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
}
.spage-step { padding: 52px 44px; background: var(--bg); }
.spage-step-num {
  font-family: var(--font-head);
  font-size: var(--cijfer-l); font-weight: 900;
  color: var(--bg3); line-height: 1;
  margin-bottom: 20px; letter-spacing: -4px;
}
.spage-step-title {
  font-family: var(--font-head);
  font-size: var(--tekst-2xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 12px;
}
.spage-step-desc { font-size: var(--tekst-m); line-height: 1.75; color: var(--text-dim); }

/* Meetwaarden grid (4 kolommen) */
.spage-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 56px;
}
.spage-metric { padding: 44px 36px; }
.spage-metric-icon { color: var(--cyan); margin-bottom: 16px; }
.spage-metric-title {
  font-family: var(--font-head);
  font-size: var(--tekst-xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 10px;
}
.spage-metric-desc { font-size: var(--tekst-s); line-height: 1.7; color: var(--text-dim); }

/* Gerelateerde diensten */
.spage-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 56px;
}
.spage-related-card {
  position: relative; overflow: hidden;
  aspect-ratio: 16/8;
  display: block; text-decoration: none;
}
.spage-related-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s var(--ease-out-expo);
}
.spage-related-card:hover img { transform: scale(1.05); }
.spage-related-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.18) 60%, transparent 100%);
  transition: background .4s;
}
.spage-related-card:hover .spage-related-card-overlay {
  background: linear-gradient(to top, rgba(0,174,199,0.88) 0%, rgba(0,174,199,0.3) 60%, transparent 100%);
}
.spage-related-card-content {
  position: absolute; bottom: 36px; left: 40px; right: 40px;
}
.spage-related-card-num {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 8px; transition: color .3s;
}
.spage-related-card:hover .spage-related-card-num { color: rgba(255,255,255,0.7); }
.spage-related-card-title {
  font-family: var(--font-head);
  font-size: var(--kop-5);
  font-weight: 900; text-transform: uppercase;
  color: #fff; letter-spacing: -0.0227em;
  margin-bottom: 16px;
}
.spage-related-card-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: var(--tekst-xs); letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  transition: color .2s, gap .2s;
}
.spage-related-card:hover .spage-related-card-link { color: #fff; gap: 12px; }

/* ============================================================
   EVENTS
   ============================================================ */

/* Ook naar 24px, want .event-card heeft sinds de nieuwe schaduw een
   haarlijn om zich heen. Zie de opmerking bij .services-grid.
   De stappen- en cijferstroken hieronder houden hun naad van 2px:
   die hebben geen rand en horen ook aan elkaar vast te zitten. */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.event-card {
  background: var(--bg);
  padding: 40px 36px;
  display: flex; flex-direction: column;
  position: relative;
  transition: box-shadow .25s;
}
.event-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.07); }
.event-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out-expo);
}
.event-card:hover::before { transform: scaleX(1); }
.event-date-badge {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--cyan);
  color: #fff;
  padding: 10px 16px;
  margin-bottom: 24px;
  align-self: flex-start;
  min-width: 64px;
  text-align: center;
}
.event-date-day {
  font-family: var(--font-head);
  font-size: var(--cijfer-s); font-weight: 900;
  line-height: 1;
}
.event-date-month {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2px;
  text-transform: uppercase;
}

/* Bovenkant van een eventkaart: datumblokje links, voorproefje van de
   flyer rechts. De flyer is meestal staand, dus we geven hem een vaste
   breedte en laten de hoogte vrij. Bijsnijden doen we niet: dan valt
   precies de tekst van de poster weg. */
.event-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.event-card-top .event-date-badge { margin-bottom: 0; }
.event-card-flyer {
  flex: 0 0 auto;
  width: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg2);
  box-shadow: var(--schaduw);
  transition: transform .25s var(--ease-out-expo);
}
.event-card:hover .event-card-flyer { transform: translateY(-3px); }
.event-card-flyer img { display: block; width: 100%; height: auto; }
.event-tag {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.event-title {
  font-family: var(--font-head);
  font-size: var(--tekst-2xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 12px;
  flex: 1;
}
.event-meta {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 24px;
}
.event-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--tekst-s); color: var(--text-dim);
}
.event-meta-item svg { color: var(--cyan); flex-shrink: 0; }
.event-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: var(--tekst-xs); letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  transition: gap .2s;
  align-self: flex-start;
}
.event-link:hover { gap: 12px; }


/* ============================================================
   KENNISBANK
   ============================================================ */

.kb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.kb-card {
  background: var(--bg);
  padding: 40px 36px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  position: relative;
  transition: box-shadow .25s;
}
/* Eigen zweefschaduw stond hier ooit. Die werd al overschreven door
   het blok KAARTSCHADUW onderaan dit bestand, dus hij deed niets. */
.kb-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out-expo);
}
.kb-card:hover::before { transform: scaleX(1); }

/* ── CATEGORIEKAART OP DE ASSORTIMENTPAGINA ──────────────────────
   Die pagina had alleen tekstkaarten en oogde daardoor kaal. Er zijn
   geen productfoto's, dus in plaats van nietszeggende sfeerbeelden
   krijgt elke categorie een icoon, en de categorieën waarvan we de
   merken voeren tonen die merklogo's. Dat is echt materiaal in plaats
   van opvulling. */
.kb-card--categorie { gap: 0; }
.kb-card-icoon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--cyan);
  transition: background .25s, color .25s;
}
.kb-card--categorie:hover .kb-card-icoon {
  background: var(--cyan);
  color: #fff;
}
.kb-card-merken {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 22px;
  margin: 4px 0 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.kb-card-merken img {
  /* Een maximum op de breedte, want de logo's verschillen enorm van
     verhouding: Salomon werd 175px breed en New Balance 20px, en dan
     slokt één merk de halve rij op. */
  height: 20px; width: auto;
  max-width: 96px;
  object-fit: contain;
  display: block;
  opacity: .3;
  filter: grayscale(100%);
  transition: opacity .25s;
}
.kb-card--categorie:hover .kb-card-merken img { opacity: .5; }
.kb-card-tag {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 16px;
}
.kb-card-title {
  font-family: var(--font-head);
  font-size: var(--tekst-2xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  line-height: 1.2; margin-bottom: 16px; flex: 1;
}
.kb-card-excerpt {
  font-size: var(--tekst-s); line-height: 1.7;
  color: var(--text-dim); margin-bottom: 28px;
}
.kb-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.kb-card-link {
  display: flex; align-items: center; gap: 6px;
  color: var(--cyan); transition: gap .2s;
}
.kb-card:hover .kb-card-link { gap: 10px; }

/* ── KENNISBANK OP DE HOMEPAGE ───────────────────────────────────
   Dezelfde kaarten als op /kennisbank/, maar dan als blok op de
   voorpagina. De artikelen stonden nergens op de home, terwijl dat
   het enige is op de site waaruit blijkt dat we het vak kennen. Een
   review zegt dat iemand aardig geholpen is, een artikel over
   pronatie laat zien waarom.

   Wit, want de sectie erboven is lichtblauw. Eigen wrapper op 1400
   omdat de kaarten anders op een breed scherm uit elkaar trekken.
   ───────────────────────────────────────────────────────────── */
.kb-teaser { background: var(--bg); }
.kb-teaser-inner { max-width: 1400px; margin: 0 auto; }
.kb-teaser-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}
/* Zelfde maat en kleur als .services-intro. Op 16px lichtgrijs valt
   een alinea naast een kop van 77px in gewicht 900 volledig weg. */
.kb-teaser-intro {
  font-size: var(--tekst-l);
  line-height: 1.75;
  color: var(--text-dim);
}
.kb-teaser-footer { margin-top: 48px; }

/* Artikel layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: start;
}
.article-label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 16px; display: block;
}
.article-h1 {
  font-family: var(--font-head);
  font-size: var(--kop-4);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.0333em; line-height: .92;
  margin-bottom: 32px;
}
.article-intro {
  font-size: var(--tekst-l); line-height: 1.7;
  color: var(--text-dim); font-weight: 400;
  max-width: 640px; margin-bottom: 48px;
  padding-bottom: 48px;
}
.article-body { max-width: 680px; }
.article-body h2 {
  font-family: var(--font-head);
  font-size: var(--kop-6);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.0167em; margin: 48px 0 16px;
}
.article-body h3 {
  font-family: var(--font-head);
  font-size: var(--tekst-l); font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  margin: 32px 0 12px; color: var(--cyan);
}
.article-body p {
  font-size: var(--tekst-m); line-height: 1.75;
  color: var(--text-dim); margin-bottom: 20px;
}
.article-body ul,
.article-body ol {
  margin: 0 0 20px 0; padding-left: 20px;
}
.article-body li {
  font-size: var(--tekst-m); line-height: 1.75;
  color: var(--text-dim); margin-bottom: 8px;
}
.article-body strong { color: var(--text); font-weight: 600; }
.article-callout {
  background: var(--bg2);
  border-left: 3px solid var(--cyan);
  padding: 24px 28px;
  margin: 32px 0;
  font-size: var(--tekst-m); line-height: 1.75;
  color: var(--text-dim);
}
.article-callout strong { color: var(--text); }

.article-sidebar { position: sticky; top: 100px; }
.article-cta-box {
  background: var(--bg2);
  padding: 36px 32px;
  margin-bottom: 32px;
}
.article-cta-box-tag {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 12px;
}
.article-cta-box-title {
  font-family: var(--font-head);
  font-size: var(--tekst-xl); font-weight: 800;
  text-transform: uppercase; letter-spacing: .2px;
  margin-bottom: 12px;
}
.article-cta-box-desc {
  font-size: var(--tekst-s); line-height: 1.7;
  color: var(--text-dim); margin-bottom: 24px;
}
.article-related-title {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 16px;
}
.article-related-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.article-related-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: var(--bg2);
  font-family: var(--font-head);
  font-size: var(--tekst-s); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--text); text-decoration: none;
  transition: background .2s, color .2s;
}
.article-related-list a:hover { background: var(--bg3); color: var(--cyan); }

/* ============================================================
   FAQ
   ============================================================ */

.faq-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 56px;
}
.faq-sidebar { position: sticky; top: 100px; }
.faq-sidebar-title {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 16px;
}
.faq-sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.faq-sidebar-nav a {
  font-family: var(--font-head);
  font-size: var(--tekst-s); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); text-decoration: none;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--border);
  display: block; transition: color .2s, border-color .2s;
}
.faq-sidebar-nav a:hover { color: var(--cyan); border-left-color: var(--cyan); }

.faq-categories { display: flex; flex-direction: column; gap: 56px; }
.faq-category-label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 20px; display: block;
}
.faq-category-heading {
  font-family: var(--font-head);
  font-size: var(--kop-5);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.0278em; margin-bottom: 24px;
}
.article-faq {
  margin-top: 56px;
  padding-top: 48px;
}
.article-faq-title {
  font-family: var(--font-head);
  font-size: var(--tekst-2xl); font-weight: 900;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 24px;
}
.article-faq-items { display: flex; flex-direction: column; gap: 2px; }
.article-faq summary.faq-question {
  display: flex; justify-content: space-between; align-items: center;
}
.article-faq summary.faq-question::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform .25s;
  flex-shrink: 0; margin-left: 16px;
}
.article-faq details[open] summary.faq-question::after {
  transform: rotate(-135deg);
}

.faq-list { display: flex; flex-direction: column; gap: 2px; }

details.faq-item {
  background: var(--bg2);
  border-left: 3px solid transparent;
  transition: border-color .2s;
}
details.faq-item[open] { border-left-color: var(--cyan); }

summary.faq-question {
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--font-head);
  font-size: var(--tekst-m); font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  user-select: none;
}
summary.faq-question::-webkit-details-marker { display: none; }
summary.faq-question::marker { display: none; }

.faq-chevron { flex-shrink: 0; color: var(--cyan); transition: transform .25s var(--ease-out-expo); }
details[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  padding: 0 28px 28px 28px;
  font-size: var(--tekst-m); line-height: 1.75;
  color: var(--text-dim);
}
.faq-answer p + p { margin-top: 12px; }

/* ============================================================
   OVER ONS PAGINA
   ============================================================ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
  margin-top: 56px;
}
.team-card { text-align: center; }
.team-avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--bg2);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--font-head);
  font-size: var(--cijfer-s); font-weight: 800;
  color: var(--cyan);
  position: relative; overflow: hidden;
  transition: border-color .25s;
}
.team-card:hover .team-avatar { border-color: var(--cyan); }
.team-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.team-name {
  font-family: var(--font-head);
  font-size: var(--tekst-xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 6px;
}
.team-role {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.usp-item {
  padding: 48px 44px;
  background: var(--bg);
  display: flex; gap: 28px; align-items: flex-start;
}
.usp-icon { color: var(--cyan); flex-shrink: 0; padding-top: 2px; }
.usp-title {
  font-family: var(--font-head);
  font-size: var(--tekst-xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 10px;
}
.usp-desc { font-size: var(--tekst-m); line-height: 1.75; color: var(--text-dim); }

/* ============================================================
   CONTACTPAGINA
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: start;
}
.contact-form-intro {
  font-size: var(--tekst-m); line-height: 1.75;
  color: var(--text-dim);
  max-width: 520px;
  margin-bottom: 40px;
}
.contact-info-col {
  background: var(--bg2);
  padding: 48px 40px;
}
.contact-info-block {
  padding-bottom: 28px;
  margin-bottom: 28px;
}
.contact-info-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.contact-info-icon { color: var(--cyan); margin-bottom: 12px; }
.contact-info-label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.contact-info-val {
  font-size: var(--tekst-m); line-height: 1.6; color: var(--text);
}
.contact-info-val a { color: var(--text); text-decoration: none; transition: color .2s; }
.contact-info-val a:hover { color: var(--cyan); }

/* Contact Form 7 */
.wpcf7-form p { margin-bottom: 0; }
.wpcf7-form br { display: none; }
.cf7-field {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
}
.cf7-field label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"] {
  width: 100%;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--tekst-m); color: var(--text);
  outline: none;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
  display: block;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus {
  border-color: var(--cyan);
  background: var(--bg);
}
.wpcf7-form input[type="submit"] {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 40px;
  background: var(--cyan);
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--tekst-m); letter-spacing: 2.5px;
  text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background .25s;
  margin-top: 8px;
  -webkit-appearance: none;
}
.wpcf7-form input[type="submit"]:hover { background: var(--cyan-dim); }
.wpcf7-not-valid-tip {
  font-size: var(--tekst-s); color: #e05555;
  margin-top: 4px; display: block;
}
.wpcf7-response-output {
  margin-top: 24px; padding: 16px 20px;
  font-size: var(--tekst-s); border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
}
.wpcf7-mail-sent-ok { border-left-color: #22a35a; }
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng { border-left-color: #e05555; }
.wpcf7-spinner { display: none !important; }

/* COMMUNITY RUN FORMULIER ---------------------------------- */
.cr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: start;
}
.cr-form-desc {
  font-size: var(--tekst-m); line-height: 1.75;
  color: var(--text-dim); font-weight: 400;
  margin: 16px 0 28px;
}
.cr-form-details { display: flex; flex-direction: column; gap: 12px; }
.cr-form-detail-item {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--tekst-s); color: var(--text-dim);
}
.cr-form {
  display: flex; flex-direction: column; gap: 20px;
}
.cf7-row { display: flex; flex-direction: column; gap: 8px; }
.cf7-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf7-field { display: flex; flex-direction: column; gap: 8px; }
.cf7-label {
  font-family: var(--font-head);
  font-size: var(--label); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
}
.cf7-req { color: var(--cyan); }
.cf7-input {
  width: 100%; padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-family: var(--font-body); font-size: var(--tekst-m);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
  appearance: none;
}
.cf7-input:focus { border-color: var(--cyan); }
.cf7-select { cursor: pointer; }
.cf7-textarea { resize: vertical; min-height: 100px; }
.cf7-checkbox-label {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: var(--tekst-s); color: var(--muted); line-height: 1.6;
  cursor: pointer;
}
.cf7-checkbox-label input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  accent-color: var(--cyan);
  width: 16px; height: 16px;
}
.cr-form-submit { display: flex; flex-direction: column; gap: 16px; }
.cr-form-status {
  font-size: var(--tekst-s); padding: 12px 16px;
  border-left: 3px solid transparent;
}
.cr-status-ok { border-left-color: #22a35a; color: #22a35a; background: rgba(34,163,90,0.06); }
.cr-status-err { border-left-color: #e05555; color: #e05555; background: rgba(224,85,85,0.06); }

/* HANDGETEKEND PIJLTJE naar aanmeldknop -------------------- */
.community-cta {
  position: relative;
  display: inline-block;
}
.scribble-arrow {
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  width: 150px; height: auto;
  transform: translateY(-58%) rotate(4deg);
  overflow: visible;
  pointer-events: none;
}
.scribble-path,
.scribble-head {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribble-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s var(--ease-out-expo) .2s;
}
.scribble-head {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .3s ease 1.05s;
}
.community-cta.visible .scribble-path,
.community-cta.visible .scribble-head {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .scribble-path,
  .scribble-head { transition: none; stroke-dashoffset: 0; }
}

@media (max-width: 1024px) {
  .cr-form-grid { grid-template-columns: 1fr; gap: 48px; }
  .cf7-row--2 { grid-template-columns: 1fr; }
}

/* MOBILE --------------------------------------------------- */
@media (max-width: 1024px) {
  /* 24 + 66 logo + 24 */
  :root { --nav-hoogte: 114px; }
  #site-nav { padding: 24px 32px; }
  #site-nav.scrolled { padding: 14px 32px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  section { padding: 80px 32px; }

  .hero { padding: 0 32px; }
  .hero-content { max-width: 100%; padding-right: 0; }

  .services-header { grid-template-columns: 1fr; gap: 32px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .kb-teaser-header { grid-template-columns: 1fr; gap: 32px; }
  .scribble-arrow { display: none; }
  .community-inner,
  .about-inner { grid-template-columns: 1fr; gap: 60px; }

  .testimonial-card { flex: 0 0 calc((100% - var(--reviews-gap)) / 2); }
  .reviews-stage { gap: 16px; }
  .reviews-prev,
  .reviews-next { padding: 16px 0; }
  .reviews-prev svg,
  .reviews-next svg { width: 44px; height: 20px; }
  .testimonials-header { grid-template-columns: 1fr; gap: 24px; justify-items: start; }

  .about-photo-stack { height: 340px; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .cta-banner { flex-direction: column; padding: 72px 32px; text-align: center; }

  body.page:not(.has-subhero) #site-nav,
  body.single:not(.has-subhero) #site-nav { padding: 14px 32px; }
  body.has-subhero #site-nav { padding: 24px 32px; }
  body.has-subhero #site-nav.scrolled { padding: 14px 32px; }

  .subhero { padding: calc(var(--nav-hoogte) + 28px) 32px 60px; }
  .spage-section { padding: 80px 32px; }
  .spage-intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .spage-intro-accent { display: none; }
  .spage-features-grid { grid-template-columns: 1fr 1fr; }
  .spage-steps-grid { grid-template-columns: 1fr; gap: 2px; }
  .spage-metrics-grid { grid-template-columns: 1fr 1fr; }
  .spage-related-grid { grid-template-columns: 1fr; }
  .spage-related-card { aspect-ratio: 16/7; }

  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-info-col { padding: 36px 28px; }

  .team-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .usp-grid { grid-template-columns: 1fr; }
  .usp-item { padding: 36px 32px; }

  .events-grid { grid-template-columns: 1fr 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-sidebar { position: static; display: none; }
  .kb-grid { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: 1fr; gap: 48px; }
  .article-sidebar { position: static; }
}

@media (max-width: 640px) {
  .testimonial-card { flex: 0 0 100%; }
  /* Deze twee stonden hierboven al op een kolom, maar in hetzelfde blok
     als de tweekolomsvariant, en die staat daar later en won dus altijd.
     Gevolg: op een telefoon van 375px werden de kaarten 156px breed en
     viel de tekst in flarden uiteen. */
  .events-grid { grid-template-columns: 1fr; }
  .kb-grid { grid-template-columns: 1fr; }

  section { padding: 60px 20px; }
  .hero { padding: 0 20px; }
  /* 20 + 66 logo + 20 */
  :root { --nav-hoogte: 106px; }
  #site-nav { padding: 20px; }
  #site-nav.scrolled { padding: 12px 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .community-photo-main { grid-row: auto; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-inner { padding: 48px 20px 32px; }
  .cta-banner { padding: 60px 20px; }

  body.page:not(.has-subhero) #site-nav,
  body.single:not(.has-subhero) #site-nav { padding: 12px 20px; }
  body.has-subhero #site-nav { padding: 20px; }
  body.has-subhero #site-nav.scrolled { padding: 12px 20px; }
  .subhero { padding: calc(var(--nav-hoogte) + 24px) 20px 52px; min-height: 55vh; }
  .spage-section { padding: 60px 20px; }
  .spage-features-grid { grid-template-columns: 1fr; }
  .spage-metrics-grid { grid-template-columns: 1fr 1fr; }
  .spage-related-card-content { bottom: 24px; left: 24px; right: 24px; }

  /* Pijlen weg op een telefoon. Ze aten 120 van de 335 beschikbare
     pixels op, dus bleef er van een reviewkaart 215 over. Sturen doe
     je hier met een veeg, en dat werkte al, of met de stippen. Ze
     staan op display:none en niet uit de opmaak, want main.js zet er
     nog wel disabled op als je aan het begin of het einde staat.

     De stippen krijgen wat meer lucht omdat ze hier de enige knoppen
     zijn. 8px breed met 10px ertussen is prima om naar te kijken maar
     krap om met een duim te raken. */
  .reviews-prev,
  .reviews-next { display: none; }
  .reviews-dots { gap: 16px; }
}

/* ============================================================
   SYSTEEMPAGINA'S: 404, ZOEKEN, LOSSE EVENTS, JURIDISCH
   ============================================================ */

/* TOEGANKELIJKHEID ----------------------------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* PROSE LINKS ---------------------------------------------- */
.article-body a {
  color: var(--cyan-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--border-cyan);
  transition: color .2s, border-color .2s;
}
.article-body a:hover { color: var(--cyan); border-color: var(--cyan); }

/* ZOEKFORMULIER -------------------------------------------- */
.ar-searchform {
  display: flex;
  max-width: 560px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color .25s;
}
.ar-searchform:focus-within { border-color: var(--cyan); }
.ar-searchform-input {
  flex: 1;
  padding: 18px 20px;
  border: none; outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--tekst-m); color: var(--text);
}
.ar-searchform-input::placeholder { color: var(--text-faint); }
.ar-searchform-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 26px;
  border: none; cursor: pointer;
  background: var(--text); color: #fff;
  font-family: var(--font-head);
  font-size: var(--tekst-s); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  transition: background .25s;
}
.ar-searchform-btn:hover { background: var(--cyan); }

/* 404 ------------------------------------------------------- */
.notfound-search { margin-top: 40px; }
.notfound-search-label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px;
}
.notfound-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 56px;
}
.notfound-card {
  display: block;
  padding: 40px 32px;
  background: var(--bg);
  text-decoration: none;
  position: relative;
  transition: background .3s;
}
.notfound-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out-expo);
}
.notfound-card:hover { background: var(--bg2); }
.notfound-card:hover::before { transform: scaleX(1); }
.notfound-card-title {
  font-family: var(--font-head);
  font-size: var(--tekst-2xl); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.3px;
  color: var(--text); margin-bottom: 12px;
}
.notfound-card-desc {
  font-size: var(--tekst-s); line-height: 1.7;
  color: var(--text-dim); margin-bottom: 20px;
}
.notfound-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head);
  font-size: var(--tekst-xs); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--cyan);
  transition: gap .25s;
}
.notfound-card:hover .notfound-card-link { gap: 10px; }

/* ZOEKRESULTATEN -------------------------------------------- */
.search-again { max-width: 560px; }
.search-empty {
  margin-top: 48px;
  max-width: 680px;
  padding: 44px 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
}
.search-empty-text {
  font-size: var(--tekst-m); line-height: 1.75;
  color: var(--text-dim);
}
.search-empty-text a { color: var(--cyan-dim); text-decoration: none; }
.search-empty-text a:hover { color: var(--cyan); }
.search-empty-links {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 28px;
}

/* PAGINERING ------------------------------------------------ */
.ar-pagination {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 56px;
}
.ar-pagination a,
.ar-pagination span.current,
.ar-pagination-item > a,
.ar-pagination-item > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--font-head);
  font-size: var(--tekst-s); font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim); text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.ar-pagination a:hover,
.ar-pagination-item > a:hover {
  border-color: var(--cyan); color: var(--cyan);
}
.ar-pagination span.current,
.ar-pagination-item > span.current {
  background: var(--text); border-color: var(--text); color: #fff;
}

/* LOSSE EVENT-PAGINA ---------------------------------------- */
.event-single-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: start;
}
.event-single-past {
  padding: 18px 22px;
  margin-bottom: 36px;
  background: var(--bg2);
  border-left: 3px solid var(--accent);
  font-size: var(--tekst-s); line-height: 1.7;
  color: var(--text-dim);
}
.event-single-past a { color: var(--cyan-dim); text-decoration: none; }
.event-single-past a:hover { color: var(--cyan); }

/* De flyer van een event, op ware verhouding. Staat in de rechterkolom
   boven het praktische blok, want een flyer is bijna altijd staand en
   die vorm past daar precies. Geen vaste hoogte en geen bijsnijden: op
   een flyer staat tekst, en die moet je kunnen lezen. */
.event-poster {
  margin: 0 0 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--schaduw);
}
.event-poster img {
  display: block;
  width: 100%;
  height: auto;
}
/* Op een smal scherm valt de zijkolom onder de tekst en wordt hij zo
   breed als de pagina. Een flyer daar over de volle breedte uitrekken
   levert niets op, dus geven we hem een bovengrens en zetten we hem
   in het midden. */
@media (max-width: 980px) {
  .event-poster {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}
.event-single-card {
  padding: 40px 34px;
  background: var(--bg2);
  border-top: 3px solid var(--cyan);
}
.event-single-card-title {
  font-family: var(--font-head);
  font-size: var(--tekst-xs); letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 28px;
}
.event-single-meta {
  display: flex; gap: 16px; align-items: flex-start;
  padding-bottom: 22px; margin-bottom: 22px;
}
.event-single-meta-icon { color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.event-single-meta-key {
  font-size: var(--label); letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 5px;
}
.event-single-meta-val {
  font-family: var(--font-head);
  font-size: var(--tekst-l); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.2px;
  color: var(--text);
}
.event-single-card-note {
  font-size: var(--tekst-s); line-height: 1.7;
  color: var(--text-dim);
}
.event-single-card-note a { color: var(--cyan-dim); text-decoration: none; }
.event-single-card-note a:hover { color: var(--cyan); }

/* JURIDISCHE PAGINA'S --------------------------------------- */
.legal-updated {
  font-size: var(--tekst-xs) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted) !important;
  padding-bottom: 28px;
  margin-bottom: 36px !important;
}
.legal-todo {
  background: rgba(230,57,70,0.1);
  color: var(--accent-dim);
  padding: 1px 8px;
  font-size: var(--tekst-s);
  font-weight: 600;
}

/* FOOTER BOTTOM MET DRIE ITEMS ------------------------------ */
.footer-bottom { flex-wrap: wrap; gap: 12px 24px; }

/* RESPONSIVE ------------------------------------------------ */
@media (max-width: 1100px) {
  .event-single-grid { grid-template-columns: 1fr; gap: 48px; }
  .notfound-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .notfound-grid { grid-template-columns: 1fr; }
  .notfound-card { padding: 32px 24px; }
  .ar-searchform { flex-direction: column; }
  .ar-searchform-btn { padding: 16px; justify-content: center; }
  .search-empty { padding: 32px 24px; }
  .event-single-card { padding: 32px 24px; }
}

/* ============================================================
   AFRONDING HOEKEN
   Gebundeld zodat de hele site met --radius in :root te
   verstellen is. Kaarten met een gekleurd streepje bovenaan of
   met een foto erin krijgen overflow:hidden, anders steekt dat
   element buiten de ronde hoek uit.
   ============================================================ */

/* KAARTEN EN PANELEN --------------------------------------- */
/* .testimonial-card hoort hier gewoon bij. Die had een eigen ronding
   van 22px en een eigen achtergrondkleur, waardoor de reviews als enige
   sectie buiten de huisstijl vielen. */
.testimonial-card,
.route-card,
.spage-feature,
.spage-step,
.spage-metric,
.usp-item,
.team-card,
.contact-info-col,
.footbalance-block,
.event-single-card,
.search-empty,
.article-callout,
details.faq-item {
  border-radius: var(--radius);
}

/* Kaarten met een ::before-streepje bovenaan of een foto binnenin.
   Zonder overflow:hidden loopt dat door de ronde hoek heen. */
.kb-card,
.event-card,
.service-card,
.notfound-card,
.spage-related-card,
.footbalance-video-wrap,
.footbalance-product-item,
.dienst-photo,
.article-cta-box {
  border-radius: var(--radius);
  overflow: hidden;
}

/* Foto's binnen kaarten: eigen afronding is niet nodig zodra de
   ouder clipt, maar losstaande beeldblokken wel. */
.spage-intro-photo,
.spage-intro-accent,
.community-photo-main,
.community-photo-accent,
.about-photo-main,
.about-photo-accent {
  border-radius: var(--radius);
}

/* KNOPPEN, VELDEN EN LABELS -------------------------------- */
.btn-primary,
.btn-ghost,
.btn-dark,
.btn-light,
.nav-cta,
.mobile-menu .mobile-cta,
.cf7-input,
.cf7-submit,
.ar-searchform,
.ar-searchform-btn,
.ar-pagination a,
.ar-pagination-item > a,
.ar-pagination-item > span,
.event-link,
.service-badge,
.event-tag,
.event-date-badge,
.legal-todo {
  border-radius: var(--radius-sm);
}

/* Het zoekveld en de knop zitten in één omhulsel: alleen de
   buitenhoeken afronden, anders ontstaat er een naad in het midden. */
.ar-searchform { overflow: hidden; }
.ar-searchform-input,
.ar-searchform-btn { border-radius: 0; }

@media (max-width: 600px) {
  /* Gestapeld staat de knop onder het veld, dus dan onderlangs afronden. */
  .ar-searchform-btn { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
}

/* ============================================================
   KAART CONTACTPAGINA
   Volledige breedte. De kaart zelf komt van Google en laadt pas
   na toestemming, zie de cookiebanner hieronder.
   ============================================================ */
.map-band { padding: 0 0 0; }
.map-band-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 60px 44px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.map-frame {
  position: relative;
  width: 100%;
  height: clamp(360px, 42vh, 520px);
  background: var(--bg2);
  overflow: hidden;
}
.map-frame iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
  /* De embed komt standaard grijzig binnen. Een tikje meer verzadiging
     en contrast laat hem beter aansluiten op de rest van de site. */
  filter: saturate(1.08) contrast(1.02);
}

/* TERUGVAL ALS DE KAART NIET MAG LADEN ---------------------- */
/* ── HET KAARTBLOK ───────────────────────────────────────────────
   Staat er altijd, ook zonder cookietoestemming. Eerder zag je hier
   alleen een melding dat de kaart uit stond, en dat was voor de meeste
   bezoekers het enige wat ze te zien kregen op de plek waar het adres
   hoort te staan. */
.map-plaats {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
  background:
    radial-gradient(circle at 28% 18%, rgba(0,174,199,0.10), transparent 62%),
    var(--bg2);
}
.map-plaats-inner {
  text-align: center;
  max-width: 380px;
}
.map-plaats-speld {
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
}
.map-plaats-naam {
  font-family: var(--font-head);
  font-size: var(--tekst-2xl); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.map-plaats-adres {
  font-size: var(--tekst-m); line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.map-plaats-status {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--link);
  margin-bottom: 24px;
}
.map-plaats-knop {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border: none; border-radius: var(--radius-sm);
  background: var(--text); color: #fff;
  font-family: var(--font-head);
  font-size: var(--tekst-s); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, gap .25s var(--ease-out-expo);
}
.map-plaats-knop:hover { background: var(--cyan); gap: 16px; }
.map-plaats-klein {
  margin-top: 16px;
  font-size: var(--tekst-xs); line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 640px) {
  .map-plaats { padding: 32px 20px; }
  .map-plaats-speld { width: 48px; height: 48px; margin-bottom: 16px; }
}

/* GPS-KAARTJE OVER DE KAART -------------------------------- */
.map-card {
  position: absolute; z-index: 3;
  top: 28px; right: 28px;
  display: none;                  /* pas tonen als de kaart er is */
  align-items: flex-start; gap: 14px;
  max-width: 320px;
  padding: 18px 22px;
  background: rgba(240,248,251,0.94);
  border: 1px solid rgba(0,174,199,0.32);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(0,60,80,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;           /* slepen op de kaart blijft werken */
}
.map-frame.is-geladen .map-card { display: flex; }

.map-card-dot {
  position: relative;
  width: 13px; height: 13px;
  margin-top: 5px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.9);
}
.map-card-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--cyan);
  animation: gpsPuls 2.2s var(--ease-out-expo) infinite;
}
@keyframes gpsPuls {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.map-card-label {
  font-family: var(--font-head);
  font-size: var(--label); letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--cyan-dim);
  margin-bottom: 5px;
}
.map-card-name {
  font-family: var(--font-head);
  font-size: var(--tekst-l); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.2px;
  color: var(--text); line-height: 1.15; margin-bottom: 4px;
}
.map-card-addr { font-size: var(--tekst-s); line-height: 1.55; color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .map-card-dot::after { animation: none; opacity: 0; }
}
@media (max-width: 900px) {
  .map-band-header { padding: 80px 32px 36px; }
  .map-card { top: 20px; right: 20px; left: 20px; max-width: none; padding: 16px 18px; }
}
@media (max-width: 560px) {
  .map-band-header { padding: 60px 20px 28px; flex-direction: column; align-items: flex-start; gap: 24px; }
  .map-frame { height: 340px; }
  .map-card-name { font-size: var(--tekst-m); }
}

/* ============================================================
   COOKIEBANNER
   ============================================================ */
.footer-cookie-link {
  font: inherit; color: var(--cyan-dim);
  background: none; border: none; padding: 0;
  cursor: pointer; text-decoration: none;
}
.footer-cookie-link:hover { color: var(--cyan); text-decoration: underline; }

.cookiebar {
  position: fixed; z-index: 900;
  left: 24px; right: 24px; bottom: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--cyan);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .45s var(--ease-out-expo), opacity .35s ease;
}
.cookiebar.is-open { transform: translateY(0); opacity: 1; }
.cookiebar-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 26px 30px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cookiebar-title {
  font-family: var(--font-head);
  font-size: var(--tekst-m); font-weight: 800;
  text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 7px;
}
.cookiebar-text { flex: 1 1 420px; }
.cookiebar-text p {
  font-size: var(--tekst-s); line-height: 1.7; color: var(--text-dim);
  max-width: 720px;
}
.cookiebar-text a { color: var(--cyan-dim); text-decoration: underline; }
.cookiebar-text a:hover { color: var(--cyan); }
.cookiebar-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.cookiebar-btn {
  font-family: var(--font-head);
  font-size: var(--tekst-xs); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 15px 26px; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .25s, color .25s, border-color .25s;
}
.cookiebar-btn--accept {
  background: var(--text); color: #fff; border: 1px solid var(--text);
}
.cookiebar-btn--accept:hover { background: var(--cyan); border-color: var(--cyan); }
.cookiebar-btn--ghost {
  background: none; color: var(--text-dim); border: 1px solid var(--border);
}
.cookiebar-btn--ghost:hover { color: var(--cyan); border-color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .cookiebar { transition: opacity .2s ease; transform: none; }
}
@media (max-width: 700px) {
  .cookiebar { left: 12px; right: 12px; bottom: 12px; }
  .cookiebar-inner { padding: 22px 20px; gap: 20px; }
  .cookiebar-actions { width: 100%; }
  .cookiebar-btn { flex: 1; text-align: center; }
}

/* Lokaasveld in het contactformulier. Weggezet in plaats van
   display:none, want een veld dat niet bestaat vullen bots niet in,
   en juist dat invullen is het signaal waar we op afgaan. */
.cf7-lokaas {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ── KAARTSCHADUW ────────────────────────────────────────────────
   Alle onderdelen die als kaart bedoeld zijn krijgen dezelfde
   schaduw. Ze hadden allemaal wel een eigen achtergrond maar lagen
   plat op de pagina, en bij de reviewkaarten was dat het duidelijkst:
   lichtblauw op wit zonder rand of schaduw leest eerder als een vage
   vlek dan als een blok.

   Staat onderaan zodat het de losse regels hierboven overschrijft.
   De zweefstand hoeft niet in volgorde, want :hover weegt zwaarder.

   Bewust niet meegenomen: .team-card is rond en dus een avatar,
   .spage-related-card is een foto met een overlay erop, en
   .brand-logo-item staat los in de merkenbalk.
   ───────────────────────────────────────────────────────────── */
.testimonial-card,
.service-card,
.spage-feature,
.kb-card,
.event-card,
.notfound-card,
.article-cta-box,
.event-single-card,
.route-card,
.usp-item {
  box-shadow: var(--schaduw);
  transition: box-shadow .25s, transform .25s;
}

/* Zweefstand. De schaduw alleen is te subtiel om als beweging te
   lezen, dus komt de kaart er 3px bij omhoog. Dat is wat je van een
   schaduw verwacht: verder van de ondergrond af betekent een grotere,
   zachtere schaduw. Zonder de verplaatsing wordt de schaduw groter
   terwijl de kaart blijft liggen, en dat klopt niet.

   Alleen op kaarten waar je ook echt op kunt klikken. Reviewkaarten
   staan in een carrousel die je sleept, daar is zweven verwarrend. */
.kb-card:hover,
.event-card:hover,
.spage-feature:hover,
.service-card:hover,
.notfound-card:hover {
  box-shadow: var(--schaduw-hover);
  transform: translateY(-3px);
}

/* ── SCHUINE SECTIERANDEN ────────────────────────────────────────
   Op de homepage lopen de secties schuin af waar de achtergrondkleur
   wisselt. Dat stond alleen daar, waardoor de subpagina's er anders
   uitzagen dan de voorpagina. Nu overal.

   Twee dingen die het systeem maken en die je makkelijk mist:
   opeenvolgende secties spiegelen elkaar, zodat er een zigzag
   ontstaat in plaats van hetzelfde schuine streepje onder elkaar. En
   elke sectie krijgt 28px extra ruimte onderaan, precies zoveel als
   de schuinte wegknipt, anders kruipt de inhoud in de punt.

   De eerste sectie op een subpagina is nth-of-type(2), want de
   subhero staat ervoor. Even dus dezelfde richting als .services op
   de homepage, oneven de gespiegelde. Alle templates beginnen met
   een subhero, dat is nagelopen.
   ───────────────────────────────────────────────────────────── */
.spage-section {
  padding-bottom: calc(100px + 28px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px));
}
.spage-section:nth-of-type(odd) {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
}

/* Uitzondering op de schuine rand. Nodig wanneer een sectie dezelfde
   kleur heeft als wat eronder komt: dan knipt de schuinte een
   driehoekje in de kleur van de pagina-achtergrond eruit, en dat
   leest als een fout in plaats van als vorm. Komt nu alleen voor op
   de FAQ, die eindigt zonder cta-balk en dus direct tegen de
   voettekst aan ligt. */
.spage-section.geen-schuinte,
.spage-section.geen-schuinte:nth-of-type(odd) {
  clip-path: none;
  padding-bottom: 100px;
}

/* Geen schuinte op de laatste sectie van een pagina. Sinds de
   cta-balk eruit is grenst die direct aan de voettekst. Is de sectie
   lichtblauw en de voettekst ook, dan knipt de schuinte er een
   driehoekje in de kleur van de pagina-achtergrond uit en dat leest
   als een fout. Is de sectie wit, dan is de schuinte toch onzichtbaar
   omdat de achtergrond eronder ook wit is. In beide gevallen levert
   hij niets op, dus weg ermee. */
.spage-section:last-of-type,
.spage-section:last-of-type:nth-of-type(odd) {
  clip-path: none;
  padding-bottom: 100px;
}

/* ── WINKELSTROOK ────────────────────────────────────────────────
   Smalle regel boven de voettekst, op elke pagina. Verving de cyaan
   cta-balk. Voor een winkel waar geen afspraak nodig is zijn de
   openingstijden de belangrijkste oproep: mensen willen weten waar
   je zit en of je nu open bent.

   Wit, zodat hij loskomt van de lichtblauwe voettekst eronder.
   Scheiding tussen de onderdelen met een punt en niet met een
   streepje, want die haarlijntjes zijn er overal uitgehaald.
   ───────────────────────────────────────────────────────────── */
.winkelstrook {
  background: var(--bg);
  padding: 22px 60px;
}
.winkelstrook-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 14px;
  font-family: var(--font-head);
  font-size: var(--tekst-s);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.winkelstrook-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Of de winkel vandaag open is, is het enige wat je hier echt komt
   halen. Die staat daarom in de tekstkleur en wat zwaarder. */
.winkelstrook-open {
  color: var(--text);
  font-weight: 700;
}
.winkelstrook-punt { color: var(--text-faint); }
.winkelstrook-tel {
  color: var(--cyan-dim);
  text-decoration: none;
  font-weight: 700;
}
.winkelstrook-tel:hover { color: var(--cyan); }

@media (max-width: 900px) {
  .winkelstrook { padding: 18px 24px; }
  .winkelstrook-inner { font-size: var(--tekst-s); gap: 4px 10px; }
  /* Op een smal scherm worden de punten losse zwevende tekens zodra
     de regels afbreken, dus die vallen weg. */
  .winkelstrook-punt { display: none; }
}

/* ── AANMELDEN VOOR EEN EVENT ───────────────────────────────────
   Hergebruikt de opmaak van het community run-formulier, met alleen
   een scheiding erboven zodat het los staat van de eventtekst. */
.event-aanmelden {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.event-aanmelden .cr-form-desc {
  margin-bottom: 24px;
}
.event-aanmelden .cr-form {
  max-width: 620px;
}