/* =========================================================================
   Van Holst Service - stijlblad
   Zie STYLEGUIDE.md voor de gedachte achter kleuren, typografie en vormtaal.
   ========================================================================= */

:root {
  /* Zwart, wit en grijs. Er is geen kleuraccent: hiërarchie komt uit
     contrast, witruimte en typografie. --accent is dus simpelweg zwart. */
  --inkt: #0d0d0f;
  --inkt-2: #17181b;
  --inkt-3: #2e3034;
  --papier: #f4f4f3;
  --wit: #ffffff;
  --accent: #101012;
  --accent-2: #000000;
  --accent-zacht: #ececeb;
  --tekst: #121316;
  --tekst-2: #63656b;
  --tekst-inv: #f0f0ef;
  --tekst-inv-2: #a2a4a8;
  --lijn: #e2e2de;

  /* Eén signaalkleur: elektragéél. Uitsluitend als accentje, nooit als vlak
     achter tekst en nooit als tekstkleur op wit (te weinig contrast). */
  --geel: #ffcc00;
  --geel-2: #e0b000;

  --r-s: 4px;
  --r-m: 12px;
  --r-l: 18px;
  --r-xl: 28px;

  --schaduw: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px -12px rgb(0 0 0 / 0.18);
  --schaduw-op: 0 2px 4px rgb(0 0 0 / 0.07), 0 18px 40px -18px rgb(0 0 0 / 0.3);

  --kop-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --breed: 1180px;
  --smal: 760px;
  --kop-h: 74px;

  /* Het beeldmerk als masker, voor het grote watermerk op de vlakken. */
  --schild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 124'%3E%3Cpath d='M17 9 H91 A8 8 0 0 1 99 17 V61 C99 90 77 105 54 117 C31 105 9 90 9 61 V17 A8 8 0 0 1 17 9 Z' fill='none' stroke='%23fff' stroke-width='9' stroke-linejoin='round'/%3E%3Cpath d='M62 28 L40 68 H53 L46 100 L70 58 H56 Z' fill='%23fff'/%3E%3C/svg%3E");

  /* Schemamotief: dunne banen met knooppunten, als installatietekening. */
  --motief: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%232e3034' stroke-width='1'%3E%3Cpath d='M0 45h70v45h60v45h50'/%3E%3Cpath d='M45 0v45M130 0v90M90 180v-45M180 135h-50v45'/%3E%3Cpath d='M0 135h40v-40'/%3E%3C/g%3E%3Cg fill='%23ffcc00' fill-opacity='0.85'%3E%3Ccircle cx='70' cy='45' r='2.6'/%3E%3Ccircle cx='130' cy='90' r='2.6'/%3E%3Ccircle cx='40' cy='95' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

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

h1, h2, h3, h4 {
  font-family: var(--kop-font);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); text-wrap: balance; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }

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

a { color: var(--tekst); text-decoration: none; }

/* Zonder kleur is een link alleen herkenbaar aan een streep. Die zetten we
   op inhoudelijke links; navigatie, kaarten en knoppen blijven strak. */
.tekstblok a, .lead a, .sectie-voet a, .spoed-links a, .antwoord a,
.form-klein a, .punten a, .opmerking a, .voet-onder a, .faq-groep h2 a {
  text-decoration: underline;
  text-decoration-color: var(--lijn);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.tekstblok a:hover, .lead a:hover, .sectie-voet a:hover, .spoed-links a:hover,
.antwoord a:hover, .form-klein a:hover, .punten a:hover, .opmerking a:hover,
.voet-onder a:hover, .faq-groep h2 a:hover { text-decoration-color: var(--geel-2); }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--geel); color: var(--inkt); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.overslaan {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--inkt); color: var(--wit); padding: 12px 18px;
  border-radius: 0 0 var(--r-m) 0; font-weight: 600;
}
.overslaan:focus { left: 0; }

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

.ic { width: 22px; height: 22px; flex: 0 0 auto; }

/* Op donkere vlakken moet de focusring wit zijn, anders valt hij weg. */
.hero :focus-visible, .band :focus-visible, .voet :focus-visible,
.zijkaart:not(.zijkaart-stil) :focus-visible,
.contactkaart:not(.contactkaart-stil) :focus-visible { outline-color: var(--wit); }

/* ---------------------------------------------------------------- layout */

.omhulsel {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 22px;
}
.omhulsel-smal { max-width: var(--smal); }

.sectie { padding: clamp(56px, 8vw, 96px) 0; }
.sectie-licht { background: var(--wit); border-block: 1px solid var(--lijn); }

.sectiekop { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.sectiekop h2 { margin-bottom: 0.35em; }
.sectie-voet { margin-top: 28px; color: var(--tekst-2); font-size: 0.9375rem; }

.overline {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--body-font);
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tekst-2);
  margin: 0 0 0.9em;
}
/* Klein zwart streepje voor het kopje: het enige "accent" dat we hebben. */
.overline:not(:has(.ic))::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 2px; background: var(--geel);
}
.overline .ic { width: 17px; height: 17px; }
.hero .overline, .band .overline { color: var(--tekst-inv-2); }
.hero .overline::before, .band .overline::before { background: var(--geel); }

.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--tekst-2); }
/* Accentwoorden in koppen: geel vlak met zwarte tekst, als een markeerstift.
   Dit is de enige plek waar geel een heel vlak vult.
   box-decoration-break houdt het net over een regelovergang. */
.markeer {
  background: var(--geel);
  color: var(--inkt);
  padding: 0.02em 0.16em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
/* Op smalle schermen mag het accent wel afbreken, anders loopt de kop buiten beeld. */
@media (max-width: 720px) { .markeer { white-space: normal; } }

/* --------------------------------------------------------------- watermerk

   Op de bedrijfsbus staat het beeldmerk nog een tweede keer: enorm groot, in
   mat wit op glanzend wit, deels weggesneden door de rand van het paneel. Je
   ziet het pas als het licht er goed op valt. Datzelfde doen we hier: het
   schild als heel licht vlak, dat langzaam even oplicht alsof er licht
   overheen strijkt. */

.watermerk, .band::after, .paginakop::after {
  content: "";
  position: absolute;
  pointer-events: none;
  aspect-ratio: 108 / 124;
  -webkit-mask: var(--schild) no-repeat center / contain;
  mask: var(--schild) no-repeat center / contain;
  background-color: rgb(255 255 255 / 0.075);
  background-image: linear-gradient(
    115deg,
    rgb(255 255 255 / 0) 42%,
    rgb(255 255 255 / 0.16) 50%,
    rgb(255 255 255 / 0) 58%
  );
  background-repeat: no-repeat;
  background-size: 280% 100%;
  animation: glans 18s linear infinite;
}
@keyframes glans {
  0%        { background-position: 150% 0; }
  45%, 100% { background-position: -150% 0; }
}

/* Hero: groot, half buiten beeld aan de rechterkant, net als op het paneel. */
.hero .watermerk {
  width: clamp(340px, 52vw, 780px);
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
}

/* Donkere banden: kleiner, hangt in de rechterhoek. */
.band::after {
  width: clamp(220px, 26vw, 380px);
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}

/* Het decoratieve vlak wordt het watermerk: daar mag het iets sterker. */
.vlak .watermerk {
  width: 72%;
  right: -9%;
  bottom: -16%;
  background-color: rgb(255 255 255 / 0.07);
}

/* Lichte paginakoppen: hetzelfde idee, maar dan zwart op wit zoals op de bus. */
.paginakop {
  position: relative;
  overflow: hidden;
}
.paginakop > .omhulsel { position: relative; z-index: 1; }
.paginakop::after {
  width: clamp(220px, 28vw, 420px);
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgb(13 13 15 / 0.055);
  background-image: linear-gradient(
    115deg,
    rgb(13 13 15 / 0) 42%,
    rgb(13 13 15 / 0.05) 50%,
    rgb(13 13 15 / 0) 58%
  );
}

/* ------------------------------------------------------------ conceptbalk */

.conceptbalk {
  background: var(--inkt-2);
  color: var(--tekst-inv-2);
  font-size: 0.8125rem;
  text-align: center;
  padding: 8px 18px;
  border-bottom: 1px solid var(--inkt-3);
}
.conceptbalk strong { color: var(--geel); }

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

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body-font);
  font-size: 0.9688rem; font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--r-m);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s, color .16s;
  text-decoration: none;
  white-space: nowrap;
}
.knop:hover { text-decoration: none; transform: translateY(-1px); }
.knop .ic { width: 19px; height: 19px; }

.knop-primair { background: var(--inkt); color: var(--wit); }
.knop-primair:hover { background: var(--accent-2); color: var(--wit); }

/* Op donkere vlakken draait de knop om: wit vlak, zwarte tekst. */
.hero .knop-primair,
.band .knop-primair,
.zijkaart:not(.zijkaart-stil) .knop-primair,
.contactkaart:not(.contactkaart-stil) .knop-primair { background: var(--wit); color: var(--inkt); }
.hero .knop-primair:hover,
.band .knop-primair:hover,
.zijkaart:not(.zijkaart-stil) .knop-primair:hover,
.contactkaart:not(.contactkaart-stil) .knop-primair:hover { background: var(--tekst-inv); color: var(--inkt); }

.knop-secundair { background: transparent; color: var(--tekst); border-color: var(--lijn); }
.knop-secundair:hover { border-color: var(--accent); color: var(--accent-2); }

.knop-blok { display: flex; width: 100%; }
.knop-blok + .knop-blok { margin-top: 10px; }

/* Op donkere vlakken: hero, banden en de donkere zij- en contactkaarten. */
.hero .knop-secundair,
.band .knop-secundair,
.zijkaart:not(.zijkaart-stil) .knop-secundair,
.contactkaart:not(.contactkaart-stil) .knop-secundair { color: var(--tekst-inv); border-color: var(--inkt-3); }
.hero .knop-secundair:hover,
.band .knop-secundair:hover,
.zijkaart:not(.zijkaart-stil) .knop-secundair:hover,
.contactkaart:not(.contactkaart-stil) .knop-secundair:hover { border-color: var(--wit); color: var(--wit); }

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

.kop {
  position: sticky; top: 0; z-index: 90;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.kop-in {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--kop-h);
}

.merk { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.merk:hover { text-decoration: none; }
.merk img { width: auto; height: 34px; }
.merk-lijn { width: 2px; height: 32px; background: var(--inkt); flex: 0 0 auto; }
.merk-tekst {
  display: flex; flex-direction: column;
  font-family: Arial, Helvetica, var(--body-font);
  font-weight: 700; text-transform: uppercase;
  line-height: 1.16; letter-spacing: 0.01em;
  white-space: nowrap;
}
.merk-tekst strong,
.merk-tekst em {
  font-style: normal; font-weight: 700;
  font-size: 0.875rem; color: var(--inkt);
}

.nav-lijst { display: flex; align-items: center; gap: 2px; }
.nav-lijst > li { position: relative; }
.nav-lijst > li > a {
  display: block; padding: 10px 13px;
  color: var(--tekst); font-size: 0.9375rem; font-weight: 500;
  border-radius: var(--r-m);
}
.nav-lijst > li > a:hover { background: var(--papier); color: var(--inkt); text-decoration: none; }
.nav-lijst > li > a[aria-current] {
  color: var(--inkt);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

.heeft-sub > a::after {
  content: ""; display: inline-block; margin-left: 7px;
  width: 5px; height: 5px; vertical-align: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}

.sub {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 250px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
  box-shadow: var(--schaduw-op);
  padding: 12px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.sub-breed { min-width: 480px; }
.heeft-sub:hover .sub,
.heeft-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }

.sub-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sub-kolom { grid-template-columns: 1fr 1fr; }
.sub-lijst a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-m);
  color: var(--tekst); font-size: 0.9063rem; font-weight: 500;
}
.sub-lijst a:hover { background: var(--papier); color: var(--inkt); text-decoration: none; }
.sub-lijst .ic { width: 19px; height: 19px; color: var(--tekst); }
.sub-alles {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 10px 11px 4px;
  border-top: 1px solid var(--lijn);
  font-size: 0.875rem; font-weight: 600;
}
.sub-alles .ic { width: 16px; height: 16px; }

.kop-acties { display: flex; align-items: center; gap: 10px; }
.knop-tel {
  background: var(--inkt); color: var(--wit);
  padding: 11px 18px; font-size: 0.9375rem;
}
.knop-tel:hover { background: var(--accent-2); color: var(--wit); }

.menu-knop {
  display: none;
  width: 44px; height: 42px;
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: var(--r-m);
  position: relative; cursor: pointer;
}
.menu-streep,
.menu-streep::before,
.menu-streep::after {
  position: absolute; left: 12px; width: 19px; height: 1.8px;
  background: var(--inkt); border-radius: 2px; transition: transform .18s, opacity .18s;
}
.menu-streep { top: 20px; }
.menu-streep::before { content: ""; top: -6px; left: 0; }
.menu-streep::after { content: ""; top: 6px; left: 0; }
[aria-expanded="true"] .menu-streep { background: transparent; }
[aria-expanded="true"] .menu-streep::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-streep::after { transform: translateY(-6px) rotate(-45deg); }

.mobielmenu {
  border-top: 1px solid var(--lijn);
  background: var(--wit);
  padding: 18px 22px 26px;
  max-height: calc(100vh - var(--kop-h));
  overflow-y: auto;
}
.mm-kop {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--tekst-2); margin: 16px 0 6px;
}
.mm-kop:first-child { margin-top: 0; }
.mm-lijst a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; color: var(--tekst); font-weight: 500;
  border-bottom: 1px solid var(--lijn);
}
.mm-lijst .ic { width: 19px; height: 19px; color: var(--tekst); }
.mm-plaatsen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ------------------------------------------------------------- kruimels */

.kruimels { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 0; font-size: 0.8125rem; }
.kruimels li { color: var(--tekst-2); }
.kruimels li + li::before { content: "/"; margin-right: 8px; opacity: .45; }
.kruimels a { color: var(--tekst-2); }
.kruimels a:hover { color: var(--tekst); text-decoration: underline; }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--inkt);
  color: var(--tekst-inv);
  overflow: hidden;
  isolation: isolate;
}
.hero-motief {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  mask-image: radial-gradient(115% 90% at 82% 12%, #000 0%, transparent 68%);
}
/* De motieflaag is bewust groter dan het kader: hij schuift precies één tegel
   op in 140s en herhaalt daarna naadloos. Traag genoeg om niet af te leiden. */
.motief-laag {
  position: absolute; inset: -200px;
  background-image: var(--motief);
  background-size: 180px 180px;
  opacity: .5;
  animation: motiefdrift 140s linear infinite;
}
@keyframes motiefdrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(180px, 180px, 0); }
}

/* Vonken: dunne gele pulsjes die over de banen lopen, als stroom door een
   leiding. Drie stuks met verschillende lengte, snelheid en vertraging,
   zodat er geen herkenbaar patroon ontstaat. */
.vonk {
  position: absolute; height: 2px; width: 150px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--geel), transparent);
  opacity: 0;
  animation: vonkloop 13s linear infinite;
  pointer-events: none;
}
@keyframes vonkloop {
  0%   { opacity: 0; transform: translate3d(-80px, 0, 0); }
  8%   { opacity: .85; }
  68%  { opacity: .85; }
  100% { opacity: 0; transform: translate3d(420px, 0, 0); }
}
.vonk-1 { top: 27%; left: 6%;  animation-duration: 12s; }
.vonk-2 { top: 63%; left: 32%; width: 110px; animation-duration: 17s; animation-delay: 4s; }
.vonk-3 { top: 13%; left: 55%; width: 190px; animation-duration: 21s; animation-delay: 8.5s; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(72% 62% at 78% 8%, rgb(255 255 255 / 0.09), transparent 70%);
}
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(56px, 8vw, 104px) 22px clamp(56px, 8vw, 100px);
}
/* Iets ruimere regelafstand: het markeervlak van .markeer steekt buiten de
   regel uit en zou anders de staarten van de regel erboven afdekken. */
.hero h1 { color: #fff; margin-bottom: 0.55em; line-height: 1.24; }
.hero .lead { color: var(--tekst-inv-2); max-width: 46ch; }
.hero-acties { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 30px; }

.usps { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.usps li {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.9375rem; color: var(--tekst-2);
}
.usps .ic { width: 18px; height: 18px; color: var(--accent); }
.hero .usps li { color: var(--tekst-inv-2); }
/* Het schild is het beeldmerk. Dat blijft zwart of wit, ook als opsommings-
   teken: geel op het logo zou de huisstijl van de bus tegenspreken. */
.hero .usps .ic { color: var(--wit); }

.hero-kaart {
  background: var(--inkt-2);
  border: 1px solid var(--inkt-3);
  border-radius: var(--r-xl);
  padding: 24px;
}
.hk-kop {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--tekst-inv-2); margin-bottom: 14px;
}
.hk-regel {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 0; border-top: 1px solid var(--inkt-3);
  color: var(--tekst-inv);
}
.hk-regel:hover { text-decoration: none; color: var(--tekst-inv-2); }
.hk-regel .ic { color: var(--wit); margin-top: 3px; }
.hk-regel span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hk-regel strong { font-size: 1rem; font-weight: 600; }
.hk-regel em { font-style: normal; font-size: 0.8125rem; color: var(--tekst-inv-2); }
.hk-stil { cursor: default; }
.hk-stil strong + em + strong { margin-top: 7px; }
.hk-voet {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 0; padding-top: 15px;
  border-top: 1px solid var(--inkt-3);
  font-size: 0.8125rem; color: var(--tekst-inv-2);
}
.hk-voet .ic { width: 17px; height: 17px; color: var(--wit); }

/* ------------------------------------------------------------ paginakop */

.paginakop {
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
  padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 60px);
}
.paginakop h1 { max-width: 22ch; }
.paginakop .lead { max-width: 62ch; }
.pk-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.paginakop .usps { margin-top: 26px; }
.paginakop-dienst, .paginakop-plaats { background: var(--papier); }

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

.raster { display: grid; gap: 18px; }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.kaart {
  display: block;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
  padding: 26px 24px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.sectie-licht .kaart { background: var(--papier); }
.kaart h3 { margin-bottom: 0.4em; color: var(--inkt); }
.kaart p { color: var(--tekst-2); font-size: 0.9375rem; margin-bottom: 0; }

.kaart-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  background: var(--accent-zacht); color: var(--tekst);
  border-radius: var(--r-m);
  transition: background .16s, color .16s;
}
.kaart-ic .ic { width: 24px; height: 24px; }

a.kaart-dienst:hover {
  border-color: var(--inkt); box-shadow: var(--schaduw-op);
  transform: translateY(-2px); text-decoration: none;
}
a.kaart-dienst:hover .kaart-ic { background: var(--geel); color: var(--inkt); }
.kaart-meer {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; font-size: 0.875rem; font-weight: 600; color: var(--tekst);
}
.kaart-meer .ic { width: 16px; height: 16px; transition: transform .16s; }
a.kaart-dienst:hover .kaart-meer .ic { transform: translateX(3px); }

/* Blijft de laatste kaart alleen op een rij achter, dan wordt hij een brede
   liggende kaart in plaats van een losse smalle kolom. */
.raster-3 > .kaart:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 26px;
}
.raster-3 > .kaart:last-child:nth-child(3n + 1) .kaart-ic { margin-bottom: 0; grid-row: span 2; }
.raster-3 > .kaart:last-child:nth-child(3n + 1) h3 { margin-bottom: 0; grid-column: 2; }
.raster-3 > .kaart:last-child:nth-child(3n + 1) p { grid-column: 2; }
.raster-3 > .kaart:last-child:nth-child(3n + 1) .kaart-meer {
  grid-column: 3; grid-row: span 2; margin-top: 0; white-space: nowrap;
}
@media (max-width: 720px) {
  .raster-3 > .kaart:last-child:nth-child(3n + 1) { grid-template-columns: 1fr; }
  .raster-3 > .kaart:last-child:nth-child(3n + 1) .kaart-ic { grid-row: auto; margin-bottom: 14px; }
  .raster-3 > .kaart:last-child:nth-child(3n + 1) h3,
  .raster-3 > .kaart:last-child:nth-child(3n + 1) p,
  .raster-3 > .kaart:last-child:nth-child(3n + 1) .kaart-meer { grid-column: 1; grid-row: auto; }
  .raster-3 > .kaart:last-child:nth-child(3n + 1) .kaart-meer { margin-top: 14px; }
}

/* ------------------------------------------------------------ uitgelicht */

.uitgelicht {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 60px); align-items: center;
}
.uitgelicht-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.vlak {
  margin: 0; border-radius: var(--r-xl);
  background: var(--inkt); position: relative; overflow: hidden;
  min-height: 320px;
}
.vlak-motief {
  position: absolute; inset: -160px;
  background-image: var(--motief);
  background-size: 150px 150px;
  opacity: .7;
  animation: motiefdrift 160s linear infinite reverse;
}
.vlak .vonk { top: 38%; left: 10%; width: 120px; animation-duration: 15s; animation-delay: 2s; }
.vlak::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(65% 65% at 30% 25%, rgb(255 255 255 / 0.1), transparent 72%);
}

/* --------------------------------------------------------------- banden */

.band { background: var(--inkt); color: var(--tekst-inv); position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: -200px; pointer-events: none;
  background-image: var(--motief);
  background-size: 180px 180px;
  opacity: .34;
  mask-image: radial-gradient(85% 130% at 92% 0%, #000 0%, transparent 72%);
  animation: motiefdrift 180s linear infinite;
}
.band > .omhulsel { position: relative; z-index: 1; }
.band h2 { color: #fff; }
.band p { color: var(--tekst-inv-2); }
.band a { color: var(--wit); }

.spoed { border-top: 3px solid var(--geel); }
.spoed-in, .cta-in {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(40px, 6vw, 64px) 22px;
}
.spoed h2, .cta h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.spoed-links { font-size: 0.9375rem; margin-top: 14px; }
/* Tekstlinks in donkere banden: wit met een lichte streep. Niet `.band a`,
   want dan wint dat van .knop-primair en wordt de knoptekst onleesbaar. */
.band p a { color: var(--wit); text-decoration-color: rgb(255 255 255 / 0.45); }
.spoed-actie { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.spoed-meta {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8438rem; color: var(--tekst-inv-2); margin: 0;
}
.spoed-meta .ic { width: 17px; height: 17px; color: var(--wit); }
.cta-acties { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------------- stappen */

.stappen {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: stap;
}
.stap {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--r-l); padding: 24px;
  position: relative;
}
.sectie-licht .stap { background: var(--papier); }
.stap-nr {
  display: block; font-family: var(--kop-font); font-size: 1.75rem;
  font-weight: 700; color: var(--inkt); line-height: 1; margin-bottom: 16px;
}
.stap-nr::after {
  content: ""; display: block; width: 26px; height: 3px;
  background: var(--geel); margin-top: 12px; border-radius: 2px;
}
.stap h3 { margin-bottom: 0.45em; color: var(--inkt); }
.stap p { color: var(--tekst-2); font-size: 0.9375rem; margin: 0; }

/* ------------------------------------------------------------- plaatsen */

/* Drie per rij: met auto-fit passen er vijf en blijft de zesde alleen achter. */
.plaatsen { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plaatskaart {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--r-l); padding: 20px;
  transition: border-color .16s, transform .16s;
}
.plaatskaart:hover { border-color: var(--inkt); transform: translateY(-2px); text-decoration: none; }
.pk-ic { color: var(--tekst); }
.pk-ic .ic { width: 20px; height: 20px; }
.pk-naam { font-family: var(--kop-font); font-weight: 600; font-size: 1.0625rem; color: var(--inkt); margin-top: 8px; }
.pk-meta { font-size: 0.8125rem; color: var(--tekst-2); }

.gebiedlijst { border: 1px solid var(--lijn); border-radius: var(--r-l); overflow: hidden; background: var(--wit); }
.gebiedrij {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-bottom: 1px solid var(--lijn);
  color: var(--tekst);
}
.gebiedrij:last-child { border-bottom: 0; }
.gebiedrij:hover { background: var(--papier); text-decoration: none; }
.gr-ic { color: var(--tekst); }
.gr-tekst { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.gr-tekst strong { font-family: var(--kop-font); font-size: 1.0625rem; font-weight: 600; color: var(--inkt); }
.gr-tekst em { font-style: normal; font-size: 0.8438rem; color: var(--tekst-2); }
.gr-meta { font-size: 0.8438rem; color: var(--tekst-2); white-space: nowrap; }
.gr-pijl .ic { width: 18px; height: 18px; color: var(--tekst); transition: color .16s, transform .16s; }
.gebiedrij:hover .gr-pijl .ic { color: var(--geel-2); transform: translateX(3px); }

/* ------------------------------------------------------------- kolommen */

.kolommen {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(32px, 5vw, 60px); align-items: start;
}
.tekstblok { margin-bottom: 40px; }
.tekstblok:last-child { margin-bottom: 0; }
.tekstblok h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 0.6em; }
.tekstblok p { color: var(--tekst); }

.punten { display: grid; gap: 11px; margin: 20px 0 0; }
.punten-2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.punten-klein { font-size: 0.9063rem; }
.punten li { display: flex; align-items: flex-start; gap: 11px; }
.punten + p { margin-top: 1.2em; }
.punten .ic { width: 19px; height: 19px; color: var(--accent); margin-top: 4px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.tags li {
  background: var(--accent-zacht); color: var(--tekst);
  border-radius: 999px; padding: 5px 14px;
  font-size: 0.8438rem; font-weight: 500;
}

.kolom-zij { position: sticky; top: calc(var(--kop-h) + 18px); display: grid; gap: 16px; }
.zijkaart {
  background: var(--inkt); color: var(--tekst-inv);
  border-radius: var(--r-l); padding: 24px;
}
.zijkaart-stil { background: var(--wit); border: 1px solid var(--lijn); color: var(--tekst); }
.zk-kop { font-family: var(--kop-font); font-weight: 600; font-size: 1.0625rem; margin-bottom: 8px; color: #fff; }
.zijkaart-stil .zk-kop { color: var(--inkt); }
.zk-tekst { font-size: 0.9063rem; color: var(--tekst-inv-2); margin-bottom: 18px; }
.zk-meta { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--inkt-3); }
.zk-meta li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.8438rem; color: var(--tekst-inv-2); }
.zk-meta .ic { width: 18px; height: 18px; color: var(--wit); margin-top: 2px; }
.zk-links { display: grid; gap: 2px; }
.zk-links a {
  display: block; padding: 8px 0; font-size: 0.9375rem;
  color: var(--tekst); border-bottom: 1px solid var(--lijn);
}
.zk-links li:last-child a { border-bottom: 0; font-weight: 600; }
.zk-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.faq { border: 1px solid var(--lijn); border-radius: var(--r-l); overflow: hidden; background: var(--papier); }
.sectie-licht .faq { background: var(--wit); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag:last-child { border-bottom: 0; }
.vraag summary {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--kop-font); font-weight: 600; font-size: 1.0313rem;
  color: var(--inkt);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--tekst); border-bottom: 2px solid var(--tekst);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s;
}
.vraag[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.vraag summary:hover { color: var(--tekst-2); }
.antwoord { padding: 0 22px 20px; }
.antwoord p { color: var(--tekst-2); margin: 0; max-width: 72ch; }

.faq-groep { margin-bottom: 44px; }
.faq-groep:last-child { margin-bottom: 0; }
.faq-groep h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }

/* -------------------------------------------------------------- contact */

.contact-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
.contactkolom { display: grid; gap: 16px; }
.contactkaart { background: var(--inkt); border-radius: var(--r-l); padding: 8px 24px 20px; color: var(--tekst-inv); }
.contactkaart-stil { background: var(--wit); border: 1px solid var(--lijn); color: var(--tekst); padding: 22px 24px; }
.ck-regel { display: flex; align-items: flex-start; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--inkt-3); color: var(--tekst-inv); }
.ck-regel:last-child { border-bottom: 0; }
.ck-regel:hover { text-decoration: none; color: var(--tekst-inv-2); }
.ck-regel .ic { color: var(--wit); margin-top: 3px; }
.ck-regel span { display: flex; flex-direction: column; min-width: 0; }
.ck-regel strong { font-size: 1.0313rem; font-weight: 600; }
.ck-regel em { font-style: normal; font-size: 0.8125rem; color: var(--tekst-inv-2); }
.ck-stil { cursor: default; }
.ck-kop { display: flex; align-items: center; gap: 10px; font-family: var(--kop-font); font-weight: 600; margin-bottom: 14px; color: var(--inkt); }
.ck-kop .ic { color: var(--tekst); width: 19px; height: 19px; }
.ck-tijden li, .voet-tijden li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: 0.9063rem; }
.ck-tijden li:last-child { border-bottom: 0; }
.ck-noot { font-size: 0.8438rem; color: var(--tekst-2); margin: 14px 0 0; }

.formulier { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 34px); }
.form-kop { font-family: var(--kop-font); font-size: 1.25rem; font-weight: 700; color: var(--inkt); margin-bottom: 22px; }
.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.veld { display: block; margin-bottom: 16px; }
.veld > span { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; color: var(--tekst); }
.veld em { color: var(--tekst); font-style: normal; font-weight: 600; }
.veld input, .veld select, .veld textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 12px 14px; color: var(--tekst);
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: var(--r-m);
}
.veld textarea { resize: vertical; min-height: 120px; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--inkt); background: var(--wit); }
/* Fout gaat niet op kleur maar op vorm: dikkere zwarte rand plus de melding
   onder het formulier. Dat werkt ook in een palet zonder signaalkleuren. */
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"] {
  border-color: var(--inkt); border-width: 2px; background: var(--wit);
}
.form-klein { font-size: 0.8125rem; color: var(--tekst-2); margin: 4px 0 20px; }
.form-status { margin: 14px 0 0; font-size: 0.9063rem; font-weight: 500; }
.form-status[data-soort="ok"] { color: var(--tekst); }
.form-status[data-soort="fout"] { color: var(--tekst); font-weight: 600; }
.form-status[data-soort="fout"]::before { content: "! "; font-weight: 700; }

.opmerking {
  background: var(--accent-zacht); border-left: 3px solid var(--accent);
  padding: 14px 18px; border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: 0.9063rem; color: var(--tekst);
}
.opmerking:empty { display: none; }

/* ----------------------------------------------------------------- voet */

.voet { background: var(--inkt); color: var(--tekst-inv-2); padding: clamp(48px, 6vw, 76px) 0 0; }
.voet-in {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 46px;
}
.merk-voet { margin: 0 0 18px; }
.merk-voet img { height: 39px; }
.merk-voet .merk-lijn { background: var(--wit); height: 36px; }
.merk-voet .merk-tekst strong,
.merk-voet .merk-tekst em { color: var(--wit); font-size: 0.9375rem; }
.voet-merk p { font-size: 0.9375rem; max-width: 38ch; }
.voet-contact { display: grid; gap: 11px; margin-top: 22px; }
.voet-contact li { display: flex; align-items: center; gap: 11px; font-size: 0.9375rem; }
.voet-contact .ic { width: 18px; height: 18px; color: var(--geel); }
.voet-contact a { color: var(--tekst-inv); }
.voet-contact a:hover { color: var(--wit); text-decoration: underline; }

.voet-kop {
  font-family: var(--kop-font); font-size: 0.9375rem; font-weight: 600;
  color: #fff; margin-bottom: 14px;
}
.voet-kop-2 { margin-top: 28px; }
.voet-kolom ul { display: grid; gap: 8px; }
.voet-kolom a { color: var(--tekst-inv-2); font-size: 0.9063rem; }
.voet-kolom a:hover { color: var(--wit); text-decoration: underline; }
.voet-tijden li { border-bottom-color: var(--inkt-3); font-size: 0.8438rem; }
.voet-tijden span:last-child, .ck-tijden span:last-child { white-space: nowrap; }

.voet-onder {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding: 20px 22px; border-top: 1px solid var(--inkt-3);
  font-size: 0.8125rem;
}
.voet-onder p { margin: 0; }

/* ----------------------------------------------------------- mobielbalk */

.mobielbalk { display: none; }

/* ---------------------------------------------------------- responsief */

@media (max-width: 1040px) {
  .nav { display: none; }
  .menu-knop { display: block; }
  .kolommen { grid-template-columns: 1fr; }
  .kolom-zij { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .hero-in { grid-template-columns: 1fr; }
  .hero-kaart { max-width: 460px; }
  .uitgelicht { grid-template-columns: 1fr; }
  .vlak { min-height: 220px; order: -1; }
  .contact-in { grid-template-columns: 1fr; }
  .voet-in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .lead { font-size: 1.0625rem; }
  .spoed-in, .cta-in { grid-template-columns: 1fr; }
  .veldrij { grid-template-columns: 1fr; gap: 0; }
  .voet-in { grid-template-columns: 1fr; }
  .knop-tel span { display: none; }
  .knop-tel { padding: 11px 13px; }
  .merk { gap: 9px; }
  .merk-tekst strong, .merk-tekst em { font-size: 0.75rem; }
  .plaatsen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gebiedrij { flex-wrap: wrap; }
  .gr-meta { width: 100%; padding-left: 38px; }
  .hero-acties .knop, .pk-acties .knop, .cta-acties .knop { flex: 1 1 auto; }

  /* Vaste actiebalk onderaan: een installateur wordt gebeld. */
  .mobielbalk {
    display: grid; grid-template-columns: 1.4fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
    background: var(--wit); border-top: 1px solid var(--lijn);
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    gap: 9px;
  }
  .mobielbalk a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: var(--r-m);
    font-size: 0.9375rem; font-weight: 600;
  }
  .mobielbalk a:hover { text-decoration: none; }
  .mb-bel { background: var(--inkt); color: var(--wit); }
  .mb-mail { background: var(--papier); color: var(--inkt); border: 1px solid var(--lijn); }
  .mobielbalk .ic { width: 19px; height: 19px; }
  body { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Ook de iteratie terugzetten: een oneindige animatie van 0.01ms zou juist
     razendsnel gaan lopen in plaats van stilstaan. */
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .motief-laag, .vlak-motief, .band::before, .vonk,
  .watermerk, .band::after, .paginakop::after { animation: none !important; }
  .vonk { opacity: .6; }
}

@media print {
  .kop, .mobielbalk, .band, .conceptbalk, .kruimels { display: none; }
  body { background: #fff; }
}