/* ==========================================================================
   Weekly Summer Ride — stijl "Rugnummer"
   Lettertype: Manrope (Google Fonts) 500/600/700/800
   ========================================================================== */

:root {
  --wsr-black: #0B0B0B;
  --wsr-yellow: #FFD400;
  --wsr-white: #FFFFFF;
  --wsr-chalk: #F5F4EE;
  --wsr-card: #151515;
  --wsr-line: #2A2A2A;
  --wsr-line-strong: #3F3F3F;
  --wsr-text-1: #D4D4D4;
  --wsr-text-2: #BDBDBD;
  --wsr-text-3: #A3A3A3;
  --wsr-ink-2: #333333;   /* secundaire tekst op krijt */
  --wsr-rule-light: #CFCFC6;

  --wsr-font: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --wsr-container: 1360px;
  --wsr-gutter: 32px;
  --wsr-section: 112px;
  --wsr-radius: 18px;
  --wsr-radius-lg: 22px;
  --wsr-pill: 999px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--wsr-black);
  color: var(--wsr-white);
  font-family: var(--wsr-font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--wsr-yellow); text-decoration: none; }
a:hover { color: var(--wsr-white); }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--wsr-yellow); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--wsr-yellow); color: var(--wsr-black); padding: 12px 18px; border-radius: var(--wsr-pill); font-weight: 800; }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { max-width: var(--wsr-container); margin: 0 auto; padding-inline: var(--wsr-gutter); }
.section { padding-block: var(--wsr-section); }
.section > .container,
.stack { display: flex; flex-direction: column; gap: 40px; }
.section--flush-top { padding-top: 0; }
.section--light { background: var(--wsr-chalk); color: var(--wsr-black); }
.section--light .stack, .section--light > .container { gap: 48px; }
.band { background: var(--wsr-yellow); color: var(--wsr-black); border-block: 2px solid var(--wsr-black); }
.rule-top { border-top: 1px solid var(--wsr-line); padding-top: 28px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr));
  gap: var(--gap, 12px);
}
.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 300px)), 1fr)); }
.grid--full { grid-column: 1 / -1; }

/* ---------- Typografie ---------- */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wsr-yellow);
}
.kicker::before { content: ""; width: 32px; height: 3px; background: currentColor; }
.label { font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.h1 {
  font-size: clamp(56px, 8.6vw, 140px); line-height: 0.86; letter-spacing: -0.055em;
  font-weight: 800; text-transform: uppercase;
}
.h2 {
  font-size: clamp(44px, 6vw, 96px); line-height: 0.9; letter-spacing: -0.05em;
  font-weight: 800; text-transform: uppercase;
}
.h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.h-xl { font-size: clamp(32px, 3vw, 40px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.accent { color: var(--wsr-yellow); }
.section--light .accent, .band .accent { color: var(--wsr-black); }
.lead { font-size: 18px; line-height: 1.6; color: var(--wsr-text-1); max-width: 480px; }
.lead--xl { font-size: 20px; line-height: 1.55; max-width: 560px; }
.section--light .lead { color: var(--wsr-black); font-weight: 600; }
.muted { color: var(--wsr-text-2); }
.prose { max-width: 760px; display: flex; flex-direction: column; gap: 24px; font-size: 18px; line-height: 1.75; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 18px 26px; border-radius: var(--wsr-pill);
  font: 800 15px/1 var(--wsr-font); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--wsr-yellow); color: var(--wsr-black); border: 2px solid var(--wsr-yellow);
  cursor: pointer; transition: transform .15s ease;
}
.btn:hover { color: var(--wsr-black); transform: translateY(-2px); }
.btn--lg { padding: 20px 28px; font-size: 16px; }
.btn--ghost { background: transparent; color: var(--wsr-white); border-color: var(--wsr-line-strong); }
.btn--ghost:hover { color: var(--wsr-white); border-color: var(--wsr-white); }
.btn--dark { background: var(--wsr-black); color: var(--wsr-yellow); border-color: var(--wsr-black); }
.btn--dark:hover { color: var(--wsr-yellow); }
.btn--outline-dark { background: transparent; color: var(--wsr-black); border-color: var(--wsr-black); }
.btn--outline-dark:hover { color: var(--wsr-black); }
.btn svg { width: 20px; height: 20px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.pill {
  font: 800 14px/1 var(--wsr-font); min-height: 48px; padding: 12px 20px; border-radius: var(--wsr-pill);
  background: transparent; color: var(--wsr-white); border: 2px solid var(--wsr-line-strong); cursor: pointer;
}
.pill[aria-pressed="true"] { background: var(--wsr-yellow); color: var(--wsr-black); border-color: var(--wsr-yellow); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 11, 0.94); border-bottom: 1px solid #262626;
  backdrop-filter: blur(8px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--wsr-white); }
.logo:hover { color: var(--wsr-white); }
.logo__mark {
  width: 46px; height: 46px; border-radius: 50%; background: var(--wsr-yellow); color: var(--wsr-black);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
}
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__name { font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.logo__place { font-size: 11px; color: var(--wsr-text-3); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.nav a { padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--wsr-white); border-radius: var(--wsr-pill); }
.nav a:hover { color: var(--wsr-yellow); }
.nav a[aria-current="page"] { background: var(--wsr-yellow); color: var(--wsr-black); }
.site-header .btn { min-height: 48px; padding: 14px 22px; font-size: 14px; }
.nav-toggle { display: none; }

@media (max-width: 1180px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    background: transparent; border: 2px solid var(--wsr-line-strong); border-radius: 50%; color: var(--wsr-white); cursor: pointer;
  }
  .site-header__inner { flex-wrap: wrap; }
  .nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 12px; }
  .nav.is-open { display: flex; }
  .nav a { font-size: 18px; padding: 14px 16px; }
  .site-header .btn--header { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: 88px 72px; }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.hero__side { display: flex; flex-direction: column; gap: 24px; max-width: 480px; }
.hero--home .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr)); gap: 56px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.sec-head .lead { max-width: 460px; }

/* ---------- Rugnummer ---------- */
.bib-wrap { display: flex; justify-content: center; padding-block: 24px; }
.bib {
  position: relative; width: 100%; max-width: 520px; overflow: hidden;
  background: var(--wsr-chalk); color: var(--wsr-black); border-radius: 10px;
  transform: rotate(-2.5deg); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
.bib__top { background: var(--wsr-black); color: var(--wsr-yellow); padding: 14px 28px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.bib__pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--wsr-black); opacity: .85; }
.bib__pin--tl { top: 62px; left: 18px; } .bib__pin--tr { top: 62px; right: 18px; }
.bib__pin--bl { bottom: 18px; left: 18px; } .bib__pin--br { bottom: 18px; right: 18px; }
.bib__body { padding: 36px 48px 48px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.bib__day { font-size: 15px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; }
.bib__time { font-size: clamp(96px, 12vw, 176px); font-weight: 800; letter-spacing: -0.07em; line-height: 0.95; }
.bib__bar { height: 10px; width: 100%; background: var(--wsr-yellow); margin: 12px 0 18px; }
.bib__small { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #404040; }
.bib__place { font-size: 20px; font-weight: 800; }
.bib__addr { font-size: 15px; font-weight: 600; color: #404040; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--wsr-line); }
.stats__item { padding: 32px 24px 0 0; display: flex; flex-direction: column; gap: 6px; }
.stats__num { font-size: 64px; font-weight: 800; letter-spacing: -0.05em; color: var(--wsr-yellow); line-height: 1; }
.stats__label { font-size: 15px; font-weight: 600; color: var(--wsr-text-2); }

/* ---------- Kaarten ---------- */
.card {
  background: var(--wsr-card); border: 1px solid var(--wsr-line); border-radius: var(--wsr-radius);
  padding: 28px; display: flex; flex-direction: column; gap: 12px; color: var(--wsr-white);
}
a.card:hover { color: var(--wsr-white); border-color: var(--wsr-line-strong); }
.card--yellow { background: var(--wsr-yellow); color: var(--wsr-black); border-color: var(--wsr-yellow); }
a.card--yellow:hover { color: var(--wsr-black); }
.card--dark-on-light { background: var(--wsr-black); color: var(--wsr-white); border-color: var(--wsr-black); }
.card--tall { min-height: 200px; justify-content: space-between; }
.card--lg { padding: 36px; gap: 24px; border-radius: var(--wsr-radius-lg); }
.card .label { color: var(--wsr-yellow); }
.card--yellow .label { color: var(--wsr-black); }
.card__text { font-size: 16px; line-height: 1.6; color: var(--wsr-text-1); }
.card--yellow .card__text { color: var(--wsr-black); font-weight: 600; }

.stat-card__num { font-size: 56px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--wsr-yellow); }
.card--yellow .stat-card__num { color: var(--wsr-black); }
.stat-card__label { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--wsr-text-1); }
.card--yellow .stat-card__label { color: var(--wsr-black); }

.step__num { font-size: 64px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--wsr-yellow); }

/* Beeld-plaatshouder: vervang door <img> */
.ph {
  aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--wsr-radius); border: 2px dashed var(--wsr-line-strong);
  background: var(--wsr-card); display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; color: #8A8A8A; font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
}
.ph--light { background: transparent; border-color: rgba(11, 11, 11, .3); color: #555; }
.media { aspect-ratio: var(--ratio, 4 / 3); width: 100%; object-fit: cover; border-radius: var(--wsr-radius); }

/* ---------- Lichtkrant ---------- */
.ticker { background: var(--wsr-yellow); color: var(--wsr-black); overflow: hidden; padding: 22px 0; border-block: 2px solid var(--wsr-black); }
.ticker__track {
  display: flex; gap: 48px; width: max-content; white-space: nowrap;
  font-size: 30px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
  animation: wsr-tick 36s linear infinite;
}
@keyframes wsr-tick { to { transform: translateX(-50%); } }

/* ---------- Groepen ---------- */
.group-card {
  font-family: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; padding: 28px; min-height: 300px;
  border-radius: var(--wsr-radius); background: var(--wsr-card); color: var(--wsr-white);
  border: 2px solid var(--wsr-line); transition: transform .15s ease;
}
.group-card[aria-pressed="true"] { background: var(--wsr-yellow); color: var(--wsr-black); border-color: var(--wsr-yellow); transform: translateY(-6px); }
.group-card__label { font-size: 14px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.group-card__letter { font-size: 132px; font-weight: 800; line-height: .8; letter-spacing: -0.06em; }
.group-card__speed { margin-top: 18px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.group-card__kind { font-size: 14px; font-weight: 700; opacity: .75; }
.group-info { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; background: var(--wsr-card); border: 1px solid var(--wsr-line); border-radius: 16px; padding: 24px 28px; }
.badge-round { width: 56px; height: 56px; border-radius: 50%; background: var(--wsr-yellow); color: var(--wsr-black); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; flex-shrink: 0; }
.badge-round--lg { width: 64px; height: 64px; font-size: 30px; }
.group-info p { flex: 1 1 360px; font-size: 18px; line-height: 1.5; font-weight: 600; }
.group-info span { color: var(--wsr-text-3); font-weight: 500; }
.group-rows { display: flex; flex-direction: column; border-top: 3px solid var(--wsr-yellow); }
.group-row { display: flex; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--wsr-line); font-size: clamp(24px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; }

/* ---------- Stappen (licht) ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border-top: 3px solid var(--wsr-black); }
.steps__item { padding: 32px 32px 0 0; display: flex; flex-direction: column; gap: 14px; }
.steps__num { font-size: 80px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; }
.steps__item p { font-size: 17px; line-height: 1.6; color: var(--wsr-ink-2); }

/* ---------- Lijsten ---------- */
.numlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 3px solid var(--wsr-black); }
.numlist li { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--wsr-rule-light); font-size: 18px; font-weight: 600; line-height: 1.45; }
.numlist__n { font-weight: 800; min-width: 32px; }
.numlist--dark { border-top-color: var(--wsr-yellow); }
.numlist--dark li { border-bottom-color: var(--wsr-line); }
.dotlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 3px solid var(--wsr-black); }
.dotlist li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--wsr-rule-light); font-size: 17px; font-weight: 600; line-height: 1.45; }
.dotlist li::before { content: ""; width: 10px; height: 10px; background: currentColor; border-radius: 50%; margin-top: 8px; flex-shrink: 0; }
.ticklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ticklist li { display: flex; gap: 14px; font-size: 17px; font-weight: 600; line-height: 1.5; }
.ticklist svg { flex-shrink: 0; margin-top: 3px; width: 20px; height: 20px; }
.card .ticklist li { color: var(--wsr-text-1); }
.card .ticklist svg { color: var(--wsr-yellow); }
.card--yellow .ticklist li, .card--yellow .ticklist svg { color: var(--wsr-black); }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 40px; border-top: 3px solid var(--wsr-black); }
.checklist li { display: flex; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--wsr-rule-light); font-size: 19px; font-weight: 700; }
.checklist li::before { content: ""; width: 28px; height: 28px; border: 3px solid var(--wsr-black); border-radius: 8px; flex-shrink: 0; }

/* ---------- Routes ---------- */
.route-card { gap: 16px; padding: 20px; }
.route-card__map { position: relative; }
.route-card__map svg { width: 100%; height: 150px; display: block; background: var(--wsr-black); border-radius: 12px; }
.route-card--lg .route-card__map svg { height: 180px; }
.route-card__band { position: absolute; top: 10px; left: 10px; background: var(--wsr-yellow); color: var(--wsr-black); font-size: 12px; font-weight: 800; letter-spacing: .1em; padding: 6px 10px; border-radius: var(--wsr-pill); }
.route-card__name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; min-height: 48px; }
.route-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.route-card__stats { display: flex; gap: 18px; font-size: 14px; font-weight: 700; color: var(--wsr-text-3); }
.route-card__stats strong { color: var(--wsr-white); font-size: 22px; font-weight: 800; }
.route-card__link { font-size: 13px; font-weight: 800; color: var(--wsr-yellow); text-transform: uppercase; letter-spacing: .06em; }
.route-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; align-items: center; background: var(--wsr-yellow); color: var(--wsr-black); border-radius: var(--wsr-radius-lg); padding: 32px; }
.route-feature:hover { color: var(--wsr-black); }
.route-feature svg { width: 100%; height: 200px; }
.route-feature__name { font-size: 36px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.route-feature__stats { display: flex; gap: 28px; font-weight: 700; font-size: 15px; }
.route-feature__stats strong { font-size: 32px; font-weight: 800; }
.live-dot { display: flex; align-items: center; gap: 10px; color: var(--wsr-text-3); }
.live-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--wsr-yellow); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.toolbar__filters, .toolbar__right { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.toolbar__count { font-size: 15px; font-weight: 700; color: var(--wsr-text-3); }
.toolbar__count strong { color: var(--wsr-white); }
.note-bar { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; background: var(--wsr-card); border: 1px solid var(--wsr-line); border-radius: var(--wsr-radius); padding: 24px 28px; }

/* ---------- Roepkaarten ---------- */
.call { min-height: 220px; justify-content: space-between; }
.call__dir { font-size: 13px; font-weight: 800; letter-spacing: .16em; opacity: .7; }
.call__word { font-size: clamp(40px, 4vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: .95; text-transform: uppercase; }
.call__text { font-size: 16px; font-weight: 600; line-height: 1.5; opacity: .85; }

/* ---------- Sponsors ---------- */
.partner { min-height: 300px; justify-content: space-between; gap: 24px; }
.partner__logo { height: 80px; }
.partner__name { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.partner--main .partner__name { font-size: 40px; letter-spacing: -0.04em; line-height: 1; }
.partner--main .partner__logo { height: 96px; }
.partner__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tier { background: var(--wsr-white); color: var(--wsr-black); border: 2px solid var(--wsr-black); border-radius: var(--wsr-radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.tier--hot { background: var(--wsr-black); color: var(--wsr-white); box-shadow: 0 24px 48px rgba(0,0,0,.25); }
.tier__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tier__letter { font-size: 120px; font-weight: 800; letter-spacing: -0.07em; line-height: .8; }
.tier__name { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.tier__price { font-size: 18px; font-weight: 800; }
.tier__price span, .tier .label { opacity: .75; }
.tier .ticklist { flex-grow: 1; }
.tier .ticklist svg { color: currentColor; }
.tier .btn { margin-top: auto; }

/* ---------- Grote band-statement ---------- */
.statement { font-size: clamp(32px, 4.2vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; max-width: 1180px; }
.big-figure { font-size: clamp(64px, 9vw, 150px); font-weight: 800; letter-spacing: -0.07em; line-height: .85; }
.band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: center; padding-block: 64px; }
.band__text { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }

.pillar { display: flex; flex-direction: column; gap: 16px; border-top: 3px solid var(--wsr-yellow); padding-top: 28px; }
.pillar__num { font-size: 72px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--wsr-yellow); }
.pillar__title { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.pillar p { font-size: 17px; line-height: 1.65; color: var(--wsr-text-1); }

.person { display: flex; flex-direction: column; gap: 12px; }
.person__name { font-size: 18px; font-weight: 800; }
.person__meta { font-size: 14px; font-weight: 700; color: var(--wsr-text-3); }

.product { display: flex; flex-direction: column; gap: 16px; color: var(--wsr-white); }
.product:hover { color: var(--wsr-white); }
.product__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.product__name { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.product__price { font-size: 16px; font-weight: 800; color: var(--wsr-yellow); }
.qr-card { width: 100%; max-width: 360px; background: var(--wsr-white); border: 3px solid var(--wsr-black); border-radius: var(--wsr-radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; transform: rotate(2deg); text-align: center; }

/* ---------- Formulier ---------- */
.form { gap: 20px; padding: 36px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wsr-text-2); }
.input {
  font: 600 17px/1.4 var(--wsr-font); letter-spacing: 0; text-transform: none;
  background: var(--wsr-black); color: var(--wsr-white); border: 2px solid var(--wsr-line-strong);
  border-radius: 14px; padding: 16px 18px; min-height: 56px; width: 100%;
}
.input:focus { border-color: var(--wsr-yellow); outline: none; }
textarea.input { resize: vertical; }

/* ---------- Partnerstrook ---------- */
.partner-strip { border-block: 1px solid #262626; }
.partner-strip .container { padding-block: 40px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.partner-strip__names { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.partner-strip__names a { color: var(--wsr-white); }
.partner-strip__names a:hover { color: var(--wsr-yellow); }
.partner-strip .label { color: var(--wsr-text-3); }

/* ---------- Footer ---------- */
.site-footer .container { padding-block: 112px 48px; display: flex; flex-direction: column; gap: 72px; }
.footer-cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.footer-cta .h1 { font-size: clamp(56px, 8vw, 128px); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; border-top: 1px solid #262626; padding-top: 40px; font-size: 15px; line-height: 1.7; }
.footer-cols h3 { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--wsr-text-3); margin-bottom: 4px; }
.footer-cols a { display: block; color: var(--wsr-white); font-weight: 700; }
.footer-cols a:hover { color: var(--wsr-yellow); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #8A8A8A; font-weight: 600; }

/* ---------- Toegankelijkheid ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  .btn, .group-card { transition: none; }
}
@media (max-width: 640px) {
  :root { --wsr-gutter: 20px; --wsr-section: 80px; }
  .hero { padding-block: 56px 48px; }
  .bib { transform: rotate(-1.5deg); }
  .bib__body { padding: 28px 24px 36px; }
}
[hidden] { display: none !important; }
@media (max-width: 640px) {
  .group-card { min-height: 200px; padding: 20px; }
  .group-card__letter { font-size: 88px; }
  .group-card__speed { font-size: 22px; margin-top: 10px; }
}

/* ---------- WordPress ---------- */
.nav ul { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin: 0; padding: 0; list-style: none; }
.nav li { list-style: none; }
.nav .current-menu-item > a, .nav .current_page_item > a { background: var(--wsr-yellow); color: var(--wsr-black); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 1180px) { .nav ul { flex-direction: column; align-items: stretch; } }
.prose > * { margin: 0; }
.prose h2, .prose h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.prose h2 { font-size: 32px; } .prose h3 { font-size: 24px; }
.prose ul, .prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.section--light .prose a { color: var(--wsr-black); }
.alignwide, .alignfull { max-width: 100%; }
.wp-block-image img { border-radius: var(--wsr-radius); }
.form .wpcf7 input:not([type=submit]), .form .wpcf7 textarea, .form .wpcf7 select { font: 600 17px/1.4 var(--wsr-font); background: var(--wsr-black); color: var(--wsr-white); border: 2px solid var(--wsr-line-strong); border-radius: 14px; padding: 16px 18px; width: 100%; }
.form .wpcf7 input[type=submit] { font: 800 15px/1 var(--wsr-font); text-transform: uppercase; letter-spacing: .04em; background: var(--wsr-yellow); color: var(--wsr-black); border: 0; border-radius: 999px; padding: 18px 26px; min-height: 56px; cursor: pointer; }
.logo__img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; transition: transform .2s ease; }
.logo:hover .logo__img { transform: rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .logo__img { transition: none; } }

/* ---------- Aanmelden ---------- */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px; align-items: start; }
.signup__form, .signup__thanks { grid-column: 1; grid-row: 1; }
.signup__side { grid-column: 2; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 110px; }
.signup__side .bib { max-width: none; margin-bottom: 16px; }
@media (max-width: 960px) {
  .signup { grid-template-columns: 1fr; }
  .signup__side { grid-column: 1; grid-row: 2; position: static; }
}
.form { gap: 36px; }
.fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 16px; color: var(--wsr-yellow); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__box { display: flex; flex-direction: column; gap: 2px; min-height: 56px; justify-content: center; padding: 12px 20px; border: 2px solid var(--wsr-line-strong); border-radius: 16px; background: var(--wsr-black); transition: border-color .15s, background .15s; }
.choice__label { font-size: 16px; font-weight: 800; }
.choice__hint { font-size: 12px; font-weight: 700; color: var(--wsr-text-3); }
.choice:hover .choice__box { border-color: var(--wsr-white); }
.choice input:checked + .choice__box { background: var(--wsr-yellow); border-color: var(--wsr-yellow); color: var(--wsr-black); }
.choice input:checked + .choice__box .choice__hint { color: var(--wsr-black); }
.choice input:focus-visible + .choice__box { outline: 3px solid var(--wsr-yellow); outline-offset: 3px; }

/* ---------- Productfoto's (kleding) ---------- */
.product__media { position: relative; aspect-ratio: 4 / 5; background: #FFFFFF; border-radius: var(--wsr-radius); overflow: hidden; }
.product__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s ease, transform .4s ease; }
.product:hover .product__media img { transform: scale(1.03); }
.product__media--swap img:nth-child(2) { opacity: 0; }
.product:hover .product__media--swap img:nth-child(2),
.product:focus-visible .product__media--swap img:nth-child(2) { opacity: 1; }
.product:hover .product__media--swap img:nth-child(1),
.product:focus-visible .product__media--swap img:nth-child(1) { opacity: 0; }
.product__tag { position: absolute; left: 12px; bottom: 12px; background: var(--wsr-black); color: var(--wsr-white); font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 8px 12px; border-radius: var(--wsr-pill); }
@media (prefers-reduced-motion: reduce) { .product__media img { transition: none; } .product:hover .product__media img { transform: none; } }

/* ---------- Foto's (over de WSR) ---------- */
.photo-hero { position: relative; margin: 0 0 12px; border-radius: var(--wsr-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--wsr-card); }
.photo-hero img { width: 100%; height: 100%; object-fit: cover; }
.photo-hero__tag { position: absolute; left: 20px; bottom: 20px; background: var(--wsr-yellow); color: var(--wsr-black); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border-radius: var(--wsr-pill); }
.polaroid { margin: 0; background: var(--wsr-white); padding: 14px 14px 18px; border-radius: 8px; box-shadow: 0 24px 48px rgba(0, 0, 0, .28); transform: rotate(var(--tilt, 0deg)); width: fit-content; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.polaroid img { display: block; width: 100%; height: auto; border-radius: 4px; }
.polaroid figcaption { color: var(--wsr-black); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
@media (max-width: 640px) { .photo-hero { aspect-ratio: 4 / 3; } .photo-hero__tag { left: 12px; bottom: 12px; font-size: 11px; } }

/* ---------- Formulier-plugins in donkere kaart (WPForms, Contact Form 7, Gravity Forms e.a.) ---------- */
.form { color: var(--wsr-white); }
.form .wpforms-container,
.form .wpforms-container-full {
  --wpforms-label-color: #FFFFFF;
  --wpforms-label-sublabel-color: #BDBDBD;
  --wpforms-label-error-color: #FF8A80;
  --wpforms-field-background-color: #0B0B0B;
  --wpforms-field-border-color: #3F3F3F;
  --wpforms-field-text-color: #FFFFFF;
  --wpforms-field-border-radius: 14px;
  --wpforms-field-size-input-height: 56px;
  --wpforms-field-size-font-size: 17px;
  --wpforms-button-background-color: #FFD400;
  --wpforms-button-text-color: #0B0B0B;
  --wpforms-button-border-radius: 999px;
  --wpforms-page-break-color: #FFD400;
  margin: 0 !important;
}
.form label:not(.choice):not(.consent),
.form legend:not(.label),
.form .wpforms-field-label,
.form .wpcf7-form label,
.form .gfield_label { color: #FFFFFF !important; font-family: var(--wsr-font) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .14em; text-transform: uppercase; }
.form .wpforms-field-sublabel,
.form .gfield_description,
.form .wpforms-field-description { color: #BDBDBD !important; font-family: var(--wsr-font) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; }
.form .wpforms-required-label,
.form .gfield_required { color: #FFD400 !important; }
.form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]),
.form textarea,
.form select {
  font-family: var(--wsr-font) !important; font-size: 17px !important; font-weight: 600 !important;
  background: #0B0B0B !important; color: #FFFFFF !important;
  border: 2px solid #3F3F3F !important; border-radius: 14px !important;
  padding: 14px 16px !important; min-height: 56px; box-shadow: none !important; max-width: 100% !important;
}
.form textarea { min-height: 160px; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: #FFD400 !important; outline: none !important; }
.form input::placeholder, .form textarea::placeholder { color: #8A8A8A !important; }
.form select option { background: #0B0B0B; color: #FFFFFF; }
.form input[type="checkbox"], .form input[type="radio"] { accent-color: #FFD400; width: 20px; height: 20px; }
.form .wpforms-field-checkbox li label,
.form .wpforms-field-radio li label,
.form .wpcf7-list-item-label { color: #D4D4D4 !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; }
.form button[type="submit"],
.form input[type="submit"],
.form .wpforms-submit,
.form .gform_button {
  font-family: var(--wsr-font) !important; font-size: 15px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .04em;
  background: #FFD400 !important; color: #0B0B0B !important; border: 0 !important;
  border-radius: 999px !important; padding: 18px 28px !important; min-height: 56px; height: auto !important; cursor: pointer;
}
.form button[type="submit"]:hover, .form .wpforms-submit:hover { background: #FFFFFF !important; }
.form .wpforms-error, .form label.wpforms-error, .form .wpcf7-not-valid-tip { color: #FF8A80 !important; font-size: 14px !important; text-transform: none; letter-spacing: 0; }
.form .wpforms-confirmation-container-full,
.form .wpcf7-response-output { background: #FFD400 !important; color: #0B0B0B !important; border: 0 !important; border-radius: 14px; padding: 18px 20px !important; font-weight: 700; }
.form .wpforms-confirmation-container-full p { color: #0B0B0B !important; }
.form p:empty { display: none; }

/* Kaart startlocatie */
.map { aspect-ratio: 4 / 3; border-radius: var(--wsr-radius); overflow: hidden; background: var(--wsr-card); border: 1px solid var(--wsr-line); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2); }

/* ---------- Socials (home) ---------- */
.social { min-height: 300px; justify-content: space-between; gap: 18px; }
.social__top { display: flex; justify-content: space-between; align-items: center; }
.social__icon { width: 40px; height: 40px; }
.social__handle { font-size: clamp(32px, 3.6vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; word-break: break-word; }
.social__cta { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
a.social:hover { transform: translateY(-4px); }
.social { transition: transform .2s ease; }
.insta-feed { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .social { transition: none; } a.social:hover { transform: none; } }

/* ---------- Sponsors ---------- */
.partner-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: center; padding: 40px; border-radius: var(--wsr-radius-lg); }
.partner-main__copy { display: flex; flex-direction: column; gap: 24px; }
.partner-main__wordmark { font-size: clamp(48px, 6vw, 96px); font-weight: 800; letter-spacing: -0.055em; line-height: .9; text-transform: uppercase; }
.partner-main__media { background: #FFFFFF; border-radius: var(--wsr-radius); overflow: hidden; aspect-ratio: 4 / 5; max-height: 520px; justify-self: center; width: 100%; max-width: 420px; }
.partner-main__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.partner-main:hover .partner-main__media img { transform: scale(1.03); }
.partner__logo { min-height: 80px; display: flex; align-items: center; }
.partner__wordmark { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.partner__logo-img { max-height: 72px; max-width: 220px; width: auto; height: auto; }
.partner-main .partner__logo-img { max-height: 120px; max-width: 360px; }
@media (prefers-reduced-motion: reduce) { .partner-main__media img { transition: none; } }

/* ---------- Aanmelden: extra ---------- */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-alert { background: #2A1E00; border: 2px solid var(--wsr-yellow); color: var(--wsr-white); border-radius: 14px; padding: 16px 20px; font-size: 16px; line-height: 1.5; }
.form-alert strong { color: var(--wsr-yellow); }
.field.is-error .input, .is-error .choice__box { border-color: #FF8A80 !important; }
.fieldset.is-error legend { color: #FF8A80; }
.consent { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--wsr-text-1); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
.consent input { accent-color: var(--wsr-yellow); width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.consent.is-error span { color: #FF8A80; }
.signup__thanks { grid-column: 1; grid-row: 1; }