/* Het dossier van de notaris, v2. Ruimte: 4 8 12 16 24 32 48. Lezen in gedimd licht: 20 px Literata, contrast > 7:1. */
@font-face { font-family: 'Literata'; src: url('fonts/Literata-roman.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('fonts/Literata-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/BodoniModa-400.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/BodoniModa-400i.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('fonts/CourierPrime-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --papier: #E4E8EE;
  --papier-diep: #D2D9E2;
  --inkt: #121820;
  --inkt-zacht: #39445A;
  --zegel: #A8231B;
  --stempel: #2B3B57;
  --tafel: #0E131A;
  --lijn: rgba(18, 24, 32, .22);
  --lees: 'Literata', Georgia, 'Times New Roman', serif;
  --titel: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --stempelletter: 'Courier Prime', 'Courier New', monospace;
  --tekst: 20px;
  --rand: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 400 var(--tekst)/1.55 var(--lees); min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--zegel); outline-offset: 3px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
h1, h2, h3 { font-family: var(--titel); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.label { font: 700 13px/1.3 var(--stempelletter); letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-zacht); margin: 0 0 12px; }
.stempel { display: inline-block; font: 700 14px/1 var(--stempelletter); letter-spacing: .14em; text-transform: uppercase; border: 2px solid var(--stempel); color: var(--stempel); padding: 6px 12px; transform: rotate(-3deg); border-radius: 3px; animation: stempel .26s cubic-bezier(.2, .8, .2, 1) .2s both; }
.stempel.rood { border-color: var(--zegel); color: var(--zegel); }
@keyframes stempel { from { transform: rotate(-9deg) scale(1.4); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
@keyframes op { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- schermen ---------- */
.scherm { max-width: 560px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) var(--rand) 48px; animation: op .3s cubic-bezier(.2, .8, .2, 1) both; }
.kop { margin-bottom: 24px; }
.kop h1 { font-size: 40px; }
.kop .sub { font-style: italic; color: var(--inkt-zacht); margin-top: 8px; }

.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.raster button { all: unset; cursor: pointer; display: block; text-align: center; }
.raster img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; background: var(--papier-diep); box-shadow: 0 2px 8px rgba(18, 24, 32, .18); }
.raster .naam { font: 400 20px/1.2 var(--titel); margin-top: 8px; }
.raster .rol { font-size: 13px; line-height: 1.3; color: var(--inkt-zacht); margin-top: 2px; }
.raster button:focus-visible img { outline: 3px solid var(--zegel); outline-offset: 2px; }
.raster button[aria-pressed="true"] img { outline: 4px solid var(--zegel); outline-offset: 2px; }

.code-veld { display: grid; gap: 12px; margin-top: 24px; }
.code-veld input { font: 700 40px/1 var(--stempelletter); letter-spacing: .5em; text-indent: .25em; text-align: center; width: 100%; max-width: 300px; padding: 16px 0; border: 2px solid var(--inkt); border-radius: 6px; background: #fff; color: var(--inkt); }
.code-veld input.fout { border-color: var(--zegel); }
.fout-tekst { color: var(--zegel); font-weight: 600; min-height: 1.55em; }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 24px; border: 2px solid var(--inkt); border-radius: 6px; background: none; font: 600 18px/1.4 var(--lees); text-decoration: none; }
.knop.vol { background: var(--inkt); color: var(--papier); }
.knop.rood { background: var(--zegel); border-color: var(--zegel); color: #fff; }
.knop.breed { width: 100%; }
.knop:disabled { opacity: .4; cursor: default; }
.link { background: none; border: 0; padding: 12px 0; text-decoration: underline; text-underline-offset: 4px; color: var(--inkt-zacht); min-height: 48px; }

.portret-klein { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.portret-klein img { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; }
.portret-klein .naam { font: 400 26px/1.15 var(--titel); }
.portret-klein .rol { font-size: 16px; line-height: 1.4; color: var(--inkt-zacht); margin-top: 6px; }

/* ---------- het zegel ---------- */
.zegel-scherm { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 24px; background: var(--tafel); color: var(--papier); }
.zegel-knop { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 24px; }
.zegel-knop .tik { font: 400 26px/1.3 var(--titel); }
.zegel-knop .uitleg { font-size: 16px; color: rgba(228, 232, 238, .75); max-width: 28ch; }
.breek { position: relative; width: min(70vw, 320px); aspect-ratio: 1; }
.breek span { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 50%; }
.breek .l { clip-path: polygon(0 0, 52% 0, 44% 38%, 56% 61%, 46% 100%, 0 100%); }
.breek .r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 46% 100%, 56% 61%, 44% 38%); }
.breek.gebroken .l { transform: translate(-28%, 8%) rotate(-14deg); opacity: 0; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .9s ease .3s; }
.breek.gebroken .r { transform: translate(28%, 10%) rotate(12deg); opacity: 0; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .9s ease .3s; }

/* ---------- kaartenmotor ---------- */
.stapel { height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; max-width: 560px; margin: 0 auto; }
.voortgang { display: flex; gap: 4px; padding: max(12px, env(safe-area-inset-top)) 16px 8px; }
.voortgang i { flex: 1; height: 3px; border-radius: 2px; background: var(--lijn); }
.voortgang i.af { background: var(--inkt); }
.voortgang-tekst { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; font: 700 12px/1 var(--stempelletter); letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-zacht); }
.voortgang-tekst button { all: unset; cursor: pointer; padding: 12px 0 12px 16px; line-height: 1.4; }
.kaart { overflow-y: auto; -webkit-overflow-scrolling: touch; animation: op .28s cubic-bezier(.2, .8, .2, 1) both; padding: 8px var(--rand) 24px; }
.kaart.terug { animation-name: opterug; }
@keyframes opterug { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.kaart h2 { font-size: 34px; margin-bottom: 16px; }
.kaart .groot { font-size: 23px; line-height: 1.5; }
.kaart .beeld { margin: 0 calc(var(--rand) * -1) 24px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--papier-diep); }
.kaart .beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaart .beeld.portret { aspect-ratio: 3 / 4; }
.kaart .onder { color: var(--inkt-zacht); font-style: italic; margin-top: 8px; }
.kaart ul { padding-left: 1.1em; margin: 0; }
.kaart li { margin-bottom: 12px; }
.vlak { background: var(--papier-diep); border-radius: 8px; padding: 20px; margin-top: 16px; }
.hardop-woord { font: 400 40px/1.1 var(--titel); color: var(--zegel); margin: 8px 0 16px; }
.navigatie { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--lijn); background: var(--papier); }

/* Henri belt */
.bel { text-align: center; padding-top: 24px; }
.bel img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 6px var(--papier), 0 0 0 8px var(--zegel); }
.bel.gaat img { animation: rinkel 1.2s ease-in-out infinite; }
@keyframes rinkel { 0%, 100% { box-shadow: 0 0 0 6px var(--papier), 0 0 0 8px var(--zegel); } 50% { box-shadow: 0 0 0 10px var(--papier), 0 0 0 14px rgba(168, 35, 27, .45); } }
.bel h2 { margin-top: 24px; }
.vasthouden { user-select: none; -webkit-user-select: none; touch-action: none; border: 2px dashed var(--inkt-zacht); border-radius: 8px; padding: 20px; margin-top: 24px; min-height: 160px; position: relative; text-align: left; }
.vasthouden .verborgen { filter: blur(9px); transition: filter .15s; }
.vasthouden.open .verborgen { filter: none; }
.vasthouden .hint { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; font-weight: 600; color: var(--inkt); }
.vasthouden.open .hint { display: none; }

/* thuis */
.volgende { background: var(--inkt); color: var(--papier); border-radius: 10px; padding: 24px; margin-bottom: 24px; }
.volgende .label { color: rgba(228, 232, 238, .7); }
.volgende h2 { font-size: 30px; margin-bottom: 16px; }
.volgende .knop { border-color: var(--papier); color: var(--inkt); background: var(--papier); }
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tegel { all: unset; cursor: pointer; display: grid; gap: 4px; padding: 16px; border: 2px solid var(--inkt); border-radius: 8px; min-height: 88px; align-content: center; box-sizing: border-box; }
.tegel:last-child:nth-child(odd) { grid-column: span 2; }
.tegel .t { font: 400 22px/1.2 var(--titel); }
.tegel .s { font-size: 15px; color: var(--inkt-zacht); }
.stukken { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--lijn); }
.stukken li { border-bottom: 1px solid var(--lijn); }
.stukken button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 0; min-height: 56px; box-sizing: border-box; }
.stukken img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }

/* keuzelijst */
.keuzes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.keuzes button { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: 16px 20px; border: 2px solid var(--inkt); border-radius: 8px; min-height: 56px; }
.keuzes button[aria-pressed="true"] { background: var(--inkt); color: var(--papier); }

/* plattegrond */
.plattegrond svg { width: 100%; height: auto; display: block; }

/* ---------- het bord ---------- */
body.bord { background: var(--tafel); color: var(--papier); overflow: hidden; }
body.bord #app { height: 100dvh; display: grid; place-items: center; }
.vel { width: min(1500px, 92vw); max-height: 92vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--papier); color: var(--inkt); border-radius: 6px; overflow: hidden; box-shadow: 0 12px 48px rgba(0, 0, 0, .5); animation: op .35s cubic-bezier(.2, .8, .2, 1) both; }
.vel.enkel { grid-template-columns: 1fr; }
.vel .foto { background-size: cover; background-position: center; min-height: 80vh; }
.vel .inhoud { padding: 56px 64px; overflow: auto; }
.vel .label { font-size: 17px; }
.vel h1 { font-size: 80px; line-height: 1.02; margin-bottom: 24px; }
.vel p { font-size: 26px; line-height: 1.45; max-width: 32em; }
.vel .code { font: 700 180px/1 var(--stempelletter); letter-spacing: .1em; margin: 16px 0 24px; }
.vel .qr { width: 300px; height: 300px; margin-top: 24px; }
.vel .qr svg { width: 100%; height: 100%; display: block; }
.vertellers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 32px; }
.vertellers figure { margin: 0; text-align: center; }
.vertellers img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.vertellers figcaption { font: 400 30px/1.15 var(--titel); margin-top: 12px; }
.vertellers small { display: block; font: 400 18px/1.3 var(--lees); color: var(--inkt-zacht); }
.henri-knop { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 16px; margin-top: 16px; font: 700 18px/1 var(--stempelletter); letter-spacing: .12em; text-transform: uppercase; }
.henri-knop img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 3px var(--zegel); }
.balk { height: 4px; width: 420px; background: var(--lijn); margin-top: 12px; border-radius: 2px; overflow: hidden; }
.balk i { display: block; height: 100%; width: 100%; background: var(--zegel); transform: scaleX(0); transform-origin: left; }
.geheimen { columns: 2; column-gap: 48px; list-style: none; padding: 0; margin: 24px 0 0; }
.geheimen li { break-inside: avoid; display: grid; grid-template-columns: 64px 1fr; gap: 16px; margin-bottom: 20px; font-size: 19px; line-height: 1.4; }
.geheimen img { width: 64px; height: 84px; object-fit: cover; border-radius: 4px; }
.geheimen b { display: block; font: 400 24px/1.15 var(--titel); }
.prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.prijzen div { border-top: 3px solid var(--zegel); padding-top: 16px; }
.prijzen b { font: 400 36px/1.1 var(--titel); display: block; margin-bottom: 8px; }
.prijzen span { font-size: 20px; color: var(--inkt-zacht); }
.groot-zegel { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 24px; }
.groot-zegel .breek { width: min(44vh, 440px); }
.dader-onthuld { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; }
.dader-onthuld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.toetsen { position: fixed; left: 0; right: 0; bottom: 12px; text-align: center; color: rgba(228, 232, 238, .55); font: 700 14px/1 var(--stempelletter); letter-spacing: .1em; margin: 0; }
.toetsen b { color: var(--papier); }
body.bord .film { width: 100vw; height: 100dvh; object-fit: contain; background: #000; display: block; }
.pin { text-align: center; color: var(--papier); }
.pin h1 { font-size: 56px; margin-bottom: 24px; }
.pin .code-veld { justify-items: center; }
.pin .fout-tekst { color: #F19A93; }

/* Draaiboek van de notaris: een tab per bordscène, stappen met een soort-label erboven. */
.tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--rand) * -1) 24px; padding: 4px var(--rand); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { all: unset; cursor: pointer; flex: none; font: 700 13px/1.4 var(--stempelletter); letter-spacing: .08em; text-transform: uppercase; padding: 12px 16px; border: 2px solid var(--lijn); border-radius: 999px; color: var(--inkt-zacht); box-sizing: border-box; }
.tabs button.actief { border-color: var(--inkt); background: var(--inkt); color: var(--papier); }
.stap { padding: 16px 0; border-top: 1px solid var(--lijn); }
.stap .soort { font: 700 12px/1.4 var(--stempelletter); letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-zacht); margin: 0 0 8px; }
.stap.zeg .soort, .stap.lees .soort, .stap.lijst .soort { color: var(--zegel); }
.stap.zeg, .stap.lees, .stap.lijst { font-size: 21px; line-height: 1.5; }
.stap.telefoon { font-size: 17px; color: var(--inkt-zacht); }
.stap ol { margin: 0; padding-left: 1.3em; }
.stap li { margin-bottom: 12px; }
.stap.bord p:not(.soort) { background: var(--papier-diep); border-radius: 8px; padding: 12px 16px; font-size: 18px; }
.draaiboek .navigatie { display: flex; gap: 12px; margin-top: 32px; }
.draaiboek .navigatie .knop { flex: 1; }