/* ==========================================================================
   AZ FLEX — gedeelde stylesheet
   --------------------------------------------------------------------------
   Opbouw van dit bestand:
     1.  Design tokens (kleuren, typografie, spacing, radii)
     2.  Reset & basis
     3.  Layout helpers (container, section, grid)
     4.  Typografie & koppen
     5.  Knoppen
     6.  Decoratieve organische vormen (blobs)
     7.  Header & navigatie
     8.  Hero
     9.  Stappen ("Hoe werkt het")
    10.  Kernwaarden-kaarten
    11.  Opdracht-kaarten (werkaanbod)
    12.  CTA-banner
    13.  Formulieren
    14.  Losse componenten (FAQ, tabel, contactblokken, team)
    15.  Footer
    16.  Animaties (scroll-reveal)
    17.  Responsive breakpoints
    18.  Print & toegankelijkheid

   Mobile-first: basisstijlen gelden voor telefoon, media queries schalen op.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Huisstijlkleuren --- */
  --kleur-primair:        #1D3D5C;  /* donkerblauw  */
  --kleur-primair-diep:   #152C43;  /* donkerder, voor footer/hover */
  --kleur-accent:         #4A7BA6;  /* lichtblauw   */
  --kleur-accent-zacht:   #E4EDF5;  /* zeer licht blauw vlak */
  --kleur-achtergrond:    #F7F7F5;  /* gebroken wit */
  --kleur-wit:            #FFFFFF;

  /* --- Tekstkleuren --- */
  --kleur-tekst:          #22303C;
  --kleur-tekst-zacht:    #5B6A77;
  --kleur-tekst-op-blauw: rgba(255, 255, 255, 0.86);

  /* --- Signaalkleuren (formulier-feedback) --- */
  --kleur-fout:           #C0392B;
  --kleur-succes:         #1E7B54;

  /* --- Randen & lijnen --- */
  --kleur-rand:           #E3E3DE;

  /* --- Ronde hoeken (16px als basis, zoals in de huisstijl) --- */
  --radius:               16px;
  --radius-klein:         10px;
  --radius-groot:         28px;
  --radius-pil:           999px;

  /* --- Schaduwen: zacht en subtiel --- */
  --schaduw-zacht:  0 2px 10px rgba(29, 61, 92, 0.06);
  --schaduw-kaart:  0 6px 24px rgba(29, 61, 92, 0.08);
  --schaduw-hover:  0 14px 36px rgba(29, 61, 92, 0.16);

  /* --- Typografie --- */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, sans-serif;

  /* --- Ritme --- */
  --container-max:  1180px;
  --sectie-padding: 64px;   /* verticale ruimte per sectie op mobiel */

  /* --- Overgangen --- */
  --transitie: 200ms ease;
}


/* ==========================================================================
   2. RESET & BASIS
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Ruimte onder de sticky header bij het springen naar een anker */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--kleur-tekst);
  background-color: var(--kleur-achtergrond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* voorkomt horizontale scroll door de decoratieve blobs */
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--kleur-accent);
  text-decoration: none;
  transition: color var(--transitie);
}

a:hover {
  color: var(--kleur-primair);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* Duidelijke focus-ring voor toetsenbordgebruikers */
:focus-visible {
  outline: 3px solid var(--kleur-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Alleen zichtbaar voor screenreaders */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sla-over-link: verschijnt zodra hij focus krijgt */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--kleur-primair);
  color: #fff;
  border-radius: var(--radius-klein);
  transition: top var(--transitie);
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Standaard sectie met verticale ademruimte */
.sectie {
  position: relative;
  padding-top: var(--sectie-padding);
  padding-bottom: var(--sectie-padding);
}

/* Sectie op wit vlak, om ritme te maken tegen de gebroken witte achtergrond */
.sectie--wit {
  background: var(--kleur-wit);
}

/* Sectie in zacht blauw */
.sectie--zacht {
  background: var(--kleur-accent-zacht);
}

/* Sectie in donkerblauw, met lichte tekst */
.sectie--donker {
  background: var(--kleur-primair);
  color: #fff;
}

.sectie--donker p {
  color: var(--kleur-tekst-op-blauw);
}

/* Kop van een sectie: titel + introzin, gecentreerd */
.sectie-kop {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.sectie-kop p {
  color: var(--kleur-tekst-zacht);
  margin-bottom: 0;
}

.sectie--donker .sectie-kop p {
  color: var(--kleur-tekst-op-blauw);
}

/* Herbruikbaar grid: 1 kolom op mobiel, schaalt op in de media queries */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}


/* ==========================================================================
   4. TYPOGRAFIE
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0 0 16px;
  color: var(--kleur-primair);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sectie--donker h1,
.sectie--donker h2,
.sectie--donker h3,
.sectie--donker h4 {
  color: #fff;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p {
  margin: 0 0 16px;
}

p:last-child {
  margin-bottom: 0;
}

/* Introzin onder een titel: iets groter en rustiger */
.lead {
  font-size: 1.05rem;
  color: var(--kleur-tekst-zacht);
}

/* Klein label boven een titel ("eyebrow") */
.label-boven {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kleur-accent);
  background: var(--kleur-accent-zacht);
  border-radius: var(--radius-pil);
}

.sectie--donker .label-boven {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* Lijst met vinkjes */
.lijst-check {
  list-style: none;
  margin: 0 0 24px;
}

.lijst-check li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
}

/* Het vinkje zelf, getekend met CSS zodat er geen icoonbestanden nodig zijn */
.lijst-check li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--kleur-accent);
  border-bottom: 2.5px solid var(--kleur-accent);
  transform: rotate(-45deg);
}

.sectie--donker .lijst-check li::before {
  border-color: #fff;
}


/* ==========================================================================
   5. KNOPPEN
   ========================================================================== */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--transitie),
              box-shadow var(--transitie),
              background-color var(--transitie),
              border-color var(--transitie),
              color var(--transitie);
}

.knop:hover {
  transform: translateY(-2px);
}

.knop:active {
  transform: translateY(0);
}

/* Primair: donkerblauw vlak */
.knop--primair {
  background: var(--kleur-primair);
  color: #fff;
  box-shadow: var(--schaduw-kaart);
}

.knop--primair:hover {
  background: var(--kleur-primair-diep);
  color: #fff;
  box-shadow: var(--schaduw-hover);
}

/* Accent: lichtblauw vlak */
.knop--accent {
  background: var(--kleur-accent);
  color: #fff;
  box-shadow: var(--schaduw-kaart);
}

.knop--accent:hover {
  background: #3E6B92;
  color: #fff;
  box-shadow: var(--schaduw-hover);
}

/* Omlijnd: transparant met rand */
.knop--rand {
  background: transparent;
  color: var(--kleur-primair);
  border-color: var(--kleur-primair);
}

.knop--rand:hover {
  background: var(--kleur-primair);
  color: #fff;
}

/* Omlijnd op donkere ondergrond */
.sectie--donker .knop--rand,
.cta-banner .knop--rand {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.sectie--donker .knop--rand:hover,
.cta-banner .knop--rand:hover {
  background: #fff;
  color: var(--kleur-primair);
  border-color: #fff;
}

/* Wit vlak op donkere ondergrond */
.knop--wit {
  background: #fff;
  color: var(--kleur-primair);
  box-shadow: var(--schaduw-kaart);
}

.knop--wit:hover {
  background: var(--kleur-achtergrond);
  color: var(--kleur-primair);
  box-shadow: var(--schaduw-hover);
}

/* Knop over de volle breedte (handig in formulieren en op mobiel) */
.knop--breed {
  width: 100%;
}

/* Groep knoppen naast elkaar; stapelt vanzelf op smalle schermen */
.knop-groep {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.knop-groep--gecentreerd {
  justify-content: center;
}


/* ==========================================================================
   6. DECORATIEVE ORGANISCHE VORMEN (BLOBS)
   --------------------------------------------------------------------------
   Vloeiende vlekken die achter de content zweven. Puur decoratief:
   ze staan op aria-hidden en vangen geen muisklikken op.
   ========================================================================== */

.blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.5;
  /* Onregelmatige, organische vorm via border-radius met acht waarden */
  border-radius: 42% 58% 63% 37% / 46% 38% 62% 54%;
}

.blob--1 {
  width: 260px;
  height: 260px;
  top: -70px;
  right: -90px;
  background: var(--kleur-accent-zacht);
  animation: blob-zweef 18s ease-in-out infinite;
}

.blob--2 {
  width: 200px;
  height: 200px;
  bottom: -80px;
  left: -70px;
  background: rgba(74, 123, 166, 0.16);
  animation: blob-zweef 22s ease-in-out infinite reverse;
}

.blob--3 {
  width: 150px;
  height: 150px;
  top: 40%;
  left: -50px;
  background: rgba(29, 61, 92, 0.07);
  animation: blob-zweef 26s ease-in-out infinite;
}

/* Lichte blobs voor gebruik op donkerblauwe vlakken */
.blob--licht {
  background: rgba(255, 255, 255, 0.08);
}

/* Langzame, vloeiende beweging van de vormen */
@keyframes blob-zweef {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(18px, -22px) rotate(12deg) scale(1.06); }
  66%      { transform: translate(-14px, 16px) rotate(-8deg) scale(0.96); }
}

/* Alle content binnen een sectie boven de blobs houden */
.sectie > .container,
.hero > .container,
.cta-banner > .container {
  position: relative;
  z-index: 1;
}

/* Golvende scheidingslijn tussen twee secties */
.golf {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 0;
}

.golf svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ==========================================================================
   7. HEADER & NAVIGATIE
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 247, 245, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transitie), border-color var(--transitie);
}

/* Klasse die script.js toevoegt zodra de pagina gescrold is */
.site-header.is-gescrold {
  box-shadow: var(--schaduw-zacht);
  border-bottom-color: var(--kleur-rand);
}

.header-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

/* --- Logo (tekstversie; zie de HTML voor het omwisselen naar logo.png) --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  line-height: 1.05;
  color: var(--kleur-primair);
}

.logo:hover {
  color: var(--kleur-primair);
}

/* Het beeldmerk uit logo.png, in een licht organisch tegeltje.
   logo.png is een vierkante compositie met het icoon bovenin en de
   woordmerktekst eronder. In de header tonen we alleen het icoon (de
   tekst staat er in levende letters naast, dat blijft op elk formaat
   leesbaar). Het uitsnijden gebeurt met transform-origin + scale. */
.logo-merk {
  position: relative;
  overflow: hidden;   /* snijdt het woordmerk uit de afbeelding weg */
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: var(--kleur-achtergrond);
  border-radius: 12px 14px 12px 16px; /* licht organisch */
}

/* De afbeelding wordt op 205% gezet en zo verschoven dat alleen het
   icoon van logo.png binnen het tegeltje valt (ongeveer 10% – 59% van de
   hoogte van het bestand; daaronder begint het woordmerk). Wil je hoger
   of lager uitsnijden, pas dan alleen 'top' aan; 'left' houdt het icoon
   horizontaal gecentreerd. */
.logo-merk img {
  position: absolute;
  width: 205%;
  max-width: none;   /* overschrijft de algemene img-regel in sectie 2 */
  height: auto;
  left: -52.5%;      /* horizontaal gecentreerd */
  top: -20.5%;       /* verticaal op het icoon */
}

/* Wil je juist het hele logo tonen (icoon én woordmerk), haal dan
   onderstaand blok uit commentaar en verwijder de twee <span>'s met
   de klasse .logo-tekst uit de HTML.

.logo-merk {
  width: auto;
  height: 52px;
  aspect-ratio: 1 / 1;
  background: transparent;
}
.logo-merk img {
  transform: none;
}
*/

.logo-tekst {
  display: flex;
  flex-direction: column;
}

.logo-naam {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.logo-sub {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-accent);
}

/* Beeldlogo: krijgt dezelfde hoogte als de tekstversie */
.logo-afbeelding {
  height: 48px;
  width: auto;
  border-radius: 12px;
}

/* --- Hamburgerknop (alleen zichtbaar op mobiel) --- */
.nav-schakelaar {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
  cursor: pointer;
}

.nav-schakelaar span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--kleur-primair);
  border-radius: 2px;
  transition: transform var(--transitie), opacity var(--transitie);
}

/* Hamburger wordt een kruisje als het menu open staat */
.nav-schakelaar[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-schakelaar[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-schakelaar[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Het navigatiepaneel --- */
.hoofdnav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;            /* dicht op mobiel tot de gebruiker klikt */
  padding: 12px 20px 24px;
  background: var(--kleur-wit);
  border-bottom: 1px solid var(--kleur-rand);
  box-shadow: var(--schaduw-kaart);
}

.hoofdnav.is-open {
  display: block;
}

.nav-lijst {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-lijst a {
  display: block;
  padding: 12px 8px;
  font-weight: 500;
  color: var(--kleur-tekst);
  border-radius: var(--radius-klein);
}

.nav-lijst a:hover {
  background: var(--kleur-accent-zacht);
  color: var(--kleur-primair);
}

/* De actieve pagina in het menu */
.nav-lijst a.is-actief {
  color: var(--kleur-primair);
  font-weight: 600;
  background: var(--kleur-accent-zacht);
}

/* De opvallende aanmeldknop in het menu */
.nav-cta {
  margin-top: 12px;
}

.nav-cta .knop {
  width: 100%;
}


/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 56px;
  padding-bottom: 64px;
  background:
    radial-gradient(120% 90% at 85% 0%, #EDF3F9 0%, rgba(237, 243, 249, 0) 60%),
    var(--kleur-achtergrond);
}

.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.hero .lead {
  font-size: 1.08rem;
  margin-bottom: 28px;
  max-width: 560px;
}

/* De twee grote keuzeknoppen */
.hero-keuzes {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
}

.hero-keuze {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  text-align: left;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--transitie), box-shadow var(--transitie);
}

.hero-keuze:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-hover);
}

.hero-keuze strong {
  font-size: 1.05rem;
  font-weight: 600;
}

.hero-keuze span {
  font-size: 0.88rem;
  opacity: 0.85;
}

/* Variant 1: donkerblauw (ZZP'ers) */
.hero-keuze--zzp {
  background: var(--kleur-primair);
  color: #fff;
  box-shadow: var(--schaduw-kaart);
}

.hero-keuze--zzp:hover {
  color: #fff;
}

/* Variant 2: lichtblauw (bedrijven) */
.hero-keuze--bedrijf {
  background: var(--kleur-accent);
  color: #fff;
  box-shadow: var(--schaduw-kaart);
}

.hero-keuze--bedrijf:hover {
  color: #fff;
}

/* Rijtje met korte bewijspunten onder de knoppen */
.hero-punten {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.92rem;
  color: var(--kleur-tekst-zacht);
}

.hero-punten li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-punten li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kleur-accent);
  flex-shrink: 0;
}

/* Kaartje met cijfers rechts van de hero (op desktop) */
.hero-visual {
  display: none; /* pas vanaf tablet zichtbaar, zie media queries */
}

.cijfer-kaart {
  display: grid;
  gap: 18px;
  padding: 28px;
  background: var(--kleur-wit);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-kaart);
}

.cijfer {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.cijfer strong {
  font-size: 1.9rem;
  white-space: nowrap;   /* cijfers nooit over twee regels breken */
  font-weight: 700;
  color: var(--kleur-primair);
  line-height: 1;
}

.cijfer span {
  font-size: 0.92rem;
  color: var(--kleur-tekst-zacht);
}

/* Interne pagina-hero (voor alle pagina's behalve de homepage) */
.pagina-hero {
  position: relative;
  overflow: hidden;
  padding-top: 48px;
  padding-bottom: 48px;
  background: var(--kleur-primair);
  color: #fff;
}

.pagina-hero h1 {
  color: #fff;
  margin-bottom: 12px;
}

.pagina-hero .lead {
  color: var(--kleur-tekst-op-blauw);
  max-width: 660px;
  margin-bottom: 0;
}

/* Kruimelpad boven de paginatitel */
.kruimels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.kruimels a {
  color: rgba(255, 255, 255, 0.85);
}

.kruimels a:hover {
  color: #fff;
}

.kruimels li + li::before {
  content: "›";
  margin-right: 8px;
}


/* ==========================================================================
   9. STAPPEN ("HOE WERKT HET")
   ========================================================================== */

/* Twee kolommen met elk drie stappen; stapelt op mobiel */
.stappen-blok {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

.stappen-kolom h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 1.25rem;
}

/* Gekleurd bolletje voor de kolomtitel */
.stappen-kolom h3::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50% 40% 55% 45%;
  background: var(--kleur-accent);
  flex-shrink: 0;
}

.stappen-kolom--bedrijven h3::before {
  background: var(--kleur-primair);
}

.stappen {
  list-style: none;
  display: grid;
  gap: 14px;
}

.stap {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  transition: transform var(--transitie), box-shadow var(--transitie);
}

.stap:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-kaart);
}

/* Het genummerde rondje links in de stap */
.stap-nummer {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--kleur-accent);
  border-radius: 50% 42% 58% 46%;
}

.stappen-kolom--bedrijven .stap-nummer {
  background: var(--kleur-primair);
}

.stap h4 {
  margin-bottom: 4px;
}

.stap p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--kleur-tekst-zacht);
}


/* ==========================================================================
   10. KERNWAARDEN-KAARTEN
   ========================================================================== */

.waarde-kaart {
  padding: 28px 24px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  transition: transform var(--transitie), box-shadow var(--transitie);
}

.waarde-kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--schaduw-kaart);
}

/* Organisch vormpje met een icoon erin */
.waarde-icoon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  color: var(--kleur-primair);
  background: var(--kleur-accent-zacht);
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
}

.waarde-icoon svg {
  width: 26px;
  height: 26px;
}

.waarde-kaart h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.waarde-kaart p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--kleur-tekst-zacht);
}


/* ==========================================================================
   11. OPDRACHT-KAARTEN (WERKAANBOD)
   ========================================================================== */

.opdracht-kaart {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  transition: transform var(--transitie), box-shadow var(--transitie),
              border-color var(--transitie);
}

.opdracht-kaart:hover {
  transform: translateY(-4px);
  border-color: var(--kleur-accent);
  box-shadow: var(--schaduw-kaart);
}

/* Rijtje labels bovenaan de kaart (vakgebied, nieuw, spoed) */
.opdracht-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tag {
  display: inline-block;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kleur-accent);
  background: var(--kleur-accent-zacht);
  border-radius: var(--radius-pil);
}

.tag--spoed {
  color: #8A4B12;
  background: #FBEEDC;
}

.tag--nieuw {
  color: var(--kleur-succes);
  background: #E1F2EA;
}

.opdracht-kaart h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* Regels met plaats, tarief, duur en start */
.opdracht-details {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.92rem;
  color: var(--kleur-tekst-zacht);
}

.opdracht-details li {
  display: flex;
  gap: 10px;
}

.opdracht-details strong {
  min-width: 78px;
  font-weight: 600;
  color: var(--kleur-tekst);
}

.opdracht-kaart p {
  font-size: 0.93rem;
  color: var(--kleur-tekst-zacht);
}

/* Duwt de knop naar de onderkant, zodat alle kaarten gelijk ogen */
.opdracht-kaart .knop {
  margin-top: auto;
  align-self: flex-start;
  padding: 11px 20px;
  font-size: 0.92rem;
}

/* --- Filterbalk op werkaanbod.html --- */
.filterbalk {
  display: grid;
  gap: 16px;
  padding: 24px;
  margin-bottom: 32px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-zacht);
}

.filter-veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-veld label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-primair);
}

/* Regel met het aantal resultaten + wisknop */
.filter-resultaat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 0.93rem;
  color: var(--kleur-tekst-zacht);
}

.filter-wissen {
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kleur-primair);
  background: transparent;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-pil);
  cursor: pointer;
  transition: background-color var(--transitie), border-color var(--transitie);
}

.filter-wissen:hover {
  background: var(--kleur-accent-zacht);
  border-color: var(--kleur-accent);
}

/* Melding als er geen opdrachten overblijven */
.geen-resultaat {
  padding: 40px 24px;
  text-align: center;
  background: var(--kleur-wit);
  border: 1px dashed var(--kleur-rand);
  border-radius: var(--radius);
}


/* ==========================================================================
   12. CTA-BANNER
   ========================================================================== */

.cta-banner {
  position: relative;
  overflow: hidden;
  padding: 56px 0;
  background: linear-gradient(135deg, var(--kleur-primair) 0%, #27547D 100%);
  color: #fff;
  text-align: center;
}

.cta-banner h2 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.cta-banner p {
  max-width: 560px;
  margin: 0 auto 28px;
  color: var(--kleur-tekst-op-blauw);
}


/* ==========================================================================
   13. FORMULIEREN
   ========================================================================== */

.formulier-kaart {
  padding: 28px 22px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-kaart);
}

.formulier {
  display: grid;
  gap: 18px;
}

/* Groep van gerelateerde velden met een eigen kopje */
.veld-groep {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.veld-groep legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kleur-primair);
}

.veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.veld label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kleur-primair);
}

/* Markering van verplichte velden */
.veld label .verplicht {
  color: var(--kleur-fout);
}

/* Korte uitleg onder een label */
.veld-hint {
  font-size: 0.82rem;
  color: var(--kleur-tekst-zacht);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--kleur-tekst);
  background: var(--kleur-achtergrond);
  border: 1.5px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
  transition: border-color var(--transitie), background-color var(--transitie),
              box-shadow var(--transitie);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  background: var(--kleur-wit);
  border-color: var(--kleur-accent);
  box-shadow: 0 0 0 4px rgba(74, 123, 166, 0.16);
}

textarea {
  min-height: 130px;
  resize: vertical;
}

/* Eigen pijltje voor de select, zodat hij in elke browser gelijk oogt */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3D5C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

/* --- Checkboxen en radio's --- */
.keuze-rij {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.93rem;
}

.keuze-rij input[type="checkbox"],
.keuze-rij input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--kleur-accent);
  flex-shrink: 0;
}

.keuze-rij label {
  font-weight: 400;
  font-size: 0.93rem;
  color: var(--kleur-tekst);
}

/* Raster met vakgebied-checkboxen */
.keuze-raster {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

/* --- Validatie-feedback (gezet door script.js) --- */
.veld-fout {
  display: none;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--kleur-fout);
}

.veld.heeft-fout .veld-fout {
  display: block;
}

.veld.heeft-fout input,
.veld.heeft-fout select,
.veld.heeft-fout textarea {
  border-color: var(--kleur-fout);
  background: #FDF3F2;
}

/* Bevestiging na het versturen */
.formulier-succes {
  display: none;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  background: #E9F6F0;
  border: 1.5px solid #B7E0CD;
  border-radius: var(--radius);
  color: #14533A;
}

.formulier-succes.is-zichtbaar {
  display: flex;
}

.formulier-succes h3 {
  color: var(--kleur-succes);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.formulier-succes p {
  margin: 0;
  font-size: 0.93rem;
}

/* Rondje met vinkje in de bevestiging */
.succes-icoon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--kleur-succes);
  border-radius: 50%;
  font-size: 1.1rem;
}

/* Melding wanneer het opslaan van een formulier niet lukte */
.formulier-verzendfout {
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kleur-fout);
  background: #FDF3F2;
  border: 1.5px solid #F0C7C1;
  border-radius: var(--radius-klein);
}

/* Kleine voetnoot onder de verzendknop */
.formulier-voetnoot {
  font-size: 0.82rem;
  color: var(--kleur-tekst-zacht);
}


/* ==========================================================================
   14. LOSSE COMPONENTEN
   ========================================================================== */

/* --- Tweekoloms tekst + zijkaart --- */
.split {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}

/* Kaart met een rustige achtergrond, voor uitleg of samenvattingen */
.info-kaart {
  padding: 26px 24px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-zacht);
}

.info-kaart h3 {
  font-size: 1.1rem;
}

.info-kaart--accent {
  background: var(--kleur-accent-zacht);
  border-color: transparent;
}

/* --- FAQ (met <details>, werkt ook zonder JavaScript) --- */
.faq {
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 600;
  color: var(--kleur-primair);
  cursor: pointer;
  list-style: none;
}

/* Standaard driehoekje weghalen */
.faq-item summary::-webkit-details-marker { display: none; }

/* Eigen plus-teken dat draait bij openen */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--kleur-accent);
  transition: transform var(--transitie);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-antwoord {
  padding: 0 20px 20px;
  font-size: 0.95rem;
  color: var(--kleur-tekst-zacht);
}

/* --- Tarieventabel --- */
.tabel-wrap {
  overflow-x: auto;           /* tabel mag scrollen, de pagina niet */
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  background: var(--kleur-wit);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
  font-size: 0.93rem;
}

th, td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--kleur-rand);
}

th {
  font-weight: 600;
  color: var(--kleur-primair);
  background: var(--kleur-accent-zacht);
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Contactgegevens-blokken --- */
.contact-blok {
  display: flex;
  gap: 14px;
  padding: 20px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
}

.contact-icoon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--kleur-primair);
  background: var(--kleur-accent-zacht);
  border-radius: 54% 46% 42% 58%;
}

.contact-icoon svg {
  width: 21px;
  height: 21px;
}

.contact-blok h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.contact-blok p,
.contact-blok a {
  font-size: 0.93rem;
  margin: 0;
}

/* --- Tijdlijn (over.html) --- */
.tijdlijn {
  list-style: none;
  position: relative;
  padding-left: 28px;
}

/* Verticale lijn door de tijdlijn */
.tijdlijn::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--kleur-rand);
}

.tijdlijn li {
  position: relative;
  margin-bottom: 24px;
}

.tijdlijn li:last-child {
  margin-bottom: 0;
}

/* Bolletje op de lijn */
.tijdlijn li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 7px;
  width: 16px;
  height: 16px;
  background: var(--kleur-accent);
  border: 3px solid var(--kleur-achtergrond);
  border-radius: 50%;
}

.tijdlijn h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.tijdlijn p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--kleur-tekst-zacht);
}

/* --- Citaat / referentie --- */
.citaat {
  padding: 28px 24px;
  margin: 0;
  background: var(--kleur-wit);
  border-left: 4px solid var(--kleur-accent);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-zacht);
}

.citaat p {
  font-size: 1.02rem;
  font-style: italic;
  color: var(--kleur-tekst);
}

.citaat footer {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
}


/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: 56px;
  padding-bottom: 28px;
  background: var(--kleur-primair-diep);
  color: var(--kleur-tekst-op-blauw);
  font-size: 0.93rem;
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  padding-bottom: 32px;
}

.site-footer h3 {
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-footer a {
  color: var(--kleur-tekst-op-blauw);
}

.site-footer a:hover {
  color: #fff;
}

/* In de footer houden we het tegeltje licht: het icoon zelf is
   donkerblauw en zou op de donkere ondergrond wegvallen. */
.footer-logo .logo-merk {
  background: var(--kleur-achtergrond);
}

.footer-logo .logo-naam {
  color: #fff;
}

.footer-logo .logo-sub {
  color: rgba(255, 255, 255, 0.6);
}

.footer-over p {
  margin-top: 16px;
  max-width: 320px;
}

.footer-lijst {
  list-style: none;
  display: grid;
  gap: 9px;
}

/* Socials als rij met ronde knoppen */
.socials {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50% 44% 56% 48%;
  transition: background-color var(--transitie), transform var(--transitie);
}

.socials a:hover {
  background: var(--kleur-accent);
  transform: translateY(-2px);
}

.socials svg {
  width: 19px;
  height: 19px;
  fill: #fff;
}

/* Onderste balk met copyright */
.footer-onder {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-onder ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}


/* ==========================================================================
   16. ANIMATIES (SCROLL-REVEAL)
   --------------------------------------------------------------------------
   script.js zet .is-zichtbaar op elementen met .reveal zodra ze in beeld
   komen. Zonder JavaScript blijft alles gewoon zichtbaar (zie .no-js).
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.js .reveal.is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* Respecteer de systeeminstelling "minder beweging" */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   17. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --- Vanaf 600px: twee kolommen in rasters --- */
@media (min-width: 600px) {
  .hero-keuzes  { grid-template-columns: 1fr 1fr; }
  .keuze-raster { grid-template-columns: 1fr 1fr; }
  .grid--2      { grid-template-columns: repeat(2, 1fr); }
  .grid--3      { grid-template-columns: repeat(2, 1fr); }
  .grid--4      { grid-template-columns: repeat(2, 1fr); }
  .filterbalk   { grid-template-columns: repeat(2, 1fr); }
  .formulier-kaart { padding: 36px 32px; }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  .hero h1 { font-size: 2.7rem; }
}

/* --- Vanaf 900px: volledige desktopindeling --- */
@media (min-width: 900px) {
  :root {
    --sectie-padding: 88px;
  }

  /* Navigatie wordt een horizontale balk; hamburger verdwijnt */
  .nav-schakelaar {
    display: none;
  }

  .hoofdnav {
    position: static;
    display: flex !important;   /* overschrijft de mobiele is-open-logica */
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .nav-lijst {
    flex-direction: row;
    align-items: center;
    gap: 2px;
  }

  .nav-lijst a {
    padding: 9px 14px;
    font-size: 0.95rem;
  }

  .nav-cta {
    margin: 0 0 0 12px;
  }

  .nav-cta .knop {
    width: auto;
    padding: 11px 22px;
    font-size: 0.93rem;
  }

  /* Hero in twee kolommen met het cijferkaartje ernaast */
  .hero {
    padding-top: 80px;
    padding-bottom: 96px;
  }

  .hero-binnen {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
  }

  .hero-visual {
    display: block;
  }

  .hero h1 {
    font-size: 3.1rem;
  }

  /* Rasters op volle breedte */
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  .stappen-blok { grid-template-columns: 1fr 1fr; gap: 48px; }
  .split        { grid-template-columns: 1.15fr 0.85fr; gap: 48px; }
  .split--gelijk { grid-template-columns: 1fr 1fr; }

  .filterbalk { grid-template-columns: repeat(4, 1fr); align-items: end; }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }

  .pagina-hero { padding-top: 72px; padding-bottom: 72px; }

  .cta-banner { padding: 80px 0; }
  .cta-banner h2 { font-size: 2.3rem; }

  /* Grotere blobs op ruime schermen */
  .blob--1 { width: 420px; height: 420px; top: -120px; right: -120px; }
  .blob--2 { width: 320px; height: 320px; bottom: -140px; left: -110px; }
  .blob--3 { width: 220px; height: 220px; }
}

/* --- Vanaf 1100px: iets meer lucht --- */
@media (min-width: 1100px) {
  .container { padding-left: 32px; padding-right: 32px; }
}


/* ==========================================================================
   18. PRINT
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .cta-banner,
  .blob,
  .nav-schakelaar {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .sectie {
    padding: 16px 0;
  }
}