/* Webwinkelverhuis theme, design door joepa (webwinkelverhuis.joepa.nl).
   Merkkleuren geprikt uit het logo: groen #6CB44C (pijl/"VERHUIS"),
   navy #10406F (wordmark "WEBWINKEL"), blauw #1B7FB4 (swoosh),
   navy-diep #0B2E50 (donkerste logolijnen, bands).
   Koele grijsfamilie passend bij het navy.

   WCAG AA-contrast (berekend door joepa):
   - inkt #1C2B3A op wit 14.42 / op fond #F6F9FB 13.64
   - grijs #55677A op wit 5.82 / op fond 5.51
   - wit op navy-diep #0B2E50 13.81 · bandtekst #C9D6E2 op navy-diep 9.34
   - navy #10406F op wit 10.58 · wit op navy 10.58
   - knop: navy-diep op groen #6CB44C 5.44 · hover wit op groen-diep #3E7A2E 5.21
   - groen-diep tekst #35682B op wit 6.63 · vink #7EC964 op navy-diep 6.86 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --wit: #ffffff;
  --fond: #f6f9fb;
  --inkt: #1c2b3a;
  --grijs: #55677a;
  --lijn: #dee7ef;
  --navy: #10406f;
  --navy-diep: #0b2e50;
  --groen: #6cb44c;
  --groen-vlak: #3e7a2e;   /* knop-hover, wit erop = 5.21 */
  --groen-tekst: #35682b;  /* groene tekstaccenten op wit = 6.63 */
  --groen-licht: #e8f3e1;
  --blauw: #1b7fb4;
  --band-tekst: #c9d6e2;
  --vink: #7ec964;
  --kop: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --tekst: "Figtree", "Avenir Next", "Segoe UI", sans-serif;
  --maat: 72rem;
  --maat-smal: 46rem;
  --radius: 14px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  font-family: var(--tekst);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  color: var(--inkt);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
  /* Korte pagina's (zoals /scan.html): main rekt op zodat de footer
     altijd onderaan het venster staat. */
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }

/* height:auto: anders wint het height-attribuut van de aspect-ratio zodra
   CSS alleen de breedte zet */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--kop);
  line-height: 1.12;
  color: var(--navy-diep);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 750; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; font-weight: 650; }

p { margin: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--groen-tekst); }

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

/* ---------- knoppen ---------- */

.cta-button, .cta-button-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--tekst); font-weight: 700; font-size: 1.03rem;
  padding: 0.78rem 1.5rem; border-radius: 999px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.cta-button:active, .cta-button-secondary:active { transform: translateY(1px); }
.cta-button { background: var(--groen); color: var(--navy-diep); }
.cta-button:hover { background: var(--groen-vlak); color: var(--wit); }
.cta-button-secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.cta-button-secondary:hover { background: var(--navy); color: var(--wit); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.5rem; }

/* ---------- header ---------- */

/* body > header: alleen de sitebalk; artikelen hebben hun eigen header-
   element dat niet mag plakken. */
body > header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lijn);
}
.top-nav {
  max-width: var(--maat); margin: 0 auto; padding-inline: 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.25rem;
}
.logo a { display: inline-flex; align-items: center; }
.logo img { height: 2.35rem; width: auto; }

.hoofdnav { display: flex; align-items: center; gap: 1.4rem; }
.hoofdnav ul { display: flex; gap: 1.3rem; list-style: none; }
.hoofdnav a:not(.cta-button):not(.cta-button-secondary) {
  color: var(--inkt); text-decoration: none; font-weight: 500; font-size: 0.99rem;
}
.hoofdnav a:not(.cta-button):not(.cta-button-secondary):hover { color: var(--groen-tekst); }
.hoofdnav .cta-button, .hoofdnav .cta-button-secondary { padding: 0.55rem 1.2rem; font-size: 0.95rem; }

/* De Offerte-knop promoveert zichzelf: na 3 minuten leestijd morft hij in
   2 minuten van de rustige omlijnde stijl naar de groene primaire knop,
   zodat de call-to-action pas gaat trekken als de bezoeker zich ingelezen
   heeft. forwards houdt de groene eindstand vast; met
   prefers-reduced-motion blijft hij gewoon secundair. De klik wordt al
   gemeten via ctaTrackScript (offerte_mailto_klik op elke mailto-knop). */
.hoofdnav .cta-button-secondary {
  animation: offerte-promotie 120s linear 180s 1 forwards;
}
@keyframes offerte-promotie {
  to { background: var(--groen); color: var(--navy-diep); border-color: var(--groen); }
}
/* !important: de animation-fill wint anders van de hover-regel. Groene
   hover past bij beide stadia van de knop. */
.hoofdnav .cta-button-secondary:hover {
  background: var(--groen-vlak) !important;
  color: var(--wit) !important;
  border-color: var(--groen-vlak) !important;
}

.menu-knop {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 0.55rem; border-radius: 8px; color: var(--navy-diep);
}
.menu-knop svg { display: block; }

/* ---------- secties (gedeeld door alle pagina's) ----------
   De zijpadding centreert een contentgebied van maximaal 72rem (het
   .binnen-patroon uit het joepa-ontwerp): boven 72rem+2.5rem viewport
   groeit de padding mee, dus de contentbox van de sectie is nooit breder
   dan 72rem. Elk kind (h2, div, grid) is daardoor al tot 72rem begrensd
   zonder eigen max-width; alleen leeselementen (p, lijsten, faq) krijgen
   apart de smallere leesbreedte. */

main > section {
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: max(1.25rem, calc((100% - var(--maat)) / 2));
}
main > section h2 { margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
main > section > p { color: var(--grijs); max-width: var(--maat-smal); }
main > section > p + p, main > section > * + p { margin-top: 0.9rem; }
main > section > ul:not([class]), main > section > ol { max-width: var(--maat-smal); }

/* ---------- hero (landing en subpagina's) ---------- */

.hero {
  background:
    radial-gradient(38rem 24rem at 12% 0%, rgba(108, 180, 76, 0.09), transparent 65%),
    radial-gradient(34rem 22rem at 95% 18%, rgba(27, 127, 180, 0.09), transparent 65%),
    var(--fond);
  border-bottom: 1px solid var(--lijn);
}
.hero .subtitle {
  margin-top: 1.1rem; font-size: 1.14rem; color: var(--grijs); max-width: 34rem;
}
.hero > .cta-button, .hero .subtitle ~ .cta-button { margin-top: 1.8rem; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--groen-licht); color: var(--navy-diep); /* 12.06 */
  font-weight: 600; font-size: 0.92rem;
  padding: 0.38rem 0.9rem; border-radius: 999px;
  margin-bottom: 1.15rem;
}
.hero-chip svg { color: var(--groen-vlak); }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

.hero-grid {
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

.hero-beeld { position: relative; }
.hero-beeld::before {
  /* merkverloop uit het logo als rustige echo achter de foto */
  content: ""; position: absolute; inset: 1.2rem -0.9rem -0.9rem 1.2rem;
  background: linear-gradient(135deg, var(--groen), var(--blauw));
  border-radius: var(--radius); opacity: 0.9;
}
.hero-beeld img {
  position: relative; width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(11, 46, 80, 0.16);
}
.hero-noot {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(255, 255, 255, 0.95); color: var(--navy-diep);
  font-size: 0.88rem; font-weight: 600;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(11, 46, 80, 0.18);
}
.hero-noot svg { color: var(--groen-vlak); flex: none; }

/* Subpagina-hero's met illustratie in een hero-grid */
.hero-image { width: min(100%, 24rem); justify-self: center; }

/* ---------- checklist-band (navy) ---------- */

.band { background: var(--navy-diep); color: var(--wit); border-bottom: 0; }
.band h2 { color: var(--wit); }
.inpaklijst {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem);
  list-style: none;
}
.inpaklijst li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.inpaklijst .wat { font-weight: 650; font-family: var(--kop); font-size: 1.06rem; }
.inpaklijst .status {
  color: var(--band-tekst); font-size: 0.97rem;
  display: inline-flex; align-items: center; gap: 0.45rem; text-align: right;
}
.inpaklijst .status svg { color: var(--vink); flex: none; }

/* ---------- band-animatie: de tabel vult zich regel voor regel ----------
   Choreografie (review Jappie, 8 aug 2026): de tabel begint helemaal leeg.
   Elke regel verschijnt uitgelicht in het midden van de band, daar faden
   het vinkje en het resultaatwoord in, en daarna schuift de regel naar zijn
   eigen plek in de tabel en blijft staan. Zo vult de tabel zich regel voor
   regel, en daarna rust hij: de animatie speelt precies een keer, gestart
   zodra de band in beeld scrolt (bandSpeelScript zet dan de klasse "speel";
   zonder JavaScript blijft de tabel gewoon statisch compleet).

   Techniek: de gedeelde 18s-tijdlijn geeft regel N het venster
   (2 + 13*(N-1))% .. +11%. De podiumpositie (het midden van de band) staat
   per regel in --podium-x/--podium-y: horizontaal een halve kolom plus een
   halve grid-gap, verticaal het aantal rijen naar het midden. De keyframes
   lezen die variabelen, zodat zes regels dezelfde choreografie delen. Op
   mobiel (1 kolom) is het podium de eigen plek en licht de regel daar op.
   Basisstijlen zijn volledig zichtbaar: met prefers-reduced-motion
   (animation: none) staat de tabel er statisch en compleet. */

.inpaklijst li {
  --podium-y: 0%;
  border-radius: 10px;
  /* Binnenmarge zodat de tekst ademruimte houdt van de celrand,
     ook wanneer de regel op het podium een eigen vlak krijgt. */
  padding-inline: 0.9rem;
}
.inpaklijst li:nth-child(odd)  { --podium-x: calc(50% + clamp(1rem, 2.5vw, 2rem)); }
.inpaklijst li:nth-child(even) { --podium-x: calc(-50% - clamp(1rem, 2.5vw, 2rem)); }
.inpaklijst li:nth-child(-n+2) { --podium-y: 105%; }
.inpaklijst li:nth-child(n+5)  { --podium-y: -105%; }

.inpaklijst .status svg path { stroke-dasharray: 24; stroke-dashoffset: 0; }
.band.speel .inpaklijst li:nth-child(1) { animation: inpak-rij-1 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(2) { animation: inpak-rij-2 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(3) { animation: inpak-rij-3 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(4) { animation: inpak-rij-4 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(5) { animation: inpak-rij-5 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(6) { animation: inpak-rij-6 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(1) .status { animation: inpak-status-1 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(2) .status { animation: inpak-status-2 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(3) .status { animation: inpak-status-3 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(4) .status { animation: inpak-status-4 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(5) .status { animation: inpak-status-5 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(6) .status { animation: inpak-status-6 18s ease-in-out 1 forwards; }
.band.speel .inpaklijst li:nth-child(1) .status svg path { animation: inpak-vink-1 18s linear 1 forwards; }
.band.speel .inpaklijst li:nth-child(2) .status svg path { animation: inpak-vink-2 18s linear 1 forwards; }
.band.speel .inpaklijst li:nth-child(3) .status svg path { animation: inpak-vink-3 18s linear 1 forwards; }
.band.speel .inpaklijst li:nth-child(4) .status svg path { animation: inpak-vink-4 18s linear 1 forwards; }
.band.speel .inpaklijst li:nth-child(5) .status svg path { animation: inpak-vink-5 18s linear 1 forwards; }
.band.speel .inpaklijst li:nth-child(6) .status svg path { animation: inpak-vink-6 18s linear 1 forwards; }

/* Per regel: onzichtbaar tot het eigen venster, opkomen op het podium,
   even vasthouden terwijl vinkje en woord verschijnen, dan naar de eigen
   plek schuiven. Het podiumvlak is dekkend (#23425f: navy-diep met ~10%
   wit, de dekkende evenknie van de eerdere rgba-overlay met alpha 0.10)
   met een zweefschaduw: de laatste regels zweven over al gedockte tekst
   heen en moeten die afdekken om leesbaar te blijven. De laatste frame is
   gelijk aan de basisstijl (gedockt en zichtbaar), dus na de ene run staat
   de tabel er rustig bij. */
@keyframes inpak-rij-1 {
  0%, 2% { opacity: 0; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  4% { opacity: 1; }
  9% { opacity: 1; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  13%, 100% { opacity: 1; transform: none; background: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
}
@keyframes inpak-status-1 {
  0%, 5% { opacity: 0; }
  8%, 100% { opacity: 1; }
}
@keyframes inpak-vink-1 {
  0%, 5% { stroke-dashoffset: 24; }
  8%, 100% { stroke-dashoffset: 0; }
}
@keyframes inpak-rij-2 {
  0%, 15% { opacity: 0; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  17% { opacity: 1; }
  22% { opacity: 1; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  26%, 100% { opacity: 1; transform: none; background: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
}
@keyframes inpak-status-2 {
  0%, 18% { opacity: 0; }
  21%, 100% { opacity: 1; }
}
@keyframes inpak-vink-2 {
  0%, 18% { stroke-dashoffset: 24; }
  21%, 100% { stroke-dashoffset: 0; }
}
@keyframes inpak-rij-3 {
  0%, 28% { opacity: 0; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  30% { opacity: 1; }
  35% { opacity: 1; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  39%, 100% { opacity: 1; transform: none; background: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
}
@keyframes inpak-status-3 {
  0%, 31% { opacity: 0; }
  34%, 100% { opacity: 1; }
}
@keyframes inpak-vink-3 {
  0%, 31% { stroke-dashoffset: 24; }
  34%, 100% { stroke-dashoffset: 0; }
}
@keyframes inpak-rij-4 {
  0%, 41% { opacity: 0; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  43% { opacity: 1; }
  48% { opacity: 1; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  52%, 100% { opacity: 1; transform: none; background: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
}
@keyframes inpak-status-4 {
  0%, 44% { opacity: 0; }
  47%, 100% { opacity: 1; }
}
@keyframes inpak-vink-4 {
  0%, 44% { stroke-dashoffset: 24; }
  47%, 100% { stroke-dashoffset: 0; }
}
@keyframes inpak-rij-5 {
  0%, 54% { opacity: 0; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  56% { opacity: 1; }
  61% { opacity: 1; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  65%, 100% { opacity: 1; transform: none; background: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
}
@keyframes inpak-status-5 {
  0%, 57% { opacity: 0; }
  60%, 100% { opacity: 1; }
}
@keyframes inpak-vink-5 {
  0%, 57% { stroke-dashoffset: 24; }
  60%, 100% { stroke-dashoffset: 0; }
}
@keyframes inpak-rij-6 {
  0%, 67% { opacity: 0; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  69% { opacity: 1; }
  74% { opacity: 1; transform: translate(var(--podium-x), var(--podium-y)) scale(1.06); background: #23425f; border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  78%, 100% { opacity: 1; transform: none; background: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
}
@keyframes inpak-status-6 {
  0%, 70% { opacity: 0; }
  73%, 100% { opacity: 1; }
}
@keyframes inpak-vink-6 {
  0%, 70% { stroke-dashoffset: 24; }
  73%, 100% { stroke-dashoffset: 0; }
}

/* Op mobiel staat alles in 1 kolom: de regel licht op zijn eigen plek op. */
@media (max-width: 700px) {
  .inpaklijst li { --podium-x: 0%; --podium-y: 0%; }
}

/* ---------- hoe het werkt / genummerde stappen ---------- */

.proces, .audit-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
/* Alinea's binnen een gridkolom krijgen dezelfde ademruimte als losse
   sectie-alinea's; de sectieregel (main > section > p + p) reikt niet
   tot in de kolom. */
.audit-grid p + p, .audit-grid .testimonials + p, .audit-grid p + .waarom-rijen { margin-top: 0.9rem; }
.proces-beeld img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(11, 46, 80, 0.13);
}
/* Staande portretfoto naast een tekstkolom (over-ons). */
.portret-beeld img {
  width: min(100%, 22rem); aspect-ratio: 4 / 5; object-fit: cover;
  margin-inline: auto;
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(11, 46, 80, 0.13);
}

/* Elke genummerde lijst in een sectie krijgt de stappen-look: cirkels met
   nummer en een verbindingslijn ertussen. Ook de tijdlijnen en draaiboeken
   op de waarom-pagina's liften hierop mee. */
main > section ol { list-style: none; counter-reset: stap; }
main > section ol > li {
  counter-increment: stap; position: relative;
  padding-left: 4rem; padding-bottom: 1.9rem;
}
main > section ol > li:last-child { padding-bottom: 0; }
main > section ol > li::before {
  content: counter(stap);
  position: absolute; left: 0; top: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kop); font-weight: 700; font-size: 1.15rem;
  background: var(--groen-licht); color: var(--groen-tekst); /* 6.24 op groen-licht */
}
main > section ol > li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.28rem; top: 2.85rem; bottom: 0.25rem;
  width: 2px; background: var(--lijn);
}
main > section ol > li strong { font-family: var(--kop); color: var(--navy-diep); }
/* De hoe-het-werkt-stappen op de landing (WebwinkelTemplates) hebben per
   li een h3-kop met daaronder een p.stap-tekst als toelichting. */
main > section ol > li h3 { margin-bottom: 0.25rem; }
main > section ol > li .stap-tekst { color: var(--grijs); }

/* ---------- ongenummerde lijsten in secties: rustige regels ----------
   Alleen klasseloze content-lijsten; componentlijsten (inpaklijst,
   card-grid, scanner) hebben hun eigen stijl. */

main > section > ul:not([class]) { list-style: none; }
main > section > ul:not([class]) > li {
  padding-block: 0.7rem; border-bottom: 1px solid var(--lijn);
}
main > section > ul:not([class]) > li:first-child { border-top: 1px solid var(--lijn); }
main > section ul li strong { font-family: var(--kop); color: var(--navy-diep); }

/* ---------- afgewisselde sectie-achtergronden ---------- */

.audit, .case-sectie, .prijs-sectie, .engagement {
  background: var(--fond); border-block: 1px solid var(--lijn);
}
.audit + .audit, .engagement + .engagement { border-top: 0; }

/* ---------- recent werk ---------- */

.route { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.5rem; }
.route .halte {
  font-family: var(--kop); font-weight: 650; font-size: 1.02rem;
  background: var(--wit); border: 1px solid var(--lijn); color: var(--navy-diep);
  padding: 0.4rem 1rem; border-radius: 999px;
}
.route svg { color: var(--groen-vlak); }
.case-cijfers {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-block: 1.6rem;
}
.case-cijfers .cijfer { font-family: var(--kop); font-weight: 750; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--navy); line-height: 1.1; }
.case-cijfers .label { color: var(--grijs); font-size: 0.97rem; }
.case-tekst { max-width: var(--maat-smal); }
.case-tekst p { color: var(--inkt); font-size: 1.08rem; }
.case-links { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.case-links a { font-weight: 650; }

/* ---------- waarom via ons ---------- */

.waarom-rijen { border-top: 1px solid var(--lijn); }
.waarom-rijen > div {
  display: grid; grid-template-columns: 15rem 1fr; gap: 0.6rem 2.5rem;
  padding-block: 1.05rem; border-bottom: 1px solid var(--lijn);
}
.waarom-rijen dt { font-family: var(--kop); font-weight: 650; color: var(--navy-diep); font-size: 1.08rem; }
.waarom-rijen dd { color: var(--grijs); }

/* ---------- testimonials / citaten ---------- */

.testimonials { max-width: var(--maat-smal); margin-bottom: 1.4rem; }
.testimonials blockquote {
  border-left: 3px solid var(--groen);
  background: var(--fond);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.5rem;
}
.audit .testimonials blockquote, .results .testimonials blockquote { background: var(--wit); }
.testimonials blockquote p { color: var(--inkt); }
.testimonials blockquote p + p { margin-top: 0.7rem; }

/* ---------- kaarten ---------- */

.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  list-style: none;
}
.card {
  background: var(--wit); border: 1px solid var(--lijn);
  border-top: 3px solid var(--groen);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
  box-shadow: 0 6px 18px rgba(11, 46, 80, 0.05);
  /* Kolom-flex: de knop onderaan krijgt margin-top auto, zodat de knoppen
     van naast elkaar staande kaarten op dezelfde hoogte uitlijnen. */
  display: flex; flex-direction: column; align-items: flex-start;
}
.card h3 { margin-bottom: 0.45rem; }
.card p { color: var(--grijs); font-size: 0.99rem; }
.card p + p { margin-top: 0.6rem; }
.card-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 0.9rem; }
.card .cta-button-secondary { margin-top: auto; font-size: 0.95rem; padding: 0.55rem 1.2rem; }
.card p:last-of-type { margin-bottom: 1rem; }

.engagement-note { color: var(--grijs); font-size: 0.95rem; max-width: var(--maat-smal); margin-top: 1.2rem; }

/* ---------- prijs-kaart ---------- */

.prijs-kaart {
  max-width: 40rem; margin-inline: auto; background: var(--wit);
  border: 1px solid var(--lijn); border-top: 4px solid var(--groen);
  border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 10px 30px rgba(11, 46, 80, 0.08);
  text-align: center;
}
.prijs-kaart .wat { font-weight: 650; color: var(--groen-tekst); font-size: 1rem; letter-spacing: 0.02em; }
.prijs-kaart .prijs { font-family: var(--kop); font-weight: 750; font-size: clamp(2.4rem, 5vw, 3.2rem); color: var(--navy-diep); margin-block: 0.3rem 0.9rem; }
.prijs-kaart .prijs small { font-size: 0.45em; font-weight: 600; color: var(--grijs); }
.prijs-kaart .inbegrepen { color: var(--inkt); }
.prijs-kaart .meerprijs { color: var(--grijs); font-size: 0.97rem; margin-top: 0.8rem; }
.prijs-kaart hr { border: 0; border-top: 1px solid var(--lijn); margin-block: 1.4rem; }
.prijs-kaart .abonnement { color: var(--grijs); font-size: 0.92rem; }
.prijs-kaart .cta-button { margin-top: 1.5rem; }
.prijs-kaart .garantie {
  margin-top: 0.9rem; font-size: 0.92rem; font-weight: 600; color: var(--groen-tekst);
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.prijs-kaart .garantie svg { flex: none; }

/* ---------- prijstabellen ---------- */

.price-table {
  width: 100%; max-width: var(--maat-smal);
  border-collapse: separate; border-spacing: 0;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 18px rgba(11, 46, 80, 0.05);
}
.price-table td { padding: 0.85rem 1.2rem; border-top: 1px solid var(--lijn); }
.price-table tr:first-child td { border-top: 0; }
.price-cell {
  text-align: right; white-space: nowrap;
  font-family: var(--kop); font-weight: 650; color: var(--navy);
}

/* ---------- faq ---------- */

.faq { max-width: var(--maat-smal); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq details:first-of-type { border-top: 1px solid var(--lijn); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1.05rem; font-weight: 650; font-size: 1.05rem; color: var(--navy-diep);
  font-family: var(--kop);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.65rem; height: 0.65rem;
  border-right: 2px solid var(--groen-vlak); border-bottom: 2px solid var(--groen-vlak);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-antwoord { color: var(--grijs); padding-bottom: 1.2rem; max-width: 42rem; }

/* ---------- afsluitende cta ----------
   Licht, met dezelfde merkverloop-tinten als de hero. Bewust niet navy:
   dezelfde kleur als de footer las als "onderdeel van de footer"
   (review Jappie, 8 aug 2026). Alles gecentreerd. */

.final-cta, .cta-section {
  background:
    radial-gradient(38rem 24rem at 18% 100%, rgba(108, 180, 76, 0.10), transparent 65%),
    radial-gradient(34rem 22rem at 88% 0%, rgba(27, 127, 180, 0.10), transparent 65%),
    var(--fond);
  border-top: 1px solid var(--lijn);
  text-align: center;
}
.final-cta p, .cta-section p { max-width: var(--maat-smal); margin-inline: auto; }
.final-cta > .cta-button, .cta-section > .cta-button { margin-top: 1.4rem; }

/* ---------- contact-sectie (landing) ---------- */

.contact {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.contact-intro { color: var(--grijs); margin-top: 0.7rem; max-width: var(--maat-smal); }
.contact-acties { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
.contact-direct { margin-top: 1.4rem; color: var(--grijs); }
.contact-direct a { font-weight: 600; white-space: nowrap; }
.contact-beeld img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(11, 46, 80, 0.13);
}

/* ---------- footer ---------- */

footer { background: var(--navy-diep); color: var(--band-tekst); padding: 2.8rem 1.25rem 2rem; }
.voet-boven, .voet-onder { max-width: var(--maat); margin: 0 auto; }
.voet-boven {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 1rem 3rem;
  padding-bottom: 1.6rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.voet-merk { font-family: var(--kop); font-weight: 700; font-size: 1.25rem; color: var(--wit); }
.voet-merk span { color: var(--vink); } /* 6.86 op navy-diep */
.voet-boven ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; list-style: none; }
footer a { color: var(--wit); text-decoration-thickness: 1px; }
footer a:hover { color: var(--vink); }
footer small { font-size: 0.92rem; }
footer small a { color: var(--band-tekst); }
footer small a:hover { color: var(--wit); }

/* ---------- rekenhulp (Elm) ---------- */

.prijs-calculator {
  max-width: var(--maat-smal);
  background: var(--wit); border: 1px solid var(--lijn);
  border-top: 4px solid var(--groen);
  border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 10px 30px rgba(11, 46, 80, 0.08);
}
/* Browsers tekenen standaard een groove-rand om fieldsets; hier is de
   kaart zelf het kader en is de legend een sectiekop. */
.prijs-calculator fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.prijs-calculator legend {
  font-family: var(--kop); font-weight: 700; font-size: 1.3rem;
  color: var(--navy-diep); padding: 0; margin-bottom: 1.3rem;
}
.calc-inputs { display: grid; gap: 1.5rem; }
.calc-field { display: flex; flex-direction: column; gap: 0.4rem; }
.calc-label { font-weight: 650; font-family: var(--kop); color: var(--navy-diep); }
.calc-hint { color: var(--grijs); font-size: 0.92rem; }
.calc-field input, .calc-field select {
  font-family: var(--tekst); font-size: 1.02rem; color: var(--inkt);
  padding: 0.7rem 1rem; border: 1px solid var(--lijn); border-radius: 10px;
  background: var(--wit); width: 100%; max-width: 24rem;
}
.calc-field input:focus, .calc-field select:focus {
  outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy);
}
/* Markup: aanvinkVeld in elm/src/PrijsCalculator.elm: een label.calc-check
   met daarin de checkbox en een span.calc-check-text die de spans
   .calc-check-label en .calc-hint onder elkaar zet. */
.calc-check-group { display: grid; gap: 0.7rem; }
.calc-check { display: flex; align-items: baseline; gap: 0.7rem; cursor: pointer; }
.calc-check input { accent-color: var(--groen-vlak); width: 1.05rem; height: 1.05rem; flex: none; }
.calc-check-text { display: flex; flex-direction: column; }
.calc-check-label { color: var(--inkt); font-weight: 600; }
.calc-check .calc-hint { font-size: 0.88rem; }
.calc-fout, .calc-veld-fout { color: #a4262c; font-size: 0.95rem; }
.calc-note { color: var(--grijs); font-size: 0.92rem; }
.calc-result { margin-top: 2rem; border-top: 1px solid var(--lijn); padding-top: 1.4rem; }
.calc-result h3 { margin-bottom: 0.8rem; }
.calc-lines { display: grid; gap: 0.35rem; list-style: none; }
.calc-line { display: flex; justify-content: space-between; gap: 1rem; }
.calc-line-label { color: var(--grijs); }
.calc-line-price { font-family: var(--kop); font-weight: 650; color: var(--navy); white-space: nowrap; }
.calc-total {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--lijn);
  font-family: var(--kop); font-weight: 750; font-size: 1.25rem; color: var(--navy-diep);
}
.calc-lockin { color: var(--grijs); font-size: 0.92rem; margin-top: 0.9rem; }
.calc-contact { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.2rem 1.5rem; }
.calc-offerte { margin-top: 1.5rem; }
.calc-vrijblijvend { color: var(--grijs); font-size: 0.92rem; margin-top: 0.8rem; }
.calc-footnotes { max-width: var(--maat-smal); margin-top: 1.6rem; }
.calc-footnotes h3 { margin-bottom: 0.4rem; }
.calc-footnotes p { color: var(--grijs); font-size: 0.97rem; }
.calc-footnotes p + p { margin-top: 0.7rem; }

/* ---------- webshop-scanner (Elm) ---------- */

/* De scanpagina is een gecentreerd blok: kop, uitleg en formulier samen
   in de hero-sectie, die via flex de hele hoogte tussen header en footer
   vult. De formulierkaart zelf blijft links uitgelijnd leesbaar. */
main { display: flex; flex-direction: column; }
.scan-blok { flex: 1; text-align: center; border-bottom: 0; }
.scan-blok .subtitle { margin-inline: auto; }
.scan-blok .hero-knoppen { justify-content: center; }
.scan-blok .webshop-scanner {
  margin: 2.2rem auto 0; text-align: left; max-width: 34rem;
}

.webshop-scanner { max-width: var(--maat-smal); }
.scanner-form {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: 0 6px 18px rgba(11, 46, 80, 0.05);
}
.scanner-form .calc-field { width: 100%; }
.scanner-form input[type="url"], .scanner-form input[type="text"] {
  width: min(100%, 26rem); max-width: none;
  font-family: var(--tekst); font-size: 1.02rem; color: var(--inkt);
  padding: 0.6rem 1rem; border: 1px solid var(--lijn); border-radius: 999px;
}
.scanner-form input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.scanner-status { margin-top: 1rem; color: var(--grijs); }
.scanner-laden { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; }
.scanner-spinner {
  width: 1.4rem; height: 1.4rem; flex: none;
  border: 3px solid var(--lijn); border-top-color: var(--groen-vlak);
  border-radius: 50%; animation: scanner-draai 0.9s linear infinite;
}
@keyframes scanner-draai { to { transform: rotate(360deg); } }
.scanner-mislukt {
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  background: #fdf3f4; border: 1px solid #eeced1; border-radius: var(--radius);
  color: #8c1f28;
}
.scanner-rapport-kop { margin-top: 1.8rem; }
.scanner-platform { color: var(--grijs); margin-top: 0.3rem; }
.scanner-platform-verzoek { margin-top: 1rem; }
.scanner-scores { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; list-style: none; }
.scanner-score {
  flex: 1 1 9rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; text-align: center;
  box-shadow: 0 6px 18px rgba(11, 46, 80, 0.05);
}
.scanner-score-getal { font-family: var(--kop); font-weight: 750; font-size: 1.9rem; line-height: 1.1; }
.scanner-score-label { color: var(--grijs); font-size: 0.92rem; }
.scanner-score-goed .scanner-score-getal { color: var(--groen-tekst); }
.scanner-score-matig .scanner-score-getal { color: #9a6b00; }
.scanner-score-slecht .scanner-score-getal { color: #a4262c; }
.scanner-score-onbekend .scanner-score-getal { color: var(--grijs); }
.scanner-kernmetingen { list-style: none; margin-top: 1.2rem; border-top: 1px solid var(--lijn); }
.scanner-kernmetingen li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.6rem; border-bottom: 1px solid var(--lijn);
}
.scanner-punt {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; margin-top: 1rem;
  box-shadow: 0 6px 18px rgba(11, 46, 80, 0.05);
}
.scanner-punt-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.scanner-punt-categorie { font-family: var(--kop); font-weight: 650; color: var(--navy-diep); }
.scanner-badge { font-size: 0.82rem; font-weight: 650; padding: 0.15rem 0.7rem; border-radius: 999px; }
.scanner-badge-oplosbaar { background: var(--groen-licht); color: var(--groen-tekst); }
.scanner-badge-vast { background: #edeff2; color: var(--grijs); }
.scanner-punt-meetwaarde { color: var(--navy); font-size: 0.95rem; margin-top: 0.4rem; }
.scanner-punt-waarom { color: var(--grijs); margin-top: 0.4rem; }
.scanner-punt-tip { color: var(--inkt); margin-top: 0.4rem; }
.scanner-uitklap { margin-top: 1.2rem; }
.scanner-upsell {
  margin-top: 1.6rem; padding: 1.4rem 1.6rem;
  background: var(--groen-licht); border-radius: var(--radius);
}
.scanner-upsell-migratie { background: var(--fond); border: 1px solid var(--lijn); }
.scanner-upsell .cta-button, .scanner-upsell .cta-button-secondary { margin-top: 0.9rem; }
.scanner-meta { color: var(--grijs); font-size: 0.92rem; margin-top: 0.8rem; }

/* ---------- whatsapp-bolletje ---------- */

.whatsapp-bolletje {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: #25d366; color: var(--wit);
  box-shadow: 0 6px 18px rgba(11, 46, 80, 0.25);
  transition: transform 0.15s ease, background-color 0.15s ease;
  /* Rustige entree: de eerste minuut onzichtbaar (en niet klikbaar via
     visibility), dan een minuut lang infaden; op de 5-minuten-markering
     eenmalig een klein schudje als reminder. Met prefers-reduced-motion
     (animation: none) staat de knop er direct, de basisstijl is zichtbaar. */
  animation:
    whatsapp-verschijn 120s linear 1,
    whatsapp-schud 0.8s ease-in-out 300s 1;
}
@keyframes whatsapp-verschijn {
  /* visibility animeert discreet: het 50.1%-tussenpunt zet de knop
     zichtbaar (en klikbaar) precies waar de opacity-fade begint, zodat
     hij de eerste minuut echt weg is in plaats van onzichtbaar klikbaar. */
  0%, 50% { opacity: 0; visibility: hidden; }
  50.1% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}
@keyframes whatsapp-schud {
  0%, 100% { transform: none; }
  20% { transform: translateX(-4px) rotate(-4deg); }
  40% { transform: translateX(4px) rotate(4deg); }
  60% { transform: translateX(-3px) rotate(-2deg); }
  80% { transform: translateX(2px) rotate(1deg); }
}
.whatsapp-bolletje:hover { background: #1eb457; color: var(--wit); transform: translateY(-2px); }
.whatsapp-bolletje svg { width: 1.9rem; height: 1.9rem; }

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  .hero-grid, .proces, .contact, .audit-grid { grid-template-columns: 1fr; }
  .hero-beeld { max-width: 32rem; }
  .proces-beeld { order: -1; }
  .card-grid { grid-template-columns: 1fr; }
  .waarom-rijen > div { grid-template-columns: 1fr; padding-block: 0.9rem; }
}

@media (max-width: 860px) {
  .logo img { height: 2rem; }
  .menu-knop { display: inline-flex; }
  .hoofdnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--wit); border-bottom: 1px solid var(--lijn);
    padding: 1rem 1.25rem 1.3rem; box-shadow: 0 14px 24px rgba(11, 46, 80, 0.08);
  }
  .hoofdnav.open { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .hoofdnav ul { flex-direction: column; gap: 0.4rem; width: 100%; }
  .hoofdnav ul a { display: block; padding: 0.55rem 0; font-size: 1.05rem; }
  .hoofdnav .cta-button { margin-top: 0.6rem; }
}

@media (max-width: 700px) {
  .inpaklijst { grid-template-columns: 1fr; }
  .case-cijfers { gap: 1.2rem 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}