/* ============================================================
   VERENLY, DE NIEUWE LOOK.

   Drie Uiverse-systemen, elk voor een ding (keuze van Jona, 18 sep 2026):
     indeling  Verda Finance  gecentreerde opening, schuine kaartjes in de
                              marge, een strook cijfers, een afsluitende band
     kleuren   Folio          botwit, inkt, steengrijs, haarlijnen, GEEN accent
     beelden   Lucidbloom     de enige kleur op de pagina

   Folio's regel is de strengste en wint bij twijfel: iets dat belangrijk
   is, wordt groter of vetter, nooit kleuriger. De kleur komt uitsluitend
   uit de beelden.

   Wat van Verda Finance NIET mee is: de plustekens in de hoeken
   (versiering) en de strook met partnerlogo's (er zijn geen partners om te
   tonen, en een verzonnen strook zou liegen).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=Comfortaa:wght@700&display=swap");

:root {
  /* Folio */
  --bone: #efece4;
  --snow: #ffffff;
  --whisper: #f6f3eb;
  --ink: #13120f;
  --stone: #6c6a62;
  --mist: #e4dfd4;

  --kop: "Instrument Serif", Georgia, "Times New Roman", serif;
  --tekst: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --breedte: 1200px;
  --band: 112px;
  --rond: 20px;
  --pil: 999px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--bone); }

.vak { max-width: var(--breedte); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--kop);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7.4vw, 6.2rem); line-height: 0.98; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.04; }
h3 { font-size: 1.6rem; line-height: 1.15; }
h1 em, h2 em { font-style: italic; }
p { margin: 0; text-wrap: pretty; }
.zacht { color: var(--stone); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: var(--pil);
  font: 500 15px/1 var(--tekst); text-decoration: none;
  border: 1px solid var(--ink); transition: background .18s ease, color .18s ease;
}
.knop--vol { background: var(--ink); color: var(--snow); }
.knop--vol:hover { background: #2a2823; }
.knop--lijn { background: transparent; color: var(--ink); }
.knop--lijn:hover { background: var(--snow); }
.knop:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Kop van de pagina ---------- */
.kop { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; }
.merk { font-family: "Comfortaa", var(--tekst); font-weight: 700; font-size: 1.55rem; line-height: 1; text-decoration: none; letter-spacing: -0.04em; display: inline-flex; align-items: center; gap: .38em; }
.merk__teken { width: 1.15em; height: 1.15em; flex: none; }
.navlinks { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.navlinks a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); }
.navlinks a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kop__rechts { display: flex; align-items: center; gap: 18px; }
.kop__rechts .aan { font-size: 14px; font-weight: 500; text-decoration: none; }
.kop__rechts .knop { height: 42px; padding: 0 20px; font-size: 14px; }

/* ---------- Opening (Verda Finance) ---------- */
.opening { position: relative; text-align: center; padding: 72px 0 var(--band); }
.opening h1 { max-width: 13ch; margin: 0 auto; }
.opening .lead { max-width: 52ch; margin: 28px auto 0; font-size: 1.125rem; color: var(--stone); }
.opening .knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.opening .voorwaarde { margin-top: 18px; font-size: 14px; color: var(--stone); }

/* De schuine kaartjes. Alleen echte cijfers. */
.zweef {
  position: absolute; width: 228px; padding: 20px 22px;
  background: var(--snow); border: 1px solid var(--mist); border-radius: var(--rond);
  text-align: left; box-shadow: 0 1px 2px rgba(19,18,15,.04), 0 12px 28px rgba(19,18,15,.06);
}
.zweef--links { left: 0; top: 150px; transform: rotate(-4deg); }
.zweef--rechts { right: 0; top: 250px; transform: rotate(3.5deg); }
.zweef__getal { font-family: var(--kop); font-size: 2.6rem; line-height: 1; }
.zweef__wat { margin-top: 4px; font-weight: 600; font-size: 14px; }
.zweef__uitleg { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--stone); }

/* ---------- Het beeld: de enige kleur ---------- */
.beeld { border-radius: 28px; overflow: hidden; aspect-ratio: 21 / 8; background: var(--ink); }
.beeld img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Strook met cijfers (Verda Finance) ---------- */
.strook {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--band); border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist);
}
.strook > div { padding: 36px 28px; }
.strook > div + div { border-left: 1px solid var(--mist); }
.strook b { display: block; font-family: var(--kop); font-weight: 400; font-size: 3rem; line-height: 1; }
.strook span { display: block; margin-top: 10px; font-size: 15px; color: var(--stone); max-width: 28ch; }

/* ---------- Banden ---------- */
.band { padding-top: var(--band); }
.band__kop { max-width: 34rem; }
.band__kop p { margin-top: 16px; font-size: 1.0625rem; color: var(--stone); }

/* Twee kolommen, gescheiden door haarlijnen, geen kaarten. */
.lijstje { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 48px; border-top: 1px solid var(--mist); }
.lijstje > div { padding: 26px 0; border-bottom: 1px solid var(--mist); }
.lijstje h3 { font-size: 1.45rem; }
.lijstje p { margin-top: 6px; color: var(--stone); }

/* Voor wie: een raster van witte vlakken op botwit. */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.vlak { background: var(--snow); border: 1px solid var(--mist); border-radius: var(--rond); padding: 28px; }
.vlak p { margin-top: 10px; color: var(--stone); }
.vlak .pijler { margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--ink); }

/* Pijlers en prijzen: regels, geen kaarten. */
.prijzen { margin-top: 48px; border-top: 1px solid var(--ink); }
.prijs { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--mist); }
.prijs h3 { font-size: 1.5rem; }
.prijs p { margin-top: 4px; color: var(--stone); }
.prijs b { font-family: var(--kop); font-weight: 400; font-size: 1.9rem; white-space: nowrap; }
.prijs b small { font-family: var(--tekst); font-size: 13px; color: var(--stone); margin-left: 4px; }
.prijzen__noot { margin-top: 18px; font-size: 15px; color: var(--stone); }

/* Overstappen: drie stappen. Genummerd, want het IS een volgorde. */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; counter-reset: stap; }
.stap { border-top: 1px solid var(--ink); padding-top: 22px; }
.stap::before { counter-increment: stap; content: counter(stap); font-family: var(--kop); font-size: 2.4rem; line-height: 1; display: block; margin-bottom: 14px; }
.stap p { margin-top: 8px; color: var(--stone); }

/* De review. */
.review { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.review blockquote { margin: 0; font-family: var(--kop); font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.22; }
.review figcaption { margin-top: 22px; font-size: 15px; color: var(--stone); }
.review figcaption a { color: var(--ink); }
.review .beeld { aspect-ratio: 4 / 5; }

/* Zekerheid: twee blokken naast elkaar. */
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }

/* De afsluitende band (Verda Finance). */
.slot {
  margin-top: var(--band); background: var(--ink); color: var(--snow);
  border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr;
}
.slot__tekst { padding: 64px 56px; align-self: center; }
.slot__tekst p { margin-top: 16px; color: #bdb9ae; max-width: 40ch; }
.slot .knop--vol { background: var(--snow); color: var(--ink); border-color: var(--snow); margin-top: 32px; }
.slot .knop--vol:hover { background: var(--bone); }
.slot__beeld { position: relative; min-height: 340px; }
.slot__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }

/* ---------- Voet ---------- */
.voet { margin-top: var(--band); padding: 48px 0 64px; border-top: 1px solid var(--mist); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; font-size: 14px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.voet a { text-decoration: none; color: var(--stone); }
.voet a:hover { color: var(--ink); }
.voet .merk { font-size: 1.4rem; }
.voet p { margin-top: 10px; color: var(--stone); max-width: 28ch; }
.voet h4 { margin: 0 0 12px; font: 600 14px/1.2 var(--tekst); }

/* ---------- Kleinere schermen ---------- */
@media (max-width: 1080px) {
  .zweef { position: static; transform: none; width: auto; max-width: 320px; }
  .zweven { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
}
@media (max-width: 860px) {
  .navlinks { display: none; }
  .strook, .raster, .stappen, .twee, .review, .slot, .lijstje { grid-template-columns: 1fr; }
  .strook > div + div { border-left: 0; border-top: 1px solid var(--mist); }
  .voet { grid-template-columns: 1fr 1fr; }
  .slot__tekst { padding: 44px 28px; }
  .slot__beeld { min-height: 240px; }
  .beeld { aspect-ratio: 4 / 3; }
  :root { --band: 80px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Op een telefoon past de kop niet op een regel: naam, Inloggen en de knop
   naast elkaar zijn breder dan het scherm en duwden de hele pagina opzij. De
   knop staat er in de opening meteen onder, dus in de kop mag hij weg. */
@media (max-width: 560px) {
  .kop__rechts .knop { display: none; }
  .kop { flex-wrap: wrap; }
}
.vak > *, .raster > *, .strook > *, .stappen > *, .twee > *, .lijstje > *, .prijs > * { min-width: 0; }

/* ============================================================
   RONDE TWEE: "te leeg" en "moet persoonlijkheid in" (Jona, 18 sep).

   Onder de opening was het een tekstdocument: haarlijnen, witte vakjes,
   een prijslijst en twee beelden op de hele pagina. Wat erbij komt:
     1. een uitspraak over de volle breedte, op een beeld, met een donkere
        kaart die erover schuift (Verda Finance laat vlakken overlappen)
     2. "Zie het in actie": de schermen van het product op een donkere band
     3. "Voor wie" met een uitsnede uit de beelden per soort vereniging
     4. de prijzen als donkere band met kaarten
   Folio blijft de basis: inkt en botwit. De kleur komt nog steeds alleen
   uit de beelden.
   ============================================================ */

:root { --inkt-2: #1f1d19; --inkt-3: #2e2b25; --steen-licht: #aaa699; }

/* 1. De uitspraak */
.uitspraak { position: relative; margin-top: 8px; }
.uitspraak .beeld { aspect-ratio: 21 / 9; }
.uitspraak__kaart {
  position: relative; margin: -120px 0 0 48px; max-width: 640px;
  background: var(--ink); color: var(--snow); border-radius: 24px; padding: 40px 44px;
}
.uitspraak__kaart h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.02; }
.uitspraak__kaart p { margin-top: 16px; color: var(--steen-licht); max-width: 44ch; }

/* 2 en 4. De donkere banden */
.donker { background: var(--ink); color: var(--snow); border-radius: 32px; padding: 88px 0; margin-top: var(--band); }
.donker .band__kop p { color: var(--steen-licht); }
.donker .zacht { color: var(--steen-licht); }

/* Het schermenraster */
.schermen { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: 48px; }
.scherm { background: var(--snow); color: var(--ink); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.scherm--groot { grid-row: span 2; }
.scherm h3 { font-size: 1.55rem; }
.scherm > p { color: var(--stone); font-size: 15px; }
.scherm__raam { margin-top: auto; border: 1px solid var(--mist); border-radius: 14px; background: var(--whisper); padding: 14px; font-size: 14px; }
.scherm__noot { font-size: 12px; color: var(--stone); }
.r { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--mist); }
.r:last-child { border-bottom: 0; }
.r small { display: block; color: var(--stone); font-size: 12.5px; }
.stand { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.stand--open { text-decoration: underline; text-underline-offset: 3px; }
.groepje { font-size: 12.5px; font-weight: 600; color: var(--stone); margin: 10px 0 2px; }
.groepje:first-child { margin-top: 0; }
.maand { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.maand span { aspect-ratio: 1; border-radius: 6px; background: var(--snow); border: 1px solid var(--mist); font-size: 11px; display: grid; place-items: center; color: var(--stone); }
.maand .vol { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.maand .dubbel { background: var(--snow); color: var(--ink); border: 2px solid var(--ink); font-weight: 700; }
.toog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.toog span { background: var(--snow); border: 1px solid var(--mist); border-radius: 10px; padding: 10px 0; text-align: center; font-weight: 500; }
.teller { font-family: var(--kop); font-size: 4.2rem; line-height: 1; }

/* 3. Voor wie, met een uitsnede uit de beelden */
.vlak--beeld { padding: 0; overflow: hidden; }
.vlak--beeld .uitsnede { height: 190px; background-size: 280%; background-repeat: no-repeat; }
.vlak--beeld .binnen { padding: 24px 28px 28px; }

/* 4. De prijzen op donker */
.kaarten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; }
.kaart { background: var(--inkt-2); border: 1px solid var(--inkt-3); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 196px; }
.kaart h3 { font-size: 1.35rem; }
.kaart p { color: var(--steen-licht); font-size: 14.5px; }
.kaart b { margin-top: auto; font-family: var(--kop); font-weight: 400; font-size: 2rem; line-height: 1; }
.kaart b small { font-family: var(--tekst); font-size: 13px; color: var(--steen-licht); margin-left: 6px; }
.kaart--basis { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.kaart--basis p, .kaart--basis b small { color: var(--stone); }
.donker .prijzen__noot a { color: var(--snow); }

@media (max-width: 1080px) {
  .schermen { grid-template-columns: 1fr 1fr; }
  .scherm--groot { grid-row: auto; grid-column: span 2; }
  .kaarten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .uitspraak__kaart { margin: -60px 16px 0; padding: 30px 26px; }
  .uitspraak .beeld { aspect-ratio: 4 / 3; }
  .schermen, .kaarten { grid-template-columns: 1fr; }
  .scherm--groot { grid-column: auto; }
  .donker { border-radius: 24px; padding: 64px 0; }
}
/* In het grote scherm duwde margin-top:auto het raam naar onder en liet het
   een leeg gat achter de tekst. Daar hoort het raam meteen te volgen. */
.scherm--groot .scherm__raam { margin-top: 6px; }
.scherm--groot .scherm__noot { margin-top: auto; }

/* ============================================================
   RONDE DRIE (Jona, 18 sep, met zes schermafbeeldingen).
   ============================================================ */

/* Het menu blijft bovenaan staan, in een afgeronde balk. */
.balk-wrap { position: sticky; top: 12px; z-index: 50; padding: 0 16px; margin-top: 12px; }
.balk {
  max-width: var(--breedte); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 10px 10px 26px; border-radius: var(--pil);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--mist);
  box-shadow: 0 1px 2px rgba(19,18,15,.04), 0 10px 30px rgba(19,18,15,.07);
}
.balk .merk { font-size: 1.45rem; }
.balk .navlinks { gap: 24px; }
.balk .kop__rechts .knop { height: 42px; }
@media (max-width: 1080px) { .balk .navlinks { gap: 16px; } .balk .navlinks a { font-size: 13px; } }
@media (max-width: 960px) { .balk .navlinks { display: none; } }

/* De problemen: titels die opvallen. Vetter, niet kleuriger (Folio). */
.lijstje h3 { font-family: var(--tekst); font-weight: 600; font-size: 1.28rem; letter-spacing: -0.01em; }

/* Voor wie: echte foto's. */
.vlak--beeld .uitsnede { width: 100%; height: 210px; object-fit: cover; display: block; }

/* De beweging. Zonder script staat alles gewoon stil en zichtbaar. */
[data-beweeg] { transform-origin: 50% 100%; will-change: transform, opacity; }
.zweef { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  [data-beweeg], .zweef { transform: none !important; opacity: 1 !important; }
}

/* Op een smal scherm vervangt een menuknop de zes ingangen. Werkt zonder
   script: het is een details-element. */
.menu-mobiel { display: none; position: relative; }
.menu-mobiel summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: var(--pil); border: 1px solid var(--mist); }
.menu-mobiel summary::-webkit-details-marker { display: none; }
.menu-mobiel__lijst { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; list-style: none; margin: 0; padding: 8px; background: var(--snow); border: 1px solid var(--mist); border-radius: 18px; box-shadow: 0 12px 30px rgba(19,18,15,.10); }
.menu-mobiel__lijst a { display: block; padding: 11px 14px; border-radius: 12px; text-decoration: none; font-weight: 500; }
.menu-mobiel__lijst a:hover { background: var(--whisper); }
@media (max-width: 960px) { .menu-mobiel { display: block; } .balk { padding-left: 20px; } }
/* De donkere banden liepen tot tegen de rand van het scherm, met afgeronde
   hoeken die daar afgesneden leken. Een beetje ruimte eromheen. */
.donker { margin-left: 16px; margin-right: 16px; }

/* ============================================================
   RONDE VIER: "zoals Cirrus een afbeelding achter het eerste wat je
   ziet, en gebruik de bar van Cirrus" (Jona, 18 sep).
   ============================================================ */

/* De balk van Cirrus: geen container rond alles. De naam links, de links
   in een witte pil in het midden, rechts aanmelden en een donkere knop. */
.balk-wrap { position: sticky; top: 0; z-index: 50; margin: 0; padding: 14px 24px; }
.balk { background: none; border: 0; box-shadow: none; padding: 0; max-width: var(--breedte); }
.nav-pil {
  display: inline-flex; align-items: center; gap: 4px; list-style: none; margin: 0;
  padding: 6px; background: var(--snow); border: 1px solid var(--mist); border-radius: var(--pil);
  box-shadow: 0 1px 2px rgba(19,18,15,.05), 0 8px 24px rgba(19,18,15,.08);
}
.nav-link {
  display: inline-flex; align-items: center; padding: 8px 15px; border-radius: var(--pil);
  font-size: 14px; font-weight: 500; color: var(--stone); text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: var(--ink); background: var(--whisper); }
.nav-link[aria-current="page"] { color: var(--ink); background: var(--bone); }
.balk .merk, .balk .aan { transition: color .2s ease; }
@media (max-width: 1080px) { .nav-link { padding: 8px 10px; font-size: 13px; } }
@media (max-width: 960px) { .nav-pil { display: none; } }

/* Zolang de balk boven het beeld hangt, zijn naam en aanmelden wit. */
body.op-beeld .balk .merk, body.op-beeld .balk .aan { color: var(--snow); }
body.op-beeld .menu-mobiel summary { color: var(--snow); border-color: rgba(255,255,255,.4); }

/* De opening ligt op het beeld. Een effen donkere laag houdt de witte tekst
   leesbaar; geen kleurverloop. De held schuift onder de balk door. */
.held {
  position: relative; margin-top: -76px; padding-top: 76px;
  background: var(--ink) url("fotos/home-hero.webp") center 35% / cover no-repeat;
  border-radius: 0 0 36px 36px; overflow: hidden;
}
.held::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 52%, rgba(19,18,15,.78) 0%, rgba(19,18,15,.55) 60%, rgba(19,18,15,.45) 100%), linear-gradient(180deg, rgba(19,18,15,.5), rgba(19,18,15,.2) 40%, rgba(19,18,15,.6)); }
.held .opening .lead, .held .opening .voorwaarde, .held .opening h1 { text-shadow: 0 1px 18px rgba(19,18,15,.55); }
.held .opening { position: relative; padding-top: 96px; padding-bottom: 128px; }
.held .opening h1 { color: var(--snow); }
.held .opening .lead, .held .opening .voorwaarde { color: rgba(255,255,255,.84); }
.held .knop--vol { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.held .knop--vol:hover { background: var(--bone); }
.held .knop--lijn { color: var(--snow); border-color: rgba(255,255,255,.7); }
.held .knop--lijn:hover { background: rgba(255,255,255,.12); }
.uitspraak { margin-top: var(--band); }
/* De kleine regel onder de knoppen verdween tussen de spikkels van het
   marmer, en de donkere knop rechtsboven viel weg tegen het donkere beeld. */
.held .opening .voorwaarde { color: #fff; font-weight: 500; }
body.op-beeld .balk .knop--vol { background: var(--snow); color: var(--ink); border-color: var(--snow); }

/* Niet voorbij de rand van de pagina doorschieten (trackpad, gsm). */
html, body { overscroll-behavior-y: none; }

/* ---------- Alles op één platform ---------- */
.naast { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; margin-top: 40px; }
.naast__los { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.naast__los li { padding: 10px 16px; border: 1px dashed #cfc8b9; border-radius: var(--pil); color: var(--stone); font-size: 15px; background: var(--whisper); }
.naast__pijl { width: 56px; height: 2px; background: var(--ink); position: relative; }
.naast__pijl::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--ink); border-right: 0; }
.naast__een { background: var(--ink); color: var(--snow); border-radius: 24px; padding: 28px 30px; display: grid; gap: 8px; }
.naast__een b { font-family: "Comfortaa", var(--tekst); font-size: 1.7rem; letter-spacing: -0.04em; }
.naast__een span { color: #cfcac0; }
@media (max-width: 860px) { .naast { grid-template-columns: 1fr; } .naast__pijl { transform: rotate(90deg); margin: 8px auto; } }

/* ---------- Vinklijst (waarom het blijft werken, beveiliging) ---------- */
.vinklijst { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vinklijst li { background: var(--snow); border: 1px solid var(--mist); border-radius: var(--rond); padding: 22px 24px 24px; }
.vinklijst li::before { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; margin-bottom: 14px;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.vinklijst h3 { font-family: var(--tekst); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.vinklijst p { margin-top: 6px; color: var(--stone); }
@media (max-width: 960px) { .vinklijst { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vinklijst { grid-template-columns: 1fr; } }

/* Voorbij de foto krijgt de balk zijn eigen lichte vlak, zodat de donkere
   tekst leesbaar blijft (beweging.js haalt op-beeld weg na de foto). */
body:not(.op-beeld) .balk-wrap {
  background: color-mix(in srgb, var(--bone, #efece4) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .2s ease;
}