/* =========================================================
   KVDM Groep, css/styles.css
   Volledig eigen opzet. Geen code, classnames of kleuren
   overgenomen uit templates van derden.
   ========================================================= */

/* ---------------------------------------------------------
   1. Designtokens
   Kleuren overgenomen uit de huisstijl op www.kvdmbv.nl
   (styles.min.css en logo-groep.png):
   - #07155F: navbar en donkere vlakken op de bronsite
   - #0A1F8F: koppen, knoppen en de hoofdkleur van het logo
   - #F2F1EB: lichte sectieachtergrond op de bronsite
   - #A0AEF8: koppen op donkere vlakken op de bronsite
   - #FF0000: rode accentlijnen en de rand van het logo
   - #333333: bodytekst op de bronsite
   --------------------------------------------------------- */
:root {
  --kleur-donker: #07155F;
  --kleur-licht: #F2F1EB;
  --kleur-wit: #FFFFFF;
  --kleur-accent: #0A1F8F;
  /* Op lichte achtergrond is de accentkleur zelf donker genoeg voor
     kleine tekst (11,2 op 1 tegen de lichte achtergrond). */
  --kleur-accent-donker: #0A1F8F;
  /* Op de donkere achtergrond haalt de accentkleur geen contrast
     (1,3 op 1). De bronsite gebruikt daar lichtblauw, wij ook. */
  --kleur-accent-licht: #A0AEF8;
  /* Rood uit het logo en de accentlijnen van de bronsite. Alleen
     decoratief gebruiken: als tekstkleur haalt het geen AA. */
  --kleur-accent-rood: #FF0000;
  --kleur-tekst: #333333;
  --kleur-tekst-invers: #FFFFFF;
  --kleur-rand: rgba(0, 0, 0, 0.08);

  --radius-knop: 8px;
  --radius-kaart: 14px;
  --schaduw-kaart: 0 8px 30px rgba(0, 0, 0, 0.06);
  --schaduw-kaart-hover: 0 16px 40px rgba(0, 0, 0, 0.12);

  --sectie-padding: clamp(64px, 9vw, 120px);
  --container: 1200px;
  --overgang: 0.25s ease;

  /* De bronsite gebruikt Raleway (koppen, 300 en 700) en Roboto
     (bodytekst, 300 tot 500) via Google Fonts. Externe fontbronnen
     zijn uit deze build verwijderd, dus deze namen werken alleen als
     de fonts lokaal zijn geinstalleerd of aangeleverd.
     CHECK: fontbestanden (woff2) lokaal plaatsen en via font-face
     laden, of een definitieve fontkeuze doorgeven. */
  --font-kop: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------
   2. Reset en basis
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--kleur-tekst);
  background: var(--kleur-wit);
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-kop);
  color: var(--kleur-donker);
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--kleur-accent-donker);
  outline-offset: 3px;
  border-radius: 2px;
}

.sectie--donker :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible {
  outline-color: var(--kleur-accent-licht);
}

[id] {
  scroll-margin-top: 110px;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--kleur-donker);
  color: var(--kleur-tekst-invers);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-knop) 0;
  text-decoration: none;
  font-weight: 500;
}

.skiplink:focus {
  left: 0;
}

/* Zichtbare conceptbanner: verwijderen bij livegang, zie KLAARZETTEN.md */
/* ---------------------------------------------------------
   3. Layout
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.sectie {
  padding-block: var(--sectie-padding);
}

.sectie--licht {
  background: var(--kleur-licht);
}

.sectie--donker {
  background: var(--kleur-donker);
  color: var(--kleur-tekst-invers);
}

.sectie--donker h1,
.sectie--donker h2,
.sectie--donker h3 {
  color: var(--kleur-tekst-invers);
}

.sectie--donker p {
  color: rgba(255, 255, 255, 0.85);
}

.kolommen-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.sectie-kop {
  max-width: 720px;
  margin-bottom: 48px;
}

.sectie-kop h2 {
  margin-bottom: 0;
}

.sectie-kop p:last-child {
  margin-bottom: 0;
  margin-top: 16px;
}

.sectie-kop--midden {
  margin-inline: auto;
  text-align: center;
}

.sectie-kop--rij {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

.eyebrow {
  margin: 0 0 12px;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--kleur-accent-donker);
}

.sectie--donker .eyebrow,
.cta-band .eyebrow {
  color: var(--kleur-accent-licht);
}

/* ---------------------------------------------------------
   4. Navbar
   --------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kleur-wit);
  border-bottom: 1px solid var(--kleur-rand);
  transition: box-shadow var(--overgang);
}

.navbar.scrolled {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.navbar-inhoud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-block: 18px;
  transition: padding var(--overgang);
}

.navbar.scrolled .navbar-inhoud {
  padding-block: 10px;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.navbar-rechts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

.navbar-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--kleur-donker);
  text-decoration: none;
  transition: color var(--overgang);
}

.navbar-link:hover {
  color: var(--kleur-accent-donker);
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
  text-decoration: none;
}

.navbar-logo img {
  width: auto;
  height: 48px;
}

.footer-logo img {
  height: 56px;
}

/* Mobiel menu: checkbox zorgt dat het paneel ook zonder JavaScript werkt */
.menu-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.menu-checkbox:focus-visible + .hamburger {
  outline: 3px solid var(--kleur-accent-donker);
  outline-offset: 3px;
  border-radius: 4px;
}

.hamburger {
  display: none;
  position: relative;
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--kleur-donker);
  transition: transform var(--overgang), opacity var(--overgang);
}

.menu-checkbox:checked + .hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-checkbox:checked + .hamburger span:nth-child(2) {
  opacity: 0;
}

.menu-checkbox:checked + .hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-paneel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: min(360px, 100vw);
  flex-direction: column;
  gap: 4px;
  padding: 104px 32px 32px;
  background: var(--kleur-wit);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.14);
  transform: translateX(105%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.menu-checkbox:checked ~ .menu-paneel {
  transform: none;
}

.menu-paneel a:not(.knop) {
  padding: 14px 4px;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--kleur-donker);
  text-decoration: none;
  border-bottom: 1px solid var(--kleur-rand);
}

.menu-paneel .knop {
  margin-top: auto;
}

html.menu-open {
  overflow: hidden;
}

/* ---------------------------------------------------------
   5. Knoppen en tekstlinks
   --------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-knop);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang),
    border-color var(--overgang), box-shadow var(--overgang);
}

/* Witte tekst op het huisstijlblauw haalt 12,6 op 1, ruim boven AA.
   De bronsite gebruikt dezelfde combinatie voor haar knoppen. */
.knop-primair {
  background: var(--kleur-accent);
  color: var(--kleur-tekst-invers);
}

.knop-primair:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.knop-secundair {
  background: transparent;
  border-color: var(--kleur-tekst);
  color: var(--kleur-donker);
}

.knop-secundair:hover {
  background: var(--kleur-donker);
  border-color: var(--kleur-donker);
  color: var(--kleur-tekst-invers);
}

.knop-secundair--invers {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--kleur-tekst-invers);
}

.knop-secundair--invers:hover {
  background: var(--kleur-wit);
  border-color: var(--kleur-wit);
  color: var(--kleur-donker);
}

.knop-pijl {
  flex: none;
  transition: transform var(--overgang);
}

.knop:hover .knop-pijl,
.tekstlink:hover .knop-pijl {
  transform: translateX(4px);
}

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--kleur-accent-donker);
  text-decoration: none;
}

.tekstlink:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------
   6. Kaarten
   --------------------------------------------------------- */
.kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  transition: transform var(--overgang), box-shadow var(--overgang);
}

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

.kaart-media {
  overflow: hidden;
  border-radius: var(--radius-kaart) var(--radius-kaart) 0 0;
}

.kaart-media .img-placeholder,
.kaart-media img {
  transition: transform 0.4s ease;
}

.kaart:hover .kaart-media .img-placeholder,
.kaart:hover .kaart-media img {
  transform: scale(1.05);
}

.kaart-inhoud {
  padding: 26px 28px 30px;
}

.kaart-inhoud h3 {
  margin-bottom: 10px;
}

.kaart-inhoud p:last-child {
  margin-bottom: 0;
}

.kaarten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

/* Vier expertisekaarten: 2x2 vanaf tablet, 4 op een rij op desktop */
.kaarten-grid--vier {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .kaarten-grid--vier {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .kaarten-grid--vier {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .kaarten-grid--vier .kaart-inhoud {
    padding: 22px 24px 26px;
  }
}

.categorie-label {
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--kleur-accent-donker);
}

/* ---------------------------------------------------------
   7. Afbeeldingsplaceholders
   --------------------------------------------------------- */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: rgba(0, 0, 0, 0.06);
  background: color-mix(in srgb, var(--kleur-donker) 8%, transparent);
}

.img-placeholder span {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--kleur-donker);
}

.img-placeholder--rond {
  border-radius: var(--radius-kaart);
}

/* Echte foto's */
.foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-kaart);
}

.kaart-media img,
.media-speler img {
  width: 100%;
}

.media-speler img {
  border-radius: 0;
}

/* Zichtbare plaatshouder voor gegevens die nog niet bekend zijn */
.plaatshouder-chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px dashed var(--kleur-accent-donker);
  border-radius: 6px;
  background: var(--kleur-wit);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--kleur-accent-donker);
}

.sectie--donker .img-placeholder {
  background: rgba(255, 255, 255, 0.08);
}

.sectie--donker .img-placeholder span {
  background: rgba(0, 0, 0, 0.4);
  color: var(--kleur-tekst-invers);
}

/* ---------------------------------------------------------
   8. Hero en statistieken
   --------------------------------------------------------- */
.hero {
  padding-top: clamp(48px, 7vw, 96px);
}

.hero-inhoud {
  max-width: 800px;
}

.intro {
  max-width: 600px;
  font-size: 1.125rem;
}

.hero .knoppenrij {
  margin-top: 28px;
}

.hero .stats {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--kleur-rand);
}

.hero-afbeelding {
  margin-top: 56px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stat-getal {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--kleur-donker);
}

.stat-suffix {
  color: var(--kleur-accent-donker);
}

.stat-label {
  margin: 6px 0 0;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------
   9. Introblok en social
   --------------------------------------------------------- */
.intro-blok {
  max-width: 820px;
  text-align: center;
}

.intro-tekst {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  color: var(--kleur-donker);
}

.intro-blok .knoppenrij {
  justify-content: center;
  margin-top: 28px;
}

.social-regel {
  margin-top: 44px;
}

.social-regel p {
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 500;
}

.intro-blok .social-iconen {
  justify-content: center;
}

.social-iconen {
  display: flex;
  gap: 12px;
  list-style: none;
}

.social-iconen a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  color: var(--kleur-donker);
  transition: background-color var(--overgang), border-color var(--overgang),
    color var(--overgang), transform var(--overgang);
}

.social-iconen a:hover {
  background: var(--kleur-accent);
  border-color: var(--kleur-accent);
  color: var(--kleur-tekst-invers);
  transform: translateY(-2px);
}

.social-iconen--invers a {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--kleur-tekst-invers);
}

.social-iconen--invers a:hover {
  border-color: var(--kleur-accent-licht);
  background: var(--kleur-accent-licht);
  color: var(--kleur-donker);
}

/* ---------------------------------------------------------
   10. Media met afspeelknop
   --------------------------------------------------------- */
.media-speler {
  position: relative;
  border-radius: var(--radius-kaart);
  overflow: hidden;
}

.afspeelknop {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--kleur-accent);
  color: var(--kleur-tekst-invers);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transition: transform var(--overgang);
}

.media-speler:hover .afspeelknop {
  transform: scale(1.08);
}

/* ---------------------------------------------------------
   11. Logobalk
   --------------------------------------------------------- */
.logobalk {
  padding-block: 56px;
  background: var(--kleur-wit);
}

.logobalk-titel {
  margin-bottom: 28px;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.logo-rij {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
  list-style: none;
}

.opdrachtgever-logo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kleur-tekst);
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity var(--overgang), color var(--overgang),
    filter var(--overgang);
}

.opdrachtgever-logo:hover {
  opacity: 1;
  filter: none;
  color: var(--kleur-accent-donker);
}

.opdrachtgever-logo img {
  max-height: 44px;
  width: auto;
}

/* ---------------------------------------------------------
   12. CTA-band
   --------------------------------------------------------- */
/* De dunne rode lijn komt uit de huisstijl van de bronsite, die rode
   accentlijnen op lichte en donkere vlakken gebruikt. */
.cta-band {
  background: var(--kleur-donker);
  color: var(--kleur-tekst-invers);
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 3px solid var(--kleur-accent-rood);
}

.cta-band + .footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cta-band-inhoud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band h2 {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--kleur-tekst-invers);
}

.cta-band .knoppenrij {
  flex: none;
}

/* ---------------------------------------------------------
   13. FAQ accordion
   --------------------------------------------------------- */
.faq {
  display: grid;
  gap: 16px;
  max-width: 780px;
  margin-inline: auto;
}

.faq-item {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
}

.faq-vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--kleur-donker);
  cursor: pointer;
  list-style: none;
}

.faq-vraag::-webkit-details-marker {
  display: none;
}

.faq-vraag::marker {
  content: "";
}

.faq-icoon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kleur-accent) 14%, var(--kleur-wit));
  color: var(--kleur-accent-donker);
  transition: transform var(--overgang);
}

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

.faq-antwoord {
  overflow: hidden;
}

html.js .faq-antwoord {
  transition: max-height 0.3s ease;
}

.faq-antwoord-inhoud {
  padding: 0 24px 22px;
}

.faq-antwoord-inhoud p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   14. Waarden en certificeringen
   --------------------------------------------------------- */
.waarden-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.waarde-kaart {
  padding: 30px 28px;
}

.waarde-icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--kleur-accent) 14%, var(--kleur-wit));
  color: var(--kleur-accent-donker);
}

.certificeringen-rij {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* De certificaatlogo's van de bronsite zijn witte varianten, dus de
   kaarten zijn donker zoals de footer van de bronsite. */
.certificering-kaart {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: var(--kleur-donker);
  border-color: var(--kleur-donker);
  font-family: var(--font-kop);
  font-weight: 700;
  color: var(--kleur-tekst-invers);
}

.certificering-kaart img {
  width: auto;
  height: 48px;
}

/* ---------------------------------------------------------
   15. Verhaal, team en reviews
   --------------------------------------------------------- */
.verhaal-beelden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.verhaal-beeld--verschoven {
  margin-top: 40px;
}

.team-functie {
  margin: 0 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--kleur-accent-donker);
}

.review-citaat {
  font-size: 1.15rem;
  line-height: 1.4;
}

.review-persoon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.avatar-placeholder {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  background: color-mix(in srgb, var(--kleur-donker) 8%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  color: var(--kleur-donker);
}

.review-naam {
  margin: 0;
  font-weight: 500;
  color: var(--kleur-donker);
}

.review-plaats {
  margin: 0;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------
   16. Formulier
   --------------------------------------------------------- */
.formulier-kaart {
  padding: clamp(24px, 4vw, 40px);
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
}

.formulier-kaart h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.veld {
  margin-bottom: 18px;
}

/* Honeypot: onzichtbaar voor mensen, ingevuld door bots.
   Niet display:none, want sommige bots slaan verborgen velden over. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.veld label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kleur-donker);
}

.label-optioneel {
  font-weight: 400;
  color: var(--kleur-tekst);
}

.veld input,
.veld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--radius-knop);
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
  font: inherit;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}

.veld textarea {
  resize: vertical;
  min-height: 120px;
}

.veld input:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--kleur-accent-donker);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kleur-accent) 25%, transparent);
}

/* Foutkleur bewust binnen het palet gehouden: donkere accenttint. */
.veld-fout {
  display: none;
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kleur-accent-donker);
}

.veld.ongeldig input,
.veld.ongeldig textarea {
  border-color: var(--kleur-accent-donker);
}

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

.form-fout {
  padding: 14px 16px;
  border: 1px solid var(--kleur-accent-donker);
  border-radius: var(--radius-knop);
  font-size: 0.95rem;
  color: var(--kleur-accent-donker);
}

.form-succes {
  padding: 18px 20px;
  border: 1px solid var(--kleur-accent-donker);
  border-radius: var(--radius-kaart);
  background: color-mix(in srgb, var(--kleur-accent) 10%, var(--kleur-wit));
  font-weight: 500;
  color: var(--kleur-donker);
}

.form-verzendknop {
  width: 100%;
}

/* ---------------------------------------------------------
   17. Contact en vestiging
   --------------------------------------------------------- */
.contactlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--kleur-accent-donker);
  text-decoration: none;
}

.contactlink:hover {
  text-decoration: underline;
}

.vestiging-kaart:hover {
  transform: none;
  box-shadow: var(--schaduw-kaart);
}

.vestiging-inhoud {
  padding: clamp(28px, 4vw, 44px);
}

.vestiging-kolommen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--kleur-rand);
}

.vestiging-kolommen h4 {
  margin-bottom: 6px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vestiging-kolommen a {
  color: var(--kleur-accent-donker);
  text-decoration: none;
}

.vestiging-kolommen a:hover {
  text-decoration: underline;
}

.vestiging-kolommen p {
  margin: 0;
}

.vestiging-meta {
  margin: 28px 0 0;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------
   18. Footer
   --------------------------------------------------------- */
.footer {
  background: var(--kleur-donker);
  color: rgba(255, 255, 255, 0.78);
  padding-top: clamp(56px, 7vw, 88px);
}

.footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color var(--overgang);
}

.footer a:hover {
  color: var(--kleur-tekst-invers);
  text-decoration: underline;
}

.footer-boven {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-merk p {
  max-width: 320px;
  margin-block: 18px 22px;
}

.footer-logo {
  justify-self: start;
}

.footer-kop {
  margin-bottom: 16px;
  font-size: 1rem;
  color: var(--kleur-tekst-invers);
}

.footer-kolom ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-onder {
  display: flex;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  padding-block: 24px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}

.footer-onder p {
  margin: 0;
}

/* ---------------------------------------------------------
   19. Animaties
   Verborgen beginstanden gelden alleen als JavaScript actief is
   (html.js), zodat de site zonder JavaScript volledig zichtbaar is.
   --------------------------------------------------------- */
@keyframes verschijn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.js .reveal:not(.zichtbaar) {
  opacity: 0;
}

html.js .reveal.zichtbaar {
  animation: verschijn 0.6s ease-out both;
}

html.js .reveal-groep:not(.zichtbaar) > * {
  opacity: 0;
}

html.js .reveal-groep.zichtbaar > * {
  animation: verschijn 0.6s ease-out both;
  animation-delay: var(--vertraging, 0s);
}

html.js .hero-stagger > * {
  opacity: 0;
  animation: verschijn 0.6s ease-out both;
}

html.js .hero-stagger > *:nth-child(1) {
  animation-delay: 0ms;
}

html.js .hero-stagger > *:nth-child(2) {
  animation-delay: 120ms;
}

html.js .hero-stagger > *:nth-child(3) {
  animation-delay: 240ms;
}

html.js .hero-stagger > *:nth-child(4) {
  animation-delay: 360ms;
}

html.js .verschijn-laat {
  opacity: 0;
  animation: verschijn 0.6s ease-out 0.24s both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  html.js .reveal:not(.zichtbaar),
  html.js .reveal-groep:not(.zichtbaar) > *,
  html.js .hero-stagger > *,
  html.js .verschijn-laat {
    opacity: 1;
    animation: none;
  }
}

/* ---------------------------------------------------------
   20. Responsief
   Breekpunten: 1280, 992, 768 en 480. Bruikbaar vanaf 360px.
   --------------------------------------------------------- */
@media (max-width: 1280px) {
  :root {
    --container: 1080px;
  }

  .navbar-links,
  .navbar-rechts {
    gap: 20px;
  }
}

@media (min-width: 993px) {
  .hamburger,
  .menu-paneel {
    display: none;
  }
}

@media (max-width: 992px) {
  .navbar-inhoud {
    display: flex;
    justify-content: space-between;
  }

  .navbar-inhoud > .navbar-links,
  .navbar-rechts {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .menu-paneel {
    display: flex;
  }

  .kolommen-2 {
    grid-template-columns: 1fr;
  }

  .waarden-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-band-inhoud {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .footer-boven {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .vestiging-kolommen {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .sectie-kop {
    margin-bottom: 36px;
  }
}

@media (max-width: 640px) {
  .waarden-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .knoppenrij {
    width: 100%;
  }

  .knoppenrij .knop {
    width: 100%;
  }

  .verhaal-beeld--verschoven {
    margin-top: 20px;
  }

  .kaarten-grid {
    grid-template-columns: 1fr;
  }

  .vestiging-kolommen {
    grid-template-columns: 1fr;
  }
}