/* =========================================================
   Herenhuis Velm — Schoorbroekstraat 82
   Pixelshift · 2026
   ========================================================= */

/* ---------- 1. Fundament ---------- */

:root {
  /* papier: warmt onmerkbaar op tijdens de scroll (zie js) */
  --papier:      #f4f0e8;
  --papier-diep: #ece6da;
  --papier-hoog: #fbf8f2;

  --inkt:        #191713;
  --inkt-dof:    rgba(25, 23, 19, 0.56);
  --inkt-stil:   rgba(25, 23, 19, 0.34);
  --inkt-lijn:   rgba(25, 23, 19, 0.13);
  --inkt-haar:   rgba(25, 23, 19, 0.07);

  /* uit de baksteen van de gevel */
  --steen:       #9a4a26;
  --steen-dof:   rgba(154, 74, 38, 0.14);

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* de naam van het pand — hoog contrast, elegant */
  --naam: "Italiana", "Cormorant Garamond", "Times New Roman", serif;

  --uit:    cubic-bezier(0.23, 1, 0.32, 1);
  --beweeg: cubic-bezier(0.77, 0, 0.175, 1);

  --marge: clamp(20px, 4.5vw, 76px);
  --kolom: 1360px;
  --nav-h: 70px;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 900ms linear;
}
body.geen-scroll { overflow: hidden; }

::selection { background: var(--steen); color: #fff8f2; }

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- 2. Sfeerlagen ---------- */

.gloed {
  position: fixed; inset: -22vh -12vw; z-index: -2;
  filter: blur(88px); pointer-events: none;
}
.gloed span {
  position: absolute; border-radius: 50%;
  mix-blend-mode: multiply; opacity: 0.5;
}
.gloed .g1 { width: 48vw; height: 48vw; left: -8vw;  top: 4vh;
  background: radial-gradient(circle, rgba(226, 176, 132, 0.5), transparent 68%); }
.gloed .g2 { width: 40vw; height: 40vw; right: -6vw; top: 32vh;
  background: radial-gradient(circle, rgba(150, 178, 156, 0.42), transparent 68%); }
.gloed .g3 { width: 34vw; height: 34vw; left: 32vw;  bottom: -8vh;
  background: radial-gradient(circle, rgba(196, 158, 178, 0.3), transparent 70%); }

.korrel {
  position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---------- 3. Typografie ---------- */

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "SOFT" 32, "WONK" 1, "opsz" 144;
  letter-spacing: -0.032em;
  line-height: 0.98;
  margin: 0;
}
.display em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  color: var(--steen);
}

h2.titel {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "SOFT" 34, "WONK" 1, "opsz" 120;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
}
h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 40;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}

.merk {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--inkt-stil);
  margin-bottom: 1.6em;
}
.merk b { color: var(--steen); font-weight: 600; }

.lood {
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--inkt-dof);
  max-width: 34ch;
  letter-spacing: -0.011em;
}
p { margin: 0 0 1.15em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }
.klein { font-size: 13.5px; line-height: 1.55; color: var(--inkt-stil); max-width: 46ch; }

/* ---------- 4. Navigatie ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--marge);
  background: rgba(250, 247, 241, 0.6);
  backdrop-filter: blur(18px) saturate(178%);
  -webkit-backdrop-filter: blur(18px) saturate(178%);
  border-bottom: 1px solid transparent;
  transform: translateY(-101%);
  transition: transform 380ms var(--uit), background-color 260ms linear,
              border-color 260ms linear;
}
.nav.zichtbaar { transform: none; border-bottom-color: var(--inkt-haar); }
@supports not (backdrop-filter: blur(1px)) { .nav { background: rgba(250, 247, 241, 0.95); } }

.nav__merk {
  font-family: var(--naam); font-weight: 400;
  font-variation-settings: normal;
  font-size: 20px; letter-spacing: 0.03em; text-decoration: none;
  white-space: nowrap;
}
.nav__merk span { color: var(--inkt-stil); font-size: 12px; margin-left: 8px;
  font-family: var(--sans); letter-spacing: 0.06em; }

.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a {
  position: relative; text-decoration: none; font-size: 13.5px;
  color: var(--inkt-dof); padding: 4px 0;
  transition: color 140ms var(--uit);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--steen); transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--uit);
}
.nav__links a:hover { color: var(--inkt); }
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after { transform: none; }
.nav__links a[aria-current="true"] { color: var(--inkt); }

.nav__voortgang {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--steen); width: 0%;
}

/* knoppen */
.knop {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 130ms var(--uit), background-color 150ms var(--uit),
              color 150ms var(--uit), border-color 150ms var(--uit),
              box-shadow 150ms var(--uit);
}
.knop--vol {
  background: var(--inkt); color: var(--papier-hoog);
  box-shadow: 0 1px 2px rgba(25,23,19,.14), 0 10px 26px -14px rgba(25,23,19,.4);
}
.knop--vol:hover { background: var(--steen); }
.knop--vol:active { transform: scale(0.975); }
.knop--rand { border-color: var(--inkt-lijn); color: var(--inkt); }
.knop--rand:hover { border-color: var(--inkt); background: var(--inkt); color: var(--papier-hoog); }
.knop--rand:active { transform: scale(0.975); }
.knop--room {
  background: var(--papier-hoog); color: var(--inkt);
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 14px 34px -16px rgba(0,0,0,.6);
}
.knop--room:hover { background: #fff; }
.knop--room:active { transform: scale(0.975); }
.knop--licht { border-color: rgba(255,255,255,.5); color: #fff; }
.knop--licht:hover { background: #fff; color: var(--inkt); border-color: #fff; }
.knop--licht:active { transform: scale(0.975); }
.knop svg { width: 13px; height: 13px; flex: none; }
.nav .knop { padding: 10px 19px; font-size: 12.5px; }

/* ---------- 5. Hero ---------- */

.hero {
  padding: calc(var(--nav-h) + clamp(12px, 1.8vw, 24px)) 0 clamp(30px, 4vw, 52px);
}

/* de plaat: foto met marge, en het woordmerk dat over de onderrand valt */
.hero__plaat {
  position: relative;
  margin: 0 0 clamp(22px, 3.2vw, 46px);
  padding: 0 var(--marge);
}
.hero__kader {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 7.4;
  background: var(--papier-diep);
  clip-path: inset(0 0 0 0);
}
.hero__kader img {
  width: 100%; height: 112%; object-fit: cover; object-position: 50% 54%;
  will-change: transform;
}
@media (max-width: 760px) {
  .hero__kader { aspect-ratio: 4 / 3.4; }
  .hero__kader img { object-position: 50% 52%; }
}

.hero__onder { padding: 0 var(--marge); }

.hero__kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--inkt-stil);
  margin: 0 0 clamp(14px, 2vw, 22px);
}
.hero__zin {
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "SOFT" 34, "WONK" 1, "opsz" 144;
  font-size: clamp(31px, 4.9vw, 68px);
  line-height: 1.02; letter-spacing: -0.032em;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  max-width: 22ch;
}
.hero__zin em { font-style: italic; color: var(--steen); }

.hero__lood {
  font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.6;
  color: var(--inkt-dof); max-width: 52ch;
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}
.hero__acties { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

.knop--onder {
  padding: 13px 2px; border-radius: 0;
  border-bottom: 1px solid var(--inkt-lijn);
  color: var(--inkt-dof);
}
.knop--onder:hover { color: var(--steen); border-bottom-color: var(--steen); }

/* de regel-onthulling */
.regel { display: block; overflow: hidden; }
.regel > span { display: block; will-change: transform; }

/* hero-onthulling */
[data-h] { opacity: 0; transform: translateY(16px); }
[data-h].in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--uit) var(--d, 0ms),
              transform 620ms var(--uit) var(--d, 0ms);
}
html.rust [data-h] { opacity: 1; transform: none; }

/* ---------- 6. Feitenband ---------- */

.feiten {
  border-block: 1px solid var(--inkt-lijn);
  background: var(--papier-hoog);
  padding: 0 var(--marge);
}
.feiten__rij {
  max-width: 1720px; margin: 0 auto;
  display: grid; gap: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.feit {
  padding: clamp(22px, 2.4vw, 34px) clamp(12px, 1.6vw, 26px);
  border-left: 1px solid var(--inkt-lijn);
  display: flex; flex-direction: column; gap: 9px;
}
.feit:first-child { border-left: 0; padding-left: 0; }
.feit dd {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-variation-settings: "SOFT" 30, "opsz" 72;
  font-size: clamp(24px, 2.35vw, 38px); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feit dd small {
  font-size: 0.42em; letter-spacing: 0; margin-left: 3px;
  color: var(--inkt-dof); font-family: var(--sans); font-weight: 400;
  font-variation-settings: normal;
}
.feit dt {
  font-size: 10px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--inkt-stil); line-height: 1.5;
}
.feit--prijs dd { color: var(--steen); }

@media (max-width: 1080px) {
  .feiten__rij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feit:first-child { padding-left: clamp(12px, 1.6vw, 26px); border-left: 1px solid var(--inkt-lijn); }
  .feit:nth-child(4n+1) { border-left: 0; padding-left: 0; }
  .feit { border-top: 1px solid var(--inkt-haar); }
  .feit:nth-child(-n+4) { border-top: 0; }
}
@media (max-width: 640px) {
  .feiten__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feit:nth-child(4n+1) { border-left: 1px solid var(--inkt-lijn); padding-left: clamp(12px, 1.6vw, 26px); }
  .feit:nth-child(odd) { border-left: 0; padding-left: 0; }
  .feit:nth-child(-n+2) { border-top: 0; }
  .feit:nth-child(n+3) { border-top: 1px solid var(--inkt-haar); }
}

/* ---------- 7. Secties ---------- */

section { position: relative; }
.wrap { max-width: var(--kolom); margin: 0 auto; padding: 0 var(--marge); }
.breed { max-width: 1720px; margin: 0 auto; padding: 0 var(--marge); }
.lucht  { padding-top: clamp(52px, 6.4vw, 104px); padding-bottom: clamp(52px, 6.4vw, 104px); }
.lucht-boven { padding-top: clamp(52px, 6.4vw, 104px); }

.sectiekop {
  display: flex; align-items: baseline; gap: 16px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--inkt-stil);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.sectiekop i { font-style: normal; color: var(--steen); }
.sectiekop::after {
  content: ""; flex: 1; height: 1px; background: var(--inkt-lijn);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--uit) 120ms;
}
[data-r].in .sectiekop::after, .sectiekop.in::after { transform: none; }

/* domein: asymmetrisch raster */
.domein__raster {
  display: grid; gap: clamp(22px, 2.6vw, 44px) clamp(26px, 3.6vw, 60px);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
}
/* het beeldpaar krijgt de volle kolombreedte — anders staan de foto's te klein */
.domein__raster > .toennu { grid-column: 1 / -1; margin-top: clamp(6px, 1vw, 16px); }
.domein__citaat { margin-bottom: 0; }
@media (max-width: 900px) {
  /* op mobiel eerst het beeld, dan pas de tekst — je bent er meteen */
  .domein__raster { grid-template-columns: 1fr; gap: 18px; }
  .domein__citaat { margin-bottom: 0; order: 1; }
  .domein__raster > .toennu { order: 2; margin-top: 2px; }
  .domein__tekst { order: 3; }
  .toennu__paar { grid-template-columns: 1fr 1fr; gap: 10px; }
  .toennu__helft figcaption { font-size: 11.5px; line-height: 1.35; }
  .toennu__helft figcaption b { font-size: 10px; margin-bottom: 2px; }
}
@media (max-width: 430px) {
  .toennu__helft figcaption { font-size: 11px; }
}

.domein__tekst { columns: 1; }
.domein__citaat {
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 90;
  font-size: clamp(25px, 2.5vw, 34px); line-height: 1.18;
  letter-spacing: -0.025em; margin: 0 0 1.1em; max-width: 20ch;
}
.domein__citaat em { font-style: italic; color: var(--steen); }

.domein__beeld { position: relative; margin-top: 0; }
.domein__beeld figcaption {
  margin-top: 13px; font-size: 12.5px; color: var(--inkt-stil);
  display: flex; gap: 9px;
}
.domein__beeld figcaption b { color: var(--steen); font-weight: 500; }

/* ---------- 8. Foto's ---------- */

.foto {
  position: relative; overflow: hidden; background: var(--papier-diep);
  cursor: zoom-in; margin: 0;
  background-size: cover; background-position: center;
}
.foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms var(--uit), opacity 500ms linear;
  opacity: 0;
}
.foto img.geladen { opacity: 1; }
.foto:hover img { transform: scale(1.035); }
.foto__nr {
  position: absolute; left: 13px; bottom: 11px; z-index: 2;
  font-size: 10.5px; letter-spacing: 0.14em; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(5px);
  transition: opacity 180ms var(--uit), transform 180ms var(--uit);
}
.foto:hover .foto__nr { opacity: 1; transform: none; }
.h-hoog  { aspect-ratio: 3 / 4; }
.h-staand{ aspect-ratio: 4 / 5; }
.h-breed { aspect-ratio: 3 / 2; }
.h-pano  { aspect-ratio: 16 / 9; }
.h-vier  { aspect-ratio: 1 / 1; }

/* ---------- 10. Rondleiding ---------- */

.rond__hint {
  font-size: 12.5px; color: var(--inkt-stil); margin: -0.4em 0 0;
  letter-spacing: .01em;
}

.deel {
  margin-top: clamp(40px, 4.6vw, 70px);
  padding-top: clamp(26px, 3vw, 42px);
  border-top: 1px solid var(--inkt-lijn);
}
.deel:first-of-type { border-top: 0; padding-top: clamp(18px, 2vw, 28px); }

.deel__kop {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.2vw, 34px);
  align-items: start;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.deel__nr {
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "SOFT" 26, "opsz" 120;
  font-size: clamp(40px, 5vw, 76px); line-height: 0.82;
  color: var(--steen); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.deel__kop h3 {
  font-size: clamp(27px, 3.4vw, 46px);
  margin: 0 0 0.28em; letter-spacing: -0.028em;
}
.deel__kop p {
  font-size: 15.5px; color: var(--inkt-dof); margin: 0; max-width: 72ch;
}
@media (max-width: 640px) {
  .deel__kop { grid-template-columns: 1fr; gap: 6px; }
  .deel__nr { font-size: 30px; }
}

/* de horizontale strook — vaste hoogte, dus liggend en staand lopen door elkaar */
.strook {
  overflow-x: auto; overflow-y: hidden;
  /* links netjes op de kolom, rechts doorlopend tot buiten beeld */
  margin: 0 calc(var(--marge) * -1) 0 0; padding: 0;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.strook::-webkit-scrollbar { display: none; }
.strook.sleept { cursor: grabbing; }
.strook__spoor {
  display: flex; gap: clamp(10px, 0.9vw, 16px);
  width: max-content; padding: 0 var(--marge) 2px 0;
}
.sf {
  position: relative; margin: 0; flex: none;
  height: clamp(230px, 33vh, 430px);
  overflow: hidden; background: var(--papier-diep);
  cursor: zoom-in;
}
.sf img {
  height: 100%; width: auto; max-width: none; display: block;
  transition: transform 620ms var(--uit), opacity 500ms linear;
  opacity: 0; user-select: none; -webkit-user-drag: none;
}
.sf img.geladen { opacity: 1; }
.sf:hover img { transform: scale(1.03); }
.sf__nr {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-size: 10.5px; letter-spacing: 0.14em; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(5px);
  transition: opacity 180ms var(--uit), transform 180ms var(--uit);
}
.sf:hover .sf__nr { opacity: 1; transform: none; }

/* ---------- 11. Adempauze (het licht) ---------- */

.licht {
  position: relative; min-height: 82svh; display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate; background: #23201b;
}
.licht__beeld { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.licht__beeld img {
  width: 100%; height: 118%; object-fit: cover; will-change: transform;
}
.licht__sluier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(14,12,10,.88) 0%, rgba(14,12,10,.66) 30%,
                    rgba(14,12,10,.24) 58%, transparent 82%),
    linear-gradient(100deg, rgba(14,12,10,.5) 0%, rgba(14,12,10,.12) 44%, transparent 66%);
}
.licht__inhoud {
  position: relative; z-index: 2;
  padding: 0 var(--marge) clamp(40px, 7vh, 84px); color: #fff;
  max-width: 1720px; margin: 0 auto; width: 100%;
}
.licht__label {
  font-size: 11px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.licht__lood {
  margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 56ch;
  font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.6;
  color: rgba(255,255,255,.86); text-shadow: 0 1px 14px rgba(0,0,0,.66);
}
.licht__acties {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px);
}
@media (max-width: 620px) {
  .licht__acties { width: 100%; }
  .licht__acties .knop { flex: 1 1 100%; justify-content: center; }
}
.licht__inhoud p.groot {
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  font-size: clamp(29px, 4.4vw, 64px); line-height: 1.04;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
  letter-spacing: -0.032em; margin: 0; max-width: 17ch;
}
.licht__inhoud p.groot em { font-style: italic; color: #e9a271; }


/* ---------- 12. Verhaal ---------- */

.verhaal { background: var(--papier-diep); }
.verhaal__raster {
  display: grid; gap: clamp(26px, 3.6vw, 58px);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 900px) { .verhaal__raster { grid-template-columns: 1fr; } }
.verhaal__kolom p {
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "SOFT" 40, "opsz" 30;
  font-size: clamp(17.5px, 1.5vw, 20.5px); line-height: 1.62;
  letter-spacing: -0.012em; max-width: 46ch;
}
.verhaal__kolom p:first-of-type::first-letter {
  font-size: 3.15em; float: left; line-height: 0.86; padding: 0.06em 0.11em 0 0;
  color: var(--steen); font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 144;
  font-weight: 300;
}
.verhaal__bron {
  margin-top: 26px; font-size: 12px; color: var(--inkt-stil);
  padding-top: 14px; border-top: 1px solid var(--inkt-lijn); max-width: 46ch;
}
.verhaal__bron a { color: var(--steen); text-underline-offset: 3px; }

.verhaal__beeld { position: relative; }
.verhaal__prik {
  position: absolute; left: 42%; top: 44%; z-index: 3;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--steen);
  box-shadow: 0 0 0 4px rgba(154,74,38,.3), 0 0 0 1px rgba(255,255,255,.9) inset;
  pointer-events: none;
}
.verhaal__prik::after {
  content: "het domein"; position: absolute; left: 20px; top: -5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
  background: rgba(154,74,38,.92); padding: 4px 9px; border-radius: 3px;
}

/* ---------- 13. Ligging + kenmerken ---------- */

.ligging__raster {
  display: grid; gap: clamp(26px, 3.4vw, 56px);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .ligging__raster { grid-template-columns: 1fr; } }

.afstanden { list-style: none; margin: 0; padding: 0; }
.afstanden li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--inkt-haar);
  font-size: 15px;
}
.afstanden li span:first-child { flex: none; }
.afstanden li i {
  flex: 1; height: 1px; background: var(--inkt-haar); font-style: normal;
  transform: translateY(-3px);
}
.afstanden li b {
  font-weight: 500; font-variant-numeric: tabular-nums; color: var(--inkt);
  flex: none;
}
.adres {
  margin-top: 26px; padding: 20px 22px; border: 1px solid var(--inkt-lijn);
  border-radius: 3px; background: var(--papier-hoog);
}
.adres p { margin: 0; font-size: 15px; }
.adres a { color: var(--steen); text-underline-offset: 3px; }

.kenmerken { background: var(--papier-hoog); border-block: 1px solid var(--inkt-lijn); }

.troeven {
  display: grid; gap: clamp(26px, 3.2vw, 54px);
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.troeven__kolom h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--steen);
  font-family: var(--sans); margin: 0 0 1.1em;
  padding-bottom: 10px; border-bottom: 1px solid var(--inkt-lijn);
}
.troeven__kolom ul { list-style: none; margin: 0; padding: 0; }
.troeven__kolom li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 11px;
  font-size: 15px; line-height: 1.45; color: var(--inkt-dof);
}
.troeven__kolom li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 9px; height: 1px; background: var(--steen);
}

.nota {
  display: grid; gap: clamp(20px, 2.6vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: clamp(32px, 3.8vw, 56px);
  padding-top: clamp(24px, 2.8vw, 38px);
  border-top: 1px solid var(--inkt-lijn);
}
.nota h4 {
  margin: 0 0 0.5em; font-family: var(--serif); font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 30;
  font-size: 19px; letter-spacing: -0.018em;
}
.nota p { margin: 0; font-size: 14.5px; color: var(--inkt-dof); max-width: 52ch; }

/* ---------- 13b. Documenten ---------- */

.docs__raster {
  display: grid; gap: clamp(26px, 4vw, 72px);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .docs__raster { grid-template-columns: 1fr; } }
.docs__lood {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55;
  color: var(--inkt-dof); max-width: 38ch; margin: 0;
}
.docs__kop {
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--inkt-stil);
  margin: 0 0 12px;
}
.docs__kop + .doc { border-top: 1px solid var(--inkt-lijn); }
.doc + .docs__kop { margin-top: clamp(26px, 3vw, 40px); }

.doc {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding: 15px 2px; text-decoration: none;
  border-bottom: 1px solid var(--inkt-haar);
  transition: padding-left 200ms var(--uit), border-color 160ms var(--uit);
  position: relative;
}
.doc::after {
  content: "↓"; position: absolute; left: 0; top: 50%;
  transform: translate(-14px, -50%); opacity: 0;
  color: var(--steen); font-size: 13px;
  transition: opacity 160ms var(--uit), transform 200ms var(--uit);
}
.doc:hover { padding-left: 18px; border-bottom-color: var(--steen); }
.doc:hover::after { opacity: 1; transform: translate(0, -50%); }
.doc__naam { font-size: 15.5px; color: var(--inkt); }
.doc:hover .doc__naam { color: var(--steen); }
.doc__meta {
  font-size: 12px; color: var(--inkt-stil); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- 14. Afspraak ---------- */

.afspraak { background: var(--papier-hoog); border-top: 1px solid var(--inkt-lijn); }
.afspraak__raster {
  display: grid; gap: clamp(32px, 4.4vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: start;
}
@media (max-width: 900px) { .afspraak__raster { grid-template-columns: 1fr; } }

.sectiekop--kaal::after { display: none; }
.afspraak h2.titel {
  font-size: clamp(38px, 5.2vw, 74px);
  line-height: 1.0; margin-bottom: 0.34em;
}
.afspraak__sub {
  font-size: clamp(16px, 1.35vw, 18.5px); color: var(--inkt-dof);
  margin: 0 0 clamp(26px, 3.4vw, 40px);
}
.afspraak__noot {
  margin: clamp(26px, 3.4vw, 42px) 0 0;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-variation-settings: "SOFT" 44, "opsz" 30;
  font-size: 16.5px; color: var(--inkt-stil); letter-spacing: -0.01em;
}

/* de pil-knop met telefoonnummer */
.knop--pil {
  border-color: var(--steen); color: var(--steen);
  padding: 16px 30px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase;
}
.knop--pil svg { width: 15px; height: 15px; }
.knop--pil:hover { background: var(--steen); color: var(--papier-hoog); }
.knop--pil:active { transform: scale(0.98); }

/* het formulier — lijnen, geen dozen */
.formulier {
  border: 1px solid var(--inkt-lijn);
  padding: clamp(24px, 2.6vw, 38px);
  display: block;
}
.formulier__kop {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: 11px; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--steen);
}
.veld { position: relative; margin-bottom: clamp(16px, 1.8vw, 22px); }
.veld label {
  display: block; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--inkt-stil);
  transition: color 160ms var(--uit);
}
.veld input, .veld textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--inkt-lijn);
  color: var(--inkt); font: inherit; font-size: 16px;
  padding: 6px 0 11px; border-radius: 0;
  transition: border-color 160ms var(--uit);
}
.veld textarea { resize: vertical; min-height: 74px; line-height: 1.55; }
.veld input:focus, .veld textarea:focus {
  outline: none; border-bottom-color: var(--steen);
}
.veld input:focus ~ label { color: var(--steen); }
.veld:focus-within label { color: var(--steen); }

.knop--tekst {
  padding: 10px 2px; border-radius: 0; background: transparent;
  border-bottom: 1px solid var(--steen); color: var(--steen);
  font-size: 12px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; margin-top: 6px;
}
.knop--tekst:hover { color: var(--inkt); border-bottom-color: var(--inkt); }
.knop--tekst:active { transform: scale(0.985); }
.knop--tekst svg { width: 12px; height: 12px; }

.formulier__ok {
  margin: 16px 0 0; font-size: 13.5px; color: var(--steen);
  display: none;
}
.formulier__ok.aan { display: block; }

/* de zwevende bel-knop (desktop) */
.belpil {
  position: fixed; right: var(--marge); bottom: 26px; z-index: 56;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border-radius: 999px; text-decoration: none;
  background: rgba(251, 248, 242, .78);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--steen); color: var(--steen);
  box-shadow: 0 1px 2px rgba(25,23,19,.04), 0 12px 30px -16px rgba(25,23,19,.26);
  font-size: 12px; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 320ms var(--uit), transform 320ms var(--uit),
              background-color 160ms var(--uit), color 160ms var(--uit);
}
.belpil.zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
.belpil:hover { background: var(--steen); color: var(--papier-hoog); }
.belpil svg { width: 15px; height: 15px; flex: none; }
.belpil span { color: var(--inkt-stil); font-weight: 500; }
.belpil:hover span { color: rgba(255,255,255,.72); }
@media (max-width: 900px) { .belpil { display: none; } }

/* ---------- 15. Voet ---------- */

.voet {
  background: var(--inkt); color: rgba(255,255,255,.5);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: clamp(40px, 5vw, 62px) var(--marge) 34px;
}
.voet__rij {
  max-width: var(--kolom); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  align-items: flex-end;
}
.voet__merk {
  font-family: var(--naam); font-weight: 400;
  font-variation-settings: normal;
  font-size: clamp(30px, 4.2vw, 50px); color: #fff; letter-spacing: 0.02em;
  line-height: 1;
}
.voet__merk span { display: block; font-family: var(--sans); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4);
  margin-top: 12px; }
.voet__col { font-size: 13.5px; line-height: 1.9; }
.voet__col a { text-decoration: none; }
.voet__col a:hover { color: #e9a271; }
.voet__fijn {
  max-width: var(--kolom); margin: 40px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 11.5px; color: rgba(255,255,255,.32);
}
.voet__fijn a { color: rgba(255,255,255,.5); text-decoration: none; }
.voet__fijn a:hover { color: #e9a271; }

/* ---------- 16. Mobiele balk ---------- */

.balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 247, 241, .82);
  backdrop-filter: blur(18px) saturate(176%);
  -webkit-backdrop-filter: blur(18px) saturate(176%);
  border-top: 1px solid var(--inkt-lijn);
  transform: translateY(101%);
  transition: transform 300ms var(--uit);
}
.balk.zichtbaar { transform: none; }
.balk .knop { flex: 1; justify-content: center; padding: 14px 10px; }
@media (max-width: 760px) {
  .balk { display: flex; }
  .nav__links { display: none; }
  .nav__merk span { display: none; }
  .nav .knop { margin-left: auto; }

  .hero__inhoud { padding-bottom: 96px; }
  .hero__pijl { display: none; }
  .hero__sluier {
    background:
      linear-gradient(to top, rgba(15,13,10,.93) 0%, rgba(15,13,10,.8) 26%,
                      rgba(15,13,10,.44) 52%, rgba(15,13,10,.1) 74%, transparent 88%);
  }
  .hero__beeld img { object-position: 55% 40%; }
  .hero__acties { width: 100%; }
  .hero__acties .knop { flex: 1 1 100%; justify-content: center; }
  .hero__voet { gap: 24px; }
  .voet { padding-bottom: 92px; }
}


/* ---------- 17. Lichtbak ---------- */

.lichtbak {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(18, 16, 13, .93);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.lichtbak.aan { display: flex; }
.lichtbak img {
  max-width: min(94vw, 1400px); max-height: 84vh; object-fit: contain;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.9);
}
.lichtbak__bij {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
  color: rgba(255,255,255,.7); font-size: 13px; padding: 0 60px;
}
.lichtbak__bij b { color: #fff; font-weight: 500; }
.lb-knop {
  position: absolute; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color 140ms var(--uit), transform 140ms var(--uit);
}
.lb-knop:hover { background: rgba(255,255,255,.2); }
.lb-knop:active { transform: scale(.94); }
.lb-sluit { top: 20px; right: 20px; }
.lb-vorig { left: 20px; top: 50%; margin-top: -23px; }
.lb-volgend { right: 20px; top: 50%; margin-top: -23px; }
@media (max-width: 620px) {
  .lb-vorig { left: 12px; } .lb-volgend { right: 12px; }
  .lichtbak__bij { bottom: 14px; padding: 0 20px; font-size: 12px; }
}

/* ---------- 18. Onthullen ---------- */

[data-r] { opacity: 0; transform: translateY(22px); }
[data-r].in {
  opacity: 1; transform: none;
  transition: opacity 720ms var(--uit), transform 720ms var(--uit);
  transition-delay: var(--d, 0ms);
}
html.rust [data-r] { opacity: 1; transform: none; }
html.rust .hero__gordijn { display: none; }
html.rust .regel > span { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-r] { opacity: 1; transform: none; }
  .hero__gordijn { display: none; }
  .regel > span { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .balk {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--papier-hoog);
  }
}

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

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--inkt); color: #fff; padding: 12px 20px; text-decoration: none;
}
.overslaan:focus { left: 12px; top: 12px; }

/* ---------- 20. Tussenstop ---------- */

.tussen {
  border-block: 1px solid var(--inkt-lijn);
  background: var(--papier-hoog);
  padding: clamp(32px, 3.6vw, 52px) 0;
}
.tussen__rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
}
.tussen__tekst {
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 90;
  font-size: clamp(24px, 2.8vw, 38px); line-height: 1.14;
  letter-spacing: -0.028em; margin: 0; max-width: 22ch;
}
.tussen__tekst em { font-style: italic; color: var(--steen); }
.tussen__acties { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .tussen__acties { width: 100%; }
  .tussen__acties .knop { flex: 1 1 100%; justify-content: center; }
}

.feit dd .dun { color: var(--inkt-stil); margin: 0 .12em; font-weight: 200; }

/* ---------- 21. Film ---------- */

/* Een .film is een lege plaatshouder tot het bestand in video/ staat.
   Zolang dat er niet is, blijft de poster staan — nooit een gat. */
.film {
  position: relative; overflow: hidden;
  background: var(--papier-diep) center / cover no-repeat;
  display: block;
}
.film video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.film--hero, .film--vullend {
  position: absolute; inset: 0; z-index: 1;
  background: none;
}
.film--hero video, .film--vullend video { height: 112%; }

.filmplaat { margin: clamp(12px, 1vw, 18px) 0 0; max-width: 1100px; }
.filmplaat figcaption {
  margin-top: 13px; font-size: 13px; color: var(--inkt-stil);
}

/* elke clip is aantikbaar en speelt dan schermvullend met geluid */
.film.tikbaar { cursor: pointer; }
.film__tik {
  right: 14px; top: 14px; left: auto; bottom: auto;
}
.film.tikbaar:hover .film__tik,
.film.tikbaar:focus-visible .film__tik {
  background: rgba(15,13,10,.62); border-color: rgba(255,255,255,.55);
}

/* ---------- 22. Videomarkering ---------- */

/* Zolang er nog geen clip is, toont het vak duidelijk dát er video komt. */
.film__merk {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 20px;
  background: linear-gradient(rgba(15,13,10,.16), rgba(15,13,10,.34));
  color: #fff; pointer-events: none;
}
.film__knop {
  width: clamp(58px, 5.4vw, 82px); height: clamp(58px, 5.4vw, 82px);
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  border: 1.5px solid rgba(255,255,255,.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px -10px rgba(0,0,0,.5);
  position: relative;
}
.film__knop svg {
  width: 38%; height: 38%; margin-left: 8%;
  fill: #fff;
}
/* rustige puls, alleen de ring beweegt */
.film__knop::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  animation: puls 2.8s var(--uit) infinite;
}
@keyframes puls {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.34); opacity: 0; }
  100% { transform: scale(1.34); opacity: 0; }
}
.film__merk b {
  font-size: 11px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.film__merk span {
  font-size: 13px; color: rgba(255,255,255,.82); max-width: 34ch;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: reduce) { .film__knop::after { animation: none; opacity: 0; } }

/* op de hero staat de markering bescheiden linksonder, niet in het midden */
.film--hero .film__merk {
  background: linear-gradient(115deg, rgba(15,13,10,.42), transparent 42%);
  flex-direction: row; gap: 15px;
  align-items: center; justify-content: flex-start;
  padding: clamp(20px, 2.4vw, 36px) var(--marge);
  align-content: flex-start;
}
.film--hero .film__merk { align-items: flex-start; }
.film--hero .film__merk > * { align-self: flex-start; }
.film--hero .film__knop { width: 54px; height: 54px; flex: none; }
.film--hero .film__merk b { font-size: 10.5px; margin-bottom: 4px; }
.film--hero .film__merk span { font-size: 12.5px; }
.film--hero .film__merk div { text-align: left; }
.film--hero .film__merk b { display: block; }
@media (max-width: 760px) {
  .film--hero .film__merk { padding-bottom: clamp(56px, 16vw, 92px); }
  .film--hero .film__knop { width: 46px; height: 46px; }
  .film--hero .film__merk span { display: none; }
}


/* ---------- 23. Stuurknoppen bij de stroken ---------- */

.strook__stuur {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.strook__teller {
  margin-right: auto; font-size: 12px; color: var(--inkt-stil);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.strook__knop {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--inkt-lijn); background: transparent;
  color: var(--inkt); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color 150ms var(--uit), border-color 150ms var(--uit),
              color 150ms var(--uit), opacity 200ms var(--uit),
              transform 130ms var(--uit);
}
.strook__knop svg { width: 15px; height: 15px; }
.strook__knop:hover:not(:disabled) {
  background: var(--inkt); border-color: var(--inkt); color: var(--papier-hoog);
}
.strook__knop:active:not(:disabled) { transform: scale(0.94); }
.strook__knop:disabled { opacity: .26; cursor: default; }

/* zachte hint dat er meer staat: het spoor loopt weg onder de rand */
.strook { position: relative; }
.strook--meer::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 84px;
  pointer-events: none; z-index: 2;
  background: linear-gradient(to left, var(--papier), transparent);
  opacity: .9; transition: opacity 250ms var(--uit);
}
.strook--eind::after { opacity: 0; }
.rond .strook--meer::after { background: linear-gradient(to left, var(--papier), transparent); }

@media (max-width: 640px) {
  .strook__knop { width: 38px; height: 38px; }
  .strook--meer::after { width: 44px; }
}

/* ---------- 24. Vroeger en nu ---------- */

.toennu { margin: 0; }
.toennu__paar {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 28px);
}
.toennu__helft figcaption { font-size: 13px; }
.toennu__helft figcaption {
  margin-top: 11px; font-size: 12.5px; line-height: 1.45;
  color: var(--inkt-stil); display: block;
}
.toennu__helft figcaption b {
  display: block; color: var(--steen); font-weight: 600;
  font-size: 10.5px; letter-spacing: .17em; margin-bottom: 4px;
}
.toennu .foto { background: var(--papier-diep); }
/* de prentkaart is sepia; laat de moderne foto niet schreeuwen ernaast */
.toennu__helft:last-child .foto img { filter: saturate(.94); }




/* ---------- 25. Schermvullende speler ---------- */

.speler {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: #0d0b09;
  align-items: center; justify-content: center;
}
.speler.aan { display: flex; }
.speler video {
  width: 100%; height: 100%; object-fit: contain; background: #0d0b09;
}
.speler__sluit {
  top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2;
  width: 48px; height: 48px;
}

/* de hero is aantikbaar zodra er een clip speelt */
.film--hero.tikbaar { cursor: pointer; }
.hero__tik {
  position: absolute; z-index: 3; pointer-events: none;
  right: var(--marge); top: clamp(14px, 2vw, 26px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px; border-radius: 999px;
  background: rgba(15,13,10,.42);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,.34);
  color: #fff; font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--uit), transform 320ms var(--uit);
}
.hero__tik.zichtbaar { opacity: 1; transform: none; }
.hero__tik svg { width: 14px; height: 14px; fill: #fff; }
@media (max-width: 480px) {
  .hero__tik { padding: 8px 14px 8px 11px; font-size: 10.5px; letter-spacing: .1em; }
}

/* in de volle-breedte sectie staat de tekst links; zet de pil rechtsonder */
.film--vullend .film__tik {
  top: auto; bottom: clamp(18px, 3vw, 34px); right: var(--marge);
}

/* een enkel cijfer in de troevenlijst mag opvallen */
.troeven__kolom li strong {
  color: var(--inkt); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* het telefoonnummer meelezen op de belknop */
.knop__nr {
  opacity: .62; font-weight: 400; font-variant-numeric: tabular-nums;
  margin-left: -2px;
}
.knop--vol:hover .knop__nr { opacity: .8; }
@media (max-width: 420px) {
  .knop__nr { display: block; width: 100%; text-align: center; margin: 2px 0 0; }
}