/* Hallmark · Vinyvoice portaal "Mijn plaat" · theme: custom (merk Vinyvoice, fotoversie) · idea: "de reis van je plaat als tracklist, en het insteekvel dat ontstaat terwijl je leest" · vibe: "platenlabel, droog, papier en zwart, hard oranje" · v2.1.0
 * shape: app screen, tabbalk onderaan op mobiel en links op desktop · posture: light/grotesk · paper: --papier · accent: --signaal (huidige tab, hoofdactie, demoband) · faces: Clash Display, Switzer
 * critique: geen kaarten-in-kaarten; blokken zijn vlakken papier-2, de reis is een tracklist met regels, het insteekvel is het enige object met eigen papier en schaduw */

.skip { position: absolute; left: var(--ruimte-4); top: -100px; z-index: calc(var(--z-balk) + 1); padding: var(--ruimte-2) var(--ruimte-4); background: var(--zwart); color: var(--papier); }
.skip:focus-visible { top: var(--ruimte-4); outline-color: var(--signaal); }

.portaal-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ruimte-4); padding: var(--ruimte-4) max(var(--ruimte-4), calc((100% - var(--container)) / 2 + var(--ruimte-5))); background: var(--zwart); color: var(--papier); }
.woordmerk { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1; }
.portaal-titel { font-size: var(--text-sm); color: var(--stil-op-zwart); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.demo-band { background: var(--signaal); color: var(--zwart); padding: var(--ruimte-3) var(--ruimte-4); font-weight: 600; text-align: center; }

.portaal-rooster { flex: 1; width: 100%; max-width: var(--container); margin-inline: auto; }
.portaal-inhoud { padding: var(--ruimte-6) var(--ruimte-4) calc(var(--ruimte-7) + 72px); outline: none; }
.portaal-inhoud > section { gap: var(--ruimte-5); }

/* Tabbalk: vijf tabs, onderaan op mobiel (alle vijf in beeld, ook op 320 px), links op desktop (UX-audit C1) */
.tabs { position: fixed; inset: auto 0 0 0; z-index: var(--z-balk); display: flex; background: var(--zwart); padding-bottom: env(safe-area-inset-bottom); }
.tabs a { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 60px; padding: 8px 4px; color: var(--papier); text-decoration: none; font-size: var(--text-xs); transition: background-color var(--duur-kort) var(--ease-out), color var(--duur-kort) var(--ease-out); }
.tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabs a[aria-current="page"] { background: var(--signaal); color: var(--zwart); }
.tabs span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs a:focus-visible { outline: 2px solid var(--papier); outline-offset: -4px; }
.tabs a[aria-current="page"]:focus-visible { outline-color: var(--zwart); }
@media (hover: hover) { .tabs a:not([aria-current="page"]):hover { background: var(--inkt-2); } }

@media (min-width: 60rem) {
  .portaal-rooster { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--ruimte-6); padding-inline: var(--ruimte-5); }
  .tabs { position: sticky; top: var(--ruimte-5); inset: auto; align-self: start; flex-direction: column; overflow: visible; background: transparent; margin-top: var(--ruimte-6); padding: 0; border-top: 1px solid var(--lijn); }
  .tabs a { flex: none; display: flex; align-items: center; justify-content: flex-start; gap: var(--ruimte-3); min-height: 48px; padding: 0 var(--ruimte-3); color: var(--inkt); font-size: var(--text-md); border-bottom: 1px solid var(--lijn); }
  .tabs a:focus-visible { outline-color: var(--zwart); outline-offset: -2px; }
  @media (hover: hover) { .tabs a:not([aria-current="page"]):hover { background: var(--papier-2); } }
  .portaal-inhoud { padding: var(--ruimte-6) 0 var(--ruimte-7); }
  .portaal .voet { padding-bottom: var(--ruimte-6); }
}
.portaal .voet { padding-bottom: calc(var(--ruimte-6) + 72px); }

/* Blokken */
.vlak { display: grid; gap: var(--ruimte-3); align-content: start; background: var(--papier-2); padding: var(--ruimte-5) var(--ruimte-4); }
.vlak h2 { font-size: var(--text-xl); text-wrap: balance; }
.twee-kolom { display: grid; gap: var(--ruimte-4); }
@media (min-width: 60rem) { .twee-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.wat-nu { display: grid; gap: var(--ruimte-4); justify-items: start; max-width: 44rem; }
.wat-nu .lead { font-size: var(--text-xl); line-height: 1.3; }
.wat-nu p:empty { display: none; }

/* Kerncijfers */
.cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--inkt); }
.cijfers > div { display: grid; gap: var(--ruimte-1); padding: var(--ruimte-4) var(--ruimte-3) var(--ruimte-4) 0; border-bottom: 1px solid var(--lijn); }
.cijfers dt { font-size: var(--text-sm); color: var(--stil); }
.cijfers dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-cijfer); line-height: 1; letter-spacing: var(--tracking-display); }
.cijfers dd.is-tekst { font-size: var(--text-xl); line-height: 1.15; }
@media (min-width: 48rem) { .cijfers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* De reis van de plaat, als tracklist */
.reis { list-style: none; padding: 0; border-bottom: 1px solid var(--lijn); }
.reis-stap { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--ruimte-3); align-items: center; min-height: 44px; padding: var(--ruimte-2) var(--ruimte-2); border-top: 1px solid var(--lijn); }
.reis-nr { color: var(--stil); }
.reis-datum { font-size: var(--text-sm); color: var(--stil); }
.reis-stap.is-straks { color: var(--stil); }
.reis-stap.is-nu { background: var(--zwart); color: var(--papier); font-weight: 600; }
.reis-stap.is-nu .reis-nr, .reis-stap.is-nu .reis-datum { color: var(--papier); }

.gegevens { display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.gegevens > div { display: flex; justify-content: space-between; gap: var(--ruimte-4); padding: var(--ruimte-2) 0; border-bottom: 1px solid var(--lijn); }
.gegevens dd { margin: 0; font-weight: 600; text-align: right; }
.adres { display: grid; gap: var(--ruimte-2); justify-items: start; padding-top: var(--ruimte-2); }
.adres h3 { font-family: var(--font-body); font-size: var(--text-md); letter-spacing: 0; }
.adres .formulier { justify-self: stretch; background: var(--papier); padding: var(--ruimte-4); }

/* Delen */
.deellink { font-size: var(--text-lg); font-weight: 600; overflow-wrap: anywhere; background: var(--wit); padding: var(--ruimte-3) var(--ruimte-4); }
.deel-tekst { white-space: pre-line; overflow-wrap: anywhere; background: var(--wit); padding: var(--ruimte-3) var(--ruimte-4); }
.qr-blok { justify-items: start; }
.qr { width: min(100%, 240px); height: auto; aspect-ratio: 1; image-rendering: pixelated; background: var(--wit); }

/* Berichten met hun tekst voor het insteekvel */
.tekst-deel { display: grid; gap: var(--ruimte-2); padding-top: var(--ruimte-2); }
.tekst-label { font-weight: 600; font-size: var(--text-sm); }
.tekst-deel textarea:disabled { background: var(--papier-2); color: var(--inkt); }
.foto-blok { display: grid; gap: var(--ruimte-2); padding-top: var(--ruimte-2); }
.foto-keuze { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--ruimte-4); }
.foto-keuze li { display: grid; gap: var(--ruimte-2); align-content: start; }
.foto-keuze img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 4px solid var(--print-wit); box-shadow: var(--schaduw-vel); }
.foto-keuze li.is-uit img { opacity: 0.4; }
.foto-keuze .rij { gap: var(--ruimte-2); }
.foto-keuze .knop.klein { padding-inline: 12px; }

/* Het insteekvel: vier panelen zoals de leporello, kant A en kant B zoals op de plaat */
.vel-blok { display: grid; gap: var(--ruimte-3); padding-top: var(--ruimte-5); }
.vel-kop h3 { font-size: var(--text-xl); }
.vel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-3); }
@media (min-width: 40rem) { .vel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vel-paneel { aspect-ratio: 1; display: flex; flex-direction: column; gap: var(--ruimte-3); padding: var(--ruimte-4); background: var(--insteek-papier); color: var(--insteek-inkt); box-shadow: var(--schaduw-vel); font-family: var(--font-insteek); }
.vel-kant { font-weight: 600; font-size: var(--text-sm); padding-bottom: var(--ruimte-1); border-bottom: 1px solid var(--insteek-inkt); }
.vel-bericht { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--ruimte-2) var(--ruimte-3); align-items: start; }
.vel-bericht.zonder-foto { grid-template-columns: minmax(0, 1fr); }
.vel-breed { grid-column: 1 / -1; display: grid; gap: var(--ruimte-2); }
.vel-fotos { display: grid; gap: var(--ruimte-2); }
.vel-print { width: 3.75rem; height: 3.75rem; object-fit: cover; border: 3px solid var(--print-wit); box-shadow: var(--schaduw-vel); background: var(--print-wit); }
.vel-print.breed { width: 100%; height: auto; aspect-ratio: 2 / 1; }
.vel-leeg { font-size: var(--text-xs); }
.vel-tekst h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); margin-bottom: 2px; }
.vel-tekst p { font-size: var(--text-xs); line-height: 1.45; white-space: pre-line; overflow-wrap: break-word; }

/* Plaat: muziek en hoes als twee delen, met pillen die naar het deel springen */
.spring { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.pil { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ruimte-4); border: 1px solid var(--inkt); border-radius: var(--r-rond); color: var(--inkt); text-decoration: none; font-weight: 600; transition: background-color var(--duur-kort) var(--ease-out), transform var(--duur-kort) var(--ease-out); }
.pil:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pil:active { transform: translateY(1px); }
@media (hover: hover) { .pil:hover { background: var(--papier-2); } }
.plaat-deel { display: grid; gap: var(--ruimte-4); padding-top: var(--ruimte-5); border-top: 1px solid var(--inkt); scroll-margin-top: var(--ruimte-4); }
.plaat-deel:focus { outline: none; }
.plaat-deel > h3 { font-size: var(--text-xl); }

/* Muziek (UX-audit C4): een korte lijst met één gedeelde speler en een keuzebalk die meeloopt */
.muziek-form { display: grid; gap: var(--ruimte-4); }
.sfeer-filter, .bedden { border: 0; padding: 0; margin: 0; min-width: 0; }
.bedden-lijst { list-style: none; padding: 0; display: grid; border-bottom: 1px solid var(--lijn); }
.bed { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; grid-template-areas: "speel naam keuze"; gap: var(--ruimte-3); align-items: center; padding: var(--ruimte-3) var(--ruimte-2); border-top: 1px solid var(--lijn); transition: background-color var(--duur-kort) var(--ease-out); }
.bed:has(input:checked) { background: var(--wit); box-shadow: inset 3px 0 0 var(--zwart); }
.bed .speel, .bed .speel-plek { grid-area: speel; }
.bed input { grid-area: keuze; inline-size: 22px; block-size: 22px; margin: 0; accent-color: var(--zwart); }
.bed label { grid-area: naam; display: grid; gap: 2px; min-height: 44px; align-content: center; cursor: pointer; min-width: 0; }
.bed-naam { font-weight: 600; font-size: var(--text-lg); }
.bed-eigen { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; justify-items: start; }
.bed-eigen .eigen-blok { justify-self: stretch; }
.bed-leeg { padding: var(--ruimte-3) var(--ruimte-2); border-top: 1px solid var(--lijn); }
.speel { inline-size: 44px; block-size: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--zwart); color: var(--papier); cursor: pointer; transition: background-color var(--duur-kort) var(--ease-out), transform var(--duur-kort) var(--ease-out); }
.speel svg { inline-size: 20px; block-size: 20px; fill: currentColor; }
.speel .speel-uit, .speel[aria-pressed="true"] .speel-aan { display: none; }
.speel[aria-pressed="true"] .speel-uit { display: inline; }
.speel[aria-pressed="true"] { background: var(--signaal); color: var(--op-signaal); }
.speel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.speel:active { transform: scale(0.96); }
@media (hover: hover) { .speel:not([aria-pressed="true"]):hover { background: var(--inkt-2); } }
.eigen-blok { justify-items: start; }
.eigen-blok h4 { font-weight: 600; font-size: var(--text-lg); }
.muziek-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); background: var(--papier-2); }
.muziek-balk p { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.muziek-balk.is-open { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom) + var(--ruimte-2)); z-index: 1; background: var(--zwart); color: var(--papier); }
@media (min-width: 60rem) { .muziek-balk.is-open { bottom: var(--ruimte-4); } }

/* Overzicht: de hoes onder de reis */
.kolom { display: grid; gap: var(--ruimte-4); align-content: start; }
.hoes-overzicht { justify-items: start; }
.hoes-duim { width: min(100%, 15rem); height: auto; aspect-ratio: 1; box-shadow: var(--schaduw-vel); background: var(--insteek-papier); }

/* Hoes: de configurator van de Vinyvoice-site. Het doek is het werk; het paneel ernaast is bediening. */
.hoes-werkplaats { display: grid; gap: var(--ruimte-5); align-items: start; }
@media (min-width: 72rem) {
  .hoes-werkplaats { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--ruimte-6); }
  .hoes-doek-kolom { position: sticky; top: var(--ruimte-5); }
}
.hoes-doek-kolom { display: grid; gap: var(--ruimte-3); }
.hoes-doek { display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: none; background: var(--papier-2); box-shadow: 0 0 0 1px var(--lijn); cursor: default; }
.hoes-doek.is-alleen-lezen { touch-action: auto; }
.hoes-doek:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hoes-tip { font-size: var(--text-sm); }
.hoes-historie, .laagknoppen { gap: var(--ruimte-2); }
.hoes-bewaren { display: grid; gap: var(--ruimte-2); justify-items: start; padding-top: var(--ruimte-2); }
.hoes-paneel { display: grid; gap: var(--ruimte-5); min-width: 0; }
.hoes-blok { display: grid; gap: var(--ruimte-3); justify-items: start; padding-top: var(--ruimte-4); border-top: 1px solid var(--lijn); }
.hoes-blok > .veld, .hoes-blok > .hoes-groep, .hoes-blok > .lagen { width: 100%; }
.hoes-blok h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); letter-spacing: 0; }
.hoes-groep { border: 0; padding: 0; display: grid; gap: var(--ruimte-2); min-width: 0; }
.hoes-groep legend { font-weight: 600; margin-bottom: var(--ruimte-2); padding: 0; }
.label-clash { font-family: var(--font-display); font-weight: 600; }
.knop-bestand { position: relative; }
.knop-bestand input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.knop-bestand:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Keuzes als pillen (letter, tekstkleur) en kleurstalen: bedieningselementen, zoals de knoppen */
.keuzes, .stalen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.keuze, .staal { position: relative; }
.keuze input, .staal input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.keuze label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ruimte-4); border: 1px solid var(--veldrand); border-radius: var(--r-rond); cursor: pointer; transition: background-color var(--duur-kort) var(--ease-out), color var(--duur-kort) var(--ease-out); }
.keuze input:checked + label { background: var(--zwart); color: var(--papier); border-color: var(--zwart); }
.staal label { display: inline-flex; align-items: center; gap: var(--ruimte-2); min-height: 44px; padding: 0 var(--ruimte-4) 0 var(--ruimte-1); border: 1px solid var(--veldrand); border-radius: var(--r-rond); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--duur-kort) var(--ease-out); }
.staal-kleur { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--staal); box-shadow: inset 0 0 0 1px var(--lijn); }
.staal input:checked + label { border-color: var(--zwart); background: var(--papier-2); font-weight: 600; box-shadow: inset 0 0 0 1px var(--zwart); }
.keuze input:focus-visible + label, .staal input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.keuze input:disabled + label, .staal input:disabled + label { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) { .keuze input:not(:checked) + label:hover, .staal label:hover { background: var(--papier-2); } }

.lagen { list-style: none; padding: 0; border-bottom: 1px solid var(--lijn); }
.lagen li { border-top: 1px solid var(--lijn); }
.lagen-leeg { padding-block: var(--ruimte-3); color: var(--stil); }
.laag { font: inherit; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--ruimte-3); border: 0; background: transparent; color: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; transition: background-color var(--duur-kort) var(--ease-out); }
@media (hover: hover) { .laag:hover:not(.is-gekozen) { background: var(--papier-2); } }
.laag.is-gekozen { background: var(--zwart); color: var(--papier); font-weight: 600; }
.laag:focus-visible { outline-offset: -2px; }
.ai-bezig, .ai-fout { display: grid; gap: var(--ruimte-2); justify-items: start; width: 100%; }
.ai-bezig-tekst { font-weight: 600; }
.hoes-blok input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--zwart); }

/* De mockup: hoes met de plaat erin, op een oranje vlak */
.hoes-mock { position: relative; margin: 0; aspect-ratio: 5 / 3; overflow: hidden; background: var(--signaal); }
.hoes-mock-plaat { position: absolute; left: 38%; top: 13%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, var(--papier) 0 3%, var(--signaal) 3% 30%, transparent 30%), repeating-radial-gradient(circle closest-side, var(--plaat) 0 2px, var(--plaat-groef) 2px 3px), var(--plaat); }
.hoes-mock-hoes { position: absolute; left: 10%; top: 10%; z-index: 1; width: 48%; height: auto; aspect-ratio: 1; box-shadow: var(--schaduw-vel); }

/* Proef */
.proef { display: grid; gap: var(--ruimte-5); }
.proef-vel { display: grid; gap: var(--ruimte-3); }
.proef-vel img { width: 100%; border: 1px solid var(--lijn); }
.proef-vel-pagina { margin: 0; display: grid; gap: var(--ruimte-1); }
.proef-kant { display: grid; gap: var(--ruimte-2); }
.proef-kant + .proef-kant { padding-top: var(--ruimte-3); }
.proef-kant audio { width: 100%; }
.goedkeuren, .bewaren, .luisterpagina { justify-items: start; }
/* Verlengen (docs/specs/2026-11-13-bewaren-verlengen-design.md): twee rustige keuzes met prijs en de nieuwe datum. */
.verleng { display: grid; gap: var(--ruimte-2); justify-self: stretch; padding-top: var(--ruimte-4); margin-top: var(--ruimte-2); border-top: 1px solid var(--lijn); }
.verleng h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); letter-spacing: 0; }
.verleng-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--ruimte-3); }
.verleng-keuze { display: grid; gap: 2px; justify-items: start; min-height: 56px; padding: var(--ruimte-3) var(--ruimte-4); text-align: left; font: inherit; color: var(--inkt); background: var(--wit); border: 1px solid var(--veldrand); cursor: pointer; transition: border-color var(--duur-kort) var(--ease-out), transform var(--duur-kort) var(--ease-out); }
.verleng-keuze strong { font-weight: 600; font-size: var(--text-md); }
.verleng-keuze span { font-size: var(--text-sm); color: var(--stil); }
.verleng-keuze:active { transform: translateY(1px); }
.verleng-keuze:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.verleng-keuze:disabled { background: var(--papier-2); border-color: var(--lijn); color: var(--stil); cursor: progress; transform: none; }
@media (hover: hover) { .verleng-keuze:hover:not(:disabled) { border-color: var(--inkt); } }
.verleng-melding:empty { display: none; }
.verleng-melding:focus { outline: none; }
.verleng-melding.is-fout { color: var(--fout); font-weight: 600; }
.luisterpagina .deellink { justify-self: stretch; }
/* Na de uiterste goedkeurdatum: de zin valt op, zonder alarmkleur. */
#goedkeur-termijn.is-voorbij { font-weight: 600; }
#opmerking-form { display: grid; gap: var(--ruimte-2); justify-items: start; width: 100%; padding-top: var(--ruimte-3); }
#opmerking-form .veld { width: 100%; }

/* De eigen bevestiging bij goedkeuren, in plaats van confirm() (UX-audit C5). Annuleren links en standaard. */
/* Zonder <dialog>-ondersteuning blijft hij verborgen; de knop valt dan terug op de systeemvraag. */
dialog:not([open]) { display: none; }
.dialoog { width: min(100% - 2 * var(--ruimte-4), 28rem); margin: auto; border: 0; padding: var(--ruimte-5); background: var(--papier); color: var(--inkt); box-shadow: var(--schaduw-vel); }
.dialoog::backdrop { background: color-mix(in srgb, var(--zwart) 60%, transparent); }
.dialoog h2 { font-size: var(--text-xl); margin-bottom: var(--ruimte-3); }
.dialoog p { margin-bottom: var(--ruimte-5); }

/* Minder beweging: geen indrukken of overgangen */
@media (prefers-reduced-motion: reduce) {
  .tabs a, .pil, .speel, .bed, .keuze label, .staal label, .laag { transition: none; }
  .pil:active, .speel:active { transform: none; }
}

/* Afdrukken: alleen het insteekvel, twee panelen per A4 liggend */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: var(--wit); display: block; min-height: 0; }
  .skip, .portaal-kop, .demo-band, .tabs, .voet, .dialoog,
  .portaal-inhoud > section:not([data-tab="berichten"]),
  [data-tab="berichten"] > :not(.vel-blok),
  .vel-blok > :not(.vel) { display: none !important; }
  .portaal-rooster, .portaal-inhoud { display: block; padding: 0; margin: 0; max-width: none; }
  .vel { grid-template-columns: repeat(2, 130mm); gap: 8mm; justify-content: center; }
  .vel-paneel { width: 130mm; height: 130mm; aspect-ratio: auto; overflow: hidden; box-shadow: none; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .vel-paneel:nth-child(2n + 1) { break-before: page; }
  .vel-paneel:first-child { break-before: auto; }
}