/* Voggels · eigen gezicht (papier, inkt, platen) met de bediening van een app */

@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --papier: #F0EFEA;
  --papier-licht: #F8F7F3;
  --passe: #E6E3DA;
  --inkt: #1F1B16;
  --inkt-zacht: #5A5246;
  --rood: #9A3B26;
  --rood-licht: #F2D9CF;
  --heide: #4D5B3A;
  --arcering: #CFC5B1;
  --nacht: #0E120E;
  --lijn: color-mix(in srgb, var(--inkt) 16%, transparent);
  --schaal-0: #E8DFCC; --schaal-1: #CFCDB0; --schaal-2: #A9AF8A; --schaal-3: #7B8963; --schaal-4: #4D5B3A;
  --kop: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --tekst: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Instrument Sans", system-ui, sans-serif;
  --kolom: 38rem;
  --breed: 100%; /* beeldvullend: geen maximale breedte, alleen een marge aan de zijkant */
  --rand: clamp(1rem, 3.5vw, 3.5rem);
  --snel: 180ms;
  color-scheme: only light; /* altijd licht, ook als het toestel op donker staat */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font: 400 1.0625rem/1.6 var(--tekst); font-optical-sizing: auto;
  min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1; outline: none; }
main:focus, main:focus-visible { outline: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: var(--rood); }
:focus-visible { outline: 2px solid var(--rood); outline-offset: 3px; border-radius: 4px; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--kop); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; margin: 0; font-optical-sizing: auto; }
em, i, .wet { font-style: italic; }
.mono { font-family: var(--mono); font-size: .84rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.zacht { color: var(--inkt-zacht); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kolom { max-width: var(--kolom); margin-inline: auto; padding-inline: var(--rand); }
.breed { max-width: var(--breed); margin-inline: auto; padding-inline: var(--rand); width: 100%; }
.naar-inhoud { position: absolute; left: -999px; }
.naar-inhoud:focus { left: 1rem; top: 1rem; background: var(--papier); padding: .5rem 1rem; z-index: 50; }

/* ---------- Knoppen ---------- */
.knop-pil {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .55rem 1.2rem;
  border-radius: 999px; border: 1.5px solid var(--inkt); background: transparent; cursor: pointer; text-decoration: none;
  font: 500 1rem/1 var(--ui); white-space: nowrap; transition: background var(--snel), color var(--snel), transform var(--snel);
}
.knop-pil svg { width: 22px; height: 22px; flex: none; }
.knop-pil:hover { background: var(--passe); }
.knop-pil:active { transform: scale(.98); }
.knop-donker { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.knop-donker:hover { background: color-mix(in srgb, var(--inkt) 85%, var(--papier)); }
.knop-accent { background: var(--rood); color: #FAF3E8; border-color: var(--rood); }
.knop-accent:hover { background: color-mix(in srgb, var(--rood) 88%, black); }
.knop-licht { background: var(--papier); color: var(--inkt); border-color: var(--papier); }
.knop-icoon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--inkt);
  background: transparent; cursor: pointer; text-decoration: none; font: 400 1.5rem/1 var(--ui); flex: none;
}
.knop-icoon svg { width: 22px; height: 22px; }
.knop-icoon:hover, .knop-icoon[aria-current="page"] { background: var(--passe); }
.knop-tekst { font: 500 .95rem/1 var(--ui); text-decoration: none; padding: .9rem .4rem; display: none; }
@media (min-width: 760px) { .knop-tekst { display: inline-block; } }

/* ---------- Kop ---------- */
/* Mobiel: merk en knoppen op één rij, zoekveld eronder, twee knoppen naast elkaar.
   Desktop: alles op één rij boven het scherm. */
.balk { position: relative; z-index: 30; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "merk nav" "zoek zoek"; gap: .75rem 1rem; align-items: center; padding: max(.85rem, env(safe-area-inset-top)) var(--rand) .9rem; }
.merk { grid-area: merk; display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.merk-icoon { width: 28px; height: 28px; color: var(--inkt); }
.merk-naam { font-family: var(--kop); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.zoek { grid-area: zoek; position: relative; display: grid; gap: .4rem; }
.zoek-rij { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.zoek-pil { grid-column: 1 / -1; position: relative; display: flex; align-items: center; background: var(--papier-licht); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--inkt) 12%, transparent); height: 46px; }
.zoek-pil:focus-within { border-color: var(--inkt); }
.zoek-pil input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 0 0 1.15rem; height: 100%; font: 400 1rem var(--ui); -webkit-appearance: none; appearance: none; }
.zoek-pil input:focus { outline: none; }
.zoek-pil input::placeholder { color: color-mix(in srgb, var(--inkt-zacht) 80%, transparent); }
.zoek-locatie { border: 0; background: none; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; color: var(--inkt); border-radius: 50%; flex: none; }
.zoek-locatie svg { width: 22px; height: 22px; }
.zoek-rij .knop-pil { min-height: 46px; padding: 0 1.1rem; }
.zoek-lijst { list-style: none; margin: 0; padding: .35rem; position: absolute; inset-inline: 0; top: calc(100% + .35rem); background: var(--papier-licht); border-radius: 22px; z-index: 40; box-shadow: 0 24px 40px -20px rgb(0 0 0 / .35); border: 1px solid var(--lijn); }
.zoek-lijst li { padding: .75rem 1rem; cursor: pointer; min-height: 44px; border-radius: 14px; font-family: var(--ui); }
.zoek-lijst li[aria-selected="true"], .zoek-lijst li:hover { background: var(--passe); }
.zoek-lijst .zacht { font-size: .85rem; }
.zoek-melding { font: 400 .9rem/1.4 var(--ui); color: var(--inkt-zacht); margin: 0; }
.zoek-melding:empty { display: none; }
.balk-nav { grid-area: nav; display: flex; align-items: center; gap: .5rem; }
.nav-tekst { display: none; font: 500 .9rem var(--ui); text-decoration: none; padding: .5rem .35rem; white-space: nowrap; }
.nav-knop { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--inkt); text-decoration: none; font: 500 .9rem var(--ui); }
.nav-knop svg { width: 20px; height: 20px; flex: none; }
.nav-knop span { display: none; }
.nav-knop:hover { background: var(--passe); }
@media (min-width: 1000px) {
  .balk { position: absolute; inset: 0 0 auto 0; grid-template-columns: auto minmax(0, 44rem) 1fr; grid-template-areas: "merk zoek nav"; gap: 1.75rem; padding-block: 1.1rem; }
  .zoek-rij { grid-template-columns: minmax(0, 1fr) auto auto; }
  .zoek-pil { grid-column: auto; }
  .balk-nav { justify-self: end; }
  .nav-tekst { display: inline-block; }
  .nav-knop-fos { display: none; }
  .nav-knop { width: auto; height: 34px; padding: 0 .8rem; }
  .nav-knop svg { width: 16px; height: 16px; }
  .nav-knop span { display: inline; }
  .zoek-melding { position: absolute; top: calc(100% + .4rem); left: 1rem; }
  .onder-kop #app { padding-top: var(--balk-h, 5.5rem); }
  .kaartmodus #app { padding-top: 0; }
}

/* ---------- Het scherm ---------- */
/* Mobiel: beeld, dan titel en weetjes, dan de strook met kaartje.
   Desktop: één schermhoogte. Het beeld vult alles, titel linksonder, strook langs de onderrand. */
.scherm { position: relative; }
.podium { position: relative; height: clamp(20rem, 46svh, 26rem); overflow: hidden; }
.podium-paneel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: .5rem var(--rand) 3.6rem; background: var(--papier); }
.podium-paneel[hidden] { display: none; }
.podium-plaat img { width: auto; height: auto; max-width: 100%; max-height: 100%; mix-blend-mode: multiply; transition: transform 500ms cubic-bezier(.2, .7, .1, 1); transform-origin: center; }
.podium-plaat .lege-plaat { height: 100%; width: auto; aspect-ratio: 4 / 5; }
.podium-geluid .spectro-vlak { width: 100%; height: 100%; }
.podium-geluid .spectro-vlak canvas { width: 100%; height: 100%; }
.weergave { position: absolute; left: var(--rand); bottom: .9rem; z-index: 2; display: inline-flex; background: var(--papier-licht); border-radius: 999px; padding: 3px; box-shadow: 0 8px 20px -10px rgb(0 0 0 / .35); border: 1px solid var(--lijn); }
.weergave button { border: 0; background: none; border-radius: 999px; padding: 0 1rem; height: 34px; cursor: pointer; font: 500 .95rem var(--ui); color: var(--inkt-zacht); }
.weergave button[aria-selected="true"] { background: var(--papier); color: var(--inkt); box-shadow: 0 1px 4px rgb(0 0 0 / .14); }
.zoomknoppen { position: absolute; right: var(--rand); bottom: .9rem; z-index: 2; display: flex; gap: .5rem; }
.zoomknoppen[hidden] { display: none; }
.podium-rondom canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.podium-rondom canvas:active { cursor: grabbing; }
.rondom-hint { position: absolute; top: 3.7rem; left: var(--rand); margin: 0; pointer-events: none; font: 500 .82rem var(--ui); color: var(--inkt-zacht); background: color-mix(in srgb, var(--papier-licht) 88%, transparent); border: 1px solid var(--lijn); border-radius: 999px; padding: .3rem .8rem; white-space: nowrap; transition: opacity 400ms; }
.podium-rondom.gedraaid .rondom-hint { opacity: 0; }
.rondom-bron { display: none; position: absolute; margin: 0; font: 400 .74rem/1.4 var(--ui); color: var(--inkt-zacht); text-align: center; }
.rondomknoppen { position: absolute; right: var(--rand); top: .6rem; z-index: 2; display: flex; align-items: center; gap: .5rem; }
.rondomknoppen[hidden] { display: none; }
.rondomknoppen .knop-mini { position: static; transform: none; padding: .55rem .95rem; font-size: .85rem; cursor: pointer; color: var(--inkt); }
.rondomknoppen [aria-pressed="true"] { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.knop-rondje { width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--inkt) 9%, var(--papier)); cursor: pointer; font: 400 1.4rem/1 var(--ui); color: var(--inkt); }
.knop-rondje:hover { background: var(--passe); }
.scherm-titel { padding: 1rem var(--rand) 0; }
.scherm-titel h1 { font-size: clamp(2.2rem, 9vw, 3.3rem); line-height: 1.04; font-weight: 500; }
.scherm-titel h1 em { color: var(--rood); font-style: italic; font-weight: 400; }
.scherm-sub { font-size: 1.12rem; line-height: 1.45; margin: .6rem 0 0; max-width: 32rem; }
.weetjes { display: grid; grid-template-columns: minmax(6.5rem, max-content) 1fr; gap: .3rem 1.2rem; margin: 1.1rem 0 0; font: 400 .88rem/1.4 var(--ui); max-width: 32rem; }
.weetjes dt { color: var(--inkt-zacht); }
.weetjes dd { margin: 0; }
.weetjes a { text-decoration-color: var(--lijn); }
.scherm-strook { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .8rem; align-items: end; padding: 1.4rem var(--rand) 1rem; }
.strook { display: flex; gap: .4rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .4rem 0 .6rem; scrollbar-width: none; }
.strook::-webkit-scrollbar { display: none; }
.strook { position: relative; }
.strook-item { flex: none; width: 64px; display: grid; justify-items: center; gap: .3rem; text-decoration: none; scroll-snap-align: start; opacity: .9; }
.strook-item:hover { opacity: 1; }
.strook-beeld { width: 56px; height: 70px; display: grid; place-items: center; overflow: hidden; background: var(--papier); }
.strook-beeld img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform var(--snel); }
.strook-item:hover .strook-beeld img { transform: translateY(-3px); }
.strook-beeld i { font: italic 1.6rem var(--kop); color: var(--inkt-zacht); }
.strook-naam { font: 400 .68rem/1.15 var(--ui); color: var(--inkt-zacht); text-align: center; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strook-item.actief .strook-beeld { outline: 2px solid var(--rood); outline-offset: 2px; }
.strook-item.actief .strook-naam { color: var(--rood); font-weight: 600; }
.omgeving { position: relative; width: 7.5rem; height: 7.5rem; border-radius: 14px; overflow: hidden; background: var(--papier-licht); border: 1px solid var(--lijn); }
.omgeving svg { width: 100%; height: 100%; display: block; }
.omgeving-label { display: none; }
.knop-mini { position: absolute; left: 50%; bottom: .45rem; transform: translateX(-50%); white-space: nowrap; background: var(--papier-licht); border: 1px solid var(--lijn); border-radius: 999px; padding: .3rem .7rem; font: 500 .75rem var(--ui); text-decoration: none; box-shadow: 0 4px 10px -6px rgb(0 0 0 / .4); }
@media (min-width: 1000px) {
  .scherm { height: 100svh; min-height: 40rem; }
  .podium { position: absolute; inset: 0; height: auto; }
  .podium-paneel { padding: 5.5rem 16rem 11.5rem; }
  .podium-geluid { padding: 6rem var(--rand) 13.5rem calc(var(--rand) + min(32rem, 38vw) + 2rem); }
  .weergave { left: 50%; transform: translateX(-50%); bottom: 10.6rem; }
  .zoomknoppen { bottom: 14.2rem; }
  .podium-plaat .lege-plaat { height: 78%; }
  .podium-plaat.liggend { padding-left: calc(var(--rand) + min(32rem, 38vw) + 2rem); padding-right: calc(var(--rand) + 4.5rem); }
  .rondomknoppen { top: auto; bottom: 14.2rem; }
  .rondom-hint { top: auto; bottom: 8.4rem; left: 50%; transform: translateX(-50%); }
  .rondom-bron { display: block; left: auto; right: var(--rand); top: 6rem; width: 15rem; text-align: right; }
  .scherm-titel { position: absolute; left: 0; bottom: 10rem; z-index: 2; width: min(32rem, 38vw); padding: 0 0 0 var(--rand); pointer-events: none; }
  .scherm-titel a { pointer-events: auto; }
  .scherm-titel h1 { font-size: clamp(2.6rem, 3.6vw, 3.4rem); }
  .scherm-strook { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 var(--rand) 1rem; grid-template-columns: minmax(0, 1fr) 13rem; pointer-events: none; }
  .scherm-strook .strook, .scherm-strook .omgeving { pointer-events: auto; }
  .strook { padding-bottom: .2rem; }
  .omgeving { width: 13rem; height: 13rem; }
  .omgeving-label { display: block; position: absolute; left: .6rem; top: .5rem; margin: 0; font: 500 .72rem var(--ui); background: var(--papier-licht); border-radius: 999px; padding: .15rem .5rem; z-index: 1; }
}

/* ---------- Over dit project ---------- */
.over { display: none; padding: 5rem 0 2rem; border-top: 1px solid var(--lijn); margin-top: 4rem; }
.met-over .over { display: block; }
.over-intro, .over-twee, .over-karrousel-voet { padding-inline: var(--rand); max-width: 74rem; margin-inline: auto; }
.over-intro h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1.2rem; }
.over-intro p { font-size: 1.2rem; line-height: 1.55; max-width: 38rem; margin: 0; }
.over-karrousel-wrap { margin-top: 2.5rem; }
.over-karrousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--rand); scrollbar-width: none; }
.over-karrousel::-webkit-scrollbar { display: none; }
.over-karrousel figure { flex: none; margin: 0; scroll-snap-align: start; }
.over-karrousel img { height: clamp(22rem, 60svh, 36rem); width: auto; mix-blend-mode: multiply; background: var(--papier); }
.over-karrousel figcaption { font: 400 .8rem var(--ui); color: var(--inkt-zacht); margin-top: .5rem; }
.over-karrousel-voet { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; font: 400 .85rem var(--ui); color: var(--inkt-zacht); }
.over-karrousel-voet p { margin: 0; }
.over-pijlen { display: flex; gap: .5rem; flex: none; }
.over-twee { display: grid; gap: 2.5rem; margin-top: 5rem; }
@media (min-width: 900px) { .over-twee { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 4rem; align-items: start; } .over-figuur { position: sticky; top: 2rem; } }
.over-figuur { margin: 0; }
.over-figuur img { mix-blend-mode: multiply; width: 100%; height: auto; }
.over-figuur figcaption { font: 400 .82rem var(--ui); color: var(--inkt-zacht); margin-top: .6rem; }
.over-tekst p { font-size: 1.12rem; line-height: 1.6; margin: 0 0 1.1rem; max-width: 36rem; }

/* ---------- Voet ---------- */
.voet { padding: 3rem var(--rand) 2rem; border-top: 1px solid var(--lijn); margin-top: 3rem; }
.voet-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; max-width: 74rem; margin-inline: auto; }
.voet h3 { font: 600 .82rem var(--ui); margin: 0 0 .5rem; }
.voet p { font: 400 .82rem/1.55 var(--ui); color: var(--inkt-zacht); margin: 0; }
.voet-acties { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: 4rem 0 1rem; }
.voet .voet-merk { font: 500 clamp(4.5rem, 19vw, 16rem)/.9 var(--kop); letter-spacing: -.035em; text-align: center; margin: 1rem 0 5rem; color: var(--inkt); }

/* ---------- Plaat ---------- */
.plaat-rand { background: var(--passe); padding: clamp(10px, 2vw, 16px); outline: 1px solid color-mix(in srgb, var(--inkt) 55%, transparent); outline-offset: -1px; }
.plaat-rand img { mix-blend-mode: multiply; width: 100%; max-height: 72svh; object-fit: contain; }
.onthul { animation: onthul 1100ms cubic-bezier(.2, .7, .1, 1) both; }
@keyframes onthul { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.lege-plaat { aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 1.5rem; background: var(--passe); outline: 1px solid color-mix(in srgb, var(--inkt) 55%, transparent); outline-offset: -1px;
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--inkt) 7%, transparent) 11px 12px); }
.lege-plaat-naam { font-family: var(--kop); font-size: 1.6rem; line-height: 1.1; }
.lege-plaat p { font-size: .88rem; color: var(--inkt-zacht); margin: .8rem 0 0; max-width: 22ch; }

/* ---------- Spectrogram ---------- */
.spectro-vlak { position: relative; background-color: color-mix(in srgb, var(--passe) 55%, var(--papier));
  background-image: repeating-linear-gradient(to top, transparent 0 calc(18.18% - 1px), color-mix(in srgb, var(--inkt) 9%, transparent) calc(18.18% - 1px) 18.18%);
  border-radius: 2px; }
.spectro-vlak canvas { width: 100%; height: clamp(140px, 30vw, 220px); display: block; }
.spectro-groot canvas { height: clamp(220px, 52vw, 380px); }
.spectro-as { position: absolute; left: 8px; top: 6px; bottom: 6px; display: flex; flex-direction: column; justify-content: space-between; font: 500 .66rem var(--ui); letter-spacing: .02em; color: var(--inkt-zacht); pointer-events: none; }
.spectro-hint { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 1.15rem var(--kop); color: var(--inkt-zacht); pointer-events: none; transition: opacity 400ms; }
.speelt-hier .spectro-hint { opacity: 0; }

/* ---------- Ronde afspeelknop ---------- */
.knop-rond { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; padding: 0; cursor: pointer; }
.knop-rond svg { width: 100%; height: 100%; display: block; }
.knop-rond .ring-bg { fill: var(--papier-licht); stroke: var(--inkt); stroke-width: 1.2; }
.knop-rond .ring { fill: none; stroke: var(--rood); stroke-width: 2.4; stroke-dasharray: 125.7; stroke-dashoffset: 125.7; transform: rotate(-90deg); transform-origin: 22px 22px; transition: stroke-dashoffset 250ms linear; }
.knop-rond path { fill: var(--inkt); stroke: var(--inkt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.knop-rond .ico-pauze { fill: none; display: none; }
.knop-rond.speelt .ico-pauze { display: block; }
.knop-rond.speelt .ico-speel { display: none; }
.knop-rond:hover .ring-bg { fill: var(--passe); }
.knop-groot { width: 64px; height: 64px; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .25)); }
.knop-groot .ring-bg { fill: var(--inkt); }
.knop-groot path { fill: var(--papier); stroke: var(--papier); }
.knop-klein { width: 40px; height: 40px; }

/* ---------- Blokken, strip ---------- */
.blok { margin-top: 3.5rem; }
main > .blok:first-child { margin-top: 1.5rem; }
.blok-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: 1.1rem; }
.blok-kop h2 { font-size: clamp(1.8rem, 5.4vw, 2.6rem); }
.blok-acties { margin-top: 1.4rem; }
.index-kop { font-size: clamp(2.2rem, 8vw, 3.8rem); }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 11rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scrollbar-width: thin; }
.strip-item { scroll-snap-align: start; position: relative; display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: start; }
.strip-beeld { grid-column: 1 / -1; aspect-ratio: 4 / 5; background: var(--passe); overflow: hidden; outline: 1px solid color-mix(in srgb, var(--inkt) 40%, transparent); outline-offset: -1px; display: block; }
.strip-beeld img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.strip-beeld .lege-plaat { height: 100%; aspect-ratio: auto; outline: 0; }
.strip-beeld .lege-plaat-naam { font-size: 1.05rem; }
.strip-tekst a { font-family: var(--kop); font-size: 1.15rem; line-height: 1.1; text-decoration: none; display: block; }
.strip-tekst span { font: 400 .75rem var(--mono); color: var(--inkt-zacht); }

.kaart-teaser {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: center; text-decoration: none; color: #EDE6D6;
  background: var(--nacht); border-radius: 28px; padding: 1.6rem; position: relative; overflow: hidden; min-height: 16rem;
}
@media (min-width: 760px) { .kaart-teaser { grid-template-columns: 1fr auto; padding: 2.4rem; } }
.kaart-teaser-stippen { position: absolute; inset: 0; opacity: .9; pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, #F4CE5B 0 2px, transparent 3px), radial-gradient(circle at 22% 62%, #5FA2F5 0 2px, transparent 3px),
    radial-gradient(circle at 36% 24%, #B8D0FF 0 2px, transparent 3px), radial-gradient(circle at 38% 27%, #B8D0FF 0 2px, transparent 3px),
    radial-gradient(circle at 40% 25%, #B8D0FF 0 2px, transparent 3px), radial-gradient(circle at 55% 70%, #FF6B5E 0 2px, transparent 3px),
    radial-gradient(circle at 63% 38%, #F4CE5B 0 2px, transparent 3px), radial-gradient(circle at 74% 80%, #86D98F 0 2px, transparent 3px),
    radial-gradient(circle at 82% 22%, #F5F1E6 0 2px, transparent 3px), radial-gradient(circle at 90% 55%, #F4CE5B 0 2px, transparent 3px),
    radial-gradient(circle at 8% 85%, #E2BE8C 0 2px, transparent 3px), radial-gradient(circle at 47% 90%, #F0B3C6 0 2px, transparent 3px); }
.kaart-teaser-tekst { position: relative; display: grid; gap: .5rem; max-width: 34rem; }
.kaart-teaser-tekst strong { font-family: var(--kop); font-weight: 500; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; }
.kaart-teaser-tekst span { font-family: var(--tekst); }
.kaart-teaser .knop-pil { position: relative; justify-self: start; }

/* ---------- Seizoen, kaart, lagen ---------- */
.seizoen { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: 2rem; padding-bottom: .2rem; }
.seizoen button { border: 1.5px solid var(--inkt); background: transparent; border-radius: 999px; padding: .5rem 1rem; min-height: 44px; cursor: pointer; font: 500 .95rem var(--ui); white-space: nowrap; }
.seizoen button[aria-pressed="true"] { background: var(--inkt); color: var(--papier); }
.kaart-vak { margin-block: 1rem; }
.kaart-vak svg { width: 100%; height: auto; max-height: 62svh; display: block; }
.kaart-legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; }
.kaart-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.kaart-legenda i { width: 14px; height: 14px; display: inline-block; border: 1px solid var(--lijn); }
.vak { stroke: var(--papier); stroke-width: .6; transition: opacity var(--snel); }
.vak.klik { cursor: pointer; }
.vak.klik:hover { opacity: .75; }
.vak-eigen { fill: none; stroke: var(--inkt); stroke-width: 2.4; }
.vak-buur { fill: none; stroke: var(--inkt); stroke-width: .9; stroke-dasharray: 3 2; }
.gemeente { fill: none; stroke: color-mix(in srgb, var(--inkt) 55%, transparent); stroke-width: .7; }
.gemeente-eigen { fill: none; stroke: var(--rood); stroke-width: 1.4; stroke-dasharray: 5 3; }
.twente { fill: none; stroke: var(--inkt); stroke-width: 1.2; }
.punt { fill: var(--rood); stroke: var(--papier); stroke-width: 1.5; }

.laag { border-top: 1px solid var(--inkt); padding-top: 1.2rem; margin-top: 3rem; }
.laag-kop { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: baseline; }
.laag-nr { font-family: var(--kop); font-size: 2.6rem; line-height: .9; color: var(--rood); grid-row: span 2; }
.laag h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
.laag-sub { font-family: var(--mono); font-size: .78rem; color: var(--inkt-zacht); }
.laag-tekst { max-width: var(--kolom); margin: 1rem 0 1.5rem; }
.tussenkop { font: 500 .8rem var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--inkt-zacht); margin-top: 2.2rem; }
.leeg { display: grid; grid-template-columns: 76px 1fr; gap: 1.2rem; align-items: center; max-width: 34rem; margin-block: 1.5rem; }
.leeg-cirkel { width: 76px; height: 76px; border: 1.5px dashed var(--inkt-zacht); border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .75rem; color: var(--inkt-zacht); }
.meldingen { list-style: none; padding: 0; margin: 1rem 0; max-width: 44rem; }
.meldingen li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .4rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.meldingen .mono { color: var(--inkt-zacht); }
@media (max-width: 560px) { .meldingen li { grid-template-columns: 1fr auto; } .meldingen li > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 11.5rem), 1fr)); gap: 2rem 1.2rem; margin-top: 1.5rem; }
.raster + .knop-pil { margin-top: 1.6rem; }
.soort { position: relative; }
.soort-beeld { display: block; aspect-ratio: 4 / 5; background: var(--passe); overflow: hidden; outline: 1px solid color-mix(in srgb, var(--inkt) 45%, transparent); outline-offset: -1px; }
.soort-beeld img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 600ms cubic-bezier(.2, .7, .1, 1); }
.soort:hover .soort-beeld img { transform: scale(1.035); }
.soort-beeld .lege-plaat { aspect-ratio: auto; height: 100%; outline: 0; padding: .8rem; }
.soort-beeld .lege-plaat-naam { font-size: 1.15rem; }
.soort-tekst { display: flex; justify-content: space-between; gap: .5rem; margin-top: .65rem; align-items: start; }
.soort-naam { font-family: var(--kop); font-size: 1.22rem; line-height: 1.1; text-decoration: none; }
.soort .wet { font-size: .82rem; color: var(--inkt-zacht); display: block; margin-top: .15rem; }
.label { display: inline-block; font: 500 .66rem var(--ui); text-transform: uppercase; letter-spacing: .06em; border: 1px solid currentColor; border-radius: 999px; padding: .1rem .45rem; margin-top: .35rem; color: var(--rood); }
.maanden { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-top: .55rem; }
.maanden i { display: block; height: 7px; background: var(--inkt); border-radius: 1px; }
.maanden i.uit { outline: 1px solid var(--lijn); outline-offset: -1px; }
.maanden-letters { display: grid; grid-template-columns: repeat(12, 1fr); font-family: var(--mono); font-size: .6rem; color: var(--inkt-zacht); text-align: center; margin-top: 2px; }
.maanden-letters .aan { color: var(--inkt); font-weight: 500; }
.soort-telling { font-family: var(--mono); font-size: .7rem; color: var(--inkt-zacht); margin-top: .35rem; }
.zeldzaam { columns: 2 14rem; column-gap: 2rem; font-size: .92rem; margin-top: 1rem; padding: 0; list-style: none; }
.zeldzaam li { break-inside: avoid; padding: .15rem 0; }
.zeldzaam .mono { color: var(--inkt-zacht); font-size: .72rem; }

/* ---------- Soortpagina onderdelen ---------- */
.twee { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .twee { grid-template-columns: 1fr 1fr; } }
.kalender h2, .waar h2 { font-size: 1.9rem; }
.kalender p, .waar p { margin: .3rem 0 0; }
.kalender-staven { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 140px; margin-top: 1.2rem; }
.kalender-staven div { background: var(--inkt); min-height: 1px; border-radius: 2px 2px 0 0; }
.kalender-letters { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; font-family: var(--mono); font-size: .7rem; color: var(--inkt-zacht); text-align: center; margin-top: .4rem; }
.waar svg { width: 100%; max-width: 34rem; height: auto; margin-top: 1rem; }

/* ---------- Index ---------- */
.index-filters { display: grid; gap: .9rem; margin-top: 1rem; }
.chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid var(--lijn); background: var(--papier-licht); border-radius: 999px; padding: .45rem .9rem; min-height: 40px; cursor: pointer; font: 500 .9rem var(--ui); white-space: nowrap; }
.chip i { width: 10px; height: 10px; border-radius: 50%; outline: 1px solid rgb(0 0 0 / .25); }
.chip[aria-pressed="true"] { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.index-rij { display: flex; gap: .6rem; flex-wrap: wrap; }
.veld { border: 1.5px solid var(--lijn); background: var(--papier-licht); border-radius: 999px; padding: .65rem 1.1rem; min-height: 46px; font: 400 1rem var(--ui); }
.index-rij input { flex: 1 1 14rem; }

/* ---------- Speler onderaan ---------- */
.speler {
  position: fixed; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(40rem, calc(100% - 1.5rem)); display: grid; grid-template-columns: 48px 1fr auto auto; gap: .8rem; align-items: center;
  background: var(--papier-licht); border: 1px solid var(--lijn); border-radius: 22px; padding: .5rem .6rem; z-index: 60;
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / .45);
}
.speler[hidden] { display: none; }
.speler-plaat { width: 48px; height: 60px; object-fit: cover; mix-blend-mode: multiply; background: var(--passe); border-radius: 8px; }
.speler-midden { min-width: 0; }
.speler-naam { font-family: var(--kop); font-size: 1.1rem; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speler-spectro { width: 100%; height: 30px; display: block; margin-top: 2px; border-radius: 4px; }
.speler-fout .speler-naam { font: 500 .85rem/1.3 var(--ui); white-space: normal; color: var(--rood); }
.speler-sluit { background: none; border: 0; font-size: 1.6rem; line-height: 1; width: 44px; height: 44px; cursor: pointer; color: var(--inkt-zacht); }
.kaartmodus .speler { bottom: auto; top: max(.75rem, env(safe-area-inset-top)); }

/* ---------- Simulatiekaart ---------- */
.kaartmodus .voet, .kaartmodus .over { display: none; }
.kaartmodus .balk { position: relative; background: var(--papier); }
.sim { position: fixed; inset: var(--balk-h, 0px) 0 0 0; background: var(--nacht); overflow: hidden; touch-action: none; color: #EDE6D6; font-family: var(--ui); z-index: 20; }
.sim::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 32%; pointer-events: none; background: linear-gradient(var(--nacht) 30%, transparent); }
.sim-vlak { position: absolute; left: 0; right: 0; height: 0; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.2, .7, .1, 1); }
.sim-doek { position: absolute; left: 0; display: block; }
.sim-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sim-label { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .35rem; transform-origin: 0 0; background: rgb(250 246 238 / .92); color: #1F1B16; font: 500 .82rem/1 var(--ui); padding: .35rem .6rem .35rem .45rem; border-radius: 999px; white-space: nowrap; margin-left: -.45rem; margin-top: -1.3rem; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .6); }
.sim-label i { width: 8px; height: 8px; border-radius: 50%; }
.sim-ui { position: absolute; z-index: 5; }
.sim-boven { top: 1rem; left: var(--rand); right: var(--rand); display: flex; flex-wrap: wrap; gap: .5rem; pointer-events: none; }
.sim-boven > * { pointer-events: auto; }
.sim-chip { display: inline-flex; align-items: center; gap: .45rem; background: rgb(20 24 20 / .82); color: #EDE6D6; border: 1px solid rgb(237 230 214 / .3); border-radius: 999px; padding: .45rem .8rem; font: 500 .85rem var(--ui); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
button.sim-chip { cursor: pointer; min-height: 40px; }
.sim-stip { width: 8px; height: 8px; border-radius: 50%; background: #FF6B5E; box-shadow: 0 0 0 3px rgb(255 107 94 / .25); }
.sim-van { background: #2D4A2E; border-color: #2D4A2E; }
.sim-info { top: 4rem; left: var(--rand); right: var(--rand); max-width: 28rem; background: rgb(250 246 238 / .97); color: #1F1B16; border-radius: 20px; padding: 1rem 1.2rem; font: 400 .95rem/1.5 var(--tekst); box-shadow: 0 20px 40px -18px rgb(0 0 0 / .6); }
.sim-info p { margin: 0 0 .6rem; }
.sim-knoppen { right: var(--rand); bottom: calc(14.5rem + env(safe-area-inset-bottom)); display: grid; gap: .5rem; }
.sim:has(.sim-kaartje:not([hidden])) .sim-knoppen { display: none; }
.sim-knoppen .knop-icoon { background: rgb(232 223 204 / .92); color: #1F1B16; border-color: transparent; }
.sim-paneel { left: 0; right: 0; bottom: 0; padding: 1rem var(--rand) max(1rem, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(14 18 14 / .92) 28%); display: grid; gap: .6rem; }
.sim-tijd { display: flex; align-items: center; gap: .9rem; }
.knop-speel { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #EDE6D6; color: #1F1B16; display: grid; place-items: center; cursor: pointer; flex: none; }
.knop-speel svg { width: 24px; height: 24px; }
.knop-speel path { fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.knop-speel .ico-pauze { display: none; fill: none; }
.knop-speel[aria-pressed="true"] .ico-pauze { display: block; }
.knop-speel[aria-pressed="true"] .ico-speel { display: none; }
.sim-maand { flex: 1; display: grid; gap: .3rem; }
.sim-maandnaam { font-family: var(--kop); font-size: 2rem; line-height: 1; text-transform: capitalize; }
.sim-maand input { width: 100%; accent-color: #FF6B5E; }
.sim-noot { margin: 0; font: 400 .8rem/1.35 var(--ui); color: rgb(237 230 214 / .75); }
.sim-groepen { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.sim-groep { display: inline-flex; align-items: center; gap: .4rem; background: rgb(237 230 214 / .1); color: #EDE6D6; border: 1px solid rgb(237 230 214 / .25); border-radius: 999px; padding: .4rem .75rem; min-height: 38px; cursor: pointer; font: 500 .82rem var(--ui); white-space: nowrap; }
.sim-groep i { width: 9px; height: 9px; border-radius: 50%; }
.sim-groep span { opacity: .65; font-variant-numeric: tabular-nums; }
.sim-groep[aria-pressed="false"] { opacity: .4; }
.sim-groep[aria-pressed="false"] i { background: transparent !important; outline: 1px solid currentColor; }
.sim-kaartje { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 1rem; background: rgb(250 246 238 / .97); color: #1F1B16; border-radius: 22px; padding: .8rem; box-shadow: 0 20px 40px -18px rgb(0 0 0 / .6); }
.sim-kaartje[hidden] { display: none; }
.sim-kaartje-beeld { background: #E8DFCC; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; display: grid; place-items: center; font-family: var(--kop); text-align: center; }
.sim-kaartje-beeld img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.sim-kaartje-naam { font-family: var(--kop); font-size: 1.6rem; line-height: 1; text-decoration: none; display: block; padding-right: 2rem; }
.sim-kaartje .wet { font: italic .85rem var(--tekst); color: #5A5246; }
.sim-kaartje p { margin: .4rem 0 .6rem; font: 400 .9rem/1.4 var(--tekst); }
.sim-kaartje-acties { display: flex; gap: .4rem; flex-wrap: wrap; }
.sim-kaartje .knop-pil { min-height: 40px; padding: .45rem .9rem; font-size: .9rem; border-color: #1F1B16; color: #1F1B16; }
.sim-kaartje .knop-donker { color: #F3EDE1; background: #1F1B16; }
.sim-kaartje-sluit { position: absolute; top: .4rem; right: .4rem; width: 40px; height: 40px; border: 0; background: none; font-size: 1.5rem; cursor: pointer; color: #5A5246; }

/* ---------- Tekstpagina ---------- */
.tekst h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); margin-block: 2rem 1.5rem; }
.tekst h2 { font-size: 1.75rem; margin-block: 2.5rem .8rem; }
.tekst pre { font-family: var(--mono); font-size: .74rem; background: var(--passe); padding: .9rem 1rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; border-radius: 12px; }
.tekst li { margin-bottom: .4rem; }
.kop-eenvoudig { display: flex; align-items: center; justify-content: space-between; padding: max(.8rem, env(safe-area-inset-top)) var(--rand) .8rem; max-width: var(--breed); margin-inline: auto; width: 100%; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Laden ---------- */
.laden { display: flex; align-items: center; gap: .8rem; justify-content: center; min-height: 40svh; font: italic 400 1.2rem var(--kop); color: var(--inkt-zacht); }
.laden span { width: 48px; height: 2px; background: var(--inkt); transform-origin: left; animation: laden 1.1s ease-in-out infinite; }
@keyframes laden { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- Kaartaanwijzing ---------- */
.sim-hint { left: 50%; top: 46%; transform: translate(-50%, -50%); margin: 0; background: rgb(20 24 20 / .78); color: #EDE6D6; border: 1px solid rgb(237 230 214 / .25); border-radius: 999px; padding: .55rem 1rem; font: 500 .85rem var(--ui); white-space: nowrap; pointer-events: none; transition: opacity 800ms; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sim-hint.weg { opacity: 0; }

/* ---------- Onderzoekjes met Fos ---------- */
.oz-teaser { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: center; text-decoration: none; background: var(--rood-licht); border-radius: 28px; padding: 1.6rem; position: relative; overflow: hidden; }
@media (min-width: 760px) { .oz-teaser { grid-template-columns: 1fr auto; padding: 2.4rem; } }
.oz-teaser::after { content: "?"; position: absolute; right: -.1em; bottom: -.32em; font: italic 400 14rem/1 var(--kop); color: color-mix(in srgb, var(--rood) 14%, transparent); pointer-events: none; }
.oz-teaser-tekst { display: grid; gap: .45rem; max-width: 34rem; position: relative; z-index: 1; }
.oz-teaser-tekst strong { font-family: var(--kop); font-weight: 500; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; }
.oz-teaser .knop-pil { justify-self: start; position: relative; z-index: 1; }
.oz-boventitel { font: 600 .78rem var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--rood); margin: 0; }
.oz-held { padding-top: 1.6rem; }
.oz-held h1, .oz-kop h1 { font-size: clamp(2.8rem, 11vw, 5.6rem); line-height: .98; margin-top: .4rem; }
.oz-held h1 em { color: var(--rood); font-weight: 400; }
.oz-lijst { display: grid; gap: .7rem; margin-top: 2rem; }
@media (min-width: 900px) { .oz-lijst { grid-template-columns: 1fr 1fr; } }
.oz-kaart { display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center; text-decoration: none; background: var(--papier-licht); border: 1.5px solid var(--lijn); border-radius: 24px; padding: 1.1rem 1.3rem; min-height: 6rem; transition: transform var(--snel), border-color var(--snel); }
.oz-kaart:hover { border-color: var(--inkt); transform: translateY(-2px); }
.oz-nummer { font: 400 3.2rem/1 var(--kop); color: var(--rood); width: 2.6rem; text-align: center; }
.oz-kaart-tekst { display: grid; gap: .2rem; }
.oz-kaart-tekst strong { font: 500 1.45rem/1.1 var(--kop); }
.oz-kaart-tekst span { font: 400 .95rem/1.4 var(--tekst); color: var(--inkt-zacht); }
.oz-pijl { font: 400 1.5rem var(--ui); }
.oz-noot { margin-top: 2rem; font-size: .9rem; }
.oz-kop { padding-top: 1.2rem; }
.oz-terug { font: 500 .95rem var(--ui); text-decoration: none; display: inline-block; padding: .6rem 0; }
.oz-twee { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 760px) { .oz-twee { grid-template-columns: 1fr 1.4fr; } }
.oz-blok { background: var(--papier-licht); border-radius: 24px; padding: 1.3rem 1.5rem; }
.oz-blok h2, .oz-logboek h2, .oz-werk h2 { font-size: 1.7rem; margin-bottom: .6rem; }
.oz-blok ul, .oz-blok ol { margin: 0; padding-left: 1.2rem; font-size: 1.1rem; }
.oz-blok li { margin-bottom: .45rem; }
.oz-werk { margin-top: 2.5rem; }
.oz-werk h2 { margin-top: 2rem; }
.knop-groot-pil { min-height: 60px; padding: .8rem 1.6rem; font-size: 1.1rem; }
.knop-groot-pil svg { width: 26px; height: 26px; }
.oz-quiz { background: var(--papier-licht); border-radius: 28px; padding: 1.4rem; }
.oz-luister { margin: 1rem 0 1.4rem; }
.oz-keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.oz-keuze { border: 2px solid transparent; background: var(--passe); border-radius: 18px; padding: .5rem; cursor: pointer; display: grid; gap: .5rem; text-align: center; transition: transform var(--snel), border-color var(--snel); }
.oz-keuze:hover { transform: translateY(-2px); border-color: var(--inkt); }
.oz-keuze-beeld { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--passe); display: grid; place-items: center; }
.oz-keuze-beeld img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.oz-keuze-naam { font: 500 1.05rem/1.15 var(--kop); }
.oz-keuze.oz-goed { border-color: var(--heide); box-shadow: 0 0 0 3px color-mix(in srgb, var(--heide) 30%, transparent); }
.oz-keuze.oz-fout { border-color: var(--rood); opacity: .75; }
.oz-keuze[disabled] { cursor: default; transform: none; }
.oz-feedback { font: 400 1.15rem/1.5 var(--tekst); margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.oz-uitslag { text-align: center; padding: 2rem 1rem; background: var(--papier-licht); border-radius: 28px; }
.oz-score { font: 400 5rem/1 var(--kop); margin: 0; color: var(--rood); }
.oz-score small { font-size: 1.4rem; color: var(--inkt-zacht); }
.oz-geen { font-family: var(--kop); padding: .5rem; }
.oz-tellijst { display: grid; gap: .5rem; margin-top: 1rem; }
@media (min-width: 900px) { .oz-tellijst { grid-template-columns: 1fr 1fr; } }
.oz-teller { display: grid; grid-template-columns: 56px 1fr auto; gap: .9rem; align-items: center; background: var(--papier-licht); border-radius: 18px; padding: .5rem .7rem; }
.oz-teller-beeld { width: 56px; height: 70px; border-radius: 10px; overflow: hidden; background: var(--passe); display: grid; place-items: center; font-size: .7rem; }
.oz-teller-beeld img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.oz-teller-naam { font: 500 1.2rem/1.1 var(--kop); display: grid; gap: .2rem; }
.oz-teller-naam small { font: 400 .78rem var(--ui); color: var(--inkt-zacht); }
.oz-teller-knoppen { display: flex; align-items: center; gap: .3rem; }
.oz-teller-knoppen button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--inkt); background: var(--papier); font: 500 1.4rem/1 var(--ui); cursor: pointer; }
.oz-teller-knoppen button[data-plus] { background: var(--inkt); color: var(--papier); }
.oz-teller-knoppen output { min-width: 2ch; text-align: center; font: 500 1.4rem var(--ui); font-variant-numeric: tabular-nums; }
.oz-totaal { font-size: 1.2rem; margin-top: 1rem; }
.oz-spectro canvas { height: clamp(200px, 50vw, 320px); }
.oz-vogelknoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.oz-raad { margin-top: 1rem; background: var(--papier-licht); border-radius: 22px; padding: 1rem 1.2rem; }
.oz-maand-vogel { display: grid; grid-template-columns: 110px 1fr; gap: 1.2rem; align-items: center; }
.oz-maand-vogel h2 { margin: .2rem 0 .8rem; }
.oz-maanden { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-top: .8rem; }
.oz-maanden button { min-height: 48px; border-radius: 14px; border: 1.5px solid var(--lijn); background: var(--papier-licht); font: 500 1rem var(--ui); cursor: pointer; text-transform: capitalize; }
.oz-maanden button:hover { border-color: var(--inkt); }
.oz-antwoord { margin-top: 1.4rem; }
.oz-antwoord .kalender-staven div { opacity: .35; }
.oz-antwoord .kalender-staven .oz-piek { opacity: 1; background: var(--rood); }
.oz-antwoord .kalender-staven .oz-gok { outline: 2px dashed var(--inkt); outline-offset: 2px; }
.oz-vraag { background: var(--papier-licht); border-radius: 22px; padding: 1.1rem 1.3rem; margin-top: .8rem; }
.oz-vraag h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.oz-vraag details { margin-top: .6rem; }
.oz-vraag summary { cursor: pointer; font: 500 .95rem var(--ui); min-height: 40px; display: flex; align-items: center; }
.oz-boek { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .oz-boek { grid-template-columns: 1fr 1fr; align-items: start; } }
.oz-boek ol { font-size: 1.1rem; padding-left: 1.2rem; }
.oz-logboek { margin-top: 3rem; border-top: 1px solid var(--inkt); padding-top: 1.4rem; display: grid; gap: 1rem; }
.oz-veld { display: grid; gap: .4rem; font: 500 .95rem var(--ui); }
.oz-veld textarea, .oz-veld input { font: 400 1.1rem/1.5 var(--tekst); background: var(--papier-licht); border: 1.5px solid var(--lijn); border-radius: 18px; padding: .8rem 1rem; width: 100%; }
.oz-veld textarea:focus, .oz-veld input:focus { outline: none; border-color: var(--inkt); }
.oz-stempel { display: inline-grid; place-items: center; width: 8.5rem; height: 8.5rem; border-radius: 50%; border: 3px double var(--rood); color: var(--rood); font: italic 500 1.7rem/1 var(--kop); transform: rotate(-9deg); text-align: center; }
.oz-stempel small { display: block; font: 600 .62rem var(--ui); letter-spacing: .08em; text-transform: uppercase; margin-top: -1.6rem; }
.oz-stempel-nieuw { animation: stempel 500ms cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes stempel { from { transform: rotate(-9deg) scale(1.8); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
.oz-stempel-klein { width: 4.6rem; height: 4.6rem; font-size: 1rem; border-width: 2px; }

/* Onderzoekjes: voortgang, buiten, certificaat */
.oz-voortgang { margin-top: 1.4rem; display: grid; gap: .5rem; max-width: 34rem; }
.oz-voortgang-balk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.oz-voortgang-balk li { height: 12px; border-radius: 999px; background: var(--passe); position: relative; overflow: hidden; }
.oz-voortgang-balk li.klaar { background: var(--rood); }
.oz-voortgang-balk li.hier { box-shadow: 0 0 0 2px var(--papier), 0 0 0 3.5px var(--inkt); }
.oz-voortgang p { margin: 0; font: 500 .92rem var(--ui); color: var(--inkt-zacht); }
.oz-buiten { margin-top: 1rem; background: var(--rood-licht); border-radius: 24px; padding: 1.3rem 1.5rem; }
.oz-buiten h2 { font-size: 1.7rem; margin-bottom: .6rem; }
.oz-buiten ul { margin: 0; padding-left: 1.2rem; font-size: 1.1rem; }
.oz-buiten li { margin-bottom: .45rem; }
.oz-certificaat { margin-top: 2.5rem; display: grid; gap: 1.4rem; align-items: center; background: var(--papier-licht); border: 1.5px solid var(--lijn); border-radius: 28px; padding: 1.6rem; }
.oz-certificaat h2 { font-size: 2rem; margin-bottom: .4rem; }
.oz-certificaat .oz-veld { max-width: 24rem; margin: 1rem 0 .4rem; }
.oz-certificaat-voorbeeld { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 18px 40px -24px rgb(0 0 0 / .45); background: #F8F7F3; }
.oz-certificaat-dicht { grid-template-columns: 1fr auto; }
.oz-slot { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 2px dashed var(--lijn); font: 400 2rem var(--kop); color: var(--inkt-zacht); }
@media (min-width: 900px) { .oz-certificaat:not(.oz-certificaat-dicht) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.oz-opnieuw { margin-top: 1.6rem; }
.oz-opnieuw .knop-pil svg { width: 18px; height: 18px; }
.oz-opnieuw-vraag { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: var(--papier-licht); border: 1.5px solid var(--lijn); border-radius: 24px; padding: 1rem 1.3rem; }
.oz-opnieuw-vraag[hidden] { display: none; }
.oz-opnieuw-vraag p { margin: 0; flex-basis: 100%; font-size: 1.05rem; }
.oz-opnieuw [hidden] { display: none; }
.sim-label-van { background: #2D4A2E; color: #F3EDE1; padding-left: .7rem; margin: -1.6rem 0 0 0; translate: -50% 0; }
.sim-label-van::after { content: ""; position: absolute; left: 50%; margin-left: -6px; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #2D4A2E; }
.sim-van i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .45rem; }

/* Simulatie: Per maand / Nu */
.sim-bron { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); }
.sim-bron button { border: 0; background: none; color: #EDE6D6; font: 500 .9rem var(--ui); height: 34px; padding: 0 .9rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.sim-bron button[aria-pressed="true"] { background: #EDE6D6; color: #1F1B16; }
.sim-live { width: .5rem; height: .5rem; border-radius: 50%; background: #FF6B5E; box-shadow: 0 0 0 0 rgb(255 107 94 / .7); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgb(255 107 94 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 107 94 / 0); } }
.sim-nu .sim-maand input, .sim-nu .knop-speel { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sim-live { animation: none; } }