/* Corstiaans Glazeniers — every colour from palette.json */
:root {
  --navy-900: #0A151A;
  --navy: #0F1F29;
  --navy-600: #22394A;
  --navy-400: #5B6B75;
  --groen: #1F3E32;
  --groen-500: #3F6B5A;
  --groen-300: #A8C3B5;
  --groen-100: #E3ECE6;
  --groen-50: #F0F5F1;
  --olijf-700: #526A34;
  --olijf: #6E8748;
  --olijf-300: #B3C298;
  --olijf-100: #E6EBDB;
  --amber-600: #A86F12;
  --amber: #C98A22;
  --amber-200: #F1DFB8;
  --amber-100: #F8EFDC;
  --wit: #FFFFFF;
  --papier: #FBFAF7;
  --kalk: #F1EEE8;
  --kalk-diep: #E6E1D6;
  --lijn: #D6D0C3;
  --grijs: #54554F;
  --wa: #25D366;

  --wrap: 1312px;
  --binnen: 1180px;
  --goot: clamp(16px, 4.4vw, 64px);
  --serif: "Spectral", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, sans-serif;
  --hand: "Allison", cursive;
  --kop-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--kalk);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--olijf); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 92px; }
html.kijker-open { overflow: hidden; }

/* ---------- the lockup: the mark file, GLAZENIERS as the logo sets it ---------- */
.lockup { position: relative; display: inline-block; width: var(--w); vertical-align: top; }
.lockup__merk { width: 100%; height: auto; }
.lockup__naam {
  position: absolute;
  left: 33.4%;
  top: 71.6%;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(var(--w) * 0.0605);
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--groen);
  white-space: nowrap;
}
.lockup__slogan {
  position: absolute;
  left: 15.4%;
  top: 103%;
  font-family: var(--serif);
  font-weight: 500;
  font-size: calc(var(--w) * 0.0585);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--grijs);
}
.lockup--nav { --w: 136px; }
.lockup--nav .lockup__naam { font-weight: 600; }

/* ---------- section announcement: the logo's stroke and its spaced capitals ---------- */
.aankondiging {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--groen);
}
.aankondiging__streep {
  width: 48px;
  height: 7px;
  flex: none;
  background: var(--olijf);
  clip-path: polygon(0 78%, 100% 0, 100% 46%, 2% 100%);
}
.sectie-kop {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- buttons ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 8px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--wit);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.knop svg { width: 18px; height: 18px; }
.knop:hover { background: var(--groen); border-color: var(--groen); }
.knop--stil { background: transparent; color: var(--navy); border-color: var(--navy); }
.knop--stil:hover { background: var(--groen-100); border-color: var(--navy); color: var(--navy); }
.knop--licht { background: var(--papier); border-color: var(--papier); color: var(--navy); }
.knop--licht:hover { background: var(--kalk); border-color: var(--kalk); color: var(--navy); }
.knop--stil-licht { background: transparent; color: var(--papier); border-color: var(--groen-300); }
.knop--stil-licht:hover { background: var(--groen-500); border-color: var(--groen-300); color: var(--wit); }
.knop--wa { background: var(--wa); border-color: var(--wa); color: var(--wit); }
.knop--wa:hover { background: var(--wa); border-color: var(--wa); box-shadow: 0 12px 24px -12px rgba(10, 21, 26, .55); transform: translateY(-1px); }
.knop--wa svg { width: 20px; height: 20px; }
.paar-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.acties { display: flex; flex-wrap: wrap; gap: 12px; }

.sterren { display: inline-flex; gap: 2px; color: var(--amber); }
.sterren svg { width: 1em; height: 1em; }

/* =========================================================== HEADER */
.kop {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(241, 238, 232, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.kop__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--goot);
  height: var(--kop-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.kop__merk { flex: none; text-decoration: none; display: block; padding-top: 2px; }
.kop__nav { margin-left: auto; }
.kop__lijst { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.kop__lijst > li > a,
.dd__knop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15.5px;
  text-decoration: none;
  white-space: nowrap;
}
.kop__lijst > li > a:hover, .dd__knop:hover { background: var(--kalk-diep); }
.dd { position: relative; }
.dd__chevron { width: 15px; height: 15px; transition: transform .18s; }
.dd__lijst {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--navy-600);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 22px 44px -22px rgba(15, 31, 41, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.dd__lijst::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dd:hover .dd__lijst, .dd:focus-within .dd__lijst, .dd.is-open .dd__lijst { opacity: 1; visibility: visible; transform: none; }
.dd:hover .dd__chevron, .dd.is-open .dd__chevron { transform: rotate(180deg); }
.dd__lijst a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
}
.dd__lijst a:hover { background: var(--groen-100); }
.kop__acties { display: flex; align-items: center; gap: 8px; }
.kop__bel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--wit);
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kop__bel:hover { background: var(--groen); }
.kop__bel svg { width: 17px; height: 17px; }
.kop__wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 2px solid var(--wa);
  background: var(--papier);
  color: var(--wa);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.kop__wa svg { width: 20px; height: 20px; }
.kop__wa:hover { box-shadow: 0 8px 18px -10px rgba(10, 21, 26, .5); }
.kop__menu { display: none; }

/* =========================================================== FOLD */
.vouw { background: var(--kalk); padding: 34px 0 132px; position: relative; }
.vouw__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--goot);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(36px, 4.6vw, 72px);
  align-items: stretch;
}
.vouw__tekst { padding-top: 4px; }
.vouw__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--grijs);
}
.stip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--olijf);
  box-shadow: 0 0 0 4px var(--olijf-100);
  animation: stip 2.6s ease-in-out infinite;
}
@keyframes stip { 50% { box-shadow: 0 0 0 7px var(--olijf-100); } }
@media (prefers-reduced-motion: reduce) { .stip { animation: none; } }

.lockup--vouw { --w: clamp(260px, 30.5vw, 440px); margin-left: -0.6%; display: block; }
.vouw__kop {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(44px, 6.1vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: clamp(16px, 1.8vw, 26px) 0 0;
  color: var(--navy);
}
.vouw__kop2 { display: block; }
/* the ochre marker behind the lower half of "Snel vervangen." — draw b's band (bak2-l209-b .hl) in b's amber,
   picked by Sem 2026-11-02; a's olive stroke is gone (style.before-markering.css). b's stops are 55%–93% of
   Figtree's box; Spectral's box is taller (1.53em against 1.2em), so here the stops are moved to put the band
   where b has it against the letters: from 0.59 of the x-height above the baseline to 0.16em under it */
.markering {
  white-space: nowrap;
  background: linear-gradient(to bottom, transparent 0 52%, #E2A72E 52% 80%, transparent 80%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .07em; margin: 0 -.07em;
}
.vouw__onder {
  font-size: clamp(17px, 1.42vw, 20.5px);
  line-height: 1.5;
  color: var(--navy-600);
  max-width: 31em;
  margin: clamp(18px, 1.8vw, 26px) 0 clamp(22px, 2.2vw, 30px);
}

.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 690px; }
.tegel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 17px 22px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, background-color .18s;
  min-width: 0;
}
.tegel__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tegel__label svg { width: 17px; height: 17px; }
.tegel__nr {
  font-size: clamp(22px, 2.45vw, 35px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tegel--bel { background: var(--navy); color: var(--wit); }
.tegel--bel:hover { background: var(--groen); }
.tegel--wa { background: var(--wa); color: var(--wit); }
.tegel--wa .tegel__nr, .tegel--wa .tegel__label { text-shadow: 0 1px 1px rgba(10, 21, 26, .18); }
.tegel--wa:hover, .tegel--bel:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -16px rgba(10, 21, 26, .55); }

.kennis {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 2.2vw, 28px);
  padding: 7px 22px 7px 7px;
  border-radius: 999px;
  background: var(--papier);
  border: 1px solid var(--lijn);
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s;
}
.kennis:hover { border-color: var(--olijf); box-shadow: 0 10px 24px -16px rgba(15, 31, 41, .45); }
.kennis__gezicht {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--kalk-diep);
  box-shadow: 0 0 0 2px var(--papier), 0 0 0 3.5px var(--olijf-300);
}
.kennis__gezicht img {
  position: absolute;
  max-width: none;
  width: 553px;
  height: 369px;
  left: -228px;
  top: -5px;
}
.kennis__tekst { display: flex; flex-direction: column; }
.kennis__naam { font-family: var(--hand); font-size: 50px; line-height: 0.62; padding-top: 10px; color: var(--navy); }
.kennis__zin { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--groen); margin-top: 4px; }

.vouw__beeld { position: relative; min-height: 560px; }
.vouw__foto {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--kalk-diep);
  box-shadow: 0 40px 70px -46px rgba(15, 31, 41, .6);
}
.vouw__foto::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px;
  pointer-events: none;
}
.vouw__open { display: block; width: 100%; height: 100%; }
.vouw__open img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.vouw__foto .label--klein { left: auto; right: 18px; bottom: 18px; }

.oordeel-chip {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 11px 16px 11px 14px;
  border-radius: 10px;
  background: rgba(251, 250, 247, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-left: 5px solid var(--groen-300);
  box-shadow: 0 14px 30px -18px rgba(10, 21, 26, .55);
  text-decoration: none;
  color: var(--navy);
}
.oordeel-chip__platform { grid-column: 1 / -1; font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.oordeel-chip__regel { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; white-space: nowrap; }
.oordeel-chip__regel .sterren { font-size: 17px; }
.oordeel-chip__aantal { font-size: 14px; color: var(--grijs); white-space: nowrap; }
.oordeel-chip:hover { background: var(--papier); }

.vouw__inzet {
  position: absolute;
  left: -46px;
  bottom: 64px;
  z-index: 3;
  width: 196px;
  margin: 0;
  padding: 8px 8px 12px;
  border-radius: 10px;
  background: var(--papier);
  box-shadow: 0 24px 44px -20px rgba(10, 21, 26, .5);
}
.vouw__inzet .open { display: block; width: 100%; }
.vouw__inzet img { width: 100%; height: 196px; object-fit: cover; object-position: 50% 70%; border-radius: 6px; }
.vouw__inzet figcaption { padding: 9px 4px 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }

/* ---------- labels and stamp on photographs ---------- */
.label--klein {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 6px;
  border-radius: 6px;
  background: rgba(15, 31, 41, .66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--wit);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.label--klein svg { width: 13px; height: 13px; color: var(--amber-200); }

.label--groot {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "pin waar" "pin wanneer" "link link";
  justify-content: start;
  column-gap: 10px;
  align-items: center;
  max-width: calc(100% - 32px);
  padding: 12px 18px 12px 13px;
  border-radius: 8px;
  border-left: 4px solid var(--groen-300);
  background: rgba(15, 31, 41, .74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--wit);
  pointer-events: none;
}
.label__pin { grid-area: pin; width: 28px; height: 28px; color: var(--amber-200); }
.label__waar { grid-area: waar; font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.05; }
.label__wanneer { grid-area: wanneer; font-size: 15px; font-weight: 500; line-height: 1.3; opacity: .9; }
.label__link {
  grid-area: link;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--olijf-300);
  text-decoration: none;
  pointer-events: auto;
}
.label__link:hover { color: var(--wit); text-decoration: underline; }

.stempel {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: block;
  width: 136px;
  pointer-events: none;
  opacity: .93;
  filter: drop-shadow(0 1px 1.5px rgba(10, 21, 26, .7)) drop-shadow(0 0 10px rgba(10, 21, 26, .25));
}
.stempel img { width: 100%; height: auto; }
.stempel span {
  position: absolute;
  left: 33.4%;
  top: 71.6%;
  font-size: 8.4px;
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--papier);
}
.stempel--klein { width: 112px; top: 12px; right: 12px; }
.stempel--klein span { font-size: 6.9px; }

.open { display: block; cursor: zoom-in; }
.open img { transition: transform .5s ease, filter .3s; }
.open:hover img { filter: brightness(1.04); }

/* =========================================================== TRUST STRIP — a pane laid over the seam */
.strook {
  position: relative;
  z-index: 5;
  margin-top: -96px;
  padding: 0 var(--goot);
  background: linear-gradient(to bottom, transparent 96px, var(--papier) 96px);
}
.strook__ruit {
  position: relative;
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(31, 62, 50, .22);
  background: rgba(251, 250, 247, .8);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 34px 60px -34px rgba(15, 31, 41, .5), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
/* the green edge a pane shows side-on */
.strook__ruit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(to right, var(--groen-500), var(--groen-300) 60%, var(--groen-100));
}
/* a reflection across the glass */
.strook__ruit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 52%, rgba(255, 255, 255, .55) 58%, transparent 63%, transparent 68%, rgba(255, 255, 255, .35) 70%, transparent 73%);
  pointer-events: none;
}
.strook__vak { position: relative; z-index: 1; padding: 26px 34px 26px 46px; }
.strook__vak + .strook__lood + .strook__vak { padding-left: 34px; }
.strook__klein {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--groen-500);
}
.strook__groot {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.25vw, 30px);
  line-height: 1.12;
  color: var(--navy);
}
.strook__uitleg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--grijs); }
.strook__uitleg a { color: var(--groen); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.strook__lood { position: relative; z-index: 1; justify-self: center; width: 6px; margin: 16px 0; border-radius: 3px; background: var(--navy-600); }
.strook__lood::before, .strook__lood::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--navy-600);
}
.strook__lood::before { top: -7px; }
.strook__lood::after { bottom: -7px; }

/* =========================================================== EVEN VOORSTELLEN */
.ev { background: var(--papier); padding: 0 0 0; position: relative; }
.ev__in {
  max-width: var(--binnen);
  margin: 0 auto;
  padding: clamp(56px, 6vw, 84px) var(--goot) 0;
  box-sizing: content-box;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.ev__portret {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--kalk-diep);
  box-shadow: 0 40px 70px -48px rgba(15, 31, 41, .6);
}
.ev__portret img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 30%; }
.ev__portret::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  pointer-events: none;
}
.ev__wie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 140px 34px 34px;
  background: linear-gradient(to top, rgba(10, 21, 26, .9) 0%, rgba(10, 21, 26, .62) 46%, rgba(10, 21, 26, 0) 100%);
  color: var(--wit);
}
.ev__wie1 { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; }
.ev__wie2 { font-family: var(--hand); font-size: clamp(96px, 10vw, 140px); line-height: 0.62; padding-top: 0.2em; margin: 0 0 14px -4px; }
.ev__wie3 { font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; opacity: .9; }

.ev__feiten .aankondiging { font-size: 14px; margin-bottom: 18px; }
.feiten { list-style: none; margin: 0; padding: 0; }
.feit {
  position: relative;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 24px 0;
}
/* lead between the rows, with its soldered joint */
.feit + .feit::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--navy-600);
}
.feit + .feit::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 186px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy-600);
}
.feit__foto { position: relative; margin: 0; width: 172px; height: 128px; border-radius: 6px; overflow: hidden; background: var(--kalk-diep); }
.feit__foto .open, .feit__foto img { width: 100%; height: 100%; }
.feit__foto img { object-fit: cover; }
.feit__foto .label--klein { left: 7px; bottom: 7px; font-size: 10.5px; padding: 3px 7px 3px 5px; }
.feit__foto .label--klein svg { width: 11px; height: 11px; }
.feit h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2vw, 27px); line-height: 1.15; }
.feit p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--grijs); }

/* ---------- the services card: a leaded window of four panes ---------- */
.kaart {
  position: relative;
  z-index: 4;
  max-width: var(--binnen);
  margin: clamp(48px, 5vw, 72px) auto -74px;
  padding: 0 var(--goot);
  box-sizing: content-box;
}
.kaart__label {
  position: absolute;
  z-index: 2;
  top: -14px;
  left: calc(var(--goot) + 26px);
  margin: 0;
  padding: 6px 14px;
  border-radius: 4px;
  background: var(--navy);
  color: var(--wit);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1.4;
  text-transform: uppercase;
}
.kaart__ruiten {
  list-style: none;
  margin: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  border-radius: 8px;
  background: var(--navy-600);
  box-shadow: 0 34px 54px -34px rgba(15, 31, 41, .6);
}
.kaart__ruit { position: relative; }
.kaart__ruit + .kaart__ruit::before,
.kaart__ruit + .kaart__ruit::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -10.5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy-600);
}
.kaart__ruit + .kaart__ruit::before { top: -7px; }
.kaart__ruit + .kaart__ruit::after { bottom: -7px; }
.kaart__ruit a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 100px;
  padding: 26px 22px 22px 24px;
  border-radius: 2px;
  overflow: hidden;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.15;
  text-decoration: none;
  color: var(--navy);
  transition: filter .2s;
}
.kaart__ruit a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .6) 36%, transparent 44%);
  pointer-events: none;
}
.kaart__ruit a svg { width: 22px; height: 22px; color: var(--groen-500); transition: transform .2s; }
.kaart__ruit a:hover { filter: brightness(1.03) saturate(1.1); }
.kaart__ruit a:hover svg { transform: translateY(3px); }
.kaart__ruit--1 a { background: var(--papier); }
.kaart__ruit--2 a { background: var(--groen-100); }
.kaart__ruit--3 a { background: var(--amber-100); }
.kaart__ruit--4 a { background: var(--olijf-100); }

/* =========================================================== RUIT VERVANGEN — a window */
.rv-sectie { background: var(--groen-100); padding: calc(74px + clamp(56px, 6vw, 84px)) var(--goot) clamp(72px, 8vw, 112px); }
.rv {
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  grid-template-areas: "kop kop" "foto paneel" "rail paneel";
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: var(--papier);
  box-shadow: 0 50px 90px -60px rgba(15, 31, 41, .7);
}
.rv__kop {
  grid-area: kop;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 32px 24px 34px;
  border-bottom: 2px solid var(--navy);
}
.rv__titel { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -0.015em; }
.rv__titel a, .trap__1 a { text-decoration: none; background: linear-gradient(var(--olijf-300), var(--olijf-300)) 0 92% / 0 .14em no-repeat; transition: background-size .3s; }
.rv__titel a:hover, .trap__1 a:hover { background-size: 100% .14em; }

.voorgingen {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 18px 11px 14px;
  border-radius: 10px;
  background: var(--kalk);
  border: 1px solid var(--lijn);
  border-left: 5px solid var(--groen-300);
  text-decoration: none;
  transition: border-color .18s;
}
.voorgingen:hover { border-color: var(--olijf); border-left-color: var(--groen-300); }
.voorgingen__gezichten { display: flex; padding-left: 12px; }
.voorgingen__gezichten span {
  width: 42px;
  height: 42px;
  margin-left: -12px;
  border-radius: 50%;
  border: 3px solid var(--kalk);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--wit);
}
.voorgingen__gezichten span:nth-child(1) { background: var(--navy); }
.voorgingen__gezichten span:nth-child(2) { background: var(--groen-500); }
.voorgingen__gezichten span:nth-child(3) { background: var(--olijf-700); }
.voorgingen__gezichten span:nth-child(4) { background: var(--amber-600); }
.voorgingen__gezichten span:nth-child(5) { background: var(--navy-600); }
.voorgingen__tekst { display: flex; flex-direction: column; line-height: 1.25; }
.voorgingen__zij { font-family: var(--serif); font-style: italic; font-size: 17px; }
.voorgingen__regel { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; }
.voorgingen__regel .sterren { font-size: 18px; }
.voorgingen__aantal { font-size: 14px; color: var(--grijs); }
.voorgingen__aantal b { color: var(--navy); }

.rv__foto { grid-area: foto; position: relative; margin: 0; min-height: clamp(320px, 34vw, 460px); border-right: 2px solid var(--navy); background: var(--kalk-diep); }
.rv__foto .open { position: absolute; inset: 0; }
.rv__foto .open img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 62%; }
.rv__rail {
  grid-area: rail;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  background: var(--navy);
  border-right: 2px solid var(--navy);
}
.rv__paneel {
  grid-area: paneel;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px 36px 34px;
}
.rv__sub { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.35; color: var(--navy-600); }
.rv__lijst { list-style: none; margin: 0; padding: 0; }
.rv__lijst li {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-top: 1px solid var(--lijn);
  font-size: clamp(19px, 1.65vw, 23px);
  font-weight: 600;
  line-height: 1.25;
}
.rv__lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.rv__lijst li::before, .trap__lijst li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--navy);
  border-radius: 2px;
  background: linear-gradient(135deg, var(--groen-100) 0 42%, var(--wit) 48%, var(--groen-100) 56%);
  box-shadow: inset -4px 0 0 var(--groen-300);
}
.rv__paneel .acties { margin-top: auto; }

/* ---------- thumbnails under a picture object ---------- */
.duimen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rv__rail.duimen { margin-top: 0; }
.duim {
  position: relative;
  width: 66px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--kalk-diep);
  box-shadow: 0 0 0 1px rgba(15, 31, 41, .18);
  transition: transform .15s, box-shadow .15s;
}
.duim img { width: 100%; height: 100%; object-fit: cover; }
.duim:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--olijf); }
.rv__rail .duim { box-shadow: 0 0 0 1px rgba(251, 250, 247, .35); }
.duim--meer span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 31, 41, .6);
  color: var(--wit);
  font-weight: 700;
  font-size: 15px;
}
.duimen__tel {
  margin-left: 6px;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: underline;
  text-decoration-color: var(--olijf);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: zoom-in;
}
.rv__rail .duimen__tel { color: var(--wit); text-decoration-color: var(--olijf-300); }
.duimen--licht .duimen__tel { color: var(--papier); text-decoration-color: var(--olijf-300); }
.duimen--licht .duim { box-shadow: 0 0 0 1px rgba(251, 250, 247, .35); }

/* =========================================================== BANDS */
.band { padding: 34px var(--goot); }
.band__in { max-width: var(--binnen); margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.band__kop { margin: 0 0 4px; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; }
.band__regel { margin: 0; color: var(--grijs); }
.band__tekst { flex: 1 1 380px; }

.band--foto { background: var(--papier); border-bottom: 1px solid var(--lijn); }
.band__icoon { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--groen-100); color: var(--groen); box-shadow: inset 0 0 0 2px var(--groen-300); }
.band__icoon svg { width: 28px; height: 28px; }

.band--zakelijk { background: var(--kalk); padding-top: 30px; padding-bottom: 30px; border-top: 4px solid var(--navy-600); }
.band--zakelijk .band__in { justify-content: space-between; }
.band--zakelijk .band__kop { margin: 0; font-size: clamp(20px, 2vw, 26px); }
.band--zakelijk .band__regel a { color: var(--groen); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }

.band--lint { background: var(--olijf-700); color: var(--wit); padding-top: 20px; padding-bottom: 20px; }
.band--lint .band__in { flex-wrap: nowrap; gap: 28px; }
.band--lint .band__kop { flex: none; margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }
.lint { display: flex; flex-wrap: wrap; row-gap: 4px; color: var(--wit); font-family: var(--serif); font-size: 17.5px; font-weight: 500; line-height: 1.4; }
.lint__plaats { white-space: nowrap; }
.lint__plaats + .lint__plaats::before { content: "·"; margin: 0 9px; opacity: .55; }
.lint__plaats--thuis { font-weight: 700; }

.band--actie { background: var(--groen); color: var(--papier); padding-top: 32px; padding-bottom: 32px; }
.band--actie .band__in { justify-content: space-between; }
.band--actie .band__kop { margin: 0; flex: 1 1 420px; }

/* =========================================================== SERVICES (ladders) */
.dienst { padding: clamp(64px, 8vw, 112px) var(--goot); }
.dienst__in {
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.dienst--dg { background: var(--kalk); }
.dienst--mon { background: var(--groen); color: var(--papier); }
.dienst--mon .dienst__in { grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); }
.dienst--gil { background: var(--papier); }

.trap__1 { margin: 0 0 16px; font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 5vw, 66px); line-height: 1; letter-spacing: -0.015em; }
.trap__2 { margin: 0 0 28px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; color: var(--navy-600); }
.trap__lijst { list-style: none; margin: 0 0 34px; padding: 0; }
.trap__lijst li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--lijn);
  font-size: clamp(18px, 1.55vw, 21px);
  font-weight: 500;
  line-height: 1.3;
}
.trap__lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.trap__lijst li::before { width: 18px; height: 18px; }

.dienst--mon .trap__2 { color: var(--groen-300); }
.dienst--mon .trap__lijst li { border-color: rgba(251, 250, 247, .2); }
.dienst--mon .trap__lijst li::before { border-color: var(--papier); background: linear-gradient(135deg, var(--groen-500) 0 42%, var(--groen-300) 48%, var(--groen-500) 56%); box-shadow: inset -4px 0 0 var(--groen-300); }
.dienst--mon .rv__titel a, .dienst--mon .trap__1 a { color: var(--papier); }

/* a pair in its window: two lights split by a glazing bar */
.paar {
  position: relative;
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  background: var(--navy);
  box-shadow: 0 40px 70px -46px rgba(15, 31, 41, .65);
}
.paar__open { display: grid; width: 100%; gap: 10px; }
.paar--naast .paar__open { grid-template-columns: 1fr 1fr; aspect-ratio: 3 / 2.1; }
.paar--boven .paar__open { grid-template-rows: 1fr 1fr; aspect-ratio: 5 / 4; }
.paar__roede { display: none; }
.paar__helft { position: relative; display: block; overflow: hidden; border-radius: 3px; background: var(--navy-600); min-height: 0; }
.paar__helft img { width: 100%; height: 100%; object-fit: cover; }
.paar--naast .paar__helft img { object-position: 50% 45%; }
.paar--boven .paar__helft img { object-position: 50% 14%; }
.paar__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--papier);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}
.paar__tag--na { background: var(--olijf); color: var(--wit); }
.paar .stempel { top: 24px; right: 24px; }
.paar .label--groot { left: 26px; bottom: 26px; }

/* monument: the photo in an arched light */
.boog {
  position: relative;
  margin: 0 0 0 auto;
  max-width: 470px;
  aspect-ratio: 4 / 5.1;
  border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px;
  overflow: hidden;
  background: var(--groen-500);
  box-shadow: 0 0 0 9px var(--kalk), 0 0 0 10px var(--groen-300), 0 50px 80px -40px rgba(10, 21, 26, .7);
}
.boog .open { position: absolute; inset: 0; }
.boog .open img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.boog .stempel { top: auto; bottom: 120px; right: 18px; }
.dienst--mon .duimen { max-width: 470px; margin-left: auto; margin-top: 26px; }

/* =========================================================== PROJECTS */
.projecten { background: var(--kalk); padding: clamp(64px, 8vw, 110px) 0; }
.projecten__kop {
  max-width: var(--binnen);
  margin: 0 auto 34px;
  padding: 0 var(--goot);
  box-sizing: content-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.projecten__intro { margin: 12px 0 0; max-width: 34em; color: var(--grijs); }
.karrousel__knoppen { display: flex; gap: 10px; flex: none; }
.rond-knop {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  display: grid;
  place-items: center;
  transition: background-color .18s, color .18s;
}
.rond-knop svg { width: 22px; height: 22px; }
.rond-knop:hover { background: var(--navy); color: var(--wit); }
.karrousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--goot), calc((100vw - var(--binnen)) / 2));
  scrollbar-width: none;
  padding: 6px 0 26px;
}
.karrousel::-webkit-scrollbar { display: none; }
.karrousel__baan { list-style: none; margin: 0; padding: 0 max(var(--goot), calc((100vw - var(--binnen)) / 2)); display: flex; gap: 22px; width: max-content; }
.pkaart { flex: none; width: clamp(272px, 29vw, 380px); scroll-snap-align: start; }
.pkaart__open {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--lijn);
  background: var(--papier);
  box-shadow: 0 26px 44px -34px rgba(15, 31, 41, .55);
  transition: transform .2s, box-shadow .2s;
}
.pkaart__open:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgba(15, 31, 41, .6); }
.pkaart__foto { position: relative; display: block; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--kalk-diep); }
.pkaart__foto img { width: 100%; height: 100%; object-fit: cover; }
.pkaart__label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; padding: 18px 20px 0; }
.pkaart__label svg { width: 24px; height: 24px; color: var(--amber); }
.pkaart__waar { font-family: var(--serif); font-weight: 700; font-size: 27px; line-height: 1.1; }
.pkaart__wanneer { font-size: 17px; font-weight: 500; color: var(--grijs); }
.pkaart__wat { display: block; padding: 8px 20px 0; font-size: 16px; line-height: 1.45; color: var(--navy-600); }
.pkaart__dienst { display: block; margin-top: auto; padding: 16px 20px 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--groen-500); }
.projecten__voet { max-width: var(--binnen); margin: 18px auto 0; padding: 0 var(--goot); box-sizing: content-box; }

/* =========================================================== NOT LISTED */
.nietbij { position: relative; overflow: hidden; background: var(--navy); color: var(--papier); padding: clamp(60px, 7vw, 100px) var(--goot); }
.nietbij__in {
  position: relative;
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px 56px;
  align-items: end;
}
.nietbij__kop { grid-column: 1 / -1; margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 5.8vw, 80px); line-height: 1; letter-spacing: -0.015em; }
.nietbij__regel { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--groen-300); }
.nietbij .paar-knoppen { justify-content: flex-end; }
.nietbij::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 340px;
  height: 340px;
  border: 6px solid var(--navy-600);
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
  opacity: .7;
  pointer-events: none;
}

/* =========================================================== REVIEWS */
.oordelen { background: var(--kalk-diep); padding: clamp(64px, 8vw, 110px) var(--goot); }
.oordelen__in { max-width: var(--binnen); margin: 0 auto; }
.oordelen__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.platform {
  display: grid;
  gap: 2px;
  padding: 13px 20px 14px;
  border-radius: 10px;
  border: 1px solid var(--lijn);
  background: var(--kalk);
  text-decoration: none;
}
.platform:hover { border-color: var(--olijf); }
.platform__naam { font-weight: 700; font-size: 19px; line-height: 1.2; }
.platform__regel { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.platform__regel .sterren { font-size: 16px; }
.platform__aantal { font-size: 13.5px; color: var(--grijs); }
.okaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.okaart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 28px;
  border-radius: 10px;
  border: 1px solid var(--lijn);
  border-top: 5px solid var(--groen-300);
  background: var(--wit);
  text-decoration: none;
  box-shadow: 0 22px 40px -32px rgba(15, 31, 41, .5);
  transition: transform .2s, box-shadow .2s;
}
.okaart:hover { transform: translateY(-2px); box-shadow: 0 28px 48px -30px rgba(15, 31, 41, .55); }
.okaart__kop { display: flex; align-items: center; gap: 13px; }
.okaart__letter {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--groen);
  color: var(--papier);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
}
.okaart__wie { display: flex; flex-direction: column; line-height: 1.3; }
.okaart__wie b { font-size: 17px; }
.okaart__wie span { font-size: 14px; color: var(--grijs); }
.okaart__platform {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--groen-300);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--groen);
  white-space: nowrap;
}
.okaart__sterren { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; }
.okaart__sterren .sterren { font-size: 21px; }
.okaart__titel { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.2; }
.okaart__tekst { font-size: 16px; line-height: 1.6; color: var(--navy-600); }
.oordelen__voet { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 34px; }
.stil-link { font-weight: 600; color: var(--groen); text-underline-offset: 4px; }

/* =========================================================== OWNER */
.eigenaar { background: var(--papier); padding: clamp(64px, 8vw, 110px) var(--goot); }
.eigenaar__in {
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.eigenaar__foto { position: relative; margin: 0; aspect-ratio: 3 / 2.2; border-radius: 10px; overflow: hidden; background: var(--kalk-diep); }
.eigenaar__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 40%; }
.eigenaar__foto::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 7px; pointer-events: none; }
.eigenaar__eerste { margin: 18px 0 12px; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.4; }
.eigenaar__tekst > p.meer { margin: 0; color: var(--navy-600); }
.eigenaar__hand { margin: 18px 0 26px; font-family: var(--hand); font-size: 76px; line-height: .6; padding-top: 14px; color: var(--navy); }

/* =========================================================== ABOUT + AREA, one ground */
.samen { background: var(--groen-50); }
.overons { padding: clamp(64px, 8vw, 110px) var(--goot) clamp(48px, 5vw, 72px); }
.overons__in {
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.overons__eerste, .gebied__eerste, .contact__eerste { margin: 18px 0 12px; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.4; }
.overons__tekst > p.meer { margin: 0; color: var(--navy-600); }
.stappen {
  list-style: none;
  margin: 28px 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: var(--papier);
}
.stappen li { padding: 18px 18px 20px; }
.stappen li + li { border-left: 2px solid var(--navy); }
.stappen__nr { display: block; font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1; color: var(--olijf); }
.stappen__wat { display: block; margin: 10px 0 4px; font-weight: 700; line-height: 1.3; }
.stappen__hoe { display: block; font-size: 15px; line-height: 1.45; color: var(--grijs); }
.foto-raam { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--kalk-diep); box-shadow: 0 40px 70px -48px rgba(15, 31, 41, .6); }
.foto-raam .open { position: absolute; inset: 0; }
.foto-raam .open img { width: 100%; height: 100%; object-fit: cover; }

.gebied { padding: 0 var(--goot) clamp(64px, 8vw, 110px); }
.gebied__in {
  position: relative;
  max-width: var(--binnen);
  margin: 0 auto;
  padding-top: clamp(48px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
/* the lead line the two sections share */
.gebied__in::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--navy-600);
}
.gebied__in::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 56%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy-600);
}
.gebied__kaart-wrap { position: relative; }
.gebied__kaart { height: clamp(360px, 42vw, 560px); border-radius: 10px; overflow: hidden; border: 2px solid var(--navy); background: var(--kalk-diep); z-index: 0; }
.gebied__kaart .leaflet-tile-pane { filter: grayscale(1) sepia(.2) brightness(1.03) contrast(.92); }
.gebied__kaart .leaflet-control-attribution { font-size: 10px; background: rgba(251, 250, 247, .85); }
.gebied__kaart .leaflet-bar a { color: var(--navy); }
.plaats-pin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--wit);
  border: 2px solid var(--papier);
  font: 700 12px/1 var(--sans);
  box-shadow: 0 3px 8px -2px rgba(10, 21, 26, .5);
}
.plaats-pin--thuis { width: 34px; height: 34px; background: var(--olijf-700); font-size: 14px; box-shadow: 0 0 0 5px rgba(110, 135, 72, .3), 0 3px 8px -2px rgba(10, 21, 26, .5); }
.leaflet-tooltip.plaats-tip {
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: var(--navy);
  color: var(--wit);
  font: 600 12.5px/1.3 var(--sans);
  box-shadow: none;
}
.leaflet-tooltip.plaats-tip::before { display: none; }
.plaatsen {
  list-style: none;
  counter-reset: plaats;
  margin: 18px 0 22px;
  padding: 0;
  columns: 2;
  column-gap: 24px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
}
.plaatsen li { counter-increment: plaats; display: flex; align-items: center; gap: 10px; break-inside: avoid; }
.plaatsen li::before {
  content: counter(plaats);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: var(--wit);
  font: 700 11px/1 var(--sans);
}
.plaatsen li:first-child { font-weight: 700; }
.plaatsen li:first-child::before { background: var(--olijf-700); }
.gebied__foto { position: relative; margin: 0 0 24px; aspect-ratio: 16 / 8.5; border-radius: 8px; overflow: hidden; background: var(--kalk-diep); }
.gebied__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

/* =========================================================== QUESTIONS */
.vragen { background: var(--papier); padding: clamp(64px, 8vw, 110px) var(--goot); }
.vragen__in {
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
  grid-template-rows: auto 1fr;
  gap: 28px clamp(32px, 5vw, 84px);
}
.vragen__kop { grid-column: 1; grid-row: 1; }
.vragen__lijst { grid-column: 2; grid-row: 1 / span 2; }
.vragen__voet { grid-column: 1; grid-row: 2; align-self: start; }
.vragen__voet p { margin: 0 0 14px; font-family: var(--serif); font-size: 21px; }
.vraag { border-top: 1px solid var(--lijn); }
.vraag:last-child { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 20px 52px 20px 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 1.65vw, 22px);
  line-height: 1.3;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.vraag[open] summary::after { content: "−"; background: var(--navy); color: var(--wit); }
.vraag p { margin: -4px 52px 22px 0; color: var(--navy-600); }

/* =========================================================== CONTACT */
.contact { background: var(--kalk); padding: clamp(64px, 8vw, 110px) var(--goot); }
.contact__in {
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}
.contact__eerste { margin-bottom: 24px; }
.tegels--contact { margin-bottom: 26px; }
.tegels--contact .tegel__nr { font-size: clamp(20px, 2vw, 28px); }
.gegevens { margin: 0; }
.gegevens > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--lijn); }
.gegevens > div:last-child { border-bottom: 1px solid var(--lijn); }
.gegevens dt { padding-top: 3px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--groen-500); }
.gegevens dd { margin: 0; font-weight: 500; }
.gegevens a { color: var(--navy); text-underline-offset: 3px; }
.formulier {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 32px;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: var(--papier);
  box-shadow: 0 40px 70px -50px rgba(15, 31, 41, .6);
}
.formulier__kop { margin: 0 0 2px; font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.2; }
.veld { display: grid; gap: 6px; }
.veld > span { font-weight: 600; font-size: 15px; }
.veld small { font-weight: 400; color: var(--grijs); }
.veld input, .veld textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--lijn);
  border-radius: 7px;
  background: var(--wit);
  color: var(--navy);
  font: inherit;
  font-size: 17px;
}
.veld textarea { resize: vertical; min-height: 130px; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--olijf); box-shadow: 0 0 0 3px var(--olijf-100); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.knop--vol { width: 100%; }
.formulier__noot { margin: 0; text-align: center; font-size: 14px; color: var(--grijs); }

/* =========================================================== FOOTER */
.voet { background: var(--navy); color: var(--papier); padding: 76px var(--goot) 0; }
.voet__in {
  max-width: var(--binnen);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.25fr);
  gap: 40px;
  padding-bottom: 60px;
}
.lockup--voet { --w: clamp(240px, 24vw, 310px); margin-bottom: calc(var(--w) * 0.14); }
.lockup--voet .lockup__naam { color: var(--papier); }
.lockup--voet .lockup__slogan { color: var(--groen-300); }
.voet__kop { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--olijf-300); }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.voet a { color: var(--papier); text-decoration: none; }
.voet a:not(.knop):hover { text-decoration: underline; text-underline-offset: 3px; }
.voet address { font-style: normal; line-height: 1.7; margin: 0 0 18px; }
.paar-knoppen--klein .knop { min-height: 44px; padding: 0 16px; font-size: 15px; }
.voet .knop--licht { color: var(--navy); }
.voet__onder { max-width: var(--binnen); margin: 0 auto; padding: 22px 0 26px; border-top: 1px solid rgba(251, 250, 247, .16); font-size: 14px; color: var(--groen-300); }
.voet__onder p { margin: 0; }

/* =========================================================== STICKY BAR */
.balk { display: none; }

/* =========================================================== VIEWER */
.kijker {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  height: 100vh;
  height: 100dvh;
  background: rgba(10, 21, 26, .97);
  color: var(--papier);
}
.kijker[hidden] { display: none; }
.kijker__kop { display: flex; align-items: center; gap: 16px; padding: 14px 20px 10px; }
.kijker__titel { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 22px; }
.kijker__teller { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--groen-300); }
.kijker__sluit { margin-left: auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(251, 250, 247, .12); }
.kijker__sluit:hover { background: rgba(251, 250, 247, .22); }
.kijker__sluit svg { width: 22px; height: 22px; }
.kijker__podium { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 80px; touch-action: pan-y; }
.kijker__figuur { width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.kijker__figuur > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.kijker__helft { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; flex: 1 1 0; }
.kijker__helft img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.kijker__helft .paar__tag { top: 50%; left: 50%; transform: translate(-50%, -50%); top: 12px; transform: translateX(-50%); }
.kijker__pijl {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(251, 250, 247, .12);
  color: var(--papier);
}
.kijker__pijl:hover { background: rgba(251, 250, 247, .24); }
.kijker__pijl svg { width: 26px; height: 26px; }
.kijker__pijl--vorige { left: 14px; }
.kijker__pijl--volgende { right: 14px; }
.kijker__label { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0; padding: 0 20px; }
.kijker__label svg { width: 26px; height: 26px; color: var(--amber-200); }
.kijker__waar { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
.kijker__wanneer { font-size: 18px; color: var(--groen-300); }
.kijker__actie { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px 4px; }
.kijker__vraag { margin-right: 6px; font-family: var(--serif); font-style: italic; font-size: 21px; }
.kijker__actie .knop { min-height: 46px; padding: 0 20px; }
.kijker__strook { display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px 16px; scrollbar-width: thin; }
.kijker__strook > :first-child { margin-left: auto; }
.kijker__strook > :last-child { margin-right: auto; }
.kijker__duim { position: relative; flex: none; width: 74px; height: 54px; border-radius: 4px; overflow: hidden; opacity: .5; box-shadow: 0 0 0 2px transparent; transition: opacity .15s; display: flex; gap: 2px; background: var(--navy); }
.kijker__duim img { width: 100%; height: 100%; object-fit: cover; min-width: 0; flex: 1 1 0; }
.kijker__duim:hover { opacity: .85; }
.kijker__duim.is-actief { opacity: 1; box-shadow: 0 0 0 2px var(--olijf-300); }

/* =========================================================== WIDTHS */
@media (max-width: 1180px) {
  .kop__wa-tekst { display: none; }
  .kop__lijst > li > a, .dd__knop { padding: 10px 9px; }
}

@media (max-width: 1099px) {
  :root { --kop-h: 68px; }
  .kop__menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1.5px solid var(--navy);
    font-weight: 600;
    font-size: 15px;
  }
  .kop__menu-streep { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
  .kop__menu-streep::before, .kop__menu-streep::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
  .kop__menu-streep::before { top: -5px; }
  .kop__menu-streep::after { top: 5px; }
  .kop__acties { margin-left: auto; }
  .kop__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    margin: 0;
    padding: 10px var(--goot) 22px;
    background: var(--papier);
    border-bottom: 1px solid var(--lijn);
    box-shadow: 0 30px 40px -30px rgba(15, 31, 41, .4);
    max-height: calc(100vh - var(--kop-h));
    overflow-y: auto;
  }
  .kop.is-menu .kop__nav { display: block; }
  .kop__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  .kop__lijst > li { border-bottom: 1px solid var(--lijn); }
  .kop__lijst > li > a, .dd__knop { display: flex; width: 100%; min-height: 52px; padding: 0 4px; font-size: 18px; justify-content: space-between; border-radius: 0; }
  .kop__lijst > li > a:hover, .dd__knop:hover { background: transparent; }
  .dd__lijst { position: static; display: none; min-width: 0; margin: 0 0 10px; padding: 4px; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-radius: 6px; }
  .dd__lijst::before { display: none; }
  .dd:hover .dd__lijst, .dd:focus-within .dd__lijst { display: none; }
  .dd.is-open .dd__lijst { display: block; }
  .dd:hover .dd__chevron { transform: none; }
  .dd.is-open .dd__chevron { transform: rotate(180deg); }
  .dd__lijst a { min-height: 46px; display: flex; align-items: center; }

  .rv { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .kaart__ruit a { min-height: 88px; padding: 22px 16px 18px 18px; }
  .voet__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .vouw__in { grid-template-columns: minmax(0, 1fr); }
  .vouw__beeld { min-height: 0; height: min(92vw, 640px); }
  .vouw__inzet { left: 16px; bottom: 20px; }
  .ev__in { grid-template-columns: minmax(0, 1fr); }
  .ev__portret { max-width: 560px; }
  .dienst__in, .dienst--mon .dienst__in, .eigenaar__in, .overons__in, .gebied__in, .contact__in, .nietbij__in { grid-template-columns: minmax(0, 1fr); }
  .nietbij .paar-knoppen { justify-content: flex-start; }
  .boog { margin: 0 auto; }
  .dienst--mon .duimen { margin-left: auto; margin-right: auto; }
  .vragen__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .vragen__kop, .vragen__lijst, .vragen__voet { grid-column: 1; grid-row: auto; }
  .foto-raam { aspect-ratio: 4 / 3; }
  .rv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "foto" "rail" "paneel"; grid-template-rows: none; }
  .rv__foto, .rv__rail { border-right: 0; }
  .rv__foto { min-height: 0; height: 60vw; }
}

/* ---------- phone: tell much less; header and bar wait for the strip ---------- */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  [id] { scroll-margin-top: 76px; }
  .meer { display: none !important; }

  .kop { position: fixed; left: 0; right: 0; top: 0; }
  .js .kop { transform: translateY(-105%); transition: transform .32s ease; }
  .js body.toon-balk .kop, .js .toon-balk .kop { transform: none; }
  .kop__bel span { display: none; }
  .kop__bel { padding: 0 13px; }
  .kop__wa { padding: 0 11px; }
  .lockup--nav { --w: 118px; }

  .balk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 59;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(251, 250, 247, .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--lijn);
  }
  .js .balk { transform: translateY(110%); transition: transform .32s ease; }
  .js .toon-balk .balk { transform: none; }
  .balk a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 9px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--wit); }
  .balk svg { width: 19px; height: 19px; }
  .balk__bel { background: var(--navy); }
  .balk__wa { background: var(--wa); }
  .voet__onder { padding-bottom: 92px; }

  .vouw { padding: 22px 0 86px; }
  .vouw__status { font-size: 13.5px; margin-bottom: 16px; }
  .lockup--vouw { --w: min(80vw, 330px); }
  .vouw__kop { font-size: clamp(38px, 11.4vw, 50px); }
  .vouw__onder { margin: 16px 0 20px; }
  .tegels { gap: 10px; }
  .tegel { padding: 13px 14px 14px; gap: 4px; border-radius: 9px; }
  .tegel__label { font-size: 11px; letter-spacing: .1em; gap: 6px; }
  .tegel__label svg { width: 14px; height: 14px; }
  .tegel__nr { font-size: clamp(17px, 5vw, 22px); }
  .kennis { margin-top: 18px; }
  .vouw__beeld { height: 112vw; max-height: 560px; margin-top: 6px; }
  .vouw__inzet { display: none; }
  .oordeel-chip { top: 12px; right: 12px; padding: 9px 12px 9px 11px; }
  .oordeel-chip__platform { font-size: 14px; }

  .strook { margin-top: -58px; background: linear-gradient(to bottom, transparent 58px, var(--papier) 58px); }
  .strook__ruit { grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr); }
  .strook__ruit::before { width: 5px; }
  .strook__vak, .strook__vak + .strook__lood + .strook__vak { padding: 15px 12px 16px 15px; }
  .strook__klein { font-size: 10px; letter-spacing: .18em; margin-bottom: 5px; }
  .strook__groot { font-size: 17px; margin: 0; line-height: 1.18; }
  .strook__uitleg { display: none; }
  .strook__lood { width: 4px; margin: 12px 0; }
  .strook__lood::before, .strook__lood::after { width: 10px; height: 10px; margin-left: -5px; }
  .strook__lood::before { top: -5px; }
  .strook__lood::after { bottom: -5px; }

  .ev__in { padding-top: 40px; gap: 26px; }
  .ev__wie { padding: 110px 22px 24px; }
  .ev__wie2 { font-size: 100px; }
  .feit { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
  .feit + .feit::after { left: 106px; }
  .feit__foto { width: 96px; height: 74px; }
  .feit__foto .label--klein { display: none; }
  .feit h3 { font-size: 20px; margin: 0; }
  .feit p { display: none; }

  .kaart { margin: 34px auto -40px; }
  .kaart__label { left: calc(var(--goot) + 16px); }
  .kaart__ruiten { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 5px; }
  .kaart__ruit + .kaart__ruit::before, .kaart__ruit + .kaart__ruit::after { display: none; }
  .kaart__ruit a { min-height: 44px; padding: 10px 14px; font-size: 18px; }
  .kaart__ruit:first-child a { padding-top: 16px; }
  .kaart__ruit a svg { width: 18px; height: 18px; }

  .rv-sectie { padding: calc(40px + 44px) 12px 56px; }
  .rv__kop { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px 18px; }
  .rv__titel { font-size: 38px; }
  .voorgingen { padding: 9px 12px 9px 10px; gap: 12px; }
  .voorgingen__gezichten span { width: 34px; height: 34px; font-size: 14px; margin-left: -10px; }
  .voorgingen__zij { font-size: 15px; }
  .voorgingen__regel { font-size: 15px; }
  .rv__foto { height: 74vw; }
  .rv__paneel { padding: 18px; gap: 0; }
  .rv__sub, .rv__lijst { display: none; }
  .duim { width: 54px; height: 42px; }
  .duimen { gap: 6px; }
  .duimen__tel { display: none; }
  .rv__rail { padding: 10px 12px; }

  .label--groot { left: 10px; bottom: 10px; padding: 9px 12px 9px 10px; max-width: calc(100% - 20px); }
  .label__pin { width: 22px; height: 22px; }
  .label__waar { font-size: 19px; }
  .label__wanneer { font-size: 13.5px; }
  .label__link { font-size: 12.5px; margin-top: 6px; padding-top: 6px; }
  .stempel { width: 104px; top: 10px; right: 10px; }
  .stempel span { font-size: 6.4px; }
  .paar { padding: 6px; }
  .paar__open { gap: 6px; }
  .paar .stempel { top: 14px; right: 14px; }
  .paar .label--groot { left: 14px; bottom: 14px; }
  .paar--naast .paar__open { aspect-ratio: 1 / 1; }
  .paar__tag { font-size: 10.5px; padding: 3px 7px; top: 7px; left: 7px; }
  .boog .stempel { bottom: 104px; }

  .band { padding: 26px var(--goot); }
  .band__icoon { display: none; }
  .band__in { gap: 14px; }
  .band--lint .band__in { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lint { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; font-size: 17px; }
  .lint::-webkit-scrollbar { display: none; }

  /* a service on the phone: heading, its one picture object and thumbnails, its two actions */
  .dienst__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .dienst__trap { display: contents; }
  .trap__1 { order: 1; font-size: 40px; margin-bottom: 20px; }
  .dienst__beeld { order: 2; }
  .dienst__trap .acties { order: 3; margin-top: 22px; }
  .trap__2, .trap__lijst { display: none; }
  .boog { max-width: 100%; }
  .acties .knop { flex: 1 1 auto; }

  .projecten__kop { align-items: flex-start; flex-direction: column; }
  .karrousel__knoppen { display: none; }
  .pkaart { width: 80vw; }

  .nietbij__in { gap: 16px; }
  .nietbij::after { width: 200px; height: 200px; right: -60px; top: -60px; }

  .okaarten { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .okaart { padding: 20px 20px 22px; }
  .okaart__platform { font-size: 11px; padding: 3px 8px; }
  .oordelen__kop { align-items: flex-start; flex-direction: column; }

  .eigenaar__foto { aspect-ratio: 4 / 3.2; }
  .eigenaar__hand { font-size: 64px; margin: 14px 0 20px; }

  .gebied__kaart { height: 360px; }
  .gebied__in::after { left: 70%; }
  .gebied__foto { margin-top: 18px; }

  .vraag p { margin-right: 0; }
  .gegevens > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .formulier { padding: 22px 18px; }
  .voet { padding-top: 56px; }
  .voet__in { grid-template-columns: minmax(0, 1fr); gap: 30px; }

  .kijker__kop { padding: 10px 12px 6px; }
  .kijker__titel { font-size: 18px; }
  .kijker__sluit { width: 44px; height: 44px; }
  .kijker__podium { padding: 0 6px; }
  .kijker__pijl { width: 42px; height: 42px; margin-top: -21px; background: rgba(10, 21, 26, .55); }
  .kijker__pijl--vorige { left: 8px; }
  .kijker__pijl--volgende { right: 8px; }
  .kijker__figuur { flex-direction: column; gap: 6px; }
  .kijker__helft { width: 100%; height: auto; flex: 1 1 0; min-height: 0; }
  .kijker__label { margin-top: 10px; }
  .kijker__waar { font-size: 21px; }
  .kijker__wanneer { font-size: 15px; }
  .kijker__actie { padding: 10px 12px 2px; gap: 8px; }
  .kijker__vraag { flex-basis: 100%; text-align: center; margin: 0; font-size: 18px; }
  .kijker__actie .knop { min-height: 44px; flex: 1 1 0; max-width: 200px; }
  .kijker__strook { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); gap: 6px; }
  .kijker__duim { width: 56px; height: 42px; }
}

@media (max-width: 380px) {
  .tegel__nr { font-size: 16px; }
  .tegel { padding: 12px 11px 13px; }
}


/* ============ KAARTJE — picked 1 of ronde/inzet.py (het kaartje weg (op de telefoon was het er al niet)). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vouw__inzet { display: none; }


/* ============ FOTORAND — picked 1 of ronde/rand.py (zonder de witte lijn). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vouw__foto::after { display: none; }


/* ============ BOLLETJES — picked 1 of ronde/bolletjes.py (alle bolletjes weg, de lijnen blijven). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strook__lood::before, :root:root .strook__lood::after,
:root:root .kaart__ruit + .kaart__ruit::before, :root:root .kaart__ruit + .kaart__ruit::after,
:root:root .feit + .feit::after,
:root:root .gebied__in::after { display: none; }


/* ============ STREEP — picked 3 of ronde/streep.py (geen lijn, de rechterhelft een licht groen getinte ruit). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strook__lood::before, :root:root .strook__lood::after { display: none; }
:root:root .strook__lood { background: none; }
:root:root .strook__ruit { background: linear-gradient(to right, rgba(251, 250, 247, .8) 50%, rgba(227, 236, 230, .88) 50%); }


/* ============ KAARTRAND — picked 3 of ronde/kaartrand.py (1 px (telefoon 1 px)). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .kaart__ruit + .kaart__ruit::before, :root:root .kaart__ruit + .kaart__ruit::after { display: none; }
:root:root .kaart__ruiten { padding: 1px; gap: 1px; border-radius: 3px; }
@media (max-width: 760px) {
  :root:root .kaart__ruiten { padding: 1px; gap: 1px; }
  :root:root .kaart__ruit:first-child a { padding-top: 20px; }
}


/* ============ OORDEEL — picked 2 of ronde/oordeel.py (beoordeling linksonder, plaatslabel weg). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .oordeel-chip { top: auto; right: auto; left: 18px; bottom: 18px; }
@media (max-width: 760px) {
  :root:root .oordeel-chip { left: 12px; bottom: 12px; }
}
@media (max-width: 380px) {
  :root:root .oordeel-chip { grid-template-columns: auto; }
}
:root:root .vouw__foto .label--klein { display: none; }


/* ============ STROOK — picked 1 of ronde/strook.py (een foto naast elk feit, de uitlegzin weg). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strook__uitleg { display: none; }
:root:root .strook__fotos { display: block; position: relative; text-decoration: none; color: inherit; }
:root:root .strook__foto { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--kalk-diep); }
:root:root .strook__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root:root .strook__groot { margin: 0; }
:root:root .strook__foto ~ .strook__foto { display: none; }
:root:root .strook__wanneer::before { content: "·\00a0"; margin-left: -2px; }
:root:root .strook__plek { font-size: 10.5px; padding: 3px 7px 3px 5px; }
:root:root .strook__plek svg { width: 11px; height: 11px; }
:root:root .strook__vak { display: grid; grid-template-columns: 188px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 24px; padding: 18px 30px 18px 34px; }
:root:root .strook__vak + .strook__lood + .strook__vak { padding-left: 22px; }
:root:root .strook__fotos { grid-column: 1; grid-row: 1 / -1; height: 132px; }
:root:root .strook__foto { height: 100%; }
:root:root .strook__plek { left: 7px; bottom: 7px; }
:root:root .strook__klein { grid-column: 2; grid-row: 2; }
:root:root .strook__groot { grid-column: 2; grid-row: 3; }
@media (max-width: 1099px) {
  :root:root .strook__vak { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; column-gap: 0; align-content: start; }
  :root:root .strook__fotos, :root:root .strook__klein, :root:root .strook__groot { grid-column: 1; grid-row: auto; }
  :root:root .strook__fotos { height: 120px; margin-bottom: 14px; }
}
@media (max-width: 760px) {
  :root:root .strook__vak, :root:root .strook__vak + .strook__lood + .strook__vak { padding: 12px 12px 15px 14px; }
  :root:root .strook__fotos { height: 96px; margin-bottom: 10px; }
  :root:root .strook__plek { font-size: 9.5px; left: 5px; bottom: 5px; padding: 2px 6px 2px 4px; gap: 4px; }
  :root:root .strook__plek svg { width: 10px; height: 10px; }
}


/* ============ TIJDEN — picked 2 of ronde/tijden.py (naast Coen, in twee korte regels). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vouw__status { display: none; }
:root:root .vouw__tijden .stip { flex: none; }

:root:root .vouw__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(20px, 2.2vw, 28px); }
:root:root .vouw__voet .kennis { flex: none; margin-top: 0; }
:root:root .vouw__tijden--coen { flex: none; display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--grijs); }
:root:root .vouw__tijden--coen .stip { margin-top: 6px; }
:root:root .vouw__tijden-deel { display: block; }
@media (max-width: 760px) {
  :root:root .vouw__voet { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; }
  :root:root .vouw__tijden--coen { flex: 0 1 auto; align-items: center; font-size: 13.5px; }
  :root:root .vouw__tijden--coen .stip { margin-top: 0; }
  :root:root .vouw__tijden-deel { display: inline; }
}


/* ============ WISSEL — picked 1 of ronde/wissel.py (tijden weg, oordeel over de hele breedte onder de knoppen, Coen linksonder op de foto). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vouw__voet, :root:root .oordeel-chip { display: none; }
:root:root .oordeel-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 18px;
  max-width: 690px;
  margin-top: 14px;
  padding: 14px 20px 14px 17px;
  border-radius: 10px;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-left: 5px solid var(--groen-300);
  text-decoration: none;
  color: var(--navy);
  transition: background-color .18s, box-shadow .18s;
}
:root:root .oordeel-balk:hover { background: var(--wit); box-shadow: 0 10px 24px -16px rgba(15, 31, 41, .45); }
:root:root .oordeel-balk__platform { font-weight: 700; font-size: 16px; letter-spacing: .01em; }
:root:root .oordeel-balk__regel { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; white-space: nowrap; }
:root:root .oordeel-balk__regel .sterren { font-size: 19px; }
:root:root .oordeel-balk__aantal { font-size: 14.5px; color: var(--grijs); }

:root:root .vouw__coen { display: block; position: absolute; left: 18px; bottom: 18px; z-index: 3; max-width: calc(100% - 36px); }
:root:root .vouw__coen .kennis {
  max-width: 100%;
  margin: 0;
  background: rgba(251, 250, 247, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(214, 208, 195, .8);
  box-shadow: 0 14px 30px -18px rgba(10, 21, 26, .55);
}
:root:root .vouw__coen .kennis:hover { background: var(--papier); }

@media (max-width: 760px) {
  :root:root .oordeel-balk { margin-top: 10px; padding: 11px 14px 12px 13px; border-radius: 9px; }
  :root:root .oordeel-balk__platform { flex-basis: 100%; font-size: 14.5px; }
  :root:root .oordeel-balk__regel { gap: 8px; font-size: 15px; }
  :root:root .oordeel-balk__regel .sterren { font-size: 16px; }
  :root:root .oordeel-balk__aantal { font-size: 13.5px; }
  :root:root .vouw__coen { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  :root:root .vouw__coen .kennis { margin: 0; }
}


/* ============ STROOK ONDER — picked 1 of ronde/onder.py (de strook helemaal onder de fold, op de witte grond). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vouw { padding-bottom: 64px; }
:root:root .strook { margin-top: 0; padding-top: 48px; background: var(--papier); }
@media (max-width: 760px) {
  :root:root .vouw { padding-bottom: 36px; }
  :root:root .strook { padding-top: 28px; }
}


/* ============ WERKGEBIED — picked 2 of ronde/lint.py (een lint dat langzaam voorbij schuift, op één regel). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .lint {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
:root:root .lint > .lint__plaats { display: none; }
:root:root .lint__kopie { display: flex; flex: none; animation: lint-schuif 50s linear infinite; }
:root:root .lint__kopie .lint__plaats--thuis::before { content: "·"; margin: 0 9px; opacity: .55; }
:root:root .lint:hover .lint__kopie { animation-play-state: paused; }
@keyframes lint-schuif { to { transform: translateX(-100%); } }
@media (max-width: 760px) {
  :root:root .lint { width: 100%; max-width: 100%; }
  :root:root .lint__kopie { animation-duration: 42s; }
}
@media (prefers-reduced-motion: reduce) {
  :root:root .lint { flex-wrap: wrap; overflow: visible; -webkit-mask: none; mask: none; }
  :root:root .lint > .lint__plaats { display: inline; }
  :root:root .lint__kopie { display: none; }
}


/* ============ STERREN — picked 3 of ronde/sterren.py (geen kaartje: nog grotere sterren, de tekst in twee regels ernaast). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .oordeel-balk { display: none; }
:root:root .sterbalk { max-width: 690px; margin-top: 14px; text-decoration: none; color: var(--navy); }
:root:root .sterbalk__sterren { display: inline-flex; flex: none; color: #E2A72E; }
:root:root .sterbalk__sterren svg { display: block; }
:root:root .sterbalk__cijfer { white-space: nowrap; color: var(--grijs); }
:root:root .sterbalk__cijfer b { font-family: var(--serif); font-weight: 700; color: var(--navy); }
:root:root .sterbalk__tekst { color: var(--grijs); }
:root:root .sterbalk__aantal, :root:root .sterbalk__bron { white-space: nowrap; }
:root:root .sterbalk:hover .sterbalk__bron { text-decoration: underline; text-underline-offset: 3px; }

:root:root .sterbalk { display: flex; align-items: center; gap: 18px; width: fit-content; margin-top: 22px; }
:root:root .sterbalk__sterren { gap: 4px; }
:root:root .sterbalk__sterren svg { width: 38px; height: 38px; }
:root:root .sterbalk__woorden { display: flex; flex-direction: column; gap: 3px; }
:root:root .sterbalk__cijfer { font-size: 15.5px; line-height: 1.1; }
:root:root .sterbalk__cijfer b { font-size: 25px; line-height: 1; }
:root:root .sterbalk__tekst { font-size: 14.5px; line-height: 1.3; }
@media (max-width: 760px) {
  :root:root .sterbalk { gap: 12px; margin-top: 16px; }
  :root:root .sterbalk__sterren { gap: 3px; }
  :root:root .sterbalk__sterren svg { width: 28px; height: 28px; }
  :root:root .sterbalk__cijfer { font-size: 14px; }
  :root:root .sterbalk__cijfer b { font-size: 21px; }
  :root:root .sterbalk__tekst { font-size: 13px; }
}
@media (max-width: 380px) {
  :root:root .sterbalk__sterren svg { width: 24px; height: 24px; }
}


/* ============ CIJFER — picked 3 of ronde/cijfer.py (de tekst flink groter en de sterren groeien mee). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .sterbalk { gap: 22px; }
:root:root .sterbalk__sterren { gap: 5px; }
:root:root .sterbalk__sterren svg { width: 46px; height: 46px; }
:root:root .sterbalk__woorden { gap: 5px; }
:root:root .sterbalk__cijfer { font-size: 21px; }
:root:root .sterbalk__cijfer b { font-size: 36px; }
:root:root .sterbalk__tekst { font-size: 19px; }
@media (max-width: 760px) {
  :root:root .sterbalk { gap: 14px; }
  :root:root .sterbalk__sterren { gap: 3px; }
  :root:root .sterbalk__sterren svg { width: 33px; height: 33px; }
  :root:root .sterbalk__woorden { gap: 4px; }
  :root:root .sterbalk__cijfer { font-size: 17.5px; }
  :root:root .sterbalk__cijfer b { font-size: 28px; }
  :root:root .sterbalk__tekst { font-size: 16px; }
}
@media (max-width: 380px) {
  :root:root .sterbalk { gap: 12px; }
  :root:root .sterbalk__sterren svg { width: 24px; height: 24px; }
}


/* ============ FOTO OKER — picked 2 of ronde/fotoker.py (een okerblok schuin achter de foto, naar rechtsonder). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strook__fotos { isolation: isolate; }
:root:root .strook__fotos::before { content: ""; position: absolute; z-index: -1; background: #E2A72E; }

:root:root .strook__fotos::before { inset: 0; transform: translate(9px, 9px); border-radius: 6px; }
@media (max-width: 760px) {
  :root:root .strook__fotos::before { transform: translate(6px, 6px); }
}


/* ============ OKERBLOK — picked 1 of ronde/blok.py (een derde minder: 6 px (telefoon 4 px)). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strook__fotos::before { transform: translate(6px, 6px); }
@media (max-width: 760px) {
  :root:root .strook__fotos::before { transform: translate(4px, 4px); }
}


/* ============ EVEN VOORSTELLEN FOTO'S — by hand, 2026-11-03 (Sem: "ik wil nu dat deze sectie ook hetzelfde effect krijgt voor de thumbnails, de dikke border bottom mag weg"): the strip's ochre block behind each photo (6 px down and right, 4 px on the phone), the dark lines between the rows gone. ============ */
:root:root .feit + .feit::before { display: none; }
:root:root .feit__foto { box-shadow: 6px 6px 0 #E2A72E; }
@media (max-width: 760px) {
  :root:root .feit__foto { box-shadow: 4px 4px 0 #E2A72E; }
}


/* ============ TEMPLATES — picked 3 of ronde/onderkant.py (donker en oker: navy blokken om en om, elke dienst een grote foto met een navy kaart erover). Everything under Even voorstellen and the footer. Written in by hand; %V% -> :root:root. ============ */
:root:root .paar { padding: 0; border-radius: 0; background: none; box-shadow: none; }
:root:root .paar--boven .paar__open { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
:root:root .paar--naast .paar__open { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:root:root .paar .stempel { top: 16px; right: 16px; }
:root:root .paar .label--groot { left: 16px; bottom: 16px; }
:root:root .paar__tag--na { background: #E2A72E; color: var(--navy); }
:root:root .label--groot { border-left-color: #E2A72E; }
:root:root .label__link { color: var(--amber-200); }
:root:root .duim:hover { box-shadow: 0 0 0 2px #E2A72E; }
:root:root .duimen__tel { text-decoration-color: #E2A72E; }
:root:root .stil-link { color: var(--navy); text-decoration-color: #E2A72E; text-decoration-thickness: 2px; text-underline-offset: 5px; }
:root:root .plaats-pin--thuis { background: #E2A72E; color: var(--navy); box-shadow: 0 0 0 5px rgba(226, 167, 46, .3), 0 3px 8px -2px rgba(10, 21, 26, .5); }
:root:root .gebied__kaart { border: 0; }
:root:root .veld input:focus, :root:root .veld textarea:focus { border-color: #E2A72E; box-shadow: 0 0 0 3px rgba(226, 167, 46, .25); }
:root:root .voorgingen { padding: 0; border: 0; border-radius: 0; background: none; }
:root:root .voorgingen:hover { border: 0; }
:root:root .voorgingen__gezichten span { background: var(--navy); }
:root:root .voorgingen__gezichten span:nth-child(even) { background: var(--navy-600); }
:root:root .voorgingen .sterren { color: #E2A72E; }
:root:root .voorgingen:hover .voorgingen__zij { text-decoration: underline; text-decoration-color: #E2A72E; }
:root:root .lint { color: var(--navy); }
:root:root .gegevens dd { overflow-wrap: anywhere; }
@media (max-width: 760px) {
:root:root .paar .stempel { top: 10px; right: 10px; width: 96px; }
:root:root .paar .stempel span { font-size: 6px; }
:root:root .paar .label--groot { left: 10px; bottom: 10px; }
}
:root:root .dk-kalk { background: var(--kalk); }
:root:root .dk-papier { background: var(--papier); }
:root:root .dk-donker { color: var(--papier); }
:root:root .dk-donker .aankondiging { color: var(--groen-300); }
:root:root .dk-donker .aankondiging__streep { background: #E2A72E; }
:root:root .dk-donker .sectie-kop { color: var(--wit); }
:root:root .dk-donker .markering { background: none; color: #E2A72E; }
:root:root .dk-donker .knop--licht { background: #E2A72E; border-color: #E2A72E; color: var(--navy); }
:root:root .dk-donker .knop--licht:hover { background: #EDBA52; border-color: #EDBA52; color: var(--navy); }
:root:root .dk-donker .knop--stil-licht { color: var(--papier); border-color: rgba(251, 250, 247, .5); }
:root:root .dk-donker .knop--stil-licht:hover { background: rgba(251, 250, 247, .08); border-color: var(--papier); }
:root:root .dk-donker .stil-link { color: var(--papier); }
:root:root .dk-donker .voorgingen__zij, :root:root .dk-donker .voorgingen__regel, :root:root .dk-donker .voorgingen__aantal, :root:root .dk-donker .voorgingen__aantal b { color: var(--papier); }
:root:root .dk-donker .voorgingen__gezichten span { background: var(--navy-600); }
:root:root .dk-donker .voorgingen__gezichten span:nth-child(odd) { background: #E2A72E; color: var(--navy); }
:root:root .dk-foto { position: relative; margin: 0; }
:root:root .dk-foto > .open, :root:root .dk-foto > .raam { display: block; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: var(--kalk-diep); box-shadow: 6px 6px 0 #E2A72E; }
:root:root .dk-foto img { width: 100%; height: 100%; object-fit: cover; }
:root:root .dk-foto.paar > .open { display: grid; overflow: visible; background: none; box-shadow: none; border-radius: 0; gap: 12px; }
:root:root .dk-foto .paar__helft { border-radius: 6px; box-shadow: 6px 6px 0 #E2A72E; }
:root:root .dk-eerste { margin: 20px 0 14px; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.4; }
:root:root .dk-donker .dk-eerste { color: var(--wit); }
:root:root .dk-meer { margin: 0; color: var(--navy-600); }
:root:root .dk-donker .dk-meer { color: rgba(251, 250, 247, .76); }
:root:root .dk-dienst { padding: clamp(64px, 8vw, 112px) var(--goot); }
:root:root .dk-rv { padding-top: calc(74px + clamp(56px, 6vw, 88px)); }
:root:root .dk-dienst__in { max-width: var(--binnen); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
:root:root .dk-dienst__beeld { grid-row: 1; grid-column: 1 / 9; }
:root:root .dk-kaart { grid-row: 1; grid-column: 9 / 13; position: relative; z-index: 2; margin-left: -64px; padding: 42px 42px 40px; border-radius: 6px; background: var(--navy); box-shadow: 0 44px 70px -40px rgba(10, 21, 26, .75); }
:root:root .dk-dienst--rechts .dk-dienst__beeld { grid-column: 5 / 13; }
:root:root .dk-dienst--rechts .dk-kaart { grid-column: 1 / 5; margin-left: 0; margin-right: -64px; }
:root:root .dk-dienst .dk-foto:not(.paar) { aspect-ratio: 3 / 2; }
:root:root .dk-dienst .paar__open { aspect-ratio: 3 / 1.75; }
:root:root .dk-mon .dk-foto img { object-position: 50% 32%; }
:root:root .dk-dienst .duimen { margin-top: 22px; }
:root:root .dk-kaart__titel { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.06; color: var(--wit); }
:root:root .dk-kaart__titel a { color: inherit; text-decoration: none; }
:root:root .dk-rv .dk-kaart__titel { font-weight: 700; font-size: clamp(38px, 3.8vw, 56px); }
:root:root .dk-kaart__sub { margin: 0 0 20px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; color: rgba(251, 250, 247, .8); }
:root:root .dk-lijst { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
:root:root .dk-lijst li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.45; color: rgba(251, 250, 247, .92); }
:root:root .dk-lijst li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 2px; background: #E2A72E; }
:root:root .dk-kaart .acties { gap: 10px; }
:root:root .dk-kaart .voorgingen { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(251, 250, 247, .16); }
:root:root .dk-fotoband { background: var(--navy); padding: 30px var(--goot); }
:root:root .dk-fotoband__in { max-width: var(--binnen); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 28px; }
:root:root .dk-fotoband__icoon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 6px; background: #E2A72E; color: var(--navy); }
:root:root .dk-fotoband__icoon svg { width: 26px; height: 26px; }
:root:root .dk-fotoband__kop { margin: 0 0 2px; font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; color: var(--wit); }
:root:root .dk-fotoband__regel { margin: 0; font-size: 16px; color: rgba(251, 250, 247, .75); }
:root:root .dk-zakelijk { background: var(--kalk-diep); padding: 30px var(--goot); }
:root:root .dk-zakelijk__in { max-width: var(--binnen); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; }
:root:root .dk-zakelijk__kop { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.2vw, 29px); line-height: 1.2; }
:root:root .dk-zakelijk__regel { margin: 0; color: var(--navy-600); }
:root:root .dk-zakelijk__regel a { color: var(--navy); font-weight: 600; text-decoration-color: #E2A72E; text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
:root:root .dk-projecten { background: var(--navy); padding: clamp(64px, 8vw, 112px) var(--goot); }
:root:root .dk-projecten__in { max-width: var(--binnen); margin: 0 auto; }
:root:root .dk-projecten__kop { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; margin-bottom: 44px; }
:root:root .dk-projecten__intro { margin: 0; max-width: 24em; color: rgba(251, 250, 247, .72); }
:root:root .dk-projecten__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
:root:root .dk-uit { display: flex; flex-direction: column; width: 100%; text-align: left; color: var(--papier); }
:root:root .dk-uit__foto { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: var(--navy-600); box-shadow: 6px 6px 0 #E2A72E; }
:root:root .dk-uit__foto img, :root:root .dk-rij__foto img { width: 100%; height: 100%; object-fit: cover; }
:root:root .dk-uit:hover .dk-uit__foto img { transform: scale(1.03); }
:root:root .dk-uit__label { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; margin-top: 26px; }
:root:root .dk-uit__label svg { width: 26px; height: 26px; color: #E2A72E; }
:root:root .dk-uit__waar { font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.05; color: var(--wit); }
:root:root .dk-uit__wanneer { font-size: 17px; color: rgba(251, 250, 247, .72); }
:root:root .dk-uit__wat { display: block; margin-top: 8px; font-size: 17px; line-height: 1.5; color: rgba(251, 250, 247, .86); }
:root:root .dk-uit__dienst, :root:root .dk-rij__dienst { display: block; margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #E2A72E; }
:root:root .dk-rijen { list-style: none; margin: 0; padding: 0; }
:root:root .dk-rijen li + li { border-top: 1px solid rgba(251, 250, 247, .14); }
:root:root .dk-rij { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "foto label" "foto wat" "foto dienst"; grid-template-rows: auto auto 1fr; column-gap: 22px; width: 100%; padding: 24px 0; text-align: left; color: var(--papier); }
:root:root .dk-rijen li:first-child .dk-rij { padding-top: 0; }
:root:root .dk-rij__foto { grid-area: foto; display: block; aspect-ratio: 4 / 3.3; border-radius: 6px; overflow: hidden; background: var(--navy-600); box-shadow: 4px 4px 0 #E2A72E; }
:root:root .dk-rij__label { grid-area: label; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
:root:root .dk-rij__label svg { width: 20px; height: 20px; color: #E2A72E; }
:root:root .dk-rij__waar { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.1; color: var(--wit); }
:root:root .dk-rij__wanneer { font-size: 15px; color: rgba(251, 250, 247, .72); }
:root:root .dk-rij__wat { grid-area: wat; display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: rgba(251, 250, 247, .86); }
:root:root .dk-rij__dienst { grid-area: dienst; margin-top: 8px; font-size: 11.5px; }
:root:root .dk-rij:hover .dk-rij__waar { text-decoration: underline; text-decoration-color: #E2A72E; text-underline-offset: 4px; }
:root:root .dk-projecten__voet { margin-top: 48px; }
:root:root .dk-nietbij { background: #E2A72E; padding: clamp(56px, 7vw, 96px) var(--goot); }
:root:root .dk-nietbij__in { max-width: var(--binnen); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 56px; align-items: center; }
:root:root .dk-nietbij__kop { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.015em; color: var(--navy); }
:root:root .dk-nietbij .markering { background: none; font-style: italic; }
:root:root .dk-nietbij__regel { margin: 0 0 22px; font-size: clamp(18px, 1.5vw, 21px); color: var(--navy); }
:root:root .dk-oordelen { background: var(--kalk); padding: clamp(64px, 8vw, 112px) var(--goot); }
:root:root .dk-oordelen__in { max-width: var(--binnen); margin: 0 auto; }
:root:root .dk-oordelen__kop { text-align: center; margin-bottom: 48px; }
:root:root .dk-oordelen__kop .aankondiging { justify-content: center; }
:root:root .dk-score { display: inline-flex; align-items: center; gap: 22px; margin-top: 30px; text-align: left; text-decoration: none; color: inherit; }
:root:root .dk-score .sterren { gap: 6px; font-size: 46px; color: #E2A72E; }
:root:root .dk-score__woorden { display: flex; flex-direction: column; gap: 4px; }
:root:root .dk-score__cijfer { font-size: 21px; color: var(--grijs); line-height: 1; }
:root:root .dk-score__cijfer b { font-family: var(--serif); font-weight: 700; font-size: 40px; color: var(--navy); }
:root:root .dk-score__aantal { font-size: 18px; }
:root:root .dk-score:hover .dk-score__aantal { text-decoration: underline; text-decoration-color: #E2A72E; text-underline-offset: 4px; }
:root:root .dk-groot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "kop tekst" "sterren tekst" "titel tekst"; grid-template-rows: auto auto 1fr; gap: 14px 56px; margin-bottom: 22px; padding: 46px 50px; border-radius: 6px; background: var(--navy); text-decoration: none; box-shadow: 0 40px 70px -46px rgba(10, 21, 26, .7); }
:root:root .dk-groot__kop { grid-area: kop; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
:root:root .dk-groot__letter { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #E2A72E; color: var(--navy); font-family: var(--serif); font-weight: 700; font-size: 23px; }
:root:root .dk-groot__wie { display: flex; flex-direction: column; line-height: 1.3; }
:root:root .dk-groot__wie b { font-size: 18px; color: var(--wit); }
:root:root .dk-groot__wie span { font-size: 14px; color: rgba(251, 250, 247, .65); }
:root:root .dk-groot__platform { flex-basis: 100%; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #E2A72E; }
:root:root .dk-groot__sterren { grid-area: sterren; display: inline-flex; align-items: center; gap: 10px; color: var(--wit); }
:root:root .dk-groot__sterren .sterren { font-size: 22px; color: #E2A72E; }
:root:root .dk-groot__titel { grid-area: titel; font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.2; color: var(--wit); }
:root:root .dk-groot__tekst { grid-area: tekst; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.5; color: var(--papier); }
:root:root .dk-okaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
:root:root .dk-okaart { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; border-radius: 6px; border: 1px solid var(--lijn); border-top: 4px solid #E2A72E; background: var(--papier); text-decoration: none; color: inherit; }
:root:root .dk-okaart__kop { display: flex; align-items: center; gap: 12px; }
:root:root .dk-okaart__letter { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--papier); font-family: var(--serif); font-weight: 700; font-size: 19px; }
:root:root .dk-okaart__wie { display: flex; flex-direction: column; line-height: 1.3; }
:root:root .dk-okaart__wie b { font-size: 16.5px; }
:root:root .dk-okaart__wie span { font-size: 13.5px; color: var(--grijs); }
:root:root .dk-okaart__platform { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--groen-500); }
:root:root .dk-okaart__sterren { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; }
:root:root .dk-okaart__sterren .sterren { color: #E2A72E; font-size: 18px; }
:root:root .dk-okaart__titel { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.2; }
:root:root .dk-okaart:hover .dk-okaart__titel { text-decoration: underline; text-decoration-color: #E2A72E; text-underline-offset: 4px; }
:root:root .dk-okaart__tekst { font-size: 16px; line-height: 1.6; color: var(--navy-600); }
:root:root .dk-oordelen__voet { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 40px; }
:root:root .dk-eigenaar { background: var(--navy); padding: clamp(64px, 8vw, 112px) var(--goot); }
:root:root .dk-eigenaar__in { max-width: var(--binnen); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
:root:root .dk-hand { margin: 18px 0 26px; font-family: var(--hand); font-size: clamp(84px, 7.6vw, 112px); line-height: .7; padding-top: .12em; color: #E2A72E; }
:root:root .dk-eigenaar__foto { aspect-ratio: 4 / 4.3; }
:root:root .dk-eigenaar__foto img { object-position: 44% 30%; }
:root:root .dk-overons { background: var(--papier); padding: clamp(64px, 8vw, 112px) var(--goot); }
:root:root .dk-overons__in { max-width: var(--binnen); margin: 0 auto; }
:root:root .dk-overons__boven { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
:root:root .dk-overons .acties { margin-top: 26px; }
:root:root .dk-overons__foto { aspect-ratio: 4 / 3.3; }
:root:root .dk-overons__foto img { object-position: 50% 40%; }
:root:root .dk-stappen { position: relative; list-style: none; margin: clamp(48px, 5vw, 76px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
:root:root .dk-stappen::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 3px; border-radius: 2px; background: #E2A72E; }
:root:root .dk-stappen li { position: relative; display: flex; flex-direction: column; gap: 6px; }
:root:root .dk-stappen__nr { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 6px; background: var(--navy); color: var(--wit); font-family: var(--serif); font-weight: 700; font-size: 24px; box-shadow: 0 0 0 8px var(--papier); }
:root:root .dk-stappen__wat { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.25; }
:root:root .dk-stappen__hoe { font-size: 16px; line-height: 1.5; color: var(--grijs); }
:root:root .dk-lint { background: var(--navy-900); padding: 22px var(--goot); }
:root:root .dk-lint__in { max-width: var(--binnen); margin: 0 auto; display: flex; align-items: center; gap: 28px; }
:root:root .dk-lint__kop { flex: none; margin: 0; font-size: 13px; }
:root:root .dk-lint .lint { color: var(--papier); }
:root:root .dk-lint .lint__plaats--thuis { color: #E2A72E; }
:root:root .dk-gebied { background: var(--kalk); padding: clamp(64px, 8vw, 112px) var(--goot); }
:root:root .dk-gebied__in { max-width: var(--binnen); margin: 0 auto; }
:root:root .dk-landkaart { height: clamp(420px, 42vw, 560px); border-radius: 6px; box-shadow: 0 34px 60px -34px rgba(15, 31, 41, .5); }
:root:root .dk-gebied__onder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
:root:root .dk-gebied__onder { align-items: stretch; }
:root:root .dk-gebied__bus { grid-column: 1 / 7; margin-top: 44px; min-height: 300px; }
:root:root .dk-gebied__bus img { object-position: 58% 60%; }
:root:root .dk-gebied__kaartje { grid-column: 7 / 13; position: relative; z-index: 2; margin-top: -90px; padding: 36px 40px 40px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--papier); box-shadow: 8px 8px 0 #E2A72E; }
:root:root .dk-plaatsen { list-style: none; margin: 20px 0 26px; padding: 0; columns: 2; column-gap: 26px; }
:root:root .dk-plaatsen li { padding: 6px 0; border-bottom: 1px solid var(--lijn); break-inside: avoid; font-weight: 500; }
:root:root .dk-plaatsen li:first-child { font-weight: 700; }
:root:root .dk-plaatsen li:first-child::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 9px; border-radius: 2px; background: #E2A72E; }
:root:root .dk-vragen { background: var(--papier); padding: clamp(64px, 8vw, 112px) var(--goot); }
:root:root .dk-vragen__in { max-width: var(--binnen); margin: 0 auto; }
:root:root .dk-vragen__kop { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; margin-bottom: 36px; }
:root:root .dk-vragen__voet { padding: 22px 26px; border-radius: 6px; background: var(--navy); }
:root:root .dk-vragen__voet p { margin: 0 0 12px; font-family: var(--serif); font-size: 20px; color: var(--wit); }
:root:root .dk-vraag { border-top: 1px solid var(--lijn); }
:root:root .dk-vraag:last-child { border-bottom: 1px solid var(--lijn); }
:root:root .dk-vraag summary { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; list-style: none; cursor: pointer; padding: 24px 66px 24px 0; font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; }
:root:root .dk-vraag summary::-webkit-details-marker { display: none; }
:root:root .dk-vraag__nr { position: relative; font-weight: 700; font-size: 28px; color: var(--navy); }
:root:root .dk-vraag__nr::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 30px; height: 3px; background: #E2A72E; }
:root:root .dk-vraag summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--navy); font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1; }
:root:root .dk-vraag[open] summary::after { content: "−"; background: #E2A72E; border-color: #E2A72E; color: var(--navy); }
:root:root .dk-vraag p { margin: -8px 66px 26px 76px; color: var(--navy-600); }
:root:root .dk-actie { background: var(--navy); padding: clamp(64px, 8vw, 112px) var(--goot) 0; }
:root:root .dk-actie__in { max-width: var(--binnen); margin: 0 auto; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(251, 250, 247, .14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
:root:root .dk-actie__kop { margin: 0; flex: 1 1 520px; font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.12; color: var(--wit); }
:root:root .dk-contact { background: var(--navy); padding: clamp(48px, 5vw, 72px) var(--goot) clamp(64px, 8vw, 112px); }
:root:root .dk-contact__in { max-width: var(--binnen); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
:root:root .dk-contact__eerste { margin: 18px 0 24px; color: rgba(251, 250, 247, .8); }
:root:root .dk-donker .tegel--bel { background: var(--papier); color: var(--navy); }
:root:root .dk-donker .tegel--bel:hover { background: var(--wit); }
:root:root .dk-donker .gegevens > div { border-color: rgba(251, 250, 247, .14); }
:root:root .dk-donker .gegevens dt { color: #E2A72E; }
:root:root .dk-donker .gegevens dd, :root:root .dk-donker .gegevens a { color: var(--papier); }
:root:root .dk-contact .formulier { border: 0; border-radius: 6px; background: var(--papier); color: var(--navy); box-shadow: 8px 8px 0 #E2A72E; }
:root:root .dk-voet { background: var(--navy-900); padding: 72px var(--goot) 0; text-align: center; }
:root:root .dk-voet__in { max-width: var(--binnen); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding-bottom: 56px; }
:root:root .dk-voet__merk { grid-column: 1 / -1; display: flex; justify-content: center; padding-bottom: 40px; border-bottom: 1px solid rgba(251, 250, 247, .12); }
:root:root .dk-voet .lockup--voet .lockup__naam { color: var(--papier); }
:root:root .dk-voet .lockup--voet .lockup__slogan { color: rgba(251, 250, 247, .7); }
:root:root .dk-voet__kop { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #E2A72E; }
:root:root .dk-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
:root:root .dk-voet a:not(.knop) { color: var(--papier); text-decoration: none; }
:root:root .dk-voet a:not(.knop):hover { text-decoration: underline; text-decoration-color: #E2A72E; text-underline-offset: 3px; }
:root:root .dk-voet address { font-style: normal; line-height: 1.7; margin: 0 0 18px; }
:root:root .dk-voet .paar-knoppen { justify-content: center; }
:root:root .dk-voet__onder { max-width: var(--binnen); margin: 0 auto; padding: 22px 0 26px; border-top: 1px solid rgba(251, 250, 247, .12); font-size: 14px; color: rgba(251, 250, 247, .6); }
:root:root .dk-voet__onder p { margin: 0; }

@media (min-width: 1100px) {
:root:root .dk-dienst--links .dk-foto .stempel { right: auto; left: 16px; }
:root:root .dk-dienst--rechts .dk-foto .label--groot { left: auto; right: 16px; }
:root:root .dk-dienst--rechts .paar__helft:first-child .paar__tag { left: 82px; }
:root:root .dk-dienst--rechts .duimen { padding-left: 82px; }
}

@media (max-width: 1099px) {
:root:root .dk-dienst__beeld { display: contents; }
:root:root .dk-dienst .dk-foto { grid-column: 1 / -1; grid-row: 1; }
:root:root .dk-dienst .duimen { grid-column: 1 / -1; grid-row: 3; }
:root:root .dk-kaart, :root:root .dk-dienst--rechts .dk-kaart { grid-column: 2 / 12; grid-row: 2; margin: -72px 0 0; }
:root:root .dk-dienst .dk-foto .label--groot { bottom: 88px; }
:root:root .dk-dienst .dk-foto:not(.paar) { aspect-ratio: 16 / 9; }
:root:root .dk-dienst .paar__open { aspect-ratio: 16 / 8.4; }
:root:root .dk-uit__foto { aspect-ratio: 16 / 9; }
:root:root .dk-gebied__kaartje { margin-top: -40px; }
:root:root .dk-projecten__grid { grid-template-columns: minmax(0, 1fr); }
:root:root .dk-gebied__bus { grid-column: 1 / 6; }
:root:root .dk-gebied__kaartje { grid-column: 6 / 13; }
}
@media (max-width: 900px) {
:root:root .dk-nietbij__in, :root:root .dk-eigenaar__in, :root:root .dk-overons__boven, :root:root .dk-contact__in { grid-template-columns: minmax(0, 1fr); }
:root:root .dk-groot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "sterren" "titel" "tekst"; grid-template-rows: none; }
:root:root .dk-okaarten { grid-template-columns: minmax(0, 1fr); }
:root:root .dk-gebied__bus { display: none; }
:root:root .dk-gebied__kaartje { grid-column: 2 / 12; }
:root:root .dk-gebied__onder { column-gap: 0; }
}
@media (max-width: 760px) {
:root:root .dk-foto > .open, :root:root .dk-foto > .raam, :root:root .dk-foto .paar__helft, :root:root .dk-uit__foto { box-shadow: 4px 4px 0 #E2A72E; }
:root:root .dk-foto.paar > .open { box-shadow: none; gap: 8px; }
:root:root .dk-dienst { padding: 48px var(--goot); }
:root:root .dk-rv { padding-top: calc(40px + 40px); }
:root:root .dk-dienst .dk-foto:not(.paar) { aspect-ratio: 4 / 3.2; }
:root:root .dk-dienst .paar__open { aspect-ratio: 4 / 2.9; }
:root:root .dk-dienst .duimen { margin-top: 16px; gap: 5px; }
:root:root .dk-dienst .duim { width: 46px; height: 36px; }
:root:root .dk-dienst .duimen__tel { flex-basis: 100%; margin: 4px 0 0; text-align: left; font-size: 14px; }
:root:root .dk-kaart, :root:root .dk-dienst--rechts .dk-kaart { grid-column: 1 / -1; margin: -36px 10px 0; padding: 26px 22px 26px; }
:root:root .dk-dienst .dk-foto .label--groot { bottom: 46px; }
:root:root .dk-kaart__titel { font-size: 32px; }
:root:root .dk-rv .dk-kaart__titel { font-size: clamp(34px, 10vw, 44px); }
:root:root .dk-kaart__sub { font-size: 18.5px; }
:root:root .dk-fotoband { padding: 26px var(--goot); }
:root:root .dk-fotoband__in { grid-template-columns: minmax(0, 1fr); }
:root:root .dk-fotoband__icoon { display: none; }
:root:root .dk-zakelijk { padding: 24px var(--goot); }
:root:root .dk-projecten { padding: 48px var(--goot); }
:root:root .dk-projecten__kop { margin-bottom: 26px; }
:root:root .dk-uit__waar { font-size: 26px; }
:root:root .dk-rijen { margin-top: 10px; }
:root:root .dk-rijen li:first-child .dk-rij { padding-top: 24px; }
:root:root .dk-rij { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; }
:root:root .dk-rij__waar { font-size: 20px; }
:root:root .dk-nietbij { padding: 48px var(--goot); }
:root:root .dk-nietbij__kop { font-size: clamp(34px, 10vw, 44px); }
:root:root .dk-oordelen { padding: 48px var(--goot); }
:root:root .dk-oordelen__kop { margin-bottom: 30px; }
:root:root .dk-score { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
:root:root .dk-score .sterren { font-size: 32px; }
:root:root .dk-groot { padding: 26px 22px; }
:root:root .dk-groot__tekst { font-size: 19px; }
:root:root .dk-groot__titel { font-size: 22px; }
:root:root .dk-okaart { padding: 22px 20px 24px; }
:root:root .dk-eigenaar, :root:root .dk-overons, :root:root .dk-gebied, :root:root .dk-vragen { padding: 48px var(--goot); }
:root:root .dk-eigenaar__foto { order: -1; aspect-ratio: 4 / 3.4; }
:root:root .dk-hand { font-size: 68px; margin: 14px 0 20px; }
:root:root .dk-overons__foto { aspect-ratio: 4 / 3.2; }
:root:root .dk-lint { padding: 16px var(--goot); }
:root:root .dk-lint__in { flex-direction: column; align-items: flex-start; gap: 8px; }
:root:root .dk-landkaart { height: 320px; }
:root:root .dk-gebied__kaartje { grid-column: 1 / -1; margin: -36px 10px 0; padding: 24px 20px 26px; box-shadow: 5px 5px 0 #E2A72E; }
:root:root .dk-vragen__voet { flex: 1 1 100%; padding: 18px 18px; }
:root:root .dk-vraag summary { grid-template-columns: 46px minmax(0, 1fr); padding: 18px 48px 18px 0; font-size: 18.5px; }
:root:root .dk-vraag__nr { font-size: 21px; }
:root:root .dk-vraag__nr::after { width: 22px; }
:root:root .dk-vraag summary::after { width: 30px; height: 30px; margin-top: -15px; font-size: 18px; }
:root:root .dk-vraag p { margin: -4px 0 20px 46px; }
:root:root .dk-actie { padding-top: 48px; }
:root:root .dk-actie__kop { flex-basis: auto; font-size: clamp(27px, 8vw, 34px); }
:root:root .dk-actie__in { padding-bottom: 32px; }
:root:root .dk-contact { padding: 36px var(--goot) 48px; }
:root:root .dk-contact .formulier { padding: 22px 18px; box-shadow: 5px 5px 0 #E2A72E; }
:root:root .dk-voet { padding-top: 48px; }
:root:root .dk-voet__in { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 32px; }
:root:root .dk-voet__onder { padding-bottom: 92px; }
}

/* Round 10 (Sem, 2026-11-03), by hand: on a computer, where photo and card stand side by side, the photo is centred
   on the card (the thumbnails hang under it). 72px = the thumbnails' 22px margin + their 50px height, so the picture
   column is as high above the photo as below it. (The service numbers 01-04 came out of index.html in the same go.) */
@media (min-width: 1100px) {
:root:root .dk-dienst__beeld { padding-top: 72px; }
}


/* ============ FOTOHOOGTE — picked 1 of ronde/hoogte.py (10% hoger). Written in by hand (round 10, 2026-11-03), without the ask's EDITS (hidden elements only the other answers use); %V% -> :root:root. ============ */
@media (min-width: 1100px) {
  :root:root .dk-rv .dk-foto:not(.paar) { aspect-ratio: 3 / 2.2; }
}


/* ============ BAND KLEUR — picked 1 of ronde/bandkleur.py (oker, met donkerblauwe letters). Written in by hand (round 10, 2026-11-03), without the ask's EDITS (hidden elements only the other answers use); %V% -> :root:root. ============ */
:root:root .dk-fotoband { --fb-grond: #E2A72E; --fb-kop: var(--navy); --fb-tekst: var(--navy-600); --fb-accent: var(--navy); --fb-accent-ink: #E2A72E;
  background: var(--fb-grond); color: var(--navy); }
:root:root .dk-fotoband__kop { color: var(--fb-kop); }
:root:root .dk-fotoband__regel { color: var(--fb-tekst); }
:root:root .dk-fotoband__icoon { background: var(--fb-accent); color: var(--fb-accent-ink); }
:root:root .dk-fotoband .knop--licht { background: var(--navy); border-color: var(--navy); color: var(--wit); }
:root:root .dk-fotoband .knop--licht:hover { background: var(--navy-600); border-color: var(--navy-600); color: var(--wit); }


/* ============ VOOR/NA — picked 3 of ronde/voorna.py (breed over de hele breedte, de kaart eronder). Written in by hand (round 10, 2026-11-03), without the ask's EDITS (hidden elements only the other answers use); %V% -> :root:root. ============ */
@media (min-width: 1100px) {
  :root:root :is(.dk-dg, .dk-gil) .dk-kaart { margin-right: 0; }
  :root:root :is(.dk-dg, .dk-gil) .dk-dienst__beeld { padding-left: 44px; }
  :root:root :is(.dk-dg, .dk-gil) .duimen { padding-left: 0; }
  :root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__helft:first-child .paar__tag { left: 14px; }
}
@media (max-width: 1099px) {
  :root:root :is(.dk-dg, .dk-gil) .dk-kaart { grid-column: 1 / -1; grid-row: 3; margin: 28px 0 0; }
  :root:root :is(.dk-dg, .dk-gil) .duimen { grid-row: 2; }
  :root:root :is(.dk-dg, .dk-gil) .dk-foto .label--groot { bottom: 16px; }
}
@media (max-width: 760px) {
  :root:root :is(.dk-dg, .dk-gil) .dk-kaart { margin: 22px 0 0; }
  :root:root :is(.dk-dg, .dk-gil) .dk-foto .label--groot { bottom: 10px; }
}

:root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__open { aspect-ratio: auto; height: auto; gap: 18px; }
:root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__helft { aspect-ratio: 3 / 2; }
:root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__helft img { object-position: 50% 50%; }
:root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__tag, :root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__helft:first-child .paar__tag { top: 14px; left: 14px; font-size: 13.5px; padding: 5px 12px; }
:root:root :is(.dk-dg, .dk-gil) .dk-foto .label--groot { left: auto; right: 16px; }
@media (max-width: 1099px) {
  :root:root :is(.dk-dg, .dk-gil) .dk-foto .label--groot { left: auto; right: 16px; }
}
@media (min-width: 1100px) {
  :root:root :is(.dk-dg, .dk-gil) .dk-dienst__beeld { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  :root:root :is(.dk-dg, .dk-gil) .dk-kaart { grid-column: 1 / -1; grid-row: 2; margin: 36px 0 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
    grid-template-areas: "titel lijst acties" "sub lijst acties"; column-gap: 48px; align-items: start; padding: 38px 44px; }
  :root:root :is(.dk-dg, .dk-gil) .dk-kaart__titel { grid-area: titel; }
  :root:root :is(.dk-dg, .dk-gil) .dk-kaart__sub { grid-area: sub; margin: 0; }
  :root:root :is(.dk-dg, .dk-gil) .dk-kaart .dk-lijst { grid-area: lijst; margin: 4px 0 0; }
  :root:root :is(.dk-dg, .dk-gil) .dk-kaart .acties { grid-area: acties; flex-direction: column; align-items: stretch; align-self: center; }
}
@media (max-width: 760px) {
  :root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__open { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  :root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__tag, :root:root :is(.dk-dg, .dk-gil) .dk-foto .paar__helft:first-child .paar__tag { top: 9px; left: 9px; font-size: 11.5px; padding: 3px 9px; }
  :root:root :is(.dk-dg, .dk-gil) .dk-foto .label--groot { right: 10px; }
}


/* ============ STAPPEN — picked 3 of ronde/stappen.py (de drie stappen in een donkerblauw vlak, met pijlen ertussen). Written in by hand (round 10, 2026-11-03), without the ask's EDITS (hidden elements only the other answers use); %V% -> :root:root. ============ */
:root:root .dk-stappen::before, :root:root .dk-stappen__nr { display: none; }
:root:root .dk-stappen { gap: 64px; padding: clamp(30px, 3.4vw, 44px) clamp(30px, 3.6vw, 52px); border-radius: 6px; background: var(--navy); box-shadow: 0 34px 60px -40px rgba(10, 21, 26, .7); }
:root:root .dk-stappen li + li::before { content: ""; position: absolute; left: -46px; top: 2px; width: 28px; height: 28px; background: #E2A72E;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 12h16M13 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 12h16M13 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
:root:root .dk-stappen__wat { color: var(--wit); }
:root:root .dk-stappen__hoe { color: rgba(251, 250, 247, .74); }
@media (max-width: 1099px) {
  :root:root .dk-stappen { gap: 52px; }
  :root:root .dk-stappen li + li::before { left: -40px; width: 26px; height: 26px; }
}


/* ============ GROTE REVIEW — picked 3 of ronde/uitgelicht.py (naast het cijfer: 5,0 in een donker vlak links, de review licht rechts). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .dk-groot { color: var(--navy); }
:root:root .dk-groot__wie b { color: var(--navy); }
:root:root .dk-groot__wie span { color: var(--grijs); }
:root:root .dk-groot__platform { color: var(--groen-500); }
:root:root .dk-groot__sterren { color: var(--navy); }
:root:root .dk-groot__titel { color: var(--navy); }

:root:root .dk-score { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 40px 36px;
  border-radius: 6px; background: var(--navy); color: var(--papier); text-align: left; box-shadow: none; }
:root:root .dk-score .sterren { gap: 5px; font-size: 30px; }
:root:root .dk-score__woorden { gap: 8px; }
:root:root .dk-score__cijfer { font-size: 22px; color: rgba(251, 250, 247, .7); }
:root:root .dk-score__cijfer b { font-size: 72px; color: var(--wit); }
:root:root .dk-score__aantal { font-size: 17px; color: var(--papier); }
:root:root .dk-groot { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel titel" "tekst tekst" "kop sterren"; grid-template-rows: none;
  gap: 16px 24px; align-items: center; padding: 40px 44px; border: 1px solid var(--lijn); border-top: 5px solid #E2A72E; background: var(--papier);
  box-shadow: none; }
:root:root .dk-groot__titel { font-size: 24px; }
:root:root .dk-groot__tekst { margin-bottom: 8px; font-size: clamp(19px, 1.6vw, 22px); color: var(--navy); }
:root:root .dk-groot__letter { background: var(--navy); color: var(--papier); width: 46px; height: 46px; font-size: 21px; }
:root:root .dk-groot__sterren .sterren { font-size: 19px; }
:root:root .dk-groot:hover .dk-groot__titel { text-decoration: underline; text-decoration-color: #E2A72E; text-underline-offset: 5px; }
@media (min-width: 901px) {
  :root:root .dk-oordelen__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 22px; }
  :root:root .dk-oordelen__kop { display: contents; }
  :root:root .dk-oordelen__kop .aankondiging, :root:root .dk-oordelen__kop .sectie-kop { grid-column: 1 / -1; justify-self: center; text-align: center; }
  :root:root .dk-oordelen__kop .sectie-kop { margin-bottom: 48px; }
  :root:root .dk-score { grid-column: 1; margin: 0 0 22px; }
  :root:root .dk-groot { grid-column: 2; }
  :root:root .dk-okaarten, :root:root .dk-oordelen__voet { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root:root .dk-score { width: 100%; margin-top: 26px; }
}
@media (max-width: 760px) {
  :root:root .dk-score { align-items: center; padding: 26px 22px; text-align: center; }
  :root:root .dk-score__woorden { align-items: center; }
  :root:root .dk-score__cijfer b { font-size: 56px; }
  :root:root .dk-groot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "tekst" "kop" "sterren"; gap: 12px; padding: 26px 22px; }
  :root:root .dk-groot__tekst { font-size: 18.5px; }
}


/* ============ VRAAG NIET BIJ — picked 1 of ronde/hulp.py (een balk onder de vragen, licht oker). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .dk-vragen__in { display: flex; flex-direction: column; }
:root:root .dk-vragen__kop { display: contents; }
:root:root .dk-vragen__kop > div:first-child { margin-bottom: 36px; }
:root:root .dk-vragen__voet { order: 1; }
:root:root .dk-vragen__voet p { color: var(--navy); }

:root:root .dk-vragen__voet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-top: 40px;
  padding: 26px 32px 26px 30px; border-radius: 6px; border-left: 6px solid #E2A72E; background: var(--amber-100); }
:root:root .dk-vragen__voet p { margin: 0; font-weight: 600; font-size: clamp(21px, 2vw, 26px); line-height: 1.25; }
:root:root .dk-vragen__voet .knop--licht { background: var(--navy); border-color: var(--navy); color: var(--wit); }
:root:root .dk-vragen__voet .knop--licht:hover { background: var(--navy-600); border-color: var(--navy-600); color: var(--wit); }
@media (max-width: 760px) {
  :root:root .dk-vragen__kop > div:first-child { margin-bottom: 24px; }
  :root:root .dk-vragen__voet { flex-direction: column; align-items: flex-start; margin-top: 28px; padding: 20px 18px 20px 18px; border-left-width: 5px; }
  :root:root .dk-vragen__voet p { font-size: 21px; }
}


/* ============ Round 11, phone only (Sem, 2026-11-03), straight into the page: "Ik wil deze cta buttons onder elkaar
   zien" (the fold's Bel ons / App een foto tiles; the same tiles in Contact stack too) and "Ik wil het "ontmoet de
   eigenaar" element bovenaan de afbeelding zien" (the Coen chip on the fold photo, from the bottom to the top). From
   761 px up nothing changes. ============ */
@media (max-width: 760px) {
:root:root .tegels { grid-template-columns: minmax(0, 1fr); }
:root:root .vouw__coen { top: 12px; bottom: auto; }
}


/* ============ KNOPPEN BOVEN — picked 1 of ronde/naast.py (naast elkaar, zoals eerst). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .tegels { grid-template-columns: 1fr 1fr; }
}


/* ============ RATING MOBIEL — picked 2 of ronde/sterbalk.py (in een licht kaartje met een okeren rand links). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .sterbalk { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; margin-top: 18px; padding: 16px 18px 18px 16px;
    border: 1px solid var(--lijn); border-left: 5px solid #E2A72E; border-radius: 10px; background: var(--papier);
    box-shadow: 0 16px 30px -24px rgba(10, 21, 26, .55); }
  :root:root .sterbalk__sterren { gap: 5px; }
  :root:root .sterbalk__sterren svg { width: 38px; height: 38px; }
  :root:root .sterbalk__woorden { gap: 5px; }
  :root:root .sterbalk__cijfer { font-size: 19px; }
  :root:root .sterbalk__cijfer b { font-size: 32px; }
  :root:root .sterbalk__tekst { font-size: 16px; }
  :root:root .sterbalk__bron { font-weight: 700; color: var(--navy); }
}
@media (max-width: 380px) {
  :root:root .sterbalk__sterren svg { width: 34px; height: 34px; }
}

/* Round 11, phone, by hand (Sem, 2026-11-03, right with the pick of sterbalk 2: "verwijder de "card achtige"
   achtergrond achter het rating element"): the card's ground, its thin line round it, its rounded corners and its
   shadow go; the ochre edge on the left stays, the words keep their room beside it. */
@media (max-width: 760px) {
:root:root .sterbalk { padding: 2px 0 2px 16px; border: 0; border-left: 5px solid #E2A72E; border-radius: 0; background: none; box-shadow: none; }
}

/* Round 11, phone, by hand (Sem, 2026-11-03, with a shot of the fold at 340 px, arrows pointing left at the stars and
   the 5,0: "zonder: border-left: 5px solid #E2A72E; en meer naar links, uitgelijnt met de CTA's"): the ochre edge goes
   and the rating moves left to the buttons' left edge. The star drawing sits about a tenth of its width inside its box,
   so the stars move that much further left: the tip of the first star on the buttons' edge. */
@media (max-width: 760px) {
:root:root .sterbalk { padding: 2px 0; border-left: 0; }
:root:root .sterbalk__sterren { margin-left: -4px; }
}
@media (max-width: 380px) {
:root:root .sterbalk__sterren { margin-left: -3.5px; }
}


/* ============ RATING TEKST — picked 3 of ronde/ratingtekst.py (veel groter: 5,0 46 px, de regel 21 px). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .sterbalk__cijfer { font-size: 25px; }
  :root:root .sterbalk__cijfer b { font-size: 46px; }
  :root:root .sterbalk__tekst { font-size: 21px; line-height: 1.35; }
}


/* ============ KNOPPEN — picked 2 of ronde/knoppen.py (het werkwoord groot: "Bel ons" en "App een foto" groot, het nummer klein eronder). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .tegels { gap: 10px; }
  :root:root .tegel { justify-content: flex-end; gap: 5px; min-height: 112px; padding: 16px 15px 15px; border-radius: 11px; }
  :root:root .tegel__label { flex-direction: column; align-items: flex-start; gap: 9px; font-size: clamp(18px, 5.2vw, 23px); line-height: 1.1;
    letter-spacing: 0; text-transform: none; white-space: nowrap; }
  :root:root .tegel__label svg { width: 24px; height: 24px; }
  :root:root .tegel__nr { font-size: 14.5px; font-weight: 600; letter-spacing: .01em; opacity: .82; }
}
@media (max-width: 380px) {
  :root:root .tegel { min-height: 104px; padding: 14px 12px 13px; }
  :root:root .tegel__label { font-size: 17px; }
  :root:root .tegel__label svg { width: 22px; height: 22px; }
  :root:root .tegel__nr { font-size: 13.5px; }
}


/* ============ RATING VORM — picked 3 of ronde/ratingvorm.py (boven de knoppen: tussen de introregel en de knoppen, in twee regels). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .sterbalk { flex-direction: row; flex-wrap: wrap; align-items: center; }
  :root:root .sterbalk__woorden { display: contents; }
  :root:root .sterbalk__cijfer { order: 1; }
  :root:root .sterbalk__sterren { order: 2; gap: 3px; margin-left: 0; }
  :root:root .sterbalk__sterren svg { width: 30px; height: 30px; }
  :root:root .sterbalk__tekst { order: 3; flex: 1 0 100%; }
  :root:root .vouw__tekst { display: flex; flex-direction: column; }
  :root:root .vouw__tekst > .sterbalk { order: 1; }
  :root:root .vouw__tekst > .tegels { order: 2; }
  :root:root .sterbalk { gap: 6px 16px; margin: -2px 0 22px; padding: 0; }
}
@media (max-width: 380px) {
  :root:root .sterbalk { column-gap: 12px; }
  :root:root .sterbalk__sterren { gap: 2px; }
  :root:root .sterbalk__sterren svg { width: 27px; height: 27px; }
}

/* Round 11, phone, by hand (Sem, 2026-11-03, right with the pick of knoppen 2 and ratingvorm 3, a shot of the fold at
   345 px with arrows from "Bel ons" and "App een foto" up to beside their icons: "De "header tekst" binnen de buttons
   naast het icoontje verplaats"): the words go beside the icon on the top row, the number stays at the bottom. Both
   button pairs, the fold's and Contact's. To fit beside the icon the side padding and the icon are a little smaller;
   on the narrowest phones (up to 340 px) the words are 15.5 px. */
@media (max-width: 760px) {
:root:root .tegel { justify-content: space-between; padding-left: 12px; padding-right: 12px; }
:root:root .tegel__label { flex-direction: row; align-items: center; gap: 7px; font-size: clamp(17px, 5vw, 23px); }
:root:root .tegel__label svg { width: 22px; height: 22px; }
}
@media (max-width: 380px) {
:root:root .tegel { padding-left: 10px; padding-right: 10px; }
:root:root .tegel__label { gap: 6px; font-size: 17px; }
:root:root .tegel__label svg { width: 18px; height: 18px; }
}
@media (max-width: 340px) {
:root:root .tegel__label { font-size: 15.5px; }
}


/* ============ RATING BADGE — picked 1 of ronde/badge.py (badge: een wit kaartje, 5,0 links, sterren en tekst rechts, gecentreerd). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .sterbalk { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 4px 0; width: fit-content; max-width: 100%;
    margin: 2px auto 20px; padding: 14px 20px 15px; border: 1px solid var(--lijn); border-radius: 14px; background: var(--wit);
    box-shadow: 0 14px 28px -20px rgba(10, 21, 26, .45); }
  :root:root .sterbalk__cijfer { grid-area: 1 / 1 / 3 / 2; display: flex; flex-direction: column; align-items: center; gap: 3px; margin-right: 18px; padding-right: 18px;
    border-right: 1px solid var(--lijn); font-size: 15px; }
  :root:root .sterbalk__cijfer b { font-size: 46px; }
  :root:root .sterbalk__sterren { grid-area: 1 / 2; align-self: end; gap: 3px; margin-left: -2px; }
  :root:root .sterbalk__sterren svg { width: 22px; height: 22px; }
  :root:root .sterbalk__tekst { grid-area: 2 / 2; align-self: start; flex: none; font-size: 16.5px; line-height: 1.3; }
  :root:root .sterbalk__aantal, :root:root .sterbalk__bron { display: block; }
}
@media (max-width: 380px) {
  :root:root .sterbalk { padding: 13px 16px 14px; }
  :root:root .sterbalk__cijfer { margin-right: 14px; padding-right: 14px; }
  :root:root .sterbalk__sterren svg { width: 20px; height: 20px; }
  :root:root .sterbalk__tekst { font-size: 16px; }
}

/* Round 11, phone, by hand (Sem, 2026-11-03, right with the pick of badge 1: "maar ik wil dat de badge de volledige
   breedte inneemt"): the white card over the full width, as wide as the two buttons; its content stays centred in it. */
@media (max-width: 760px) {
:root:root .sterbalk { width: 100%; max-width: 690px; margin-left: 0; margin-right: 0; }
}

/* Round 11, phone, by hand (Sem, 2026-11-03, a shot of the full-width badge at 345 px, arrows pointing left at 5,0 and
   "uit 5": "Ik wil dat deze tekst naar links wordt uitgelijnd"): the badge's content starts at the card's left side
   instead of in its middle, and "uit 5" stands left under 5,0. */
@media (max-width: 760px) {
:root:root .sterbalk { justify-content: start; }
:root:root .sterbalk__cijfer { align-items: flex-start; }
}


/* ============ KNOPPEN HOOGTE — picked 1 of ronde/knophoogte.py (iets lager, iets groter: 94 px hoog, het nummer 17 px). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .tegel { padding-left: 10px; padding-right: 10px; }
  :root:root .tegel__label { gap: 6px; font-size: clamp(17px, calc(7.5vw - 9px), 24px); }
  :root:root .tegel__label svg { width: 20px; height: 20px; }
}
@media (max-width: 380px) {
  :root:root .tegel { padding-left: 8px; padding-right: 8px; }
  :root:root .tegel__label { gap: 5px; font-size: calc(8.2vw - 10.4px); }
  :root:root .tegel__label svg { width: 18px; height: 18px; }
}

@media (max-width: 760px) {
  :root:root .tegel { min-height: 94px; gap: 8px; padding-top: 14px; padding-bottom: 14px; }
  :root:root .tegel__nr { font-size: clamp(17px, 4.4vw, 21px); }
}
@media (max-width: 380px) {
  :root:root .tegel { min-height: 88px; }
  :root:root .tegel__nr { font-size: 16px; }
}

/* Round 11, phone, by hand (Sem, 2026-11-03, a crop of the strip under the fold at about 330 px, "Monumentenwerk voor
   het Rijk en meerdere overheden" and "Werkgebied heel Gelderland, en verder" side by side, each with its photo on
   top: "ik wil dat je deze kolommen onder elkaar plaats"): the two stand under each other, each a row with its photo
   on the left and its words beside it (as on a computer); the second keeps its light green tint, a thin line between. */
@media (max-width: 760px) {
:root:root .strook__ruit { grid-template-columns: minmax(0, 1fr); background: rgba(251, 250, 247, .8); }
:root:root .strook__lood { display: none; }
:root:root .strook__vak, :root:root .strook__vak + .strook__lood + .strook__vak { display: grid; grid-template-columns: 128px minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr; column-gap: 16px; padding: 14px 14px 15px 18px; }
:root:root .strook__vak + .strook__lood + .strook__vak { border-top: 1px solid rgba(31, 62, 50, .14);
  background: linear-gradient(to right, transparent 5px, rgba(227, 236, 230, .88) 5px); }
:root:root .strook__fotos { grid-column: 1; grid-row: 1 / -1; height: 96px; margin-bottom: 0; }
:root:root .strook__klein { grid-column: 2; grid-row: 2; }
:root:root .strook__groot { grid-column: 2; grid-row: 3; }
}
@media (max-width: 380px) {
:root:root .strook__vak, :root:root .strook__vak + .strook__lood + .strook__vak { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; padding-right: 12px; }
:root:root .strook__fotos { height: 88px; }
}


/* ============ VOOR/NA MOBIEL — picked 3 of ronde/eenfoto.py (schakelaar in de foto: een rond knopje "Voor | Na" linksboven). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .dk-foto.paar .paar__open { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; }
  :root:root .dk-foto.paar .paar__helft { grid-area: 1 / 1; }

  :root:root .dk-foto.paar .paar__helft { transition: opacity .3s ease, visibility .3s; }
  :root:root .dk-foto.paar:not(.toon-na) .paar__helft:last-child, :root:root .dk-foto.paar.toon-na .paar__helft:first-child { opacity: 0; visibility: hidden; }
  :root:root .vn-wissel__k { display: flex; align-items: center; justify-content: center; border: 0; background: none; font: inherit; font-weight: 700; text-transform: uppercase; color: var(--navy-600); cursor: pointer;
    transition: background-color .2s, color .2s; }
  :root:root .vn-wissel__k.is-aan { background: var(--navy); color: var(--wit); }
  :root:root .vn-wissel__k[data-toon="na"].is-aan { background: #E2A72E; color: var(--navy); }

  :root:root .dk-foto.paar .paar__tag { display: none; }
  :root:root .dk-foto.paar .vn-wissel { position: absolute; top: 9px; left: 9px; z-index: 3; display: flex; gap: 2px; padding: 3px; border-radius: 999px;
    background: rgba(251, 250, 247, .95); box-shadow: 0 4px 14px -4px rgba(10, 21, 26, .5); }
  :root:root .vn-wissel__k { min-width: 58px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; letter-spacing: .16em; }
}


/* ============ ROUND ROW "Logo" (ronde/logo.py, ?logo=1..1) — each answer a block of its own, behind :root[data-logo="n"]; with no data-logo the page is a. ============ */

:root[data-logo="1"] .lockup__merk, :root[data-logo="1"] .lockup__naam, :root[data-logo="1"] .stempel > img, :root[data-logo="1"] .stempel > span { display: none; }
:root[data-logo="1"] .lockup__logo, :root[data-logo="1"] .stempel__logo { display: block; }
:root[data-logo="1"] .lockup__logo img, :root[data-logo="1"] .stempel__logo img { width: 100%; height: auto; }
:root[data-logo="1"] .lockup--nav { --w: 164px; }
:root[data-logo="1"] .lockup--voet { margin-bottom: 0; }
:root[data-logo="1"] .lockup--voet .lockup__slogan { position: static; display: block; margin-top: calc(var(--w) * .06); text-align: center; }
@media (max-width: 760px) {
  :root[data-logo="1"] .lockup--nav { --w: clamp(118px, calc(100vw - 256px), 140px); }
}


/* ============ ROUND ROW "Logo kleur" (ronde/logokleur.py, ?logokleur=1..3) — each answer a block of its own, behind :root[data-logokleur="n"]; with no data-logokleur the page is a. ============ */

:root[data-logokleur="1"] .lockup__merk, :root[data-logokleur="1"] .lockup__naam, :root[data-logokleur="1"] .stempel > img, :root[data-logokleur="1"] .stempel > span { display: none; }
:root[data-logokleur="1"] .lockup__logo, :root[data-logokleur="1"] .stempel__logo { display: block; }
:root[data-logokleur="1"] .lockup__logo img, :root[data-logokleur="1"] .stempel__logo img { width: 100%; height: auto; }
:root[data-logokleur="1"] .lockup--nav { --w: 164px; }
:root[data-logokleur="1"] .lockup--voet { margin-bottom: 0; }
:root[data-logokleur="1"] .lockup--voet .lockup__slogan { position: static; display: block; margin-top: calc(var(--w) * .06); text-align: center; }
@media (max-width: 760px) {
  :root[data-logokleur="1"] .lockup--nav { --w: clamp(118px, calc(100vw - 256px), 140px); }
}

:root[data-logokleur="1"] .lockup__logo, :root[data-logokleur="1"] .stempel__logo { background: url(logo-k1.svg) center / 100% 100% no-repeat; }
:root[data-logokleur="1"] .lockup--voet .lockup__logo, :root[data-logokleur="1"] .stempel__logo { background-image: url(logo-k1-licht.svg); }
:root[data-logokleur="1"] .lockup__logo img, :root[data-logokleur="1"] .stempel__logo img { visibility: hidden; }

:root[data-logokleur="2"] .lockup__merk, :root[data-logokleur="2"] .lockup__naam, :root[data-logokleur="2"] .stempel > img, :root[data-logokleur="2"] .stempel > span { display: none; }
:root[data-logokleur="2"] .lockup__logo, :root[data-logokleur="2"] .stempel__logo { display: block; }
:root[data-logokleur="2"] .lockup__logo img, :root[data-logokleur="2"] .stempel__logo img { width: 100%; height: auto; }
:root[data-logokleur="2"] .lockup--nav { --w: 164px; }
:root[data-logokleur="2"] .lockup--voet { margin-bottom: 0; }
:root[data-logokleur="2"] .lockup--voet .lockup__slogan { position: static; display: block; margin-top: calc(var(--w) * .06); text-align: center; }
@media (max-width: 760px) {
  :root[data-logokleur="2"] .lockup--nav { --w: clamp(118px, calc(100vw - 256px), 140px); }
}

:root[data-logokleur="2"] .lockup__logo, :root[data-logokleur="2"] .stempel__logo { background: url(logo-k2.svg) center / 100% 100% no-repeat; }
:root[data-logokleur="2"] .lockup--voet .lockup__logo, :root[data-logokleur="2"] .stempel__logo { background-image: url(logo-k2-licht.svg); }
:root[data-logokleur="2"] .lockup__logo img, :root[data-logokleur="2"] .stempel__logo img { visibility: hidden; }

:root[data-logokleur="3"] .lockup__merk, :root[data-logokleur="3"] .lockup__naam, :root[data-logokleur="3"] .stempel > img, :root[data-logokleur="3"] .stempel > span { display: none; }
:root[data-logokleur="3"] .lockup__logo, :root[data-logokleur="3"] .stempel__logo { display: block; }
:root[data-logokleur="3"] .lockup__logo img, :root[data-logokleur="3"] .stempel__logo img { width: 100%; height: auto; }
:root[data-logokleur="3"] .lockup--nav { --w: 164px; }
:root[data-logokleur="3"] .lockup--voet { margin-bottom: 0; }
:root[data-logokleur="3"] .lockup--voet .lockup__slogan { position: static; display: block; margin-top: calc(var(--w) * .06); text-align: center; }
@media (max-width: 760px) {
  :root[data-logokleur="3"] .lockup--nav { --w: clamp(118px, calc(100vw - 256px), 140px); }
}

:root[data-logokleur="3"] .lockup__logo, :root[data-logokleur="3"] .stempel__logo { background: url(logo-k3.svg) center / 100% 100% no-repeat; }
:root[data-logokleur="3"] .lockup--voet .lockup__logo, :root[data-logokleur="3"] .stempel__logo { background-image: url(logo-k3-licht.svg); }
:root[data-logokleur="3"] .lockup__logo img, :root[data-logokleur="3"] .stempel__logo img { visibility: hidden; }


/* ============ RUSTIGER — picked 1 of ronde/rust.py (zonder kaders: alles op zijn plek, zonder kaartje; slanke knoppen; Coen kleiner). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .vouw .sterbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: start; gap: 3px 10px; width: auto;
    max-width: 100%; margin: 0 0 22px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  :root:root .vouw .sterbalk__woorden { display: contents; }
  :root:root .vouw .sterbalk__sterren { order: 1; align-self: center; gap: 2px; margin: 0; }
  :root:root .vouw .sterbalk__sterren svg { width: 19px; height: 19px; }
  :root:root .vouw .sterbalk__cijfer { order: 2; display: inline; margin: 0; padding: 0; border: 0; font-size: 15px; line-height: 1.2; }
  :root:root .vouw .sterbalk__cijfer b { font-size: 17px; }
  :root:root .vouw .sterbalk__tekst { order: 3; flex: 1 0 100%; font-size: 14.5px; line-height: 1.35; }
  :root:root .vouw .sterbalk__aantal, :root:root .vouw .sterbalk__bron { display: inline; }
  :root:root .vouw .sterbalk__bron { font-weight: 400; color: inherit; }

  :root:root .vouw .tegel { min-height: 0; height: 54px; padding: 0 8px; gap: 0; justify-content: center; align-items: center; border-radius: 10px; }
  :root:root .vouw .tegel__label { flex-direction: row; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
    font-size: clamp(14.5px, 4.4vw, 17px); line-height: 1; }
  :root:root .vouw .tegel__label svg { width: 19px; height: 19px; }
  :root:root .vouw .tegel__nr { display: none; }

  :root:root .vouw__coen .kennis { padding: 5px 16px 5px 5px; gap: 10px; background: var(--papier); -webkit-backdrop-filter: none;
    backdrop-filter: none; box-shadow: 0 6px 16px -12px rgba(10, 21, 26, .5); }
  :root:root .vouw__coen .kennis__gezicht { width: 42px; height: 42px; }
  :root:root .vouw__coen .kennis__naam { font-size: 34px; padding-top: 6px; }
  :root:root .vouw__coen .kennis__zin { font-size: 13.5px; margin-top: 2px; white-space: nowrap; }
}
@media (max-width: 380px) {
  :root:root .vouw__coen .kennis__zin { font-size: 12.5px; }
}


/* ── sample view: the form sends nothing ──────────────────────────────
   This demo is disconnected from the server: no /contact, no /wa, no /bel. The
   notice below appears as soon as someone presses send, so the button does not
   feel dead. It goes the day this page is the real site. */
.form-demo{
  margin:14px 0 0;padding:12px 14px;border-left:3px solid currentColor;
  background:rgba(127,127,127,.14);color:inherit;
  font-size:15px;line-height:1.5;
}
.form-demo[hidden]{display:none !important}
.form-demo a{color:inherit;text-decoration:underline}