/* Opmaak hagoortsails.webgroeiers.nl.
   Huisstijl overgenomen van hagoortsails.nl: marineblauw #223E70, geel #FCED4F,
   Poppins voor koppen en Open Sans voor lopende tekst, pilvormige knoppen en
   afgeronde beeldhoeken. Eén stylesheet, geen build-stap. */

/* -------------------------------------------------------------- lettertypen */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-700.woff2") format("woff2");
}
/* Open Sans is een variabel lettertype: één bestand dekt alle gewichten. De
   twee losse bestanden van voorheen waren byte voor byte hetzelfde, dus de
   browser laadde 43 kB dubbel. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/open-sans.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */

:root {
  --marine: #223e70;
  --marine-diep: #16294a;
  --marine-licht: #34589a;
  --geel: #fced4f;
  --geel-diep: #f2dc16;
  --inkt: #14171c;
  --grijs: #5d6a7a;
  --lijn: #dde3ea;
  --vlak: #f2f5f9;
  --wit: #fff;

  --kop: "Poppins", system-ui, sans-serif;
  --tekst: "Open Sans", system-ui, sans-serif;

  --omhulsel: 74rem;
  --radius: 14px;
  --radius-groot: 22px;
  --schaduw: 0 1px 2px rgba(22, 41, 74, .05), 0 10px 30px rgba(22, 41, 74, .08);
}

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

html { scroll-behavior: smooth; }

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

h1, h2, h3 {
  font-family: var(--kop);
  font-weight: 600;
  line-height: 1.15;
  color: var(--marine);
  margin: 0 0 .5em;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.05rem, 1.4rem + 2.7vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: 1.1875rem; }

p { margin: 0 0 1em; }
a { color: var(--marine); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.omhulsel { width: min(100% - 2.5rem, var(--omhulsel)); margin-inline: auto; }

.overslaan { position: absolute; left: -9999px; background: var(--marine); color: var(--wit); padding: .6rem 1rem; z-index: 200; border-radius: 0 0 8px 0; }
.overslaan:focus { left: 0; top: 0; }

:focus-visible { outline: 3px solid var(--geel-diep); outline-offset: 2px; }

.vullend { width: 100%; height: 100%; object-fit: cover; }
.afgerond { border-radius: var(--radius-groot); box-shadow: var(--schaduw); }

/* ---------------------------------------------------------------- topbalk */

.topbalk { background: var(--marine-diep); color: #c8d6ea; font-size: .8125rem; }
/* Hele pixels: met .45rem was deze balk 50,375 px hoog, en dan staat het logo
   eronder op een halve pixel en oogt het vaag (Hagoort, 20-10-2026). */
.topbalk-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 7px; }
.topbalk-contact { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.topbalk-contact a { display: inline-flex; align-items: center; gap: .4rem; color: #c8d6ea; text-decoration: none; }
.topbalk-contact a:hover { color: var(--wit); }
.topbalk .ic { width: 1em; height: 1em; color: var(--geel); }

@media (max-width: 40rem) {
  .topbalk-contact a span { display: none; }
  .topbalk-contact a { padding: .3rem; }
  .topbalk .ic { width: 1.2em; height: 1.2em; }
}

/* -------------------------------------------------------------------- kop */

.kop { background: var(--wit); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 100; }
/* Het logo is gestapeld (vleugels boven het woordmerk); op 62 px hoog was het
   woordmerk maar 11 px en oogde het vaag. Nu 81 px hoog. Alle maten zijn hele
   pixels en passen op de verhouding van het logo (1280:810), anders tekent de
   browser het tussen twee pixels in: 128x81 in een kop van 97, marge 8. */
.kop-in { display: flex; align-items: center; gap: 1.5rem; min-height: 97px; }
.merk { flex: none; }
.merk img { width: 128px; height: 81px; object-fit: contain; }

.hoofdnav { margin-left: auto; }
.hoofdnav > ul { display: flex; align-items: center; gap: .25rem; }
.hoofdnav a {
  display: flex; align-items: center; gap: .3rem;
  padding: .55rem .7rem; border-radius: 8px;
  font-family: var(--kop); font-weight: 500; font-size: .9375rem;
  color: var(--inkt); text-decoration: none;
}
.hoofdnav a:hover { background: var(--vlak); color: var(--marine); }
.hoofdnav a[aria-current] { color: var(--marine); }
.chevron { width: .85em; height: .85em; flex: none; }

.heeft-sub { position: relative; }
.submenu {
  position: absolute; top: 100%; left: 0; min-width: 15rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw); padding: .4rem; display: none; z-index: 10;
}
.heeft-sub:hover .submenu, .heeft-sub:focus-within .submenu { display: block; }
.submenu a { font-size: .9375rem; padding: .5rem .65rem; }

.menuknop { display: none; }

@media (max-width: 75rem) {
  /* Zonder wrap blijft de uitgeklapte navigatie in dezelfde flexrij hangen. */
  .kop-in { min-height: 69px; flex-wrap: wrap; gap: .75rem; }
  .merk img { width: 90px; height: 57px; }
  .menuknop {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    background: var(--marine); color: var(--wit); border: 0;
    padding: .55rem .9rem; border-radius: 999px;
    font-family: var(--kop); font-weight: 500; font-size: .875rem; cursor: pointer;
  }
  .menuknop-streep, .menuknop-streep::before, .menuknop-streep::after {
    display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px;
  }
  .menuknop-streep { position: relative; }
  .menuknop-streep::before, .menuknop-streep::after { content: ""; position: absolute; left: 0; }
  .menuknop-streep::before { top: -5px; }
  .menuknop-streep::after { top: 5px; }

  .hoofdnav {
    display: none; order: 3; width: 100%; margin-left: 0;
    border-top: 1px solid var(--lijn); padding-block: .5rem 1rem;
    max-height: 70vh; overflow-y: auto;
  }
  body.menu-open .hoofdnav { display: block; }
  .hoofdnav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hoofdnav a { padding: .7rem .5rem; border-radius: 6px; }
  .submenu {
    position: static; display: none; border: 0; box-shadow: none; padding: 0 0 .5rem .9rem;
    border-left: 2px solid var(--lijn); margin-left: .5rem; min-width: 0;
  }
  .heeft-sub.open .submenu { display: block; }
  .heeft-sub:hover .submenu { display: none; }
  .heeft-sub.open:hover .submenu { display: block; }
}
/* Telefoon: logo, Gratis advies en Menu moeten op één regel passen. */
@media (max-width: 30rem) {
  .kop-in { min-height: 64px; }
  .merk img { width: 82px; height: 52px; }
}

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

.knop {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px;
  font-family: var(--kop); font-weight: 500; font-size: .9375rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knop .ic { width: 1.05em; height: 1.05em; }
.knop-klein { padding: .45rem 1rem; font-size: .8125rem; }

.knop-primair { background: var(--marine); color: var(--wit); }
.knop-primair:hover { background: var(--marine-diep); }

.knop-accent { background: var(--geel); color: var(--marine-diep); }
.knop-accent:hover { background: var(--geel-diep); }

.knop-lijn { background: transparent; color: var(--marine); border-color: var(--lijn); }
.knop-lijn:hover { border-color: var(--marine); }

.knop-licht { background: rgba(255, 255, 255, .14); color: var(--wit); border-color: rgba(255, 255, 255, .5); }
.knop-licht:hover { background: var(--wit); color: var(--marine); }

.knop-wit { background: var(--wit); color: var(--marine-diep); }
.knop-wit:hover { background: var(--vlak); }

.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.ic { width: 1.15em; height: 1.15em; flex: none; }

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

.kruimels { border-bottom: 1px solid var(--lijn); background: var(--vlak); font-size: .8125rem; }
.kruimels ol { display: flex; flex-wrap: wrap; gap: .45rem; padding: .6rem 0; }
.kruimels li + li::before { content: "/"; color: var(--grijs); margin-right: .45rem; }
.kruimels a { color: var(--grijs); text-decoration: none; }
.kruimels a:hover { color: var(--marine); }
.kruimels [aria-current] { color: var(--inkt); font-weight: 600; }

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

/* De foto in de kop staat altijd volledig in beeld. Het vlak van de foto
   heeft de verhouding van de foto zelf (--beeld-ratio, gezet door de build)
   en de hoogte van de kop. Op een breed scherm is dat vlak smaller dan de kop:
   de foto staat dan rechts en loopt links over in het marineblauw, zodat er
   niets van de mast, het zeil of de romp wordt afgesneden. Op een smaller
   scherm vult de foto de kop en bepaalt het brandpunt (content/beeldfocus.js)
   wat er zichtbaar blijft. */
.held, .paginakop { position: relative; isolation: isolate; color: var(--wit); background: var(--marine-diep); }
.held-beeld, .paginakop-beeld {
  position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; left: auto;
  height: 100%; width: auto; max-width: 100%;
  aspect-ratio: var(--beeld-ratio, 16 / 9);
}
.held-beeld img, .paginakop-beeld img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64rem) {
  .held-beeld, .paginakop-beeld {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
            mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  }
}
/* Donker onder de tekst, en weg voordat de foto begint te spreken. De
   overgangen liggen vast ten opzichte van de tekstkolom (het midden plus een
   paar rem), niet ten opzichte van de schermbreedte. */
.held::after, .paginakop::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(22, 41, 74, .94) 0,
    rgba(22, 41, 74, .86) calc(50% + 2rem),
    rgba(22, 41, 74, .45) calc(50% + 10rem),
    rgba(22, 41, 74, 0) calc(50% + 24rem));
}
/* Telefoon: ook op subpagina's eerst de hele foto, daaronder de tekst. Over
   de foto heen bleef er van de foto maar een derde over, onder 82% blauw. */
@media (max-width: 48rem) {
  .paginakop .paginakop-beeld {
    position: relative; inset: auto; width: 100%; height: auto; max-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, .55) 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, .55) 78%, transparent 100%);
  }
  .paginakop::after { display: none; }
  .paginakop-in { position: relative; padding-block: 0 2.25rem; margin-top: -1.5rem; }
}

.held-in { padding-block: clamp(4rem, 3rem + 9vw, 8.5rem); max-width: 44rem; }
.held-ruim { display: grid; align-items: center; min-height: clamp(30rem, 48vw, 46rem); }
/* Tablet en telefoon: eerst de hele foto, daaronder de tekst op marine. Over
   de foto heen zou de tekst het schip afdekken. */
@media (max-width: 63.99rem) {
  .held-ruim { display: block; min-height: 0; }
  .held-ruim .held-beeld { position: relative; inset: auto; width: 100%; height: auto; max-width: none; }
  .held-ruim::after { display: none; }
  .held-ruim .held-in { position: relative; padding-block: 0 2.75rem; margin-top: -1.75rem; }
}
/* Tablet en telefoon: de foto loopt onderaan over in het marineblauw van de
   tekst, net als op een breed scherm naar links. */
@media (max-width: 63.99rem) {
  .held-ruim .held-beeld {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, .55) 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, .55) 78%, transparent 100%);
  }
}
.paginakop-in { padding-block: clamp(3rem, 2.5rem + 4vw, 5.5rem); max-width: 46rem; }

.held h1, .paginakop h1 { color: var(--wit); }
.held .lead, .paginakop .lead { color: #d6e2f2; }

.overline {
  font-family: var(--kop); text-transform: uppercase; letter-spacing: .12em;
  font-size: .75rem; font-weight: 600; color: var(--marine-licht); margin-bottom: .5rem;
}
.overline-licht { color: var(--geel); }

/* ------------------------------------------------------------------ secties */

.band { padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem); }
.band-grijs { background: var(--vlak); }
.band-diep { background: var(--marine); color: #cfdcee; }
.band-diep h2, .band-diep h3 { color: var(--wit); }
.band-diep .overline { color: var(--geel); }
.band-cta { background: var(--marine-diep); color: #cfdcee; text-align: center; }
.band-cta h2 { color: var(--wit); }
.band-cta .lead { color: #a9bdd8; max-width: 44rem; margin-inline: auto; }
.band-cta .knoppen { justify-content: center; }
/* Op de donkere band moet de lijnknop wit zijn, anders valt hij weg. */
.band-cta .knop-lijn, .band-diep .knop-lijn, .held .knop-lijn, .paginakop .knop-lijn { color: var(--wit); border-color: rgba(255, 255, 255, .55); }
.band-cta .knop-lijn:hover, .band-diep .knop-lijn:hover, .held .knop-lijn:hover, .paginakop .knop-lijn:hover { background: var(--wit); color: var(--marine); border-color: var(--wit); }

.lead { font-size: 1.15rem; color: var(--grijs); }

.sectiekop { max-width: 46rem; margin-bottom: 2.25rem; }
.sectiekop h2::after {
  content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .75rem;
  background: var(--geel); border-radius: 2px;
}
.band-cta .sectiekop h2::after { margin-inline: auto; }

.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.25rem; font-size: 1.5rem; }
.prose .lead { margin-bottom: 1.25rem; }

.notitie { color: var(--grijs); font-size: .9375rem; margin-top: 1.5rem; }
.notitie-groot { font-size: 1rem; text-align: center; margin-top: 2rem; }

.kader {
  margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--radius);
  background: var(--vlak); border-left: 4px solid var(--geel);
}
.kader-titel { font-family: var(--kop); font-weight: 600; color: var(--marine); margin-bottom: .35rem; }
.kader p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- duo-blok */

.duo { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: center; }
/* Foto's naast tekst staan op hun eigen verhouding: geen uitsnede, dus ook
   geen afgesneden diagrammen of zeiltoppen. */
.duo-beeld img { width: 100%; height: auto; }
.duo-tekst .sectiekop { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ rasters */

.raster { display: grid; gap: 1.5rem; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Boven de omhulselbreedte het aantal kolommen vastzetten. Met auto-fit
   alleen ontstaan er losse restrijen (6 usp's in 4 kolommen, 7 zeilen in 5). */
@media (min-width: 62rem) {
  .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kaart {
  display: block; background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius-groot); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--schaduw);
  transition: border-color .15s ease, transform .15s ease;
}
a.kaart:hover { border-color: var(--marine); transform: translateY(-3px); }

.kaart-foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--vlak); }
.kaart-foto img { width: 100%; height: 100%; object-fit: cover; }
.kaart-tekst { display: block; padding: 1.25rem 1.4rem 1.5rem; }
.kaart-tekst h3 { margin-bottom: .35rem; }
.kaart-kort { display: block; color: var(--grijs); font-size: .9375rem; margin-bottom: .9rem; }
.kaart-meer { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--kop); font-weight: 500; font-size: .875rem; color: var(--marine); text-decoration: none; }
a.kaart:hover .kaart-meer { color: var(--marine-licht); }
.kaart-compact .kaart-tekst { padding: 1rem 1.1rem 1.2rem; }

.uitgelicht {
  display: grid; gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  margin-top: 1.5rem; background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius-groot); overflow: hidden; box-shadow: var(--schaduw);
}
.uitgelicht-beeld { min-height: 15rem; }
.uitgelicht-tekst { padding: 2rem 2.25rem; align-self: center; }
.uitgelicht-tekst h3 { font-size: 1.5rem; }
.uitgelicht-tekst p { color: var(--grijs); }

@media (max-width: 48rem) {
  .uitgelicht { grid-template-columns: 1fr; }
  .uitgelicht-beeld { min-height: 12rem; }
  .uitgelicht-tekst { padding: 1.5rem; }
}

.kaart-usp { padding: 1.6rem; }
.kaart-usp p { color: var(--grijs); font-size: .9375rem; margin-bottom: 0; }
.kaart-ic {
  display: inline-flex; padding: .65rem; border-radius: 12px;
  background: var(--vlak); color: var(--marine); margin-bottom: 1rem;
}
.kaart-ic .ic { width: 1.5rem; height: 1.5rem; }

.kaart-vestiging { padding: 1.75rem; }
.kaart-vestiging h2 { font-size: 1.375rem; }

.kaart-dealer { padding: 1.5rem; display: flex; flex-direction: column; }
.dealer-logo { display: block; margin-bottom: 1rem; }
.dealer-logo img { width: 150px; height: auto; }
.kaart-dealer h3 { margin-bottom: .6rem; }
.dealer-gegevens { display: grid; gap: .4rem; font-size: .9375rem; margin-bottom: 1rem; }
.dealer-gegevens li { display: flex; gap: .5rem; align-items: flex-start; }
.dealer-gegevens .ic { color: var(--marine-licht); margin-top: .25rem; }
.dealer-gegevens a { color: inherit; text-decoration: none; }
.dealer-gegevens a:hover { text-decoration: underline; }
.kaart-dealer .kaart-meer { margin-top: auto; }

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

.stappen { counter-reset: stap; display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.stappen li { counter-increment: stap; padding-top: 3rem; position: relative; }
.stappen li::before {
  content: counter(stap); position: absolute; top: 0; left: 0;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--geel); color: var(--marine-diep);
  font-family: var(--kop); font-weight: 700; font-size: .95rem;
}
.stappen p { margin-bottom: 0; font-size: .9375rem; }

/* -------------------------------------------------------------------- lijsten */

.varianten { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.varianten li {
  padding: .45rem 1rem; border-radius: 999px; background: var(--wit);
  border: 1px solid var(--lijn); font-family: var(--kop); font-weight: 500; font-size: .875rem; color: var(--marine);
}

.specs { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.spec-titel { font-family: var(--kop); font-weight: 600; color: var(--marine); text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; margin-bottom: .75rem; }
.spec-lijst { display: grid; gap: .5rem; }
.spec-lijst li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; }
.spec-lijst .ic { color: var(--marine-licht); margin-top: .3rem; }
.spec-lijst-breed { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .75rem 2rem; }

.merkenlijst { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.merkenlijst li { padding: .4rem .9rem; border-radius: 999px; background: var(--wit); border: 1px solid var(--lijn); font-size: .875rem; font-weight: 600; color: var(--marine); }

.galerij { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.galerij img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------------------------------------------------------------- formulieren */

.contact-in, .offerte-in { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }

.formulier {
  display: grid; gap: 1rem; padding: 1.75rem;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius-groot); box-shadow: var(--schaduw);
}
.formulier fieldset { border: 0; padding: 0; margin: 0; }
.formulier legend {
  font-family: var(--kop); font-weight: 600; color: var(--marine);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
  padding: 0 0 .75rem;
}
.veldenraster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.formulier label { display: grid; gap: .35rem; font-family: var(--kop); font-weight: 500; font-size: .875rem; color: var(--marine); }
.formulier input, .formulier select, .formulier textarea {
  font-family: var(--tekst); font-size: 1rem; font-weight: 400; color: var(--inkt);
  padding: .65rem .8rem; border: 1px solid var(--lijn); border-radius: 10px; background: var(--wit);
}
.formulier textarea { resize: vertical; }
.formulier button { justify-self: start; margin-top: .5rem; }

.contactgegevens { display: grid; gap: .75rem; margin-bottom: 1rem; }
.contactgegevens li { display: flex; gap: .7rem; align-items: flex-start; }
.contactgegevens .ic { color: var(--marine-licht); margin-top: .3rem; }
.contactgegevens a { color: inherit; text-decoration: none; }
.contactgegevens a:hover { text-decoration: underline; }

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

.voet { background: var(--marine-diep); color: #a9bdd8; padding-top: 3.5rem; font-size: .9375rem; }
.voet a { color: #d6e2f2; text-decoration: none; }
.voet a:hover { color: var(--wit); text-decoration: underline; }
.voet-in { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); padding-bottom: 2.5rem; }
.voet-merk img { width: 170px; height: auto; background: var(--wit); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .9rem; }
.voet-titel { font-family: var(--kop); font-weight: 600; color: var(--wit); margin-bottom: .7rem; }
.voet-kolom ul { display: grid; gap: .4rem; }
.voet-adres { line-height: 1.6; font-style: normal; }
.voet-onder {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .875rem;
}
.voet-onder p { margin: 0; }
.voet-onder a + a { margin-left: 1.25rem; }

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

/* ==========================================================================
   Moderniseringslaag
   ========================================================================== */

:root {
  --radius-xl: 28px;
  --schaduw-diep: 0 2px 4px rgba(22, 41, 74, .04), 0 18px 48px rgba(22, 41, 74, .12);
}

h1, h2, h3 { text-wrap: balance; }
.lead, .kaart-kort { text-wrap: pretty; }

/* Sticky header: onder de kop mag een anker niet wegvallen. */
:target, .conf-stap { scroll-margin-top: 7rem; }

/* De kop krijgt diepte zodra je scrolt. */
.kop { transition: box-shadow .2s ease, background-color .2s ease; }
.kop.geplakt {
  box-shadow: 0 1px 0 var(--lijn), 0 10px 30px rgba(22, 41, 74, .07);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(12px);
}

/* De twee aanvraagknoppen in de kop. De selector heeft .hoofdnav ervoor,
   anders wint de algemene padding van de menulinks (.hoofdnav a) en plakt de
   tekst tegen de rand van de knop. */
.hoofdnav .nav-accent > a, .hoofdnav .nav-configurator > a {
  min-height: 2.75rem; padding: .6rem 1.25rem; border-radius: 999px;
  font-weight: 600; white-space: nowrap; justify-content: center;
}
.hoofdnav .nav-accent { margin-left: .75rem; }
.hoofdnav .nav-configurator { margin-left: .35rem; }
.nav-accent > a { background: var(--geel); color: var(--marine-diep) !important; }
.nav-accent > a:hover { background: var(--geel-diep); }
.nav-configurator > a { background: var(--marine); color: var(--wit) !important; }
.nav-configurator > a:hover { background: var(--marine-diep); }
.nav-accent > a[aria-current] { box-shadow: inset 0 0 0 2px var(--marine); }
.nav-configurator > a[aria-current] { background: var(--marine-diep); box-shadow: inset 0 0 0 2px #a9bdd8; }
@media (max-width: 75rem) {
  .hoofdnav .nav-accent, .hoofdnav .nav-configurator { margin-top: .5rem; margin-left: 0; }
  .hoofdnav .nav-accent > a, .hoofdnav .nav-configurator > a { justify-content: center; }
}

/* Kaarten: beeld zoomt subtiel mee op hover. */
.kaart-foto img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
a.kaart:hover .kaart-foto img { transform: scale(1.05); }
a.kaart { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
a.kaart:hover { box-shadow: var(--schaduw-diep); }

/* --------------------------------------------------- vaste balk op mobiel */

.mobielbalk { display: none; }
@media (max-width: 48rem) {
  .mobielbalk {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    position: fixed; inset: auto 0 0 0; z-index: 90;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
    border-top: 1px solid var(--lijn);
  }
  .mobielbalk .knop { justify-content: center; padding-block: .7rem; }
  body { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Configurator
   ========================================================================== */

main.breed .omhulsel { width: min(100% - 2.5rem, 88rem); }

.conf-kop { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) 1.5rem; }
.conf-kop .lead { max-width: 46rem; }

.conf { padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.conf-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 68rem) {
  .conf-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  /* De kolom loopt mee, maar mag nooit hoger worden dan het scherm. */
  .conf-visueel {
    position: sticky; top: 7rem;
    max-height: calc(100vh - 7.5rem); overflow-y: auto; overscroll-behavior: contain;
    padding-right: .25rem;
  }
}

/* De tekening is een lijnplan op wit; een vlakke witte kaart met haarlijn
   past daarbij, geen gekleurde achtergrond. */
.conf-tekening {
  border: 1px solid var(--lijn); border-radius: var(--radius-xl); overflow: hidden;
  background: #fff; box-shadow: var(--schaduw); padding: 1rem .5rem;
}
/* Het zeilplan is staand. Hoogte begrenzen, anders duwt het de samenvatting
   uit beeld in de meelopende kolom. */
/* Vaste hoogte plus preserveAspectRatio: het staande plan wordt in de kolom
   gepast en gecentreerd, in plaats van hem uit te rekken. */
.conf-tekening .jacht { display: block; width: 100%; height: min(42vh, 470px); }

.conf-maatschakelaar {
  display: flex; align-items: center; gap: .6rem; margin-top: .9rem;
  font-size: .875rem; color: var(--grijs); cursor: pointer;
}
.conf-maatschakelaar input { width: 1.1rem; height: 1.1rem; accent-color: var(--marine); }

.conf-paneel {
  margin-top: 1.25rem; padding: 1.4rem 1.6rem;
  border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--wit);
}
.conf-paneel-kop {
  font-family: var(--kop); font-weight: 600; color: var(--marine);
  text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; margin-bottom: .9rem;
}
.conf-sam { margin: 0; display: grid; gap: .55rem; max-height: 12rem; overflow-y: auto; }
.conf-sam-regel { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; font-size: .9375rem; }
.conf-sam-regel dt { font-weight: 600; color: var(--marine); }
.conf-sam-regel dd { margin: 0; color: var(--inkt); }
.conf-sam-leeg { color: var(--grijs); margin: 0; font-size: .9375rem; }
@media (max-width: 30rem) { .conf-sam-regel { grid-template-columns: 1fr; gap: .1rem; } }

.conf-voortgang { margin-top: 1rem; }
.conf-voortgang-balk {
  height: 8px; border-radius: 99px; background: var(--lijn); overflow: hidden;
}
.conf-voortgang-balk span {
  display: block; height: 100%; width: var(--voortgang, 0%);
  background: linear-gradient(90deg, var(--marine), var(--marine-licht));
  border-radius: 99px; transition: width .3s ease;
}
.conf-voortgang p { margin: .45rem 0 0; font-size: .8125rem; color: var(--grijs); }

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

.conf-stappen { counter-reset: stap; display: grid; gap: 1.25rem; }
.conf-stap {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius-groot); padding: 1.6rem 1.75rem 1.9rem;
}
.conf-stap-kop { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.conf-stap-kop h2 { font-size: 1.25rem; margin: 0 0 .2rem; }
.conf-stap-kop p { margin: 0; color: var(--grijs); font-size: .9375rem; }
.conf-stap-nr {
  flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--marine); color: var(--wit);
  font-family: var(--kop); font-weight: 700; font-size: .95rem;
}

.conf-veldgroep + .conf-veldgroep { margin-top: 1.5rem; }
.conf-veldkop {
  font-family: var(--kop); font-weight: 600; color: var(--marine);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .7rem;
}
.conf-veldhulp { font-size: .875rem; color: var(--grijs); margin: -.4rem 0 .8rem; }

/* Doekgroepen waarvan het zeil niet gekozen is, dimmen we weg. */
.conf-actief .conf-veldgroep[data-nodig="nee"] { opacity: .45; }
.conf-oplichten { animation: oplichten 1.2s ease; }
@keyframes oplichten {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 237, 79, 0); }
  25% { box-shadow: 0 0 0 6px rgba(252, 237, 79, .85); }
}

/* ----------------------------------------------------------- keuzekaarten */

.keuzes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.keuzes-compact { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.keuze {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  padding: .8rem .95rem; border: 1.5px solid var(--lijn); border-radius: 14px;
  background: var(--wit); transition: border-color .15s ease, background-color .15s ease;
}
.keuze:hover { border-color: var(--marine-licht); }
.keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.keuze-vink {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 6px; margin-top: .1rem;
  border: 1.5px solid var(--lijn); background: var(--wit);
  display: grid; place-items: center; color: transparent;
}
.keuze-vink .ic { width: .9rem; height: .9rem; stroke-width: 3; }
.keuze:has(input[type="radio"]) .keuze-vink { border-radius: 50%; }
.keuze:has(input:checked) { border-color: var(--marine); background: #f5f8fc; }
.keuze:has(input:checked) .keuze-vink { background: var(--marine); border-color: var(--marine); color: var(--wit); }
.keuze:has(input:focus-visible) { outline: 3px solid var(--geel-diep); outline-offset: 2px; }
.keuze-tekst { display: grid; gap: .1rem; }
.keuze-kop { font-family: var(--kop); font-weight: 500; font-size: .9375rem; color: var(--inkt); }
.keuze-uitleg { font-size: .8125rem; color: var(--grijs); line-height: 1.45; }

/* --------------------------------------------------------------- staaltjes */

.stalen { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.staal {
  display: flex; align-items: center; gap: .85rem; cursor: pointer;
  padding: .6rem .8rem .6rem .6rem; border: 1.5px solid var(--lijn); border-radius: 14px;
  background: var(--wit); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.staal:hover { border-color: var(--marine-licht); transform: translateY(-1px); }
.staal input { position: absolute; opacity: 0; width: 0; height: 0; }
.staal-vlak {
  flex: none; width: 3.1rem; height: 3.1rem; border-radius: 10px;
  border: 1px solid rgba(22, 41, 74, .18);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
}
.staal-tekst { display: grid; gap: .12rem; min-width: 0; }
.staal-naam { font-family: var(--kop); font-weight: 500; font-size: .9rem; color: var(--inkt); }
.staal-korte { font-size: .78rem; color: var(--grijs); line-height: 1.4; }
.staal-merk {
  display: inline-block; vertical-align: 1px; margin-left: .25rem;
  background: var(--geel); color: var(--marine-diep); border-radius: 99px;
  padding: .05rem .45rem; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.staal:has(input:checked) {
  border-color: var(--marine); box-shadow: 0 0 0 3px rgba(34, 62, 112, .13);
}
.staal:has(input:focus-visible) { outline: 3px solid var(--geel-diep); outline-offset: 2px; }

/* -------------------------------------------------------------- formulier */

.conf-velden { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.conf-veld { display: grid; gap: .3rem; align-content: start; }
.conf-veld-breed { grid-column: 1 / -1; }
.conf-veld-label {
  font-family: var(--kop); font-weight: 500; font-size: .8125rem; color: var(--marine);
}
.conf-veld-label em { font-style: normal; color: var(--grijs); font-weight: 400; }
.conf-veld input, .conf-veld textarea {
  font-family: var(--tekst); font-size: 1rem; color: var(--inkt);
  padding: .6rem .75rem; border: 1.5px solid var(--lijn); border-radius: 10px; background: var(--wit);
}
.conf-veld input:focus, .conf-veld textarea:focus { border-color: var(--marine); }
.conf-veld-hulp { font-size: .75rem; color: var(--grijs); line-height: 1.4; }

.knop-groot { padding: .95rem 1.7rem; font-size: 1rem; margin-top: 1.5rem; }
.conf-slot { margin: .9rem 0 0; font-size: .8125rem; color: var(--grijs); }

@media (max-width: 68rem) {
  .conf-visueel { display: grid; }
  .conf-paneel { order: 3; }
  .conf-voortgang { order: 2; }
}

.conf-uitnodiging .duo-tekst p { color: #cfdcee; }
.conf-uitnodiging-beeld img { aspect-ratio: 16 / 11; }

/* Auteur-CSS wint van de UA-regel voor [hidden]; anders blijven gefilterde
   staaltjes en veldgroepen gewoon staan. */
.staal[hidden], .keuze[hidden], .conf-veldgroep[hidden] { display: none; }

/* Doek voor een zeil dat niet gekozen is, laten we weg. */
.conf-actief .conf-veldgroep[data-nodig="nee"] { display: none; }
.conf-doek-hint { color: var(--grijs); font-size: .9375rem; margin: 0; }
.conf-actief .conf-doek-hint[hidden] { display: none; }

/* ==========================================================================
   UX-laag: tabellen, faq-navigatie, dealers per regio, 404 en formuliermelding
   ========================================================================== */

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

/* ------------------------------------------------------- vergelijkingstabel */

.tabelhouder { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-groot); border: 1px solid var(--lijn); background: var(--wit); }
.vergelijk { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.vergelijk th, .vergelijk td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lijn); }
.vergelijk thead th {
  font-family: var(--kop); font-weight: 600; color: var(--marine);
  background: var(--wit); font-size: .9375rem;
}
.vergelijk thead th a { text-decoration: none; }
.vergelijk thead th a:hover { text-decoration: underline; }
.vergelijk tbody th {
  font-family: var(--kop); font-weight: 500; color: var(--grijs);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; background: var(--wit);
}
.vergelijk tbody tr:last-child th, .vergelijk tbody tr:last-child td { border-bottom: 0; }

/* Op de homepage onder de lijnkaarten. */
.vergelijk-blok { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.vergelijk-blok h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); margin-bottom: .5rem; }
.vergelijk-blok > p { color: var(--grijs); max-width: 46rem; margin-bottom: 1.25rem; }

/* Smaller dan 62rem past de tabel niet zonder zijwaarts scrollen: dan weg.
   De lijnkaarten erboven geven dezelfde informatie. */
@media (max-width: 61.99rem) { .vergelijk-band .tabelhouder, .vergelijk-blok { display: none; } }
.vergelijk-intro { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: center; }

/* --------------------------------------------------------- op deze pagina */

.band-smal-top { padding-block: 1.75rem 0; }
.opdezepagina {
  border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.25rem;
  background: var(--vlak); max-width: 46rem;
}
.opdezepagina-kop {
  font-family: var(--kop); font-weight: 600; color: var(--marine);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem;
}
.opdezepagina ul { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.opdezepagina a { font-size: .9375rem; }

/* ----------------------------------------------------------- dealers/regio */

.regionav { margin-bottom: 2rem; }
.regionav ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.regionav a {
  display: inline-block; padding: .45rem 1rem; border-radius: 999px;
  border: 1px solid var(--lijn); background: var(--wit);
  font-family: var(--kop); font-weight: 500; font-size: .875rem;
  color: var(--marine); text-decoration: none;
}
.regionav a:hover { border-color: var(--marine); }

.dealerregio + .dealerregio { margin-top: 2.75rem; }
.dealerregio > h2 {
  font-size: 1.35rem;
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--lijn); scroll-margin-top: 8rem;
}
.dealer-aantal {
  font-family: var(--tekst); font-size: .75rem; font-weight: 600; color: var(--grijs);
  background: var(--vlak); border-radius: 999px; padding: .1rem .55rem;
}

/* ------------------------------------------------------------------- 404 */

.band-fout { padding-block: clamp(3.5rem, 3rem + 5vw, 7rem); }
.band-fout .spec-lijst { margin: 1.75rem 0; }
.band-fout .spec-lijst .ic { color: var(--marine-licht); }
.band-fout .spec-lijst a { font-weight: 600; text-decoration: none; }
.band-fout .spec-lijst a:hover { text-decoration: underline; }

/* --------------------------------------------------------- formuliermelding */

.formmelding {
  margin: 1rem 0 0; padding: .85rem 1rem; border-radius: 10px;
  background: #eef6ec; border-left: 4px solid #4a8f3c;
  font-size: .9375rem; color: #24451d;
}
.formmelding:empty { display: none; }


/* ------------------------------------------------------------ uitklapvragen */

/* De antwoorden staan altijd in de HTML, ook als een vraag dicht is. Daardoor
   lezen zoekmachines en AI-crawlers ze gewoon mee. */
.faq { max-width: 50rem; display: grid; gap: .6rem; }
.faq details {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq details:hover { border-color: var(--marine-licht); }
.faq details[open] { border-color: var(--marine); box-shadow: var(--schaduw); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; padding: 1rem 1.25rem; list-style: none;
  font-family: var(--kop); font-weight: 500; font-size: 1.0625rem; color: var(--marine);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .62rem; height: .62rem; margin-right: .25rem;
  border-right: 2px solid var(--marine-licht); border-bottom: 2px solid var(--marine-licht);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 1.25rem 1.15rem; color: var(--grijs); }
.faq details > div p:last-child { margin-bottom: 0; }
.band-grijs .faq details { background: var(--wit); }

@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Pagina veelgestelde vragen: onderwerpen links, vragen rechts. */
.faq-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.faq-nav, .faq-groepen { min-width: 0; }
.faq-nav-kop {
  font-family: var(--kop); font-weight: 600; color: var(--marine);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem;
}
.faq-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.faq-nav ul a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .95rem;
  border: 1px solid var(--lijn); border-radius: 999px; background: var(--wit);
  font-family: var(--kop); font-size: .875rem; font-weight: 500; color: var(--marine); text-decoration: none;
}
.faq-nav ul a:hover { border-color: var(--marine); }
.faq-nav-aantal {
  font-size: .75rem; line-height: 1; padding: .25rem .45rem; border-radius: 999px;
  background: var(--vlak); color: var(--grijs);
}
.faq-nav-hulp { display: none; }
.faq-groep { scroll-margin-top: 7.5rem; }
.faq-groep + .faq-groep { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.faq-groep h2 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); margin-bottom: 1rem; }
.faq-groepen .faq { max-width: none; }
.faq-groepen .faq details > div { max-width: 52rem; }
@media (max-width: 47.99rem) {
  .faq-nav ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  .faq-nav ul::-webkit-scrollbar { display: none; }
  .faq-nav ul a { white-space: nowrap; }
}
@media (min-width: 62rem) {
  .faq-pagina { grid-template-columns: 15.5rem minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); align-items: start; }
  .faq-nav { position: sticky; top: 7rem; }
  .faq-nav ul { flex-direction: column; flex-wrap: nowrap; gap: .25rem; }
  .faq-nav ul a {
    display: flex; justify-content: space-between; min-height: 0; padding: .55rem .75rem;
    border: 0; border-radius: var(--radius); background: none; font-size: .9375rem;
  }
  .faq-nav ul a:hover { background: var(--vlak); }
  .faq-nav-hulp {
    display: block; margin-top: 1.5rem; padding: 1.1rem 1.15rem; border-radius: var(--radius);
    background: var(--vlak); font-size: .9375rem;
  }
  .faq-nav-hulp p { margin-bottom: .45rem; }
  .faq-nav-hulp p:first-child { font-family: var(--kop); font-weight: 600; color: var(--marine); }
  .faq-nav-hulp p:last-child { margin-bottom: 0; }
  .faq-nav-hulp a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
  .faq-nav-hulp .ic { width: 1.05rem; height: 1.05rem; color: var(--marine-licht); }
}

/* --------------------------------------------------------------- getalvelden */

.veldhulp { font-size: .875rem; color: var(--grijs); margin: -.25rem 0 .9rem; }
.veld-uitleg { display: block; font-size: .75rem; color: var(--grijs); line-height: 1.4; margin-top: .2rem; }
.veld-uitleg:empty { display: none; }
.veld-uitleg-let-op { color: #8a5a12; font-weight: 600; }
input[data-getal] { font-variant-numeric: tabular-nums; }
input[data-getal]:user-invalid { border-color: #c9182b; }

/* Meerkeuzegroepen in het offerteformulier lopen over de volle breedte. */
.veld-breed { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }
.veld-breed > legend { padding: 0 0 .6rem; }
.formulier fieldset + fieldset { margin-top: 1.5rem; }
.formulier .veldenraster + .veldenraster { margin-top: 1rem; }

/* `.formulier label { display: grid }` is specifieker dan `.keuze`, waardoor de
   keuzekaarten in het offerteformulier hun vinkje boven de tekst zetten. */
.formulier .keuze { display: flex; align-items: flex-start; gap: .7rem; }
.formulier .keuze-tekst { display: grid; gap: .1rem; }

/* ------------------------------------------------- stappenlijst configurator */

.conf-stappenlijst {
  margin-top: 1rem; padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--wit);
}
.conf-stappenlijst ol { counter-reset: cstap; display: grid; gap: .1rem; margin-top: .9rem; }
.conf-stappenlijst a {
  display: flex; align-items: center; gap: .6rem; padding: .28rem .5rem; border-radius: 8px;
  text-decoration: none; color: var(--grijs); font-size: .875rem;
}
.conf-stappenlijst a:hover { background: var(--vlak); color: var(--marine); }
.conf-stap-vink {
  flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: 1.5px solid var(--lijn); display: grid; place-items: center;
  color: transparent; background: var(--wit);
}
.conf-stap-vink .ic { width: .75rem; height: .75rem; stroke-width: 3.5; }
.conf-stappenlijst li.af .conf-stap-vink { background: var(--marine); border-color: var(--marine); color: var(--wit); }
.conf-stappenlijst li.af a { color: var(--inkt); }
.conf-stap-naam { line-height: 1.3; }

.conf-reset {
  margin-top: .9rem; background: none; border: 0; padding: .25rem 0;
  color: var(--grijs); font-size: .8125rem; text-decoration: underline; cursor: pointer;
}
.conf-reset:hover { color: var(--marine); }
.conf-hersteld {
  margin: 0 0 .9rem; padding: .55rem .8rem; border-radius: 10px;
  background: #eef6ec; border-left: 4px solid #4a8f3c; font-size: .8125rem; color: #24451d;
}

/* -------------------------------------------- controleblok en foutoverzicht */

.conf-controle {
  margin-top: 1.75rem; padding: 1.25rem 1.4rem;
  border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--vlak);
}
.conf-controle .conf-sam { max-height: none; }

.conf-fouten {
  margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: var(--radius);
  background: #fdeeee; border-left: 4px solid #c9182b; font-size: .9375rem;
}
.conf-fouten p { margin: 0 0 .5rem; }
.conf-fouten ul { display: grid; gap: .2rem; }
.conf-fouten button {
  background: none; border: 0; padding: 0; color: #8f1220;
  text-decoration: underline; cursor: pointer; font-size: .9375rem; text-align: left;
}

/* Op mobiel is de volledige stappenlijst te veel scrollwerk boven stap 1.
   Daar blijft alleen de voortgangsbalk staan. */
@media (max-width: 68rem) {
  .conf-stappenlijst { margin-top: .75rem; padding: .9rem 1.1rem; }
  .conf-stappenlijst ol { display: none; }
  .conf-reset { margin-top: .6rem; }
}


/* ---------------------------------------------- aanvullingen september 2026 */

/* Twee foto's naast elkaar in een duo-blok (vakmanschap op de homepage). */
.duo-dubbel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.duo-dubbel img { aspect-ratio: 4 / 3; }
.duo-dubbel img:first-child { margin-bottom: 2rem; }
.duo-beeld-staand img { aspect-ratio: auto; object-fit: contain; background: var(--wit); }
.duo-beeld-vrij img { aspect-ratio: auto; }

/* Klantervaringen */
.reviews { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: center; }
.reviews-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-groot); padding: 2rem; text-align: center; }
.reviews-sterren { display: flex; justify-content: center; gap: .15rem; color: var(--geel-diep); margin-bottom: .5rem; }
.reviews-sterren .ic { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.reviews-kop { font-family: var(--kop); font-weight: 600; color: var(--marine); font-size: 1.125rem; margin-bottom: 1rem; }
.reviews-kaart .knoppen { justify-content: center; margin-bottom: 0; }

/* Sociale kanalen */
.socials { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.socials li a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-weight: 600; }
.socials .ic { width: 1.15rem; height: 1.15rem; }
.socials-voet { margin-top: .25rem; }
.socials-voet a { color: #cfdcee; }
.socials-voet a:hover { color: var(--wit); }
.socials-inline { display: inline-flex; margin-left: .35rem; }
.socials-inline a { color: var(--marine); }
.contact-socials { text-align: center; margin-top: 1.5rem; }
.contact-socials .voet-titel { color: var(--marine); font-family: var(--kop); font-weight: 600; margin-bottom: .5rem; }
.contact-socials .socials { justify-content: center; }
.contact-socials .socials a { color: var(--marine); }

/* Bedrijfsfilm */
.film { border-radius: var(--radius-groot); overflow: hidden; background: var(--marine-diep); margin-bottom: 1rem; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.film-socials { color: var(--grijs); margin-bottom: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; }

/* Opbouw van het filmless membraan */
.opbouw { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.opbouw-figuur { margin: 0; }
.opbouw-figuur img { width: 100%; height: auto; background: var(--wit); }
.opbouw-figuur figcaption { font-size: .875rem; color: var(--grijs); margin-top: .5rem; }
.opbouw-lagen { counter-reset: laag; display: grid; gap: .6rem; padding: 0; list-style: none; }
.opbouw-lagen li { counter-increment: laag; display: flex; gap: .75rem; align-items: baseline; font-size: .9375rem; }
.opbouw-lagen li::before { content: counter(laag); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--marine); color: var(--wit); font-family: var(--kop); font-weight: 600; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.opbouw-kleuren img { width: 100%; height: auto; background: var(--wit); margin-bottom: .75rem; }
.opbouw-kleuren p { font-size: .9375rem; }

/* Doeksoorten */
.doek-intro { margin-bottom: 2rem; }
.doek-intro .spec-lijst { margin-top: 1rem; }
.doeklijst { margin-bottom: 1rem; }
.kaart-doek { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit; }
.kaart-doek .overline { margin-bottom: 0; }
.kaart-doek h3 { font-size: 1.125rem; }
.kaart-doek p { color: var(--grijs); font-size: .9375rem; margin-bottom: 0; }
.kaart-doek .kaart-meer { margin-top: auto; }
a.kaart-doek:hover h3 { color: var(--marine-licht); }
.doek-geschikt { display: flex; gap: .5rem; align-items: flex-start; color: var(--inkt) !important; }
.doek-geschikt .ic { flex: none; color: var(--marine-licht); margin-top: .2rem; }
.doek-downloads { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .25rem; }
.download { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--marine); text-decoration: none; border-bottom: 1px solid transparent; }
.download:hover { border-bottom-color: var(--marine); }
.download .ic { width: 1.1rem; height: 1.1rem; }
.doek-kleuren { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--lijn); }
.doekgroep .sectiekop { margin-bottom: 1rem; }

/* Twee volwaardige aanvraagroutes op de homepage. */
.routekeuze { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 40.01rem) and (max-width: 62rem) {
  .routekeuze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routekeuze .route-advies { grid-column: 1 / -1; }
}
.route { padding: 1.75rem; display: flex; flex-direction: column; }
.route .kaart-ic { align-self: flex-start; }
.route h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.route p { color: var(--grijs); margin-bottom: 1rem; }
.route .knoppen { margin: auto 0 0; }
.aanvraag-routes-noot { margin-top: 1.25rem; color: var(--grijs); }
.conf-toelichting { max-width: 46rem; color: var(--grijs); font-size: .9375rem; }
@media (max-width: 40rem) {
  .routekeuze { grid-template-columns: minmax(0, 1fr); }
  .route { padding: 1.25rem; }
  .aanvraag-acties, .paginakop .knoppen { align-items: stretch; flex-direction: column; }
  .aanvraag-acties .knop, .paginakop .knoppen .knop { justify-content: center; }
}
#formulier { scroll-margin-top: 7rem; }

/* Voet: beide vestigingen onder elkaar in één kolom. */
.voet-vestigingen { display: grid; gap: 1.5rem; align-content: start; }

/* Audit september 2026: gedeelde kolommen, toegankelijke bediening en intake. */
[hidden] { display: none !important; }
html { scroll-padding-top: 6rem; }
:focus-visible { outline: 3px solid var(--marine-licht); outline-offset: 3px; box-shadow: 0 0 0 5px white; }
.paginakop-in { max-width: var(--omhulsel); }
.paginakop-in h1, .paginakop-in .lead, .paginakop-in .kernpunten { max-width: min(46rem, 58vw); }
@media (max-width: 48rem) { .paginakop-in h1, .paginakop-in .lead, .paginakop-in .kernpunten { max-width: none; } }
.nav-groep { display: flex; align-items: center; }
.subknop { flex: none; width: 2rem; min-height: 44px; padding: .35rem; border: 0; border-radius: 6px; background: transparent; color: var(--marine); cursor: pointer; }
.nav-groep > a { padding-right: .15rem; }
.subknop:hover, .subknop[aria-expanded="true"] { background: var(--vlak); }
.subknop[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.heeft-sub:hover .submenu, .heeft-sub:focus-within .submenu { display: none; }
.heeft-sub.open .submenu, .heeft-sub.open:hover .submenu { display: block; }
.contact-in, .offerte-in { grid-template-columns: minmax(0, 1fr); }
.formulier, .formulier fieldset, .formulier input, .formulier select, .formulier textarea, .conf-veld, .conf-veld input { min-width: 0; max-width: 100%; }
.veldenraster { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.formulier { padding: clamp(1rem, 2.5vw, 2rem); }
.formulier .knop { white-space: normal; }
.aanvraag-uitleg h2 { margin-top: 0; }
.aanvraag-stappen { display: grid; gap: 1.2rem; counter-reset: aanvraag; margin-block: 1.5rem; }
.aanvraag-stappen li { position: relative; padding-left: 2.75rem; counter-increment: aanvraag; }
.aanvraag-stappen li::before { content: counter(aanvraag); position: absolute; left: 0; top: .1rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--vlak); color: var(--marine); font-weight: 600; }
.aanvraag-stappen strong, .aanvraag-stappen span { display: block; }
.aanvraag-stappen span { margin-top: .3rem; color: var(--grijs); }
.aanvraag-details { border: 1px solid var(--lijn); border-radius: 12px; padding: .75rem 1rem; }
.aanvraag-details summary { cursor: pointer; font-weight: 600; color: var(--marine); min-height: 32px; }
.aanvraag-details[open] summary { margin-bottom: 1rem; }
.aanvraag-details fieldset + fieldset { margin-top: 1rem; }
.formmelding { margin: 0; padding: 1rem; border-radius: 10px; background: var(--vlak); color: var(--marine-diep); }
.formmelding[data-status="fout"] { background: #fff2ef; color: #8b261c; border: 1px solid #b34130; }
.formmelding[data-status="gelukt"] { background: #edf6ef; color: #205433; border: 1px solid #477a58; }
button:disabled { cursor: default; opacity: .65; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #b34130; }
.topbalk-contact a { min-height: 36px; min-width: 36px; justify-content: center; }
@media (min-width: 62rem) {
  .offerte-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; }
  .contact-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoofdnav a { font-size: .875rem; padding-inline: .5rem; }
}
@media (max-width: 75rem) {
  .nav-groep > a { flex: 1; }
  .subknop { width: 44px; }
  .hoofdnav { max-height: calc(100dvh - 9rem); }
}
@media (max-width: 24rem) {
  .omhulsel { width: calc(100% - 2rem); }
  .knop { padding-inline: 1rem; }
  .mobielbalk { gap: .4rem; padding-inline: .5rem; }
  .mobielbalk .knop { font-size: .8rem; padding-inline: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.held-in { max-width: var(--omhulsel); }
.held-in h1, .held-in .lead { max-width: min(42rem, 58vw); }
/* De drie kernpunten passen op één regel zodra er ruimte is; dat leest
   rustiger dan twee plus één. */
.held-in .kernpunten { max-width: min(46rem, 62vw); }
@media (max-width: 63.99rem) { .held-in h1, .held-in .lead, .held-in .kernpunten { max-width: none; } }
@media (max-width: 62rem) {
  .offerte-in .aanvraag-uitleg { order: 2; }
}
@media (max-width: 48rem) {
  .mobielbalk .knop { font-size: .8125rem; padding: .65rem .65rem; justify-content: center; white-space: nowrap; }
}
.keuze:has(input:focus-visible), .staal:has(input:focus-visible) { outline: 3px solid var(--marine-licht); outline-offset: 3px; }
.formmelding[data-status="bezig"] { border-left: 4px solid var(--marine-licht); }
.veldenraster > label { align-self: end; }
.contactvelden .veldenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contactvelden label:last-child { grid-column: 1 / -1; }
@media (max-width: 40rem) { .contactvelden .veldenraster { grid-template-columns: minmax(0, 1fr); } }
/* Ligplaats direct onder het schip, niet ernaast (Hagoort, 26-10-2026). */
.schipvelden .veldenraster { grid-template-columns: minmax(0, 1fr); }
/* De scroll-offset staat op html; tel hem niet nogmaals bij ieder anker op. */
:target { scroll-margin-top: 0; }


/* ==========================================================================
   Blauwdruk-laag (UX- en SEO-blauwdruk, oktober 2026)
   ========================================================================== */

/* Drie kernpunten in de paginakop en de held */
.kernpunten { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 1.1rem 0 0; padding: 0; }
.kernpunten li { display: inline-flex; align-items: center; gap: .4rem; font-size: .9375rem; font-weight: 600; }
.paginakop .kernpunten li, .held .kernpunten li { color: #e4ecf7; }
.paginakop .kernpunten .ic, .held .kernpunten .ic { color: var(--geel); }
.terug { margin: 1rem 0 0; }
.terug a { display: inline-flex; align-items: center; gap: .4rem; color: #d6e2f2; text-decoration: none; font-size: .9375rem; }
.terug a:hover { color: var(--wit); text-decoration: underline; }

/* Tekst met kerngegevens ernaast (detailpagina's) */
.zij { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .zij { grid-template-columns: minmax(0, 1fr) 21rem; } }
.zij-tekst { max-width: 46rem; }
.kerngegevens {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-groot);
  padding: 1.5rem 1.6rem; position: sticky; top: 7rem;
}
.kerngegevens-kop { font-family: var(--kop); font-weight: 600; color: var(--marine); margin-bottom: .75rem; }
.kerngegevens dl { display: grid; gap: .7rem; margin: 0; }
.kerngegevens dt { font-family: var(--kop); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); }
.kerngegevens dd { margin: 0; font-size: .9375rem; }
.kerngegevens .knoppen { margin-top: 1.25rem; }
.kerngegevens .knoppen .knop { width: 100%; justify-content: center; }
@media (max-width: 62rem) { .kerngegevens { position: static; } }

/* Submenu: overzichtslink bovenaan; contact onderaan het mobiele menu */
.submenu-alles { border-bottom: 1px solid var(--lijn); margin-bottom: .25rem; padding-bottom: .25rem; }
.submenu-alles a { font-weight: 600; }
.nav-contact { display: none; }
@media (max-width: 75rem) {
  .nav-contact { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--lijn); }
  .nav-contact a { color: var(--marine); font-weight: 600; }
}
.hoofdnav .nav-groep > a[aria-current="true"] { color: var(--marine); }

/* Klantervaringen met echte cijfers */
.reviews-score { display: flex; align-items: baseline; justify-content: center; gap: .4rem; margin-bottom: .1rem; }
.reviews-getal { font-family: var(--kop); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--marine); letter-spacing: -.02em; }
.reviews-van { color: var(--grijs); }
.reviews-sterren { display: flex; justify-content: center; gap: .1rem; color: var(--geel-diep); margin-bottom: .35rem; }
.reviews-sterren .ic { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.reviews-bron { color: var(--grijs); font-size: .875rem; margin-top: .75rem; }

/* Voet: zes kolommen passen naast elkaar op een breed scherm */
.voet-in { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.voet-feiten { font-size: .875rem; line-height: 1.6; color: #a9bdd8; margin: .5rem 0; }
.voet-feiten a { color: inherit; }

/* Open of gesloten */
.nu-open { display: inline-block; font-size: .8125rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; background: #e3f3ea; color: #1f6b3f; margin-bottom: .75rem; }
.nu-open[data-status="dicht"] { background: var(--vlak); color: var(--grijs); }

/* Doeksoorten: fabrikanten als bron */
.merkregel { font-size: .9375rem; color: var(--grijs); margin-top: 1rem; }

/* Kennisbank */
.kaart-artikel .overline { font-size: .7rem; margin-bottom: .35rem; }
.artikel-kop { background: var(--vlak); border-bottom: 1px solid var(--lijn); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 2rem; }
.artikel-kop .omhulsel { max-width: 52rem; }
.artikel-kop .overline a { text-decoration: none; }
.artikel-kop h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem); }
.artikelmeta { color: var(--grijs); font-size: .9375rem; margin: 0; }
.artikel-in { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 68rem) {
  .artikel-in { grid-template-columns: 13rem minmax(0, 1fr) 19rem; }
  .inhoudsopgave, .artikel-zij { position: sticky; top: 7rem; }
}
.inhoudsopgave { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: .9rem 1rem; font-size: .9rem; }
.inhoudsopgave summary { font-family: var(--kop); font-weight: 600; color: var(--marine); cursor: pointer; list-style: none; }
.inhoudsopgave summary::-webkit-details-marker { display: none; }
.inhoudsopgave ol { margin-top: .6rem; display: grid; gap: .4rem; counter-reset: toc; }
.inhoudsopgave li { counter-increment: toc; display: flex; gap: .5rem; align-items: baseline; }
.inhoudsopgave li::before { content: counter(toc) "."; color: var(--grijs); font-size: .8rem; }
.inhoudsopgave a { color: var(--inkt); text-decoration: none; }
.inhoudsopgave a:hover { color: var(--marine); text-decoration: underline; }
.artikel-tekst h2 { margin-top: 2.25rem; font-size: 1.5rem; scroll-margin-top: 7rem; }
.artikel-tekst section:first-of-type h2 { margin-top: 1.25rem; }
.inhetkort { margin-bottom: 1.5rem; }
.artikel-bronnen { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.artikel-bronnen h2 { font-size: 1.125rem; margin-top: 0; }
.artikel-bronnen ul { display: grid; gap: .4rem; font-size: .9375rem; color: var(--grijs); }
.artikel-zij .kerngegevens { position: static; }

/* Kaarten in een rij: de link "Meer informatie" of "Lees het artikel" staat
   onderaan, op dezelfde hoogte in elke kaart, ook als de teksten verschillen. */
.kaart-beeld { display: flex; flex-direction: column; }
.kaart-beeld .kaart-tekst { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.kaart-beeld .kaart-meer { margin-top: auto; }
.kaart-beeld .kaart-kort { margin-bottom: 1rem; }

/* Twee grijze banden achter elkaar lezen als één vlak; zonder dit staat er
   tussen de twee een dubbele witruimte. */
.band-grijs + .band-grijs { padding-top: 0; }

/* Een losse foto bij een dienst staat in de tekstkolom, niet schermbreed. */
.zij-foto { margin: 2rem 0 0; }
.zij-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Eén doekgroep op een productlijn: brede kaart met foto, klikbaar geheel. */
.uitgelicht-link { text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.uitgelicht-link:hover { border-color: var(--marine); transform: translateY(-3px); box-shadow: var(--schaduw-diep); }
.uitgelicht-link .uitgelicht-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.uitgelicht-link .kaart-kort { margin-bottom: .75rem; }

/* Knoppen in een smal kader (kerngegevens naast de tekst): iets kleiner, zodat
   ook "Race Hightec & Filmless" op één regel past. */
.kerngegevens .knop { font-size: .875rem; padding-inline: 1.1rem; gap: .4rem; }

/* Doekkaarten: geschikt-voor en de datasheets onderaan, gelijk in elke rij. */
.kaart-doek { display: flex; flex-direction: column; }
.kaart-doek .doek-geschikt { margin-top: auto; }
.kaart-doek:not(:has(.doek-geschikt)) .doek-downloads { margin-top: auto; }

/* Foto of diagram in een artikel over de volle breedte van de tekstkolom. */
.artikel-tekst figure { margin: 1.75rem 0; }
.artikel-tekst figure img { width: 100%; height: auto; }

/* Makerslabel Webgroeiers in de voet, gelijk aan novocoatings.com: ingetogen
   pil met de groene vinkje-W; bij hover een groene rand en achtergrond. De
   regels hebben .voet ervoor, anders winnen de gewone voetlinks (.voet a) met
   hun eigen kleur en onderstreping. */
.voet-onder { align-items: center; }
.voet-onder-rechts { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
/* Voetlinks breken als geheel naar de volgende regel, niet midden in "Offerte aanvragen". */
.voet-onder-rechts > p { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.voet-onder-rechts > p a { white-space: nowrap; }
.voet-onder-rechts > p a + a { margin-left: 0; }
.voet .maker { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.75rem 0.4rem 0.65rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; color: #8FAEC2; text-decoration: none; font-size: 0.8rem; line-height: 1; transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 200ms ease; }
.voet .maker__label { color: inherit; }
.voet .maker__logo { display: inline-flex; align-items: flex-end; gap: 0; color: #C9DCE8; font-family: var(--kop); font-weight: 800; font-size: 0.92rem; line-height: 1; letter-spacing: -0.03em; transition: color 200ms ease; }
.voet .maker__logo svg { height: 1em; width: auto; margin: 0; fill: none; stroke: #34D399; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 200ms ease; }
.voet .maker:hover, .voet .maker:focus-visible { color: #7FD0F5; text-decoration: none; border-color: rgba(52,211,153,0.45); background: rgba(5,150,105,0.12); transform: translateY(-1px); }
.voet .maker:hover .maker__logo, .voet .maker:focus-visible .maker__logo { color: #fff; }
.voet .maker:hover .maker__logo svg, .voet .maker:focus-visible .maker__logo svg { stroke: #6EE7B7; }
.voet .maker:focus-visible { outline: 2px solid #34D399; outline-offset: 3px; }
@media (max-width: 860px) { .voet .maker { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .voet .maker:hover, .voet .maker:focus-visible { transform: none; } }

/* Afbeelding van een artikel: breed onder de kop, voor de tekstkolommen. */
.artikel-figuur { max-width: 52rem; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.artikel-figuur figure { margin: 0; }
/* Nooit groter dan het bestand zelf, en niet hoger dan 34rem: een staande
   tekening duwt de tekst anders een scherm naar beneden. */
.artikel-figuur img { display: block; width: auto; height: auto; max-width: 100%; max-height: 34rem; margin-inline: auto; }
.artikel-figuur figcaption { margin-top: .6rem; font-size: .875rem; color: var(--grijs); text-align: right; }
.artikel-figuur figcaption a { color: var(--marine); }
.figuur-groot { display: block; border-radius: var(--radius-groot); }
.figuur-groot:focus-visible { outline: 3px solid var(--marine-licht); outline-offset: 3px; }

/* ==========================================================================
   Kennisbank: zoeken en filteren bovenin, daaronder alle artikelen
   ========================================================================== */
.kennis-kop { background: var(--vlak); border-bottom: 1px solid var(--lijn); padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.25rem) clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
.kennis-kop h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem); margin-bottom: .6rem; }
.kennis-kop .lead { max-width: 40rem; margin: 0 0 1.5rem; }
.kennis-filter { display: grid; gap: 1rem; }
.kennis-zoek { position: relative; display: block; max-width: 34rem; }
.kennis-zoek .ic { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; color: var(--grijs); pointer-events: none; }
.kennis-zoek input {
  width: 100%; height: 3.25rem; padding: 0 1.25rem 0 3rem;
  border: 1px solid var(--lijn); border-radius: 999px; background: var(--wit);
  font: inherit; font-size: 1rem; color: var(--inkt); box-shadow: var(--schaduw);
}
.kennis-zoek input::placeholder { color: #7d8a99; }
.kennis-zoek input:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px rgba(52, 88, 154, .2); }
.kennis-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .55rem; height: 2.5rem; padding: 0 .6rem 0 1.05rem;
  border: 1px solid var(--lijn); border-radius: 999px; background: var(--wit); color: var(--marine);
  font-family: var(--kop); font-weight: 500; font-size: .9375rem; white-space: nowrap; cursor: pointer;
}
/* Pas animeren na de eerste filterstand, anders flitst een gedeelde link met ?thema= even. */
.kennis-filter.is-klaar .chip { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.chip:hover { border-color: var(--marine); }
.chip:focus-visible { outline: 3px solid var(--marine-licht); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--wit); }
.chip-aantal {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem;
  border-radius: 999px; background: var(--vlak); color: var(--marine); font-size: .75rem; font-weight: 600;
}
.chip[aria-pressed="true"] .chip-aantal { background: rgba(255, 255, 255, .18); color: var(--wit); }
/* Telefoon: de thema's in één rij die je opzij veegt, in plaats van vier rijen. */
@media (max-width: 40rem) {
  .kennis-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
  .kennis-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

.kennis-band { padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.kennis-status { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.kennis-status h2 { font-size: 1.25rem; margin: 0; }
.kennis-aantal { margin: 0; color: var(--grijs); font-size: .9375rem; text-align: right; }
.kennis-uitleg { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: -.25rem 0 1.25rem; color: var(--grijs); }
.kennis-uitleg[hidden] { display: none; }
.kennis-uitleg .kaart-meer { white-space: nowrap; }
.kennis-raster { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .kennis-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .kennis-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 76rem) { .kennis-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kaart-kennis { display: flex; flex-direction: column; }
.kaart-kennis .kaart-foto { aspect-ratio: 16 / 9; }
.kaart-kennis .kaart-tekst { flex: 1; padding: .95rem 1.05rem 1.15rem; }
.kaart-kennis .kaart-meta {
  display: block; margin-bottom: .4rem; font-family: var(--kop); font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--marine-licht);
}
.kaart-kennis h3 { font-size: 1.0625rem; line-height: 1.3; margin: 0 0 .4rem; }
.kaart-kennis .kaart-kort {
  margin: 0; font-size: .875rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Telefoon: compacte rijen met een kleine foto, zodat de hele lijst te overzien is. */
@media (max-width: 39.99rem) {
  .kennis-raster { gap: .75rem; }
  .kaart-kennis { flex-direction: row; align-items: stretch; }
  .kaart-kennis .kaart-foto { flex: none; width: 7.25rem; aspect-ratio: auto; }
  .kaart-kennis .kaart-tekst { padding: .8rem .9rem .85rem; }
  .kaart-kennis .kaart-meta { font-size: .625rem; margin-bottom: .3rem; }
  .kaart-kennis h3 { font-size: 1rem; margin-bottom: .3rem; }
  .kaart-kennis .kaart-kort { font-size: .8125rem; -webkit-line-clamp: 2; }
  a.kaart-kennis:hover { transform: none; }
}
.kennis-leeg { padding: 2.5rem 1rem 1rem; text-align: center; color: var(--grijs); }
.kennis-leeg .knop { margin-top: .5rem; }

/* ==========================================================================
   Gratis advies (voorlopig bellen; zie ADVIES in build.js)
   ========================================================================== */
.knop-advies .ic { width: 1.05em; height: 1.05em; }

/* Status naast een belknop op een donkere ondergrond */
.bereikbaar { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: #bfe5cd; }
.bereikbaar::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #3fbf74; box-shadow: 0 0 0 3px rgba(63, 191, 116, .25); }
.bereikbaar[data-status="dicht"] { color: #a9bdd8; font-weight: 500; }
.bereikbaar[data-status="dicht"]::before { background: #8fa3bd; box-shadow: none; }

/* Homepage: regel onder de knoppen in de hero */
.held-advies { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; margin: 1.15rem 0 0; color: #d6e2f2; font-size: .9375rem; }
.held-advies > .ic { color: var(--geel); width: 1.1rem; height: 1.1rem; margin-right: -.55rem; }
.held-advies a { color: var(--wit); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.held-advies a:hover { color: var(--geel); }

/* Adviesblok halverwege een pagina */
.advies {
  display: grid; gap: 1.25rem 2rem; align-items: center; grid-template-columns: auto minmax(0, 1fr) auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  background: var(--marine-diep); color: #d6e2f2; border-radius: var(--radius-groot);
}
.advies-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--geel); color: var(--marine-diep); }
.advies-ic .ic { width: 1.6rem; height: 1.6rem; }
.advies h2 { color: var(--wit); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); margin: 0 0 .35rem; }
.advies-tekst p { margin: 0; max-width: 34rem; }
.advies-acties { display: grid; gap: .7rem; justify-items: start; }
.advies-acties .knoppen { margin: 0; }
.advies .knop-licht .ic { width: 1.05em; height: 1.05em; }
@media (max-width: 62rem) {
  .advies { grid-template-columns: auto minmax(0, 1fr); }
  .advies-acties { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .advies { grid-template-columns: minmax(0, 1fr); }
  .advies-ic { width: 3rem; height: 3rem; }
}

/* Belregel onder kerngegevens, op de offertepagina en in de configurator */
.kern-advies, .aanvraag-advies, .conf-advies { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; font-size: .9375rem; }
.kern-advies > .ic, .aanvraag-advies > .ic, .conf-advies > .ic { flex: none; color: var(--marine); width: 1.1rem; height: 1.1rem; }
.kern-advies a, .aanvraag-advies a, .conf-advies a { color: var(--marine); font-weight: 600; }
.conf-advies { margin-top: .5rem; }

/* Bovenbalk: gratis advies vooraan */
.topbalk-advies strong { color: var(--wit); font-weight: 600; margin-right: .3rem; }

/* Kop op tablet en telefoon: belknop naast het menu */
.kop-advies { display: none; }
@media (max-width: 75rem) {
  .kop-advies {
    display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; padding: .55rem .95rem;
    border-radius: 999px; background: var(--geel); color: var(--marine-diep); text-decoration: none;
    font-family: var(--kop); font-weight: 600; font-size: .875rem; white-space: nowrap;
  }
  .kop-advies .ic { width: 1rem; height: 1rem; }
  .kop-advies:hover { background: var(--geel-diep); }
  /* De gap van de kop zorgt al voor ruimte; een extra marge duwt het menu naar een tweede regel. */
  .kop-advies + .menuknop { margin-left: 0; }
  .kop-advies, .menuknop { min-height: 2.5rem; }
}
@media (max-width: 24rem) {
  .menuknop-tekst { display: none; }
  .menuknop { min-width: 2.75rem; justify-content: center; padding: 0 .8rem; }
  .kop-advies { padding-inline: .8rem; }
}

/* Homepage op de telefoon: gratis advies als derde knop, met de status eronder */
.alleen-telefoon { display: none; }
@media (max-width: 40rem) {
  .alleen-telefoon { display: flex; }
  .aanvraag-acties .alleen-telefoon { display: inline-flex; justify-content: center; }
  .held-advies { display: none; }
  .held-status { justify-content: center; margin: .9rem 0 0; }
}

/* Route gratis advies: donker, zoals het adviesblok elders */
.route-advies { background: var(--marine-diep); border-color: var(--marine-diep); }
.route-advies h3 { color: var(--wit); }
.route-advies p { color: #c8d6ea; }
.route-advies strong { color: var(--wit); white-space: nowrap; }
.route-advies .kaart-ic { background: var(--geel); color: var(--marine-diep); }
/* De status staat naast het icoon, zodat de knop op dezelfde hoogte blijft als in de andere kaarten. */
.route-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.route-top .kaart-ic { margin-bottom: 0; }

/* Offerteformulier: kopje boven de uitklapbare extra's */
.aanvraag-extra-kop {
  margin: .5rem 0 -.25rem; font-family: var(--kop); font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--marine-licht);
}

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

/* Vier directe routes, elk een groot klikvlak. */
.contact-snel { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.contact-tegel {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.3rem;
  border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--wit);
  color: var(--inkt); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.contact-tegel:hover { border-color: var(--marine); box-shadow: var(--schaduw); transform: translateY(-2px); }
.contact-tegel:focus-visible { outline: 3px solid var(--marine-licht); outline-offset: 3px; }
.contact-tegel-ic {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--vlak); color: var(--marine);
}
.contact-tegel-ic .ic { width: 1.35rem; height: 1.35rem; }
.contact-tegel-bellen .contact-tegel-ic { background: var(--geel); }
.contact-tegel-whatsapp .contact-tegel-ic { background: #25d366; color: var(--wit); }
.contact-tegel-tekst { display: grid; gap: .15rem; min-width: 0; }
.contact-tegel-kop { font-family: var(--kop); font-weight: 600; font-size: 1.0625rem; color: var(--marine); }
.contact-tegel-waarde { font-weight: 600; overflow-wrap: anywhere; }
.contact-tegel-hulp { font-size: .875rem; color: var(--grijs); }
.contact-tegel .bereikbaar { color: #1f6b3f; font-weight: 600; }
.contact-tegel .bereikbaar[data-status="dicht"] { color: var(--grijs); font-weight: 500; }
.contact-tegel .bereikbaar[data-status="dicht"]::before { background: #9aa5b1; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .contact-tegel { transition: none; } .contact-tegel:hover { transform: none; } }

/* De twee zeilmakerijen: compact, met route en bellen direct bij de hand. */
.vestigingen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.vestiging {
  display: flex; flex-direction: column; padding: 1.4rem 1.5rem; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: var(--radius-groot);
}
.vestiging-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.vestiging-kop .overline { margin-bottom: .2rem; }
.vestiging-kop h3 { font-size: 1.25rem; margin: 0; }
.vestiging-kop .nu-open { margin: .1rem 0 0; white-space: nowrap; }
.vestiging-gegevens { display: grid; gap: .45rem; font-size: .9375rem; }
.vestiging-gegevens li { display: flex; gap: .6rem; align-items: flex-start; }
.vestiging-gegevens .ic { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .2rem; color: var(--marine-licht); }
.vestiging-gegevens a { color: inherit; text-decoration: none; }
.vestiging-gegevens a:hover { text-decoration: underline; }
.vestiging-notitie { font-size: .875rem; color: var(--grijs); margin: .75rem 0 0; }
.vestiging-acties { display: flex; flex-wrap: wrap; gap: .6rem; margin: auto 0 0; padding-top: 1.1rem; }
.knop-klein { min-height: 44px; padding: .55rem 1.1rem; font-size: .9375rem; gap: .5rem; }
.knop-klein .ic { width: 1.05rem; height: 1.05rem; }
.vestigingen-meer { margin: 1.5rem 0 0; color: var(--grijs); }
.contact-in .contact-socials { text-align: left; margin-top: 2rem; }
.contact-in .contact-socials .socials { justify-content: flex-start; }
@media (max-width: 30rem) {
  .contact-snel { gap: .65rem; }
  .contact-tegel { padding: .9rem 1rem; gap: .85rem; align-items: center; }
  .contact-tegel-ic { width: 2.6rem; height: 2.6rem; }
  .contact-tegel-kop { font-size: 1rem; }
  .vestiging { padding: 1.2rem 1.15rem; }
  .vestiging-kop { flex-direction: column; gap: .5rem; }
  .vestiging-kop .nu-open { order: 2; }
}

/* ------------------------------------------ configurator op een smal scherm */

/* Maten twee aan twee: P en E (grootzeil), I en J (voordriehoek). Het
   oppervlak per zeil staat in hetzelfde raster. */
.conf-velden-maten { margin-top: 1rem; }
.conf-velden-maten, .conf-velden[data-oppervlakten] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 26rem) { .conf-velden-maten, .conf-velden[data-oppervlakten] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.conf-velden + .conf-veldgroep { margin-top: 1.75rem; }

/* Snit van een laminaat, onder de staaltjes. */
.conf-snit { border: 0; padding: 0; margin: 1.25rem 0 0; min-width: 0; }
.conf-snit legend { padding: 0; }

/* Knop naar de vergelijking van de vier lijnen. */
.conf-vergelijk-link { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 1rem 0 0; }
.conf-stap-inhoud > .conf-vergelijk-link:first-child { margin: -.4rem 0 1.1rem; }
.conf-vergelijk-link button {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--kop); font-weight: 500; font-size: .9375rem; color: var(--marine);
}
.conf-vergelijk-link button span { text-decoration: underline; text-decoration-color: var(--lijn); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.conf-vergelijk-link button:hover span { text-decoration-color: var(--marine); }
.conf-vergelijk-link button:focus-visible { outline: 3px solid var(--geel-diep); outline-offset: 3px; border-radius: 4px; }
.conf-vergelijk-link .ic { width: 1.2rem; height: 1.2rem; color: var(--marine-licht); }
.conf-vergelijk-status { font-size: .875rem; color: var(--grijs); }
.conf-vergelijk-status:empty { display: none; }

/* Het venster met de vergelijking. Smaller dan 62rem kaarten in plaats van de tabel. */
.conf-vergelijk {
  width: min(72rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0;
  border: 0; border-radius: var(--radius-groot); background: var(--wit); color: var(--inkt);
  box-shadow: var(--schaduw-diep); overflow: auto; overscroll-behavior: contain;
}
.conf-vergelijk::backdrop { background: rgba(22, 41, 74, .55); }
html:has(.conf-vergelijk[open]) { overflow: hidden; }
.conf-vergelijk-in { padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); }
.conf-vergelijk-kop {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) 0 .75rem; background: var(--wit);
}
.conf-vergelijk-kop h2 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.conf-vergelijk-sluit {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--lijn); background: var(--wit); color: var(--marine);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.conf-vergelijk-sluit:hover { border-color: var(--marine); }
.conf-vergelijk-intro { color: var(--grijs); max-width: 46rem; margin: 0 0 1.25rem; }
.conf-vergelijk .knop .ic { display: none; }
.conf-vergelijk .knop.is-gekozen { background: var(--marine); border-color: var(--marine); color: var(--wit); opacity: 1; }
.conf-vergelijk .knop.is-gekozen .ic { display: block; }
.conf-vergelijk .tabelhouder { display: none; }
.vergelijk-kaarten { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.vergelijk-kaart { display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem 1.2rem 1.25rem; border: 1px solid var(--lijn); border-radius: var(--radius); }
.vergelijk-kaart h3 { margin: 0; font-size: 1.0625rem; color: var(--marine); }
.vergelijk-kaart dl { display: grid; gap: .6rem; margin: 0; }
.vergelijk-kaart dt { font-family: var(--kop); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); }
.vergelijk-kaart dd { margin: .1rem 0 0; font-size: .9375rem; }
.vergelijk-kaart .knop { align-self: flex-start; margin-top: auto; }
@media (min-width: 62rem) {
  .conf-vergelijk .tabelhouder { display: block; }
  .conf-vergelijk .vergelijk-kaarten { display: none; }
}

.conf-tekening { position: relative; }
.conf-tekening-open, .conf-tekening-sluit { display: none; }
html.conf-groot-open { overflow: hidden; }

@media (max-width: 67.99rem) {
  /* De grote tekening bovenaan hoeft niet het hele scherm te vullen. */
  .conf-tekening .jacht { height: min(46vh, 380px); }
  /* Meelopend rechtsonder, boven de balk met de twee knoppen. */
  .conf-tekening.is-mini {
    position: fixed; z-index: 90; right: .75rem; bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
    width: 6.75rem; padding: .35rem .2rem 1.75rem; border-radius: 18px;
    box-shadow: var(--schaduw-diep); animation: conf-mini-in .2s ease-out;
  }
  .conf-tekening.is-mini .jacht { height: 8.75rem; }
  .conf-tekening.is-mini .conf-tekening-open {
    display: flex; position: absolute; inset: 0; align-items: flex-end; justify-content: center; gap: .3rem;
    padding: 0 0 .45rem; border: 0; border-radius: inherit; background: none; cursor: pointer;
    font: 600 .75rem/1 var(--kop); color: var(--marine);
  }
  .conf-tekening.is-mini .conf-tekening-open .ic { width: .85rem; height: .85rem; }
  .conf-tekening.is-mini .conf-tekening-open:focus-visible { outline: 3px solid var(--marine-licht); outline-offset: 2px; }
  .conf-tekening.is-bijgewerkt { animation: conf-mini-puls .7s ease-out; }
  .conf-tekening.is-mini.is-weg { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
  /* Groot: de hele tekening over het scherm. */
  .conf-tekening.is-groot {
    position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
    padding: 3.75rem 1rem 1.5rem; border: 0; border-radius: 0; background: rgba(255, 255, 255, .98);
  }
  .conf-tekening.is-groot .jacht { width: 100%; height: min(84vh, 820px); }
  .conf-tekening.is-groot .conf-tekening-sluit {
    display: grid; place-items: center; position: absolute; top: .75rem; right: .75rem;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lijn); background: var(--wit);
    font-size: 1.6rem; line-height: 1; color: var(--marine); cursor: pointer;
  }
  /* Staaltjes: de omschrijving op twee regels, anders wordt de doekstap een lange lijst. */
  .staal-korte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@keyframes conf-mini-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes conf-mini-puls {
  0% { box-shadow: 0 0 0 0 rgba(242, 220, 22, .95), 0 18px 48px rgba(22, 41, 74, .12); }
  100% { box-shadow: 0 0 0 16px rgba(242, 220, 22, 0), 0 18px 48px rgba(22, 41, 74, .12); }
}
@media (prefers-reduced-motion: reduce) { .conf-tekening.is-mini, .conf-tekening.is-bijgewerkt { animation: none; } }

/* ------------------------------------- verdieping in de hoofdkolom */

.tekst-punten { display: grid; gap: .55rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.tekst-punten li { display: flex; gap: .6rem; align-items: flex-start; }
.tekst-punten .ic { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .32rem; color: var(--marine-licht); }

/* ------------------------------------------------ filmless membraan */

.filmless-intro { max-width: 52rem; }
.lagen { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: start; }
@media (min-width: 62rem) {
  .lagen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .lagen-figuur { position: sticky; top: 7rem; }
}
.lagen-figuur { margin: 0; }
.lagen-figuur figcaption { font-size: .875rem; color: var(--grijs); margin-top: .6rem; }
.lagen-kop { font-size: 1.25rem; margin: 0 0 1rem; }
.lagen-lijst { counter-reset: laag; display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.lagen-lijst li {
  counter-increment: laag; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .9rem; row-gap: .15rem;
  padding: .95rem 1.1rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
}
.lagen-lijst li::before {
  content: counter(laag); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--marine); color: var(--wit); font: 600 .875rem/1 var(--kop);
}
.lagen-naam { font-family: var(--kop); font-weight: 600; color: var(--marine); }
.lagen-uitleg { font-size: .9375rem; color: var(--grijs); line-height: 1.55; }

.voordelen { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .voordelen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voordeel { padding: 1.5rem 1.6rem; border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--wit); }
.voordeel-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--geel); color: var(--marine); margin-bottom: 1rem; }
.voordeel-ic .ic { width: 1.4rem; height: 1.4rem; }
.voordeel h3 { font-size: 1.1875rem; margin-bottom: .5rem; }
.voordeel p { color: var(--grijs); margin: 0; }

.filmless-keuze { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .filmless-keuze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reeksen { display: grid; gap: .75rem; margin: 0 0 1.25rem; }
.reeks { padding: 1rem 1.15rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); }
.reeks dt { font-family: var(--kop); font-weight: 600; color: var(--marine); margin-bottom: .25rem; }
.reeks dd { margin: 0; font-size: .9375rem; color: var(--grijs); line-height: 1.55; }
.kleurenkaart { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin: 1.25rem 0; align-items: start; }
@media (min-width: 36rem) { .kleurenkaart { grid-template-columns: 11rem minmax(0, 1fr); } }
.kleurenlijst { display: grid; gap: .8rem; padding: 0; margin: 0; list-style: none; font-size: .9375rem; color: var(--grijs); line-height: 1.5; }
.kleurenlijst li { display: flex; gap: .65rem; align-items: flex-start; }
.kleurenlijst strong { color: var(--marine); font-family: var(--kop); font-weight: 600; margin-right: .2rem; }
.kleur-staal { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; margin-top: .15rem; border: 1px solid rgba(0, 0, 0, .14); }
.kleur-white { background: #f2f3f1; }
.kleur-shark { background: #b7bcc0; }
.kleur-dark { background: #5c6268; }
.kleur-black { background: #1d1f22; }

/* ------------------------------------------------------------ dealers */

.dealers-intro { max-width: 46rem; margin-bottom: 2rem; }
.dealers-opzet { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) {
  .dealers-opzet { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .dealers-kaart { position: sticky; top: 7rem; }
}
.dealerkaart { position: relative; background: #e9f0f7; border-radius: var(--radius-xl); padding: clamp(.75rem, .5rem + 1.5vw, 1.5rem); }
.dealerkaart-svg { display: block; width: 100%; height: auto; max-height: min(72vh, 680px); margin-inline: auto; overflow: visible; }
.kaart-provincies path { fill: #fff; stroke: #c9d4e0; stroke-width: 1.2; stroke-linejoin: round; }
.kaart-land { fill: none; stroke: #aebccc; stroke-width: 1; stroke-linejoin: round; pointer-events: none; }
.kaart-punt { cursor: pointer; outline: none; }
.kaart-raak { fill: transparent; }
.kaart-stip, .kaart-puls { transform-box: fill-box; transform-origin: center; }
.kaart-stip { fill: var(--geel); stroke: var(--marine); stroke-width: 3; transition: transform .15s ease; }
.kaart-punt-eigen .kaart-stip { fill: var(--marine); stroke: #fff; stroke-width: 3.5; }
.kaart-puls { fill: var(--geel-diep); opacity: 0; animation: kaart-puls 2.6s ease-out infinite; }
.kaart-punt-eigen .kaart-puls { fill: var(--marine-licht); }
.kaart-punt:nth-child(3n + 2) .kaart-puls { animation-delay: .85s; }
.kaart-punt:nth-child(3n) .kaart-puls { animation-delay: 1.7s; }
.kaart-punt:hover .kaart-stip, .kaart-punt:focus-visible .kaart-stip,
.kaart-punt.is-actief .kaart-stip, .kaart-punt.is-licht .kaart-stip { transform: scale(1.4); }
.kaart-punt:focus-visible .kaart-stip { stroke: var(--marine-diep); stroke-width: 4; }
@keyframes kaart-puls {
  0% { opacity: .6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) { .kaart-puls { animation: none; } .kaart-stip { transition: none; } }

.kaart-popup {
  position: absolute; z-index: 5; width: max-content; max-width: min(18rem, calc(100% - 1rem));
  padding: .8rem .95rem; background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-diep); font-size: .875rem; line-height: 1.45;
}
.kaart-popup::after {
  content: ""; position: absolute; left: calc(var(--pijl, 50%) - 7px); bottom: -8px; width: 14px; height: 14px;
  background: #fff; border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); transform: rotate(45deg);
}
.kaart-popup.is-onder::after { bottom: auto; top: -8px; transform: rotate(225deg); }
.kaart-popup-naam { font-family: var(--kop); font-weight: 600; color: var(--marine); margin: 0 0 .15rem; }
.kaart-popup-adres { color: var(--grijs); margin: 0 0 .45rem; }
.kaart-popup-acties { display: flex; gap: 1rem; margin: 0; }
.kaart-popup-acties a { font-weight: 600; }
.kaart-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--grijs); }
.kaart-legenda li { display: inline-flex; align-items: center; gap: .45rem; }
.legenda-stip { width: .85rem; height: .85rem; border-radius: 50%; background: var(--geel); border: 2px solid var(--marine); }
.legenda-eigen { background: var(--marine); border-color: #fff; box-shadow: 0 0 0 1px var(--marine); }

.dealers-lijst .regionav { margin-bottom: 1.5rem; }
.dealerregio + .dealerregio { margin-top: 2rem; }
.dealerregio h2 { font-size: 1.25rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; scroll-margin-top: 7.5rem; }
.dealers { display: grid; gap: .75rem; }
.dealer {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center;
  padding: .9rem 1.1rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-groot);
  scroll-margin-top: 7rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.dealer:hover { border-color: var(--marine-licht); box-shadow: var(--schaduw); }
.dealer:target { border-color: var(--marine); box-shadow: 0 0 0 3px rgba(242, 220, 22, .65); }
/* Logo zonder vlak erachter, op zijn eigen verhouding binnen een vast vak. */
.dealer .dealer-logo { margin: 0; display: flex; align-items: center; justify-content: center; height: 4.25rem; }
.dealer .dealer-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.dealer h3 { font-size: 1.0625rem; margin: 0 0 .2rem; }
.dealer-adres { display: flex; gap: .4rem; align-items: flex-start; margin: 0 0 .6rem; font-size: .875rem; color: var(--grijs); }
.dealer-adres .ic { flex: none; width: .95rem; height: .95rem; margin-top: .2rem; color: var(--marine-licht); }
.dealer-acties { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
.dealer-acties .knop-klein { min-height: 44px; padding: .4rem 1rem; font-size: .8125rem; }
@media (max-width: 30rem) {
  .dealer { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .dealer .dealer-logo { justify-content: flex-start; height: 3.5rem; }
}

/* ---------------------------------------------------------- video (YouTube) */

.yt { margin: 1.75rem 0; }
.duo-beeld .yt, .duo-tekst .yt { margin: 1.25rem 0 0; }
.yt-gevel, .yt-speler {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius-groot); overflow: hidden; background: var(--marine-diep);
}
.yt-gevel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.yt-gevel:hover img { transform: scale(1.02); }
.yt-gevel:focus-visible { outline: 3px solid var(--geel-diep); outline-offset: 3px; }
.yt-speel {
  position: absolute; left: 1rem; bottom: 1rem; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--geel); color: var(--marine);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); transition: transform .15s ease;
}
.yt-speel svg { width: 1.45rem; height: 1.45rem; fill: currentColor; margin-left: .15rem; }
.yt-gevel:hover .yt-speel { transform: scale(1.08); }
.yt-duur {
  position: absolute; right: .75rem; bottom: .75rem; padding: .2rem .5rem; border-radius: 6px;
  background: rgba(14, 24, 42, .82); color: #fff; font: 600 .75rem/1.25 var(--kop);
}
.yt figcaption { margin-top: .65rem; font-size: .875rem; line-height: 1.5; color: var(--grijs); }
.yt-titel { font-family: var(--kop); font-weight: 600; color: var(--marine); margin-right: .25rem; }
.yt-noot { display: block; font-size: .75rem; margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .yt-gevel img, .yt-speel { transition: none; } }

/* --------------------------------------------------- auteurs (E-E-A-T) */

/* Portret, of zolang er geen foto is: de initialen in een cirkel. */
.avatar {
  flex: none; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden;
  background: var(--marine); color: var(--geel); font-family: var(--kop); font-weight: 700; letter-spacing: .02em;
  object-fit: cover;
}
.avatar-klein { width: 2rem; height: 2rem; font-size: .75rem; }
.avatar-middel { width: 4.5rem; height: 4.5rem; font-size: 1.35rem; }
.avatar-groot { width: clamp(7rem, 5rem + 6vw, 10rem); height: clamp(7rem, 5rem + 6vw, 10rem); font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); box-shadow: 0 0 0 6px var(--wit), var(--schaduw); }

.artikelmeta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.artikelmeta a { color: inherit; font-weight: 600; }

.profiel-kop { background: var(--vlak); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-bottom: 1px solid var(--lijn); }
.profiel-kop-in { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); align-items: center; }
@media (min-width: 48rem) { .profiel-kop-in { grid-template-columns: auto minmax(0, 1fr); } }
.profiel-kop h1 { margin-bottom: .5rem; }
.profiel-kop .lead { max-width: 46rem; }
.profiel-kop .kernpunten li { color: var(--marine); }
.profiel-kop .kernpunten .ic { color: var(--marine-licht); }

.auteur-kaart {
  display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 2.5rem; padding: 1.3rem 1.4rem;
  border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--vlak);
}
.auteur-kaart p { margin: 0 0 .35rem; }
.auteur-kaart-kop { font-family: var(--kop); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); }
.auteur-kaart-naam { font-family: var(--kop); font-weight: 600; color: var(--marine); }
.auteur-kaart-naam a { color: inherit; }

.eigenaar {
  display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 2rem; padding: 1.3rem 1.4rem;
  border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--vlak);
}
.eigenaar .overline { margin-bottom: .15rem; }
.eigenaar h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.eigenaar p { margin-bottom: .4rem; }

.media-lijst { display: grid; gap: .6rem; max-width: 52rem; padding: 0; margin: 0; list-style: none; }
.media-lijst li { display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1.1rem; border: 1px solid var(--lijn); border-radius: var(--radius); }
.media-lijst a { font-family: var(--kop); font-weight: 600; }
.media-lijst span { font-size: .875rem; color: var(--grijs); }
@media (max-width: 30rem) { .auteur-kaart, .eigenaar { flex-direction: column; } }

/* Kennisbank: Hagoort in beeld, alle video's van het kanaal. */
.video-raster { display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); grid-template-columns: minmax(0, 1fr); margin-top: .5rem; }
@media (min-width: 48rem) { .video-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video-raster .yt { margin: 0; }
.video-raster-noot { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center; margin: 1.75rem 0 0; font-size: .875rem; color: var(--grijs); }
@media (max-width: 30rem) {
  .yt-speel { width: 2.75rem; height: 2.75rem; left: .7rem; bottom: .7rem; }
  .yt-speel svg { width: 1.15rem; height: 1.15rem; }
}

/* Eigenaren van Hagoort Sails, in het eigenaarsblok op Over ons. */
.eigenaren-kop { font-family: var(--kop); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); margin: 1.1rem 0 .5rem; }
.eigenaren { display: grid; gap: .45rem; padding: 0; margin: 0; list-style: none; font-size: .9375rem; }
.eigenaren li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.eigenaren-jaar { font-family: var(--kop); font-weight: 600; font-size: .8125rem; color: var(--marine-licht); }
.eigenaren strong { color: var(--marine); }
@media (max-width: 30rem) { .eigenaren li { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }