/* ==========================================================================
   Hard IJs
   Kleur, font, ruimte en beweging komen uit assets/tokens.css (gegenereerd uit
   het Hard IJs-designsystem). Hier staan geen eigen waarden, alleen layout.
   NAAM, BYLINE, DOMEIN en de URL's staan bovenin main.js.
   Breekpunten (custom properties werken niet in media queries):
   640px = --hi-breekpunt-sm, 960px = --hi-breekpunt-md, 1280px = --hi-breekpunt-lg
   ========================================================================== */

/* Voorstel, nog niet in het designsystem: één koude steunkleur. De kleur van
   het ijs in de foto, lichter. Regel: wit is voor taal, ijsblauw is voor alles
   wat telt of wijst (mono-labels, cijfers, vierkanten, iconen). Rood blijft
   de punt en de ene knop. Bij akkoord hoort dit token in tokens.json. */
:root {
  --hi-ijsblauw: #9BD3E6;
  --hi-ijsblauw-35: rgba(155, 211, 230, 0.35);
}

/* Basis ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hi-ijs);
  color: var(--hi-ijswit);
  font-family: var(--hi-font-sans);
  font-size: var(--hi-body-md-size);
  line-height: var(--hi-body-md-line);
  font-weight: var(--hi-body-md-weight);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Korrel op 0,04 over alles: zwart is niet plat */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  background-image: url('assets/korrel.svg');
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: var(--hi-h2-weight); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--hi-ijswit);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--hi-container-max) + 2 * var(--hi-gutter-desktop));
  margin-inline: auto;
  padding-inline: var(--hi-gutter-mobile);
}
@media (min-width: 960px) {
  .wrap { padding-inline: var(--hi-gutter-desktop); }
}

/* Typografie ------------------------------------------------------------- */

.display-xl {
  /* 22vw op mobiel, begrensd zodat de naam altijd binnen de gutters past */
  font-size: min(var(--hi-display-xl-size-mobiel), calc((100vw - 2 * var(--hi-gutter-mobile)) / 4.2));
  line-height: var(--hi-display-xl-line);
  font-weight: var(--hi-display-xl-weight);
  letter-spacing: var(--hi-display-xl-tracking);
  white-space: nowrap;
}
@media (min-width: 640px) {
  .display-xl { font-size: var(--hi-display-xl-size); }
}

h2 {
  font-size: var(--hi-h2-size);
  line-height: var(--hi-h2-line);
  font-weight: var(--hi-h2-weight);
  letter-spacing: var(--hi-h2-tracking);
  max-width: var(--hi-container-reading);
  text-wrap: balance;
}

.niets {
  margin-top: var(--hi-space-9);
  font-size: var(--hi-display-lg-size);
  line-height: var(--hi-display-lg-line);
  font-weight: var(--hi-display-lg-weight);
  letter-spacing: var(--hi-display-lg-tracking);
}

h3 {
  font-size: var(--hi-h3-size);
  line-height: var(--hi-h3-line);
  font-weight: var(--hi-h3-weight);
  letter-spacing: var(--hi-h3-tracking);
}

.label,
h2.label,
h3.label {
  font-family: var(--hi-font-mono);
  font-size: var(--hi-label-size);
  line-height: var(--hi-label-line);
  font-weight: var(--hi-label-weight);
  letter-spacing: var(--hi-label-tracking);
  text-transform: uppercase;
  color: var(--hi-ijsblauw);
}
/* Bronnen en legenda blijven op de achtergrond */
.bewijs-tekst .label,
.legenda { color: var(--hi-rijp-55); }

.kicker {
  font-family: var(--hi-font-mono);
  font-size: var(--hi-kicker-size);
  line-height: var(--hi-kicker-line);
  font-weight: var(--hi-kicker-weight);
  letter-spacing: var(--hi-kicker-tracking);
  color: var(--hi-rijp-75);
}
.kicker .tekstlink { color: var(--hi-ijswit); }

.tekst {
  max-width: var(--hi-container-reading);
  margin-top: var(--hi-space-6);
}
p, li { text-wrap: pretty; }

.meetregel {
  max-width: var(--hi-container-reading);
  margin-top: var(--hi-space-6);
  font-size: var(--hi-body-sm-size);
  line-height: var(--hi-body-sm-line);
  color: var(--hi-rijp-55);
}

/* Links en knoppen --------------------------------------------------------
   Hover: de onderstreep tekent van links naar rechts in dur-fast. Geen
   kleurwissel, behalve de rode knop (punt naar punt-diep). */

.streep {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: var(--hi-space-1);
  transition: background-size var(--hi-dur-fast) var(--hi-ease);
}
a:hover .streep,
a:focus-visible .streep,
button:hover .streep,
button:focus-visible .streep { background-size: 100% 1px; }

/* Tekstlink: onderstreep 1px op 4px afstand; bij hover tekent de volle lijn erover */
.tekstlink .streep {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--hi-rijp-55), var(--hi-rijp-55));
  background-size: 0% 1px, 100% 1px;
}
.tekstlink:hover .streep,
.tekstlink:focus-visible .streep { background-size: 100% 1px, 100% 1px; }

.knop {
  display: inline-block;
  padding: var(--hi-space-3) var(--hi-space-4);
  border: 1px solid var(--hi-ijswit);
  border-radius: var(--hi-radius);
  box-shadow: var(--hi-shadow);
  color: var(--hi-ijswit);
  font-size: var(--hi-body-md-size);
  font-weight: var(--hi-h2-weight);
}
@media (min-width: 960px) {
  .knop { padding: var(--hi-space-3) var(--hi-space-5); }
}

/* De ene rode knop. Tekst op body-lg bold: ijswit op punt haalt 4,0:1 en telt zo als grote tekst. */
.knop-rood {
  border-color: var(--hi-punt);
  background: var(--hi-punt);
  font-size: var(--hi-body-lg-size);
  transition: background-color var(--hi-dur-fast) var(--hi-ease), border-color var(--hi-dur-fast) var(--hi-ease);
}
.knop-rood:hover,
.knop-rood:active {
  border-color: var(--hi-punt-diep);
  background: var(--hi-punt-diep);
}
.knop-rood:focus-visible { box-shadow: 0 0 0 var(--hi-space-1) var(--hi-punt-was); }

/* Blok 1: hero op de ijsfoto --------------------------------------------- */

.hero {
  position: relative;
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Full-bleed. Iets uitvergroot vanuit linksonder, zodat de scheur boven de naam
   langs loopt en de tekst op het rustige deel staat. Onderaan vloeit de foto
   over in het ijs van de pagina (wens van Patrick; het merkboek zegt nog: geen
   verloop over de foto). */
.hero-foto {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 118%;
  height: 118%;
  max-width: none;
  object-fit: cover;
  object-position: 0% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.78) 62%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.78) 62%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
}

/* Het picture-element ligt als laag achter de tekst en doet zo niet mee in de
   flex-verdeling van de hero (met display: contents doet het source-element dat wel) */
.hero picture {
  position: absolute;
  inset: 0;
}

/* Staand scherm: de uitsnede vult de hero precies, de scheur loopt schuin boven de naam
   langs, en het vervagen begint lager zodat het lichtere ijs achter de naam zichtbaar blijft */
@media (max-aspect-ratio: 2/3) {
  .hero-foto {
    width: 100%;
    height: 100%;
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.78) 74%, rgba(0, 0, 0, 0.45) 85%, rgba(0, 0, 0, 0.16) 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.78) 74%, rgba(0, 0, 0, 0.45) 85%, rgba(0, 0, 0, 0.16) 94%, transparent 100%);
  }
}

.hero-boven,
.hero-woorden { position: relative; }

.hero-boven {
  display: flex;
  justify-content: space-between;
  gap: var(--hi-space-4);
  padding-top: var(--hi-space-5);
}
@media (min-width: 960px) {
  .hero-boven { padding-top: var(--hi-space-6); }
}
/* Smal scherm: de byline krijgt de hele regel. De link rechtsboven valt weg; dezelfde
   link staat onder de naam. */
.hero-boven .kicker { white-space: nowrap; }
@media (max-width: 639px) {
  .hero-boven .kicker + .kicker { display: none; }
}

.hero-woorden {
  padding-top: var(--hi-space-9);
  padding-bottom: var(--hi-space-7);
}
@media (min-width: 960px) {
  .hero-woorden { padding-top: var(--hi-space-11); }
}

/* Geluid in de hero: een woord als knop, de resterende tijd, en lijnen die meebewegen
   met de echte stem. Staan stil zolang er geen geluid is. */
/* Het blok is zo breed als de naam. Het geluid telt zelf niet mee voor die breedte
   (width 0) en vult hem daarna helemaal (min-width 100%). */
.naam-blok {
  width: fit-content;
  max-width: 100%;
}
.geluid {
  margin-top: var(--hi-space-6);
  width: 0;
  min-width: 100%;
}
.geluid-bron { width: 100%; }
.geluid-eigen { display: none; }
.js .geluid-bron { display: none; }
.js .geluid-eigen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hi-space-3) var(--hi-space-4);
}
/* Kleine vierkante afspeelknop: driehoek voor afspelen, twee balken voor pauze.
   40px zichtbaar, 48px raakvlak. Hover is het vlak van een ghost-knop. */
.geluid-knop {
  appearance: none;
  position: relative;
  flex: none;
  width: calc(var(--hi-space-6) + var(--hi-space-2));
  height: calc(var(--hi-space-6) + var(--hi-space-2));
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--hi-ijswit);
  border-radius: var(--hi-radius);
  box-shadow: var(--hi-shadow);
  background: none;
  color: var(--hi-ijswit);
  cursor: pointer;
  transition: background-color var(--hi-dur-fast) var(--hi-ease);
}
.geluid-knop::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--hi-space-1));
}
.geluid-knop:hover { background: var(--hi-rijp-08); }
.geluid-knop svg {
  width: var(--hi-space-4);
  height: var(--hi-space-4);
  fill: currentColor;
}
.geluid-knop .teken-pauze,
.geluid.bezig .geluid-knop .teken-speel { display: none; }
.geluid.bezig .geluid-knop .teken-pauze { display: block; }
.geluid-tijd {
  flex: none;
  min-width: var(--hi-space-7);
  font-family: var(--hi-font-mono);
  font-size: var(--hi-kicker-size);
  line-height: var(--hi-kicker-line);
  font-weight: var(--hi-kicker-weight);
  letter-spacing: var(--hi-kicker-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--hi-ijsblauw);
}
.golf {
  flex: 1;
  min-width: 0;
  height: var(--hi-space-6);
  display: flex;
  align-items: center;
  /* Rechts uitgelijnd: de laatste lijn staat precies onder de rechterrand van de punt */
  justify-content: flex-end;
  gap: var(--hi-space-1);
  overflow: hidden;
}
.golf span {
  flex: none;
  width: 2px;
  height: 100%;
  background: var(--hi-ijsblauw-35);
  transform: scaleY(0.05);
}
.geluid.speelt .golf span,
.golf span.gehoord { background: var(--hi-ijsblauw); }
@media (min-width: 960px) {
  .golf { height: var(--hi-space-7); }
}

/* De punt is een vierkant, geen punt-teken */
.punt {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.05em;
  background: var(--hi-punt);
  vertical-align: baseline;
}

.onderregel {
  margin-top: var(--hi-space-6);
  max-width: var(--hi-container-reading);
  font-size: var(--hi-body-lg-size);
  line-height: var(--hi-body-lg-line);
  font-weight: var(--hi-body-lg-weight);
  color: var(--hi-rijp-75);
  text-wrap: balance;
}

/* De belofte onder de pay-off: kleiner, zodat de pay-off de hoofdregel blijft */
.belofte {
  margin-top: var(--hi-space-4);
  max-width: var(--hi-container-reading);
  color: var(--hi-rijp-75);
}
/* Kleine regel onder de knoppen van de hero */
.acties-noot {
  margin-top: var(--hi-space-4);
  font-size: var(--hi-body-sm-size);
  line-height: var(--hi-body-sm-line);
  color: var(--hi-rijp-75);
}

.acties {
  margin-top: var(--hi-space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hi-space-4) var(--hi-space-5);
}

/* Ademruimte in de hero: naam, geluid, onderregel en knoppen staan los van elkaar.
   Op een groot scherm nog een stap ruimer. */
@media (min-width: 960px) {
  .geluid,
  .onderregel { margin-top: var(--hi-space-7); }
  .acties { margin-top: var(--hi-space-8); }
}

/* Blokken ---------------------------------------------------------------- */

.blok {
  padding-block: var(--hi-space-9);
  border-bottom: 1px solid var(--hi-rijp-14);
}
.blok-slot {
  border-bottom: 0;
  padding-bottom: var(--hi-space-12);
}
@media (min-width: 960px) {
  .blok { padding-block: var(--hi-space-10); }
  .blok-slot { padding-bottom: var(--hi-space-12); }
}

/* Regels met een lijn erboven: een lijn vervangt een kader */
.regels { max-width: var(--hi-container-reading); }
.regels li {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-4);
}
.regels li:last-child { border-bottom: 1px solid var(--hi-rijp-14); }

/* Blok 2: het bewijs, als beeld in plaats van als los getal ---------------- */

.bewijs {
  margin-top: var(--hi-space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hi-space-8);
}
.bewijs-item {
  min-width: 0;
  margin: 0;
  border-top: 1px solid var(--hi-rijp-14);
  padding-top: var(--hi-space-5);
}

/* De afleveringen in cijfer-stijl: 1, 2 en 3 staan er, de rest komt nooit */
.strip {
  margin-top: var(--hi-space-4);
  font-family: var(--hi-font-mono);
  font-size: var(--hi-cijfer-size);
  line-height: var(--hi-cijfer-line);
  font-weight: var(--hi-cijfer-weight);
  letter-spacing: var(--hi-cijfer-tracking);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  /* Een spatie in mono is een hele letterbreedte: trek de getallen naar elkaar toe */
  word-spacing: -0.3em;
  color: var(--hi-ijsblauw);
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.strip-uit::after {
  content: attr(data-rest);
  color: var(--hi-ijsblauw-35);
}

/* De telling: twintig vierkanten, de vorm van de punt. Gevuld luistert, leeg niet. */
.telling {
  margin-top: var(--hi-space-5);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--hi-space-2);
}
.telling span {
  aspect-ratio: 1;
  background: var(--hi-ijsblauw);
  transition: opacity var(--hi-dur-fast) var(--hi-ease);
  transition-delay: calc(var(--hi-dur-reveal) / 20 * var(--i, 0));
}
.telling .leeg,
.sleutel.leeg {
  background: none;
  border: 1px solid var(--hi-ijsblauw-35);
}
/* Telt één keer op als het blok in beeld komt (main.js) */
.telling.wacht span {
  opacity: 0;
  transition: none;
}
@media (min-width: 640px) {
  .telling {
    grid-template-columns: repeat(20, 1fr);
    gap: var(--hi-space-3);
  }
}

.legenda {
  margin-top: var(--hi-space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hi-space-2);
}
.sleutel {
  width: var(--hi-space-3);
  height: var(--hi-space-3);
  background: var(--hi-ijsblauw);
}
.legenda .sleutel.leeg { margin-left: var(--hi-space-4); }

.bewijs-tekst {
  margin-top: var(--hi-space-6);
  display: grid;
  gap: var(--hi-space-4) var(--hi-space-7);
}
.bewijs-tekst h3,
.bewijs-tekst p { max-width: var(--hi-container-reading); }
@media (min-width: 960px) {
  /* Links de uitspraak met de bron er direct onder, rechts de uitleg */
  .bewijs-tekst {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--hi-space-3);
  }
  .bewijs-tekst .label { grid-column: 1; }
  .bewijs-tekst p:not(.label) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.slot-tekst { margin-top: var(--hi-space-8); }

/* Iconen: alleen rechte lijnen en vierkanten, de vormen van de kras en de punt.
   Lijn 1,5px, geen rondingen, geen vulling behalve het kleine vierkant. */
.icoon {
  display: block;
  width: var(--hi-space-7);
  height: var(--hi-space-7);
  margin-bottom: var(--hi-space-5);
  fill: none;
  stroke: var(--hi-ijsblauw);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
/* De lijn blijft 1,5px, hoe groot het icoon ook staat */
.icoon * { vector-effect: non-scaling-stroke; }
.icoon .vol {
  fill: var(--hi-ijsblauw);
  stroke: none;
}

/* Gevuld vierkant voor doen, leeg voor laten */
.merk {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  background: var(--hi-ijsblauw);
  vertical-align: 0.08em;
}
.merk.leeg {
  background: none;
  border: 1px solid var(--hi-ijsblauw);
}

/* Blok 3: drie kolommen -------------------------------------------------- */

.kolommen {
  margin-top: var(--hi-space-6);
  display: grid;
}
.kolommen article {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-5) var(--hi-space-7);
}
.kolommen article:last-child { padding-bottom: 0; }
.kolommen p {
  margin-top: var(--hi-space-4);
  max-width: var(--hi-container-reading);
}
@media (min-width: 960px) {
  .kolommen {
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--hi-rijp-14);
  }
  .kolommen article {
    border-top: 0;
    padding: var(--hi-space-6) var(--hi-space-5) 0;
  }
  .kolommen article + article { border-left: 1px solid var(--hi-rijp-14); }
  .kolommen article:first-child { padding-left: 0; }
  .kolommen article:last-child { padding-right: 0; }
}

/* Cijferrijen: getal links, wat het zegt in het midden, wat het voor jullie
   betekent rechts. Op het raster van drie kolommen, een lijn per rij. */
.cijferrijen {
  margin-top: var(--hi-space-8);
  container-type: inline-size;
}
.cijferrijen li {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-5) var(--hi-space-6);
  display: grid;
  gap: var(--hi-space-3);
}
.cijferrijen li:last-child { border-bottom: 1px solid var(--hi-rijp-14); }
.cijfer {
  display: block;
  font-family: var(--hi-font-mono);
  font-size: var(--hi-cijfer-size);
  line-height: var(--hi-cijfer-line);
  font-weight: var(--hi-cijfer-weight);
  letter-spacing: var(--hi-cijfer-tracking);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--hi-ijsblauw);
}
.rij-stelling,
.rij-uitleg { max-width: var(--hi-container-reading); }
.rij-uitleg { color: var(--hi-rijp-75); }
@media (min-width: 960px) {
  .cijferrijen li {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: start;
  }
  .rij-stelling,
  .rij-uitleg {
    padding-left: var(--hi-space-5);
    padding-top: var(--hi-space-3);
  }
  .cijfer { font-size: min(var(--hi-cijfer-size), calc((100cqi / 3 - var(--hi-space-5)) / 1.9)); }
}
.cijferrijen + .meetregel { margin-top: var(--hi-space-4); }

/* De vragen: uitklapbaar, een lijn per vraag zoals de regels elders. Geen animatie. */
.vraagbaak {
  margin-top: var(--hi-space-6);
  max-width: var(--hi-container-reading);
}
.vraagbaak details { border-top: 1px solid var(--hi-rijp-14); }
.vraagbaak details:last-child { border-bottom: 1px solid var(--hi-rijp-14); }
.vraagbaak summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--hi-space-4);
  padding-block: var(--hi-space-4);
  font-weight: var(--hi-h3-weight);
  cursor: pointer;
}
/* Plus en min als teken dat de vraag open kan: een letterteken, geen icoon */
.vraagbaak summary::after {
  content: '+';
  flex: none;
  font-family: var(--hi-font-mono);
  font-weight: var(--hi-label-weight);
  color: var(--hi-ijsblauw);
}
.vraagbaak details[open] summary::after { content: '\2212'; }
.vraagbaak summary::-webkit-details-marker { display: none; }
.vraagbaak summary:hover .streep,
.vraagbaak summary:focus-visible .streep { background-size: 100% 1px; }
.vraagbaak p {
  padding-bottom: var(--hi-space-5);
  color: var(--hi-rijp-75);
}
.maker-naam { margin-top: var(--hi-space-5); }

/* Twee kolommen: doen en laten */
.kolommen .regels { margin-top: var(--hi-space-4); }
@media (min-width: 960px) {
  .kolommen-2 { grid-template-columns: repeat(2, 1fr); }
}
.kolommen-2 { margin-top: var(--hi-space-8); }

/* Blok 4: niet voor ------------------------------------------------------ */

.niet-voor { margin-top: var(--hi-space-8); }
.niet-voor .regels { margin-top: var(--hi-space-3); }

/* Blok 5: stappen -------------------------------------------------------- */

.stappen {
  margin-top: var(--hi-space-6);
  counter-reset: stap;
  display: grid;
}
.stappen li {
  counter-increment: stap;
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-5) var(--hi-space-7);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--hi-space-4);
  align-items: baseline;
  align-content: start;
}
.stappen li:last-child { padding-bottom: 0; }
/* Nummer in cijfer-stijl op rijp-30, de kop ernaast, de tekst eronder */
.stappen li::before {
  content: counter(stap);
  font-family: var(--hi-font-mono);
  font-size: var(--hi-cijfer-size);
  line-height: var(--hi-cijfer-line);
  font-weight: var(--hi-cijfer-weight);
  letter-spacing: var(--hi-cijfer-tracking);
  color: var(--hi-ijsblauw-35);
}
.stappen p {
  grid-column: 1 / -1;
  margin-top: var(--hi-space-4);
  max-width: var(--hi-container-reading);
}
@media (min-width: 640px) {
  .stappen {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--hi-space-7);
  }
}
@media (min-width: 1280px) {
  .stappen { grid-template-columns: repeat(4, 1fr); }
  .stappen li,
  .stappen li:last-child { padding-bottom: 0; }
}

/* Blok 6: na een jaar ---------------------------------------------------- */

.opbrengst { margin-top: var(--hi-space-6); }

/* Blok 8: de check, op het tweede vlak ----------------------------------- */

.check {
  background: var(--hi-ijs-2);
  padding: var(--hi-space-6);
}

.vragen { margin-top: var(--hi-space-6); }
.vragen li {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hi-space-4);
}
.vragen li:last-child { border-bottom: 1px solid var(--hi-rijp-14); }
.vragen p { max-width: var(--hi-container-reading); }
@media (min-width: 960px) {
  .vragen li {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--hi-space-7);
  }
}

.janee { display: none; }
.js .janee {
  display: flex;
  flex: none;
  gap: var(--hi-space-3);
}
.janee button {
  appearance: none;
  min-width: var(--hi-space-9);
  padding: var(--hi-space-3) var(--hi-space-5);
  border: 1px solid var(--hi-rijp-14);
  border-radius: var(--hi-radius);
  box-shadow: var(--hi-shadow);
  background: transparent;
  color: var(--hi-ijswit);
  font: inherit;
  font-weight: var(--hi-h2-weight);
  cursor: pointer;
}
.janee button:hover { border-color: var(--hi-rijp-30); }
.janee button[aria-pressed="true"] {
  background: var(--hi-ijswit);
  border-color: var(--hi-ijswit);
  color: var(--hi-ijs);
}

/* Het antwoord verschijnt met een fade, zonder verschuiving */
.uitkomst {
  margin-top: var(--hi-space-6);
  min-height: var(--hi-space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: var(--hi-space-3) var(--hi-space-5);
}
.uitkomst-tekst {
  font-size: var(--hi-h3-size);
  line-height: var(--hi-h3-line);
  font-weight: var(--hi-h3-weight);
  letter-spacing: var(--hi-h3-tracking);
}
/* De rode knop met de regel er direct onder: samen zichtbaar, samen weg. Het omhullende
   element doet zelf niet mee in het raster, zodat 'Dan praten we.' op de hoogte van de
   knop staat en de regel er recht onder. */
.plan-blok { display: contents; }
.plan-noot {
  max-width: var(--hi-container-reading);
  font-size: var(--hi-body-sm-size);
  line-height: var(--hi-body-sm-line);
  color: var(--hi-rijp-75);
}
@media (min-width: 640px) {
  .uitkomst { grid-template-columns: auto minmax(0, 1fr); }
  .uitkomst-tekst[data-uitkomst="ja"] { grid-column: 1; grid-row: 1; }
  .uitkomst-tekst[data-uitkomst="nee"] { grid-column: 1 / -1; }
  .plan-blok .knop { grid-column: 2; grid-row: 1; }
  .plan-noot { grid-column: 2; grid-row: 2; }
  /* Zonder JavaScript staat de knop er alleen: dan begint hij gewoon links */
  .uitkomst:not(:has([data-uitkomst="ja"]:not([hidden]))) .plan-blok .knop,
  .uitkomst:not(:has([data-uitkomst="ja"]:not([hidden]))) .plan-noot { grid-column: 1 / -1; }
}
.js .uitkomst > *,
.js .plan-blok > * { animation: verschijn var(--hi-dur-default) var(--hi-ease); }
@keyframes verschijn { from { opacity: 0; } }

/* Vaste ingang naar de check, alleen onder 640px: 1px ijswit lijn op het ijs-canvas.
   main.js bepaalt wanneer hij te zien is. Niet rood. */
.vast-onder {
  position: fixed;
  left: var(--hi-gutter-mobile);
  right: var(--hi-gutter-mobile);
  bottom: max(var(--hi-space-4), env(safe-area-inset-bottom));
  z-index: 3;
  background: var(--hi-ijs);
  text-align: center;
}
.js .vast-onder { animation: verschijn var(--hi-dur-default) var(--hi-ease); }
@media (min-width: 640px) {
  .vast-onder { display: none; }
}
@media (max-width: 639px) {
  /* Wat focus krijgt of via een anker in beeld komt, verdwijnt niet achter de vaste knop */
  html { scroll-padding-bottom: var(--hi-space-9); }
}

/* Footer ----------------------------------------------------------------- */

.voet {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-7);
  font-size: var(--hi-body-sm-size);
  line-height: var(--hi-body-sm-line);
}
.voet-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hi-space-4) var(--hi-space-6);
}
.voet-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hi-space-3) var(--hi-space-5);
  font-family: var(--hi-font-mono);
  font-size: var(--hi-label-size);
  line-height: var(--hi-label-line);
  font-weight: var(--hi-label-weight);
}
.voet-links a { padding-block: var(--hi-space-2); }

/* Minder beweging: alles staat meteen ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .streep,
  .knop-rood,
  .geluid-knop,
  .telling span { transition: none; }
  .js .vast-onder { animation: none; }
  .js .uitkomst > *,
  .js .plan-blok > * { animation: none; }
}