/* Hallmark · shape: label-sleeve als productlancering (held, drie stappen, Hoor het, Lees het, Ontwerp het, Mix het, Volg het, gelegenheden, prijs, vragen) · genre: editorial · theme: custom (by brief) · job: buy · idea: "al je mensen op één plaat: hoor het, lees het, ontwerp het, mix het, volg het" · vibe: "onafhankelijk platenlabel, droog, hard oranje"
 * paper: oklch(94.8% 0.011 76.6) foto / oklch(14.6% 0.003 68.6) 3d · accent: oklch(68.2% 0.211 37.7) · display: Clash Display · body: Switzer · hero: schermvullende video, kop onderin op een scrim · nav: woordmerk links, drie ankers en Bestellen rechts · footer: woordmerk, afzender, drie links · imagery: flitsfoto's en renders van de klant, zes echte hoezen uit die foto's, schermen van het echte portaal (stemmenplaat demo vvdem2) · signature: de plaat die echt draait en speelt, arm die meeloopt, tracklist en insteekvel die oplichten
 * copy: verbatim (de drie transcripties op het insteekvel komen van de klant) · axes: papier of zwart/clash/signaaloranje · posture: committed (oranje en zwarte vlakken wisselen per werkwoord) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: P, een plaat-site neigt naar sentiment; vijf droge werkwoorden dragen het verhaal en elk werkwoord laat het echte ding zien (speler, vel, hoezen, snijbank, portaal) */
/* Hallmark · waive 83 · beeld van de klant in opeenvolgende secties (insteekvel, hoezen, snijbank, portaal, gelegenheden) · de klant vroeg elke USP zichtbaar te maken met het echte ding; de vlakken wisselen papier, zwart en oranje zodat de reeks niet één beeldmuur wordt */
/* Hallmark · waive 81 · div.plaat is de plaat zelf, in CSS gebouwd met groeven, label en arm · de afspeelbare plaat is het product en de signatuur, geen leeg beeldvlak */
/* Hallmark · waive 79 · de oude kiespagina had twee beeldpanelen · index.html is nu de fotovariant; de waiver blijft voor wie de kiespagina terugzet */
/* Hallmark · waive 77 · de strook "Drie stappen. Jij doet er één." onder de held en de bestelflow zijn bewust dun · de strook is een snelle samenvatting tussen held en speler, de flow is één formulierkolom per stap */
/* Hallmark · waive 71 · de labels A1 Oma, A2 Pa, A3 Daan staan bovenaan hun bericht naast de foto · zo staat het op het echte insteekvel, label en tekst horen als één blok bij de foto */
/* Hallmark · dismissed 59 · elf secties omdat de klant vijf USP-secties (hoor, lees, ontwerp, mix, volg) als één verhaal vroeg, naast stappen, gelegenheden, prijs en vragen */
/* Hallmark · dismissed F7 · alle pill-selectors zijn bedieningselementen: knoppen, de navknop, de videopauze en de speelknop */
@import url("./tokens.css");

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: calc(var(--kop-hoogte) + var(--space-md)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-weight: 400; font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); font-synthesis: none; }
::selection { background: var(--signaal); color: var(--zwart); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; overflow-wrap: break-word; min-width: 0; text-wrap: balance; letter-spacing: var(--tracking-display); }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.knop:active { transform: translateY(1px); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.knop[aria-busy="true"] { cursor: progress; }
.knop--stil { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
@media (hover: hover) {
  .knop:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
  .knop--stil:hover { background: color-mix(in oklab, var(--color-ink) 12%, transparent); border-color: var(--color-ink); }
}

/* ---------- kop (nav) ---------- */
/* De kop blijft boven in beeld: een zwarte balk, zodat de oranje bestelknop overal opvalt. */
.kop { --kop-vlak: var(--zwart); position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--kop-vlak); color: var(--papier); }
/* Zodra je naar beneden gaat wordt de balk doorzichtiger en schemert de pagina erdoorheen. Zonder steun hiervoor, of met
   "minder doorzichtigheid" aan, blijft hij dicht. */
@supports (animation-timeline: scroll()) {
  @media not (prefers-reduced-transparency: reduce) {
    .kop { animation: kop-glas linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
  }
}
@keyframes kop-glas { to { background-color: color-mix(in oklab, var(--kop-vlak) 68%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); } }
.kop__rij { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--kop-hoogte); }
.woordmerk { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; text-decoration: none; }
.kop__links { display: flex; align-items: center; gap: var(--space-lg); list-style: none; }
.kop__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-md); text-decoration: none; }
.kop__links a:not(.kop__bestel):not([data-account]):hover { text-decoration: underline; }
/* Twee knoppen in de kop: Bestellen is de actie (vol oranje), Inloggen de tweede (rand). */
.kop__bestel, .kop__links a[data-account] { padding: 0 var(--space-md); border: 1px solid currentColor; border-radius: var(--radius-pill); font-weight: 600; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.kop__bestel { background: var(--signaal); border-color: var(--signaal); color: var(--zwart); }
@media (hover: hover) { .kop__bestel:hover { background: var(--signaal-diep); border-color: var(--signaal-diep); } .kop__links a[data-account]:hover { background: color-mix(in oklab, currentColor 14%, transparent); } }
.kop :focus-visible { outline-color: var(--signaal); }
@media (max-width: 47.99rem) { .kop__breed { display: none; } .kop__links { gap: var(--space-xs); } .kop__rij { gap: var(--space-sm); } .kop__bestel, .kop__links a[data-account] { padding: 0 var(--space-sm); font-size: var(--text-sm); } }
.kop__links a { white-space: nowrap; }

/* ---------- held ---------- */
.held { --color-ink: var(--papier); --color-focus: var(--signaal); position: relative; display: grid; align-items: end; min-height: calc(100svh - var(--kop-hoogte)); padding-block: var(--space-4xl) var(--space-2xl); background: var(--zwart); color: var(--papier); isolation: isolate; }
.held__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
[data-variant="3d"] .held__video { object-position: 30% 50%; }
[data-variant="foto"] .held__video { object-position: 60% 50%; }
.held::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--color-scrim) 0%, transparent 62%); }
.held__blok { display: grid; gap: var(--space-lg); justify-items: start; }
.held__kop { font-size: var(--text-held); line-height: 0.94; letter-spacing: -0.02em; word-spacing: 0.04em; max-width: 11ch; }
.held__zin { font-size: var(--text-lead); max-width: 44ch; }
.held__acties { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-xs); }
.held__pauze { position: absolute; right: var(--gutter); bottom: var(--space-lg); min-height: 44px; min-width: 44px; padding: 0 var(--space-md); border: 1px solid color-mix(in oklab, var(--papier) 55%, transparent); border-radius: var(--radius-pill); background: transparent; font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .held__pauze:hover { background: color-mix(in oklab, var(--papier) 14%, transparent); } }
html:not(.js) .held__pauze { display: none; }
@media (min-width: 60rem) {
  [data-variant="3d"] .held::after { background: linear-gradient(to left, var(--color-scrim) 0%, transparent 55%); }
  [data-variant="3d"] .held__blok { margin-left: auto; width: min(100%, 40rem); }
}
@media (max-width: 47.99rem) { .held__pauze { bottom: auto; top: 84px; } }

/* ---------- secties ---------- */
main > section:not(.held) { padding-block: var(--section-gap); background: var(--color-paper); color: var(--color-ink); }
.sectie-kop { font-size: var(--text-section); line-height: 1.02; max-width: 20ch; }
.bijschrift { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- hoor het zelf: de plaat ---------- */
.hoor__rooster { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 60rem) { .hoor__rooster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-3xl); } }
.draaitafel { position: relative; width: min(100%, 620px); aspect-ratio: 1; }
.plaat, .draaitafel::before { position: absolute; left: 0; top: 6%; width: 88%; aspect-ratio: 1; border-radius: 50%; }
.plaat {
  background:
    radial-gradient(circle closest-side, transparent 0 60.4%, var(--plaat-tussen) 60.4% 61.4%, transparent 61.4% 79.4%, var(--plaat-tussen) 79.4% 80.4%, transparent 80.4% 97.6%, var(--plaat-tussen) 97.6% 98.4%, transparent 98.4%),
    repeating-radial-gradient(circle closest-side, var(--plaat) 0 2px, var(--plaat-groef) 2px 3px),
    var(--plaat);
  box-shadow: 0 0 0 1px var(--color-rule);
  animation: draai 1.8s linear infinite; animation-play-state: paused;
}
.draaitafel::before { content: ""; z-index: 2; pointer-events: none; background: conic-gradient(from 25deg, transparent 0deg, var(--plaat-glans) 28deg, transparent 58deg, transparent 180deg, var(--plaat-glans) 208deg, transparent 238deg); }
.plaat__label { position: absolute; inset: 33%; display: grid; place-content: center; gap: 1.9em; border-radius: 50%; background: var(--plaat-label); color: var(--plaat-label-ink); text-align: center; font-size: clamp(0.6875rem, 1.3vw, 0.9375rem); line-height: 1.1; }
.plaat__merk { font-family: var(--font-display); font-weight: 600; font-size: 1.35em; letter-spacing: -0.02em; }
.plaat__label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--color-paper); transform: translate(-50%, -50%); }
.speelt .plaat { animation-play-state: running; }
@keyframes draai { to { transform: rotate(1turn); } }
.arm { position: absolute; left: 90%; top: 2%; z-index: 3; width: 8%; aspect-ratio: 1; border-radius: 50%; background: var(--arm-voet); }
.arm__staaf { position: absolute; left: calc(50% - 3px); top: 50%; width: 6px; height: 700%; border-radius: 3px; background: var(--arm); transform-origin: 50% 0; transform: rotate(var(--hoek, 0deg)); transition: transform var(--dur-long) var(--ease-in-out); }
.arm__staaf::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 26px; border-radius: 2px; background: var(--arm); transform: translateX(-50%); }
.speelt .arm__staaf { transition-duration: var(--dur-micro); transition-timing-function: linear; }
@media (prefers-reduced-motion: reduce) { .plaat { animation: none; } .arm__staaf { transition: none; } }
@media (max-width: 59.99rem) { .draaitafel { width: min(100%, 440px); } }

.hoor__tekst { display: grid; gap: var(--space-lg); align-content: start; }
.hoor__intro { font-size: var(--text-lead); max-width: 34ch; }
html.js .hoor__audio { display: none; }
html:not(.js) .bediening { display: none; }
.bediening { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.speelknop { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg) 0 var(--space-sm); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-weight: 600; font-size: var(--text-lg); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) { .speelknop:hover { background: color-mix(in oklab, var(--color-ink) 10%, transparent); } }
.speelknop:active { transform: translateY(1px); }
.speelknop__icoon { position: relative; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--color-ink); }
.speelknop__icoon::before { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--color-paper); }
.speelt .speelknop__icoon::before { left: 10px; top: 10px; width: 12px; height: 12px; border: 0; background: linear-gradient(to right, var(--color-paper) 0 33%, transparent 33% 67%, var(--color-paper) 67%); }
.bediening__tijd { font-size: var(--text-md); }

.tracklist { list-style: none; border-bottom: 1px solid var(--color-rule); }
.tracklist li { display: grid; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm) var(--space-sm); border-top: 1px solid var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.track { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; column-gap: var(--space-sm); align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; white-space: nowrap; }
.track__naam { font-weight: 600; }
.track__regel { padding-left: calc(2.75rem + var(--space-sm)); font-size: var(--text-sm); }
.tracklist li:has(> [aria-current="true"]) { background: var(--color-ink); color: var(--color-paper); }
.tracklist li:has(> [aria-current="true"]) :focus-visible { outline-color: var(--color-paper); }
@media (hover: hover) { .track:not([aria-current="true"]):hover .track__naam { text-decoration: underline; text-underline-offset: 0.18em; } }
.track:focus-visible { outline-offset: -2px; }

/* ---------- insteekvel ---------- */
.insteek__rooster { display: grid; gap: var(--space-xl); }
.insteek__beeld img { width: 100%; }
@media (min-width: 60rem) {
  .insteek__rooster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
  .insteek__intro { grid-column: 1 / 8; }
  .insteek__beeld { grid-column: 1 / 8; grid-row: 2; }
  .paneel-vel { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; }
}
.paneel-vel { display: grid; gap: var(--space-sm); max-width: 26rem; padding: var(--space-lg) var(--space-md); background: var(--insteek-papier); color: var(--insteek-inkt); box-shadow: var(--schaduw-vel); transform: rotate(1.2deg); }
.paneel-vel__kop { display: flex; justify-content: space-between; gap: var(--space-md); padding: 0 var(--space-xs) var(--space-xs); border-bottom: 1px solid var(--insteek-inkt); font-size: var(--text-xs); font-weight: 600; }
.vel-bericht { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: var(--space-xs); transition: background-color var(--dur-short) var(--ease-out); }
.vel-bericht.is-nu { background: var(--insteek-nu); }
.vel-bericht__foto { width: 4.5rem; height: 4.5rem; object-fit: cover; border: 4px solid var(--print-wit); box-shadow: var(--schaduw-vel); }
.vel-bericht__label { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0; margin-bottom: var(--space-2xs); }
.vel-bericht p { font-size: var(--text-xs); line-height: 1.45; }
@media (max-width: 59.99rem) { .paneel-vel { transform: none; } }

/* ---------- het ritme: Hoor het. Lees het. Ontwerp het. Mix het. Volg het. ---------- */
.vers { font-size: var(--text-vers); line-height: 0.88; letter-spacing: -0.035em; max-width: 8ch; }
.vers__zin { margin-top: var(--space-lg); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; max-width: 24ch; }
.vers__tekst { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 40ch; }

/* ---------- drie stappen (strook onder de held) ---------- */
main > section.werkt { padding-block: var(--space-3xl); border-bottom: 1px solid var(--color-rule); }
.werkt__rooster { display: grid; gap: var(--space-xl); }
.werkt__kop { font-size: var(--text-2xl); line-height: 1.05; max-width: 12ch; }
.stappen { display: grid; gap: var(--space-lg) var(--gap-columns); list-style: none; counter-reset: stap; }
.stap { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: 2px solid var(--color-ink); counter-increment: stap; }
.stap > p { color: var(--color-ink-2); max-width: 45ch; }
.stap__kop { display: flex; align-items: baseline; gap: var(--space-sm); font-size: var(--text-xl); line-height: 1.1; }
.stap__kop::before { content: counter(stap); font-variant-numeric: tabular-nums; }
@media (min-width: 60rem) {
  .werkt__rooster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .werkt__kop { grid-column: 1 / 4; }
  .stappen { grid-column: 4 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- lees het (kop in het insteek-rooster) ---------- */
.insteek__intro { display: grid; }

/* ---------- ontwerp het: de hoezen ---------- */
.ontwerp__rooster, .mix__rooster, .volg__rooster { display: grid; gap: var(--space-2xl); align-items: center; }
.ontwerp__tekst, .mix__tekst, .volg__tekst { display: grid; gap: 0; justify-items: start; }
.ontwerp__stappen { list-style: none; counter-reset: ontwerp; width: 100%; max-width: 30rem; margin-block: var(--space-xl); padding: 0; }
.ontwerp__stappen li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); counter-increment: ontwerp; color: var(--color-ink-2); }
.ontwerp__stappen li:last-child { border-bottom: 1px solid var(--color-rule); }
.ontwerp__stappen li::before { content: counter(ontwerp); grid-row: 1 / 3; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ontwerp__stappen strong { font-weight: 600; color: var(--color-ink); }
.hoezen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); list-style: none; }
@media (min-width: 40rem) { .hoezen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hoezen img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 60rem) {
  .ontwerp__rooster, .mix__rooster, .volg__rooster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .ontwerp__tekst { grid-column: 1 / 7; }
  .hoezen { grid-column: 7 / 13; }
}

/* ---------- mix het ---------- */
.mix__lijst { width: 100%; max-width: 32rem; margin-top: var(--space-xl); }
.mix__lijst > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.mix__lijst > div:last-child { border-bottom: 1px solid var(--color-rule); }
.mix__lijst dt { font-weight: 600; }
.mix__lijst dd { color: var(--color-ink-2); }
.mix__eerlijk { margin-top: var(--space-lg); max-width: 34ch; font-weight: 600; }
.mix__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 59.99rem) { .mix__beeld img { aspect-ratio: 4 / 3; } }
@media (max-width: 29.99rem) { .mix__lijst > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (min-width: 60rem) {
  .mix__tekst { grid-column: 1 / 7; }
  .mix__beeld { grid-column: 7 / 13; }
}

/* ---------- volg het: Mijn plaat op de telefoon ---------- */
.volg__lijst { width: 100%; max-width: 30rem; margin-block: var(--space-xl); list-style: none; }
.volg__lijst li { padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); font-weight: 600; }
.volg__lijst li:last-child { border-bottom: 1px solid var(--color-rule); }
.telefoons { display: flex; justify-content: center; align-items: center; }
.telefoon { flex: 0 0 auto; width: 34%; padding: var(--space-xs); border-radius: var(--radius-telefoon); background: var(--telefoon-rand); box-shadow: var(--schaduw-telefoon); }
.telefoon img { width: 100%; border-radius: calc(var(--radius-telefoon) - var(--space-xs)); }
.telefoon--midden { position: relative; z-index: var(--z-raised); width: 40%; margin-inline: -3%; }
@media (max-width: 47.99rem) {
  .telefoon:first-child { display: none; }
  .telefoon--midden { width: 54%; margin-inline: 0 -6%; }
  .telefoon--zij { width: 46%; }
}
@media (min-width: 60rem) {
  .volg__tekst { grid-column: 1 / 6; }
  .telefoons { grid-column: 6 / 13; }
}
[data-variant="3d"] .telefoon { box-shadow: 0 0 0 1px var(--color-rule); }

[data-variant="3d"] .mensbeeld { padding: var(--space-xs); background: var(--color-paper-2); outline: 1px solid var(--color-rule); outline-offset: -1px; }
[data-variant="3d"] .mensbeeld img { filter: saturate(0.7) brightness(0.8); }

/* ---------- voor wie ---------- */
.wie__intro { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.wie__zin { font-size: var(--text-lead); max-width: 40ch; color: var(--color-ink-2); }
@media (min-width: 60rem) { .wie__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; } .wie__intro .sectie-kop { grid-column: 1 / 8; } .wie__zin { grid-column: 8 / 13; } }
.wie__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); list-style: none; }
@media (min-width: 60rem) { .wie__rij { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wie__item { display: grid; gap: var(--space-xs); align-content: start; }
.wie__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wie__kop { margin-top: var(--space-xs); font-size: var(--text-xl); line-height: 1.1; }
.wie__item p { color: var(--color-ink-2); }

/* ---------- prijs ---------- */
.prijs__rooster { display: grid; gap: var(--space-2xl); }
@media (min-width: 60rem) { .prijs__rooster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.prijs__links { display: grid; gap: var(--space-md); }
.prijs__bedrag { font-family: var(--font-display); font-weight: 600; font-size: var(--text-price); line-height: 0.82; letter-spacing: -0.045em; margin-top: var(--space-lg); }
[data-variant="foto"] .prijs__bedrag { color: var(--signaal); }
.prijs__btw { font-size: var(--text-lg); }
.prijs__rechts { display: grid; gap: var(--space-xl); justify-items: start; }
.prijs__lijst { list-style: none; width: 100%; }
.prijs__lijst li { padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.prijs__extra { width: 100%; }
.prijs__extra > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); font-weight: 600; }
.prijs__extra > div:last-child { border-bottom: 1px solid var(--color-rule); }

/* ---------- vragen ---------- */
.vragen__rooster { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) {
  .vragen__rooster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .vragen__kop { grid-column: 1 / 5; position: sticky; top: var(--space-xl); }
  .vragen__lijst { grid-column: 6 / 13; }
}
.vragen__lijst details { border-top: 1px solid var(--color-rule); }
.vragen__lijst details:last-child { border-bottom: 1px solid var(--color-rule); }
.vragen__lijst summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding-block: var(--space-sm); font-weight: 600; font-size: var(--text-lg); list-style: none; cursor: pointer; }
.vragen__lijst summary::-webkit-details-marker { display: none; }
.vragen__lijst summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; transition: transform var(--dur-short) var(--ease-in-out); }
.vragen__lijst details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) { .vragen__lijst summary:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.vragen__lijst summary:focus-visible { outline-offset: -2px; }
.vragen__lijst details:not([open]) > p { display: none; }
.vragen__lijst details p { padding-bottom: var(--space-lg); max-width: 56ch; color: var(--color-ink-2); }

/* ---------- voet ---------- */
.voet { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.voet__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.voet__merk { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em; }
.voet__wie { color: var(--color-ink-2); }
.voet__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); list-style: none; }
.voet__links a, .voet__wie a { display: inline-flex; align-items: center; min-height: 44px; }
.voet__wie { display: grid; gap: var(--space-2xs); }
.voet__kwijt { font-size: var(--text-sm); }

/* ---------- voorwaarden en privacy ---------- */
.juridisch { padding-block: var(--space-2xl) var(--section-gap-s); }
.juridisch__tekst { display: grid; gap: var(--space-md); max-width: 65ch; }
.juridisch__kop { font-size: var(--text-display-s); line-height: 1; }
.juridisch__tekst .melding { margin-block: var(--space-sm) var(--space-md); }
.juridisch__tekst h2 { margin-top: var(--space-lg); font-size: var(--text-2xl); line-height: 1.1; }
.juridisch__tekst ul { display: grid; gap: var(--space-xs); padding-left: 1.2em; }
.juridisch__gegevens > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.juridisch__gegevens > div:last-child { border-bottom: 1px solid var(--color-rule); }
.juridisch__gegevens dt { color: var(--color-muted); font-size: var(--text-sm); }
.juridisch__open { font-weight: 600; text-decoration: underline wavy var(--color-accent); text-underline-offset: 0.2em; }

/* ---------- account: inloggen, wachtwoord kiezen, Mijn platen ---------- */
.account { display: grid; gap: var(--space-2xl); align-content: start; padding-block: var(--space-2xl) var(--section-gap-s); }
.account__blok { display: grid; gap: var(--space-lg); max-width: 32rem; }
.account__blok--rand { padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.account__kop { font-size: var(--text-display-s); line-height: 1; }
.account__subkop { font-size: var(--text-2xl); line-height: 1.1; }
.account__subkop:focus:not(:focus-visible) { outline: none; }
.account__intro { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 40ch; overflow-wrap: anywhere; }
.account__wie { display: grid; gap: var(--space-sm); }
.account__fout { color: var(--color-error); font-weight: 600; }
.account__melding { font-weight: 600; }
.account__melding:empty { display: none; }
.account__melding.is-fout { color: var(--color-error); }
.account__link { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.account .knop { justify-self: start; }
.platen { display: grid; gap: var(--space-lg); list-style: none; padding: 0; }
@media (min-width: 48rem) { .platen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); } }
.plaat-kaart { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.plaat-kaart__kop { font-size: var(--text-2xl); line-height: 1.1; }
.plaat-kaart__feiten > div { display: grid; grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.plaat-kaart__feiten dt { color: var(--color-muted); }

/* ---------- één reveal ---------- */
/* Inkomen bij scrollen: tekst schuift omhoog in beeld, beeld komt rustig op zijn plek. Zonder JavaScript staat alles er gewoon. */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-inkom) var(--ease-out), transform var(--dur-inkom) var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-reveal="beeld"] { transform: translateY(20px) scale(0.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* De opening komt bij het laden binnen: kop, zin, knoppen na elkaar. */
.held__blok > * { animation: held-in var(--dur-inkom) var(--ease-out) both; }
.held__blok > :nth-child(2) { animation-delay: 140ms; }
.held__blok > :nth-child(3) { animation-delay: 280ms; }
@keyframes held-in { from { opacity: 0; transform: translateY(28px); } }

/* ---------- verhaal en slot ---------- */
.verhaal, .slot { padding-block: var(--space-4xl); background: var(--color-paper); color: var(--color-ink); }
.verhaal__rooster { display: grid; gap: var(--space-2xl); }
.verhaal__kop { max-width: 16ch; }
.verhaal__stemmen { display: grid; gap: var(--space-md); list-style: none; }
.verhaal__stemmen li { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.1; max-width: 26ch; }
.verhaal__slot { font-size: var(--text-lead); max-width: 38ch; color: var(--color-accent); font-weight: 600; }
@media (min-width: 60rem) { .verhaal__rooster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); } .verhaal__kop { grid-column: 1 / 7; } .verhaal__stemmen { grid-column: 7 / 13; grid-row: 1 / 3; } .verhaal__slot { grid-column: 1 / 6; align-self: end; } }
.slot__blok { display: grid; gap: var(--space-lg); justify-items: start; }
.slot__zin { font-size: var(--text-lead); max-width: 40ch; }

/* ---------- kiespagina ---------- */
.kies { min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.kies__kop { display: grid; gap: var(--space-xs); padding-block: var(--space-xl) var(--space-lg); }
.kies__kop h1 { font-size: var(--text-display-s); line-height: 1; max-width: 22ch; }
.kies__kop p { color: var(--color-ink-2); font-size: var(--text-lead); }
.kies__panelen { display: grid; gap: var(--space-3xs); list-style: none; }
@media (min-width: 48rem) { .kies__panelen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paneel { position: relative; display: grid; align-items: end; min-height: 62svh; height: 100%; overflow: hidden; color: var(--papier); text-decoration: none; isolation: isolate; }
.paneel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.paneel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--color-scrim) 0%, transparent 50%); }
.paneel__label { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-xl) var(--gutter); font-family: var(--font-display); font-weight: 600; font-size: var(--text-section); line-height: 1; letter-spacing: -0.03em; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.14em; }
.paneel:focus-visible { outline: 3px solid var(--signaal); outline-offset: -3px; }
@media (hover: hover) { .paneel:hover .paneel__label { text-decoration-color: var(--signaal); } }
@media (min-width: 48rem) { .paneel { min-height: 0; } }

/* ---------- bestellen ---------- */
.kop--vast { --kop-vlak: var(--color-paper); color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.kop--vast :focus-visible { outline-color: var(--color-focus); }
.kop--vast .kop__links a:not(.kop__bestel):not([data-account]) { text-decoration: underline; }
.bestel { display: grid; gap: var(--space-2xl); padding-block: var(--space-xl) var(--section-gap-s); }
@media (min-width: 60rem) { .bestel { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
.bestel.is-klaar { grid-template-columns: minmax(0, 1fr); }
.bestel.is-klaar .samenvatting { display: none; }

.voortgang { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); list-style: none; margin-bottom: var(--space-xl); }
.voortgang li { padding-top: var(--space-xs); border-top: 4px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.voortgang li.is-gedaan { border-top-color: var(--color-ink); color: var(--color-ink-2); }
.voortgang li[aria-current="step"] { border-top-color: var(--color-ink); color: var(--color-ink); font-weight: 600; }
.bestel.is-klaar .voortgang { display: none; }

.stap-scherm { display: grid; gap: var(--space-xl); }
.stap-scherm__kop { font-size: var(--text-display-s); line-height: 1; max-width: 18ch; }
.stap-scherm__kop:focus:not(:focus-visible) { outline: none; }
.stap-scherm__kop:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.stap-scherm__intro { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 40ch; margin-top: calc(-1 * var(--space-md)); }
html.js .stap-scherm:not(.is-actief) { display: none; }

.velden { display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) { .velden--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); } .veld--breed { grid-column: 1 / -1; } }
.veld { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.veld > label, .veld legend, .groep legend { font-weight: 600; font-size: var(--text-md); }
.veld__optioneel { font-weight: 400; color: var(--color-muted); }
.invoer { width: 100%; min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-field); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out); }
[data-variant="3d"] .invoer { background: var(--color-paper-2); color-scheme: dark; }
@media (hover: hover) { .invoer:hover { background: var(--color-paper-2); } [data-variant="3d"] .invoer:hover { background: var(--color-paper-3); } }
.invoer:focus-visible { outline-color: var(--color-focus); }
.invoer[aria-invalid="true"] { border-color: var(--color-error); }
select.invoer { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--space-2xl); }
.hulp { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.hulp.is-fout { color: var(--color-error); font-weight: 600; }
/* Wachtwoord met een toonknop (tekst, geen oog-icoon) binnen het veld. */
.ww-veld { position: relative; }
.ww-veld .invoer { padding-right: calc(var(--space-2xl) + var(--space-lg)); }
.toon-ww { position: absolute; top: 50%; right: var(--space-2xs); transform: translateY(-50%); min-width: 72px; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: inherit; font-size: var(--text-sm); font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (hover: hover) { .toon-ww:hover { background: var(--color-paper-2); } }
.toon-ww:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

fieldset.groep { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--space-sm); }
fieldset.groep legend { padding: 0; margin-bottom: var(--space-sm); }
.keuzes { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze label { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-field); border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .keuze label:hover { background: var(--color-paper-2); } }
.keuze input:checked + label { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.keuze input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.groep[aria-invalid="true"] .keuze label { border-color: var(--color-error); }

.regel-optie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.regel-optie:last-of-type { border-bottom: 1px solid var(--color-rule); }
.regel-optie__tekst { display: grid; gap: var(--space-2xs); min-width: 0; flex: 1 1 16rem; }
.regel-optie__tekst strong { font-weight: 600; font-size: var(--text-lg); }
.regel-optie__tekst span { color: var(--color-ink-2); }
.teller { display: flex; align-items: center; gap: var(--space-sm); }
.teller button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--color-ink); border-radius: 50%; background: transparent; font-size: var(--text-xl); line-height: 1; transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .teller button:hover:not(:disabled) { background: color-mix(in oklab, var(--color-ink) 10%, transparent); } }
.teller button:disabled { opacity: 0.55; cursor: not-allowed; }
.teller output { min-width: 2ch; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); }
.schakel { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 48px; cursor: pointer; font-weight: 600; }
.schakel input { appearance: none; position: relative; width: 56px; height: 32px; margin: 0; border: 1px solid var(--color-field); border-radius: var(--radius-pill); background: var(--color-paper-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.schakel input::before { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-in-out); }
.schakel input:checked { background: var(--color-accent); border-color: var(--color-accent); }
.schakel input:checked::before { transform: translateX(24px); background: var(--color-accent-ink); }
.schakel input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.advies { font-size: var(--text-sm); font-weight: 600; }

.acties { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-top: var(--space-md); }
.acties .knop--stil { margin-right: auto; }
.knop .laad { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: laad 0.7s linear infinite; }
@keyframes laad { to { transform: rotate(1turn); } }

.overzicht { display: grid; }
.overzicht > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.overzicht > div:last-child { border-bottom: 1px solid var(--color-rule); }
.overzicht dt { color: var(--color-muted); font-size: var(--text-sm); }
.overzicht dd { min-width: 0; overflow-wrap: anywhere; }
.wijzig { min-height: 44px; padding: 0 var(--space-xs); border: 0; background: transparent; text-decoration: underline; text-underline-offset: 0.18em; font-size: var(--text-sm); }
@media (max-width: 39.99rem) { .overzicht > div { grid-template-columns: minmax(0, 1fr) auto; } .overzicht dd { grid-column: 1 / 2; } .overzicht .wijzig { grid-row: 1 / 3; grid-column: 2; } }
.betaal-extra { display: grid; gap: var(--space-xs); padding-left: var(--space-md); border-left: 1px solid var(--color-rule); }
.voorbeeld-regel { font-size: var(--text-sm); color: var(--color-muted); }

.samenvatting { display: grid; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); }
[data-variant="3d"] .samenvatting { background: var(--color-paper-2); }
@media (min-width: 60rem) { .samenvatting { position: sticky; top: var(--space-xl); } }
.samenvatting__beeld { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.samenvatting h2 { font-size: var(--text-xl); }
.samenvatting dl > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.samenvatting dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.samenvatting__totaal { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-top: var(--space-sm); border-top: 2px solid var(--color-ink); }
.samenvatting__totaal span:first-child { font-weight: 600; }
.samenvatting__bedrag { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.samenvatting__btw { font-size: var(--text-sm); }

.klaar { display: grid; gap: var(--space-xl); max-width: 52rem; }
.klaar__kop { font-size: clamp(2.75rem, 9.5vw, 8.5rem); line-height: 0.92; letter-spacing: -0.02em; word-spacing: 0.04em; max-width: 11ch; }
.melding { padding: var(--space-lg); background: var(--signaal); color: var(--zwart); font-weight: 600; font-size: var(--text-lead); }
.klaar__stappen { display: grid; gap: 0; list-style: none; counter-reset: klaar; }
.klaar__stappen li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); counter-increment: klaar; }
.klaar__stappen li::before { content: counter(klaar); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.2; }
.delen { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.delen__kop { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.1; }
.delen__link { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.9375rem, 3.9vw, 1.5625rem); line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.delen__knoppen { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* Lege status: geen lege regel en geen extra rij-gap (de live-regio blijft in de pagina). */
.delen [data-kopieer-status]:empty { min-height: 0; margin-top: calc(-1 * var(--space-sm)); }
.delen__uitklap summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.delen__uitklap summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.delen__uitklap[open] summary { margin-bottom: var(--space-xs); }
.delen__bericht { padding: var(--space-md); background: var(--insteek-papier); color: var(--insteek-inkt); white-space: pre-line; overflow-wrap: anywhere; }
.akkoord { padding-top: var(--space-md); }
.bestel__flow > .melding { margin-bottom: var(--space-lg); }
.geen-js { padding: var(--space-md); border: 1px solid var(--color-field); }

.kies__panelen > li { display: grid; }

/* ---------- hoesconfigurator ---------- */
.bestel.is-hoes { grid-template-columns: minmax(0, 1fr); }
.bestel.is-hoes .samenvatting { display: none; }
.hoes__werkplaats { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) {
  .hoes__werkplaats { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .hoes__doek-kolom { position: sticky; top: var(--space-lg); }
}
.hoes__doek-kolom { display: grid; gap: var(--space-sm); }
.hoes__doek { display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: none; background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-rule); cursor: default; }
.hoes__doek:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.hoes__tip { font-size: var(--text-sm); color: var(--color-muted); }
.hoes__historie, .laagknoppen { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.hoes__paneel { display: grid; gap: var(--space-xl); min-width: 0; }
.hoes__blok { display: grid; gap: var(--space-sm); justify-items: start; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.hoes__blok > .velden, .hoes__blok > .groep, .hoes__blok > .lagen, .hoes__blok > .veld { width: 100%; }
.hoes__blokkop { font-weight: 600; font-size: var(--text-lg); }
.hoes__subkop { font-weight: 600; }
.hoes__ai { display: grid; gap: var(--space-sm); justify-items: start; width: 100%; padding-top: var(--space-sm); }
.hoes__intro { display: grid; gap: var(--space-md); margin-top: calc(-1 * var(--space-md)); }
.hoes__intro .stap-scherm__intro { margin-top: 0; }
.hoes__later { display: grid; gap: var(--space-2xs); justify-items: start; }
@media (min-width: 60rem) { .hoes__intro { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .hoes__later { justify-items: end; text-align: right; } }
.hoes__later .hulp { min-height: 0; }
.hoes__meer { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.hoes__meer summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 56px; font-weight: 600; font-size: var(--text-lg); list-style: none; cursor: pointer; }
.hoes__meer summary::-webkit-details-marker { display: none; }
.hoes__meer summary::after { content: "+"; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; transition: transform var(--dur-short) var(--ease-in-out); }
.hoes__meer[open] summary::after { transform: rotate(45deg); }
.hoes__meer summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.hoes__meer-inhoud { display: grid; gap: var(--space-xl); padding-bottom: var(--space-lg); }
@media (max-width: 59.99rem) { .hoes-mock { display: none; } }
/* Desktop: het hele vierkant boven de vouw (audit noemde 18rem; met de regel Doe ik later is 24rem nodig, als breedte want het doek is vierkant). */
@media (min-width: 60rem) { .hoes__doek { width: min(100%, calc(100vh - 24rem)); max-height: calc(100vh - 24rem); justify-self: center; } }
.groep--klein legend { font-size: var(--text-sm); }
.label-clash { font-family: var(--font-display); font-weight: 600; }

.hulpknop { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; min-width: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-field); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); line-height: 1.1; text-align: center; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) { .hulpknop:hover:not(:disabled) { background: var(--color-paper-2); border-color: var(--color-ink); } }
.hulpknop:active:not(:disabled) { transform: translateY(1px); }
.hulpknop:disabled { opacity: 0.55; cursor: not-allowed; }
.hulpknop:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.hulpknop--sterk { white-space: nowrap; border-color: var(--color-ink); font-size: var(--text-md); min-height: 48px; padding: 0 var(--space-lg); }
.hulpknop--bestand input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hulpknop--bestand:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.stalen { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.staal input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.staal label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md) 0 var(--space-2xs); border: 1px solid var(--color-field); border-radius: var(--radius-pill); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) 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(--color-rule); }
@media (hover: hover) { .staal label:hover { background: var(--color-paper-2); } }
.staal input:checked + label { border-color: var(--color-ink); background: var(--color-paper-2); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-ink); }
.staal input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.vinkje { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; }
.vinkje input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-ink); }
.lagen { list-style: none; border-bottom: 1px solid var(--color-rule); }
.lagen li { border-top: 1px solid var(--color-rule); }
.lagen__leeg { padding-block: var(--space-sm); color: var(--color-muted); }
.laag { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--space-sm); border: 0; background: transparent; color: inherit; text-align: left; overflow-wrap: anywhere; transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .laag:hover:not(.is-gekozen) { background: var(--color-paper-2); } }
.laag.is-gekozen { background: var(--color-ink); color: var(--color-paper); font-weight: 600; }
.laag:focus-visible { outline-offset: -2px; }

.ai-bezig { display: grid; gap: var(--space-xs); width: 100%; }
.ai-bezig__tekst { font-weight: 600; }
.ai-bezig progress { width: 100%; height: 8px; accent-color: var(--color-ink); }
.ai-bezig .hulpknop { justify-self: start; }
.ai-fout { display: grid; gap: var(--space-xs); justify-items: start; width: 100%; }
.ai-fout__tekst { color: var(--color-error); font-weight: 600; font-size: var(--text-sm); }
input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--color-ink); }
input[type="range"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.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); }

.samenvatting__hoes { display: flex; align-items: center; gap: var(--space-sm); }
.samenvatting__duim { flex-shrink: 0; }
.samenvatting__hoes img { width: 72px; height: 72px; box-shadow: 0 0 0 1px var(--color-rule); }
.overzicht__hoes { width: 80px; height: 80px; box-shadow: 0 0 0 1px var(--color-rule); }
.klaar__hoes { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 40rem) { .klaar__hoes { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.klaar__hoesbeeld img { width: 100%; max-width: 15rem; height: auto; aspect-ratio: 1; box-shadow: 0 0 0 1px var(--color-rule); }
.klaar__hoestekst { display: grid; gap: var(--space-sm); justify-items: start; }

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.akkoord__let-op { margin-bottom: var(--space-sm); font-weight: 600; max-width: 52ch; }