/* ============================================================
   VICTORIE ZEILMAKERIJ · DIENSTPAGINA'S (ontwerpsysteem v2)
   Huisstijl van de buiskappen-pagina doorgetrokken: doek, diep
   water, marine, steenrood garen, messing voor de ene actie.
   Drie hero-varianten: foto (polaroid-paneel), patroontekening
   (technisch kader) en stalen (typografisch met kleurenstrip).
   Gescoped op .dn-scope; draait in de Avada-schil.
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWAosBO5Xw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --doek: #f2eee6;
  --doek-diep: #e9e3d6;
  --diep: #0b2233;
  --marine: #003c75;
  --steen: #b23328;
  --messing: #d68e01;
  --inkt: #16222c;
  --inkt-60: rgba(22, 34, 44, .62);
  --lijn: rgba(22, 34, 44, .16);
  --lijn-licht: rgba(242, 238, 230, .22);
  --doek-op-diep: rgba(242, 238, 230, .92);
  --kader: min(92vw, 1360px);
  --ease-uit: cubic-bezier(.22, 1, .36, 1);
  --f-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --f-tekst: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-label: "Roboto Condensed", "Arial Narrow", sans-serif;
}

.dn-scope, .dn-scope * { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.dn-scope {
  background: var(--doek);
  color: var(--inkt);
  font-family: var(--f-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Avada-schil-correcties */
body { overflow-x: hidden; }
body.fusion-body { background-color: var(--doek); }
#main { padding: 0 !important; }
.fusion-tb-header .fusion-fullwidth { margin-bottom: 0 !important; }

/* kleuren erven binnen de scope (Avada zet ze anders hard) */
.dn-scope h1, .dn-scope h2, .dn-scope h3, .dn-scope h4,
.dn-scope p, .dn-scope li, .dn-scope address, .dn-scope small,
.dn-scope legend, .dn-scope figcaption { color: inherit; }

.dn-scope ::selection { background: var(--marine); color: var(--doek); }
.dn-scope img { max-width: 100%; display: block; }
.dn-scope a { color: inherit; }
.dn-scope :focus-visible { outline: 2px solid var(--steen); outline-offset: 3px; }

.weefsel {
  background-image:
    repeating-linear-gradient(0deg,  rgba(22,34,44,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(22,34,44,.018) 0 1px, transparent 1px 3px);
}

.tag {
  font-family: var(--f-label);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.kader { width: var(--kader); margin: 0 auto; padding: 0 clamp(1.1rem, 3.5vw, 2.4rem); }

/* ================= HERO (drie varianten) ================= */
.dn-hero {
  position: relative;
  background: var(--diep); color: var(--doek);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; overflow: hidden;
  min-height: max(500px, calc(82svh - 113px));
}
.dn-hero-tekst {
  grid-column: 1; z-index: 3;
  padding: clamp(3rem, 7vh, 5rem) clamp(1.2rem, 4vw, 3.6rem) clamp(3.2rem, 7vh, 5rem);
  max-width: 47rem;
}
.dn-hero .tag { color: rgba(242,238,230,.68); display: block; margin-bottom: 1.3rem; }
.dn-hero h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: .99; letter-spacing: -.02em;
  text-wrap: balance;
}
.dn-hero h1 em { font-style: normal; color: var(--messing); }
.dn-hero-sub {
  margin-top: 1.4rem; max-width: 40rem;
  color: rgba(242,238,230,.82); font-size: 1.08rem;
}
.dn-hero-acties { margin-top: 2rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

.knoop {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: var(--messing); color: var(--diep); border: 0;
  font-family: var(--f-label); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; font-size: .84rem;
  padding: 1.02rem 1.8rem;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transition: filter .25s linear, transform .35s var(--ease-uit);
}
.knoop:hover { filter: brightness(1.07); transform: translateY(-2px); }
.stille-link {
  font-family: var(--f-label); font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; font-size: .78rem;
  color: rgba(242,238,230,.72); text-decoration: none;
  background: linear-gradient(var(--steen), var(--steen)) left bottom / 100% 1.5px no-repeat;
  padding-bottom: 4px;
}
.op-licht .stille-link, .dn-sectie .stille-link { color: var(--inkt-60); }

/* variant A: fotopaneel (polaroid, licht gedraaid) */
.dn-hero-beeld { position: relative; grid-column: 2; align-self: stretch; min-height: 440px; }
.dn-hero-paneel {
  position: absolute; inset: 7% 5% 9% 0;
  background: var(--doek);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transform: rotate(.8deg);
  padding: 13px;
}
.dn-hero-paneel img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
}
.dn-hero-paneel .tag {
  position: absolute; left: 13px; bottom: 13px; z-index: 5;
  background: var(--diep); color: var(--doek);
  padding: .45rem .8rem; margin: 0;
}

/* variant B: patroontekening in technisch kader */
.dn-hero-patroon {
  grid-column: 2; align-self: center; justify-self: center;
  width: min(88%, 470px);
  padding: clamp(1.6rem, 4vh, 2.6rem) 0;
}
.patroon-kader {
  position: relative;
  background: #fdfcf8;
  border: 1px solid rgba(0, 60, 117, .35);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: 3rem 2rem 1.6rem;
  color: var(--marine);
  transform: rotate(-.6deg);
}
.patroon-kader::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,60,117,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(0,60,117,.07) 0 1px, transparent 1px 44px);
  pointer-events: none;
}
.patroon-kader > .tag {
  position: absolute; top: .95rem; left: 1.3rem;
  color: var(--marine); margin: 0; opacity: .85;
}
.patroon-nr {
  position: absolute; top: .8rem; right: 1.9rem;
  font-family: var(--f-label); font-size: .66rem; letter-spacing: .14em;
  color: rgba(0, 60, 117, .55); text-transform: uppercase;
}
.patroon-kader img { position: relative; width: 100%; height: auto; mix-blend-mode: multiply; }
.patroon-maat {
  position: relative; margin-top: 1.4rem;
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--f-label); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(0, 60, 117, .8);
  white-space: nowrap;
}
.patroon-maat::before, .patroon-maat::after {
  content: ""; flex: 1; height: 0;
  border-top: 1px dashed rgba(0, 60, 117, .55);
}
.patroon-stiksel {
  position: absolute; left: 1.3rem; right: 1.3rem; bottom: .8rem; height: 0;
  border-top: 2px dashed rgba(178, 51, 40, .5);
}

/* variant C: typografisch met kleurenstalen */
.dn-hero-stalen {
  grid-column: 2; align-self: center; justify-self: stretch;
  padding: clamp(2rem, 5vh, 3.4rem) clamp(1.4rem, 3.5vw, 3rem);
}
.stalen-kop { color: rgba(242,238,230,.55); display: block; margin-bottom: 1rem; }
.stalen-rij { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .45rem; max-width: 30rem; }
.staal {
  width: 24px; height: 33px; border-radius: 2px;
  border: 1px solid rgba(242,238,230,.25);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  flex: none;
}
.staal-meer {
  display: inline-flex; align-items: center; height: 33px; padding: 0 .75rem;
  border: 1px dashed rgba(242,238,230,.45); border-radius: 2px;
  color: var(--doek-op-diep);
  font-family: var(--f-label); font-weight: 500;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.stalen-noot { margin-top: 1.1rem; color: rgba(242,238,230,.55); font-size: .92rem; max-width: 30rem; }
.stalen-weverijen {
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--lijn-licht);
  font-family: var(--f-label); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(242,238,230,.5); max-width: 30rem;
}

@media (max-width: 940px) {
  .dn-hero { grid-template-columns: 1fr; }
  .dn-hero-beeld { grid-column: 1; min-height: 46svh; }
  .dn-hero-patroon { grid-column: 1; justify-self: center; padding-bottom: 2.6rem; }
  .dn-hero-stalen { grid-column: 1; padding-top: 0; }
}

/* ================= SECTIEKOPPEN ================= */
.dn-sectie { padding: clamp(3.4rem, 9vh, 6.5rem) 0; }
.dn-sectie-diep { background: var(--diep); color: var(--doek-op-diep); }

.stap-kop {
  display: flex; align-items: baseline; gap: 1.1rem;
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.stap-nr {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--marine);
}
.dn-sectie-diep .stap-nr { -webkit-text-stroke: 1.5px rgba(242,238,230,.5); }
.stap-titel {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -.015em;
  color: var(--inkt);
}
.dn-sectie-diep .stap-titel { color: var(--doek); }
.stap-kop .tag { margin-left: auto; color: var(--inkt-60); }
.dn-sectie-diep .stap-kop .tag { color: rgba(242,238,230,.55); }
@media (max-width: 700px) {
  .stap-kop { flex-wrap: wrap; row-gap: .4rem; }
  .stap-kop .stap-titel { flex: 1; min-width: 12ch; }
  .stap-kop .tag { margin-left: 0; width: 100%; order: 3; }
}

/* ================= 01 · BETOOG (editorial, geen zwevende dozen) ================= */
.betoog-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); }
.betoog-tekst { grid-column: 1 / 8; }
.betoog-tekst .betoog-lead {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.45rem, 2.8vw, 2.1rem); line-height: 1.28;
  letter-spacing: -.012em; max-width: 26ch;
  margin-bottom: 1.3rem;
}
.betoog-tekst .betoog-lead::after {
  content: ""; display: block; width: 84px; height: 2px; margin-top: 1.1rem;
  background: repeating-linear-gradient(90deg, var(--steen) 0 7px, transparent 7px 13px);
}
.betoog-alineas { columns: 2; column-gap: 2.4rem; max-width: 64rem; color: var(--inkt); }
.betoog-alineas p { break-inside: avoid; margin-bottom: 1rem; }
.betoog-grid.met-beeld .betoog-tekst { grid-column: 1 / 8; }
.betoog-grid.met-beeld .betoog-alineas { columns: 1; }
.betoog-beeld { grid-column: 8 / 13; position: relative; margin: 0; align-self: stretch; }
.betoog-beeld img {
  width: 100%; height: 100%; min-height: 360px; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.betoog-beeld figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--doek); color: var(--inkt-60);
  padding: .5rem .9rem; border-top: 2px solid var(--steen);
}
.betoog-beeld.patroonfiguur { align-self: center; }
@media (max-width: 900px) {
  .betoog-tekst, .betoog-grid.met-beeld .betoog-tekst { grid-column: 1 / 13; }
  .betoog-alineas { columns: 1; }
  .betoog-beeld { grid-column: 1 / 13; }
  .betoog-beeld img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
}

/* ================= 02 · PROCES (tijdlijn met stikselverbinding) ================= */
.proces-lijst {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.proces-lijst::before {
  content: ""; position: absolute; top: 30px; left: 8%; right: 8%;
  border-top: 2px dashed rgba(178, 51, 40, .45);
}
.proces-stap { position: relative; padding-top: 4.4rem; }
.proces-stap .proces-nr {
  position: absolute; top: 0; left: 0;
  width: 60px; height: 60px; display: grid; place-items: center;
  background: var(--doek); border: 1px solid var(--lijn);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  font-family: var(--f-display); font-weight: 700; font-size: 1.35rem;
  color: var(--marine);
}
.proces-stap h3 {
  font-family: var(--f-display); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -.01em; margin-bottom: .5rem;
}
.proces-stap p { color: var(--inkt-60); font-size: .98rem; }
@media (max-width: 820px) {
  .proces-lijst { grid-template-columns: 1fr; gap: 1.8rem; }
  .proces-lijst::before { display: none; }
  .proces-stap { padding-top: 0; padding-left: 4.6rem; min-height: 62px; }
  .proces-stap .proces-nr { top: 0; }
}

/* ================= 03 · MATERIAAL (donker, met stalen) ================= */
.materiaal-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.4rem, 3vw, 2.8rem); align-items: start; }
.materiaal-tekst { grid-column: 1 / 8; }
.materiaal-tekst .betoog-lead {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -.012em;
  color: var(--doek); max-width: 28ch; margin-bottom: 1.1rem;
}
.materiaal-tekst p { color: rgba(242,238,230,.8); max-width: 58ch; }
.materiaal-tekst a { color: var(--doek); text-decoration-color: var(--steen); text-underline-offset: 3px; }
.materiaal-stalen { grid-column: 8 / 13; }
.materiaal-stalen .stalen-rij { max-width: none; }
.materiaal-stalen .stalen-noot { color: rgba(242,238,230,.55); }
.materiaal-stalen .stalen-weverijen { max-width: none; }
@media (max-width: 900px) {
  .materiaal-tekst, .materiaal-stalen { grid-column: 1 / 13; }
}

/* ================= KENMERKEN ================= */
.dn-kenmerken {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(1.6rem, 4vw, 3.4rem);
  max-width: 66rem;
}
.dn-kenmerken li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .95rem 0; border-top: 1px solid var(--lijn);
  font-size: 1rem;
}
.dn-kenmerken .nr {
  font-family: var(--f-label); font-weight: 500; font-size: .72rem;
  letter-spacing: .12em; color: var(--steen); flex: none;
}
@media (max-width: 720px) { .dn-kenmerken { grid-template-columns: 1fr; } }

/* ================= TIPS / WAAROM ================= */
.tips-lijst { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2.2rem); }
.tip {
  border-top: 2px solid var(--messing);
  padding-top: 1rem;
}
.tip h3 {
  font-family: var(--f-display); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -.01em; margin-bottom: .4rem;
}
.tip p { color: var(--inkt-60); font-size: .96rem; }
@media (max-width: 780px) { .tips-lijst { grid-template-columns: 1fr; } }

/* ================= GALERIJ ================= */
.dn-galerij {
  list-style: none; padding: 0; margin-top: .4rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.2rem);
}
.dn-galerij figure { position: relative; margin: 0; }
.dn-galerij img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.dn-galerij figcaption {
  position: absolute; left: 0; bottom: 0;
  background: rgba(11, 34, 51, .88); color: var(--doek-op-diep);
  padding: .38rem .75rem;
  font-family: var(--f-label); font-weight: 500;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
.dn-galerij.twee { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .dn-galerij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dn-galerij, .dn-galerij.twee { grid-template-columns: 1fr; } }

/* ================= KAARTEN (overzichten) ================= */
.dn-kaarten {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.dn-kaart a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none;
  background: #fbf9f4; border: 1px solid var(--lijn);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: transform .35s var(--ease-uit), box-shadow .35s var(--ease-uit);
}
.dn-kaart a:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(11,34,51,.14); }
.dn-kaart img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.dn-kaart-tekst { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.dn-kaart-tekst strong {
  font-family: var(--f-display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -.01em; display: block; color: var(--inkt);
}
.dn-kaart-tekst > span { display: block; margin-top: .3rem; color: var(--inkt-60); font-size: .95rem; }
.dn-kaart-tekst .tag { display: inline-block; margin-top: auto; padding-top: .9rem; color: var(--steen); }
/* typo-kaart: geen foto, wel karakter */
.dn-kaart.typo a { background: var(--diep); }
.dn-kaart.typo .kaart-woord {
  display: grid; place-items: start end; padding: 1.1rem 1.2rem 0;
  aspect-ratio: 3 / 2; position: relative; overflow: hidden;
}
.dn-kaart.typo .kaart-woord::before {
  content: ""; position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1rem; height: 0;
  border-top: 2px dashed rgba(178, 51, 40, .55);
}
.dn-kaart.typo .kaart-woord span {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: .98; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.3px rgba(242, 238, 230, .8);
  text-align: right; text-transform: none;
}
.dn-kaart.typo .dn-kaart-tekst strong { color: var(--doek); }
.dn-kaart.typo .dn-kaart-tekst > span { color: rgba(242,238,230,.65); }
.dn-kaart.typo .dn-kaart-tekst .tag { color: var(--messing); }
@media (max-width: 900px) { .dn-kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dn-kaarten { grid-template-columns: 1fr; } }

/* ================= VRAGEN ================= */
.vragen-wrap { max-width: 56rem; }
.vraag { border-top: 1px solid var(--lijn); }
.vraag:last-of-type { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: .9rem;
  padding: 1.05rem 0;
  font-family: var(--f-display); font-weight: 600; font-size: 1.08rem;
  letter-spacing: -.01em;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary .tag { color: var(--steen); transition: transform .3s var(--ease-uit); }
.vraag[open] summary .tag { transform: rotate(45deg); }
.vraag .antwoord { padding: 0 0 1.2rem 2rem; color: var(--inkt-60); max-width: 60ch; }
.vraag .antwoord a { color: var(--inkt); text-decoration-color: var(--steen); text-underline-offset: 3px; }

/* ================= VERWANT + SLOT ================= */
.verwant-sectie { padding: clamp(2.2rem, 5vh, 3.2rem) 0; border-top: 1px solid var(--lijn); }
.verwant-kop { display: block; color: var(--inkt-60); margin-bottom: .9rem; }
.verwant-lijst { display: flex; flex-wrap: wrap; gap: .6rem; }
.verwant-lijst a {
  text-decoration: none; padding: .55rem 1.05rem;
  border: 1px solid var(--lijn); background: var(--doek); color: var(--inkt-60);
  font-family: var(--f-label); font-weight: 500;
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  transition: all .2s linear;
}
.verwant-lijst a:hover, .verwant-lijst a:focus-visible {
  background: var(--marine); border-color: var(--marine); color: var(--doek);
}

.slot-sectie { background: var(--diep); color: var(--doek); padding: clamp(3.4rem, 9vh, 6rem) 0; }
.slot-sectie h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: -.02em;
  max-width: 20ch;
}
.slot-sectie h2 em { font-style: normal; color: var(--messing); }
.slot-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.slot-contact { grid-column: 1 / 8; }
.slot-contact address { font-style: normal; color: rgba(242,238,230,.78); line-height: 1.9; }
.slot-contact a { color: var(--doek); text-decoration-color: var(--steen); text-underline-offset: 4px; }
.slot-acties { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.slot-acties .stille-link { color: rgba(242,238,230,.72); }
@media (max-width: 900px) { .slot-contact, .slot-acties { grid-column: 1 / 13; } }

/* ================= ENTREES ================= */
.rv { opacity: 0; }
.rv-op { transform: translateY(34px); }
.rv-links { transform: translateX(-42px); }
.rv-rechts { transform: translateX(42px); }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-op, .rv-links, .rv-rechts { opacity: 1 !important; transform: none !important; }
  .dn-scope * { transition: none !important; }
}
.no-gsap .rv, .no-gsap .rv-op, .no-gsap .rv-links, .no-gsap .rv-rechts {
  opacity: 1 !important; transform: none !important;
}