:root {
  --wit: #FFFFFF; --inkt: #141414; --grijs: #6F6B66; --lijn: #E9E7E3; --vlak: #F5F4F2; --accent: #D9481F;
  --kop: 'Geist', 'Hanken Grotesk', 'Helvetica Neue', sans-serif; --sans: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --rand: clamp(16px, 4vw, 48px); --r: 14px; --zacht: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wit); color: var(--inkt); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sla-over { position: absolute; left: -999px; top: 8px; background: var(--inkt); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.sla-over:focus { left: 8px; }

/* ── kop ── */
.kop { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 68px; padding: 0 var(--rand); background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--lijn); }
.merk { display: flex; align-items: baseline; gap: 10px; color: inherit; text-decoration: none; }
.merk-naam { font: 500 28px/1 var(--kop); letter-spacing: -.02em; }
.merk-door { font-size: 13px; color: var(--grijs); }
.nav { display: flex; gap: 4px; background: var(--vlak); padding: 4px; border-radius: 999px; }
.nav button { padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--grijs); transition: background .2s, color .2s; }
.nav button[aria-current="page"] { background: var(--wit); color: var(--inkt); box-shadow: 0 1px 3px rgba(20, 20, 20, .08); }
.meter { justify-self: end; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; padding: 8px 12px 8px 8px; border-radius: 999px; transition: background .2s; }
.meter:hover { background: var(--vlak); }
.meter-ring { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--lijn) 0); -webkit-mask: radial-gradient(circle 9px, transparent 98%, #000 100%); mask: radial-gradient(circle 9px, transparent 98%, #000 100%); transition: background .6s var(--zacht); }

/* ── scherm ── */
.scherm { max-width: 1320px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--rand) 160px; outline: none; }
.scherm.in > * { animation: in .45s var(--zacht) both; }
.scherm.in > *:nth-child(2) { animation-delay: .04s; } .scherm.in > *:nth-child(3) { animation-delay: .08s; }
@keyframes in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scherm.in > * { animation: none; } * { transition: none !important; } }

.intro-zin { font-size: 15px; color: var(--grijs); margin: 0 0 8px; }
.stap-kop { margin-bottom: clamp(24px, 4vw, 44px); }
.stap-nr { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--grijs); margin-bottom: 14px; min-height: 24px; }
.tekstknop { font-size: 14px; color: var(--grijs); } .tekstknop:hover:not(:disabled) { color: var(--inkt); }
.stap-titel { font: 500 clamp(38px, 5.6vw, 76px)/1.02 var(--kop); letter-spacing: -.03em; margin: 0; max-width: 19ch; text-wrap: balance; }
.stap-hulp { font-size: clamp(16px, 1.5vw, 19px); color: var(--grijs); margin: 16px 0 0; max-width: 56ch; }
.stap-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(28px, 4vw, 44px); }
.knop { background: var(--inkt); color: var(--wit); padding: 16px 28px; border-radius: 999px; font-weight: 600; transition: transform .2s var(--zacht), background .2s; }
.knop:hover:not(:disabled) { transform: translateY(-1px); background: #000; }
.knop.is-aan { background: var(--accent); }
.knop-stil { padding: 14px 4px; color: var(--grijs); font-weight: 500; text-decoration: underline; text-decoration-color: var(--lijn); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.knop-stil:hover, .knop-stil.is-aan { color: var(--inkt); text-decoration-color: var(--inkt); }

/* ── kaarten ── */
.kaart { display: block; text-align: left; width: 100%; border-radius: calc(var(--r) + 6px); padding: 0; position: relative; transition: transform .35s var(--zacht); }
.kaart:hover { transform: translateY(-4px); }
.kaart:hover .bord { box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .28); }
.kaart.gekozen .bord, .kaart[aria-pressed="true"] .bord { outline: 3px solid var(--accent); outline-offset: 4px; }
.kaart-onder { display: block; padding: 16px 2px 0; }
.kaart-onder b { display: block; font-weight: 600; font-size: 17px; }
.kaart-onder span { display: block; color: var(--grijs); font-size: 15px; margin-top: 2px; }
.werelden { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(12px, 2vw, 28px); align-items: center; max-width: 1080px; }
.duel-of { font: 500 34px/1 var(--kop); color: var(--grijs); letter-spacing: -.045em; }
.raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.vink { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); transition: background .2s; }
.kaart-vink[aria-pressed="true"] .vink { background: var(--accent); }
.kaart-vink[aria-pressed="true"] .vink::after { content: ''; position: absolute; left: 10px; top: 7px; width: 7px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ── vragen ── */
.vraag { max-width: 980px; }
.invoer { width: 100%; max-width: 820px; font: 500 clamp(26px, 3.2vw, 40px)/1.25 var(--kop); border: 0; border-bottom: 1.5px solid var(--inkt); padding: 8px 0 12px; background: transparent; color: var(--inkt); border-radius: 0; letter-spacing: -.045em; }
.invoer::placeholder { color: #B5B1AB; }
.invoer:focus { outline: none; border-bottom-color: var(--accent); }
.invoer.fout { border-bottom-color: var(--accent); }
.invoer-lang { min-height: 150px; resize: vertical; font-size: clamp(22px, 2.4vw, 30px); }
.opties { display: flex; flex-wrap: wrap; gap: 12px; }
.optie { padding: 16px 24px; border: 1px solid var(--lijn); border-radius: 999px; font-size: 17px; font-weight: 500; transition: border-color .2s, background .2s, color .2s; }
.optie:hover { border-color: var(--inkt); }
.optie[aria-pressed="true"], .optie.gekozen { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }
.personen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1200px; }
.persoon { text-align: left; padding: 24px 22px 26px; border: 1px solid var(--lijn); border-radius: var(--r); min-height: 168px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .3s var(--zacht); }
.persoon:hover { border-color: var(--inkt); transform: translateY(-2px); }
.persoon.gekozen { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.persoon b { font: 500 30px/1.05 var(--kop); letter-spacing: -.045em; }
.persoon span { color: var(--grijs); font-size: 15px; }
.persoon.gekozen span { color: #CFCBC5; }
.schuif { max-width: 820px; padding-top: 12px; }
.schuif input { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: linear-gradient(90deg, var(--lijn), var(--inkt) 50%, var(--lijn)); border-radius: 4px; margin: 20px 0; }
.schuif input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--wit); border: 2px solid var(--inkt); box-shadow: 0 4px 12px rgba(0, 0, 0, .14); cursor: grab; }
.schuif input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--wit); border: 2px solid var(--inkt); cursor: grab; }
.schuif-labels { display: flex; justify-content: space-between; font: 500 clamp(22px, 2.4vw, 30px)/1 var(--kop); letter-spacing: -.045em; }
.schuif-labels span:nth-child(2) { font: 400 14px/2 var(--sans); color: var(--grijs); }
.kleurkeuze { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; max-width: 900px; }
.kleurstaal { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.staal { position: relative; display: block; width: 100%; aspect-ratio: 1; max-width: 110px; border-radius: 50%; transition: transform .25s var(--zacht); }
.kleurstaal:hover .staal { transform: scale(1.04); }
.kleurstaal[aria-pressed="true"] .staal { transform: scale(.86); opacity: .5; }
.kleurstaal[aria-pressed="true"] .staal::after { content: ''; position: absolute; inset: 46% -6%; background: var(--inkt); transform: rotate(-45deg); border-radius: 2px; }
.kleurstaal[aria-pressed="true"] span { text-decoration: line-through; color: var(--grijs); }
.staal-rood { background: #D7263D; } .staal-oranje { background: #EE7A2E; } .staal-geel { background: #F2C230; } .staal-groen { background: #3E7B4F; } .staal-blauw { background: #2459C9; }
.staal-paars { background: #7A4BB0; } .staal-roze { background: #F08CB0; } .staal-aarde { background: #8B5A3C; } .staal-grijs { background: #9A9A96; } .staal-neon { background: linear-gradient(135deg, #C6FF3D 50%, #FF3DA5 50%); }
.bestand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; max-width: 820px; min-height: 200px; border: 1.5px dashed #CFCBC5; border-radius: var(--r); text-align: center; cursor: pointer; padding: 24px; transition: border-color .2s, background .2s; }
.bestand:hover, .bestand.sleep { border-color: var(--inkt); background: var(--vlak); }
.bestand input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bestand:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.bestand-tekst { font: 500 26px/1.2 var(--kop); letter-spacing: -.045em; }
.bestand-klein { font-size: 14px; color: var(--grijs); }
.melding { color: var(--grijs); font-size: 15px; min-height: 1.5em; margin: 12px 0 0; }

/* ── klaar ── */
.klaar { max-width: 900px; padding-top: 4vh; }
.klaar-kicker { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.klaar-titel { font-size: clamp(54px, 9vw, 128px); line-height: .95; margin: 0; font-weight: 400; letter-spacing: -.035em; overflow-wrap: anywhere; }
.klaar-strook { display: flex; height: 18px; border-radius: 999px; overflow: hidden; margin: 34px 0; max-width: 560px; }
.klaar-strook i { flex: 1; } .klaar-strook i:first-child { flex: 3; }
.klaar-zin { font-size: clamp(18px, 1.8vw, 22px); max-width: 52ch; margin: 0; }

/* ── dok ── */
.dok { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 16px; max-width: calc(100% - 32px); padding: 10px 14px 10px 20px; background: rgba(255, 255, 255, .97); border: 1px solid var(--lijn); border-radius: 999px; box-shadow: 0 14px 36px -14px rgba(20, 20, 20, .25); transition: box-shadow .2s; }
.dok:hover { box-shadow: 0 18px 40px -12px rgba(20, 20, 20, .32); }
.dok[hidden] { display: none; }
body[data-weergave="brief"] .dok { display: none; }
.dok-inhoud { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dok-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); white-space: nowrap; }
.dok-kleuren { display: flex; } .dok-kleuren i { width: 22px; height: 22px; border-radius: 50%; margin-left: -6px; border: 2px solid #fff; } .dok-kleuren i:first-child { margin-left: 0; }
.dok-aa { font-size: 22px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.dok-woorden { font-size: 14px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.dok-pijl { width: 34px; height: 34px; border-radius: 50%; background: var(--vlak); display: grid; place-items: center; flex: none; }

/* ── dialogen ── */
dialog { border: 0; padding: 0; color: var(--inkt); background: var(--wit); }
dialog::backdrop { background: rgba(20, 20, 20, .32); }
.sluit { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--vlak); z-index: 2; font-size: 15px; }
.sluit:hover { background: var(--lijn); }
.lade { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100%); padding: 32px 28px 40px; overflow-y: auto; }
.lade h2 { font: 500 40px/1.05 var(--kop); margin: 0 0 8px; letter-spacing: -.045em; }
.lade-zin { color: var(--grijs); margin: 0 0 24px; }
.lade h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); margin: 28px 0 12px; }
.lade ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lade-rij { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 6px; }
.lade-waarde { font-weight: 600; text-align: right; }
.balk { height: 6px; border-radius: 6px; background: var(--vlak); overflow: hidden; }
.balk i { display: block; height: 100%; background: #C9C5BF; border-radius: 6px; transition: width .6s var(--zacht); }
.balk.ok i { background: var(--inkt); }
.feiten li { display: grid; gap: 2px; font-size: 14px; border-bottom: 1px solid var(--lijn); padding-bottom: 10px; }
.feiten li span { color: var(--grijs); } .feiten li b { font-weight: 500; overflow-wrap: anywhere; }
.lade-voet { margin-top: 28px; }
.detail { width: min(1120px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border-radius: 20px; overflow: auto; }
.detail-inhoud { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; padding: 40px; align-items: start; }
.detail-beeld .bord { max-height: calc(100dvh - 120px); }
.detail-tekst h2 { font: 500 clamp(36px, 4vw, 56px)/1.02 var(--kop); margin: 0 0 16px; letter-spacing: -.045em; }
.detail-tekst p { color: var(--grijs); font-size: 17px; }
.detail-tekst dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 15px; margin: 20px 0; }
.detail-tekst dt { color: var(--grijs); } .detail-tekst dd { margin: 0; font-weight: 500; }
.detail-tekst code { font-size: 14px; background: var(--vlak); padding: 3px 7px; border-radius: 6px; }
.detail-knoppen { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 28px; }
.credit { font-size: 13px !important; } .credit a { color: inherit; }

/* ── atlas ── */
.atlas-kop { margin-bottom: 28px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand) 4px; position: sticky; top: 68px; background: var(--wit); z-index: 5; padding-top: 10px; padding-bottom: 10px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; padding: 10px 18px; border: 1px solid var(--lijn); border-radius: 999px; font-weight: 500; font-size: 15px; white-space: nowrap; transition: border-color .2s, background .2s; }
.tab span { color: var(--grijs); font-weight: 400; margin-left: 4px; }
.tab:hover { border-color: var(--inkt); }
.tab[aria-current="true"] { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.tab[aria-current="true"] span { color: #BDB9B3; }
.tab-zin { color: var(--grijs); margin: 18px 0 28px; }
.muur { columns: 3; column-gap: clamp(16px, 2.4vw, 32px); }
.tegel { break-inside: avoid; margin-bottom: clamp(24px, 3vw, 40px); transition: opacity .3s; }
.tegel.is-niet { opacity: .4; }
.tegel-open { display: block; width: 100%; border-radius: var(--r); transition: transform .35s var(--zacht); }
.tegel-open:hover { transform: translateY(-3px); }
.tegel-open:hover .bord { box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .28); }
.tegel-onder { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-top: 14px; }
.tegel-onder b { display: block; font-weight: 600; font-size: 16px; }
.tegel-onder span { display: block; color: var(--grijs); font-size: 14px; }
.tegel-knoppen { display: flex; gap: 6px; flex: none; }
.rond { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lijn); font-size: 15px; color: var(--grijs); transition: background .2s, color .2s, border-color .2s; }
.rond:hover { border-color: var(--inkt); color: var(--inkt); }
.rond.aan { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.rond.aan[data-w="1"] { background: var(--accent); border-color: var(--accent); }

/* ── merkbrief ── */
.brief { max-width: 1120px; }
.brief-kop { padding-bottom: 40px; border-bottom: 1px solid var(--lijn); }
.brief-kop h1 { font-size: clamp(56px, 10vw, 140px); line-height: .92; margin: 0; font-weight: 400; letter-spacing: -.035em; overflow-wrap: anywhere; }
.brief-lead { font-size: clamp(19px, 2vw, 24px); margin: 20px 0 0; max-width: 46ch; }
.brief-woorden { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.brief-woorden span { padding: 7px 14px; border-radius: 999px; background: var(--vlak); font-size: 14px; font-weight: 500; }
.brief-woorden .eigen { background: none; border: 1px solid var(--lijn); }
.melding-zacht { margin: 20px 0 0; color: var(--grijs); }
.brief-blok { padding: 44px 0; border-bottom: 1px solid var(--lijn); }
.brief-blok h2 { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--grijs); margin: 0 0 22px; }
.brief-twee { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); }
.brief-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.brief-noot { color: var(--grijs); font-size: 15px; margin: 14px 0 0; }
.brief-noot b { color: var(--inkt); font-weight: 600; }
.brief-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); }
.brief-fotos figure { margin: 0; } .brief-fotos figcaption { font-size: 15px; color: var(--grijs); margin-top: 10px; }
.brief blockquote { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; margin: 0; max-width: 22ch; }
.brief-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 17px; }
.brief-lijst li { padding-left: 22px; position: relative; }
.brief-lijst li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 1.5px; background: var(--inkt); }
.schuiven { display: grid; gap: 18px; max-width: 760px; }
.kschuif { display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; gap: 18px; font-size: 15px; }
.kschuif span:last-child { text-align: right; }
.kbaan { position: relative; height: 2px; background: var(--lijn); }
.kbaan i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--inkt); transform: translate(-50%, -50%); }
.brief-actie p { max-width: 60ch; font-size: 18px; margin: 0; }
.brief-actie h2 { color: var(--accent); }

/* ── borden (de beelden zelf) ── */
.bord { position: relative; width: 100%; border-radius: var(--r); overflow: hidden; container-type: inline-size; transition: box-shadow .35s var(--zacht); background: var(--vlak); }
.bord-onder { padding-top: 12px; }
.strook { display: flex; height: 10px; border-radius: 999px; overflow: hidden; }
.strook i { flex: 1; } .strook i:first-child { flex: 2.2; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); border-radius: 999px 0 0 999px; }
.bord-fonts { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--grijs); margin-top: 8px; }
.bord-fonts span:first-child { font-size: 22px; color: var(--inkt); line-height: 1; }
.kaart .bord-onder, .tegel .bord-onder { display: block; }

.bord-wereld { aspect-ratio: 4 / 5; }
.bord-wereld > div { position: absolute; inset: 0; }
.bord-wereld [style*="background-image"] { background-size: cover; background-position: center; }
.wb-p-band { position: absolute; left: 0; right: 0; top: 0; height: 7cqw; }
.wb-p-naam { position: absolute; top: 12cqw; left: 6cqw; right: 6cqw; font-size: var(--fs, 15cqw); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: break-word; }
.wb-p-foto { position: absolute; left: 6cqw; right: 6cqw; bottom: 16cqw; height: 54cqw; filter: grayscale(1) contrast(1.15); }
.wb-p-voet { position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; display: flex; justify-content: space-between; align-items: center; font-size: 3.4cqw; text-transform: uppercase; letter-spacing: .06em; }
.wb-p-voet span:last-child { padding: 1.6cqw 3cqw; border-radius: 99px; }
.wb-e-kop { position: absolute; top: 5cqw; left: 6cqw; right: 6cqw; display: flex; justify-content: space-between; font-size: 3.2cqw; text-transform: uppercase; letter-spacing: .12em; padding-bottom: 2.4cqw; border-bottom: 1px solid currentColor; }
.wb-e-foto { position: absolute; top: 14cqw; left: 6cqw; right: 6cqw; height: 62cqw; }
.wb-e-titel { position: absolute; top: 81cqw; left: 6cqw; right: 6cqw; font-size: 8.4cqw; line-height: 1.02; letter-spacing: -.02em; }
.wb-e-kol { position: absolute; bottom: 5cqw; left: 6cqw; right: 6cqw; display: flex; justify-content: space-between; font-size: 3.2cqw; }
.wb-e-kol p { margin: 0; max-width: 60%; }
.wb-l-foto { position: absolute; inset: 0; opacity: .9; }
.wb-l-etiket { position: absolute; left: 13cqw; right: 13cqw; top: 33cqw; padding: 9cqw 5cqw 8cqw; text-align: center; border: 1px solid; box-shadow: 0 3cqw 8cqw -3cqw rgba(0, 0, 0, .45); }
.wb-l-rand { position: absolute; inset: 2cqw; border: .5px solid; pointer-events: none; }
.wb-l-naam { font-size: var(--fs, 10cqw); line-height: 1; margin: 3cqw 0; overflow-wrap: break-word; }
.wb-l-klein { font-size: 2.8cqw; text-transform: uppercase; letter-spacing: .2em; }
.wb-l-lijn { width: 12cqw; height: 1px; margin: 3cqw auto; }
.wb-g-naam { position: absolute; top: 6cqw; left: 6cqw; right: 6cqw; font-size: var(--fs, 13cqw); line-height: .92; letter-spacing: -.055em; font-weight: 800; overflow-wrap: break-word; }
.wb-g-lijnen { position: absolute; left: 6cqw; right: 6cqw; top: 46cqw; border-top: 2px solid; }
.wb-g-foto { position: absolute; left: 6cqw; top: 50cqw; width: 54cqw; height: 60cqw; }
.wb-g-blok { position: absolute; right: 6cqw; top: 50cqw; width: 28cqw; height: 28cqw; }
.wb-g-meta { position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; display: flex; justify-content: space-between; gap: 3cqw; font-size: 3.2cqw; }
.wb-g-meta span:nth-child(2) { margin-right: auto; margin-left: 8cqw; }
.wb-b-vlek { position: absolute; border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%; }
.wb-b-vlek.een { top: -12cqw; right: -14cqw; width: 66cqw; height: 66cqw; }
.wb-b-vlek.twee { bottom: 22cqw; left: -12cqw; width: 40cqw; height: 40cqw; border-radius: 50%; }
.wb-b-foto { position: absolute; top: 12cqw; left: 10cqw; width: 58cqw; height: 58cqw; border-radius: 50%; }
.wb-b-naam { position: absolute; left: 8cqw; right: 8cqw; top: 78cqw; font-size: var(--fs, 12cqw); line-height: .95; overflow-wrap: break-word; }
.wb-b-knop { position: absolute; left: 8cqw; bottom: 7cqw; padding: 2.8cqw 5.4cqw; border-radius: 99px; font-size: 3.8cqw; font-weight: 600; }

.bord-kleur { aspect-ratio: 4 / 5; display: flex; flex-direction: column; }
.k-groot { flex: 6; display: flex; align-items: flex-end; padding: 7cqw; }
.k-groot span { font-family: var(--kop); line-height: 1; letter-spacing: -.045em; }
.k-midden { flex: 2.6; display: flex; align-items: center; padding: 0 7cqw; }
.k-midden span { font-size: 3.6cqw; letter-spacing: .06em; text-transform: uppercase; }
.k-klein { flex: 1.4; display: flex; } .k-klein i { flex: 1; }
.bord-letter { aspect-ratio: 4 / 5; background: #FAFAF9; box-shadow: inset 0 0 0 1px var(--lijn); padding: 8%; display: flex; flex-direction: column; justify-content: space-between; }
.l-aa { font-size: 44cqw; line-height: .9; margin-top: -2cqw; }
.l-naam { line-height: 1.02; margin: 0 0 4cqw; overflow-wrap: break-word; }
.l-tekst { font-size: 4.6cqw; line-height: 1.5; color: #46433F; margin: 0; }
.l-bij { margin-top: 5cqw; display: flex; justify-content: space-between; gap: 4cqw; font-size: 3cqw; color: var(--grijs); padding-top: 4cqw; border-top: 1px solid var(--lijn); }
.bord-beeld { aspect-ratio: 4 / 5; background-size: cover; background-position: center top; }
.bord-logo { aspect-ratio: 1; background: var(--vlak); display: grid; place-items: center; padding: 8%; color: #141414; }
.lg { text-align: center; max-width: 100%; overflow-wrap: break-word; }
.lg svg { max-width: 100%; height: auto; }
.lg-rij { display: flex; align-items: center; gap: 4cqw; text-align: left; }
.lg-mono, .lg-stapel { display: flex; flex-direction: column; align-items: center; gap: 4cqw; }
.bord-vorm { aspect-ratio: 1; }
.bord-vorm svg { display: block; width: 100%; height: 100%; }
.bord-toon { aspect-ratio: 1; background: var(--vlak); padding: 9%; display: flex; flex-direction: column; justify-content: space-between; }
.bord-toon q { font: 500 9.5cqw/1.08 var(--kop); quotes: '«' '»'; letter-spacing: -.045em; }
.bord-toon span { font-size: 3.6cqw; color: var(--grijs); }

.bord-comp { aspect-ratio: 4 / 5; background: #fff; box-shadow: inset 0 0 0 1px var(--lijn); }
.c { position: absolute; inset: 7cqw; }
.c b { font-family: 'Fraunces', serif; font-weight: 600; color: #141414; line-height: 1; }
.c i { position: absolute; display: block; background-size: cover; background-position: center; }
.c-rust b { position: absolute; left: 0; top: 34%; font-size: 7cqw; } .c-rust i { left: 0; top: 46%; width: 30%; height: 1.5px; }
.c-raster { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 26%; gap: 3cqw; } .c-raster i { position: static; } .c-raster b { grid-column: 1 / -1; font-size: 9cqw; align-self: end; }
.c-asym .x1 { left: 0; top: 0; width: 58%; height: 48%; } .c-asym b { position: absolute; right: 0; top: 52%; width: 60%; font-size: 9cqw; text-align: right; } .c-asym .x2 { left: 12%; bottom: 0; width: 22%; height: 22%; } .c-asym u { position: absolute; right: 0; bottom: 6%; width: 40%; height: 1.5px; background: #141414; }
.c-beeld { inset: 0; background-size: cover; background-position: center; } .c-beeld b { position: absolute; left: 7cqw; bottom: 7cqw; font-size: 11cqw; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
.c-type b { position: absolute; inset: 0; line-height: .86; letter-spacing: -.05em; overflow-wrap: anywhere; }
.c-collage .x1 { left: 0; top: 4%; width: 62%; height: 52%; transform: rotate(-3deg); } .c-collage .x2 { right: 2%; top: 0; width: 34%; height: 30%; border-radius: 50%; } .c-collage .x3 { right: 0; bottom: 14%; width: 52%; height: 40%; transform: rotate(4deg); } .c-collage b { position: absolute; left: 0; bottom: 0; font-size: 12cqw; background: #fff; padding: 1cqw 2cqw; }
.c-klassiek { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; text-align: center; } .c-klassiek b { font-size: 10cqw; font-weight: 400; } .c-klassiek i { position: static; width: 70%; height: 38%; } .c-klassiek small { font-size: 3.2cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--grijs); }
.c-blokken { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr auto; gap: 2.5cqw; } .c-blokken i { position: static; } .c-blokken i:first-child { grid-row: span 2; } .c-blokken b { grid-column: 1 / -1; font-size: 9cqw; }

/* ── smal ── */
@media (max-width: 1000px) {
  .personen { grid-template-columns: repeat(2, 1fr); }
  .muur { columns: 2; }
  .detail-inhoud { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .brief-drie { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .kop { grid-template-columns: 1fr auto; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; } .nav button { flex: 1; padding: 8px 6px; }
  .merk-door { display: none; }
  .meter { padding: 6px 8px; font-size: 14px; }
  .tabs { top: 112px; }
  .werelden { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 calc(var(--rand) * -1); padding: 4px var(--rand) 8px; scrollbar-width: none; }
  .werelden::-webkit-scrollbar { display: none; }
  .werelden .kaart { flex: 0 0 80%; scroll-snap-align: center; }
  .duel { grid-template-columns: 1fr 1fr; } .duel-of { display: none; }
  .raster { grid-template-columns: 1fr 1fr; gap: 14px; }
  .kaart-onder span { font-size: 14px; }
  .personen { grid-template-columns: 1fr; } .persoon { min-height: 0; padding: 18px; } .persoon b { font-size: 26px; }
  .kleurkeuze { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .dok { bottom: 12px; gap: 10px; padding: 8px 10px 8px 14px; } .dok-label, .dok-woorden { display: none; } .dok-aa { max-width: 150px; font-size: 19px; }
  .brief-twee, .brief-drie, .brief-fotos { grid-template-columns: 1fr; }
  .kschuif { grid-template-columns: 82px 1fr 82px; font-size: 13px; gap: 10px; }
  .optie { padding: 14px 18px; font-size: 16px; }
}
@media (max-width: 480px) {
  .muur { columns: 1; }
  .muur-kleur, .muur-letter, .muur-logo, .muur-vorm, .muur-beeld, .muur-toon, .muur-comp { columns: 2; column-gap: 12px; }
  .muur-kleur .tegel-onder, .muur-letter .tegel-onder, .muur-logo .tegel-onder, .muur-vorm .tegel-onder, .muur-beeld .tegel-onder, .muur-toon .tegel-onder, .muur-comp .tegel-onder { flex-direction: column; }
  .rond { width: 36px; height: 36px; }
}

.stap-kop.compact { margin-bottom: clamp(20px, 2.6vw, 32px); }
.stap-kop.compact .stap-titel { font-size: clamp(32px, 3.8vw, 54px); max-width: 26ch; }
.stap-kop.compact .stap-hulp { margin-top: 10px; font-size: 16px; }
.wb-g-sub { position: absolute; left: 6cqw; right: 40cqw; top: 33cqw; font-size: 3.6cqw; line-height: 1.35; opacity: .75; }
@media (min-width: 761px) { .werelden { max-width: min(100%, calc((100dvh - 330px) * 0.8 * 3 + 64px)); } .raster { max-width: min(100%, calc((100dvh - 330px) * 0.8 * 4 + 84px)); } .duel { max-width: min(1080px, calc((100dvh - 330px) * 0.8 * 2 + 120px)); } }

/* ── welkom ── */
.welkom-kop { position: relative; }
.welkom-titel { font: 500 clamp(52px, 9.4vw, 150px)/.94 var(--kop); letter-spacing: -.045em; margin: 0; max-width: none; }
.welkom-strook { width: 100vw; margin: clamp(-34px, -2.4vw, -14px) 0 0 calc(50% - 50vw); overflow: hidden; position: relative; z-index: -1; padding: 0; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.welkom-rij { display: flex; gap: 20px; width: max-content; animation: rol 90s linear infinite; padding-top: 48px; }
.welkom-strook:hover .welkom-rij { animation-play-state: paused; }
.welkom-bord { width: clamp(170px, 16vw, 250px); flex: none; }
.welkom-bord .bord-onder { display: none; }
@keyframes rol { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .welkom-rij { animation: none; } }
.welkom-vraag { max-width: 720px; margin-top: clamp(32px, 4vw, 56px); }
.welkom-zin { font-size: clamp(17px, 1.6vw, 20px); color: var(--grijs); margin: 0 0 32px; }
.welkom-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }

.oordeel { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--lijn); max-width: 720px; }
.oordeel h3 { font: 500 clamp(28px, 3vw, 40px)/1.1 var(--kop); margin: 0 0 18px; letter-spacing: -.045em; }
.oordeel-cijfers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.oordeel-cijfers .optie { width: 56px; padding: 14px 0; text-align: center; }
.oordeel-cijfers .optie[aria-checked="true"] { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.oordeel-uitleg { font-size: 14px; color: var(--grijs); margin-left: 6px; }
.oordeel-dank { margin-top: 28px; font: 500 26px/1.2 var(--kop); letter-spacing: -.045em; }

/* ── lagen-wereld ── */
.wb-lagen > * { position: absolute; }
.wb-la-a { left: 6cqw; top: 8cqw; width: 60cqw; height: 66cqw; background-size: cover; background-position: center; transform: rotate(-4deg); box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.4); }
.wb-la-blok { right: 8cqw; top: 14cqw; width: 30cqw; height: 30cqw; transform: rotate(6deg); }
.wb-la-b { right: 6cqw; top: 44cqw; width: 46cqw; height: 50cqw; background-size: cover; background-position: center; transform: rotate(5deg); filter: grayscale(1) contrast(1.2); box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.4); }
.wb-la-tape { width: 22cqw; height: 5.5cqw; opacity: .78; }
.wb-la-tape.een { left: 4cqw; top: 6cqw; transform: rotate(-32deg); }
.wb-la-tape.twee { right: 14cqw; top: 41cqw; transform: rotate(14deg); }
.wb-la-stempel { left: 9cqw; top: 80cqw; padding: 2cqw 3cqw; border: .6cqw solid; border-radius: 50%; font-size: 2.8cqw; text-transform: uppercase; letter-spacing: .1em; transform: rotate(-10deg); max-width: 40cqw; text-align: center; }
.wb-la-naam { left: 6cqw; right: 6cqw; bottom: 6cqw; padding: 2.4cqw 3cqw; font-size: var(--fs, 12cqw); line-height: .92; text-transform: uppercase; overflow-wrap: break-word; transform: rotate(-1.5deg); }
/* ── textuur over het bord ── */
.tex { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.tex-korrel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .7; }
.tex-papier { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: .5; }
.tex-kopie { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: .35; }
/* ── beweging in werelden ── */
.mot-zoom .wb-e-foto, .mot-zoom .wb-b-foto { animation: zoom 9s ease-in-out infinite alternate; }
@keyframes zoom { to { background-size: 118%; background-position: 40% 45%; } }
.mot-zoom .wb-e-foto { background-size: 104%; }
.mot-kinetisch .wb-p-naam { animation: rek 3.2s cubic-bezier(.7,0,.3,1) infinite alternate; transform-origin: left; }
@keyframes rek { 0% { transform: scaleX(1); letter-spacing: -.02em; } 100% { transform: scaleX(.86); letter-spacing: .04em; } }
.mot-vloei .wb-b-vlek { animation: vloei 7s ease-in-out infinite alternate; }
@keyframes vloei { 0% { border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%; } 50% { border-radius: 40% 60% 35% 65% / 60% 40% 60% 40%; transform: translate(-2cqw, 2cqw) rotate(12deg); } 100% { border-radius: 65% 35% 50% 50% / 38% 62% 38% 62%; transform: translate(2cqw, -1cqw) rotate(-8deg); } }
/* ── bewegingsborden ── */
.bord-beweging { aspect-ratio: 1; background: #141414; color: #fff; display: grid; place-items: center; font-family: 'Unbounded', sans-serif; font-weight: 700; }
.bord-beweging > * { grid-area: 1 / 1; }
.bw-naam { position: relative; z-index: 2; text-align: center; line-height: 1; padding: 0 8%; overflow-wrap: break-word; letter-spacing: -.035em; }
.bw-lijn { align-self: end; margin-bottom: 30%; width: 40%; height: 2px; background: #FF4D00; justify-self: center; }
.bwb-stil { background: #F5F4F2; color: #141414; }
.bwb-rustig { background: #F1EEE8; color: #141414; font-family: 'Fraunces', serif; font-weight: 500; }
.bw-fade { animation: fade 4s ease-in-out infinite; }
@keyframes fade { 0%, 100% { opacity: .15; transform: translateY(2cqw); } 40%, 70% { opacity: 1; transform: none; } }
.bw-lijn.groei { animation: groei 4s ease-in-out infinite; transform-origin: left; }
@keyframes groei { 0%, 100% { transform: scaleX(0); } 50%, 80% { transform: scaleX(1); } }
.bwb-vloeiend { background: #F4EFF7; color: #1F1B24; font-family: 'Fraunces', serif; font-weight: 600; }
.bw-blob { width: 62%; height: 62%; border-radius: 50%; animation: vloei 6s ease-in-out infinite alternate; }
.bw-blob.een { background: #C9B6E4; transform: translate(-12%, -8%); }
.bw-blob.twee { background: #F6C9B4; width: 46%; height: 46%; animation-duration: 8s; animation-direction: alternate-reverse; justify-self: end; align-self: end; margin: 0 10% 12% 0; mix-blend-mode: multiply; }
.bwb-kinetisch { background: #F2F2F2; color: #0B0B0B; overflow: hidden; }
.bw-kin { width: 100%; display: grid; gap: 1cqw; text-transform: uppercase; font-size: 13cqw; line-height: .95; white-space: nowrap; }
.bw-kin-rij { animation: kin 6s linear infinite; }
.bw-kin-rij:nth-child(2) { color: #FF4D00; }
.bw-kin-rij.terug { animation-direction: reverse; }
@keyframes kin { to { transform: translateX(-50%); } }
.bwb-ritmisch { background: #E9EBEE; color: #111418; }
.bw-raster { width: 64%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4%; align-self: start; margin-top: 10%; }
.bw-raster i { background: #111418; animation: tik 2.4s steps(1) infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes tik { 0% { background: #111418; } 50% { background: #FF6A13; } }
.bw-naam.klein { align-self: end; margin-bottom: 9%; }
.bwb-speels { background: #FFF5E8; color: #FF4F79; font-family: 'Bagel Fat One', 'Unbounded', sans-serif; font-weight: 400; }
.bw-woord { display: inline-block; white-space: nowrap; }
.bw-spring .bw-woord span { display: inline-block; animation: spring 1.4s cubic-bezier(.3,1.6,.5,1) infinite; animation-delay: calc(var(--i) * .07s); }
.bw-spring .bw-woord span:nth-child(3n+1) { color: #3A86FF; } .bw-spring .bw-woord span:nth-child(3n+2) { color: #FFB000; }
@keyframes spring { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5cqw) rotate(-6deg); } }
.bw-glitch { color: #fff; }
.bw-glitch::before, .bw-glitch::after { content: attr(data-t); position: absolute; inset: 0; padding: 0 8%; }
.bw-glitch::before { color: #00F0FF; animation: gl1 2.2s steps(2) infinite; mix-blend-mode: screen; }
.bw-glitch::after { color: #FF2A6D; animation: gl2 1.8s steps(2) infinite; mix-blend-mode: screen; }
@keyframes gl1 { 0%, 80%, 100% { transform: none; clip-path: inset(0 0 0 0); } 85% { transform: translate(-2cqw, 1cqw); clip-path: inset(20% 0 50% 0); } 92% { transform: translate(1.5cqw, -1cqw); clip-path: inset(60% 0 10% 0); } }
@keyframes gl2 { 0%, 75%, 100% { transform: none; clip-path: inset(0 0 0 0); } 80% { transform: translate(2cqw, -1cqw); clip-path: inset(40% 0 30% 0); } 90% { transform: translate(-1cqw, 1cqw); clip-path: inset(5% 0 75% 0); } }
.bwb-lagen { background: #EDE7DD; color: #1A1A1A; font-family: 'Archivo Black', 'Unbounded', sans-serif; font-weight: 400; overflow: hidden; }
.bw-laag { width: 70%; height: 40%; }
.bw-laag.een { background: #3A5BD9; justify-self: start; align-self: start; margin: 10% 0 0 -10%; animation: drijf 7s ease-in-out infinite alternate; }
.bw-laag.twee { background: #E2462B; width: 50%; height: 50%; border-radius: 50%; justify-self: end; align-self: end; margin: 0 -8% -8% 0; animation: drijf 5s ease-in-out infinite alternate-reverse; mix-blend-mode: multiply; }
.bw-laag.drie { background: #F4C542; width: 36%; height: 18%; animation: drijf 3.5s ease-in-out infinite alternate; transform: rotate(-8deg); opacity: .9; }
@keyframes drijf { to { transform: translate(8%, 6%) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .bord-beweging *, .bord-beweging *::before, .bord-beweging *::after, .bord-wereld * { animation-duration: 0s !important; animation-iteration-count: 1 !important; } }

/* ══ v3: echte referenties ══ */
.keuze { position: relative; min-width: 0; }
.bekijk { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); font-size: 17px; display: grid; place-items: center; z-index: 2; transition: transform .2s var(--zacht); }
.bekijk:hover { transform: scale(1.08); }
.ref-beeld { display: block; position: relative; border-radius: var(--r); overflow: hidden; background: var(--vlak); aspect-ratio: 16 / 10; transition: box-shadow .35s var(--zacht); }
.ref-beeld img, .ref-beeld .film img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--vlak); }
.galerij-film .film-video video { object-fit: contain; background: #111; }
.ref-hoog { aspect-ratio: 4 / 5; }
.ref-kop { aspect-ratio: 16 / 10; background: #fff; box-shadow: inset 0 0 0 1px var(--lijn); }
.ref-kop img { object-fit: contain; object-position: center; padding: 6%; }
.ref-pagina { aspect-ratio: 3 / 4; }
.ref-textuur img { transform: scale(1.9); transform-origin: 35% 40%; }
.film { display: block; position: relative; width: 100%; height: 100%; }
.film img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.kaart:hover .ref-beeld, .kaart:hover .mozaiek { box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .28); }
.kaart.gekozen .ref-beeld, .kaart[aria-pressed="true"] .ref-beeld, .kaart.gekozen .mozaiek { outline: 3px solid var(--accent); outline-offset: 4px; }
.mozaiek { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--vlak); transition: box-shadow .35s var(--zacht); }
.mozaiek img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.palet { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.palet i { flex: 1; } .palet i:first-child { flex: 2; }
.palet-groot { height: 22px; }
.kaart .palet { margin-top: 10px; }
.label-beweegt { position: absolute; left: 10px; bottom: 10px; background: rgba(20, 20, 20, .72); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; letter-spacing: .02em; }

/* muur */
.muur .tegel-open img { display: block; width: 100%; height: auto; border-radius: var(--r); background: var(--vlak); }
.tegel-open { position: relative; }
.tegel-tekst { text-align: left; min-width: 0; }
.tegel-tekst b { display: block; font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.tegel-tekst span { display: block; color: var(--grijs); font-size: 14px; }
.tegel.is-mooi .tegel-open img, .stroming.is-mooi .mozaiek { outline: 3px solid var(--accent); outline-offset: 3px; }
.teller { margin-top: 4px; font-weight: 500; color: var(--inkt) !important; }
.stromingen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.stroming-open { display: block; width: 100%; border-radius: var(--r); }
.stroming-open:hover .mozaiek { box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .28); }
.zoekbalk { display: grid; gap: 14px; margin-bottom: 10px; }
.zoek { position: relative; display: block; max-width: 560px; }
.zoek input { width: 100%; font: inherit; font-size: 17px; padding: 14px 18px 14px 46px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--wit); }
.zoek input:focus { outline: none; border-color: var(--inkt); }
.zoek-icoon { position: absolute; left: 18px; top: 50%; transform: translateY(-52%); font-size: 20px; color: var(--grijs); }
.facetknoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.facetknop { padding: 9px 16px; border: 1px solid var(--lijn); border-radius: 999px; font-weight: 500; font-size: 15px; transition: border-color .2s; }
.facetknop:hover, .facetknop[aria-expanded="true"] { border-color: var(--inkt); }
.facetknop.aan { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.facetknop span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; margin-left: 4px; }
.paneel { border: 1px solid var(--lijn); border-radius: 18px; padding: 18px 20px 20px; margin: 6px 0 4px; background: var(--wit); box-shadow: 0 18px 40px -24px rgba(20, 20, 20, .25); }
.paneel-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.paneel-kop .knop-stil { padding: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--vlak); font-size: 14px; font-weight: 500; transition: background .2s; }
.chip span { color: var(--grijs); font-weight: 400; }
.chip:hover { background: var(--lijn); }
.chip.aan { background: var(--inkt); color: #fff; } .chip.aan span { color: #BDB9B3; }
.chip-kleur { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.kf-monochroom { background: linear-gradient(90deg, #111 50%, #fff 50%); } .kf-warm-neutraal { background: #E8DCC6; } .kf-koel-neutraal { background: #C9CDD2; }
.kf-aardetinten { background: #A0623A; } .kf-pastel { background: #F3C9D3; } .kf-fel { background: linear-gradient(90deg, #E8302A 33%, #F7D417 33% 66%, #1F4FD8 66%); }
.kf-neon { background: #C6F432; } .kf-donker { background: #1B1B22; } .kf-juweel { background: #4B1F5E; } .kf-groen { background: #3D7A4E; }
.kf-verloop { background: linear-gradient(90deg, #FF7A59, #8E6BFF); } .kf-rood-accent { background: #D9481F; } .kf-blauw { background: #2453C9; }
.filterregel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 26px; }
.aantal { margin: 0 8px 0 0; color: var(--grijs); font-size: 15px; }
.wis { padding: 6px 4px; font-size: 14px; }
.meer { text-align: center; padding: 20px 0; }
.leeg { color: var(--grijs); font-size: 17px; margin: 40px 0 0; max-width: 52ch; }
.sectie { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--grijs); margin: 32px 0 16px; }
.facet-lijst { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.facet-lijst li { display: flex; align-items: center; gap: 12px; }
.facet-rij { flex: 1; display: flex; gap: 14px; align-items: center; text-align: left; padding: 8px; border-radius: 14px; border: 1px solid var(--lijn); }
.facet-rij:hover { border-color: var(--inkt); }
.facet-rij img { width: 96px; height: 60px; object-fit: cover; object-position: top; border-radius: 8px; flex: none; }
.facet-rij b { display: block; } .facet-rij span span { color: var(--grijs); font-size: 14px; }

/* detail */
.detail { width: min(1280px, calc(100% - 32px)); }
.detail-inhoud { grid-template-columns: 1.35fr 1fr; }
.detail-galerij { position: sticky; top: 0; display: grid; gap: 12px; }
.galerij-groot { border-radius: var(--r); overflow: hidden; background: var(--vlak); }
.galerij-beeld img { display: block; width: 100%; height: auto; }
.galerij-beeld.lang { max-height: calc(100dvh - 220px); overflow-y: auto; overscroll-behavior: contain; }
.galerij-beeld.mobiel { display: grid; place-items: center; padding: 20px 0; } .galerij-beeld.mobiel img { width: min(320px, 70%); border-radius: 20px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .3); }
.galerij-film .film { aspect-ratio: 16 / 10; } .galerij-film p { font-size: 13px; color: var(--grijs); margin: 8px 12px 10px; }
.galerij-duimen { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.duim { flex: none; width: 112px; text-align: left; font-size: 12px; color: var(--grijs); }
.duim img { width: 112px; height: 70px; object-fit: cover; object-position: top; border-radius: 8px; display: block; margin-bottom: 4px; border: 2px solid transparent; }
.duim[aria-selected="true"] { color: var(--inkt); font-weight: 600; } .duim[aria-selected="true"] img { border-color: var(--inkt); }
.detail-wie { font-size: 15px !important; color: var(--grijs); margin: -6px 0 14px; }
.detail-zin { font-size: 19px !important; color: var(--inkt) !important; line-height: 1.45; }
.facet-uitleg { font-size: 14px !important; margin: 26px 0 4px; }
.facet { border-top: 1px solid var(--lijn); padding: 14px 0; }
.facet-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.facet-kop h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); font-weight: 600; }
.oordeel-knoppen { display: flex; gap: 6px; } .oordeel-knoppen.klein .rond { width: 34px; height: 34px; font-size: 13px; }
.facet-waarden { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 !important; }
.label { padding: 5px 11px; border-radius: 999px; background: var(--vlak); font-size: 14px; font-weight: 500; color: var(--inkt); }
.label:hover { background: var(--lijn); }
.facet-tekst { font-size: 15px !important; margin: 10px 0 0 !important; }
.facet-tekst b { color: var(--inkt); font-weight: 600; }
.hexen { font-size: 13px !important; margin: 8px 0 0 !important; }
.bron { margin: 24px 0 8px; padding: 18px; background: var(--vlak); border-radius: 14px; }
.bron p { font-size: 14px !important; margin: 10px 0 0; }
.knop-licht { display: inline-block; text-decoration: none; padding: 12px 22px; }
.verwant-kop { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); margin: 26px 0 10px; }
.verwant { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.verwant button { text-align: left; font-size: 13px; color: var(--grijs); }
.verwant img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; display: block; margin-bottom: 4px; }

/* moodboard */
.mood { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 22px); margin-top: 20px; }
.mood-stuk { text-align: left; font-size: 14px; color: var(--grijs); }
.mood-stuk img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 12px; display: block; margin-bottom: 8px; background: var(--vlak); transition: transform .3s var(--zacht); }
.mood-stuk:hover img { transform: translateY(-3px); }
.mood-stuk b { color: var(--inkt); font-weight: 600; } .mood-stuk em { color: var(--accent); font-style: normal; font-weight: 600; }
.brief-twee .mood { grid-template-columns: 1fr 1fr; margin-top: 0; }
.brief-palet { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.brief-palet div { display: grid; gap: 4px; font-size: 13px; color: var(--grijs); }
.brief-palet i { display: block; aspect-ratio: 1; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.brief-palet code { color: var(--inkt); font-size: 13px; }
.brief-stroming { text-align: left; display: grid; gap: 8px; }
.brief-stroming .mozaiek { aspect-ratio: 16 / 10; }
.brief-stroming b { font: 500 30px/1.05 var(--kop); margin-top: 8px; letter-spacing: -.045em; }
.brief-stroming span { color: var(--grijs); }
.bronnen { columns: 2; padding-left: 18px; font-size: 15px; color: var(--grijs); }
.bronnen li { margin-bottom: 6px; break-inside: avoid; } .bronnen a { color: var(--inkt); }
.welkom-bord img { display: block; width: 100%; height: auto; border-radius: 12px; }

@media (max-width: 1000px) {
  .detail-galerij { position: static; }
  .stromingen { grid-template-columns: 1fr 1fr; }
  .mood { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .werelden .keuze { flex: 0 0 80%; scroll-snap-align: center; }
  .werelden .kaart { flex: none; }
  .brief-palet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bronnen { columns: 1; }
  .facetknoppen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand); }
  .facetknoppen::-webkit-scrollbar { display: none; }
  .facetknop { flex: none; }
  .bekijk { width: 34px; height: 34px; top: 8px; left: 8px; }
  .detail { width: 100%; max-height: 100dvh; border-radius: 0; margin: 0; height: 100dvh; max-width: 100%; }
}
@media (max-width: 480px) {
  .muur { columns: 2; column-gap: 12px; }
  .muur .tegel-onder { flex-direction: column; gap: 8px; }
  .muur .tegel-tekst b { font-size: 14px; } .muur .tegel-tekst span { font-size: 13px; }
  .tegel { margin-bottom: 22px; }
  .stromingen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ref-textuur img { transform: scale(1.6); } }
@media (max-width: 1000px) { .detail-inhoud { grid-template-columns: 1fr; padding: 24px; gap: 24px; } }
@media (max-width: 760px) { .detail-inhoud { padding: 64px 16px 32px; } }
.klaar-strook i, .dok-kleuren i, .brief-palet i { box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .1); }
.palet { box-shadow: none; outline: 1px solid rgba(20, 20, 20, .1); outline-offset: -1px; }
.mozaiek { grid-template-rows: 1fr 1fr; }
.mozaiek img { min-height: 0; }
/* JLDK: klikdoelen ≥ 44 px, één dominante knop per scherm */
.rond, .oordeel-knoppen.klein .rond { width: 44px; height: 44px; }
.bekijk { width: 44px; height: 44px; }
.chip, .facetknop, .label { min-height: 44px; }
.tekstknop { min-height: 44px; padding: 0 4px; margin-left: -4px; }
.knop-stil { min-height: 44px; }
.knop-licht { background: var(--wit); color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--inkt); }
.knop-licht:hover:not(:disabled) { background: var(--vlak); }
.paneel-kop .knop-stil { padding: 4px 8px; }
@media (max-width: 760px) { .bekijk { width: 44px; height: 44px; top: 8px; left: 8px; } }
@media (max-width: 480px) { .rond { width: 44px; height: 44px; } }
:root { --accent-tekst: #B83A15; }
.klaar-kicker, .mood-stuk em, .brief-actie h2 { color: var(--accent-tekst); }
.nav button { min-height: 44px; }
.meter { min-height: 44px; }
.merk { min-height: 44px; align-items: center; }
.sluit { width: 44px; height: 44px; }
.label { min-width: 44px; justify-content: center; display: inline-flex; align-items: center; }
.bronnen a { display: inline-block; padding: 12px 0; }
.bronnen li { margin-bottom: 0; }

/* ── v4 (10-11): «al bekend», stand van de merkkit, de kit zelf, beweging ── */
:root { --veer: cubic-bezier(.34, 1.4, .64, 1); }
::view-transition-old(root) { animation: .22s var(--zacht) both vt-uit; }
::view-transition-new(root) { animation: .38s var(--zacht) both vt-in; }
@keyframes vt-uit { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.optie, .persoon, .kaart { transition: transform .32s var(--veer), border-color .2s, background .2s, color .2s; }
.optie:active, .persoon:active { transform: scale(.97); }
.kaart.gekozen { transform: scale(.985); }

.bekend-lijst { list-style: none; margin: 0; padding: 0; max-width: 760px; display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.bekend-lijst li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.bekend-lijst span { color: var(--grijs); font-size: 15px; }
.bekend-lijst b { font: 500 clamp(22px, 2.2vw, 28px)/1.2 var(--kop); overflow-wrap: anywhere; letter-spacing: -.045em; }
.opties-rest { margin-top: 12px; }
.optie-meer { color: var(--grijs); border-style: dashed; }
.uit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 12px; font-size: 14px; color: var(--grijs); }
.lade-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }

.stand { margin-top: 28px; padding: 28px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--wit); }
.stand-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stand-stappen li { display: grid; gap: 10px; font-size: 15px; font-weight: 500; color: var(--grijs); }
.stand-stappen i { display: block; height: 4px; border-radius: 4px; background: var(--lijn); position: relative; overflow: hidden; }
.stand-stappen li.af i { background: var(--inkt); }
.stand-stappen li.nu i { background: var(--lijn); }
.stand-stappen li.nu i::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: stand-vul 2.4s var(--zacht) infinite alternate; }
.stand-stappen li.nu, .stand-stappen li.af { color: var(--inkt); }
@keyframes stand-vul { from { transform: scaleX(.25); } to { transform: scaleX(.9); } }
@media (prefers-reduced-motion: reduce) { .stand-stappen li.nu i::after { animation: none; transform: scaleX(.6); } }
.stand-zin { margin: 18px 0 0; font-size: 17px; max-width: 60ch; }

.kit { max-width: 1120px; }
.kit-kop { margin-bottom: clamp(32px, 5vw, 64px); }
.kit-titel { font: 500 clamp(56px, 9vw, 132px)/.95 var(--kop); letter-spacing: -.035em; margin: 0; }
.kit-idee { font: 500 clamp(26px, 3vw, 40px)/1.15 var(--kop); margin: 18px 0 0; letter-spacing: -.045em; }
.kit-lead { font-size: clamp(17px, 1.6vw, 20px); max-width: 62ch; margin: 18px 0 0; }
.kit-noot, .kit-gevolgd { color: var(--grijs); max-width: 62ch; }
.kit-gevolgd { margin: 0 0 40px; padding-left: 16px; border-left: 3px solid var(--accent); color: var(--inkt); }
.kit-eerlijk { background: var(--vlak); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); margin-bottom: 40px; }
.kit-eerlijk h2 { font: 500 30px/1.1 var(--kop); margin: 0 0 8px; letter-spacing: -.045em; }
.kit-eerlijk p { margin: 0 0 12px; color: var(--grijs); }
.kit-eerlijk ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.kit-blok { padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--lijn); }
.kit-blok h2 { font: 500 clamp(30px, 3vw, 40px)/1.05 var(--kop); margin: 0 0 10px; letter-spacing: -.045em; }
.kit-blokkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.kit-label { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.kit-label.goed { background: var(--vlak); color: var(--inkt); }
.kit-label.nog { background: #FBE9E3; color: #9C3214; }
.kit-uitleg { color: var(--grijs); max-width: 62ch; margin: 0 0 20px; }
.kit-nog { font-size: 15px; color: #9C3214; max-width: 62ch; margin: 16px 0 0; }
.kit-kleuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.kit-kleuren div { display: grid; gap: 2px; font-size: 14px; }
.kit-kleuren i { display: block; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid rgba(20, 20, 20, .08); margin-bottom: 8px; }
.kit-kleuren code { font-size: 13px; color: var(--grijs); }
.kit-kleuren span { color: var(--grijs); }
.kit-letters { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kit-letters li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.kit-letters b { font-size: 20px; font-weight: 600; } .kit-letters span { color: var(--grijs); }
.kit-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; align-items: start; }
.kit-beelden-social, .kit-beelden-beweging { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.kit-stuk { display: block; width: 100%; border-radius: 10px; overflow: hidden; background: var(--vlak); transition: transform .35s var(--zacht), box-shadow .35s var(--zacht); }
.kit-stuk:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .28); }
.kit-stuk img, .kit-stuk video { display: block; width: 100%; height: auto; }
.kit-logo { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 12%; }
.kit-logo img { max-height: 100%; object-fit: contain; }
.kit-groot { border-radius: 14px; overflow: hidden; background: var(--vlak); display: grid; place-items: center; min-height: 240px; }
.kit-groot img, .kit-groot video { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; }
.kit-slot p { color: var(--grijs); max-width: 62ch; }
@media (max-width: 760px) {
  .bekend-lijst li { grid-template-columns: 1fr; }
  .stand { padding: 20px; }
  .stand-stappen li { font-size: 13px; }
  .kit-beelden { gap: 10px; }
  .kit-beelden-social, .kit-beelden-beweging { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kit-kop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.kit-held { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 16px; padding: 14%; transition: transform .4s var(--zacht), box-shadow .4s var(--zacht); }
.kit-held:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(20, 20, 20, .35); }
.kit-held img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
@media (max-width: 860px) { .kit-kop { grid-template-columns: 1fr; } .kit-held { order: -1; aspect-ratio: 16 / 9; padding: 10% 16%; } }
.opties-rest[hidden] { display: none; }
@media (max-width: 760px) { body[data-weergave="vragen"] .dok { display: none; } }

/* 11-11 merken: voor welk merk deze vragenronde is */
.kop-links { display: flex; align-items: center; gap: 14px; min-width: 0; }
.merk-chip { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 260px; height: 34px; align-items: center; padding: 0 14px; border-radius: 99px; background: var(--vlak, #F5F4F2); color: inherit; text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.merk-chip span { color: var(--grijs); }
.merk-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.merk-chip:hover { background: #ECEAE6; }
@media (max-width: 760px) { .merk-door { display: none; } .merk-chip { max-width: 40vw; padding: 0 10px; } .merk-chip span { display: none; } }

/* 11-11 Daan: koppen strak in Geist, geen cursief (zie stroom.css) */
.merk-naam { font-weight: 600; font-size: 26px; letter-spacing: -.05em; }
.brief-kop h1 { font-family: var(--kop); font-weight: 600; letter-spacing: -.055em; }
h1, h2 { font-weight: 600; }
em { font-style: normal; }
.welkom-titel { font-weight: 600; font-size: clamp(46px, 7.4vw, 116px); letter-spacing: -.055em; }
.klaar-titel { font-family: var(--kop); font-weight: 600; letter-spacing: -.055em; }
.stap-titel, .detail-tekst h2 { font-weight: 600; letter-spacing: -.04em; }
.invoer { letter-spacing: -.03em; }