/* De Fitnessmakelaar — site.css
   Handgeschreven stylesheet voor de standalone site. Geen buildstap, geen framework.
   Ontwerp FA-045: gelijkgetrokken met arsenalstrength.nl (witte header, donkere hero, Oswald-koppen, kaarten, donkere CTA).
   Kleurregels (contrast gemeten, zie FA-045):
   - accent #D90B2D: tekst en knoppen op licht (5,20:1 op wit, 4,77:1 op #F4F4F4); wit op accent 5,20:1
   - merk #F53656: ALLEEN grote koppen, decoratie en tekst op donker (#111111); nooit normale tekst op licht
   - grijs #666666 voor menu en #6B6B6B voor secundaire tekst (>= 4,5:1 op wit en #F4F4F4)
*/

/* ---------- fonts (lokaal, SIL OFL 1.1, zie fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2"); }

/* ---------- ontwerp-tokens ---------- */
:root {
  --color-accent: #D90B2D;
  --color-accent-hover: #B00924;
  --color-brand: #F53656;
  --color-heading: #1F1F1F;
  --color-text: #333333;
  --color-muted: #6B6B6B;
  --color-nav: #666666;
  --color-canvas: #FFFFFF;
  --color-surface-alt: #F4F4F4;
  --color-border: #DFDFDF;
  --color-field: #8A8A8A;  /* veldrand: 3,4:1 op wit */
  --color-dark: #111111;
  --color-hero: #0F0F0F;
  --on-dark-heading: #FFFFFF;
  --on-dark-text: rgba(255, 255, 255, 0.85);
  --on-dark-muted: rgba(255, 255, 255, 0.72);
  --on-dark-line: rgba(255, 255, 255, 0.14);

  --font-body: "Poppins", system-ui, sans-serif;
  --font-heading: "Oswald", system-ui, sans-serif;
  --font-size-h1: clamp(2.5rem, 5vw, 4.5rem);
  --font-size-h2: clamp(2rem, 3.4vw, 3rem);
  --font-size-body: 1rem;
  --font-size-lead: 1.125rem;

  --space-section-y: 7rem;
  --space-section-x: 2rem;
  --container-max: 1216px;

  --radius-card: 8px;
  --radius-button: 4px;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.12);

  --tap: 2.75rem; /* 44px: minimale tikdoelgrootte (eis N3) */
}

@media (max-width: 47.99em) {
  :root {
    --space-section-y: 4.5rem;
    --space-section-x: 1rem;
  }
}

/* ---------- basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-canvas);
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--color-accent); text-underline-offset: 0.18em; }
::selection { color: #FFFFFF; background: var(--color-accent); }
input, textarea { caret-color: var(--color-accent); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

.wrap {
  width: min(100% - 2 * var(--space-section-x), var(--container-max));
  margin-inline: auto;
}

.icoon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.icoon--pijl { width: 16px; height: 16px; transition: transform 0.2s ease; }

/* ---------- skip-link ---------- */
.skiplink {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  min-height: var(--tap);
  font-weight: 600;
  color: #FFFFFF;
  background: var(--color-accent);
  border-radius: var(--radius-button);
  text-decoration: none;
  transform: translateY(-200%);
}
.skiplink:focus,
.skiplink:focus-visible {
  transform: none;
  outline-color: var(--color-dark);
}

/* ---------- typografie ---------- */
.kop1,
.kop2 {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-heading);
  text-wrap: balance;
}
.kop1 { font-size: var(--font-size-h1); line-height: 1; letter-spacing: 0.005em; }
@media (max-width: 29.99em) {
  .kop1 { font-size: 2.25rem; } /* "Fitnessapparatuur" past op 360 px */
}
.kop2 { font-size: var(--font-size-h2); line-height: 1.08; letter-spacing: 0.005em; }

.lead {
  max-width: 34rem;
  font-size: var(--font-size-lead);
  line-height: 1.5;
  color: var(--color-muted);
}
.lead + .lead { margin-top: 1rem; }

/* bovenschrift: rode tekst met een lijntje ervoor (zoals arsenalstrength.nl) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem; /* klein label: minimaal 12 px (eis N3) */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: 1px;
  background: currentColor; /* decoratie */
}

/* ---------- knoppen en links ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.95rem 2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.knop:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.tel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--color-heading);
}
.tel-link .icoon { color: var(--color-accent); }
.tel-link:hover { text-decoration: underline; }

/* ---------- banden (band: white | tinted | dark) ---------- */
.band { position: relative; width: 100%; }
.band--white { background: var(--color-canvas); color: var(--color-text); }
.band--tinted { background: var(--color-surface-alt); color: var(--color-text); }
.band--dark { background: var(--color-dark); color: #FFFFFF; }

.band > .wrap {
  position: relative;
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
}
.band--white + .band--white > .wrap { padding-top: 0; } /* twee witte banden na elkaar: geen dubbele witruimte */

.band--dark .kop1,
.band--dark .kop2 { color: var(--on-dark-heading); }
.band--dark .lead { color: var(--on-dark-text); }
.band--dark .eyebrow { color: var(--on-dark-text); }
.band--dark .eyebrow::before { background: var(--color-brand); }
.band--dark .tel-link { color: #FFFFFF; }
.band--dark .tel-link .icoon { color: var(--color-brand); }
.band--dark :focus-visible { outline-color: #FFFFFF; }
.band--dark a:not([class]) { color: #FFFFFF; }

/* ---------- page-hero: donker, met het logo als watermerk ---------- */
.hero {
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 40%, rgba(255, 255, 255, 0.07), transparent 60%),
    var(--color-hero);
}
.hero::before {
  /* logo als watermerk (decoratie) */
  content: "";
  position: absolute;
  top: 50%;
  right: max(-6rem, calc((100% - var(--container-max)) / 2 - 2rem));
  width: clamp(18rem, 42vw, 40rem);
  aspect-ratio: 910 / 420;
  background: url("../img/logo-wit-910.webp") center / contain no-repeat;
  opacity: 0.05;
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 63.99em) {
  .hero::before { display: none; } /* watermerk alleen naast de tekst, niet erachter */
}
.hero__in {
  display: flex;
  flex-direction: column;
  justify-content: center; /* verticaal midden binnen de minimale hoogte */
  align-items: flex-start;
  min-height: 26rem;
}
.hero__in .kop1 { margin-top: 1.5rem; max-width: 48rem; }
.hero__in .lead { margin-top: 1.5rem; }
.hero__in .lead + .lead { margin-top: 1rem; }
.hero__in .acties { margin-top: 2.25rem; }

@media (min-width: 64em) {
  .hero__in { min-height: 30rem; }
  .hero--home .hero__in { min-height: 40rem; } /* home: hoge hero zoals arsenalstrength.nl */
}

/* hero met foto: zwart-wit foto met donkere overlay, tekst links (zoals arsenalstrength.nl).
   Overlay minimaal 0,78 zwart onder de tekst: wit >= 9:1, ook op de lichtste pixel. */
.hero--foto {
  background:
    linear-gradient(rgba(15, 15, 15, 0.78), rgba(15, 15, 15, 0.78)),
    var(--hero-foto-klein) var(--hero-pos, center) / cover no-repeat,
    var(--color-hero);
}
.hero--foto::before { display: none; } /* geen watermerk op een foto */
@media (min-width: 48em) {
  .hero--foto {
    background:
      linear-gradient(90deg, rgba(15, 15, 15, 0.9) 0%, rgba(15, 15, 15, 0.8) 50%, rgba(15, 15, 15, 0.45) 100%),
      var(--hero-foto) var(--hero-pos, center) / cover no-repeat,
      var(--color-hero);
  }
}
.hero--foto-albert-laptop { --hero-foto: url("../img/foto/albert-laptop-1920.webp"); --hero-foto-klein: url("../img/foto/albert-laptop-960.webp"); --hero-pos: 70% 40%; }
.hero--foto-albert { --hero-foto: url("../img/foto/albert-1920.webp"); --hero-foto-klein: url("../img/foto/albert-960.webp"); --hero-pos: 60% 30%; }
.hero--foto-gym { --hero-foto: url("../img/foto/gym-1920.webp"); --hero-foto-klein: url("../img/foto/gym-960.webp"); --hero-pos: center; }
.hero--foto-kopen { --hero-foto: url("../img/foto/kopen-1920.webp"); --hero-foto-klein: url("../img/foto/kopen-960.webp"); --hero-pos: 65% 35%; }
.hero--foto-taxeren { --hero-foto: url("../img/foto/taxeren-1920.webp"); --hero-foto-klein: url("../img/foto/taxeren-960.webp"); --hero-pos: 60% 35%; }
.hero--foto-dumbbells { --hero-foto: url("../img/foto/dumbbells-1920.webp"); --hero-foto-klein: url("../img/foto/dumbbells-960.webp"); --hero-pos: center; }
.hero--foto-kettlebells { --hero-foto: url("../img/foto/kettlebells-1920.webp"); --hero-foto-klein: url("../img/foto/kettlebells-960.webp"); --hero-pos: center; }
.hero--foto-rack { --hero-foto: url("../img/foto/rack-1920.webp"); --hero-foto-klein: url("../img/foto/rack-960.webp"); --hero-pos: center; }

/* ---------- sectiekop op licht: kort rood streepje erboven (decoratie) ---------- */
.band:not(.band--dark):not(.cta):not(.crosssell) .kop2:not(.eyebrow + .kop2)::before { /* na een eyebrow niet: die heeft al een lijntje */
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 1.25rem;
  background: var(--color-accent);
}

/* ---------- text-section: kop links, tekst rechts; met foto: beeld en tekst naast elkaar ---------- */
.tekst__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 40rem;
  margin-top: 1.75rem;
}
.tekst__body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
}
.tekst__body p:first-child { font-size: var(--font-size-lead); line-height: 1.6; color: var(--color-heading); }
.band--dark .tekst__body p { color: var(--on-dark-text); }
@media (min-width: 64em) {
  .tekst > .wrap:not(.tekst__raster) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .tekst > .wrap:not(.tekst__raster) .tekst__body { margin-top: 0; }
}
.tekst__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.tekst__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
}
@media (min-width: 64em) {
  .tekst__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; }
  .tekst--foto:not(.tekst--foto-links) .tekst__foto { order: 2; } /* foto rechts; bij --foto-links links */
}

/* ---------- cta-band: donker paneel met foto, kop en tekst links, knoppen rechts ---------- */
.cta__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cta .kop2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); color: #FFFFFF; }
.cta__in .lead { max-width: 42rem; margin-top: 0.75rem; color: var(--on-dark-text); }
.cta .tel-link { color: #FFFFFF; }
.cta .tel-link .icoon { color: var(--color-brand); }
.cta :focus-visible { outline-color: #FFFFFF; }
/* lichte band: het paneel staat los in de band (overlay minimaal 0,85 zwart: wit >= 9:1 op de lichtste fotopixel) */
.cta:not(.band--dark) {
  padding-block: clamp(3.5rem, 7vw, 5.5rem); /* ruimte om het paneel; een marge op het paneel zou buiten de band vallen */
  background: var(--color-canvas);
}
.cta:not(.band--dark) > .wrap {
  padding: clamp(2rem, 5vw, 3.75rem);
  border-radius: var(--radius-card);
  background:
    linear-gradient(rgba(17, 17, 17, 0.88), rgba(17, 17, 17, 0.88)),
    url("../img/foto/kettlebells-960.webp") center / cover no-repeat,
    var(--color-dark);
  box-shadow: var(--shadow-card-hover);
}
/* donkere band: de hele band met foto */
.cta.band--dark {
  background:
    linear-gradient(rgba(17, 17, 17, 0.88), rgba(17, 17, 17, 0.88)),
    url("../img/foto/rack-960.webp") center / cover no-repeat,
    var(--color-dark);
}
.cta.band--dark > .wrap { padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (min-width: 64em) {
  .cta__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3rem;
    align-items: center;
  }
  .cta__in .kop2,
  .cta__in .lead { grid-column: 1; }
  .cta__in .acties {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end;
    margin-top: 0;
  }
  .cta:not(.band--dark) > .wrap {
    background:
      linear-gradient(90deg, rgba(17, 17, 17, 0.97) 30%, rgba(17, 17, 17, 0.85) 100%),
      url("../img/foto/kettlebells-1920.webp") 70% center / cover no-repeat,
      var(--color-dark);
  }
  .cta.band--dark {
    background:
      linear-gradient(90deg, rgba(17, 17, 17, 0.97) 30%, rgba(17, 17, 17, 0.85) 100%),
      url("../img/foto/rack-1920.webp") center / cover no-repeat,
      var(--color-dark);
  }
}

/* ---------- contact-strip: tegels met rond icoon ---------- */
.contact__lijst {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2.5rem;
}
@media (min-width: 48em) {
  .contact__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact__lijst > li {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.contact__link,
.contact__info {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--tap);
  font-size: var(--font-size-body);
  line-height: 1.45;
}
.contact__link .icoon,
.contact__info .icoon {
  box-sizing: content-box;
  padding: 0.75rem;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.contact__link {
  font-weight: 600;
  text-decoration: none;
  color: var(--color-heading);
}
.contact__link:hover { color: var(--color-accent); text-decoration: underline; }
.contact__link:hover .icoon { color: #FFFFFF; background: var(--color-accent); border-color: var(--color-accent); }
.contact__info { color: var(--color-muted); }
.band--dark .contact__lijst > li { background: rgba(255, 255, 255, 0.04); border-color: var(--on-dark-line); box-shadow: none; }
.band--dark .contact__link { color: #FFFFFF; }
.band--dark .contact__info { color: var(--on-dark-text); }
.band--dark .contact__link .icoon,
.band--dark .contact__info .icoon { color: var(--color-brand); border-color: var(--on-dark-line); }

/* ---------- person: portret links, naam groot en tekst rechts ---------- */
.persoon__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.persoon__foto {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
}
.persoon__in .kop2 { font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1; }
.persoon__rol {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.persoon__in .lead { max-width: 40rem; margin-top: 1.75rem; color: var(--color-text); }
.persoon__in .lead + .lead { margin-top: 1rem; }
.persoon__in .acties { margin-top: 2rem; }
.band--dark .persoon__rol { color: var(--color-brand); }
.band--dark .persoon__in .lead { color: var(--on-dark-text); }
@media (min-width: 64em) {
  .persoon__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
  .persoon__foto { max-width: none; }
  /* portret rechts, zodat de foto's op de pagina om en om staan (Arsenal Strength) */
  .persoon--foto-rechts .persoon__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .persoon--foto-rechts .persoon__foto { order: 2; }
}

/* ---------- service-grid: kaarten zoals de series op arsenalstrength.nl ---------- */
.diensten .lead { margin-top: 1rem; max-width: 42rem; }
.kaarten {
  list-style: none;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); /* kolom minimaal zo breed als het langste woord ("Financieringsbemiddeling") + opvulling; anders breekt het woord af (17rem was 2 px te smal op 600 px) */
  margin-top: 3rem;
}
@media (min-width: 64em) {
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kaart:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.kaart:has(.kaart__foto) { padding: 0 0 1.5rem; overflow: hidden; }
.kaart:has(.kaart__foto) > :not(.kaart__foto) { margin-inline: 2rem; }
.kaart__foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: 0.75rem;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.kaart:hover .kaart__foto { transform: scale(1.04); }

/* bento: Taxeren (specialiteit) als grote tegel met de foto over de hele tegel; de vier andere diensten eromheen */
.kaarten:has(.kaart--uitgelicht) { grid-auto-flow: dense; }
.kaart--uitgelicht {
  isolation: isolate;
  justify-content: flex-end;
  min-height: 26rem;
  padding: 2rem 0 1.75rem;
  background: var(--color-hero);
  border-color: var(--color-hero);
}
.kaart--uitgelicht .kaart__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  object-position: 30% center; /* Albert links in beeld */
}
.kaart--uitgelicht::before {
  /* overlay: onder de tekst minimaal 0,85 zwart (wit >= 9:1 op de lichtste fotopixel) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.94) 0%, rgba(15, 15, 15, 0.86) 50%, rgba(15, 15, 15, 0.3) 100%);
}
.kaart--uitgelicht .kaart__titel { font-size: clamp(2.25rem, 3.5vw, 3rem); line-height: 1.05; color: #FFFFFF; }
.kaart--uitgelicht .kaart__tekst { max-width: 26rem; font-size: var(--font-size-lead); color: var(--on-dark-text); }
.kaart--uitgelicht .kaart__link { flex: 0 0 auto; margin-top: 0.5rem; color: #FFFFFF; }
.kaart--uitgelicht .kaart__link .icoon--pijl { color: var(--color-brand); }
.kaart--uitgelicht :focus-visible { outline-color: #FFFFFF; }
.kaart--uitgelicht:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22); }
@media (min-width: 48em) and (max-width: 63.99em) {
  .kaarten:has(.kaart--uitgelicht) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaart--uitgelicht { grid-column: 1 / -1; grid-row: 1; min-height: 24rem; }
}
@media (min-width: 64em) {
  .kaart--uitgelicht { grid-column: 1; grid-row: 1 / span 2; }
}
@media (min-width: 80em) {
  .kaarten:has(.kaart--uitgelicht) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.kaart:hover .icoon--pijl { transform: translateX(3px); }
.kaart__titel {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.kaart__tekst {
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--color-muted);
}
.kaart__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent);
}
.kaart__link::after {
  /* hele kaart klikbaar (decoratie, geen tekst) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}
.kaart__link:hover { text-decoration: underline; }

/* ---------- steps: genummerde kaarten (nummers via CSS-teller, geen extra tekst in de HTML) ---------- */
.stappen__lijst {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-top: 3rem;
  counter-reset: stap;
}
.stap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 1.5rem;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  counter-increment: stap;
}
.stap::before {
  content: counter(stap);
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
}
.stap__titel {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.stap__tekst {
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---------- testimonials ---------- */
.citaten__lijst {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  margin-top: 3rem;
}
.citaat {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.citaat::before {
  /* rood lijntje bovenaan (decoratie) */
  content: "";
  width: 2rem;
  height: 3px;
  background: var(--color-brand);
}
.citaat__tekst {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-text);
}
.citaat__bron { margin-top: auto; }
.citaat__naam {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.citaat__rol {
  display: block;
  font-size: var(--font-size-body);
  color: var(--color-muted);
}
.citaten .acties { margin-top: 2.5rem; }

/* lange klantverhalen (twee alinea's): onder elkaar over de volle breedte, naam links, verhaal rechts */
.citaat--lang { grid-column: 1 / -1; }
.citaat--lang .citaat__tekst { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; }
@media (min-width: 64em) {
  .citaat--lang {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
    padding: 3rem;
  }
  .citaat--lang::before { grid-column: 1; grid-row: 1; }
  .citaat--lang .citaat__bron { grid-column: 1; grid-row: 2; margin-top: 0; }
  .citaat--lang .citaat__naam { font-size: 1.625rem; }
  .citaat--lang .citaat__tekst { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- cross-sell: Arsenal Strength als donkere sectie met grote foto (zoals de hero van arsenalstrength.nl) ---------- */
.crosssell {
  overflow: hidden;
  border-top: 4px solid var(--color-accent); /* scheiding als de cross-sell direct op een donkere hero volgt */
  background:
    linear-gradient(rgba(15, 15, 15, 0.82), rgba(15, 15, 15, 0.82)),
    url("../img/foto/dumbbells-960.webp") center / cover no-repeat,
    var(--color-hero);
}
.crosssell::after {
  /* rode lijn onderaan (decoratie) */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--color-accent);
}
.crosssell__in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 28rem;
}
.crosssell__in .kop2 { margin-top: 1.5rem; max-width: 18ch; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; }
.crosssell__in .lead { margin-top: 1.5rem; max-width: 36rem; }
.crosssell__in .acties { margin-top: 2.25rem; }
@media (min-width: 48em) {
  .crosssell {
    background:
      linear-gradient(90deg, rgba(15, 15, 15, 0.92) 0%, rgba(15, 15, 15, 0.8) 55%, rgba(15, 15, 15, 0.5) 100%),
      url("../img/foto/dumbbells-1920.webp") center / cover no-repeat,
      var(--color-hero);
  }
  .crosssell__in { min-height: 34rem; }
}

/* knoppen en tel-link in een tekstblok (bijv. Inruil) */
.tekst__inhoud .lead { margin-top: 1.25rem; }
.tekst__inhoud .eyebrow + .kop2 { margin-top: 1.25rem; }

/* ---------- formulier (verzending via Smart Suite, zie js/site.js) ---------- */
.formulier__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; }
.formulier__foto { display: none; }
@media (min-width: 64em) {
  .formulier__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .formulier__foto {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover);
  }
}
.formulier__form {
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--color-canvas);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
}
.formulier__melding {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-heading);
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
}
.formulier__melding[hidden] { display: none; }
.formulier__melding .icoon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 0.1rem; color: var(--color-accent); }
.formulier__velden {
  display: grid;
  gap: 1.5rem 1.25rem;
}
@media (min-width: 48em) {
  .formulier__velden { grid-template-columns: 1fr 1fr; }
  .formulier__velden .veld:nth-last-child(-n+2) { grid-column: 1 / -1; } /* onderwerp en bericht over de volle breedte */
}
.veld {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.veld__label {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-heading);
}
/* gevuld veld met onderlijn: de onderlijn (#8A8A8A, 3,4:1 op wit en #F4F4F4) maakt het veld herkenbaar */
.veld__invoer {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 0;
  border-bottom: 2px solid var(--color-field);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.veld__invoer:hover { border-bottom-color: var(--color-muted); }
.veld__invoer:focus { background: var(--color-canvas); border-bottom-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(217, 11, 45, 0.12); outline: none; }
.veld__invoer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.veld__invoer::placeholder { color: var(--color-muted); opacity: 1; }
textarea.veld__invoer { min-height: 9rem; resize: vertical; }
.formulier__knop { align-self: flex-start; }
@media (max-width: 47.99em) {
  .formulier__knop { align-self: stretch; }
}
.formulier__knop:disabled,
.formulier__knop:disabled:hover {
  color: #FFFFFF;
  background: var(--color-muted);
  border-color: var(--color-muted);
  cursor: not-allowed;
}

/* ---------- header: wit, logo links, menu rechts (zoals arsenalstrength.nl) ---------- */
.balk {
  background: var(--color-dark);
  color: #FFFFFF;
}
.balk__in {
  display: flex;
  justify-content: flex-end;
}
.balk__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
}
.balk__link .icoon { color: var(--color-brand); }
.balk__link:hover { color: #FFFFFF; text-decoration: underline; }
.balk :focus-visible { outline-color: #FFFFFF; outline-offset: -3px; }

.kop {
  position: relative;
  z-index: 20;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--color-border);
}
.kop__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.9rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: none;
}
.logo__beeld { width: auto; height: 3.25rem; }

.menuknop {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.5rem 1rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-heading);
  background: var(--color-canvas);
  border: 1px solid var(--color-heading);
  border-radius: var(--radius-button);
  cursor: pointer;
}
.menuknop::before {
  content: "";
  width: 1.125rem;
  height: 0.75rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}
.menuknop[aria-expanded="true"]::before {
  border: 0;
  height: 1.125rem;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

@media (max-width: 29.99em) {
  .logo__beeld { height: 2.75rem; }
  .menuknop { padding: 0.5rem 0.75rem; }
}

.menu { list-style: none; }
.menu__link,
.submenu__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-nav);
  transition: color 0.15s ease;
}
.menu__link:hover,
.submenu__link:hover { color: var(--color-heading); }
.menu__link[aria-current="page"],
.submenu__link[aria-current="page"] {
  color: var(--color-heading);
  font-weight: 500;
}
.submenu { list-style: none; }

/* ---- mobiel en tablet (< 1280 px): menu onder de kop ---- */
@media (max-width: 79.99em) {
  .hoofdnav {
    flex: 1 0 100%;
    padding: 0.5rem 0 1rem;
  }
  .menu__item { border-top: 1px solid var(--color-border); }
  .menu__link { padding: 0.3rem 0; font-size: 1.125rem; }
  .submenu { padding: 0 0 0.5rem 1rem; }
  .submenu__link { padding: 0.125rem 0; }
  .hoofdnav__cta { margin-top: 1rem; width: 100%; }

  /* met JavaScript: inklapbaar achter de menuknop; zonder JavaScript blijft het menu altijd zichtbaar */
  .js .menuknop { display: inline-flex; }
  .js .hoofdnav { display: none; }
  .js .hoofdnav.is-open { display: block; }
}

/* ---- desktop (>= 1280 px): horizontaal menu met dropdowns ---- */
@media (min-width: 80em) {
  .kop {
    position: sticky;
    top: 0;
  }
  .kop__in { flex-wrap: nowrap; }
  .hoofdnav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
  .menu {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }
  .menu__item { position: relative; }
  .menu__link {
    position: relative;
    justify-content: center;
    min-width: var(--tap); /* tikdoel minimaal 44 px, ook voor "Home" */
    white-space: nowrap;
  }
  .menu__link[aria-current="page"]::after,
  .menu__item--sub:has([aria-current="page"]) > .menu__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.3rem;
    height: 2px;
    background: var(--color-brand); /* decoratie */
  }
  .menu__item--sub:has([aria-current="page"]) > .menu__link { color: var(--color-heading); font-weight: 500; }
  .menu__item--sub > .menu__link { gap: 0.4rem; }
  .menu__item--sub > .menu__link::before {
    content: "";
    order: 2;
    width: 0.35rem;
    height: 0.35rem;
    margin-top: -0.2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .menu__item--sub:has([aria-current="page"]) > .menu__link::after { right: 0.75rem; }
  .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 13rem;
    padding: 0.5rem 0;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover);
  }
  .submenu__link {
    padding: 0 1rem;
    white-space: nowrap;
  }
  .submenu__link:hover { background: var(--color-surface-alt); }
  .menu__item--sub:hover > .submenu,
  .menu__item--sub:focus-within > .submenu,
  .menu__item--sub.is-open > .submenu { display: block; }
  .menu__item--sub.is-dicht > .submenu { display: none; }
  .hoofdnav__cta { white-space: nowrap; padding: 0.6rem 1.4rem; }
}

/* ---------- footer: merk, contact met iconen, pagina's in twee kolommen; onderbalk met privacy en maker ---------- */
.voet {
  background: var(--color-dark);
  color: var(--on-dark-muted);
}
.voet :focus-visible { outline-color: #FFFFFF; }
.voet__raster {
  display: grid;
  gap: 3rem;
  padding-top: 5rem;
  padding-bottom: 4rem;
}
@media (min-width: 48em) {
  .voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__merk { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .voet__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: 4rem; }
  .voet__merk { grid-column: auto; }
}
.voet__logo {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.voet__logo::after {
  /* rood streepje onder het merk (decoratie) */
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 1rem;
  background: var(--color-brand);
}
.voet__tagline {
  max-width: 22rem;
  margin-top: 1.25rem;
  line-height: 1.7;
}
.voet__titel {
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.voet__lijst,
.voet__onderlinks { list-style: none; }
.voet__lijst--paginas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}
.voet__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  min-width: var(--tap);
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--on-dark-muted);
  transition: color 0.15s ease;
}
.voet__link:hover { color: #FFFFFF; }
.voet__info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  line-height: 1.5;
}
.voet .icoon { color: var(--color-brand); }
.voet__info .icoon { margin-top: 0.15rem; }
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
}
.voet__copy,
.voet__maker { font-size: 1rem; color: rgba(255, 255, 255, 0.6); }
.voet__maker { margin-left: auto; }
.voet__maker .voet__link { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 0.25em; }
@media (max-width: 47.99em) {
  .voet__maker { margin-left: 0; flex-basis: 100%; }
}

/* ---------- beweging: alleen CSS, alleen als de bezoeker geen "minder beweging" heeft ingesteld ---------- */
@keyframes binnenkomen {
  /* alleen verschuiven, niet vervagen: de inhoud is altijd volledig zichtbaar en leesbaar (ook tijdens de animatie) */
  from { translate: 0 1.5rem; }
  to { translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* hero-tekst komt bij het laden zacht in beeld, element na element */
  .hero__in > * { animation: binnenkomen 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero__in > :nth-child(2) { animation-delay: 0.08s; }
  .hero__in > :nth-child(3) { animation-delay: 0.16s; }
  .hero__in > :nth-child(4) { animation-delay: 0.24s; }
  /* blokken schuiven licht omhoog bij het scrollen; alleen waar de browser scroll-animaties kent (Chrome, Edge) */
  @supports (animation-timeline: view()) {
    .kaart, .citaat, .stap, .tekst__foto, .persoon__foto, .contact__lijst > li, .cta:not(.band--dark) > .wrap {
      animation: binnenkomen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .kaart:hover,
  .kaart:hover .kaart__foto { transform: none; }
}