/* =====================================================================
   ontwerpzaak.nl · Fotografie en illustratie (v59)
   De sectie op de home (drie banden), de tab In beeld, de beeldverhalen in vellen, Wat > Fotografie en illustratie
   en de proefbalk. Overgenomen uit het voorbeeld van 5 november 2026; bouwt op site.css (zelfde tokens en letter).
   Alleen geladen als de sectie op de pagina te zien is.
   ===================================================================== */

.beeld .kop2 em, .stappen-beeld .kop2 em {
  font-style: normal; background: var(--magenta); color: #fff;
  padding: .02em .16em .07em; border-radius: .07em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- home: de sectie met drie banden ---------- */
.beeld { background: var(--zand-licht); padding-block: var(--ruimte); overflow: hidden; }
.beeld .label { color: var(--donker); }
.beeld .kop2 { color: var(--inkt); }
.beeld__klein { margin-top: 1rem; font-size: .8125rem; color: rgba(31, 26, 23, .72); }
@media (min-width: 64em) { .beeld .sectiekop, .beeld .band__kop, .beeld__onder { padding-inline-start: var(--inspringen); } }
.band + .band { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.band__kop { font-size: .75rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; margin-bottom: .85rem; }
.stroom { overflow: hidden; }
.stroom__baan { display: flex; align-items: flex-end; width: max-content; animation: oz-loop var(--duur, 80s) linear infinite; }
.stroom--terug .stroom__baan { animation-direction: reverse; }
.stroom:hover .stroom__baan { animation-play-state: paused; }
@keyframes oz-loop { to { transform: translateX(-50%); } }
.baan--foto { gap: clamp(.6rem, 1vw, .9rem); padding-right: clamp(.6rem, 1vw, .9rem); }
.baan--foto li { flex: none; height: clamp(11rem, 16vw, 15.5rem); aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; }
.baan--foto img { width: 100%; height: 100%; object-fit: cover; }
.stroom--vrij { background: var(--zand); }
.baan--vrij { gap: clamp(2rem, 4vw, 4rem); padding: 1.25rem clamp(2rem, 4vw, 4rem) 0 0; }
.baan--vrij img { height: clamp(11rem, 16vw, 15rem); width: auto; }
.stroom--wit { background: #fff; }
.baan--ill { gap: clamp(2.5rem, 5vw, 5rem); padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 2.5vw, 2.25rem) 0; }
.baan--ill img { height: clamp(9rem, 13vw, 12.5rem); width: auto; mix-blend-mode: multiply; }
.beeld__onder { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.stuur { display: flex; flex-wrap: wrap; gap: .4rem; }
.stuur li { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .5em .85em; border: 1.5px solid rgba(31, 26, 23, .2); border-radius: 999px; }
.meer { display: inline-flex; align-items: center; gap: .4em; margin-top: 1.75rem; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.meer span { color: var(--magenta); transition: transform .25s var(--ease); }
.meer:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .stroom { overflow-x: auto; } .stroom__baan { animation: none; } }

/* ---------- tab In beeld: een kaart per beeldverhaal ---------- */
.verhalen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
@media (max-width: 56em) { .verhalen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vkaart { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; text-decoration: none; color: inherit; }
.vkaart__beeld { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: #fff; transition: transform .35s var(--ease), box-shadow .35s; }
.vkaart__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vkaart__beeld img.ill { inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.vkaart:hover .vkaart__beeld { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(31, 26, 23, .35); }
.vkaart__naam { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: var(--kop-3); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.vkaart:hover .vkaart__naam { color: var(--magenta); }
.vkaart__soort { margin-top: .3rem; font-size: .9375rem; color: var(--inkt-zacht); }
.lbl { display: inline-block; font-size: .5625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1; padding: .35em .55em .3em; border-radius: 3px; background: var(--zand); color: var(--inkt); }

/* ---------- pagina van een beeldverhaal ---------- */
.vpagina { background: var(--wit); padding-block: var(--ruimte-klein) var(--ruimte); }
.vellen { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.vel { --vp: clamp(1.25rem, 3.6vw, 3.5rem);
  position: relative; background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 60px -40px rgba(31, 26, 23, .45), 0 0 0 1px rgba(31, 26, 23, .06);
  padding: var(--vp); display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 2rem); container-type: inline-size; }
@media (min-width: 64em) { .vel { aspect-ratio: 16 / 10; } }
.vel__top { position: relative; z-index: 5; display: flex; justify-content: flex-end; font-size: .625rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(31, 26, 23, .72); }
.vel__lijf { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem); min-height: 0; }
.vel__voet { position: relative; z-index: 5; display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid rgba(31, 26, 23, .14); font-size: .75rem; color: rgba(31, 26, 23, .6); }

/* kleuren per opdrachtgever */
.vellen[data-klant="avant"] { --k1: #48277C; --k2: #EF776E; --k3: #FCE4E4; --k4: #00A19A; --k5: #E83181; --kl: #B8483E; }
.vellen[data-klant="florence"] { --k1: #890E53; --k2: #F47B21; --k3: #FDEDE1; --kl: #B4500F; }
.vellen[data-klant="jgz"] { --k1: #831F83; --k2: #9C1592; --k3: #F6EAF5; --kl: #831F83; }
.vellen[data-klant="trivian"] { --k1: #151245; --k2: #2BB3D9; --k3: #E9EAF3; --kl: #3A3790; }

.vlabel { font-size: .6875rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--kl); margin-bottom: .75rem; }
.vkop { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem); font-weight: 900; font-stretch: 104%; letter-spacing: -.03em; line-height: .98; color: var(--k1); text-wrap: balance; }
.vkop--groot { font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem); }
.vtekst { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); line-height: 1.4; max-width: 30em; }
.vklein { font-size: .875rem; color: rgba(31, 26, 23, .7); max-width: 36em; margin-top: .75rem; }
.vkop + .vtekst { margin-top: 1.1rem; }
/* op een groot scherm schaalt de tekst mee met het vel, zoals in de presentatie */
@media (min-width: 64em) {
  .vkop { font-size: max(1.75rem, 3.2cqi); }
  .vkop--groot { font-size: max(2.25rem, 4.4cqi); }
  .vtekst { font-size: max(1rem, 1.35cqi); }
  .vkop + .vtekst { margin-top: max(1rem, 1.2cqi); }
  .v-op__tekst .vtekst, .v-op__tekst .vklein { max-width: 31cqi; }
  .v-groot .vkop--groot { font-size: max(2.5rem, 6.4cqi); }
}
.vkop-rij { display: grid; gap: 1rem 3rem; grid-template-columns: 1fr; }
@media (min-width: 48em) { .vkop-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vkop-rij > div + div { padding-top: 1.55rem; } }
.vbijschrift { margin-top: .8rem; font-size: .875rem; color: rgba(31, 26, 23, .72); }
.vbijschrift b { display: block; color: var(--k1); font-weight: 800; font-size: 1rem; margin-bottom: .15rem; }

/* de vorm uit het logo van AVANT TOP (v60): de eerste A uit AVANT, als vlak */
.boog { position: absolute; display: block; fill: var(--vk, var(--k2)); aspect-ratio: 1500 / 1774; height: 100%; width: auto; max-width: none; }
.rond { border-radius: 6px 28% 28% 6px / 6px 50% 50% 6px; overflow: hidden; }
.rond img, .hoek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hoek { border-radius: 10px; overflow: hidden; }
.paneel { position: relative; border-radius: 12px; background: var(--k3); }

/* opener */
.v-op { display: grid; gap: 1.5rem; }
.v-op__tekst .knop { margin-top: 1.5rem; }
.knop__maat { font-weight: 600; opacity: .8; }
@media (max-width: 40em) { .v-op__tekst .knop { display: none; } }
.v-op__beeld { position: relative; aspect-ratio: 16 / 10; margin: 0 calc(-1 * var(--vp)) calc(-1 * var(--vp)); }
.v-op__band { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: var(--k1); }
.v-op__beeld .boog { right: 6.5%; bottom: 0; height: 89%; }
.v-op__groep { position: absolute; right: 2%; bottom: 0; width: 67.5%; height: auto; }
.v-op__datum { position: absolute; left: var(--vp); bottom: 7%; z-index: 4; color: #fff; font-size: .8125rem; }
.v-op--paneel .v-op__beeld { margin: 0; aspect-ratio: 4 / 3; }
.v-op--paneel .paneel { position: absolute; inset: 0; }
.v-op--paneel .v-op__fig { position: absolute; inset: 8% 6% 6%; display: flex; align-items: flex-end; justify-content: center; gap: 5%; }
.v-op--paneel .v-op__fig img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; min-width: 0; }
.v-op--paneel .v-op__fig.veel img { max-width: 30%; height: 86%; }
.v-op--foto .v-op__beeld { margin: 0; aspect-ratio: 16 / 10; }
.v-op--foto .rond, .v-op--foto .hoek { position: absolute; inset: 0; }
@media (min-width: 64em) {
  .vel--opener .vel__lijf { justify-content: center; }
  .v-op { position: static; display: block; }
  .v-op__tekst { position: relative; z-index: 4; width: 38%; padding-bottom: 12%; }
  .v-op__beeld { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; }
  .v-op--paneel .v-op__tekst, .v-op--foto .v-op__tekst { width: 40%; padding-bottom: 0; }
  .v-op--paneel .v-op__beeld, .v-op--foto .v-op__beeld { position: absolute; inset: auto var(--vp) auto auto; top: 50%; transform: translateY(-50%); width: 52%; aspect-ratio: 16 / 11; }
}

/* twee */
.v-twee { display: grid; gap: 1.5rem 2rem; grid-template-columns: 1fr; margin-top: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 48em) { .v-twee { grid-template-columns: 1fr 1fr; align-items: end; } }
.vrijkader { position: relative; aspect-ratio: 700 / 440; }
.vrijkader .paneel { position: absolute; inset: 0; }
.vrijkader .boog { right: 8.9%; bottom: 0; height: 107%; }
.vrijkader__mens { position: absolute; bottom: 0; left: 20.7%; height: 124.5%; width: auto; max-width: none; }
.v-twee .rond, .v-twee .hoek { aspect-ratio: 700 / 440; }

/* groot */
.v-groot { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.v-groot__beeld { position: relative; aspect-ratio: 1; margin: 0 calc(-1 * var(--vp)) calc(-1 * var(--vp)); overflow: hidden; }
.v-groot__beeld .boog { right: 6.7%; bottom: 0; height: 89%; }
.v-groot__beeld img { position: absolute; right: 0; bottom: 0; height: 101%; width: auto; max-width: none; }
@media (min-width: 64em) {
  .v-groot__tekst { position: relative; z-index: 4; width: 38%; }
  .v-groot__beeld { position: absolute; top: 0; right: 0; bottom: 0; width: 75%; margin: 0; aspect-ratio: auto; }
}

/* dichtbij */
.v-dichtbij { display: grid; gap: clamp(.5rem, 1vw, .9rem); grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "a c"; align-content: start; }
.v-dichtbij > div { position: relative; border-radius: 8px; overflow: hidden; background: var(--k3); }
.v-dichtbij > div:nth-child(1) { grid-area: a; }
.v-dichtbij > div:nth-child(2) { grid-area: b; aspect-ratio: 49 / 20; }
.v-dichtbij > .duo { grid-area: c; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.5rem, 1vw, .9rem); }
.v-dichtbij .duo > div { position: relative; border-radius: 8px; overflow: hidden; background: var(--k3); aspect-ratio: 6 / 5; }
.v-dichtbij img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-dichtbij.ill img { mix-blend-mode: multiply; }
/* v60: bij illustratie past alleen het hele beeld (de eerste tegel) erin; een uitsnede vult de tegel, zodat de snijranden op de rand vallen */
.v-dichtbij.ill > div:first-child img { inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.vtag { position: absolute; left: .7rem; bottom: .7rem; z-index: 1; display: inline-flex; align-items: center; gap: .45em; padding: .35em .7em .35em .35em; border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.vtag i { font-style: normal; display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--k1); color: #fff; font-size: .6875rem; font-weight: 800; }
@media (max-width: 40em) { .v-dichtbij { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; } .v-dichtbij > div:nth-child(1) { aspect-ratio: 6 / 5; } .v-dichtbij > div:nth-child(2) { aspect-ratio: 49 / 20; } .v-dichtbij .duo > div { aspect-ratio: 6 / 5; } }

/* gezichten: vier portretten, elk een kaart met de boog, het hoofd erboven uit */
.v-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.5rem); margin-top: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 48em) { .v-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; } }
.portret { position: relative; aspect-ratio: 342 / 390; }
.portret .paneel { position: absolute; inset: 0; overflow: hidden; }
.portret .boog { right: 5%; bottom: 0; height: 100%; }
.portret__mens { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 127%; width: auto; max-width: none; }

/* samen: kop links, band in klantkleur, groep rechts erboven uit */
.vel--samen .vel__lijf { justify-content: space-between; }
.v-samen__kop { max-width: 38%; }
.v-samen { position: relative; aspect-ratio: 1000 / 305; }
.v-samen__band { position: absolute; inset: 0; background: var(--k1); border-radius: 12px; }
.v-samen__band > div { position: absolute; left: 4.2%; bottom: 30%; max-width: 22%; color: #fff; z-index: 3; }
.v-samen__titel { margin: 0; font-size: max(1.25rem, 2.2cqi); text-wrap: balance; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.v-samen__band p + p { margin-top: .5rem; font-size: .9375rem; opacity: .85; }
.v-samen .boog { right: 2.5%; bottom: 0; height: 159%; z-index: 1; }
.v-samen__groep { position: absolute; right: 1%; bottom: 0; width: 67%; height: auto; z-index: 2; }
@media (max-width: 63.99em) {
  .v-samen__kop { max-width: none; }
  .v-samen { aspect-ratio: auto; display: grid; margin-top: 1rem; }
  .v-samen__band { position: relative; inset: auto; padding: 1.5rem 1.5rem 0; display: grid; gap: 1rem; overflow: hidden; }
  .v-samen__band > div { position: static; max-width: none; }
  .v-samen .boog { display: none; }
  .v-samen__groep { position: relative; right: auto; width: 100%; }
}

/* een groot beeld met bijschriftkaart */
.vel--vol { padding: 0; }
.vel--vol .vel__top { position: absolute; top: var(--vp); right: var(--vp); color: rgba(255, 255, 255, .85); }
.v-vol { position: relative; flex: 1; min-height: 20rem; }
.v-vol > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-vol__kaart { position: absolute; right: var(--vp); bottom: var(--vp); background: #fff; border-radius: 8px; padding: 1.1rem 1.3rem; max-width: 22rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.v-vol__kaart .vkop { font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
.v-vol__kaart p { font-size: .875rem; color: rgba(31, 26, 23, .75); margin-top: .35rem; }
.v-vol__kaart .knop { margin-top: .9rem; }
@media (max-width: 40em) { .v-vol { min-height: 0; aspect-ratio: 4 / 5; } .v-vol__kaart { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } }

/* raster */
.v-raster--3 { --n: 3; } .v-raster--5 { --n: 5; }
.v-raster { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1.1rem); }
@media (max-width: 56em) { .v-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40em) { .v-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v-raster figure > div { aspect-ratio: 5 / 4; border-radius: 6px; overflow: hidden; position: relative; background: #fff; }
.v-raster figure > div img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-raster figure.ill > div { box-shadow: inset 0 0 0 1px rgba(31, 26, 23, .08); }
.v-raster figure.ill > div img { inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.v-raster figcaption { margin-top: .45rem; font-size: .75rem; font-weight: 700; color: var(--k1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-raster--film figure > div { aspect-ratio: 2 / 1; }

/* jong: foto met de ronde kant naast een groep op kleur */
.v-jong { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: 1fr; align-items: end; margin-top: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 48em) { .v-jong { grid-template-columns: 1fr 1fr; } }
.v-jong .rond { aspect-ratio: 485 / 305; }
.groepkader { position: relative; aspect-ratio: 485 / 305; }
.groepkader .paneel { position: absolute; inset: 0; background: var(--k1); overflow: hidden; }
.groepkader .boog { right: 7%; bottom: 0; height: 89%; }
.groepkader__mens { position: absolute; left: 2%; bottom: 0; width: 96%; height: auto; }

/* in gebruik */
.v-gebruik { display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 48em) { .v-gebruik { grid-template-columns: 1fr 1fr; } }
.scherm { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(31, 26, 23, .12), 0 18px 40px -26px rgba(31, 26, 23, .5); }
.scherm__balk { display: flex; gap: .3rem; padding: .5rem .7rem; background: #f3f1f4; }
.scherm__balk span { width: .5rem; height: .5rem; border-radius: 50%; background: #cfc8d4; }
.scherm img { width: 100%; }

/* afspraken */
.v-regels { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 48em) { .v-regels { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.v-regels ol { display: grid; gap: .9rem; margin-top: 1.5rem; }
.v-regels li { display: grid; grid-template-columns: 2.2rem 1fr; font-size: .9375rem; line-height: 1.45; counter-increment: r; }
.v-regels ol { counter-reset: r; }
.v-regels li::before { content: counter(r); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--k1); color: #fff; font-size: .75rem; font-weight: 800; }
.v-regels li b { color: var(--k1); }
.v-zooms { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.5rem, 1vw, .9rem); }
.v-zooms > div { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--k3); }
.v-zooms img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* bouwstenen */
.v-bouw { display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 48em) { .v-bouw { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.v-bouw__figuren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.v-bouw__figuren > div { position: relative; aspect-ratio: 3 / 4; background: var(--k3); border-radius: 6px; overflow: hidden; }
.v-bouw__figuren img { position: absolute; inset: 10% 8% 6%; width: 84%; height: 84%; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; }
.v-bouw__plaat { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(31, 26, 23, .1); }
.v-bouw__plaat img { width: 100%; }

/* Wat: zo ontstaat een beeld */
.stappen-beeld { background: var(--wit); padding-block: var(--ruimte); }
.stappen-beeld ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 2rem; }
@media (min-width: 64em) { .stappen-beeld .binnen > * { margin-inline-start: var(--inspringen); } .stappen-beeld ol { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stappen-beeld li { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; padding-top: 1.1rem; border-top: 2px solid var(--inkt); }
.stappen-beeld .nr { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; color: var(--donker); margin-bottom: .6rem; }
.stappen-beeld h3 { font-size: var(--kop-3); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .5rem; }
.stappen-beeld p { font-size: .9375rem; color: var(--inkt-zacht); }
.stappen-beeld .beeld__klein { margin-top: 2rem; }


/* ---------- kleine aanvullingen bij het overzetten ---------- */
.v-vol__knop { color: var(--inkt); border-color: var(--inkt); }
.ibzij__noot { font-size: .875rem; color: var(--inkt-zacht); }
.vel figure { margin: 0; }

/* ---------- de sportieve stijl: het belangrijke woord in een kleur, geen blok ---------- */
html.oz-sport .beeld .kop2 em, html.oz-sport .stappen-beeld .kop2 em { font-style: italic; background: none; color: var(--sp-accent, var(--magenta)); padding: 0; border-radius: 0; }

/* ---------- de proefbalk: alleen voor Renzo, als er iets op proef staat ---------- */
.ibproef {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90;
  width: min(100% - 2rem, 60rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.25rem;
  padding: .7rem .7rem .7rem 1.1rem; border-radius: 14px;
  background: #1f1a17; color: #f4f1ec; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
  font-size: .875rem; line-height: 1.35;
}
.ibproef__tekst { flex: 1 1 18rem; }
.ibproef__tekst b { display: block; font-weight: 800; }
.ibproef__tekst span { color: rgba(244, 241, 236, .78); }
.ibproef__acties { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.ibproef__vorm { margin: 0; }
.ibproef__knop {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.15rem; border: 0; border-radius: 999px;
  background: #e5007d; color: #fff; font-weight: 800; font-size: .875rem; cursor: pointer;
}
.ibproef__knop:hover { background: #94004e; }
.ibproef__link { color: #f4f1ec; font-weight: 700; text-underline-offset: .2em; }
.ibproef :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body:has(.ibproef) .voet { padding-bottom: 7rem; }
@media print { .ibproef { display: none; } }