/*
 * Homepagina met meer beeld, landelijke uitvoering.
 *
 * Kleurstrategie: het linnen draagt de pagina (ongeveer twee derde van het
 * oppervlak), donker eikenhout is er voor de banner en de accentbanden, en het
 * goud is het enige echte accent. Serif voor alles wat gelezen wordt als naam
 * of titel, schreefloos enkel voor labels en knoppen.
 */

.h2 {
  /* linnen en hout in plaats van zwart en grijs */
  --linnen: #efe7d8;
  --linnen-diep: #e4d9c5;
  --eik: #1d1a15;
  --eik-warm: #2a251d;
  --inkt: #24201a;
  --inkt-zacht: #5c5546;
  --room: #f7f2e8;
  --goud: #a6832f;
  --goud-diep: #8a6c24;
  --goud-licht: #c9a96e;
  --salie: #6f7359;

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --breed: 1240px;

  background: var(--linnen);
  color: var(--inkt);
  font-family: var(--sans);
}

.h2 h1, .h2 h2, .h2 h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
.h2 p { margin: 0; }
.h2 a { color: inherit; text-decoration: none; }
.h2 img { display: block; }

.h2-binnen { max-width: var(--breed); margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); }

/* label in kapitalen, met een haarlijn ernaast: het landelijke merkteken */
.h2-kop {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.h2-kop::after {
  content: "";
  width: clamp(28px, 6vw, 76px);
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.h2-kop.goud { color: var(--goud); }
.h2-tekst { font-size: 15px; line-height: 1.8; color: var(--inkt-zacht); max-width: 62ch; }

/* ---------- beweging ---------- */
.h2 [data-mcs-op] { opacity: 0; transform: translateY(22px); }
.h2 [data-mcs-op].mcs-zichtbaar {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease) var(--mcs-wacht, 0ms), transform 1s var(--ease) var(--mcs-wacht, 0ms);
}

/* ---------- banner ---------- */
.h2-held { position: relative; min-height: min(86vh, 820px); display: flex; align-items: flex-end; overflow: hidden; background: var(--eik); }

.h2-held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(92deg, rgba(20,17,13,.9) 0%, rgba(20,17,13,.5) 48%, rgba(20,17,13,.1) 100%); }
@keyframes h2-adem { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.h2-held-tekst { position: relative; z-index: 2; padding-block: clamp(48px, 8vh, 100px) clamp(64px, 9vh, 120px); display: grid; gap: 18px; justify-items: start; }
.h2-held .h2-kop { color: #e7ddc9; }
.h2-held h1 { font-size: clamp(36px, 5.8vw, 72px); line-height: 1.03; color: #fdfaf4; }
.h2-held h1 em { font-style: italic; color: var(--goud-licht); }

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

/* op donkere grond het lichtere goud, anders zakt het weg */

/* ---------- secties ---------- */
.h2-sectie { padding: clamp(58px, 7vw, 108px) 0; background: var(--linnen); }
.h2-sectie.creme { background: var(--linnen); }
.h2-sectie.room { background: var(--room); }
.h2-sectie h2 { font-size: clamp(25px, 3.2vw, 42px); line-height: 1.14; margin-top: 12px; color: var(--inkt); }

/* de donkere banden: aanbod en realisaties, zodat het beeld daar spreekt */
.h2-sectie.donker { background: var(--eik); color: #e7ddc9; }
.h2-sectie.donker h2 { color: #fdfaf4; }
.h2-sectie.donker .h2-kop { color: #b8ad97; }
.h2-sectie.donker .h2-tekst { color: rgba(231,221,201,.8); }

/* ---------- vormovergangen ---------- */
.h2-overgang { display: block; line-height: 0; margin: 0; }
.h2-overgang svg { display: block; width: 100%; height: clamp(38px, 5vw, 74px); }

/* ---------- drie stappen ---------- */
.h2-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 40px; }
.h2-beeld { display: block; overflow: hidden; border-radius: 220px 220px 3px 3px; }
.h2-beeld img { width: 100%; height: clamp(230px, 26vw, 340px); object-fit: cover; transition: transform 1.4s var(--ease); }
.h2-stap:hover .h2-beeld img { transform: scale(1.05); }
.h2-stap .h2-kop { margin: 20px 0 8px; }
.h2-stap h3 { font-size: clamp(19px, 2vw, 25px); }
.h2-stap .h2-tekst { font-size: 14px; margin-top: 9px; }
.h2-lijst { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.h2-lijst li { position: relative; padding-left: 20px; font-size: 13px; color: var(--inkt-zacht); }
.h2-lijst li::before { content: ""; position: absolute; left: 0; top: .66em; width: 11px; height: 1px; background: var(--goud); }

/* ---------- aanbodtegels ---------- */
.h2-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.h2-tegel { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; }
.h2-tegel img, .h2-project img, .h2-winkel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.h2-tegel:hover img { transform: scale(1.06); }
.h2-laag { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(20,17,13,.9)); }
.h2-naam { position: absolute; left: 18px; right: 18px; bottom: 16px; font-family: var(--serif); font-size: clamp(16px, 1.5vw, 20px); color: #fdfaf4; }
.h2-naam.klein { font-size: 15px; left: 13px; bottom: 12px; }
/* dun gouden kader dat oplicht bij hover: rustiger dan een schaduw */
.h2-tegel::after, .h2-project::after, .h2-winkel a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,0);
  transition: box-shadow .45s var(--ease);
}
.h2-tegel:hover::after, .h2-project:hover::after, .h2-winkel a:hover::after { box-shadow: inset 0 0 0 1px rgba(201,169,110,.85); }

/* ---------- uitgelichte realisatie, in een boog ---------- */
.h2-breed { position: relative; display: flex; align-items: flex-end; min-height: min(60vh, 580px); overflow: hidden; background: var(--eik); }

.h2-breed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.h2-breed:hover img { transform: scale(1.04); }
.h2-breed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,13,.12), rgba(20,17,13,.86)); }
.h2-breed-tekst { position: relative; z-index: 2; padding-block: clamp(32px, 5vw, 60px); display: grid; gap: 12px; justify-items: start; }
.h2-breed .h2-kop { color: var(--goud-licht); }
.h2-breed-naam { font-family: var(--serif); font-size: clamp(28px, 3.8vw, 50px); color: #fdfaf4; }

/* ---------- werkwijze ---------- */
.h2-tijdlijn { list-style: none; margin: 40px 0 0; padding: 0; display: grid; }

/* ---------- projecten ---------- */
.h2-projecten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.h2-project { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.h2-project:hover img { transform: scale(1.04); }
.h2-project-tekst { position: absolute; left: 24px; bottom: 22px; z-index: 2; display: grid; gap: 6px; }
.h2-project-naam { font-family: var(--serif); font-size: clamp(20px, 2.1vw, 28px); color: #fdfaf4; }

/* ---------- webshop ---------- */
.h2-winkel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 40px; }
.h2-winkel a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; }
.h2-winkel a:hover img { transform: scale(1.06); }

/* ---------- slot ---------- */
.h2-slot { display: grid; gap: 16px; justify-items: center; text-align: center; }
.h2-slot .h2-tekst { text-align: center; }
.h2-slot .h2-kop::after { display: none; }

/* ---------- meeloopbalk ---------- */

.h2 a:focus-visible { outline: 2px solid var(--goud); outline-offset: 4px; }

@media (max-width: 1000px) {
  .h2-stappen { grid-template-columns: 1fr; gap: 34px; }
  .h2-beeld { border-radius: 200px 200px 3px 3px; }
  .h2-tegels { grid-template-columns: repeat(3, 1fr); }
  .h2-winkel { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .h2-tegels, .h2-projecten { grid-template-columns: 1fr 1fr; }
  .h2-winkel { grid-template-columns: 1fr 1fr; }
  .h2-held { min-height: min(78vh, 580px); }

  .h2-lijst li { font-size: 13.5px; }
  /* op mobiel niets onder 13 px: kleiner leest niemand met de telefoon in de hand */
  .h2-kop { font-size: 10.5px; }

}

@media (prefers-reduced-motion: reduce) {
  .h2 *, .h2 *::before, .h2 *::after { animation: none !important; transition-duration: .01ms !important; }
  .h2 [data-mcs-op] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
 * Aanpassingen na de eerste ronde feedback
 * ============================================================ */

/* ---------- tegels: uitleg verschijnt bij hover ---------- */
.h2-tegel-tekst { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: grid; gap: 8px; }
.h2-tegel-tekst .h2-naam { position: static; left: auto; right: auto; bottom: auto; }
.h2-tegel-uitleg,
.h2-tegel-meer {
  color: rgba(247,242,232,.88);
  font-size: 12.5px;
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height .5s var(--ease), opacity .4s var(--ease), transform .5s var(--ease);
}
.h2-tegel-meer { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--goud-licht); }
.h2-tegel:hover .h2-tegel-uitleg,
.h2-tegel:focus-visible .h2-tegel-uitleg { max-height: 120px; opacity: 1; transform: none; }
.h2-tegel:hover .h2-tegel-meer,
.h2-tegel:focus-visible .h2-tegel-meer { max-height: 30px; opacity: 1; transform: none; }
/* het verloop wordt dieper zodra de uitleg verschijnt, anders leest ze niet */
.h2-tegel .h2-laag { transition: background .5s var(--ease); }
.h2-tegel:hover .h2-laag { background: linear-gradient(180deg, rgba(20,17,13,.15) 0%, rgba(20,17,13,.94) 62%); }

/* ---------- vijf stappen naast elkaar ---------- */
.h2-vijf { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.h2-vijf li { display: grid; gap: 12px; align-content: start; }
.h2-vijf-beeld { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; }
.h2-vijf-beeld img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(.9); transition: filter .5s var(--ease), transform 1.2s var(--ease); }
.h2-vijf li:hover .h2-vijf-beeld img { filter: brightness(1) saturate(1); transform: scale(1.05); }
.h2-vijf-nr {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 32px);
  color: #fdfaf4; text-shadow: 0 2px 14px rgba(20,17,13,.6);
  transition: color .4s var(--ease);
}
.h2-vijf li:hover .h2-vijf-nr { color: var(--goud-licht); }
.h2-vijf-beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,0);
  transition: box-shadow .45s var(--ease);
}
.h2-vijf li:hover .h2-vijf-beeld::after { box-shadow: inset 0 0 0 1px rgba(201,169,110,.9); }
.h2-vijf h3 { font-size: clamp(16px, 1.5vw, 20px); }
.h2-vijf .h2-tekst { font-size: 13px; line-height: 1.7; }

/* ---------- meeloopbalk: doorschijnend in plaats van een zwarte balk ---------- */

@media (max-width: 1000px) {
  /* vijf stappen worden een strook die je opzij schuift, met vaste stops */
  .h2-vijf {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 62vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .h2-vijf li { scroll-snap-align: start; }

  /* op aanraakschermen bestaat hover niet: uitleg staat er altijd */
  .h2-tegel-uitleg { max-height: 120px; opacity: 1; transform: none; }
  .h2-tegel .h2-laag { background: linear-gradient(180deg, rgba(20,17,13,.1) 0%, rgba(20,17,13,.92) 58%); }
}

/* ---------- uitgelichte realisatie: linnen kaart in plaats van tekst op de foto ---------- */
.h2-breed { align-items: center; min-height: min(64vh, 620px); }
.h2-breed::after { background: linear-gradient(90deg, rgba(20,17,13,.55) 0%, rgba(20,17,13,.12) 46%, rgba(20,17,13,0) 100%); }
.h2-breed-tekst {
  justify-items: start;
  text-align: left;
  max-width: 460px;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(28px, 3.2vw, 42px);
  background: rgba(239,231,216,.95);
  box-shadow: 0 30px 60px -40px rgba(20,17,13,.8);
  /* de rail staat links: de kaart houdt die vrij */
  margin-left: clamp(64px, 6vw, 92px);
  margin-right: auto;
}
/* fijne gouden binnenlijn, zoals een passe-partout */
.h2-breed-tekst::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(166,131,47,.35);
  pointer-events: none;
}
.h2-breed-tekst { position: relative; }
.h2-breed .h2-kop { color: var(--goud); }
.h2-breed-naam { color: var(--inkt); font-size: clamp(26px, 3.2vw, 42px); line-height: 1.1; }

@media (max-width: 620px) {
  .h2-breed { align-items: flex-end; min-height: min(72vh, 520px); }
  .h2-breed-tekst { max-width: none; margin: 0 14px 14px; padding: 22px 20px 24px; }
}

/* ---------- één knopsysteem ---------- */
/*
 * Vol goud enkel waar de bezoeker echt naartoe moet: de banner, de toonzaal
 * en de meeloopbalk. Alle knoppen midden in de pagina zijn omlijnd, zodat er
 * per scherm maar één knop schreeuwt.
 */

/* ============================================================
   Staande rail links, kaderknoppen en traag meebewegen
   ============================================================ */

/* ---------- knop met kader ---------- */
/*
 * Zelfde taal als de productkaarten in de webshop: een buitenlijn met
 * een fijne binnenlijn die de hoeken afsnijdt.
 */

/* ---------- rail links ---------- */
.h2-rail {
  position: fixed; left: 0; top: 50%; z-index: 45;
  display: grid; gap: 8px;
  transform: translate(-102%, -50%);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.h2-rail.mcs-rail-aan { transform: translate(0, -50%); opacity: 1; }

/*
 * Het fijne zinnetje hangt naast de rail en staat horizontaal: verticale
 * tekst leest niemand twee regels lang. Buiten de stroom, dus de tab blijft kort.
 */

.h2-rail-fijn {
  position: absolute; left: 100%; top: 50%;
  writing-mode: horizontal-tb; text-transform: none;
  width: max-content; max-width: 240px;
  padding: 11px 15px;
  font-size: 11px; line-height: 1.45; letter-spacing: .03em;
  background: rgba(29,26,21,.96); color: #e7ddc9;
  border: 1px solid rgba(201,169,110,.3);
  box-shadow: 10px 14px 34px -22px rgba(20,17,13,.9);
  opacity: 0; pointer-events: none;
  transform: translate(-6px, -50%);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
/* op tablet en telefoon smaller: de rail mag nooit inhoud opeten */
@media (max-width: 900px) {

  .h2-rail-fijn { display: none; }
}
@media (max-width: 620px) {
  .h2-rail { gap: 6px; }

}

/* ---------- traag meebewegen ---------- */
.h2 [data-mcs-traag] { will-change: transform; }
/* schuif en zoom in een variabele, zodat hover de parallax niet wegduwt */
.h2 [data-mcs-traag] img { transform: translate3d(0, var(--mcs-schuif, 0px), 0) scale(var(--mcs-zoom, 1.07)); }
.h2-stap:hover .h2-beeld[data-mcs-traag] img,
.h2-vijf li:hover .h2-vijf-beeld[data-mcs-traag] img,
.h2-project[data-mcs-traag]:hover img { --mcs-zoom: 1.12; }

/* zachter, langer opkomen dan voorheen */
.h2 [data-mcs-op] { transition-duration: 1.15s; }

/* vierkante atelierfoto in een staand kader: iets naar links zodat de schrijnwerker in beeld blijft */
.h2-vijf-beeld img[src*="atelier-maatwerk"] { object-position: 34% center; }

/* restant van de oude onderbalk opgeruimd */
/* op smallere schermen staat de rail dicht bij de tekst: links wat lucht bijgeven */
@media (max-width: 900px) {
  .h2-binnen { padding-left: 62px; }
  .h2-breed-tekst { margin-left: 62px; }
}
@media (max-width: 620px) {
  .h2-binnen { padding-left: 58px; }
  .h2-breed-tekst { margin-inline: 58px 14px; }
}
/* raakvlak op telefoon en tablet minstens 44 px breed (blokas = breedte bij verticale tekst) */
@media (max-width: 900px) {

}

.h2-vijf-link h3 { transition: color .35s var(--ease); }
.h2-vijf li:hover .h2-vijf-link h3 { color: var(--goud); }

/* een zin met een link erin, na een blok */
.h2-navolg { max-width: 720px; margin-top: 26px; }
.h2-navolg a { color: var(--goud); border-bottom: 1px solid rgba(166,131,47,.45); padding-bottom: 1px; }
.h2-navolg a:hover { border-bottom-color: var(--goud); color: var(--goud-diep); }

.h2-bijschrift { margin-top: 14px; font-size: 11px; letter-spacing: .06em; color: var(--inkt-zacht); }

@media (max-width: 1000px) { .h2-landen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {

  /* op de telefoon staat de uitleg meteen open: hover bestaat daar niet */
  .h2-land-fijn { opacity: 1; transform: none; font-size: 10.5px; }

}

/* ---------- lijst bínnen de knop ---------- */
/*
 * De lijst hoort in de knop te liggen, niet eromheen: een haarlijn in
 * inkt op het goud, met dezelfde ingesprongen hoeken.
 */

/* ============================================================
   Knoppen: gevuld voor de hoofdactie, open voor de rest
   ============================================================
 * De vulling neemt het goud van het woord "thuis." in de banner
 * (#c9a96e). Tweede knoppen staan open: doorzichtig, gouden letter,
 * gouden randje - met binnenin dezelfde haarfijne lijst.
 */
:root { --goud-vlak: #c9a96e; --goud-vlak-diep: #b8945a; }

.h2-eer-beeld { position: relative; margin: 0; }
.h2-eer-beeld img { width: 100%; height: clamp(280px, 34vw, 440px); object-fit: cover; display: block; }
/* gouden lijst rond het bekroonde project, met dezelfde ingesprongen hoeken als de knop */
.h2-eer-beeld::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(201,169,110,.7); pointer-events: none;
}
.h2-eer-beeld figcaption {
  position: absolute; left: 26px; bottom: 26px; z-index: 2;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fdfaf4;
  text-shadow: 0 2px 14px rgba(20,17,13,.8);
}
.h2-eer-tekst { display: grid; gap: 12px; }
.h2-eer-tekst h2 { margin-top: 4px; }
.h2-eer-tekst .h2-tekst { max-width: 560px; }

.h2-eer-strook { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 38px); margin-top: 12px; }
.h2-eer-score {
  display: grid; gap: 2px; justify-items: start; padding: 16px 22px 18px;
  background: var(--linnen); border: 1px solid rgba(201,169,110,.45);
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.h2-eer-score:hover { border-color: var(--goud-vlak); transform: translateY(-3px); }
.h2-eer-sterren { color: #b8945a; letter-spacing: .2em; font-size: 12px; }
.h2-eer-getal { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--inkt); }
.h2-eer-getal small { font-size: 15px; color: var(--inkt-zacht); }
.h2-eer-bron { font-size: 10.5px; letter-spacing: .07em; color: var(--inkt-zacht); }
.h2-eer-lijst { display: grid; gap: 8px; }
.h2-eer-lijst li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--inkt-zacht); }
.h2-eer-lijst li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: #b8945a; }
.h2-eer-lijst b { color: var(--inkt); font-weight: 500; }

@media (max-width: 900px) { .h2-eer-rooster { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- werkgebied: tekst uit elkaar, lijn weg ---------- */
.h2-landen li::after { content: none; }

/* ---------- ademruimte ---------- */
.h2-sectie h2 { margin-bottom: 10px; }
.h2-navolg { margin-top: 34px; }
.h2-vijf + .h2-navolg { margin-top: 40px; }
.h2-bijschrift { margin-top: 18px; }

/* ---------- bewijsregel in de banner ---------- */
.h2-bewijs {
  margin-top: 20px; max-width: 640px;
  font-size: 11.5px; letter-spacing: .04em; line-height: 1.7;
  color: rgba(247,242,232,.82);
}

/* ---------- tarieven als troef ---------- */
.h2-troef-lede { max-width: 620px; }
.h2-troef-lijst {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 38px 0 32px; background: rgba(201,169,110,.28);
  border: 1px solid rgba(201,169,110,.28);
}
.h2-troef-lijst li {
  display: grid; gap: 8px; align-content: start;
  padding: 26px 22px 28px; background: var(--eik);
  transition: background .45s var(--ease);
}
.h2-troef-lijst li:hover { background: var(--eik-warm); }
.h2-troef-nr { font-family: var(--serif); font-size: 13px; color: var(--goud-vlak); font-variant-numeric: tabular-nums; }
.h2-troef-lijst h3 { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.22; color: #fdfaf4; margin: 0; }
.h2-troef-lijst p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(231,221,201,.78); }
.h2-bijschrift.licht { color: rgba(231,221,201,.6); }

@media (max-width: 1000px) { .h2-troef-lijst { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .h2-troef-lijst { grid-template-columns: 1fr; } }

.h2-kop { font-size: 11px; }
.h2-tegel-meer { font-size: 10.5px; }

.h2-rail-woord { display: block; }
.h2-rail-fijn {
  position: absolute; left: 100%; top: 50%;
  writing-mode: horizontal-tb; text-transform: none;
  width: max-content; max-width: 240px;
  padding: 11px 15px;
  font-size: 11px; line-height: 1.45; letter-spacing: .03em;
  background: rgba(29,26,21,.96); color: #e7ddc9;
  border: 1px solid rgba(201,169,110,.3);
  box-shadow: 10px 14px 34px -22px rgba(20,17,13,.9);
  opacity: 0; pointer-events: none;
  transform: translate(-6px, -50%);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}

@media (max-width: 900px) {

  .h2-rail-fijn { display: none; }
}

/* ---------- tarieven: iconen en beeld ---------- */
.h2-troef-beeld { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }
.h2-troef-beeld figure { position: relative; margin: 0; overflow: hidden; }
.h2-troef-beeld img { width: 100%; height: clamp(150px, 17vw, 220px); object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.h2-troef-beeld figure:hover img { transform: scale(1.05); }
.h2-troef-beeld figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  font-size: 11px; letter-spacing: .1em; color: #f2ead8;
  background: linear-gradient(to top, rgba(20,17,13,.85), rgba(20,17,13,0));
}
.h2-troef-icoon { display: block; width: 26px; height: 26px; color: var(--goud-vlak); }
.h2-troef-icoon svg { width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; }
.h2-troef-lijst li { gap: 10px; }
.h2-troef-nr { font-size: 11px; letter-spacing: .18em; }

@media (max-width: 900px) { .h2-troef-beeld { grid-template-columns: 1fr; } }

/* ============================================================
   Sluitstuk: kleur en contrast
   ============================================================
 * Eén plek waar het knopgoud vastligt, en één plek waar het diepe
 * goud voor tekst op linnen staat. Alles hierboven is opmaak, dit is
 * kleur. Gemeten tegen de achtergrond waar het effectief op staat.
 */
:root {
  --goud-vlak: #c9a96e;        /* het goud van "thuis." in de banner */
  --goud-vlak-diep: #b8945a;   /* hover van de gevulde knop */
  --goud-tekst: #7a5f20;       /* leesbaar goud op linnen en room */
}

/* losse link in een lopende zin, en de sterren */
.h2-navolg a { color: var(--goud-tekst); border-bottom-color: rgba(122,95,32,.5); }
.h2-eer-sterren { color: var(--goud-tekst); }
.h2-breed .h2-kop, .h2-breed-tekst .h2-kop { color: var(--goud-tekst); }

/* ============================================================
   KNOPPEN EN RAIL, ENIGE BRON
   ============================================================
 * Hieronder staat alles over knoppen. Er is nergens anders in dit
 * bestand nog een knopregel. Ontwerp: passe-partout, een tweede lijn
 * rond de knop die bij hover naar binnen schuift.
 *
 * Twee soorten:
 *   .h2-knop.vol   gouden vlak met inkt, voor de hoofdactie
 *   .h2-knop       open, gouden letter en gouden rand
 *
 * Het thema maakt van elke link in .h2 een uitrekkend grid. Vandaar
 * display en width met !important: zonder dat worden knoppen 400 px.
 */

.h2 .h2-knop {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content;
  position: relative;
  box-sizing: border-box;
  align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  font-family: var(--sans);
  font-size: 11px; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
  border: 1px solid var(--goud-vlak);
  background: transparent; color: var(--goud-vlak);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}

/* de passe-partout */
.h2 .h2-knop::after {
  content: ""; position: absolute; inset: -8px;
  border: 1px solid currentColor; opacity: .4;
  pointer-events: none;
  transition: inset .5s var(--ease), opacity .5s var(--ease);
}
.h2 .h2-knop:hover::after,
.h2 .h2-knop:focus-visible::after { inset: -3px; opacity: .9; }

/* hoofdactie */
.h2 .h2-knop.vol { background: var(--goud-vlak); border-color: var(--goud-vlak); color: #1d1a15; }
.h2 .h2-knop.vol::after { border-color: var(--goud-vlak); opacity: .45; }
.h2 .h2-knop.vol:hover { background: var(--goud-vlak-diep); border-color: var(--goud-vlak-diep); color: #14110d; }
.h2 .h2-knop.vol:hover::after { border-color: var(--goud-vlak-diep); }

/* open knop op donkere grond */
.h2 .h2-knop:not(.vol):hover { background: rgba(201,169,110,.16); color: #f0e2c4; border-color: #f0e2c4; }

/* open knop op linnen of room: dieper goud, anders leest 11 px niet */
.h2 .h2-sectie.creme .h2-knop:not(.vol),
.h2 .h2-sectie.room .h2-knop:not(.vol),
.h2 .h2-breed .h2-knop:not(.vol) { color: var(--goud-tekst); border-color: rgba(122,95,32,.55); }
.h2 .h2-sectie.creme .h2-knop:not(.vol):hover,
.h2 .h2-sectie.room .h2-knop:not(.vol):hover,
.h2 .h2-breed .h2-knop:not(.vol):hover { background: rgba(122,95,32,.1); color: #5e4a17; border-color: #5e4a17; }

/* rijen knoppen: genoeg lucht zodat twee passe-partouts elkaar niet raken */
.h2 .h2-knoppen { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 26px; }
.h2 .h2-knoppen.midden { justify-content: center; margin-top: 46px; }

.h2 .h2-knop:focus-visible { outline: 2px solid var(--goud-vlak); outline-offset: 6px; }

@media (max-width: 620px) {
  .h2 .h2-knop { padding: 0 22px; font-size: 10.5px; letter-spacing: .16em; }
  .h2 .h2-knoppen { gap: 24px; }
}

/* ---------- rail links ---------- */
.h2-rail-tab {
  position: relative;
  display: grid; align-items: center; justify-items: center;
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 22px 13px; min-block-size: 38px;
  font-family: var(--sans);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  background: var(--goud-vlak); border: 1px solid var(--goud-vlak); border-left: 0;
  color: #1d1a15; text-decoration: none;
  box-shadow: 6px 10px 30px -18px rgba(20,17,13,.8);
  transition: background-color .45s var(--ease), color .45s var(--ease), padding .45s var(--ease);
}
.h2-rail-tab:hover { background: var(--goud-vlak-diep); border-color: var(--goud-vlak-diep); color: #14110d; padding-right: 17px; }
.h2-rail-tab:focus-visible { outline: 2px solid #fdfaf4; outline-offset: -4px; }
@media (max-width: 900px) {
  .h2-rail-tab { padding: 16px 10px; font-size: 9.5px; letter-spacing: .18em; min-block-size: 44px; }
}
/* de uitleg staat bij elk land open, niet pas bij hover */
.h2-land-fijn { opacity: 1; transform: none; }

/* ============================================================
   Uitgelicht project: terug zoals het was
   ============================================================
 * Geen linnen kaart meer. De titel staat groot en wit op de foto,
 * met een tekstlink eronder in plaats van een knop.
 */
.h2-breed { align-items: end; min-height: min(78vh, 700px); }
.h2-breed::after {
  background: linear-gradient(to top, rgba(20,17,13,.72) 0%, rgba(20,17,13,.28) 38%, rgba(20,17,13,0) 68%);
}
.h2-breed-tekst {
  background: none; box-shadow: none; border: 0;
  max-width: 720px; padding: 0 0 clamp(44px, 6vw, 86px);
  margin-left: clamp(64px, 6vw, 96px); margin-right: auto;
  gap: 10px;
}
.h2-breed-tekst::before { content: none; }
.h2-breed .h2-kop { color: rgba(247,242,232,.82); }
.h2-breed-naam {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.2vw, 74px); line-height: 1.02;
  color: #fdfaf4;
  text-shadow: 0 4px 30px rgba(20,17,13,.5);
}

/* de knop wordt hier een tekstlink met pijl */
.h2 .h2-breed .h2-knop {
  min-height: 0; padding: 0 0 6px; margin-top: 14px;
  background: none !important; border: 0; border-bottom: 1px solid rgba(253,250,244,.5);
  color: #fdfaf4; letter-spacing: .18em;
  transition: border-color .4s var(--ease), color .4s var(--ease), gap .4s var(--ease);
  gap: 12px;
}
.h2 .h2-breed .h2-knop::after {
  content: "→"; position: static; inset: auto;
  border: 0; opacity: 1; font-size: 14px; line-height: 1;
  transition: transform .45s var(--ease);
}
.h2 .h2-breed:hover .h2-knop { border-bottom-color: var(--goud-vlak); color: var(--goud-vlak); }
.h2 .h2-breed:hover .h2-knop::after { transform: translateX(6px); }

@media (max-width: 620px) {
  .h2-breed-tekst { margin-inline: 44px 18px; padding-bottom: 34px; }
  .h2-breed { min-height: min(70vh, 520px); }
}
/* de tekstlink bij het uitgelichte project houdt zijn witte onderlijn */
.h2 .h2-breed .h2-knop:not(.vol) {
  border: 0; border-bottom: 1px solid rgba(253,250,244,.5); color: #fdfaf4;
}
.h2 .h2-breed:hover .h2-knop:not(.vol),
.h2 .h2-breed .h2-knop:not(.vol):hover {
  background: none; border-bottom-color: var(--goud-vlak); color: var(--goud-vlak);
}

/* ============================================================
   Werkwijze als tijdlijn
   ============================================================
 * Vijf hoofdstukken op één gouden lijn. De kaarten staan om beurten
 * iets hoger en iets lager, het cijfer hangt half over het beeld, en
 * de lijn kleurt mee terwijl de sectie in beeld komt.
 */
.h2-vijf-lijn {
  position: relative; height: 1px; margin: 46px 0 0;
  background: rgba(122,95,32,.22);
}
.h2-vijf-lijn span {
  position: absolute; inset: 0 auto 0 0;
  width: var(--mcs-voort, 0%); background: var(--goud-tekst);
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}

.h2-vijf {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  align-items: start;
}
.h2-vijf li {
  position: relative;
  padding-top: 34px;
  transition: transform .55s var(--ease);
}
/* om beurten hoger en lager, dat geeft de rij ritme */
.h2-vijf li:nth-child(even) { padding-top: 74px; }

/* het stipje op de lijn */
.h2-vijf li::before {
  content: ""; position: absolute; top: -3px; left: 22px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--linnen); border: 1px solid var(--goud-tekst);
  transition: background-color .45s var(--ease), transform .45s var(--ease);
}
.h2-vijf li:nth-child(even)::before { top: -3px; }
.h2-vijf li:hover::before { background: var(--goud-tekst); transform: scale(1.5); }

/* het lijntje van de lijn naar de kaart */
.h2-vijf li::after {
  content: ""; position: absolute; top: 0; left: 25px; width: 1px;
  height: 26px; background: rgba(122,95,32,.3);
}
.h2-vijf li:nth-child(even)::after { height: 66px; }

.h2-vijf-link { display: block; color: inherit; }
.h2-vijf-beeld { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.h2-vijf-beeld img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.82) saturate(.95);
  transition: transform 1.3s var(--ease), filter .6s var(--ease);
}
.h2-vijf li:hover { transform: translateY(-6px); }
.h2-vijf li:hover .h2-vijf-beeld img { transform: scale(1.06); filter: brightness(1) saturate(1); }

/* het cijfer hangt half over de onderrand van het beeld */
.h2-vijf-nr {
  position: absolute; left: 14px; bottom: -20px; z-index: 2;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(40px, 4.4vw, 62px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(253,250,244,.9);
  text-shadow: 0 6px 24px rgba(20,17,13,.45);
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.h2-vijf li:hover .h2-vijf-nr { color: var(--goud-vlak); -webkit-text-stroke-color: var(--goud-vlak); }

.h2-vijf h3 {
  margin: 32px 0 6px;
  font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2;
  color: var(--inkt);
  transition: color .4s var(--ease);
}
.h2-vijf li:hover h3 { color: var(--goud-tekst); }
.h2-vijf .h2-tekst { font-size: 13px; line-height: 1.6; }

@media (max-width: 1000px) {
  /* op smallere schermen wordt het een strook die je opzij schuift */
  .h2-vijf-lijn { display: none; }
  .h2-vijf {
    grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: minmax(212px, 66vw);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 12px; margin-top: 30px;
  }
  .h2-vijf li, .h2-vijf li:nth-child(even) { padding-top: 24px; scroll-snap-align: start; }
  .h2-vijf li::before, .h2-vijf li::after { display: none; }
}

/* ---------- waarin wij verschillen ---------- */
.h2-anders { padding-block: clamp(52px, 6vw, 92px); }
.h2-anders-rooster {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 64px);
  margin-top: 22px;
  align-items: start;
}
.h2-anders-lead {
  margin: 0;
  font-family: var(--serif); font-size: clamp(19px, 1.9vw, 26px); line-height: 1.35;
  color: var(--inkt);
}
.h2-anders-tekst { display: grid; gap: 14px; }
.h2-anders-tekst p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--inkt-zacht); }
.h2-anders-tekst b { color: var(--inkt); font-weight: 500; }
@media (max-width: 860px) { .h2-anders-rooster { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- werkgebied als kaart ---------- */
.h2-kaart {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: 34px;
}
.h2-kaart-vlak { position: relative; }
.h2-kaart-svg { display: block; width: 100%; height: auto; max-height: 460px; }
.h2-kaart-svg .kl {
  fill: rgba(29,26,21,.07);
  stroke: rgba(29,26,21,.28); stroke-width: 1.2; stroke-linejoin: round;
  transition: fill .6s var(--ease);
}
.h2-kaart-svg .kl-bel, .h2-kaart-svg .kl-nld, .h2-kaart-svg .kl-deu, .h2-kaart-svg .kl-fra, .h2-kaart-svg .kl-lux {
  fill: rgba(122,95,32,.16); stroke: rgba(122,95,32,.5);
}
.h2-kaart-svg .kl-bel { fill: rgba(122,95,32,.34); }
.h2-kaart-svg .kp { fill: var(--goud-tekst); }
.h2-kaart-vlak:hover .h2-kaart-svg .kl { fill: rgba(122,95,32,.24); }

.h2-kaart-punt {
  position: absolute; left: 46%; top: 27%;
  transform: translate(14px, -50%);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--goud-tekst);
  white-space: nowrap;
}

.h2-kaart-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.h2-kaart-lijst li {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid rgba(29,26,21,.1);
  align-items: baseline;
}
.h2-kaart-lijst li:first-child { border-top: 1px solid rgba(29,26,21,.1); }
.h2-kaart-lijst b { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.5vw, 21px); color: var(--inkt); }
.h2-kaart-lijst span { font-size: 13px; color: var(--inkt-zacht); }
.h2-kaart-extra b { color: var(--goud-tekst); }

@media (max-width: 860px) {
  .h2-kaart { grid-template-columns: 1fr; gap: 22px; }
  .h2-kaart-svg { max-height: 340px; margin-inline: auto; }
  .h2-kaart-lijst li { grid-template-columns: 118px 1fr; gap: 10px; }
}

/* ---------- bekroond werk: twee kolommen ---------- */
.h2-eer-rooster {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 64px); align-items: center;
}
.h2-eer-beeld { position: relative; margin: 0; }
.h2-eer-beeld img { width: 100%; height: clamp(280px, 32vw, 420px); object-fit: cover; display: block; }
.h2-eer-beeld::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201,169,110,.7); pointer-events: none; }
.h2-eer-beeld figcaption {
  position: absolute; left: 26px; bottom: 26px; z-index: 2;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fdfaf4;
  text-shadow: 0 2px 14px rgba(20,17,13,.8);
}
.h2-eer-tekst { display: grid; gap: 12px; }
@media (max-width: 900px) { .h2-eer-rooster { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- werkwijze: leesbaar cijfer, rechte rij ---------- */
/*
 * De omlijnde cijfers verdwenen in lichte foto's en de versprongen
 * kaarten maakten de rij rommelig. Nu staan alle kaarten gelijk en zit
 * het cijfer op een donker plaatje in de hoek van het beeld.
 */
.h2-vijf li, .h2-vijf li:nth-child(even) { padding-top: 34px; }
.h2-vijf li::after, .h2-vijf li:nth-child(even)::after { height: 26px; }

.h2-vijf-nr {
  left: 0; bottom: auto; top: 0;
  display: grid; place-items: center;
  min-width: 52px; height: 40px; padding: 0 12px;
  font-size: 20px; font-style: italic; line-height: 1;
  color: #f5e7c6; background: rgba(20,17,13,.82);
  -webkit-text-stroke: 0;
  text-shadow: none;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.h2-vijf li:hover .h2-vijf-nr { background: var(--goud-tekst); color: #fdfaf4; -webkit-text-stroke-color: transparent; }
.h2-vijf h3 { margin-top: 18px; }

/* ---------- tarieven: onderschrift botst niet meer met de knoppen ---------- */
.h2-troeven .h2-knoppen { margin-bottom: 8px; }
.h2-troeven .h2-bijschrift { margin-top: 26px; }
/* de landenlijst noemt gewoon de landen, zonder bijzin per regel */
.h2-kaart-lijst li { display: block; grid-template-columns: none; padding: 15px 0; }
.h2-kaart-lijst li { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 25px); color: var(--inkt); }
.h2-kaart-extra { color: var(--goud-tekst); }

/* ---------- stijlen in blokjes ---------- */
.h2-stijl-kop {
  margin: 34px 0 14px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--goud-tekst);
}
.h2-stijlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.h2-stijl { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.h2-stijl-beeld { position: absolute; inset: 0; display: block; overflow: hidden; }
.h2-stijl-beeld img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72) saturate(.95);
  transition: transform 1.2s var(--ease), filter .5s var(--ease);
}
.h2-stijl:hover .h2-stijl-beeld img { transform: scale(1.06); filter: brightness(.9) saturate(1); }
.h2-stijl::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid rgba(253,250,244,.35);
  transition: inset .45s var(--ease), border-color .45s var(--ease);
  pointer-events: none;
}
.h2-stijl:hover::after { inset: 6px; border-color: var(--goud-vlak); }
.h2-stijl-naam {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 16px 14px;
  font-family: var(--serif); font-size: clamp(16px, 1.4vw, 20px); color: #fdfaf4;
  background: linear-gradient(to top, rgba(20,17,13,.72), rgba(20,17,13,0));
}
@media (max-width: 700px) { .h2-stijlen { grid-template-columns: 1fr 1fr; } }

/* de passe-partout steekt 8 px buiten de knop; anders begint een knoppenrij
   8 px links van de blokken erboven en loopt de kantlijn niet door */
.h2 .h2-knoppen:not(.midden) { padding-left: 8px; }
.h2-held .h2-knoppen:not(.midden) { padding-left: 8px; }

/* ---------- knop duidelijker ---------- */
/*
 * Twee dunne lijntjes op linnen lazen te licht. De open knop krijgt nu
 * een vleugje vulling, een steviger rand en een donkerder letter, en
 * vult zich helemaal bij hover.
 */
.h2 .h2-knop {
  min-height: 54px; padding: 0 34px;
  font-size: 11.5px; letter-spacing: .18em; font-weight: 500;
}
.h2 .h2-sectie.creme .h2-knop:not(.vol),
.h2 .h2-sectie.room .h2-knop:not(.vol) {
  background: rgba(122,95,32,.07);
  border-color: rgba(122,95,32,.8);
  color: #6f5619;
}
.h2 .h2-sectie.creme .h2-knop:not(.vol)::after,
.h2 .h2-sectie.room .h2-knop:not(.vol)::after { border-color: rgba(122,95,32,.4); opacity: .5; }
.h2 .h2-sectie.creme .h2-knop:not(.vol):hover,
.h2 .h2-sectie.room .h2-knop:not(.vol):hover {
  background: var(--goud-tekst); border-color: var(--goud-tekst); color: #fdfaf4;
}
.h2 .h2-sectie.creme .h2-knop:not(.vol):hover::after,
.h2 .h2-sectie.room .h2-knop:not(.vol):hover::after { border-color: var(--goud-tekst); opacity: .9; }

/* op donkere grond hetzelfde principe */
.h2 .h2-sectie.donker .h2-knop:not(.vol),
.h2 .h2-held .h2-knop:not(.vol) {
  background: rgba(201,169,110,.08); border-color: rgba(201,169,110,.8); color: #e8d3a6;
}
.h2 .h2-sectie.donker .h2-knop:not(.vol):hover,
.h2 .h2-held .h2-knop:not(.vol):hover { background: var(--goud-vlak); color: #1d1a15; border-color: var(--goud-vlak); }

/* de gevulde knop mag zwaarder wegen */
.h2 .h2-knop.vol { box-shadow: 0 14px 30px -22px rgba(20,17,13,.9); }

/* ---------- onze stijlen: eigen kopje ---------- */
.h2-stijl-kop { margin: clamp(34px, 4vw, 52px) 0 18px; display: grid; gap: 6px; max-width: 620px; }
.h2-stijl-kop h3 {
  margin: 0;
  font-family: var(--serif); font-size: clamp(21px, 2.1vw, 28px); line-height: 1.2; color: var(--inkt);
}
.h2-stijl-kop .h2-tekst { margin: 0; font-size: 13.5px; }

.h2-stijl-naam { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h2-stijl-naam i {
  font-style: normal; font-size: 14px; color: var(--goud-vlak);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.h2-stijl:hover .h2-stijl-naam i { opacity: 1; transform: none; }

/* ============================================================
   De pagina als één plan
   ============================================================
 * Rechts loopt een fijne lijn mee van de eerste tot de laatste sectie,
 * met een halte per hoofdstuk. Ze vult zich terwijl u scrolt, zodat de
 * pagina aanvoelt als één tekening in plaats van losse blokken.
 */
.h2-plan {
  position: fixed; right: clamp(12px, 1.6vw, 26px); top: 14vh; bottom: 14vh;
  width: 12px; z-index: 30;
  opacity: 0; transform: translateX(6px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.h2-plan.mcs-plan-aan { opacity: 1; transform: none; }
.h2-plan-lijn { position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: rgba(122,95,32,.22); display: block; }
.h2-plan-lijn i {
  position: absolute; left: 0; top: 0; width: 1px; display: block;
  height: var(--mcs-plan, 0%); background: var(--goud-tekst);
  transition: height .25s linear;
}
.h2-plan-haltes { position: absolute; inset: 0; display: block; }
.h2-plan-halte {
  position: absolute; left: 2px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--linnen); border: 1px solid rgba(122,95,32,.45);
  transform: translateY(-50%);
  transition: background-color .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.h2-plan-halte.bereikt { background: var(--goud-tekst); border-color: var(--goud-tekst); }
.h2-plan-halte.hier { transform: translateY(-50%) scale(1.8); }
.h2-plan.donker .h2-plan-lijn { background: rgba(201,169,110,.2); }
.h2-plan.donker .h2-plan-lijn i { background: var(--goud-vlak); }
.h2-plan.donker .h2-plan-halte { background: var(--eik); border-color: rgba(201,169,110,.5); }
.h2-plan.donker .h2-plan-halte.bereikt { background: var(--goud-vlak); border-color: var(--goud-vlak); }
@media (max-width: 900px) { .h2-plan { display: none; } }

/* ---------- achtergrond die de banden aan elkaar bindt ---------- */
.h2-sectie.creme, .h2-sectie.room, .h2-sectie.donker { position: relative; }
.h2-sectie.creme::before, .h2-sectie.room::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(122,95,32,.045) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(122,95,32,.045) 0 1px, transparent 1px 72px);
  background-position: 0 var(--mcs-raster, 0px);
}
.h2-sectie.donker::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(201,169,110,.1), transparent 62%);
}
.h2-sectie > .h2-binnen { position: relative; z-index: 1; }

/* ---------- beelden komen op met een veeg, niet met een vervaging ---------- */
.h2 [data-mcs-op] .h2-beeld img,
.h2 [data-mcs-op] .h2-stijl-beeld img,
.h2 [data-mcs-op] .h2-vijf-beeld img { clip-path: inset(0 0 0 0); }
.h2 [data-mcs-op]:not(.mcs-zichtbaar) .h2-beeld img,
.h2 [data-mcs-op]:not(.mcs-zichtbaar) .h2-stijl-beeld img,
.h2 [data-mcs-op]:not(.mcs-zichtbaar) .h2-vijf-beeld img { clip-path: inset(0 0 100% 0); }
.h2 .h2-beeld img, .h2 .h2-stijl-beeld img, .h2 .h2-vijf-beeld img {
  transition: transform 1.3s var(--ease), filter .6s var(--ease), clip-path 1.1s var(--ease);
}

/* ---------- cijferband ---------- */
.h2-cijfers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: rgba(201,169,110,.22);
  border-block: 1px solid rgba(201,169,110,.22);
}
.h2-cijfer { display: grid; gap: 4px; padding: clamp(26px, 3vw, 40px) clamp(16px, 2vw, 30px); background: var(--eik); }
.h2-cijfer b {
  font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 50px); line-height: 1;
  color: #fdfaf4; font-variant-numeric: tabular-nums;
}
.h2-cijfer span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--goud-vlak); }
@media (max-width: 700px) { .h2-cijfers { grid-template-columns: 1fr 1fr; } }

/* ---------- editoriaal: de kop blijft staan terwijl het beeld doorloopt ---------- */
@media (min-width: 1001px) {
  .h2-editoriaal { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(30px, 4vw, 70px); align-items: start; }
  .h2-editoriaal-kop { position: sticky; top: 140px; display: grid; gap: 10px; }
}
.h2-editoriaal-kop h2 { margin: 0; }
/* de webshoptegels lopen naast de vaste kop; om beurten hoger en lager */
.h2-editoriaal-inhoud .h2-winkel { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.h2-editoriaal-inhoud .h2-winkel a:nth-child(even) { margin-top: 26px; }
.h2-cijferband { padding-block: 0; }
.h2-cijferband > .h2-binnen { padding-inline: 0; max-width: none; }

/* ---------- opruimen na de themastijlen ---------- */
/*
 * Het thema zet h3 en sommige alinea's in kapitalen. Binnen deze pagina
 * schrijven we gewoon, alleen de bovenkopjes staan in kapitalen.
 */
.h2 h3, .h2-stijl-kop h3, .h2-stijl-kop .h2-tekst, .h2 .h2-tekst, .h2 p, .h2 li { text-transform: none; }
.h2 .h2-kop, .h2 .h2-knop, .h2-rail-tab, .h2-cijfer span, .h2-troef-nr { text-transform: uppercase; }
.h2-stijl-kop h3 { color: var(--inkt); letter-spacing: 0; }
.h2-stijl-kop .h2-tekst { color: var(--inkt-zacht); letter-spacing: .01em; }

/* de gloed bovenaan de donkere band gaf een naadlijn onder de vormovergang */
.h2-sectie.donker::before { content: none; }

/* naam van de stijl duidelijk op de tegel */
.h2-stijl-naam {
  padding: 30px 14px 12px;
  font-size: clamp(15px, 1.3vw, 19px);
  text-shadow: 0 2px 16px rgba(20,17,13,.7);
}
.h2-stijl-naam i { color: var(--goud-vlak); }

/* ============================================================
   Banner: slideshow met index
   ============================================================
 * Titel links onder, rechts een dunne index met het project dat in
 * beeld is. De dia's wisselen met een trage vervaging en een lichte
 * inzoom, zodat het beeld leeft zonder te schreeuwen.
 */
.h2-dia-huis { position: absolute; inset: 0; overflow: hidden; }
.h2-dia {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 58%;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.4s var(--ease), transform 9s linear;
}
.h2-dia.aan { opacity: 1; transform: scale(1.12); }

.h2-held-tekst {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: clamp(20px, 4vw, 60px);
  padding-block: clamp(48px, 8vh, 100px) clamp(46px, 7vh, 84px);
}
.h2-held-hoek { display: grid; justify-items: start; gap: 14px; }
.h2-held-hoek h1 { margin: 0; }

.h2-held-link {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 6px; padding-bottom: 6px;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #fdfaf4; border-bottom: 1px solid rgba(253,250,244,.5);
  transition: color .4s var(--ease), border-color .4s var(--ease), gap .4s var(--ease);
}
.h2-held-link i { font-style: normal; font-size: 14px; }
.h2-held-link:hover { color: var(--goud-vlak); border-bottom-color: var(--goud-vlak); gap: 18px; }

@media (max-width: 860px) {
  .h2-held-tekst { grid-template-columns: 1fr; align-items: end; }
  .h2-index { justify-items: start; grid-auto-flow: column; gap: 18px; }

}

@media (prefers-reduced-motion: reduce) {
  .h2-dia, .h2-dia.aan { transform: none; }

}
/* op de telefoon moeten de indexknopjes met de duim te raken zijn */
@media (max-width: 860px) {

  .h2-index { gap: 14px; }
}

/* ---------- index: teller en streepjes ---------- */
.h2-index { display: grid; gap: 12px; justify-items: end; align-content: end; }
.h2-index-teller {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-family: var(--serif); color: #fdfaf4;
}
.h2-index-nu { font-size: 26px; line-height: 1; color: var(--goud-vlak); font-variant-numeric: tabular-nums; }
.h2-index-van { font-size: 12px; letter-spacing: .1em; color: rgba(253,250,244,.6); }

.h2-index-strepen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 320px; }
.h2-index-streep {
  width: 16px; height: 22px; padding: 10px 0 0;
  background: none; border: 0; cursor: pointer;
}
.h2-index-streep i { display: block; height: 2px; background: rgba(253,250,244,.3); transition: background-color .4s var(--ease), height .3s var(--ease); }
.h2-index-streep:hover i { background: rgba(253,250,244,.7); }
.h2-index-streep.aan i { background: var(--goud-vlak); height: 3px; }
.h2-index-streep:focus-visible { outline: 2px solid var(--goud-vlak); outline-offset: 2px; }

/* ---------- trage inzoom per dia ---------- */
.h2-dia { transform: scale(1.04); transition: opacity 1.5s var(--ease); }
.h2-dia.aan { animation: h2-inzoom 9s linear forwards; }
@keyframes h2-inzoom {
  from { transform: scale(1.04); }
  to { transform: scale(1.15); }
}

@media (max-width: 860px) {
  .h2-index { justify-items: start; }
  .h2-index-strepen { justify-content: flex-start; max-width: 100%; }
  .h2-index-streep { width: 14px; height: 44px; padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .h2-dia, .h2-dia.aan { animation: none; transform: none; }
}
/* raakvlakken groot genoeg: de tekstlink in de banner en de streepjes */
.h2 .h2-held-link { min-height: 44px; align-items: flex-end; padding-bottom: 10px; }
.h2-index-streep { height: 30px; padding-top: 14px; }
/* de bewijsregel onder de bannerlink: klein, maar het staat er */
.h2-bewijs {
  margin: 16px 0 0; max-width: 560px;
  font-size: 11.5px; letter-spacing: .04em; line-height: 1.7;
  color: rgba(247,242,232,.78);
}

/* ---------- banner: tekst moet leesbaar blijven op elke dia ---------- */
/*
 * Sommige beelden zijn licht, zoals een plan of een witte badkamer.
 * Daarom een tweede sluier onderaan links, precies waar de tekst staat.
 */
.h2-held::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(20,17,13,.86) 0%, rgba(20,17,13,.42) 34%, rgba(20,17,13,0) 62%),
    linear-gradient(100deg, rgba(20,17,13,.7) 0%, rgba(20,17,13,.18) 46%, rgba(20,17,13,0) 74%);
}
.h2-held .h2-kop, .h2-held h1, .h2-held .h2-held-link, .h2-held .h2-bewijs {
  text-shadow: 0 2px 18px rgba(20,17,13,.55);
}
.h2 .h2-held-link { border-bottom-color: rgba(253,250,244,.75); }

/* ---------- stijlen met uitleg ---------- */
.h2-stijl { aspect-ratio: auto; }
.h2-stijl-beeld { position: relative; inset: auto; display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.h2-stijl::after { inset: 9px 9px calc(100% - 9px); border: 0; }
.h2-stijl-naam {
  position: static; padding: 14px 0 4px; background: none;
  color: var(--inkt); text-shadow: none;
  font-size: clamp(17px, 1.5vw, 21px);
}
.h2-stijl-uitleg {
  display: block; font-size: 12.5px; line-height: 1.55; color: var(--inkt-zacht);
}
.h2-stijl:hover .h2-stijl-naam { color: var(--goud-tekst); }
.h2-stijl:hover::after { inset: 9px 9px calc(100% - 9px); border: 0; }

/* ============================================================
   Architecturale details in de achtergrond
   ============================================================
 * Kleine verwijzingen naar een bouwplan: maatlijnen in de marge, een
 * hoekmerk bij elke sectie en een fijn kruisje op de rasterknopen.
 * Alles decoratief, nooit over de inhoud.
 */
.h2-sectie.creme > .h2-binnen::before,
.h2-sectie.room > .h2-binnen::before {
  content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  border-left: 1px solid rgba(122,95,32,.35);
  border-top: 1px solid rgba(122,95,32,.35);
  pointer-events: none;
  transform: translate(-14px, -18px);
}
.h2-sectie.creme > .h2-binnen::after,
.h2-sectie.room > .h2-binnen::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  border-right: 1px solid rgba(122,95,32,.35);
  border-bottom: 1px solid rgba(122,95,32,.35);
  pointer-events: none;
  transform: translate(14px, 18px);
}
.h2-sectie.donker > .h2-binnen::before,
.h2-sectie.donker > .h2-binnen::after { border-color: rgba(201,169,110,.35); }
.h2-sectie.donker > .h2-binnen::before {
  content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  border-left: 1px solid rgba(201,169,110,.35); border-top: 1px solid rgba(201,169,110,.35);
  transform: translate(-14px, -18px); pointer-events: none;
}
.h2-sectie.donker > .h2-binnen::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  border-right: 1px solid rgba(201,169,110,.35); border-bottom: 1px solid rgba(201,169,110,.35);
  transform: translate(14px, 18px); pointer-events: none;
}
.h2-binnen { position: relative; }

/* een maatlijn met streepjes, zoals op een plan, links in de marge */
.h2-sectie.creme::after, .h2-sectie.room::after {
  content: ""; position: absolute; left: clamp(6px, 1.4vw, 22px); top: 12%; bottom: 12%;
  width: 6px; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(122,95,32,.28) 0 1px, transparent 1px 100%) 0 0 / 6px 44px repeat-y,
    linear-gradient(to bottom, rgba(122,95,32,.16), rgba(122,95,32,.16)) 3px 0 / 1px 100% no-repeat;
}
.h2-sectie.donker::after {
  content: ""; position: absolute; left: clamp(6px, 1.4vw, 22px); top: 12%; bottom: 12%;
  width: 6px; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(201,169,110,.3) 0 1px, transparent 1px 100%) 0 0 / 6px 44px repeat-y,
    linear-gradient(to bottom, rgba(201,169,110,.16), rgba(201,169,110,.16)) 3px 0 / 1px 100% no-repeat;
}
@media (max-width: 1100px) {
  .h2-sectie.creme::after, .h2-sectie.room::after, .h2-sectie.donker::after { display: none; }
}

/* ============================================================
   Telefoon en tablet
   ============================================================
 * Op een klein scherm telt elke pixel: de banner krijgt een zwaardere
 * sluier zodat de tekst altijd leest, de index wordt één balk in plaats
 * van negentien streepjes, en de roosters krijgen ademruimte.
 */
@media (max-width: 860px) {
  .h2-held { min-height: min(82vh, 620px); }
  .h2-held::before {
    background:
      linear-gradient(to top, rgba(20,17,13,.92) 0%, rgba(20,17,13,.55) 42%, rgba(20,17,13,.12) 78%),
      linear-gradient(100deg, rgba(20,17,13,.55) 0%, rgba(20,17,13,.2) 60%, rgba(20,17,13,.05) 100%);
  }
  .h2-held-tekst { padding-block: clamp(40px, 8vh, 70px) clamp(30px, 5vh, 54px); gap: 12px; }
  .h2-held h1 { font-size: clamp(31px, 8.4vw, 44px); }
  .h2-bewijs { font-size: 11px; line-height: 1.65; max-width: 34ch; }
  .h2 .h2-held-link { font-size: 11px; letter-spacing: .16em; }

  /* de index wordt een balk met een teller ernaast */
  .h2-index { grid-auto-flow: column; align-items: center; gap: 12px; justify-items: start; width: 100%; }
  .h2-index-teller { order: 1; }
  .h2-index-nu { font-size: 19px; }
  .h2-index-van { font-size: 11px; }
  .h2-index-strepen { order: 2; flex: 1; gap: 3px; }
  .h2-index-streep { flex: 1; width: auto; min-width: 0; height: 34px; padding-top: 16px; }
  .h2-index-streep i { height: 2px; }
  .h2-index-streep.aan i { height: 3px; }
}

@media (max-width: 620px) {
  /* twee tegels naast elkaar blijft leesbaar; drie wordt gepriegel */
  .h2-tegels, .h2-winkel, .h2-projecten, .h2-stijlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .h2-troef-lijst { grid-template-columns: 1fr; }
  .h2-sectie { padding-block: clamp(44px, 9vw, 64px); }
  .h2-sectie h2 { font-size: clamp(23px, 6.6vw, 30px); }
  .h2-anders-lead { font-size: clamp(17px, 5vw, 21px); }
  .h2-stijl-uitleg { font-size: 11.5px; }
  .h2-kaart-lijst li { font-size: 17px; padding: 12px 0; }
  .h2-cijfer { padding: 20px 16px; }
  .h2-cijfer b { font-size: clamp(26px, 8vw, 34px); }
  .h2-eer-beeld img { height: clamp(220px, 60vw, 300px); }
  .h2-troef-beeld img { height: clamp(140px, 40vw, 200px); }
}

/* tablet: vier kolommen worden er twee, niet drie halve */
@media (min-width: 621px) and (max-width: 1000px) {
  .h2-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2-winkel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h2-stijlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2-troef-beeld { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h2-troef-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2-editoriaal-inhoud .h2-winkel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- rail: aanwezig, niet opdringerig ---------- */
/*
 * Op de telefoon nam de gouden rail te veel van het scherm. Nu glas met
 * een gouden letter, en smaller. Bij hover of aanraking wordt hij vol.
 */
.h2-rail-tab {
  background: rgba(20,17,13,.55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(201,169,110,.4); border-left: 0;
  color: var(--goud-vlak);
  box-shadow: none;
}
.h2-rail-tab:hover, .h2-rail-tab:focus-visible {
  background: var(--goud-vlak); border-color: var(--goud-vlak); color: #1d1a15;
}
@media (max-width: 860px) {
  .h2-rail-tab { padding: 14px 8px; font-size: 9px; letter-spacing: .16em; background: rgba(20,17,13,.42); }
}

/* ---------- aanbodtegels op klein scherm ---------- */
/*
 * De uitleg hoort bij hover. Op een aanraakscherm bestaat hover niet,
 * dus stond alles open en werd het een muur tekst. Daar tonen we enkel
 * de naam; de uitleg staat op de aanbodpagina zelf.
 */
@media (hover: none), (max-width: 860px) {
  .h2-tegel-uitleg, .h2-tegel-meer { display: none; }
  .h2-tegel-tekst { padding-bottom: 16px; }
}

/* ---------- namen op foto's: altijd leesbaar ---------- */
/*
 * Op een klein scherm staat de naam boven een lichte plek van de foto.
 * Een verloop vanaf de onderrand plus een zachte schaduw lost dat op,
 * zonder de foto donker te maken.
 */
.h2-project .h2-laag, .h2-tegel .h2-laag, .h2-winkel .h2-laag {
  background: linear-gradient(to top, rgba(20,17,13,.88) 0%, rgba(20,17,13,.45) 34%, rgba(20,17,13,.05) 68%);
}
.h2-project-tekst, .h2-naam, .h2-naam.klein {
  text-shadow: 0 2px 14px rgba(20,17,13,.75);
}

@media (max-width: 860px) {
  .h2-project-tekst { left: 14px; right: 14px; bottom: 14px; gap: 3px; }
  .h2-project-naam { font-size: clamp(16px, 4.6vw, 21px); line-height: 1.15; }
  .h2-project .h2-kop { font-size: 9.5px; letter-spacing: .14em; }
  .h2-naam.klein { font-size: 13px; }
  .h2-project { aspect-ratio: 4 / 3.4; }
}

/* op de telefoon staan alle knoppenrijen links, ook die met .midden */
@media (max-width: 860px) {
  .h2 .h2-knoppen, .h2 .h2-knoppen.midden {
    justify-content: flex-start;
    padding-left: 8px;
    gap: 22px;
    margin-top: 30px;
  }
  .h2 .h2-knoppen.midden .h2-knop { justify-self: start; }
  .h2 .h2-knop { width: auto !important; }
}

/* ---------- namen bij de haltes van de plan-lijn ---------- */
/*
 * Het bolletje alleen zegt niets. Naast elke halte staat nu de titel
 * van dat hoofdstuk: die van de sectie waar u bent staat altijd open,
 * de andere verschijnen zodra u de lijn nadert.
 */
.h2-plan { width: auto; pointer-events: auto; }
.h2-plan-haltes { left: auto; right: 0; width: 12px; }
.h2-plan-naam {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--goud-tekst);
  opacity: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.h2-plan-halte.hier .h2-plan-naam { opacity: 1; transform: translateY(-50%); }
.h2-plan:hover .h2-plan-naam { opacity: .85; transform: translateY(-50%); }
.h2-plan:hover .h2-plan-halte.hier .h2-plan-naam { opacity: 1; }
.h2-plan.donker .h2-plan-naam { color: var(--goud-vlak); }

/* ---------- rail: doorzichtig, met schaduw en een zachte fade ---------- */
/*
 * Glas in plaats van een gouden blok: je ziet de foto erdoor, maar de
 * letters blijven leesbaar door de schaduw en de fijne gouden lijn.
 * De rail komt op wanneer de banner voorbij is en verdwijnt weer bij de
 * footer, zodat hij nooit in de weg zit.
 */
.h2-rail {
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.h2-rail.mcs-rail-weg { opacity: 0; transform: translate(-40%, -50%); visibility: hidden; }

.h2-rail-tab {
  background: rgba(20,17,13,.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(201,169,110,.34); border-left: 0;
  color: #f0e2c4;
  text-shadow: 0 1px 10px rgba(20,17,13,.8);
  box-shadow: 4px 8px 34px -18px rgba(20,17,13,.95), inset 0 0 40px rgba(201,169,110,.05);
}
.h2-rail-tab:hover, .h2-rail-tab:focus-visible {
  background: rgba(201,169,110,.9); color: #17140f; border-color: rgba(201,169,110,.9);
  text-shadow: none;
}
@media (max-width: 860px) {
  .h2-rail-tab { background: rgba(20,17,13,.26); }
}

/* ---------- gespiegelde overgang: de punt wijst naar beneden ---------- */
.h2-overgang.gespiegeld svg { transform: scaleY(-1); }

/* ---------- knopkleur volgt de grond waarop hij staat ---------- */
/*
 * Op linnen en room is het diepe goud nodig om te lezen, op de donkere
 * banden juist het lichte goud. Dit is de enige plek waar dat verschil
 * geregeld wordt.
 */
.h2-sectie.donker .h2-knop:not(.vol),
.h2-held .h2-knop:not(.vol) {
  color: #e8d3a6; border-color: rgba(201,169,110,.75); background: rgba(201,169,110,.08);
}
.h2-sectie.donker .h2-knop:not(.vol)::after,
.h2-held .h2-knop:not(.vol)::after { border-color: rgba(201,169,110,.45); }
.h2-sectie.donker .h2-knop:not(.vol):hover,
.h2-held .h2-knop:not(.vol):hover { background: var(--goud-vlak); color: #1d1a15; border-color: var(--goud-vlak); }

.h2-sectie.donker .h2-knop.vol,
.h2-held .h2-knop.vol { background: var(--goud-vlak); border-color: var(--goud-vlak); color: #1d1a15; }
.h2-sectie.donker .h2-knop.vol::after,
.h2-held .h2-knop.vol::after { border-color: var(--goud-vlak); }

/* ---------- bannerlink moet wit blijven, wat het thema ook wil ---------- */
.h2 .h2-held .h2-held-link,
.h2-held .h2-held-link { color: #fdfaf4; }
.h2 .h2-held .h2-held-link:hover,
.h2-held .h2-held-link:hover { color: var(--goud-vlak); }

/* ---------- schets van een plattegrond als decor ---------- */
/*
 * Een fragment van een grondplan in haarlijnen: muren, een deurboog,
 * meubels en maatlijnen. Puur decoratief, dus laag in contrast en
 * nooit boven de tekst.
 */
.h2-schets {
  position: absolute; right: clamp(10px, 3vw, 60px); top: 50%;
  width: clamp(220px, 26vw, 380px); height: auto;
  transform: translateY(-50%);
  pointer-events: none; z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.mcs-zichtbaar ~ .h2-schets, .h2-binnen .h2-schets { opacity: .5; }
.h2-schets-lijnen path {
  fill: none; stroke: rgba(122,95,32,.42); stroke-width: 1.1;
  stroke-linecap: square; stroke-linejoin: miter;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: h2-teken 2.6s var(--ease) forwards;
}
.h2-schets-lijnen path:nth-child(2) { animation-delay: .2s; }
.h2-schets-lijnen path:nth-child(3) { animation-delay: .35s; }
.h2-schets-lijnen path:nth-child(4) { animation-delay: .5s; }
.h2-schets-lijnen path:nth-child(5) { animation-delay: .6s; }
.h2-schets-lijnen path:nth-child(6) { animation-delay: .75s; }
.h2-schets-lijnen path:nth-child(7) { animation-delay: .85s; }
.h2-schets-lijnen path:nth-child(8) { animation-delay: .95s; }
.h2-schets-maat path {
  fill: none; stroke: rgba(122,95,32,.3); stroke-width: 1; stroke-dasharray: 4 5;
}
@keyframes h2-teken { to { stroke-dashoffset: 0; } }

/* op de donkere band in goud */
.h2-sectie.donker .h2-schets-lijnen path { stroke: rgba(201,169,110,.4); }
.h2-sectie.donker .h2-schets-maat path { stroke: rgba(201,169,110,.28); }

@media (max-width: 1100px) { .h2-schets { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .h2-schets-lijnen path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- rail past zich aan de grond aan ---------- */
/*
 * Donker glas op een lichte sectie werd een grijze plaat. Daarom twee
 * gedaanten: linnen glas met diep goud op de lichte banden, donker glas
 * met licht goud zodra er een donkere sectie of de banner achter staat.
 */
.h2-rail-tab {
  background: rgba(247,242,232,.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  border: 1px solid rgba(122,95,32,.28); border-left: 0;
  color: var(--goud-tekst);
  text-shadow: none;
  box-shadow: 3px 6px 26px -16px rgba(20,17,13,.5);
}
.h2-rail-tab:hover, .h2-rail-tab:focus-visible {
  background: var(--goud-tekst); border-color: var(--goud-tekst); color: #fdfaf4;
}
.h2-rail.op-donker .h2-rail-tab {
  background: rgba(20,17,13,.34);
  border-color: rgba(201,169,110,.34);
  color: #f0e2c4;
  text-shadow: 0 1px 10px rgba(20,17,13,.8);
  box-shadow: 4px 8px 30px -18px rgba(20,17,13,.95);
}
.h2-rail.op-donker .h2-rail-tab:hover, .h2-rail.op-donker .h2-rail-tab:focus-visible {
  background: rgba(201,169,110,.92); border-color: rgba(201,169,110,.92); color: #17140f; text-shadow: none;
}

/* ---------- etiketten van de plan-lijn ---------- */
.h2-plan-naam {
  font-size: 8.5px; letter-spacing: .2em;
  right: 15px;
  color: rgba(122,95,32,.85);
}
.h2-plan.donker .h2-plan-naam { color: rgba(201,169,110,.9); }

/* ---------- achtergrond: bijna onzichtbaar ---------- */
.h2-sectie.creme::before, .h2-sectie.room::before {
  background-image:
    repeating-linear-gradient(to right, rgba(122,95,32,.022) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(122,95,32,.022) 0 1px, transparent 1px 88px);
}
.h2-sectie.creme::after, .h2-sectie.room::after, .h2-sectie.donker::after { opacity: .45; }
.h2-sectie.creme > .h2-binnen::before, .h2-sectie.room > .h2-binnen::before,
.h2-sectie.creme > .h2-binnen::after, .h2-sectie.room > .h2-binnen::after { opacity: .5; }
.h2-schets { opacity: .3; }
.h2-binnen .h2-schets { opacity: .3; }
.h2-schets-lijnen path { stroke: rgba(122,95,32,.3); }
.h2-schets-maat path { stroke: rgba(122,95,32,.2); }

/* ---------- haltes zijn knoppen ---------- */
.h2-plan { pointer-events: auto; }
.h2-plan-halte { padding: 0; cursor: pointer; }
.h2-plan-halte:focus-visible { outline: 2px solid var(--goud-tekst); outline-offset: 3px; }
.h2-plan-halte:hover .h2-plan-naam { opacity: 1; }
.h2-plan-halte:hover { transform: translateY(-50%) scale(1.5); }

/* ---------- etiketten: er staat er altijd maar één ---------- */
/*
 * Alle namen tegelijk tonen liep over elkaar zodra twee secties dicht
 * bij elkaar liggen. Nu enkel de halte waar u bent, plus die waar de
 * muis boven hangt.
 */
.h2-plan:hover .h2-plan-naam { opacity: 0; }
.h2-plan-halte.hier .h2-plan-naam,
.h2-plan-halte:hover .h2-plan-naam,
.h2-plan-halte:focus-visible .h2-plan-naam { opacity: 1; transform: translateY(-50%); }
.h2-plan-naam {
  max-width: 30ch;
  font-size: 8.5px;
  padding: 3px 7px;
  background: rgba(20,17,13,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #f0e2c4;
  border: 1px solid rgba(201,169,110,.22);
}
.h2-plan:not(.donker) .h2-plan-naam {
  background: rgba(247,242,232,.86);
  border-color: rgba(122,95,32,.22);
  color: var(--goud-tekst);
}

/* de geflipte overgang: dezelfde vorm, punt naar beneden */
.h2-overgang.geflipt svg { transform: scaleY(-1); }
.h2-overgang { display: block; line-height: 0; }

/* ---------- achtergronddetails ook op klein scherm ---------- */
/*
 * Op de telefoon stonden het raster, de maatlijn en de schets uit.
 * Ze mogen blijven, alleen kleiner en nog lichter, zodat ze de tekst
 * niet in de weg zitten.
 */
@media (max-width: 1100px) {
  .h2-sectie.creme::after, .h2-sectie.room::after, .h2-sectie.donker::after {
    display: block; left: 6px; width: 5px; opacity: .32;
  }
  .h2-schets { display: block; width: clamp(150px, 46vw, 240px); right: -20px; opacity: .16; }
}
@media (max-width: 620px) {
  .h2-sectie.creme::before, .h2-sectie.room::before {
    background-image:
      repeating-linear-gradient(to right, rgba(122,95,32,.03) 0 1px, transparent 1px 54px),
      repeating-linear-gradient(to bottom, rgba(122,95,32,.03) 0 1px, transparent 1px 54px);
  }
  .h2-schets { width: 150px; right: -30px; opacity: .13; }
  .h2-sectie.creme > .h2-binnen::before, .h2-sectie.room > .h2-binnen::before,
  .h2-sectie.donker > .h2-binnen::before { transform: translate(-8px, -12px); width: 18px; height: 18px; }
  .h2-sectie.creme > .h2-binnen::after, .h2-sectie.room > .h2-binnen::after,
  .h2-sectie.donker > .h2-binnen::after { transform: translate(8px, 12px); width: 18px; height: 18px; }
}

/* de rail links mag op de telefoon smaller en korter */
@media (max-width: 860px) {
  .h2-rail-tab { padding: 12px 7px; font-size: 8.5px; letter-spacing: .14em; min-block-size: 34px; }
  .h2-rail { gap: 5px; }
}
@media (max-width: 620px) {
  .h2-rail-tab { padding: 10px 6px; font-size: 8px; letter-spacing: .12em; min-block-size: 30px; }
  .h2-binnen { padding-left: 46px; }
  .h2-breed-tekst { margin-inline: 46px 14px; }
}

/* ---------- knoppenrijen op de telefoon ---------- */
/*
 * Onder elkaar oogde het los. Twee knoppen passen naast elkaar zodra de
 * binnenruimte en de letterafstand iets krimpen. Rijen die gecentreerd
 * horen te staan, blijven dat ook op een klein scherm.
 */
@media (max-width: 860px) {
  .h2 .h2-knoppen { flex-wrap: wrap; gap: 16px; padding-left: 8px; }
  .h2 .h2-knoppen.midden { justify-content: center; padding-left: 0; }
  .h2 .h2-knoppen.midden .h2-knop { justify-self: center; }
  .h2-slot .h2-knoppen { justify-content: center; padding-left: 0; }
  .h2 .h2-knop { padding: 0 18px; font-size: 10px; letter-spacing: .14em; min-height: 48px; }
}
@media (max-width: 430px) {
  .h2 .h2-knop { padding: 0 13px; font-size: 9.5px; letter-spacing: .1em; min-height: 46px; }
  .h2 .h2-knoppen { gap: 14px; }
  /* de lijst rond de knop mag hier dichter zitten, anders raken ze elkaar */
  .h2 .h2-knop::after { inset: -6px; }
  .h2 .h2-knop:hover::after { inset: -3px; }
}

/* het etiket zonder plaatje: enkel de letters, zoals eerder */
.h2-plan-naam {
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  color: rgba(122,95,32,.9);
}
.h2-plan.donker .h2-plan-naam, .h2-plan:not(.donker) .h2-plan-naam { background: none; border: 0; }
.h2-plan.donker .h2-plan-naam { color: rgba(201,169,110,.92); }










@media (max-width: 620px) {


}

/* de rail vult zich bij hover met het champagnegoud, niet met mosterd */
.h2-rail-tab:hover, .h2-rail-tab:focus-visible,
.h2-rail.op-donker .h2-rail-tab:hover, .h2-rail.op-donker .h2-rail-tab:focus-visible {
  background: var(--goud-vlak);
  border-color: var(--goud-vlak);
  color: #1d1a15;
  text-shadow: none;
}

/* ============================================================
   Schaal: van één meubelstuk tot een volledig project
   ============================================================
 * Vier tekeningen die in complexiteit groeien, op één doorlopende lijn.
 * De eerste is een stoel, de laatste een plan met tafels. Zo zie je in
 * één oogopslag dat alles mag, van klein tot volledig.
 */
.h2-schaal { margin-top: clamp(34px, 4vw, 54px); display: grid; gap: 8px; }
.h2-schaal-zin {
  margin: 0 0 6px; max-width: 620px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.25; color: var(--inkt);
}

.h2-schaal-rij {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  position: relative;
}
/* de doorlopende lijn waarop de tekeningen staan */
.h2-schaal-rij::before {
  content: ""; position: absolute; left: 0; right: 0; top: 62px; height: 1px;
  background: linear-gradient(to right, rgba(122,95,32,.12), rgba(122,95,32,.42), rgba(122,95,32,.12));
}

.h2-schaal-rij li {
  position: relative; display: grid; gap: 8px; align-content: start;
  padding-top: 0;
}
.h2-schaal-beeld {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 88px; height: 88px;
  background: var(--linnen);
  border: 1px solid rgba(122,95,32,.24);
  transition: border-color .45s var(--ease), background-color .45s var(--ease), transform .45s var(--ease);
}
.h2-schaal-rij li:nth-child(1) .h2-schaal-beeld { width: 70px; height: 70px; margin-top: 18px; }
.h2-schaal-rij li:nth-child(2) .h2-schaal-beeld { width: 78px; height: 78px; margin-top: 10px; }
.h2-schaal-rij li:nth-child(3) .h2-schaal-beeld { width: 84px; height: 84px; margin-top: 4px; }

.h2-schaal-beeld svg { width: 56%; height: 56%; }
.h2-schaal-beeld svg path, .h2-schaal-beeld svg circle {
  fill: none; stroke: var(--goud-tekst); stroke-width: 1.4;
  stroke-linejoin: miter; stroke-linecap: square;
  transition: stroke .4s var(--ease);
}
.h2-schaal-rij li:hover .h2-schaal-beeld { border-color: var(--goud-tekst); transform: translateY(-4px); }

.h2-schaal-naam {
  margin-top: 6px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--inkt);
}
.h2-schaal-uitleg { font-size: 12.5px; line-height: 1.55; color: var(--inkt-zacht); max-width: 24ch; }

/* op donkere grond */
.h2-sectie.donker .h2-schaal-zin { color: #fdfaf4; }
.h2-sectie.donker .h2-schaal-beeld { background: var(--eik); border-color: rgba(201,169,110,.28); }
.h2-sectie.donker .h2-schaal-beeld svg path, .h2-sectie.donker .h2-schaal-beeld svg circle { stroke: var(--goud-vlak); }
.h2-sectie.donker .h2-schaal-naam { color: #fdfaf4; }
.h2-sectie.donker .h2-schaal-uitleg { color: rgba(231,221,201,.75); }

@media (max-width: 860px) {
  .h2-schaal-rij { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .h2-schaal-rij::before { display: none; }
  .h2-schaal-rij li .h2-schaal-beeld,
  .h2-schaal-rij li:nth-child(1) .h2-schaal-beeld,
  .h2-schaal-rij li:nth-child(2) .h2-schaal-beeld,
  .h2-schaal-rij li:nth-child(3) .h2-schaal-beeld { width: 64px; height: 64px; margin-top: 0; }
  .h2-schaal-uitleg { font-size: 11.5px; max-width: none; }
}

/* ============================================================
   Meer lucht tussen de delen
   ============================================================
 * De secties stonden dicht op elkaar, waardoor de pagina druk aanvoelt.
 * Ruimere marges boven en onder, en meer afstand tussen kop, tekst en
 * de blokken eronder.
 */
.h2-sectie { padding-block: clamp(72px, 9vw, 148px); }
.h2-sectie h2 { margin-bottom: 16px; }
.h2-kop { margin-bottom: 4px; }

.h2-stappen, .h2-tegels, .h2-projecten, .h2-winkel, .h2-vijf, .h2-troef-lijst, .h2-stijlen {
  margin-top: clamp(34px, 4vw, 56px);
}
.h2-troef-beeld { margin-top: clamp(30px, 3.4vw, 46px); }
.h2-kaart { margin-top: clamp(34px, 4vw, 54px); }
.h2-schaal { margin-top: clamp(46px, 5vw, 74px); }
.h2-stijl-kop { margin-top: clamp(52px, 6vw, 84px); }
.h2 .h2-knoppen { margin-top: clamp(34px, 4vw, 52px); }
.h2 .h2-knoppen.midden { margin-top: clamp(40px, 4.5vw, 60px); }
.h2-navolg { margin-top: clamp(34px, 4vw, 50px); }
.h2-anders-rooster { margin-top: clamp(22px, 2.6vw, 36px); }
.h2-eer-rooster { gap: clamp(34px, 4.5vw, 76px); }

@media (max-width: 620px) {
  .h2-sectie { padding-block: clamp(56px, 13vw, 86px); }
  .h2-stappen, .h2-tegels, .h2-projecten, .h2-winkel, .h2-vijf, .h2-troef-lijst, .h2-stijlen { margin-top: 28px; }
}

/* ---------- kaart van Europa ---------- */
/*
 * Heel Europa staat er, maar alleen de landen waar effectief gewerkt
 * wordt zijn ingekleurd. De rest blijft een licht silhouet, zodat je in
 * één oogopslag ziet waar het zwaartepunt ligt.
 */
.h2-kaart-svg { max-height: 520px; }
.h2-kaart-svg .kl {
  fill: rgba(29,26,21,.05);
  stroke: rgba(29,26,21,.14); stroke-width: .8; stroke-linejoin: round;
  transition: fill .6s var(--ease);
}
.h2-kaart-svg .kl.kern {
  fill: rgba(122,95,32,.34);
  stroke: rgba(122,95,32,.55); stroke-width: 1;
}
.h2-kaart-vlak:hover .h2-kaart-svg .kl.kern { fill: rgba(122,95,32,.46); }
.h2-kaart-vlak:hover .h2-kaart-svg .kl { fill: rgba(29,26,21,.08); }

/* de badge van de award */
.h2-eer-badge {
  display: block; width: clamp(150px, 15vw, 200px); height: auto;
  margin: 4px 0 10px;
  opacity: .92;
  mix-blend-mode: multiply;
}
.h2-sectie.donker .h2-eer-badge { mix-blend-mode: normal; filter: invert(1) brightness(1.6); }

/* ---------- beoordelingen van klanten ---------- */
/*
 * Vier echte stemmen, met naam en bron. Geen sterrenschema in de code:
 * beoordelingen van Google of Trustpilot overnemen in eigen schema is
 * tegen de regels. Zichtbaar op de pagina mag het wel.
 */
.h2-stemmen { margin-top: clamp(44px, 5vw, 72px); display: grid; gap: 20px; }
.h2-stemmen-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; }
.h2-stemmen-cijfer { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12.5px; color: var(--inkt-zacht); }
.h2-stemmen-cijfer a { color: var(--inkt-zacht); border-bottom: 1px solid rgba(122,95,32,.3); padding-bottom: 2px; transition: color .35s var(--ease), border-color .35s var(--ease); }
.h2-stemmen-cijfer a:hover { color: var(--goud-tekst); border-color: var(--goud-tekst); }
.h2-stemmen-cijfer b { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--inkt); }

.h2-stemmen-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(122,95,32,.2); border: 1px solid rgba(122,95,32,.2); }
.h2-stem {
  margin: 0; display: grid; gap: 12px; align-content: start;
  padding: 24px 22px 26px; background: var(--room);
  transition: background-color .45s var(--ease);
}
.h2-stem:hover { background: #fbf7ef; }
.h2-stem-sterren { color: #b8945a; letter-spacing: .18em; font-size: 11px; }
.h2-stem blockquote {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--inkt);
  font-family: var(--serif);
}
.h2-stem figcaption { display: grid; gap: 2px; }
.h2-stem-naam { font-size: 12px; letter-spacing: .1em; color: var(--inkt); }
.h2-stem-bron { font-size: 11px; color: var(--inkt-zacht); }

.h2-sectie.donker .h2-stem { background: var(--eik); }
.h2-sectie.donker .h2-stem blockquote { color: #f2ead8; }
.h2-sectie.donker .h2-stem-naam { color: #fdfaf4; }

@media (max-width: 1000px) { .h2-stemmen-rij { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .h2-stemmen-rij { grid-template-columns: 1fr; } .h2-stem { padding: 20px 18px 22px; } }
/* zes beoordelingen: drie per rij op groot scherm */
.h2-stemmen-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .h2-stemmen-rij { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .h2-stemmen-rij { grid-template-columns: 1fr; } }

/* ---------- meer lucht en scheiding binnen een sectie ---------- */
/*
 * Drie onderwerpen onder één kop liepen in elkaar over. Nu een fijne
 * lijn tussen de delen en fors meer ruimte, zodat het oog rust krijgt.
 */
.h2-schaal, .h2-stijl-kop {
  position: relative;
  padding-top: clamp(44px, 5vw, 72px);
  margin-top: clamp(46px, 5.5vw, 80px);
}
.h2-schaal::before, .h2-stijl-kop::before {
  content: ""; position: absolute; top: 0; left: 0; width: min(160px, 30%); height: 1px;
  background: linear-gradient(to right, rgba(122,95,32,.5), rgba(122,95,32,0));
}
.h2-stijlen { margin-top: clamp(28px, 3vw, 40px); }

/* de schets mag niet achter de schaaltegels vallen */
.h2-anders .h2-schets { top: 26%; opacity: .18; }
@media (max-width: 1400px) { .h2-anders .h2-schets { display: none; } }

/* ---------- beoordelingen als één rij die opzij schuift ---------- */
/*
 * Twee rijen namen te veel hoogte. Nu één rij die je horizontaal
 * doorschuift, met vaste stops zodat elke kaart netjes uitlijnt.
 */
.h2-stemmen-rij {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 26vw);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  gap: 1px;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(122,95,32,.4) transparent;
}
.h2-stemmen-rij::-webkit-scrollbar { height: 5px; }
.h2-stemmen-rij::-webkit-scrollbar-thumb { background: rgba(122,95,32,.4); }
.h2-stemmen-rij::-webkit-scrollbar-track { background: rgba(122,95,32,.08); }
.h2-stem { scroll-snap-align: start; }

/* een hint dat er meer staat dan wat je ziet */
.h2-stemmen { position: relative; }
.h2-stemmen::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 8px; width: 56px;
  background: linear-gradient(to left, var(--room), rgba(247,242,232,0));
  pointer-events: none;
}
.h2-sectie.creme .h2-stemmen::after { background: linear-gradient(to left, var(--linnen), rgba(239,231,216,0)); }

@media (max-width: 1000px) { .h2-stemmen-rij { grid-auto-columns: minmax(260px, 74vw); } }
@media (max-width: 620px) { .h2-stemmen-rij { grid-auto-columns: minmax(240px, 86vw); } }