/* Belkaart voor Daan: lijst voorproeven met openingszin. */
@font-face { font-family: "Geist"; src: url("geist-latin-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("bricolage-grotesque-latin-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root { --papier: #f4f3ef; --kaart: #ffffff; --inkt: #18181b; --zacht: #63636b; --lijn: #e2e0da; --accent: #e8572a; --check-bg: #fff4d6; --check: #6b4d00; }
@media (prefers-color-scheme: dark) { :root { --papier: #121214; --kaart: #1b1b1f; --inkt: #ededee; --zacht: #a1a1aa; --lijn: #2c2c32; --check-bg: #3a2e0a; --check: #f5d27a; } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 400 1rem/1.55 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.kop, .lijst, .voet { max-width: 1040px; margin: 0 auto; padding-inline: 16px; }
.kop { padding-top: clamp(2rem, 6vw, 4.5rem); padding-bottom: 2rem; }
.label { margin: 0 0 .6rem; color: var(--accent); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 0; font: 700 clamp(2rem, 5vw, 3.4rem)/1.05 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
.uitleg { max-width: 62ch; color: var(--zacht); margin: 1rem 0 0; }
.lijst { list-style: none; display: grid; gap: 14px; padding-bottom: 2rem; }
.kaart { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding: 14px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; }
.duim { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--lijn); aspect-ratio: 3 / 2; align-self: start; }
.duim img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.duim:hover img { transform: scale(1.03); }
.duim span { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: .78rem; }
.info h2 { margin: 2px 0 2px; font: 650 1.3rem/1.2 "Bricolage Grotesque", sans-serif; }
.meta { margin: 0; color: var(--zacht); font-size: .93rem; }
.meta a { color: inherit; }
.check { margin: .6rem 0 0; padding: .45rem .7rem; border-radius: 8px; background: var(--check-bg); color: var(--check); font-size: .88rem; }
.zin { margin: .8rem 0; padding-left: .9rem; border-left: 3px solid var(--accent); font-size: .97rem; }
.acties { display: flex; flex-wrap: wrap; gap: 10px; }
.acties button, .acties a { min-height: 40px; padding: .45rem 1rem; border-radius: 999px; font: 600 .9rem "Geist", sans-serif; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.acties button { border: 1px solid var(--lijn); background: transparent; color: var(--inkt); }
.acties a { background: var(--inkt); color: var(--papier); border: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.voet { color: var(--zacht); font-size: .88rem; padding-bottom: 3rem; }
@media (max-width: 640px) { .kaart { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .duim img { transition: none; } }