@charset "utf-8";

/* ============================================================
   saVoam B2B — demo 3 "Mix"
   Eén stylesheet voor alle pagina's.
   Mix van demo 1 en demo 2, volgens de feedback van 1 september.
   Opbouw: 1 lettertype · 2 tokens · 3 basis · 4 header · 5 knoppen
           6 secties · 7 hero · 8 kaarten · 9 pagina-onderdelen
           10 formulier · 11 footer · 12 beweging · 13 responsive
   ============================================================ */

/* ---------- 1. Lettertype ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('font/archivo.woff2') format('woff2-variations'),
       url('font/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  --teal:        #009B95;
  --teal-diep:   #00726E;
  --teal-donker: #00514F;
  --mint:        #5FE3C8;
  --ink:         #14181A;
  --ink-2:       #1E2427;
  --ink-3:       #2C3438;
  --wit:         #FFFFFF;
  --room:        #F4F6F5;
  --room-2:      #E8ECEB;
  --grijs:       #5C6A6E;
  --lijn:        #D8DFDD;

  --font: 'Archivo', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1240px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --sectie: clamp(4rem, 9vw, 7.5rem);
  --radius: 18px;
  --radius-s: 10px;

  /* Lijnkleuren — afgeleid van het beeldmateriaal van saVoam.
     Essential = teal, Professional = blauw, Tubeless = groen.  */
  --l-essential:       #009B95;
  --l-essential-diep:  #00726E;
  --l-essential-zacht: #E4F3F2;
  --l-essential-rand:  #B6DFDC;

  --l-professional:       #1A4C7E;
  --l-professional-diep:  #123A63;
  --l-professional-zacht: #E8EFF6;
  --l-professional-rand:  #BCD2E6;

  --l-tubeless:       #3E8E4A;
  --l-tubeless-diep:  #2E6E38;
  --l-tubeless-zacht: #EAF4EA;
  --l-tubeless-rand:  #C2E0C6;

  /* Zachte, warme vlakken in plaats van zwart (feedback: geen zwarte vlakken) */
  --diep:      #EDF3F2;
  --diep-rand: #D3E1DF;

  --schaduw: 0 18px 44px rgba(20, 24, 26, .10);
  --schaduw-diep: 0 28px 70px rgba(20, 24, 26, .22);

  --duur: .5s;
  --soepel: cubic-bezier(.22, .68, .36, 1);
}

/* ---------- 3. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip (niet hidden) zodat position:sticky blijft werken */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal-diep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--teal-donker); }

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

h1, h2, h3 {
  line-height: 1.08;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.02em;
  /* Nederlandse samenstellingen als "Hygiëneoplossingen" zijn langer dan
     320 px en duwen de pagina anders buiten beeld. */
  overflow-wrap: break-word;
  hyphens: auto;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto;
}
.smal { max-width: 780px; }
.middenuit { text-align: center; margin-inline: auto; }

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

/* Koppen */
.h1 {
  font-size: clamp(1.85rem, 1rem + 4.4vw, 4.6rem);
  text-transform: uppercase;
  letter-spacing: -.03em;
  margin-bottom: .35em;
}
.h2 {
  font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: -.025em;
}
.h2--licht { color: var(--wit); }

.oogje {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-diep);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.oogje::before {
  content: '';
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.oogje--licht { color: var(--mint); }

.lead { font-size: clamp(1.06rem, 1rem + .45vw, 1.3rem); color: var(--ink-3); }
.lead--licht { color: rgba(255, 255, 255, .82); }

.uitspraak {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--teal-diep);
  border-left: 4px solid var(--teal);
  padding-left: 1.1rem;
  margin: 1.6rem 0 0;
}
.uitspraak--licht { color: var(--mint); border-color: var(--mint); }

.kruimels {
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 1.1rem;
}
/* inline-block + padding: anders is het aanraakvlak 14 px hoog en
   zakt het onder de 24 px uit WCAG 2.5.8 */
.kruimels a { color: inherit; display: inline-block; padding-block: .35rem; }
.kruimels span { margin: 0 .45rem; opacity: .55; }

/* ---------- 4. Header ---------- */
.kop {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.kop__in {
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  /* Met de bestellijst-, account- en offerteknop erbij is de kop vol.
     Iets minder tussenruimte houdt "Over saVoam" op één regel. */
  gap: clamp(.8rem, 1.4vw, 1.4rem);
  min-height: 76px;
}

.merk {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
  z-index: 66;
}
.merk__beeld { width: clamp(112px, 15vw, 150px); height: auto; }
.merk__sub {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--wit);
  background: var(--teal-diep);
  padding: .18rem .42rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav { display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.6rem); margin-left: auto; }
.nav__lijst {
  display: flex;
  align-items: center;
  /* Iets dichter op elkaar sinds de accountknop in de kop staat: anders
     werd het menu zo smal dat "Over saVoam" over twee regels ging. */
  gap: clamp(.55rem, 1.1vw, 1.15rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Alleen de directe menulinks, niet de links binnen het uitklappaneel */
.nav__item > a,
.nav__rij > a {
  display: inline-block;
  padding: .45rem .1rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.nav__item > a::after,
.nav__rij > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .12rem;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--soepel);
}
.nav__item > a:hover::after,
.nav__rij > a:hover::after,
.nav__item > a[aria-current="page"]::after,
.nav__rij > a[aria-current="page"]::after { transform: scaleX(1); }
.nav__item > a[aria-current="page"],
.nav__rij > a[aria-current="page"] { color: var(--teal-diep); }

/* Hogere specificiteit dan .knop, anders wint diens display:inline-flex
   verderop in dit bestand en staat de knop twee keer in de header. */
.nav .nav__knop,
.nav .nav__sluit { display: none; }
.kop__knop { flex: none; }

/* ---------- 4b. Uitklapmenu (mega) ---------- */
.vhb {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* static, zodat het paneel zich uitlijnt op .kop en niet op het menu-item */
.nav__item { position: static; }
.nav__rij { display: inline-flex; align-items: center; gap: .15rem; }

.nav__pijl {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
}
.nav__pijl:hover { background: var(--room); }
.nav__chevron {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--soepel);
}
.nav__item--mega.is-open .nav__chevron { transform: translateY(1px) rotate(-135deg); }

.mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--wit);
  border-top: 1px solid var(--lijn);
  box-shadow: 0 26px 50px rgba(20, 24, 26, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* visibility met vertraging: dicht is het paneel niet tabbaar, maar de
     schuifanimatie blijft wel intact */
  transition: opacity .25s var(--soepel), transform .25s var(--soepel),
              visibility 0s linear .25s;
  z-index: 5;
}
.nav__item--mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s var(--soepel), transform .25s var(--soepel),
              visibility 0s linear 0s;
}

.mega__in {
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.mega__in > * { min-width: 0; }

.mega__kop {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-diep);
  margin: 0 0 1rem;
}
.mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mega__links a {
  display: block;
  padding: .45rem 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}
.mega__links a:hover { color: var(--teal-diep); padding-left: .35rem; }

.mega__kaarten {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.3rem);
}
.mega__kaarten > * { min-width: 0; }
.mega__kaarten--zes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.megakaart { display: grid; gap: .1rem; text-decoration: none; color: var(--ink); }
.megakaart__beeld {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--room);
  margin-bottom: .6rem;
}
.megakaart__beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s var(--soepel);
}
.megakaart:hover .megakaart__beeld img { transform: scale(1.06); }
.megakaart__naam { font-weight: 700; font-size: .98rem; letter-spacing: -.01em; }
.megakaart:hover .megakaart__naam { color: var(--teal-diep); }
.megakaart__sub { font-size: .85rem; color: var(--grijs); }
.megakaart--klein .megakaart__naam { font-size: .92rem; }

.hamburger {
  display: none;
  align-items: center;
  gap: .5rem;
  background: var(--ink);
  color: var(--wit);
  border: 0;
  border-radius: 999px;
  padding: .6rem 1rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  z-index: 66;
}
.hamburger__streep {
  width: 18px; height: 2px;
  background: currentColor;
  position: relative;
  flex: none;
}
.hamburger__streep::before,
.hamburger__streep::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: currentColor;
}
.hamburger__streep::before { top: -5px; }
.hamburger__streep::after  { top: 5px; }

.sluier {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 26, .6);
  z-index: 55;
  opacity: 0;
  transition: opacity .3s var(--soepel);
}
body.menu-open .sluier { opacity: 1; }

/* ---------- 5. Knoppen ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background-color .25s var(--soepel), color .25s var(--soepel),
              border-color .25s var(--soepel), transform .25s var(--soepel);
  text-align: center;
}
.knop:hover { transform: translateY(-2px); }
.knop__pijl { transition: transform .25s var(--soepel); }
.knop:hover .knop__pijl { transform: translateX(4px); }

.knop--vol   { background: var(--teal-diep); color: var(--wit); border-color: var(--teal-diep); }
.knop--vol:hover { background: var(--teal-donker); border-color: var(--teal-donker); color: var(--wit); }

.knop--mint  { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.knop--mint:hover { background: var(--wit); border-color: var(--wit); color: var(--ink); }

.knop--rand  { background: transparent; color: var(--ink); border-color: var(--ink); }
.knop--rand:hover { background: var(--ink); color: var(--wit); }

.knop--rand-licht { background: transparent; color: var(--wit); border-color: rgba(255, 255, 255, .55); }
.knop--rand-licht:hover { background: var(--wit); color: var(--ink); border-color: var(--wit); }

.knop--lijn {
  background: transparent;
  color: var(--teal-diep);
  border-color: var(--lijn);
  align-self: flex-start;
}
.knop--lijn:hover { background: var(--teal-diep); border-color: var(--teal-diep); color: var(--wit); }

.knop--klein { padding: .6rem 1.1rem; font-size: .8rem; }
.knop--groot { padding: 1rem 2rem; font-size: .95rem; }

/* ---------- 6. Secties en rasters ---------- */
.sectie { padding-block: var(--sectie); }
.sectie--licht { background: var(--room); }
.sectie--ink { background: var(--ink); color: rgba(255, 255, 255, .8); }
.sectie--ink h2, .sectie--ink h3 { color: var(--wit); }
.sectie--band { padding: 0; }

.kop-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.6rem;
}
.kop-rij > div { min-width: 0; }
.kop-rij .h2 { margin-bottom: 0; }

.raster { display: grid; gap: clamp(1rem, 2.2vw, 1.9rem); }
.raster > * { min-width: 0; }
.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)); }

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}
.duo > * { min-width: 0; }
.duo--omgekeerd .duo__tekst { order: 2; }

.duo__beeld--diep {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw-diep);
  position: relative;
}
.duo__beeld--diep img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.vinken { list-style: none; margin: 1.4rem 0 1.8rem; padding: 0; display: grid; gap: .7rem; }
.vinken li {
  position: relative;
  padding-left: 2rem;
  font-weight: 500;
}
.vinken li::before {
  content: '';
  position: absolute;
  left: 0; top: .42em;
  width: 1.1rem; height: .58rem;
  border-left: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: rotate(-45deg);
}
.vinken--klein li { font-size: .93rem; padding-left: 1.7rem; }
.kaartje--accent .vinken li::before { border-color: var(--mint); }

/* ---------- 7. Hero ---------- */
.hero { background: var(--ink); }
.hero__blok {
  /* teal-diep i.p.v. teal: wit op #009B95 haalt maar 3,45:1 en zakt
     daarmee onder WCAG AA voor lopende tekst. Op #00726E is het 5,8:1. */
  background: var(--teal-diep);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  align-items: stretch;
  min-height: min(78vh, 680px);
  position: relative;
  overflow: hidden;
}
.hero__blok > * { min-width: 0; }
.hero__blok::before {
  content: '';
  position: absolute;
  inset: auto -10% -45% 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
}

.hero__in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  color: var(--wit);
  position: relative;
  z-index: 2;
  /* de wrap-breedte klopt hier niet: het blok is maar een deel van de rij.
     Links uitlijnen op de container, rechts alleen de gewone marge. */
  width: auto;
  margin: 0;
  padding-left: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  padding-right: var(--pad);
}
.hero__oogje {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin: 0 0 1.4rem;
}
.hero__kop {
  font-size: clamp(2.15rem, .9rem + 4.4vw, 4.35rem);
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .96;
  margin: 0 0 1.5rem;
  color: var(--wit);
}
/* bewust géén overflow:hidden: dat zou een te brede kop stil afkappen */
.hero__regel { display: block; }
.hero__regel--accent { color: var(--mint); }
.hero__lead {
  font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
  margin-bottom: 2rem;
}
.hero__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__beeld { position: relative; overflow: hidden; }
.hero__beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__beeld::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 114, 110, .62), rgba(0, 114, 110, 0) 45%);
}

.ticker {
  display: flex;
  gap: 2.6rem;
  list-style: none;
  margin: 0;
  padding: .95rem var(--pad);
  background: var(--ink);
  color: var(--mint);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}
.ticker li { flex: none; display: flex; align-items: center; gap: 2.6rem; animation: schuif 26s linear infinite; }
.ticker li::after { content: '/'; color: rgba(255, 255, 255, .3); }
@keyframes schuif { to { transform: translateX(-100%); } }

/* ---------- 8. Kaarten en 3D ---------- */
.kaart--3d { perspective: 900px; }
.kaart--3d .kaart__binnen {
  height: 100%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .5s var(--soepel), box-shadow .4s var(--soepel);
  will-change: transform;
}
.kaart--3d.is-tilt .kaart__binnen { transition: transform .12s linear, box-shadow .4s var(--soepel); }

/* Productlijnkaarten */
.lijnen { align-items: stretch; }
.lijn { border-radius: var(--radius); }
.lijn .kaart__binnen {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--schaduw);
}
.lijn:hover .kaart__binnen { box-shadow: var(--schaduw-diep); }
.lijn__beeld { position: relative; overflow: hidden; }
.lijn__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--soepel); }
.lijn:hover .lijn__beeld img { transform: scale(1.05); }
.lijn__nr {
  position: absolute;
  left: 0; bottom: 0;
  padding: .35rem .95rem .4rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--wit);
  background: var(--teal-diep);
  border-radius: 0 var(--radius-s) 0 0;
}
.lijn--professional .lijn__nr { background: var(--ink); }
.lijn--tubeless .lijn__nr { background: var(--teal-donker); }
.lijn__tekst { padding: clamp(1.3rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.lijn__naam { font-size: 1.25rem; text-transform: uppercase; letter-spacing: -.01em; margin: 0; }
.lijn__kop { font-weight: 600; color: var(--teal-diep); margin: 0; }
.lijn__pitch { color: var(--grijs); font-size: .95rem; margin: 0 0 .5rem; flex: 1; }

/* Productkaarten */
.prod .kaart__binnen {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  box-shadow: var(--schaduw);
}
.prod--donker .kaart__binnen { background: var(--ink-2); border-color: var(--ink-3); }
.prod--donker .prod__naam { color: var(--wit); }
.prod--donker .prod__specs li { color: rgba(255, 255, 255, .68); }
.prod--donker .prod__specs li::before { background: var(--mint); }
.prod--donker .prod__prijs { color: var(--mint); }
.prod--donker .prod__art { color: rgba(255, 255, 255, .55); }

/* Productfoto: uitgeknipte dispensers op wit, dus altijd een witte
   ondergrond en 'contain' zodat er niets wordt afgesneden. */
.prod__beeld {
  position: relative;
  display: block;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-bottom: .9rem;
}
.prod__beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: .8rem;
  transition: transform .5s var(--soepel);
}
.prod:hover .prod__beeld img { transform: scale(1.06); }
.prod__beeld .prod__lijn { position: absolute; left: .55rem; top: .55rem; }
.prod--donker .prod__beeld { border-color: var(--ink-3); }

.prod__lijn {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 999px;
  color: var(--wit);
  background: var(--teal-diep);
}
.prod__lijn--professional { background: var(--ink); }
.prod__lijn--tubeless { background: var(--teal-donker); }
.prod--donker .prod__lijn--professional { background: var(--ink-3); }

.prod__naam { font-size: 1.05rem; margin: .35rem 0 0; letter-spacing: -.01em; }
.prod__art { font-size: .8rem; color: var(--grijs); margin: 0; font-variant-numeric: tabular-nums; }
.prod__art--leeg { font-style: italic; }
.prod__specs { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; flex: 1; }
.prod__specs li { position: relative; padding-left: 1rem; font-size: .87rem; color: var(--grijs); }
.prod__specs li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.prod__prijs {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal-diep);
  margin: .9rem 0 .9rem;
  letter-spacing: -.02em;
}
.prod__prijs span { font-size: .72rem; font-weight: 600; color: var(--grijs); letter-spacing: .04em; }
.prod .knop { align-self: flex-start; }

/* Drag-rail */
.rail__hint { font-size: .82rem; color: var(--grijs); margin: 0 0 .9rem; }
.rail {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 1rem;
  cursor: grab;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rail.is-slepen { cursor: grabbing; scroll-snap-type: none; }
.rail.is-slepen a { pointer-events: none; }
.rail__spoor { display: flex; gap: 1.2rem; width: max-content; padding: .3rem .2rem; }
.prod--rail { width: min(78vw, 300px); flex: none; scroll-snap-align: start; }

/* Pijler-, blok- en branchekaarten */
.pijler .kaart__binnen,
.blokje .kaart__binnen {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  height: 100%;
  box-shadow: var(--schaduw);
  display: flex;
  flex-direction: column;
}
.pijler__nr, .blokje__nr {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--room-2);
  line-height: 1;
  margin-bottom: .5rem;
  letter-spacing: -.03em;
}
.pijler h3, .blokje__kop { font-size: 1.15rem; text-transform: uppercase; margin: 0 0 .25rem; }
.pijler__sub { font-weight: 600; color: var(--teal-diep); margin: 0 0 .7rem; font-size: .95rem; }
.pijler p { font-size: .93rem; color: var(--grijs); }
.pijler__slot { margin-top: auto; padding-top: .9rem; font-weight: 600; color: var(--ink); font-size: .9rem; }
.blokje p { font-size: .95rem; color: var(--grijs); margin: 0; }

.brkaart { text-decoration: none; color: inherit; display: block; }
.brkaart .kaart__binnen {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  height: 100%;
  box-shadow: var(--schaduw);
}
/* De foto ligt los in haar vak: absoluut gepositioneerd telt zij niet mee
   voor de hoogte van de kaart. Stond zij gewoon in de stroom, dan bepaalde
   de verhouding van het bestand die hoogte — sector-onderwijs.jpg staat
   rechtop (1400 × 2100) en rekte daarmee de hele rij uit, waardoor die twee
   kaarten een andere verhouding kregen dan de rest. Nu bepaalt alleen het
   vak de verhouding en past de foto zich aan, welk formaat er ook in gaat. */
.brkaart__beeld { position: relative; overflow: hidden; min-height: 190px; }
.brkaart__beeld img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; transition: transform .7s var(--soepel);
}
/* Alle rijen even hoog, zodat een kop van twee regels in de ene kaart de
   foto's van de andere niet oprekt. */
.branchekaarten { grid-auto-rows: 1fr; }
.brkaart:hover .brkaart__beeld img { transform: scale(1.06); }
.brkaart__tekst { padding: clamp(1.1rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; gap: .4rem; }
.brkaart__tekst h3 { font-size: 1.1rem; text-transform: uppercase; margin: 0; }
.brkaart__tekst p { font-size: .92rem; color: var(--grijs); margin: 0; flex: 1; }
.brkaart__meer { font-weight: 700; font-size: .85rem; color: var(--teal-diep); display: inline-flex; gap: .4rem; align-items: center; }
.brkaart:hover .brkaart__meer .knop__pijl { transform: translateX(4px); }

/* ---------- 9. Pagina-onderdelen ---------- */
.pagkop { position: relative; background: var(--ink); color: var(--wit); isolation: isolate; }
.pagkop__beeld { position: absolute; inset: 0; z-index: -1; }
.pagkop__beeld img { width: 100%; height: 100%; object-fit: cover; }
.pagkop__laag {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(20, 24, 26, .84) 0%, rgba(20, 24, 26, .66) 45%, rgba(0, 114, 110, .45) 100%);
}
.pagkop__in { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; }
.pagkop--kort .pagkop__in { padding-block: clamp(3rem, 7vw, 5rem); }
.pagkop__lead {
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  color: rgba(255, 255, 255, .86);
  max-width: 62ch;
  margin: 0;
}

/* Cijferblok */
.duo__cijfers { display: grid; gap: 1.1rem; }
.cijfer {
  background: var(--room);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-left: 5px solid var(--teal);
}
.cijfer--accent { background: var(--teal-diep); color: var(--wit); border-left-color: var(--mint); }
.cijfer__waarde {
  display: block;
  font-size: clamp(2.6rem, 1.5rem + 4vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--teal-diep);
  font-variant-numeric: tabular-nums;
  margin-bottom: .4rem;
}
.cijfer--accent .cijfer__waarde { color: var(--wit); }
.cijfer p { margin: 0; font-size: .95rem; color: var(--grijs); }
/* na .cijfer p, anders wint het grijs van de basisregel */
.cijfer--accent p { color: rgba(255, 255, 255, .92); }
.cijfer__bron { font-size: .78rem; color: var(--grijs); margin: 0; }

/* Beeldband met USP's */
.band { position: relative; isolation: isolate; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band__laag { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 81, 79, .95), rgba(20, 24, 26, .9)); z-index: -1; }
.band__in { padding-block: var(--sectie); color: rgba(255, 255, 255, .82); }
.usps { margin-top: 2.6rem; }
.usp {
  border-top: 2px solid rgba(255, 255, 255, .22);
  padding-top: 1.1rem;
}
.usp__nr { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--mint); }
.usp h3 { font-size: 1.08rem; text-transform: uppercase; margin: .5rem 0 .4rem; color: var(--wit); }
.usp p { font-size: .92rem; margin: 0; }

/* Sectorgrid */
.sectoren { margin-top: 2.4rem; }
.sector {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none;
}
.sector img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--soepel); }
.sector:hover img { transform: scale(1.07); }
.sector__laag {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 24, 26, .88) 8%, rgba(20, 24, 26, .12) 65%);
  transition: background .4s var(--soepel);
}
.sector:hover .sector__laag { background: linear-gradient(to top, rgba(0, 114, 110, .92) 8%, rgba(0, 155, 149, .25) 70%); }
.sector__naam {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.6rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  right: 3rem;
  color: var(--wit);
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.sector__pijl {
  position: absolute;
  right: clamp(1rem, 2.5vw, 1.6rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink);
  font-weight: 700;
  transition: transform .3s var(--soepel);
}
.sector:hover .sector__pijl { transform: translateX(4px); }

/* Stappen */
.stappen { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.9rem); counter-reset: s; }
.stappen > * { min-width: 0; }
.stap { border-top: 2px solid var(--teal); padding-top: 1.1rem; }
.stap__nr { font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: var(--mint); }
.stap h3 { font-size: 1.1rem; text-transform: uppercase; margin: .5rem 0 .45rem; }
.stap p { font-size: .92rem; margin: 0; }
.stappen__slot { margin-top: 2.4rem; font-weight: 600; color: var(--wit); font-size: 1.05rem; }

/* Branchepunten */
.duo__punten { display: grid; gap: .9rem; }
.punt {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--room);
  border-radius: var(--radius-s);
  padding: 1.1rem 1.3rem;
}
.punt > * { min-width: 0; }
.punt__nr { font-weight: 700; color: var(--teal-diep); font-size: .85rem; letter-spacing: .1em; padding-top: .2em; flex: none; }
.punt p { margin: 0; font-weight: 500; }

.andere { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.andere a {
  display: inline-block;
  padding: .45rem 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
}
.andere a:hover { background: var(--mint); color: var(--ink); border-color: var(--mint); }

/* CTA-blok */
.cta { background: var(--teal-donker); color: var(--wit); padding-block: var(--sectie); }
.cta__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cta__lead { color: rgba(255, 255, 255, .85); font-size: 1.08rem; max-width: 52ch; }
.cta__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.cta__usp { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cta__usp li {
  border-left: 3px solid var(--mint);
  padding-left: 1rem;
  display: grid;
}
.cta__usp strong { font-size: 1rem; }
.cta__usp span { font-size: .88rem; color: rgba(255, 255, 255, .75); }

/* Filters op de prijspagina */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.filter {
  display: inline-block;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  border: 2px solid var(--lijn);
  background: var(--wit);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--soepel), border-color .25s var(--soepel), color .25s var(--soepel);
}
.filter:hover { border-color: var(--teal); color: var(--teal-diep); }
.filter.is-actief { background: var(--teal-diep); border-color: var(--teal-diep); color: var(--wit); }
.filters__telling { font-size: .85rem; color: var(--grijs); margin: 0 0 1.6rem; min-height: 1.4em; }
.prods__leeg { text-align: center; color: var(--grijs); padding: 2.5rem 0; }

.melding {
  border-radius: var(--radius-s);
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  border-left: 4px solid var(--teal);
  background: var(--room);
}
.melding p:last-child { margin-bottom: 0; }
.melding--info { font-size: .95rem; }
.melding--ok { border-color: var(--teal); background: #E6F5F4; }
.melding--ok h2 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: .4rem; }
.melding--fout { border-color: #C0392B; background: #FDEDEA; }
.melding__klein { font-size: .85rem; color: var(--grijs); margin-top: .6rem; }
.melding code { font-size: .85em; background: rgba(0, 0, 0, .06); padding: .1em .35em; border-radius: 4px; }

/* ---------- 10. Formulier ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }
.form { margin-top: 1.6rem; display: grid; gap: 1.2rem; }
.form__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.form__rij > * { min-width: 0; }
.veld { display: grid; gap: .35rem; min-width: 0; }
.veld label { font-weight: 600; font-size: .9rem; }
.veld input, .veld select, .veld textarea {
  font: inherit;
  font-size: .98rem;
  width: 100%;
  padding: .75rem .9rem;
  border: 2px solid var(--lijn);
  border-radius: var(--radius-s);
  background: var(--wit);
  color: var(--ink);
  transition: border-color .2s var(--soepel);
}
.veld textarea { resize: vertical; min-height: 8rem; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--teal); outline-offset: 1px; }
.veld--fout input, .veld--fout select, .veld--fout textarea { border-color: #C0392B; }
.veld__fout { color: #A93226; font-size: .84rem; margin: 0; font-weight: 600; }
.veld__hulp { color: var(--grijs); font-size: .84rem; margin: 0; }
.form__klein { font-size: .84rem; color: var(--grijs); margin: 0; }
.form button { justify-self: start; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__zij { display: grid; gap: 1.1rem; }
.kaartje {
  background: var(--room);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
}
.kaartje h2 { font-size: 1.02rem; text-transform: uppercase; margin-bottom: .7rem; }
.kaartje address { font-style: normal; margin-bottom: .8rem; }
.kaartje p { font-size: .95rem; }
.kaartje a { display: inline-block; padding-block: .18rem; }
.kaartje--accent { background: var(--ink); color: rgba(255, 255, 255, .82); }
.kaartje--accent h2 { color: var(--wit); }

/* ---------- 11. Footer ---------- */
.voet { background: var(--ink); color: rgba(255, 255, 255, .72); padding-top: clamp(3rem, 6vw, 4.5rem); }
.voet__in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.voet__in > * { min-width: 0; }
.voet__merk img { width: 150px; height: auto; margin-bottom: 1rem; }
.voet__payoff { color: var(--mint); font-weight: 700; font-size: 1rem; margin-bottom: .6rem; }
.voet__merk p { font-size: .92rem; }
.voet__kolom h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wit); margin-bottom: 1rem; }
.voet__kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.voet__kolom a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .92rem; display: inline-block; padding-block: .3rem; }
.voet__kolom a:hover { color: var(--mint); }
.voet__kolom address { font-style: normal; font-size: .92rem; margin-bottom: .7rem; }

/* Het KvK-nummer hoort bij het adres, maar leest als bijzaak: iets kleiner
   en met cijfers van gelijke breedte, zodat het nummer rustig staat. */
.kvk { display: inline-block; margin-top: .3rem; font-size: .85em; font-variant-numeric: tabular-nums; opacity: .8; }

.voet__onder { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.3rem; }
.voet__onder-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; font-size: .84rem; }
.voet__onder p { margin: 0; }
.voet__i-job { color: rgba(255, 255, 255, .5); }

.omhoog {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--teal-diep);
  color: var(--wit);
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: var(--schaduw);
  transition: background-color .25s var(--soepel), transform .25s var(--soepel);
}
.omhoog:hover { background: var(--teal-donker); transform: translateY(-3px); }

/* ---------- 12. Beweging ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .45s var(--soepel), transform .45s var(--soepel); }
[data-reveal].is-zichtbaar { opacity: 1; transform: none; }

.usp, .stap, .pijler, .blokje, .punt {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s var(--soepel), transform .55s var(--soepel);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.is-zichtbaar .usp, .is-zichtbaar .stap, .is-zichtbaar .pijler,
.is-zichtbaar .blokje, .is-zichtbaar .punt { opacity: 1; transform: none; }

/* Zonder JS moet alles gewoon zichtbaar zijn */
.geen-js [data-reveal],
.geen-js .usp, .geen-js .stap, .geen-js .pijler,
.geen-js .blokje, .geen-js .punt { opacity: 1; transform: none; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1080px) {
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .kop__knop { display: none; }

  .hamburger { display: inline-flex; }

  /* geen backdrop-filter/transform op .kop: dat zou het containing block
     worden voor het vast gepositioneerde paneel */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    background: var(--wit);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 5.5rem 1.6rem 2rem;
    margin: 0;
    z-index: 58;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .38s var(--soepel), visibility 0s linear .38s;
    overflow-y: auto;
    box-shadow: -20px 0 50px rgba(20, 24, 26, .25);
  }
  body.menu-open .nav {
    transform: none;
    visibility: visible;
    transition: transform .38s var(--soepel), visibility 0s linear 0s;
  }
  /* header boven de sluier tillen, anders ligt die over het paneel heen */
  body.menu-open .kop { z-index: 59; background: transparent; border-color: transparent; }
  body.menu-open .kop__in { background: transparent; }

  .nav__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lijst > li + li { border-top: 1px solid var(--lijn); }
  .nav__item > a, .nav__rij > a { padding: .95rem .2rem; font-size: 1.05rem; }
  .nav__item > a::after, .nav__rij > a::after { display: none; }

  /* Uitklapmenu wordt een uitschuiflijst binnen het schuifpaneel */
  .nav__rij { display: flex; justify-content: space-between; align-items: center; width: 100%; }
  .nav__rij > a { flex: 1 1 auto; min-width: 0; }
  .nav__pijl { width: 44px; height: 44px; flex: none; }

  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    transition: none;
    /* display i.p.v. visibility: alleen zo klapt de hoogte echt dicht */
    display: none;
  }
  .nav__item--mega.is-open .mega { display: block; }
  .mega__in {
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    padding-block: .2rem 1.2rem;
  }
  .mega__kop { margin-bottom: .6rem; }
  .mega__kaarten,
  .mega__kaarten--zes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .megakaart__beeld { margin-bottom: .4rem; }
  .megakaart__naam { font-size: .9rem; }
  .megakaart__sub { font-size: .8rem; }
  .nav .nav__knop { display: inline-flex; margin-top: 1.4rem; }
  .nav .nav__sluit {
    display: grid;
    place-items: center;
    position: absolute;
    top: 1rem; right: 1.1rem;
    width: 42px; height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--room);
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }

  .hero__blok { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__in { padding-inline: var(--pad); order: 2; }
  .hero__beeld { order: 1; aspect-ratio: 16 / 9; }
  .hero__beeld::after { background: linear-gradient(to bottom, rgba(0, 155, 149, .2), rgba(0, 155, 149, .55)); }
  .hero__blok::before { display: none; }

  .duo, .cta__in, .contact { grid-template-columns: minmax(0, 1fr); }
  .duo--omgekeerd .duo__tekst { order: 0; }
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--2 { grid-template-columns: minmax(0, 1fr); }
  .brkaart .kaart__binnen { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .raster--3, .raster--4 { grid-template-columns: minmax(0, 1fr); }
  .stappen { grid-template-columns: minmax(0, 1fr); }
  .form__rij { grid-template-columns: minmax(0, 1fr); }
  .voet__in { grid-template-columns: minmax(0, 1fr); }
  .kop-rij { flex-direction: column; align-items: flex-start; }
  .sectoren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brkaart .kaart__binnen { grid-template-columns: minmax(0, 1fr); }
  /* Onder elkaar bepaalt het vak zelf de verhouding; de foto blijft erin
     liggen. */
  .brkaart__beeld { min-height: 0; aspect-ratio: 16 / 9; }
  .duo__beeld--diep img { aspect-ratio: 16 / 10; }
  .ticker { gap: 1.6rem; }
  .ticker li { gap: 1.6rem; }
}

@media (max-width: 520px) {
  .sectoren { grid-template-columns: minmax(0, 1fr); }
  .sector { aspect-ratio: 16 / 10; }
}

/* iPhone SE / opgevouwen toestellen */
@media (max-width: 380px) {
  .kop__in { min-height: 66px; gap: .5rem; }
  .merk__beeld { width: 100px; }
  .merk__sub { letter-spacing: .1em; padding: .15rem .3rem; }
  .hamburger { padding: .5rem .7rem; font-size: .74rem; letter-spacing: .06em; }
  .hero__kop { letter-spacing: -.02em; }
  .prod--rail { width: 82vw; }
}


/* ============================================================
   14. Homepage naar het voorbeeld van de referentiesite
   Promobalk · donkere hero · producttegels · wegwijzers ·
   tabblok met meeschalend beeld · carrousels
   ============================================================ */

/* ---- Tekstlink ----
   Wordt op de homepage gebruikt. inline-flex met padding, anders volgt de
   link de regelhoogte en is het aanraakvlak 17 px — onder de 24 px uit
   WCAG 2.5.8. */
.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-block: .3rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--teal-diep);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  margin-top: .6rem;
}
.tekstlink:hover { color: var(--teal-donker); }
.tekstlink span { transition: transform .25s var(--soepel); }
.tekstlink:hover span { transform: translateX(4px); }

/* ---- Promobalk ---- */
.promobalk { background: var(--ink); color: rgba(255, 255, 255, .75); }
.promobalk__in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: .9rem;
}
.promobalk__in > * { min-width: 0; }
.promobalk__item { display: grid; gap: .1rem; }
.promobalk__item strong {
  color: var(--wit);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.promobalk__item span { font-size: .82rem; }

/* ---- Donkere hero ----
   Vult bij het laden precies het scherm (min de kop en de promobalk) en
   krimpt tijdens het scrollen terug naar zijn gewone maat. site.js zet
   --boven (hoogte kop + promobalk), --hero-schaal en --hero-krimp. */
.vhero {
  background: var(--ink);
  color: var(--wit);
  overflow: hidden;
  position: relative;
  min-height: calc(100svh - var(--boven, 118px));
  display: grid;
  align-items: center;

  transform: scale(var(--hero-schaal, 1));
  transform-origin: center top;
  border-radius: var(--hero-radius, 0px);
  /* het krimpen laat onderaan ruimte over; die halen we hier weer weg */
  margin-bottom: calc(-1 * var(--hero-krimp, 0px));
  will-change: transform;
}
/* svh wordt niet overal ondersteund; vh als terugval */
@supports not (height: 100svh) {
  .vhero { min-height: calc(100vh - var(--boven, 118px)); }
}
.vhero::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 155, 149, .40), rgba(0, 155, 149, 0) 68%);
  pointer-events: none;
}
.vhero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
}
.vhero__in > * { min-width: 0; }

.vhero__kop {
  font-size: clamp(1.9rem, .85rem + 2.7vw, 3.15rem);
  line-height: .98;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--wit);
  margin: 0 0 1.6rem;
  /* de regelval staat al met <br> vast; automatisch afbreken zou hier
     "PROFESSIO-NELE" opleveren */
  hyphens: manual;
  overflow-wrap: normal;
}
.vhero__kop em { font-style: normal; color: var(--mint); }

.vhero__beeld {
  display: grid;
  place-items: center;
  padding: clamp(.5rem, 2vw, 1.5rem);
}
.vhero__beeld img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
  animation: zweef 7s ease-in-out infinite;
}
@keyframes zweef {
  0%, 100% { transform: translateY(-10px); }
  50%      { transform: translateY(10px); }
}

.vhero__lead { font-size: 1.1rem; color: var(--wit); font-weight: 600; }
.vhero__zij p { color: rgba(255, 255, 255, .78); font-size: .95rem; }
.vhero__zij .tekstlink { color: var(--mint); }

/* ---- Producttegels ---- */
.prodrij-sectie { padding-top: clamp(3rem, 6vw, 4.5rem); }
.prodrij {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.6rem);
}
.prodrij > * { min-width: 0; }
.prodtegel {
  display: grid; gap: .2rem;
  text-decoration: none; color: var(--ink);
  height: 100%;
  align-content: start;
}
.prodtegel__beeld {
  position: relative;
  display: block;
  background: var(--room);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: .8rem;
}
.prodtegel__beeld img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 1.4rem;
  transition: transform .55s var(--soepel);
}
.prodtegel:hover .prodtegel__beeld img { transform: scale(1.07); }
.prodtegel__badge {
  position: absolute; left: .7rem; top: .7rem;
  background: var(--mint); color: var(--ink);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
}
.prodtegel__lijn { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-diep); }
.prodtegel__naam { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.prodtegel:hover .prodtegel__naam { color: var(--teal-diep); }
.prodtegel__prijs { font-weight: 700; color: var(--ink); margin-top: .2rem; }
.prodtegel__prijs span { font-size: .72rem; font-weight: 600; color: var(--grijs); }

/* ---- Twee wegwijzers ---- */
.prompt { background: var(--room); }
.prompt__in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lijn);
}
.prompt__in > * { min-width: 0; }
.prompt__blok {
  position: relative;
  background: var(--room);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem) clamp(1.8rem, 4vw, 3rem) 0;
  text-decoration: none; color: var(--ink);
  transition: background-color .3s var(--soepel);
}
.prompt__blok:nth-child(2) { padding-left: clamp(1.5rem, 4vw, 3rem); }
.prompt__blok:hover { background: var(--wit); }
.prompt__blok h2 { font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); margin: 0 0 .4rem; letter-spacing: -.02em; }
.prompt__blok p { margin: 0; color: var(--grijs); font-size: .95rem; }
.prompt__pijl {
  position: absolute; right: clamp(.8rem, 2vw, 1.5rem); top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal-diep); color: var(--wit);
  transition: transform .3s var(--soepel);
}
.prompt__blok:hover .prompt__pijl { transform: translateY(-50%) translateX(4px); }

/* ---- Tabblok met meeschalend beeld ---- */
.weten { background: var(--wit); padding-block: var(--sectie); }
.weten__in {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.weten__in > * { min-width: 0; }
.weten__kop { grid-column: 1 / -1; margin-bottom: .5rem; }
.weten__kop .h2 { margin: 0; }
.weten__kop em { font-style: normal; color: var(--teal-diep); }

.weten__tabs { display: grid; gap: 0; align-content: start; }
.weten__tab {
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--lijn);
  padding: .9rem .2rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--grijs);
  cursor: pointer;
  transition: color .25s var(--soepel), padding-left .25s var(--soepel);
}
.weten__tab:last-child { border-bottom: 1px solid var(--lijn); }
.weten__tab:hover { color: var(--ink); padding-left: .35rem; }
.weten__tab.is-actief { color: var(--teal-diep); border-top-color: var(--teal-diep); }

.weten__tekst { padding-top: .6rem; }
.weten__paneel h3 { font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); margin: 0 0 .7rem; letter-spacing: -.025em; }
.weten__paneel p { color: var(--grijs); }
.weten__slot { color: var(--ink); font-weight: 600; }

.weten__beeld {
  position: sticky;
  top: 7rem;
  display: grid;
  place-items: center;
  background: var(--room);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 2rem);
}
.weten__beeld img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  object-fit: contain;
  /* JS zet --schaal op basis van de scrollpositie */
  transform: scale(var(--schaal, 1));
  transform-origin: center;
  will-change: transform;
}

/* ---- Carrousel ---- */
.carrousel__knoppen { display: flex; gap: .5rem; }
.carrousel__knop {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color .25s var(--soepel), color .25s var(--soepel), opacity .25s var(--soepel);
}
.carrousel__knop:hover { background: var(--ink); color: var(--wit); }
.carrousel__knop[disabled] { opacity: .3; cursor: default; }
.carrousel__knop[disabled]:hover { background: transparent; color: var(--ink); }

.carrousel {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}
.carrousel__spoor {
  list-style: none; margin: 0; padding: .3rem .2rem;
  display: flex;
  gap: clamp(.9rem, 2vw, 1.4rem);
  width: max-content;
}
.carrousel__spoor > * { scroll-snap-align: start; flex: none; }
.carrousel__hint { font-size: .82rem; color: var(--grijs); margin: .6rem 0 0; }

/* voordeelkaart */
.vkaart {
  width: min(78vw, 300px);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.vkaart__nr { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--teal-diep); }
.vkaart h3 { font-size: 1.1rem; margin: .3rem 0 .3rem; letter-spacing: -.02em; }
.vkaart p { font-size: .93rem; color: var(--grijs); margin: 0; flex: 1; }
.vkaart .tekstlink { color: var(--teal-diep); align-self: flex-start; }
.vkaart--1 { background: #E9F6F5; }
.vkaart--3 { background: #E9F6F5; }
.vkaart--cta { background: var(--ink); border-color: var(--ink); }
.vkaart--cta h3 { color: var(--wit); }
.vkaart--cta p { color: rgba(255, 255, 255, .75); }
.vkaart--cta .knop { align-self: flex-start; margin-top: .6rem; }

/* productkaart in de carrousel */
.prodkaart {
  width: min(78vw, 260px);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.prodkaart__beeld {
  position: relative;
  display: block;
  background: var(--room);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-bottom: .7rem;
}
.prodkaart__beeld img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: .9rem; }
.prodkaart__beeld .prod__lijn { position: absolute; left: .5rem; top: .5rem; }
.prodkaart__naam { font-size: .98rem; margin: 0; letter-spacing: -.01em; }
.prodkaart__art { font-size: .78rem; color: var(--grijs); margin: 0; font-variant-numeric: tabular-nums; }
.prodkaart__prijs { font-size: 1.2rem; font-weight: 700; color: var(--teal-diep); margin: .5rem 0 .8rem; }
.prodkaart__prijs span { font-size: .7rem; font-weight: 600; color: var(--grijs); }
.prodkaart .knop { align-self: flex-start; margin-top: auto; }

/* cijfers in de beeldband */
.bandcijfers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.4rem;
}
.bandcijfers > * { min-width: 0; }
.bandcijfer { border-top: 2px solid var(--mint); padding-top: 1rem; }
.bandcijfer .cijfer__waarde {
  display: block;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 3.8rem);
  font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: var(--mint); font-variant-numeric: tabular-nums;
  margin-bottom: .4rem;
}
.bandcijfer p { margin: 0; color: rgba(255, 255, 255, .82); font-size: .95rem; }
.bandbron { font-size: .78rem; color: rgba(255, 255, 255, .5); margin-top: 1.6rem; }

/* ---- Responsive voor de nieuwe onderdelen ---- */
@media (max-width: 1080px) {
  .vhero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vhero__zij { grid-column: 1 / -1; }
  .weten__in { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .weten__beeld { grid-column: 1 / -1; position: static; }
  .weten__beeld img { max-width: 260px; transform: none !important; }
  .prodrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .promobalk__in { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .promobalk__item { grid-template-columns: minmax(0, 1fr); }
  .vhero__in { grid-template-columns: minmax(0, 1fr); }
  .vhero__beeld { order: -1; }
  .vhero__beeld img { max-width: 240px; }
  .prompt__in { grid-template-columns: minmax(0, 1fr); }
  .prompt__blok { padding: 1.6rem 3.2rem 1.6rem 0; }
  .prompt__blok:nth-child(2) { padding-left: 0; }
  .weten__in { grid-template-columns: minmax(0, 1fr); }
  .weten__tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
  .weten__tab {
    border: 1.5px solid var(--lijn);
    border-radius: 999px;
    padding: .45rem 1rem;
    font-size: .85rem;
  }
  .weten__tab:last-child { border-bottom: 1.5px solid var(--lijn); }
  .weten__tab.is-actief { background: var(--teal-diep); border-color: var(--teal-diep); color: var(--wit); }
  .weten__tab:hover { padding-left: 1rem; }
  .bandcijfers { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .prodrij { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .vhero__beeld img { animation: none; }
  .weten__beeld img { transform: none !important; }
  .carrousel { scroll-behavior: auto; }
}

/* ---------- Beperkte beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .usp, .stap, .pijler, .blokje, .punt { opacity: 1 !important; transform: none !important; }
  .kaart--3d .kaart__binnen { transform: none !important; }
  .ticker li { animation: none; }
  .knop:hover { transform: none; }
}

/* ---------- Printen ---------- */
@media print {
  .kop, .voet__onder, .omhoog, .sluier, .cta, .ticker { display: none; }
  body { color: #000; }
  .pagkop { background: none; color: #000; }
  .pagkop__beeld { display: none; }
}

/* ============================================================
   14. DEMO 3 — aanpassingen n.a.v. de feedback van 1 september
   a. Geen zwarte vlakken meer (secties, CTA en footer)
   b. Kleur per productlijn: teal · blauw · groen
   c. Nieuwe blokken uit demo 2, in de stijl van demo 1
   ============================================================ */

/* ---------- a. Zachte vlakken in plaats van zwart ---------- */
.sectie--ink {
  background: var(--diep);
  color: var(--ink-3);
  border-block: 1px solid var(--diep-rand);
}
.sectie--ink h2,
.sectie--ink h3 { color: var(--ink); }
.sectie--ink .oogje--licht { color: var(--teal-diep); }
.sectie--ink .h2--licht    { color: var(--ink); }
.sectie--ink .lead--licht  { color: var(--ink-3); }
.sectie--ink .uitspraak--licht { color: var(--teal-donker); border-color: var(--teal); }
.sectie--ink .knop--mint {
  background: var(--teal-diep);
  border-color: var(--teal-diep);
  color: var(--wit);
}
.sectie--ink .knop--mint:hover { background: var(--teal-donker); border-color: var(--teal-donker); }
.sectie--ink .knop--rand-licht { color: var(--ink); border-color: var(--ink); }
.sectie--ink .knop--rand-licht:hover { background: var(--ink); color: var(--wit); }

/* De CTA blijft teal — dat is merkkleur, geen zwart. Alleen de knop
   contrasteert nu duidelijker met de achtergrond. */
.cta { background: var(--teal-donker); }
.cta .knop--mint { background: var(--wit); border-color: var(--wit); color: var(--teal-donker); }
.cta .knop--mint:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }

/* Footer: licht in plaats van zwart */
.voet {
  background: var(--room);
  color: var(--grijs);
  border-top: 1px solid var(--lijn);
}
.voet__payoff { color: var(--teal-diep); }
.voet__kolom h2 { color: var(--ink); }
.voet__kolom a { color: var(--grijs); }
.voet__kolom a:hover { color: var(--teal-diep); }
.voet__onder { border-top: 1px solid var(--lijn); }
.voet__i-job { color: #8A9699; }
.voet__logo--licht { display: none; }
.voet__logo--donker { display: block; }

/* ---------- b. Kleur per productlijn ---------- */
.lijn-essential {
  --lk: var(--l-essential);
  --lk-diep: var(--l-essential-diep);
  --lk-zacht: var(--l-essential-zacht);
  --lk-rand: var(--l-essential-rand);
}
.lijn-professional {
  --lk: var(--l-professional);
  --lk-diep: var(--l-professional-diep);
  --lk-zacht: var(--l-professional-zacht);
  --lk-rand: var(--l-professional-rand);
}
.lijn-tubeless {
  --lk: var(--l-tubeless);
  --lk-diep: var(--l-tubeless-diep);
  --lk-zacht: var(--l-tubeless-zacht);
  --lk-rand: var(--l-tubeless-rand);
}

/* Labels, filters en nummers volgen de lijnkleur */
.prod__lijn--essential    { background: var(--l-essential); }
.prod__lijn--professional { background: var(--l-professional); }
.prod__lijn--tubeless     { background: var(--l-tubeless); }
.prod--donker .prod__lijn--professional { background: var(--l-professional); }

.lijn--essential .lijn__nr    { background: var(--l-essential); }
.lijn--professional .lijn__nr { background: var(--l-professional); }
.lijn--tubeless .lijn__nr     { background: var(--l-tubeless); }

.filter--essential.is-actief    { background: var(--l-essential); border-color: var(--l-essential); color: var(--wit); }
.filter--professional.is-actief { background: var(--l-professional); border-color: var(--l-professional); color: var(--wit); }
.filter--tubeless.is-actief     { background: var(--l-tubeless); border-color: var(--l-tubeless); color: var(--wit); }

/* Knoppen binnen een lijncontext */
.knop--lk {
  background: var(--lk-diep, var(--teal-diep));
  border-color: var(--lk-diep, var(--teal-diep));
  color: var(--wit);
}
.knop--lk:hover {
  background: var(--lk, var(--teal));
  border-color: var(--lk, var(--teal));
  color: var(--wit);
}
.knop--lk-rand {
  background: transparent;
  border-color: var(--lk-diep, var(--teal-diep));
  color: var(--lk-diep, var(--teal-diep));
}
.knop--lk-rand:hover {
  background: var(--lk-diep, var(--teal-diep));
  color: var(--wit);
}

/* ---------- c1. Beeldhero (homepage — demo 2, beeld i.p.v. video) ---------- */
.beeldkop {
  position: relative;
  min-height: min(86vh, 740px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--wit);
  isolation: isolate;
  margin-top: -77px;          /* de sticky header ligt eroverheen */
  padding-top: 77px;
}
.beeldkop__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.beeldkop__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.beeldkop__laag {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20, 24, 26, .90) 4%, rgba(20, 24, 26, .52) 52%, rgba(20, 24, 26, .34) 100%),
    linear-gradient(105deg, rgba(0, 81, 79, .55), rgba(20, 24, 26, 0) 62%);
}
.beeldkop__in { padding-block: clamp(3.5rem, 9vw, 6rem) clamp(2rem, 4vw, 3rem); position: relative; }
.beeldkop__oogje {
  font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); margin: 0 0 1.3rem;
}
.beeldkop__kop {
  font-size: clamp(1.85rem, .9rem + 3.9vw, 3.75rem);
  text-transform: uppercase;
  line-height: 1; letter-spacing: -.035em;
  color: var(--wit); margin: 0 0 1.3rem; max-width: 26ch;
  /* geen automatische afbreekstreepjes in de kop: "SA-NITAIRE" leest slecht */
  hyphens: none;
  overflow-wrap: normal;
}
.beeldkop__kop em { font-style: normal; color: var(--mint); }
.beeldkop__lead {
  font-size: clamp(1rem, .95rem + .38vw, 1.18rem);
  color: rgba(255, 255, 255, .86);
  max-width: 54ch; margin-bottom: 2rem;
}
.beeldkop__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; }
.beeldkop .knop--mint { background: var(--mint); border-color: var(--mint); color: var(--ink); }

.paginaindex { border-top: 1px solid rgba(255, 255, 255, .18); position: relative; }
.paginaindex ol {
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto;
  list-style: none; padding: 0; margin-block: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.paginaindex li { border-left: 1px solid rgba(255, 255, 255, .18); }
.paginaindex li:first-child { border-left: 0; }
.paginaindex a {
  display: block; padding: 1.05rem 1.1rem;
  color: rgba(255, 255, 255, .82); text-decoration: none;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .25s var(--soepel), color .25s var(--soepel);
}
.paginaindex a span { color: var(--mint); margin-right: .5rem; }
.paginaindex a:hover { background: rgba(255, 255, 255, .1); color: var(--wit); }

/* ---------- c2. USP-balk (demo 1, vier punten) ---------- */
.uspbalk { background: var(--teal-diep); color: var(--wit); }
.uspbalk__in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.uspbalk__item {
  margin: 0;
  padding: 1.15rem 1.3rem;
  border-left: 1px solid rgba(255, 255, 255, .2);
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
}
.uspbalk__item:first-child { border-left: 0; padding-left: 0; }
.uspbalk__item::before {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mint);
}

/* ---------- c3. Ontdek saVoam (demo 2) ---------- */
.uitspraakblok { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.groot {
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0;
  /* ch rekent met de eigen tekengrootte, dus dit hoort op .groot
     te staan en niet op de wrapper eromheen. */
  max-width: 17ch;
  hyphens: none;
  overflow-wrap: normal;
}
.groot em { font-style: normal; color: var(--teal-diep); }

.tweekolom {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.cijferlijst { margin: 0; display: grid; gap: 1.6rem; }
.cijferlijst > div {
  border-top: 2px solid var(--teal);
  padding-top: 1.1rem;
}
.cijferlijst dt { margin: 0 0 .3rem; }
.cijferlijst .cijfer__waarde {
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--teal-diep);
  line-height: 1;
  display: block;
}
.cijferlijst dd { margin: 0; font-size: .98rem; color: var(--ink-3); max-width: 40ch; }
.cijferlijst__bron { font-size: .8rem; color: var(--grijs); margin: 0; }

/* ---------- c4. Beeld + tekst (demo 2 — "Samen kijken wat beter kan") ---------- */
.tweekolom--beeld { align-items: center; }
.beeldblok {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw);
}
.beeldblok img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.beeldblok--wacht {
  background: var(--room-2);
  border: 1px dashed var(--lijn);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--grijs);
  font-size: .88rem;
  padding: 1.5rem;
  box-shadow: none;
}

/* ---------- c5. Assortiment per lijn (3 lijnen onder elkaar) ---------- */
.sectie--assortiment { padding-bottom: 0; }
.sectie--assortiment > .wrap { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sectie--assortiment .lead { max-width: 76ch; }
.lijnblok { padding-block: clamp(2.6rem, 5vw, 4rem); background: var(--lk-zacht); }
.lijnblok + .lijnblok { border-top: 1px solid var(--lk-rand); }
.lijnblok__kop {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 1.6rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.lijnblok__titel { display: flex; align-items: center; gap: .9rem; margin: 0 0 .35rem; }
.lijnblok__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: 50%;
  background: var(--lk); color: var(--wit);
  font-size: .9rem; font-weight: 800; letter-spacing: 0;
}
.lijnblok__naam {
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem);
  text-transform: uppercase; letter-spacing: -.02em;
  color: var(--lk-diep); margin: 0;
}
.lijnblok__kort { color: var(--ink-3); margin: 0; max-width: 56ch; }

.lijnprods {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.2rem);
}
.lijnprod {
  background: var(--wit);
  border: 1px solid var(--lk-rand);
  border-radius: var(--radius-s);
  padding: .9rem .9rem 1rem;
  display: flex; flex-direction: column;
  min-width: 0;
}
.lijnprod__beeld {
  background: var(--room);
  border-radius: 8px;
  margin-bottom: 1.05rem;  /* gelijk aan de andere productkaarten */
  aspect-ratio: 1;
  display: grid; place-items: center;
  overflow: hidden;
}
/* Foto's worden begrensd, niet uitgerekt: bij width/height: 100% neemt een
   niet-vierkante foto de hoogte van haar eigen verhouding aan en snijdt
   overflow: hidden de onderkant eraf. */
.lijnprod__beeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lijnprod__naam {
  font-size: .95rem; font-weight: 700; line-height: 1.25;
  margin: 0 0 .3rem; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.lijnprod__art { font-size: .78rem; color: var(--grijs); margin: 0 0 .6rem; font-variant-numeric: tabular-nums; }
.lijnprod__prijs {
  font-size: 1.15rem; font-weight: 800; color: var(--lk-diep);
  margin: auto 0 .1rem; letter-spacing: -.02em;
}
.lijnprod__prijs span { font-size: .72rem; font-weight: 600; color: var(--grijs); letter-spacing: .02em; }
.lijnprod__opaanvraag { font-size: .95rem; font-weight: 700; color: var(--lk-diep); margin: auto 0 .1rem; }
.lijnprod__knoppen { display: grid; gap: .4rem; margin-top: .8rem; }
.lijnprod__knoppen .knop { width: 100%; padding: .55rem .7rem; font-size: .76rem; }

/* ---------- c6. Keuzehulp (vergelijkingstabel producten) ---------- */
/* Vaste kolomindeling: alleen de eerste kolom krijgt een maat, de lijnen
   verdelen de rest gelijk over elkaar. Zo blijven de gekleurde koppen even
   breed, ongeacht hoeveel tekst er in een cel staat of hoeveel lijnen er
   zijn. De minimumbreedte houdt de tabel leesbaar; smaller schuift hij
   horizontaal in .keuzehulp__houder. */
.keuzehulp {
  width: 100%; min-width: 620px;
  table-layout: fixed;
  border-collapse: collapse; font-size: .95rem;
}
.keuzehulp caption { text-align: left; color: var(--grijs); font-size: .88rem; padding-bottom: .9rem; }
.keuzehulp th, .keuzehulp td {
  text-align: left; padding: .85rem 1rem;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
.keuzehulp thead th {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wit); border-bottom: 0;
}
/* Bij table-layout: fixed bepaalt alleen de eerste rij de kolombreedtes,
   dus de maat van de labelkolom staat hier en niet bij tbody th. */
.keuzehulp thead th:first-child { width: 22%; background: var(--room-2); color: var(--grijs); }
.keuzehulp thead th.k-essential    { background: var(--l-essential); }
.keuzehulp thead th.k-professional { background: var(--l-professional); }
.keuzehulp thead th.k-tubeless     { background: var(--l-tubeless); }
.keuzehulp tbody th { font-weight: 700; color: var(--ink); background: var(--room); }
.keuzehulp tbody tr:nth-child(even) td { background: #FBFCFC; }
.keuzehulp__houder { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- c7. Tubeless: traditioneel vs. kernloos ---------- */
.kernloos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
.kernloos__kaart {
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--lijn);
  background: var(--wit);
}
.kernloos__kaart--tubeless { border-color: var(--l-tubeless-rand); background: var(--l-tubeless-zacht); }
.kernloos__label {
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grijs); margin: 0 0 1.1rem;
}
.kernloos__kaart--tubeless .kernloos__label { color: var(--l-tubeless-diep); }
.kernloos__stappen { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.kernloos__stappen li {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .92rem; font-weight: 700;
}
.kernloos__stappen li::after { content: '→'; color: var(--grijs); margin-left: .2rem; }
.kernloos__stappen li:last-child::after { content: none; }
.kernloos__stappen li:last-child { color: var(--ink); }
.kernloos__kaart--tubeless .kernloos__stappen li:last-child { color: var(--l-tubeless-diep); }
.kernloos__slot { font-size: .95rem; color: var(--ink-3); margin: 0; }

/* de doorsnede-illustratie */
.rolfig { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.rolfig__rol {
  width: 74px; height: 74px; flex: none;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #FFF 0 3px, #ECEFEE 3px 6px);
  border: 1px solid var(--lijn);
  display: grid; place-items: center;
}
.rolfig__kern {
  width: 26px; height: 26px; border-radius: 50%;
  background: #C8A97E; border: 1px solid #A98A5F;
}
.rolfig__kern--leeg { background: transparent; border: 1px dashed var(--l-tubeless); }
.rolfig__uitleg { font-size: .86rem; color: var(--grijs); margin: 0; }

/* ---------- c7b. Tubeless: de drie papierkwaliteiten ---------- */
/* Staat onder de vergelijking traditioneel/kernloos: dezelfde kaartvorm,
   met de kwaliteitsvlag als beeld en de keurmerken eronder. */
.papier { margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.papier__kop {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0 0 .35em;
}
.kwaliteiten {
  list-style: none; margin: clamp(1.2rem, 3vw, 1.9rem) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
.kwaliteit {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--wit);
  padding: clamp(1.2rem, 2.5vw, 1.9rem);
  text-align: center;
}
/* De vlag draagt de naam van de kwaliteit; die staat in het beeld zelf
   en daarom niet nog een keer als tekst eronder. */
.kwaliteit__vlag { display: block; width: 112px; height: auto; margin: 0 auto .95rem; }
.kwaliteit__tekst { margin: 0; font-weight: 700; color: var(--ink); }

.keurmerken {
  margin-top: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--l-tubeless-rand);
  background: var(--l-tubeless-zacht);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
/* Twee van de drie keurmerken hebben een witte achtergrond in het beeld;
   op een wit plaatje vallen ze weg tegen het mintvlak, vandaar de chips. */
.keurmerken__logos {
  list-style: none; margin: 0; padding: 0; flex: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
}
.keurmerken__logos li {
  background: var(--wit);
  border: 1px solid var(--l-tubeless-rand);
  border-radius: var(--radius-s);
  padding: .7rem .9rem;
  display: grid; place-items: center;
}
.keurmerken__logos img { display: block; height: 68px; width: auto; }
.keurmerken__tekst {
  margin: 0; flex: 1 1 20ch;
  color: var(--ink-3); font-size: .98rem;
}

/* ---------- c8. Uitvoeringen (Professional) ---------- */
.uitvoeringen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); }
.uitvoering {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--wit);
}
.uitvoering__beeld {
  aspect-ratio: 16 / 11;
  background: var(--room);
  display: flex; align-items: center; justify-content: center;
  padding: .8rem;
  border-bottom: 1px solid var(--lijn);
  overflow: hidden;
}
/* De foto wordt begrensd door max-width/max-height in plaats van door
   width/height: 100%. Bij een vierkante foto in dit liggende vak leverde
   dat laatste een beeld op dat even hoog was als het vak breed is; de
   onderkant — het papier uit de dispenser — viel dan buiten het vak en
   werd door overflow: hidden weggesneden. */
.uitvoering__beeld img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.uitvoering__tekst { padding: 1.1rem 1.2rem 1.3rem; }
.uitvoering__tekst h3 { font-size: 1.05rem; margin: 0 0 .3rem; text-transform: none; letter-spacing: 0; }
.uitvoering__tekst p { font-size: .9rem; color: var(--grijs); margin: 0; }

/* ---------- c9. Bestel- en offerteformulier ---------- */
.formkeuze { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.8rem; }
.formkeuze a {
  padding: .7rem 1.3rem;
  border: 2px solid var(--lijn);
  border-radius: 999px;
  font-size: .86rem; font-weight: 700;
  text-decoration: none; color: var(--ink);
  transition: background-color .25s var(--soepel), border-color .25s var(--soepel), color .25s var(--soepel);
}
.formkeuze a:hover { border-color: var(--teal-diep); color: var(--teal-diep); }
.formkeuze a.is-actief { background: var(--teal-diep); border-color: var(--teal-diep); color: var(--wit); }

.artikelvak {
  background: var(--room);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.artikelvak img { width: 62px; height: 62px; object-fit: contain; flex: none; }
.artikelvak strong { display: block; font-size: .98rem; }
.artikelvak span { font-size: .84rem; color: var(--grijs); }

/* ---------- c10. Responsief voor de nieuwe blokken ---------- */
@media (max-width: 1080px) {
  .lijnprods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .uspbalk__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uspbalk__item { border-left: 0; padding-inline: 0; }
  .tweekolom { grid-template-columns: minmax(0, 1fr); }
  .paginaindex ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paginaindex li:nth-child(3) { border-left: 0; }
  .kernloos { grid-template-columns: minmax(0, 1fr); }
  .kwaliteiten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uitvoeringen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .kwaliteiten { grid-template-columns: minmax(0, 1fr); }
  .keurmerken__logos img { height: 52px; }
  .lijnprods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uspbalk__in { grid-template-columns: minmax(0, 1fr); }
  .uspbalk__item { padding-block: .6rem; }
  .beeldkop { min-height: min(78vh, 620px); }
}
@media (max-width: 420px) {
  .lijnprods { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- c11. Afbreekstreepjes alleen waar het echt moet ----------
   Nederlandse samenstellingen ("standaardoplossing") werden midden in
   het woord afgebroken. Dat mag alleen nog op hele smalle schermen,
   waar een lange kop de pagina anders uit beeld duwt. */
h1, h2, h3,
.h1, .h2, .groot { hyphens: manual; }

@media (max-width: 480px) {
  h1, h2, h3,
  .h1, .h2, .groot { hyphens: auto; }
}

/* ---------- c12. Volgnummer in het oogje (01 — Onze visie) ---------- */
.oogje__nr {
  font-variant-numeric: tabular-nums;
  opacity: .65;
}

/* ---------- c13. Onderdelen die eerst op zwart stonden ---------- */
.sectie--ink .stap__nr      { color: var(--teal-diep); }
.sectie--ink .stappen__slot { color: var(--ink); }
.sectie--ink .stap          { border-top-color: var(--teal-diep); }

.sectie--ink .andere a {
  color: var(--ink);
  border-color: var(--lijn);
  background: var(--wit);
}
.sectie--ink .andere a:hover { background: var(--teal-diep); border-color: var(--teal-diep); color: var(--wit); }

.sectie--ink .prod--donker { background: var(--wit); border: 1px solid var(--lijn); color: var(--ink); }
.sectie--ink .prod--donker .prod__naam,
.sectie--ink .prod--donker .prod__prijs { color: var(--ink); }
.sectie--ink .prod--donker .prod__art,
.sectie--ink .prod--donker .prod__specs { color: var(--grijs); }

/* ---------- c14. Kleine hulpklassen ---------- */
.knoprij { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.middenuit .knoprij { justify-content: center; }
.oogje.middenuit { justify-content: center; }

.uspbalk--drie .uspbalk__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .uspbalk--drie .uspbalk__in { grid-template-columns: minmax(0, 1fr); }
}

/* Prijsblok op de productenpagina: kop links, tekst rechts */
.sectie--ink .tweekolom { align-items: start; }

/* ---------- c15. Onderdelen van de drie lijnpagina's ---------- */

/* Hero met de lijnkleur in het verloop over de foto */
.pagkop__laag--lijn {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--lk-diep, var(--ink)) 74%, transparent) 0%,
    color-mix(in srgb, var(--lk-diep, var(--ink)) 46%, transparent) 42%,
    rgba(20, 24, 26, .12) 100%
  );
}
/* De foto mag doorkomen, dus het verloop is lichter dan voorheen. Een
   zachte donkere gloed achter de tekst houdt de kop leesbaar op de plekken
   waar de foto licht is; als schaduw is hij niet te zien. */
.pagkop--lijn .pagkop__in .h1,
.pagkop--lijn .pagkop__sub,
.pagkop--lijn .pagkop__lead,
.pagkop--lijn .kruimels {
  text-shadow: 0 1px 16px rgba(20, 24, 26, .55), 0 1px 3px rgba(20, 24, 26, .3);
}

/* Terugval voor browsers zonder color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .pagkop__laag--lijn { background: linear-gradient(100deg, rgba(20, 24, 26, .76), rgba(20, 24, 26, .32) 60%); }
}
.pagkop__sub {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem);
  font-weight: 700;
  color: var(--wit);
  margin: 0 0 .8rem;
  max-width: 40ch;
}
.pagkop__in .knoprij { margin-top: 1.8rem; }

/* Vinkenlijst in de lijnkleur */
.vinken--lk { background: var(--lk-zacht); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem); margin: 0; }
.vinken--lk li { font-weight: 600; }
.vinken--lk li::before { color: var(--lk-diep); }

/* Vier kernvoordelen (Professional) */
.kernpunten { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.kernpunt { border-top: 2px solid var(--lk, var(--teal)); padding-top: 1.1rem; }
.kernpunt__nr { font-size: .8rem; font-weight: 800; letter-spacing: .16em; color: var(--lk-diep, var(--teal-diep)); }
.kernpunt h3 { font-size: 1.08rem; text-transform: uppercase; margin: .5rem 0 .45rem; }
.kernpunt p { font-size: .92rem; color: var(--grijs); margin: 0; }

/* Specs in de productkaarten op de lijnpagina's */
.lijnprod__specs {
  list-style: none; margin: 0 0 .8rem; padding: 0;
  display: grid; gap: .25rem;
  font-size: .78rem; color: var(--grijs); line-height: 1.35;
}
.lijnprod__specs li { padding-left: .85rem; position: relative; }
.lijnprod__specs li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--lk, var(--teal));
}

/* Het productblok op de lijnpagina staat op een zacht vlak in de lijnkleur */
.sectie--ink.lijn-essential,
.sectie--ink.lijn-professional,
.sectie--ink.lijn-tubeless {
  background: var(--lk-zacht);
  border-color: var(--lk-rand);
}
.sectie--ink .oogje--licht { color: var(--lk-diep, var(--teal-diep)); }

/* Beeldplaatshouders binnen een kaart */
/* De productfoto's zijn vierkant (600 × 600). In een breed 4:3-kader
   bleef er links en rechts ruim 80 px leeg en stond de kop er strak
   tegenaan. Een vierkant kader met een maximumbreedte vult de foto wel,
   en er komt meer lucht tussen beeld en tekst. */
.blokje .beeldblok {
  aspect-ratio: 1;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 2rem;
  border-radius: var(--radius-s);
}
.blokje .beeldblok img { aspect-ratio: 1; }
.blokje__kop { margin-bottom: .55rem; }

/* De vergelijking staat over de volle breedte, dus de stappen passen
   op één regel. */
.kernloos { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.kernloos__stappen { font-size: 1rem; }

/* ---------- c16. Prijspagina ---------- */
.niettelprijs {
  background: var(--wit);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-s);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  margin: clamp(1.6rem, 3vw, 2.2rem) 0;
  max-width: 78ch;
}
.niettelprijs h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 .6rem; }
.niettelprijs p { font-size: .96rem; color: var(--ink-3); }

.prod__knoppen { display: grid; gap: .45rem; margin-top: .9rem; }
.prod__knoppen .knop { width: 100%; }
.prod__prijs--aanvraag { font-size: 1.05rem; }

/* Prijs en opsommingstekens volgen de kleur van de lijn */
.prod.lijn-essential .prod__prijs,
.prod.lijn-professional .prod__prijs,
.prod.lijn-tubeless .prod__prijs { color: var(--lk-diep); }
.prod.lijn-essential .prod__specs li::before,
.prod.lijn-professional .prod__specs li::before,
.prod.lijn-tubeless .prod__specs li::before { background: var(--lk); }

/* ---------- c17. Extra formuliervelden voor het bestelformulier ---------- */
.veld--vink { margin-top: .4rem; }
.vinkje {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .93rem; font-weight: 400; line-height: 1.5;
  cursor: pointer;
}
.vinkje input[type="checkbox"] {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: .18rem;
  accent-color: var(--teal-diep);
}
.veld--vink.veld--fout .vinkje span { color: #A32020; }

/* Accentkaartje in het merkgroen in plaats van zwart */
.kaartje--accent { background: var(--teal-diep); color: rgba(255, 255, 255, .9); }
.kaartje--accent h2 { color: var(--wit); }

/* ---------- c18. Branchepagina's ---------- */
.branchelijnen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.branchelijn {
  background: var(--lk-zacht);
  border: 1px solid var(--lk-rand);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.8vw, 2rem);
  display: flex; flex-direction: column;
}
.branchelijn__kop { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.branchelijn__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; flex: none;
  border-radius: 50%;
  background: var(--lk); color: var(--wit);
  font-size: .8rem; font-weight: 800;
}
.branchelijn__naam {
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--lk-diep); margin: 0;
}
.branchelijn__kort { font-weight: 700; color: var(--ink); margin-bottom: .6rem; }
.branchelijn p { font-size: .94rem; color: var(--ink-3); }
.branchelijn .knop { align-self: flex-start; margin-top: auto; }

.uitspraak--breed { max-width: 68ch; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }

/* Kernpunten met kop in de puntenlijst van een branche */
.punt__kop { font-weight: 700; color: var(--ink); margin: 0 0 .25rem; }
.punt > div { min-width: 0; }

@media (max-width: 900px) {
  .branchelijnen { grid-template-columns: minmax(0, 1fr); }
}

/* Tekst en puntenlijst starten bovenaan; gecentreerd gaf een gat boven
   de tekst zodra de puntenlijst langer werd. */
.duo:has(.duo__punten) { align-items: start; }

/* In een gecentreerd blok hoort de citaatstreep niet los links te staan */
.middenuit .uitspraak {
  border-left: 0;
  padding-left: 0;
  border-top: 2px solid var(--teal);
  padding-top: 1.1rem;
  display: inline-block;
  margin-inline: auto;
}

/* Een lange kop duwde de knop naar een eigen regel. De kop krijgt nu een
   maximum, zodat kop en knop naast elkaar blijven staan op ruime schermen. */
@media (min-width: 1000px) {
  .kop-rij > div:first-child { max-width: 68%; }
  .kop-rij > .knop { flex: none; }
}

/* Laatste kaart in de voordelen-carrousel stond ook op zwart */
.vkaart--cta { background: var(--teal-diep); border-color: var(--teal-diep); }
.vkaart--cta h3 { color: var(--wit); }
.vkaart--cta p { color: rgba(255, 255, 255, .82); }
.vkaart--cta .knop--vol {
  background: var(--wit); border-color: var(--wit); color: var(--teal-donker);
}
.vkaart--cta .knop--vol:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }

/* ============================================================
   15. BESTELLIJST (winkelwagen)
   Geen webshop: er wordt niets afgerekend. De bezoeker stelt een
   lijst samen en verstuurt die als bestelling op rekening.
   ============================================================ */

/* ---------- Knop met teller in de header ---------- */
.mandknop {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border: 2px solid var(--lijn);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  transition: border-color .25s var(--soepel), color .25s var(--soepel), background-color .25s var(--soepel);
}
.mandknop:hover { border-color: var(--teal-diep); color: var(--teal-diep); }
.mandknop--gevuld { border-color: var(--teal-diep); color: var(--teal-diep); }
.mandknop__icoon { display: flex; flex: none; }
.mandknop__teller {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem;
  padding-inline: .3rem;
  border-radius: 999px;
  background: var(--teal-diep); color: var(--wit);
  font-size: .72rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---------- Bevestiging na toevoegen ---------- */
.mandmelding { background: var(--teal-diep); color: var(--wit); }
.mandmelding__in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .8rem 1.4rem;
  padding-block: .8rem;
}
.mandmelding p { margin: 0; font-size: .95rem; }
.knop--wit { background: var(--wit); border-color: var(--wit); color: var(--teal-donker); }
.knop--wit:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }

/* ---------- Knop "In bestellijst" bij een product ---------- */
.mandform { margin: 0; display: contents; }
.mandform .knop { width: 100%; }
.knop__mand { font-weight: 800; font-size: 1em; line-height: 1; }

/* ---------- De lijst zelf ---------- */
.mandleeg {
  border: 1px dashed var(--lijn);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: var(--room);
}
.mandleeg p:first-child { font-size: 1.1rem; }

.mandlijst { margin-bottom: clamp(2rem, 4vw, 3rem); }
.mandregels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.mandregel {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--lijn);
}
.mandregel__beeld {
  width: 72px; height: 72px;
  background: var(--room);
  border-radius: var(--radius-s);
  display: grid; place-items: center;
  overflow: hidden;
}
.mandregel__beeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; padding: .35rem; }
.mandregel__info { display: grid; gap: .2rem; min-width: 0; }
.mandregel__naam { font-weight: 700; line-height: 1.3; }
.mandregel__meta { font-size: .82rem; color: var(--grijs); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mandregel__stuk { font-size: .85rem; color: var(--lk-diep, var(--teal-diep)); font-weight: 600; }

.merkje {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--wit);
}
.merkje--essential    { background: var(--l-essential); }
.merkje--professional { background: var(--l-professional); }
.merkje--tubeless     { background: var(--l-tubeless); }

.mandregel__aantal { display: grid; gap: .25rem; justify-items: center; }
.mandregel__aantal label { font-size: .72rem; color: var(--grijs); letter-spacing: .06em; text-transform: uppercase; }
.mandregel__aantal input {
  width: 5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  font: inherit; font-size: .95rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mandregel__aantal input:focus-visible { border-color: var(--teal-diep); }
.mandregel__totaal {
  font-weight: 800; font-size: 1.05rem;
  min-width: 6.5rem; text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--lk-diep, var(--ink));
}

.mandvoet {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 1.2rem;
  padding-top: 1.3rem;
}
.mandvoet__acties { display: flex; flex-wrap: wrap; gap: .6rem; }
.mandvoet__totaal { text-align: right; display: grid; gap: .1rem; }
.mandvoet__totaal span { font-size: .8rem; color: var(--grijs); letter-spacing: .06em; text-transform: uppercase; }
.mandvoet__totaal strong { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.02em; color: var(--teal-donker); }
.mandvoet__klein { text-transform: none !important; letter-spacing: 0 !important; }

.knop--kaal {
  background: transparent; border-color: transparent;
  color: var(--grijs); text-decoration: underline;
  text-underline-offset: .2em;
}
.knop--kaal:hover { color: #A32020; background: transparent; border-color: transparent; }

.mand__kop { margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 720px) {
  .mandregel {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      'beeld info'
      'aantal totaal';
    row-gap: .9rem;
  }
  .mandregel__beeld  { grid-area: beeld; width: 64px; height: 64px; }
  .mandregel__info   { grid-area: info; }
  .mandregel__aantal { grid-area: aantal; justify-items: start; }
  .mandregel__totaal { grid-area: totaal; text-align: right; align-self: end; }
  .mandvoet { flex-direction: column; }
  .mandvoet__totaal { text-align: left; }
}

@media (max-width: 860px) {
  .mandknop__tekst { display: none; }
  .mandknop { padding: .5rem .6rem; }
}

/* De labels "Tel." en "Mob." in de footer namen de basisgrootte over en
   stonden daardoor groter dan het nummer ernaast. */
.voet__kolom ul li { font-size: .92rem; line-height: 1.5; }

/* Het B2B-label stond op smalle schermen uit: met de brede bestellijst-
   knop ernaast werd het afgekapt tot "B...". Nu de knoppen in de kop rond
   en 44 px zijn, past het merk er weer compleet naast. Onder de 340 px
   wordt het alsnog te krap. */
@media (max-width: 340px) {
  .merk__sub { display: none; }
}

/* ============================================================
   16. VOLLEDIG ASSORTIMENT PER LIJN
   ============================================================ */
.catgroep + .catgroep { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.catgroep__kop {
  display: flex; align-items: center; gap: .8rem;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--lk-diep, var(--ink));
  padding-bottom: .7rem;
  margin: 0 0 1.4rem;
  border-bottom: 2px solid var(--lk, var(--teal));
}
.catgroep__aantal {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7rem; height: 1.7rem; padding-inline: .4rem;
  border-radius: 999px;
  background: var(--lk, var(--teal)); color: var(--wit);
  font-size: .75rem; font-weight: 800; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Uitvoering onder de productnaam */
.lijnprod__uitv, .prod__uitv {
  font-size: .8rem; font-weight: 700;
  color: var(--lk-diep, var(--teal-diep));
  margin: 0 0 .3rem;
}

/* Plaatshouder voor producten waarvan nog geen foto is */
.lijnprod__beeld--leeg {
  border: 1px dashed var(--lijn);
  background: var(--wit);
}
.lijnprod__geenbeeld {
  font-size: .72rem;
  color: #9AA5A8;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lijnprod__art--leeg { font-style: italic; }

/* Snel naar een categorie binnen het assortiment */
.catnav {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 2.8rem);
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--lk-rand, var(--lijn));
}
.catnav a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--lk-rand, var(--lijn));
  border-radius: 999px;
  background: var(--wit);
  color: var(--ink);
  text-decoration: none;
  font-size: .85rem; font-weight: 600;
  transition: background-color .2s var(--soepel), color .2s var(--soepel), border-color .2s var(--soepel);
}
.catnav a:hover { background: var(--lk-diep, var(--teal-diep)); border-color: var(--lk-diep, var(--teal-diep)); color: var(--wit); }
.catnav a span {
  font-size: .75rem; font-weight: 800;
  color: var(--lk-diep, var(--teal-diep));
  font-variant-numeric: tabular-nums;
}
.catnav a:hover span { color: var(--wit); }
.catgroep { scroll-margin-top: 7rem; }

/* ---------- c19. Rustiger onthullen op lange pagina's ----------
   De lijnpagina's zijn met het volledige assortiment ruim 14.000 px
   hoog. Een lange fade per sectie leest dan als "de pagina is nog aan
   het laden". Het assortimentsblok verschuift daarom niet meer, het
   verschijnt alleen. */
.sectie--ink[data-reveal] { transform: none; }
.sectie--ink[data-reveal].is-zichtbaar { transform: none; }

/* ============================================================
   17. PRODUCTBLOKKEN
   Zoals op b2b.savoam.com: links de foto's van de uitvoeringen,
   rechts één kenmerkenpaneel. Alle maten en kleuren van hetzelfde
   product staan zo in één blok, in plaats van als losse kaarten
   die als dubbelingen lazen.
   ============================================================ */
.pblok {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: stretch;
  background: var(--wit);
  border: 1px solid var(--lk-rand, var(--lijn));
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2.2rem);
}
.pblok + .pblok { margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.pblok__naam {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: var(--lk-diep, var(--ink));
  margin: 0 0 clamp(1rem, 2.5vw, 1.6rem);
}

/* --- de uitvoeringen (foto's) --- */
.uitvlijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.8rem, 2vw, 1.4rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Eén of twee uitvoeringen krijgen dezelfde kolombreedte als drie,
   anders worden die foto's een stuk groter dan in de blokken ernaast.
   De overige kolommen blijven leeg. */
.uitvlijst--1,
.uitvlijst--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.uitv { display: flex; flex-direction: column; min-width: 0; }
/* Alle 98 dispenserfoto's zijn vierkant, dragen een eigen marge van 8%
   en hebben een doorzichtige achtergrond (zie MEDIA-CREDITS.md). Het vak
   eromheen mag dus gewoon de tegelkleur houden: er tekent zich geen
   fotovlak meer af. */
.uitv__beeld {
  aspect-ratio: 1;
  background: var(--room);
  border-radius: var(--radius-s);
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: .95rem;   /* was krap tegen de uitvoeringsnaam */
}
.uitv__beeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.uitv__beeld--leeg { background: var(--wit); border: 1px dashed var(--lijn); }
.uitv__geenbeeld {
  font-size: .68rem; color: #9AA5A8;
  letter-spacing: .06em; text-transform: uppercase;
}
.uitv__naam {
  font-size: .85rem; font-weight: 700;
  color: var(--lk-diep, var(--ink));
  margin: 0 0 .5rem;
}


/* --- het kenmerkenpaneel --- */
/* Het kenmerkenpaneel loopt door tot onderaan het blok, zodat beide
   kolommen even lang zijn. De knop wordt met margin-top:auto naar de
   onderrand geduwd; de lijst blijft daardoor bovenaan staan. Het paneel
   stond eerder sticky, maar dat kan niet samen met een volle hoogte. */
.kenmerken {
  background: var(--lk-diep, var(--teal-diep));
  color: rgba(255, 255, 255, .92);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2rem);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.kenmerken .knop--kenmerken { margin-top: auto; }
.kenmerken__boven {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  margin: 0 0 .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.kenmerken__kop {
  font-size: .95rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wit);
  text-align: center;
  margin: 0 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.kenmerken__lijst {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: grid; gap: .5rem;
  font-size: .9rem; line-height: 1.5;
}
.kenmerken__lijst li { position: relative; padding-left: 1.1rem; }
.kenmerken__lijst li::before {
  content: '';
  position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint);
}
.knop--kenmerken {
  width: 100%;
  background: transparent;
  border-color: rgba(255, 255, 255, .65);
  color: var(--wit);
  font-size: .8rem;
  padding: .7rem 1rem;
}
.knop--kenmerken:hover { background: var(--wit); border-color: var(--wit); color: var(--lk-diep, var(--teal-donker)); }

@media (max-width: 900px) {
  .pblok { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Ook op een telefoon houden alle uitvoeringen dezelfde maat; een
     enkele foto over de volle breedte valt uit de toon. */
  .uitvlijst, .uitvlijst--1, .uitvlijst--2, .uitvlijst--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Verbruiksartikelen: compacte kaarten in plaats van blokken --- */
.loslijst {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* Het aantal kaarten naast elkaar staat in --kolommen; per lijn is dat
     te wijzigen met .loslijst--<lijn> hieronder. */
  --kolommen: 4;
  grid-template-columns: repeat(var(--kolommen), minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.losprod {
  display: flex; flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--lk-rand, var(--lijn));
  border-radius: var(--radius-s);
  padding: .9rem .9rem 1rem;
  min-width: 0;
  scroll-margin-top: 7rem;
}
.losprod__beeld {
  aspect-ratio: 1;
  background: var(--room);
  border-radius: 8px;
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: 1.05rem;  /* was krap tegen de productnaam */
}
.losprod__beeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.losprod__beeld--leeg { background: var(--wit); border: 1px dashed var(--lijn); }
.losprod__naam { font-size: .95rem; font-weight: 700; line-height: 1.25; margin: 0 0 .25rem; text-transform: none; letter-spacing: 0; }
.losprod__uitv {
  font-size: .8rem; font-weight: 700;
  color: var(--lk-diep, var(--teal-diep));
  margin: 0 0 .25rem;
}
.losprod__art { font-size: .76rem; color: var(--grijs); margin: 0 0 .6rem; font-variant-numeric: tabular-nums; }
.losprod__specs {
  list-style: none; margin: 0 0 .8rem; padding: 0;
  display: grid; gap: .22rem;
  font-size: .78rem; color: var(--grijs); line-height: 1.35;
}
.losprod__specs li { padding-left: .85rem; position: relative; }
.losprod__specs li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--lk, var(--teal));
}
.losprod__prijs { font-size: 1.05rem; font-weight: 800; color: var(--lk-diep, var(--teal-diep)); margin: auto 0 .6rem; letter-spacing: -.02em; }
.losprod__prijs span { font-size: .7rem; font-weight: 600; color: var(--grijs); }
.losprod__prijs--aanvraag { font-size: .88rem; }
.losprod__knoppen { display: grid; gap: .35rem; }

@media (max-width: 1080px) { .loslijst { --kolommen: 3; } }
@media (max-width: 780px)  { .loslijst { --kolommen: 2; } }
@media (max-width: 460px)  { .loslijst { --kolommen: 1; } }

/* Hygiënepapier toont vijf kaarten naast elkaar in plaats van vier: het
   zijn kleine artikelen met korte namen, die passen makkelijk met z'n
   vijven binnen de 1240 px van de pagina. Zodra het scherm smaller wordt
   zakt hij terug op dezelfde trap als de andere lijnen. Elke breedte staat
   er apart bij: deze regels wegen even zwaar als die van .loslijst en
   winnen alleen doordat ze er later staan, dus overslaan mag niet. */
.loslijst--hygienepapier { --kolommen: 5; }
@media (max-width: 1320px) { .loslijst--hygienepapier { --kolommen: 4; } }
@media (max-width: 1080px) { .loslijst--hygienepapier { --kolommen: 3; } }
@media (max-width: 780px)  { .loslijst--hygienepapier { --kolommen: 2; } }
@media (max-width: 460px)  { .loslijst--hygienepapier { --kolommen: 1; } }

/* --- Maatkeuze op het offerteformulier --- */
.maatkeuze { border: 0; margin: 0 0 1.5rem; padding: 0; }
.maatkeuze legend {
  font-size: .88rem; font-weight: 700; color: var(--ink);
  padding: 0; margin-bottom: .6rem;
}
.maatoptie {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem .9rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  cursor: pointer;
  margin-bottom: .5rem;
  transition: border-color .2s var(--soepel), background-color .2s var(--soepel);
}
.maatoptie:hover { border-color: var(--teal-diep); }
.maatoptie:has(input:checked) { border-color: var(--teal-diep); background: var(--l-essential-zacht); }
.maatoptie input { margin-top: .2rem; accent-color: var(--teal-diep); flex: none; }
.maatoptie__tekst { display: grid; gap: .12rem; }
.maatoptie__naam { font-weight: 700; font-size: .95rem; }
.maatoptie__nr { font-size: .78rem; color: var(--grijs); font-variant-numeric: tabular-nums; }
.maatkeuze--fout .maatoptie { border-color: #C25050; }

/* --- Compactere maatregels in het productblok --- */
.uitv__maten { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .3rem; }
.uitv__maten > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem;
  font-size: .78rem;
  padding: .35rem .5rem;
  border-radius: 6px;
  background: var(--lk-zacht, var(--room));
  scroll-margin-top: 7rem;
}
.uitv__maat { display: flex; align-items: baseline; gap: .45rem; }
.uitv__maat b { color: var(--lk-diep, var(--ink)); font-weight: 800; min-width: 1.9rem; }
.uitv__nr { color: var(--grijs); font-variant-numeric: tabular-nums; }
.uitv__prijs { font-weight: 800; color: var(--lk-diep, var(--teal-diep)); margin-left: auto; }
/* "per doos", "per pallet" — de eenheid uit het beheer staat klein en grijs
   achter het bedrag, zodat de prijs zelf het bedrag blijft. */
.uitv__prijs span { font-size: .72rem; font-weight: 600; color: var(--grijs); letter-spacing: .02em; }
/* Bij meerdere maten staat de knop op de maatregel zelf */
.uitv__maten--knoppen > li { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; }
.uitv__maten--knoppen .uitv__prijs { grid-column: 2; }
.uitv__knop { grid-column: 1 / -1; width: 100%; padding: .35rem .6rem; font-size: .7rem; }
/* De offerteknop staat onderaan de kolom en geldt voor alle maten die
   geen prijs hebben. Stond er daarboven al een maatlijst, dan is er wat
   ruimte nodig zodat hij niet tegen de laatste maatregel plakt. */
.uitv__offerte { width: 100%; margin-top: auto; }
.uitv__maten + .uitv__offerte { margin-top: .5rem; }

/* ---------- c20. Prijspagina in dezelfde blokweergave ---------- */
.prijsblokken { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); }
.prijsgroep { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.prijsgroep__kop {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  text-transform: uppercase; letter-spacing: -.02em;
  color: var(--lk-diep, var(--ink));
  margin: 0;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--lk, var(--teal));
}
.prijsgroep__nr {
  width: .85rem; height: .85rem; flex: none;
  border-radius: 50%;
  background: var(--lk, var(--teal));
}
.prijsgroep__aantal {
  margin-left: auto;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em;
  color: var(--grijs);
  text-transform: none;
}
.prijsgroep__meer { justify-self: start; }
/* Onder de vijf kaarten: door naar de hele lijn, en — zonder account —
   de weg naar de overige prijzen. Naast elkaar, onder elkaar zodra het
   niet meer past. */
.prijsgroep__acties { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.prijsgroep__acties .knop { justify-self: start; }


/* Het filter zet hidden op de groep. Zonder deze regel wint
   display:grid van de browserstandaard [hidden]{display:none}. */
[hidden] { display: none !important; }

/* De prijspagina toont vijf kaarten naast elkaar, net als het
   assortimentsblok op de homepage. */
.prijsgroep .lijnprods { margin: 0; }

/* Productfoto's: passend maken, niet bijsnijden. Alle 127 foto's zijn
   vierkant gemaakt en dragen hun eigen marge van 8%, dus de opvulling in
   de CSS is eruit — die kwam er anders bovenop en dan werd het product
   onnodig klein. Zie MEDIA-CREDITS.md. */
.beeldblok--product {
  background: var(--room);
  box-shadow: none;
  border: 1px solid var(--lijn);
}
.beeldblok--product img { object-fit: contain; aspect-ratio: 1; }
.blokje .beeldblok--product img { aspect-ratio: 1; }

/* Idem voor de grote QuartzLine-lijnfoto: die is 3:2, niet 4:3 */
.pblok__lijnbeeld img,
.tweekolom--beeld .beeldblok img[src*="hero-professional"] { aspect-ratio: 3 / 2; }

/* ---------- c21. Achtergrondvideo in de paginakop ---------- */
.pagkop__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s var(--soepel);
}
.pagkop__video.is-aan { opacity: 1; }

/* De video heeft eigen tekst in beeld. Een steviger verloop houdt de
   kop leesbaar en duwt die tekst naar de achtergrond. */
.pagkop--video .pagkop__laag--lijn {
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--lk-diep, var(--ink)) 82%, transparent) 0%,
      color-mix(in srgb, var(--lk-diep, var(--ink)) 66%, transparent) 48%,
      color-mix(in srgb, var(--lk-diep, var(--ink)) 34%, transparent) 100%),
    linear-gradient(to top, rgba(20, 24, 26, .44), rgba(20, 24, 26, 0) 60%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .pagkop--video .pagkop__laag--lijn { background: linear-gradient(100deg, rgba(20,24,26,.82), rgba(20,24,26,.48) 60%); }
}

.videopauze {
  margin-top: 1.4rem;
  background: none; border: 0; padding: .35rem 0;
  color: rgba(255, 255, 255, .78);
  font: inherit; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.videopauze:hover { color: var(--wit); border-bottom-color: var(--wit); }

/* ---------- c22. Klantaccounts ---------- */
/* De accountknop in de kop staat naast de bestellijst en volgt dezelfde
   vorm, maar zonder de nadruk van een gevulde knop. */
.accountknop {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .85rem;
  border: 2px solid var(--lijn);
  border-radius: 999px;
  color: var(--ink); text-decoration: none;
  font-size: .85rem; font-weight: 700; white-space: nowrap;
  transition: border-color .25s var(--soepel), color .25s var(--soepel);
}
.accountknop:hover { border-color: var(--teal-diep); color: var(--teal-diep); }
.accountknop__icoon { display: flex; flex: none; }
/* Ingelogd staat de bestellijst er ook, en dan is de kop te vol voor nog
   een woord: de knop is dan alleen het icoon. "Inloggen" blijft wél
   voluit staan — dat is voor een nieuwe bezoeker de belangrijkste stap.
   De naam staat in beide gevallen in .vhb voor schermlezers. */
.accountknop--kort .accountknop__tekst { display: none; }
.accountknop--kort { padding: .55rem .65rem; }
.nav__account {
  display: none;                       /* alleen in het uitklapmenu */
  font-weight: 700; color: var(--ink); text-decoration: none;
  padding: .6rem 0; border-top: 1px solid var(--lijn);
}

/* Waar de prijs zou staan, staat zonder account een link naar inloggen.
   Bewust dezelfde plek en maat, zodat de kaart niet verspringt. */
.prijsslot {
  display: inline-block;
  font-size: .88rem; font-weight: 700;
  color: var(--teal-diep); text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.prijsslot:hover { color: var(--ink); }

.accountlijst { margin: 0 0 1.6rem; display: grid; gap: .1rem; }
/* De tweede kop op de accountpagina ("Contact- en afleveradres") hoort onder
   de eerste te staan, niet ernaast in gewicht: een maat kleiner, met wat
   lucht erboven. */
.h2--klein { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin-top: 2.4rem; }
.lead--klein { font-size: 1rem; margin-bottom: 1.2rem; }
.accountlijst > div {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr);
  gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--room-2);
}
.accountlijst dt { color: var(--grijs); font-size: .92rem; }
.accountlijst dd { margin: 0; font-weight: 700; }

.status {
  display: inline-block; padding: .2rem .6rem;
  border-radius: 999px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.status--actief     { background: #E3F1E6; color: #2E6E38; }
.status--wacht      { background: #FDF1DC; color: #8A5B15; }
.status--nieuw      { background: var(--room-2); color: var(--grijs); }
.status--gepauzeerd { background: #FBE7E7; color: #9B3030; }
.status--afgewezen  { background: #FBE7E7; color: #9B3030; }

/* Eigen naam: .stappen bestaat al voor de aanpakblokken op de over-pagina. */
.accountstappen { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .93rem; }
.uitlogform { margin-top: 1.6rem; }

/* Op smallere schermen houdt de accountknop alleen zijn icoon; de naam
   blijft in .vhb staan voor schermlezers. */
@media (max-width: 1100px) {
  .accountknop__tekst { display: none; }
  .accountknop { padding: .55rem .65rem; }
}
@media (max-width: 900px) {
  .accountlijst > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}
@media (max-width: 780px) {
  .nav__account { display: block; }
}

/* Melding boven het assortiment voor wie niet is ingelogd: één keer per
   pagina in plaats van bij elk artikel een slotje. */
.prijsmelding {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .8rem clamp(1rem, 3vw, 2rem);
  /* Ondermarge net zo groot als de ruimte die de categorielijst laat:
     zonder die marge plakte de eerste categoriekop tegen de melding. */
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 clamp(2rem, 4vw, 2.8rem);
  padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.5vw, 1.5rem);
  background: var(--wit);
  /* Rondom een rand in de lijnkleur: met alleen een streep links viel de
     melding tussen de rest van de pagina weg. */
  border: 2px solid var(--lk-diep, var(--teal-diep));
  border-radius: var(--radius-s);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lk-diep, var(--teal-diep)) 10%, transparent);
}
.prijsmelding p { margin: 0; flex: 1 1 26ch; font-size: .95rem; color: var(--ink-3); }
.prijsmelding strong { color: var(--ink); }
.prijsmelding__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; flex: none; }

/* ---------- c23. De kop op telefoon en tablet ---------- */
/* Vanaf hier staat het menu achter de MENU-knop en staan de bestellijst,
   het account en dat menu naast elkaar. Ze kregen elk hun eigen vorm en
   maat mee van de bredere weergave; hier worden het drie knoppen van
   dezelfde hoogte, zodat het één rij is in plaats van drie losse vormen.
   44 px is meteen de maat die een vinger nodig heeft. */
@media (max-width: 940px) {
  .kop__in { gap: .5rem; }

  /* Het uitklapmenu staat vast gepositioneerd en telt hier dus niet mee
     in de rij. Zonder deze regel bleef de overgebleven ruimte rechts van
     de knoppen staan en plakten ze tegen het logo; nu houdt het logo
     links en staan de knoppen tegen de rechterrand. */
  .merk { margin-right: auto; }

  .mandknop,
  .accountknop,
  .hamburger { height: 44px; border-radius: 999px; }

  .mandknop,
  .accountknop {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .mandknop__tekst,
  .accountknop__tekst { display: none; }

  /* Het aantal wordt een klein bolletje in de hoek; naast het icoon
     paste het niet meer in een ronde knop. Het randje in de kleur van
     de kop houdt het los van de rand van de knop zelf. */
  .mandknop__teller {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 1.15rem; height: 1.15rem;
    padding-inline: .22rem;
    font-size: .67rem;
    border: 2px solid var(--wit);
  }

  .hamburger { padding-inline: .95rem; }
}

/* Het paneel heeft een eigen sluitknop rechtsboven, maar die viel precies
   achter de MENU-knop — vandaar dat er een rondje achter de knop uit
   piepte. De MENU-knop blijft zichtbaar en sluit het menu ook, dus de
   losse knop kan weg. De focus springt daardoor vanzelf naar de eerste
   menulink, want site.js slaat verborgen elementen over. */
@media (max-width: 940px) {
  .nav .nav__sluit { display: none; }

  /* Het paneel krijgt de focus bij openen; een rand eromheen hoort daar
     niet bij, de links laten hun eigen focus wel zien. */
  #hoofdmenu:focus { outline: none; }

  /* Staat het menu open, dan wordt de knop een kruisje: het woord MENU
     naast een geopend paneel leest verwarrend. De naam blijft staan voor
     schermlezers, en aria-expanded vertelt de stand. */
  body.menu-open .hamburger { width: 44px; padding: 0; justify-content: center; }
  body.menu-open .hamburger__tekst {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.menu-open .hamburger__streep { background: transparent; }
  body.menu-open .hamburger__streep::before { top: 0; transform: rotate(45deg); }
  body.menu-open .hamburger__streep::after  { top: 0; transform: rotate(-45deg); }
}

/* Op een telefoon vervalt het woord MENU: drie ronde knoppen naast
   elkaar staan rustiger dan twee rondjes met een brede pil ernaast, en
   het scheelt de ruimte die het B2B-label naast het logo nodig heeft.
   Op een tablet is er plaats zat en blijft het woord staan. */
@media (max-width: 560px) {
  .merk__beeld { width: 100px; }

  .hamburger { width: 44px; padding: 0; justify-content: center; }
  /* Het woord verdwijnt van het scherm maar niet uit de pagina: met
     display: none zou de knop voor een schermlezer naamloos worden. */
  .hamburger__tekst {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Blok zonder kenmerkenpaneel: de foto's krijgen dan de volle breedte en
   onder elke uitvoering staan de specificaties van dat artikel. Zo leest
   papier hetzelfde als de losse artikelen, waar de inhoud per maat
   verschilt en één gedeelde lijst niet klopt. */
.pblok--breed { grid-template-columns: minmax(0, 1fr); }
.pblok--breed .uitvlijst { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uitv__specs {
  list-style: none; margin: 0 0 .8rem; padding: 0;
  display: grid; gap: .22rem;
  font-size: .78rem; color: var(--grijs); line-height: 1.35;
}
.uitv__specs li { padding-left: .85rem; position: relative; }
.uitv__specs li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--lk, var(--teal));
}
@media (max-width: 1080px) { .pblok--breed .uitvlijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .pblok--breed .uitvlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hygiënepapier zet er vijf naast elkaar in plaats van vier: een blok als
   "Toiletpapier traditioneel" heeft vijf uitvoeringen en die stonden met
   vier kolommen op twee regels. De andere lijnen houden hun vier. Elke
   breedte staat er apart bij, want deze regel weegt zwaarder dan die van
   .pblok--breed hierboven en zou anders ook op een smal scherm gelden. */
.assortiment-hygienepapier .pblok--breed .uitvlijst { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1320px) { .assortiment-hygienepapier .pblok--breed .uitvlijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .assortiment-hygienepapier .pblok--breed .uitvlijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .assortiment-hygienepapier .pblok--breed .uitvlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }