/* =========================================================
   VV Staphorst — Affiliate Hub / Werk Geel-Blauw
   Huisstijl (nieuw designsysteem, juli 2026):
   geel #FFF000 / marineblauw #071D60 · Droid Sans + Verdana
   Rode draad: 100% clubgevoel — opbrengst voor de club & jeugd
   NB: assets/ds-theme.css overschrijft deze tokens met het volledige
   designsysteem; deze basiswaarden zijn de bron voor pagina's die
   ds-theme.css (nog) niet laden, zodat er nergens naar Barlow wordt teruggevallen.
   ========================================================= */

/* Google Fonts @import verwijderd: de fonts staan nu in assets/fonts.css en
   assets/fonts/. Elke pagina laadde ze anders bij Google, voor en ongeacht de
   toestemming die we onderin het scherm vragen. Een @import blokkeert de render
   bovendien langer dan een <link>, en het gebeurde twee keer. */

:root {
  /* Geverifieerde merkkleuren (juni 2026). Stond hier eerder als #F4F030, terwijl
     ds-theme.css en de nieuwere pagina's #F2E400 gebruiken. Pagina's die ds-theme.css
     niet laden (sjablonen, sponsor/oosterveen, sponsor/unive) toonden daardoor een
     ander geel. Eén waarde, hier, is de bron. */
  --geel: #FFF000;
  --geel-licht: #FFF7A8;
  --geel-donker: #FFD200;
  --blauw: #071D60;
  --blauw-donker: #1A2A66;
  --blauw-licht: #243A8C;
  --blauw-mid: #1A4FB4;
  --blauw-zacht: #eef1fb;
  --blauw-rand: #D6DDEE;
  --wit: #ffffff;
  --grijs: #5a6275;
  --grijs-licht: #eceef3;
  --groen: #0E6B39;
  --rood: #d23b3b;
  --radius: 14px;
  --radius-s: 9px;
  --schaduw: 0 6px 24px rgba(8, 21, 66, 0.10);
  --schaduw-hover: 0 12px 34px rgba(8, 21, 66, 0.18);
  --max: 1120px;
  --font: 'Droid Sans', Verdana, Tahoma, Arial, sans-serif;
  /* Kopletter sinds aug 2026: Poppins, de letter van het Staphorst
     United-bord (zelf gehost via fonts-ds.css). Droid Sans blijft
     de terugval en de tekstletter. */
  --font-head: 'Poppins', 'Droid Sans', Verdana, Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--blauw);
  background: var(--wit);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blauw); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--blauw);
  color: var(--wit);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--wit);
  font-weight: 700;
  letter-spacing: .2px;
}
.brand .logo {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--geel);
  color: var(--blauw);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 15px;
}
.brand small { display: block; font-weight: 500; opacity: .8; font-size: 11px; }
.topnav { display: flex; gap: 8px; align-items: center; }
.topnav a {
  color: var(--wit);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  opacity: .9;
}
.topnav a:hover { background: rgba(255,255,255,.12); opacity: 1; }
.topnav a.cta {
  background: var(--geel);
  color: var(--blauw);
  font-weight: 700;
  opacity: 1;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--blauw-licht) 0%, var(--blauw) 62%, var(--blauw-donker) 100%);
  color: var(--wit);
  padding: 64px 0 72px;
}
.hero .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--geel);
  color: var(--blauw);
  font-family: var(--font-cond, inherit);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radius-s);
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.05;
  margin: 0 0 16px;
  font-weight: 700;
  max-width: 760px;
}
.hero h1 .geel { color: var(--geel); }
.hero p.lead {
  font-size: 18px;
  max-width: 620px;
  opacity: .92;
  margin: 0 0 28px;
}
.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 8px; }
.hero-stats .stat strong { display: block; font-size: 28px; color: var(--geel); font-weight: 700; }
.hero-stats .stat span { font-size: 13px; opacity: .85; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: none; cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-geel { background: var(--geel); color: var(--blauw); }
.btn-geel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hover); }
.btn-blauw { background: var(--blauw); color: var(--wit); }
.btn-blauw:hover { background: var(--blauw-licht); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--blauw); border: 2px solid var(--blauw); }
.btn-outline:hover { background: var(--blauw); color: var(--wit); }
.btn-ghost { background: var(--grijs-licht); color: var(--blauw); }
.btn-ghost:hover { background: #e0e3ec; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-full { width: 100%; justify-content: center; }

/* ---------- Section ---------- */
.section { padding: 60px 0; }
.section.alt { background: var(--blauw-zacht); }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head .eyebrow { color: var(--grijs); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.section-head h2 { font-size: clamp(24px, 4vw, 34px); margin: 8px 0 10px; font-weight: 700; }
.section-head p { color: var(--grijs); font-size: 16px; margin: 0; }

/* ---------- Sponsor cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.card {
  background: var(--wit);
  border: 1px solid var(--grijs-licht);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--schaduw);
  transition: transform .14s ease, box-shadow .14s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--schaduw-hover); }
.card-top {
  height: 96px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--blauw);
  color: var(--wit);
}
.card-logo {
  width: 56px; height: 56px; flex: none;
  border-radius: 12px;
  background: var(--geel);
  color: var(--blauw);
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
  line-height: 1;
  text-align: center;
}
.card-top .name { font-weight: 700; font-size: 17px; }
.card-top .name small { display: block; font-weight: 500; opacity: .82; font-size: 12px; }
.card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.badge {
  align-self: flex-start;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--blauw-zacht); color: var(--blauw);
  margin-bottom: 12px;
}
.badge.geel { background: var(--geel); }
.card-body p { color: var(--grijs); font-size: 14.5px; margin: 0 0 18px; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-foot .jeugd { font-size: 12px; font-weight: 700; color: var(--groen); }

/* ---------- Banner / jeugd-strip ---------- */
.jeugdstrip {
  background: var(--geel);
  color: var(--blauw);
  text-align: center;
  padding: 16px;
  font-weight: 700;
  font-size: 15px;
}

/* ---------- Sponsor landing ---------- */
.crumbs { font-size: 13px; color: var(--grijs); padding: 18px 0 0; }
.crumbs a { color: var(--grijs); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.lp-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding: 40px 0 50px; }
.lp-hero .badge { margin-bottom: 14px; }
.lp-hero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; margin: 0 0 14px; line-height: 1.1; }
.lp-hero p.lead { font-size: 17px; color: var(--grijs); margin: 0 0 22px; }
.lp-usps { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.lp-usps li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.lp-usps li::before { content: "✓"; color: var(--groen); font-weight: 700; }

.lp-aside {
  background: var(--blauw);
  color: var(--wit);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}
.lp-aside h3 { margin: 0 0 6px; font-size: 16px; }
.lp-aside .qr {
  background: #fff; border-radius: 12px; padding: 14px;
  width: 168px; height: 168px; margin: 14px auto;
  display: grid; place-items: center;
}
.lp-aside .qr img, .lp-aside .qr canvas { width: 100%; height: 100%; }
.lp-aside .urlbox {
  background: rgba(255,255,255,.12);
  border-radius: 8px; padding: 9px 11px;
  font-size: 11.5px; word-break: break-all;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  margin-top: 8px;
}
.lp-aside small { opacity: .8; font-size: 12px; }

/* ---------- Form ---------- */
.formcard {
  background: var(--wit);
  border: 1px solid var(--grijs-licht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 30px;
  max-width: 720px;
}
.formcard h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.formcard .sub { color: var(--grijs); margin: 0 0 24px; font-size: 14.5px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field label .req { color: var(--rood); }
.field .hint { font-weight: 400; color: var(--grijs); font-size: 12.5px; display: block; margin-top: 3px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1.5px solid var(--grijs-licht);
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 15px;
  color: var(--blauw);
  background: #fff;
  transition: border-color .12s ease;
}
/* Focus. Nooit outline:none zonder vervanging: wie met het toetsenbord invult,
   zag eerder helemaal niet waar hij stond. De rand alleen is te weinig, kleur mag
   niet het enige signaal zijn, dus er komt een ring omheen. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blauw);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blauw);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
/* Op donkerblauwe vlakken springt een blauwe ring niet uit: daar geel. */
.hero a:focus-visible, .footer a:focus-visible, .vvs-footer a:focus-visible,
.vvs-topbar a:focus-visible, .vvs-topbar button:focus-visible {
  outline-color: var(--geel);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-chip { position: relative; }
.radio-chip input { position: absolute; opacity: 0; pointer-events: none; }
.radio-chip span {
  display: inline-block;
  padding: 10px 16px;
  border: 1.5px solid var(--grijs-licht);
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  color: var(--grijs);
}
.radio-chip input:checked + span {
  border-color: var(--blauw); background: var(--blauw); color: #fff;
}
/* Variant "vink": een echte, zichtbare checkbox voor akkoord- en opt-in-velden.
   De pill-variant hierboven verbergt de input (opacity:0), wat voor een keuzechip
   klopt maar niet voor een verplicht akkoordveld. 24px = duimformaat op mobiel. */
.radio-chip.vink .vinkbox {
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 24px;
  height: 24px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--blauw);
  cursor: pointer;
}

/* Pre-screen feedback */
.screen-result { margin: 4px 0 20px; border-radius: var(--radius-s); padding: 14px 16px; font-size: 14px; font-weight: 600; display: none; }
.screen-result.ok { display: block; background: #e8f6ee; color: var(--groen); border: 1px solid #bfe6cd; }
.screen-result.warn { display: block; background: #fdeee8; color: #c2531d; border: 1px solid #f6cfb8; }

/* Success */
.success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.success.show { display: block; }
.success .check {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--groen); color: #fff;
  display: grid; place-items: center; margin: 0 auto 18px;
  font-size: 38px; font-weight: 700;
}
.success h2 { font-size: 24px; margin: 0 0 8px; }
.success p { color: var(--grijs); max-width: 460px; margin: 0 auto 22px; }

/* ---------- Admin / leads ---------- */
.admin-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.admin-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.kpi { background: #fff; border: 1px solid var(--grijs-licht); border-radius: var(--radius-s); padding: 14px 18px; min-width: 120px; }
.kpi strong { display: block; font-size: 26px; font-weight: 700; }
.kpi span { font-size: 12.5px; color: var(--grijs); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; }
.toolbar input[type=search] {
  padding: 11px 13px; border: 1.5px solid var(--grijs-licht);
  border-radius: var(--radius-s); font-size: 14px; min-width: 220px; font-family: var(--font);
}
.table-card { background: #fff; border: 1px solid var(--grijs-licht); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  background: var(--blauw); color: #fff; text-align: left;
  padding: 13px 14px; font-weight: 700; white-space: nowrap; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .4px;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--grijs-licht); vertical-align: top; }
tbody tr:hover { background: var(--blauw-zacht); }
.tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--blauw-zacht); color: var(--blauw); white-space: nowrap; }
.tag.groen { background: #e8f6ee; color: var(--groen); }
.tag.geel { background: var(--geel); color: var(--blauw); }
.empty { text-align: center; padding: 48px 20px; color: var(--grijs); }
.empty .big { font-size: 40px; margin-bottom: 10px; }
.muted { color: var(--grijs); font-size: 12px; }
.seed-note { font-size: 12.5px; color: var(--grijs); margin-top: 14px; }
.seed-note a { font-weight: 700; }

/* ---------- Footer ---------- */
.footer { background: var(--blauw); color: #fff; padding: 40px 0 30px; margin-top: 50px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.footer a { color: var(--geel); }
/* h2 én h4: de footers gaan naar h2 (koppen mogen geen niveau overslaan),
   maar niet elke pagina is al om. Beide stijlen dus. */
.footer .col h4, .footer .col h2 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.footer .col p, .footer .col a { font-size: 13.5px; opacity: .9; display: block; margin-bottom: 5px; text-decoration: none; }
.footer .fineprint { width: 100%; border-top: 1px solid rgba(255,255,255,.18); margin-top: 16px; padding-top: 16px; font-size: 12px; opacity: .7; }

/* =========================================================
   Clubtypografie (conform vvstaphorst.nl): Barlow Condensed
   ========================================================= */
h1, h2, h3, h4,
.hero h1, .section-head h2, .lp-hero h1, .formcard h2, .success h2,
.kpi strong, .brand, .card-top .name, .seg-btn, .vac-card h3 {
  font-family: var(--font-head);
  letter-spacing: .2px;
}
.hero h1, .lp-hero h1, .section-head h2 { letter-spacing: 0; }

/* =========================================================
   Logo-tegels (witte tegel + img met initialen-fallback)
   ========================================================= */
.logo-tile {
  background: #fff;
  border-radius: 11px;
  display: grid; place-items: center;
  overflow: hidden;
  flex: none;
}
.logo-tile img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.logo-tile .initialen {
  font-family: var(--font-head);
  font-weight: 700; color: var(--blauw); font-size: 18px;
}
.card-top .logo-tile { width: 56px; height: 56px; }
.brand .logo-tile { width: 38px; height: 38px; border-radius: 9px; }

/* =========================================================
   Werk Geel-Blauw — segmentkeuze (Ik zoek werk / vacature)
   ========================================================= */
.segment {
  display: inline-flex; gap: 6px;
  background: rgba(255,255,255,.12);
  padding: 6px; border-radius: 999px; margin-bottom: 8px;
}
.seg-btn {
  border: none; cursor: pointer; background: transparent;
  color: #fff; font-weight: 700; font-size: 15px;
  padding: 10px 20px; border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}
.seg-btn.active { background: var(--geel); color: var(--blauw); }

/* =========================================================
   Vacaturebank — filters + kaarten
   ========================================================= */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 26px;
}
.filters select, .filters input[type=search] {
  padding: 10px 13px; border: 1.5px solid var(--blauw-rand);
  border-radius: var(--radius-s); font-family: var(--font);
  font-size: 14px; color: var(--blauw); background: #fff;
}
.filters input[type=search] { min-width: 220px; flex: 1; }
.filters .count { margin-left: auto; color: var(--grijs); font-size: 13.5px; font-weight: 600; }

.vac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.vac-card {
  background: #fff; border: 1px solid var(--grijs-licht);
  border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column;
  box-shadow: var(--schaduw); transition: transform .14s ease, box-shadow .14s ease;
}
.vac-card:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hover); }
.vac-card .vac-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.vac-card h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--blauw); }
.vac-card .dv { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; background: var(--blauw-zacht); color: var(--blauw); }
.vac-card .dv.vast { background: #e8f6ee; color: var(--groen); }
.vac-card .dv.uitzend { background: var(--geel); color: var(--blauw); }
.vac-card .meta { font-size: 13px; color: var(--grijs); margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.vac-card .meta b { color: var(--blauw); font-weight: 700; }
.vac-card p.oneliner { font-size: 14px; color: var(--grijs); margin: 0 0 16px; flex: 1; }
.vac-card .vac-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vac-card .via { font-size: 12px; color: var(--grijs); }
.vac-card .via b { color: var(--blauw); }
.voorbeeld-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--grijs); background: var(--grijs-licht); padding: 3px 8px; border-radius: 6px; }

/* AVG / privacy-regel onder formulieren */
.avg-note { font-size: 12px; color: var(--grijs); margin-top: 6px; }
.avg-note a { color: var(--blauw); }

/* Bereik-strategie (sponsors/bestuur) */
.bereik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; }
.bereik-item { background: #fff; border: 1px solid var(--grijs-licht); border-radius: var(--radius-s); padding: 18px; }
/* Zeshoek-icoon, gelijk aan de waarde-kaarten op de homepage (geen emoji). */
.bereik-item .ico { width: 44px; height: 48px; background: var(--geel); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: grid; place-items: center; color: var(--blauw); margin-bottom: 12px; }
.bereik-item .ico svg { width: 22px; height: 22px; }
.bereik-item h4 { margin: 0 0 4px; font-size: 16px; }
.bereik-item p { margin: 0; font-size: 13.5px; color: var(--grijs); }

/* Sponsorvoordeel-blok */
.voordeel {
  background: var(--blauw); color: #fff; border-radius: var(--radius);
  padding: 30px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center;
}
.voordeel h3 { margin: 0 0 10px; font-size: 24px; }
.voordeel p { margin: 0 0 12px; font-size: 15px; opacity: .92; }
.voordeel ul { margin: 0; padding-left: 0; list-style: none; }
.voordeel li { display: flex; gap: 9px; margin-bottom: 8px; font-size: 14.5px; }
.voordeel li::before { content: "→"; color: var(--geel); font-weight: 700; }
.voordeel .vk { background: rgba(255,255,255,.10); border-radius: var(--radius-s); padding: 20px; text-align: center; }
.voordeel .vk strong { display: block; font-family: var(--font-head); font-size: 40px; color: var(--geel); line-height: 1; }
.voordeel .vk span { font-size: 13px; opacity: .85; }

/* hidden helper */
.hidden { display: none !important; }

/* =========================================================
   Demo-balk — maakt duidelijk dat dit een voorbeeldversie is
   ========================================================= */
.demobar {
  background: var(--blauw-donker);
  color: #fff;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  line-height: 1.4;
}
.demobar b {
  background: var(--geel);
  color: var(--blauw);
  font-weight: 700;
  letter-spacing: .6px;
  padding: 2px 8px;
  border-radius: 5px;
  margin-right: 8px;
}

/* =========================================================
   Opbrengst-barometer
   ========================================================= */
.barometer { background: var(--blauw); color: #fff; border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--schaduw); }
.barometer .baro-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.barometer .raised { font-family: var(--font-head); font-size: 42px; font-weight: 700; color: var(--geel); line-height: 1; }
.barometer .raised small { font-size: 15px; color: #fff; opacity: .8; font-weight: 600; font-family: var(--font); }
.barometer .target { font-size: 14px; opacity: .85; text-align: right; }
.baro-track { background: rgba(255,255,255,.15); border-radius: 999px; height: 22px; overflow: hidden; }
.baro-fill { background: var(--geel); height: 100%; border-radius: 999px; min-width: 26px; transition: width .8s ease; }
.barometer .baro-cap { font-size: 13px; opacity: .92; margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.barometer .baro-cap .stem { background: var(--geel); color: var(--blauw); font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: 12px; }

/* Actietype-badges + periode */
.badge.wedstrijd { background: var(--blauw-mid); color: #fff; }
.badge.maand { background: var(--geel); color: var(--blauw); }
.badge.vacature { background: #e8f6ee; color: var(--groen); }
.periode { font-size: 12.5px; color: var(--grijs); font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.periode .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--groen); flex: none; }
.periode .dot.binnenkort { background: var(--geel-donker); }

/* Maandnavigatie */
.maandnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.maand-chip { border: 1.5px solid var(--blauw-rand); background: #fff; color: var(--blauw); border-radius: 999px; padding: 8px 15px; font-weight: 700; cursor: pointer; font-size: 14px; font-family: var(--font); white-space: nowrap; transition: background .12s ease, color .12s ease; }
.maand-chip:hover { border-color: var(--blauw); }
.maand-chip.actief { background: var(--blauw); color: #fff; border-color: var(--blauw); }
.maand-chip .nu { font-size: 10px; font-weight: 700; opacity: .8; margin-left: 5px; text-transform: uppercase; }
.maandnav .nav-btn { border: 1.5px solid var(--blauw-rand); background: #fff; color: var(--blauw); border-radius: 9px; width: 38px; height: 38px; cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1; }
.maandnav .nav-btn:hover { background: var(--blauw); color: #fff; }
.maandnav .nav-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Statuslabel op actiekaart */
.status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.status.lopend { background: #e8f6ee; color: var(--groen); }
.status.afgelopen { background: var(--grijs-licht); color: var(--grijs); }
.status.gepland { background: var(--geel); color: var(--blauw); }
.kaart-status { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

/* =========================================================
   Hoofdsponsor-balk (PlasmaMade, op elke pagina)
   ========================================================= */
.hoofdsponsor-bar { background: var(--geel); color: var(--blauw); }
.hoofdsponsor-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 11px 22px; flex-wrap: wrap; }
.hoofdsponsor-bar .hs-label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 14px; }
.hoofdsponsor-bar .hs-logo { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px; padding: 5px 12px; text-decoration: none; }
.hoofdsponsor-bar .hs-logo img { height: 24px; width: auto; object-fit: contain; }
.hoofdsponsor-bar .hs-logo .fb { font-family: var(--font-head); font-weight: 700; color: var(--blauw); font-size: 15px; }
.hoofdsponsor-bar a.shop { color: var(--blauw); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--blauw); }
.hoofdsponsor-bar a.shop:hover { opacity: .8; }

/* =========================================================
   Sponsorstrip per tier (Hoofd / Top / Goud)
   ========================================================= */
.tier-groep { margin-bottom: 22px; }
.tier-groep .tier-naam { font-family: var(--font-head); font-weight: 700; color: var(--grijs); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin: 0 0 10px; }
.tier-groep.hoofd .tier-naam { color: var(--blauw); }
.hoofd-tile { background: #fff; border: 2px solid var(--geel); border-radius: var(--radius-s); padding: 18px 26px; display: inline-flex; align-items: center; gap: 16px; text-decoration: none; box-shadow: var(--schaduw); }
.hoofd-tile img { height: 46px; width: auto; object-fit: contain; }
.hoofd-tile .ht-txt { color: var(--blauw); }
.hoofd-tile .ht-txt b { display: block; font-family: var(--font-head); font-size: 19px; }
.hoofd-tile .ht-txt span { font-size: 12.5px; color: var(--grijs); }

/* =========================================================
   Sponsor-logowall
   ========================================================= */
.logowall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.logowall .tile {
  background: #fff;
  border: 1px solid var(--grijs-licht);
  border-radius: var(--radius-s);
  height: 92px;
  display: grid; place-items: center;
  padding: 14px 16px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.logowall .tile:hover { transform: translateY(-3px); box-shadow: var(--schaduw); }
.logowall .tile img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: grayscale(100%); opacity: .72;
  transition: filter .15s ease, opacity .15s ease;
}
.logowall .tile:hover img { filter: grayscale(0%); opacity: 1; }
.logowall .more {
  background: var(--blauw); color: #fff;
  border-radius: var(--radius-s); height: 92px;
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.1;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .lp-hero { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .topnav a:not(.cta) { display: none; }
  .hero { padding: 46px 0 52px; }
  .voordeel { grid-template-columns: 1fr; }
  .filters input[type=search] { min-width: 100%; }
}

/* Wie in zijn systeem heeft aangegeven bewegingsarm te willen werken (vestibulaire
   klachten, migraine), krijgt geen smooth-scroll en geen hover-verspringingen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
}