/* ============================================================
   Het kolenhok — de publieke winkel.

   Bovenop home.css, en het leunt op wat daar al staat: de kleuren, de
   knoppen, de kaartpanelen, de rooster. Wat hier bij komt is wat deze ene
   bladzijde eigen maakt.

   Twee beslissingen, en ze komen uit het onderwerp en niet uit een mal:

   · De kop en de drie alinea's bovenaan staan groot in Fraunces, breder dan
     de rest van de bladzijde smal is. Het is een uitleg die iemand leest
     terwijl hij scrolt, en die maat dwingt af dat ze kort blijft.
   · Er beweegt precies één ding op deze bladzijde: de glans over de drie
     koopknoppen. Wie alles laat glimmen, heeft niets meer dat opvalt.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root{
  --hok-letter: "Fraunces", Georgia, "Times New Roman", serif;

  /* Een zachte zalm voor de cijfers: warm genoeg om naast het goud te horen,
     rustig genoeg om niet mee te dingen met de knop. Hij staat in het licht en
     in het donker apart, want een tint die op crème werkt, verdwijnt op inkt. */
  --hok-zalm: #a9714c;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --hok-zalm: #dda27c; }
}

:root[data-theme="dark"]{ --hok-zalm: #dda27c; }

/* ── Het verhaal ─────────────────────────────────────────────────────────── */

section.hok{
  padding-block: clamp(3.4rem, 7vw, 6rem) clamp(1rem, 2vw, 1.6rem);
}

/* Het blok met de kaarten sluit aan bij het verhaal in plaats van er een scherm
   onder te beginnen. Op de schermafdruk van 16 september stond daar een groot
   leeg donker vlak tussen. */
section.hok + .blk{
  padding-top: clamp(1rem, 2vw, 1.8rem);
  border-top: 0;
}

.hok-verhaal{
  max-width: 46ch;
  font-family: var(--hok-letter);
  font-size: clamp(1.15rem, 1.1vw + 1rem, 1.5rem);
  line-height: 1.38;
}

.hok-verhaal h1{
  font-family: var(--hok-letter);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0 0 1.1rem;
}

.hok-verhaal p{
  margin: 0 0 .75rem;
  max-width: 44ch;
}

/* De laatste alinea zijn de voorwaarden en niet het verhaal. Die staat daarom
   een tint rustiger, zonder in een voetnoot te veranderen. */
.hok-verhaal p:last-child{
  font-size: .82em;
  color: var(--muted);
}

/* De formele uitleg ernaast. Sober: kleiner, grijs, en zonder één streepje
   goud. Wie hem leest wil weten wat er afgesproken is en niet nog eens
   overtuigd worden. */

.hok-blad{
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.8rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 980px){
  .hok-blad{ grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr); }
}

.hok-fijn{
  max-width: 44ch;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--body);
  font-size: .82rem;
  line-height: 1.62;
  color: var(--muted);
}

.hok-fijn h2{
  margin: 0 0 .45rem;
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}

.hok-fijn p{ margin: 0; }

/* ── De drie pakketten ───────────────────────────────────────────────────── */

.hok-titel{
  font-family: var(--hok-letter);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 1.4rem;
}

.hok-kaarten{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.hok-kaart{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}

/* Het middelste pakket is de bedoeling, en dat mag te zien zijn: een randje
   in de huiskleur, en verder niets. Geen lint, geen "meest gekozen". */
.hok-kaart--uit{
  border-color: color-mix(in srgb, var(--goud) 55%, transparent);
  box-shadow: 0 22px 50px -34px color-mix(in srgb, var(--goud) 80%, transparent);
}

.hok-bijnaam{
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud-deep);
}

.hok-kaart h2{
  font-family: var(--hok-letter);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  line-height: 1.12;
  margin: .1rem 0 .2rem;
  text-wrap: balance;
}

.hok-regel{
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
}

.hok-meer{
  margin: .1rem 0 1.1rem;
  font-weight: 700;
  color: var(--goud-deep);
}

.hok-meer--leeg{
  color: var(--muted);
  font-weight: 400;
}

/* ── De kaarten met een plaat erop ───────────────────────────────────────── */

/* Vier op een rij zolang dat kan, dan twee bij twee, dan onder elkaar. Niet met
   auto-fit: die zou bij een toevallige breedte drie kaarten naast elkaar zetten
   en de vierde alleen op een rij laten staan. */
.hok-kaarten--plaat{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px){
  .hok-kaarten--plaat{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .hok-kaarten--plaat{ grid-template-columns: minmax(0, 1fr); }
}

/* Deze kaarten dragen hun eigen donker; ze volgen de licht- of donkerstand van
   de bezoeker niet. De tekst staat daarom in een vaste crème en niet in een
   token dat in het licht omslaat naar inkt op een zwarte foto. */
.hok-kaarten--plaat .hok-kaart{
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 430px;
  border-color: rgba(250, 243, 228, .16);
  background: #100b06;
  color: #FAF3E4;
  isolation: isolate;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

.hok-plaat{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Het gereedschap en de gloeiende kolen staan links op de foto, en die zijn
     het onderwerp. De uitsnede houdt ze dus in beeld, bovenaan de kaart; de
     tekst staat eronder, waar de gradiënt het diepst is. */
  object-position: 30% center;
}

/* De gradiënt die de tekst leesbaar houdt. Van niets bovenaan naar bijna
   dicht onderaan, want daar staat alles wat gelezen moet worden. */
.hok-kaarten--plaat .hok-kaart::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(16, 11, 6, .10) 0%,
              rgba(16, 11, 6, .38) 34%,
              rgba(16, 11, 6, .86) 62%,
              rgba(16, 11, 6, .97) 100%);
}

.hok-inhoud{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  /* Onderaan, want daar is de gradiënt het diepst en daar leest het het best. */
  margin-top: auto;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
}

.hok-kaarten--plaat .hok-bijnaam{ color: #e7b463; }
.hok-kaarten--plaat .hok-kaart h2{ color: #FAF3E4; }
.hok-kaarten--plaat .hok-regel{ color: rgba(250, 243, 228, .78); }
.hok-kaarten--plaat .hok-meer{ color: #e7b463; }
.hok-kaarten--plaat .hok-meer--leeg{ color: rgba(250, 243, 228, .6); }

/* Bij hover licht enkel de rand op. De knop is het enige dat beweegt. */
.hok-kaarten--plaat .hok-kaart:hover{
  border-color: color-mix(in srgb, var(--goud) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--goud) 45%, transparent),
              0 26px 60px -34px color-mix(in srgb, var(--goud) 75%, transparent);
}

/* De kar is de kaart die het meest mag opvallen. */
.hok-kaarten--plaat .hok-kaart--uit{
  border-color: color-mix(in srgb, var(--goud) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--goud) 40%, transparent),
              0 26px 58px -30px color-mix(in srgb, var(--goud) 85%, transparent);
}

/* Het veld voor een eigen bedrag. Het staat op de kaart zelf en niet in het
   formulier eronder: wie een bedrag kiest, doet dat terwijl hij naar de drie
   pakketten ernaast kijkt. */
.hok-bedrag{
  display: block;
  margin: .3rem 0 .1rem;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(250, 243, 228, .78);
}

.hok-bedrag-veld{
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .3rem;
  padding: .1rem .7rem;
  border: 1px solid rgba(250, 243, 228, .38);
  border-radius: 12px;
  background: rgba(16, 11, 6, .55);
  font-size: 1.15rem;
  color: #FAF3E4;
}

.hok-bedrag-veld:focus-within{ border-color: var(--goud); }

.hok-bedrag-veld input{
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-weight: 700;
  color: inherit;
}

.hok-bedrag-veld input::placeholder{ color: rgba(250, 243, 228, .4); font-weight: 400; }

/* ── De smederij ─────────────────────────────────────────────────────────── */

/* Geen kaart maar een band, en sober: ze staat naast vier dingen met een prijs
   en mag die niet wegduwen. */
.hok-smederij{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.hok-smederij h2{
  font-family: var(--hok-letter);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 .3rem;
}

.hok-smederij p{
  margin: 0;
  max-width: 60ch;
  font-size: .95rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce){
  .hok-kaarten--plaat .hok-kaart{ transition: none; }
}

/* De waarde in credits, klein onder de prijs. Tabulaire cijfers, zodat de
   getallen op de vier kaarten onder elkaar dezelfde breedte houden. */
.hok-credits{
  margin: .15rem 0 0;
  font-family: var(--mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--hok-zalm);
}

.hok-kaarten--plaat .hok-credits{ color: #e0a87f; }

/* Hetzelfde lijstje onder de formele uitleg: de naam links, het getal rechts,
   zodat de bedragen onder elkaar staan en in één blik te vergelijken zijn. */
.hok-waarde{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .12rem .8rem;
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}

.hok-waarde dt{
  font-weight: 700;
  color: var(--muted);
}

.hok-waarde dd{
  margin: 0;
  text-align: right;
  color: var(--hok-zalm);
}

/* ── De koopknop ─────────────────────────────────────────────────────────── */

.hok-knop{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: 52px;
  padding: .85rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--goud) 0%, var(--goud-deep) 100%);
  color: #2a1a06;
  font: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--goud) 85%, transparent);
  transition: transform .14s, box-shadow .14s;
}

.hok-knop:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--goud) 90%, transparent);
}

.hok-knop:focus-visible{
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.hok-knop > span{ position: relative; z-index: 1; }

/* De glans. Eén streep licht die er om de zes seconden overheen loopt, en die
   op de drie knoppen na elkaar vertrekt zodat het één beweging blijft en geen
   knipperlicht. */
.hok-knop::after{
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.62) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: hokGlans 6s ease-in-out infinite;
}

.hok-kaart:nth-child(2) .hok-knop::after{ animation-delay: .45s; }
.hok-kaart:nth-child(3) .hok-knop::after{ animation-delay: .9s; }
.hok-kaart:nth-child(4) .hok-knop::after{ animation-delay: 1.35s; }

@keyframes hokGlans{
  0%   { left: -60%; }
  22%  { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce){
  .hok-knop::after{ animation: none; opacity: 0; }
  .hok-knop:hover{ transform: none; }
}

/* De regel onder de knop: met btw, verlegd, of buiten de EU. Klein, want ze
   staat er om een vraag te voorkomen en niet om iets te verkopen. */
.hok-btwregel{
  margin: .4rem 0 0;
  font-family: var(--mono);
  font-size: .72rem;
  text-align: center;
  color: rgba(250, 243, 228, .62);
}

/* ── Het formulier ───────────────────────────────────────────────────────── */

/* Een melding staat bij het veld waar ze over gaat en nergens anders. Een rode
   doos bovenaan de bladzijde laat iemand zoeken naar wat er scheelt; dit zegt
   het op de plek waar zijn oog al staat. */
.hok-fout{
  display: block;
  margin: -.5rem 0 .2rem;
  padding: .5rem .7rem;
  border-left: 3px solid #c0392b;
  background: color-mix(in srgb, #e6b3aa 30%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: .9rem;
  color: var(--ink);
}

input[aria-invalid="true"]{ border-color: #c0392b !important; }

/* Het vinkje bij de voorwaarden: één regel, en het vinkje groot genoeg voor een
   duim. */
.hok-akkoord{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.45;
}

.hok-akkoord input{
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  accent-color: var(--goud);
}


.hok-bij{
  font-weight: 400;
  font-size: .85em;
  color: var(--muted);
}

/* De rustige knop: op de band van de smederij en bij de sitepakketten. Geen
   goud, want die staat naast knoppen die wel iets kosten. */
.hok-link{
  align-self: flex-start;
  padding: .55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hok-link:hover{ border-color: var(--goud); color: var(--goud-deep); }

/* ── Het lint op de kar ──────────────────────────────────────────────────── */

/* "beste prijs per kool" en niet "meest gekozen". Het eerste is te rekenen, het
   tweede is een bewering die vandaag nog niet waar is. */
.hok-lint{
  align-self: flex-start;
  margin: .2rem 0 0;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--goud) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent);
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e7b463;
}

/* ── Kom klappen ─────────────────────────────────────────────────────────── */

/* Het blok voor wie geen ondernemingsnummer heeft. Warm gezet en niet als
   waarschuwing: wie hier leest, is geen klant die er niet hoort maar iemand die
   zoekt. Geen goud, want het verkoopt niets. */
.hok-klappen{
  margin: .4rem 0 .2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--goud);
  border-radius: 0 var(--r) var(--r) 0;
  background: color-mix(in srgb, var(--goud) 6%, transparent);
}

.hok-klappen h3{
  margin: 0 0 .35rem;
  font-family: var(--hok-letter);
  font-size: 1.12rem;
  font-weight: 600;
}

.hok-klappen p{
  margin: 0 0 .8rem;
  font-size: .94rem;
  color: var(--muted);
  max-width: 54ch;
}

.hok-klappen-bij{
  margin: .7rem 0 0 !important;
  font-size: .82rem;
}

/* ── Zo ziet je hoop eruit ───────────────────────────────────────────────── */

/* Geen schermafdruk maar dezelfde opmaak als de echte standpagina. Een
   afbeelding veroudert zodra die bladzijde verandert; dit niet. */
.hok-stand{
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #14100b;
  color: #FAF3E4;
}

@media (min-width: 720px){
  .hok-stand{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; }
}

.hok-stand-getal{
  font-family: var(--hok-letter);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--goud);
  font-variant-numeric: tabular-nums;
}

.hok-stand-bij{
  margin-top: .3rem;
  font-size: .9rem;
  color: rgba(250, 243, 228, .7);
}

.hok-stand-tabel{
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.hok-stand-tabel td{
  padding: .5rem .2rem;
  border-bottom: 1px solid rgba(250, 243, 228, .12);
  color: rgba(250, 243, 228, .82);
}

.hok-stand-tabel td:last-child{
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.hok-stand-tabel .af{ color: #e0a87f; }
.hok-stand-tabel .bij{ color: #9fd08a; }

/* ── De vragen ───────────────────────────────────────────────────────────── */

.hok-vragen details{
  border-bottom: 1px solid var(--line);
}

.hok-vragen summary{
  padding: 1rem .2rem;
  font-family: var(--hok-letter);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

.hok-vragen summary::-webkit-details-marker{ display: none; }

.hok-vragen summary::after{
  content: "+";
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.2rem;
  color: var(--goud-deep);
}

.hok-vragen details[open] summary::after{ content: "–"; }

.hok-vragen p{
  margin: 0 0 1.1rem;
  padding-right: 2rem;
  color: var(--muted);
  max-width: 68ch;
}

/* ── Het lint met de klantlogo's ─────────────────────────────────────────── */

.hok-logokop{
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.hok-logorij{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3rem);
}

.hok-logorij img{
  height: 40px;
  width: auto;
  opacity: .75;
  filter: grayscale(1);
  transition: opacity .16s, filter .16s;
}

.hok-logorij img:hover{ opacity: 1; filter: none; }

/* ── De vaste koopbalk op een telefoon ───────────────────────────────────── */

/* Enkel op een smal scherm, want daar scrolt de knop uit beeld. Hij springt
   naar de kaarten en verkoopt niets dat er niet staat. */
.hok-balk{ display: none; }

@media (max-width: 640px){
  .hok-balk{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: .9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(135deg, var(--goud) 0%, var(--goud-deep) 100%);
    color: #2a1a06;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .8);
  }

  main{ padding-bottom: 72px; }
}

/* ── Nonius maakt ook ────────────────────────────────────────────────────── */

/* Een volwaardige sectie en geen voetstrook: dit is waar iemand die kolen komt
   kopen, ontdekt dat er meer te koop staat. Vier tegels met een echt beeld,
   dezelfde maten als de pakketkaarten. */

.hok-ook{ background: var(--bg-2); }

.hok-onder{
  margin: -.9rem 0 1.6rem;
  color: var(--muted);
  max-width: 62ch;
}

.hok-tegels{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

@media (max-width: 1180px){
  .hok-tegels{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .hok-tegels{ grid-template-columns: minmax(0, 1fr); }
}

.hok-tegels article{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .16s, box-shadow .16s;
}

.hok-tegels article:hover{
  border-color: color-mix(in srgb, var(--goud) 65%, transparent);
  box-shadow: 0 26px 60px -36px color-mix(in srgb, var(--goud) 75%, transparent);
}

.hok-tegels img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 350;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.hok-tegel-tekst{
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1 1 auto;
  padding: clamp(1.1rem, 2vw, 1.4rem);
}

.hok-tegels h3{
  font-family: var(--hok-letter);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
  text-wrap: balance;
}

.hok-tegels p{
  margin: 0;
  flex: 1 1 auto;
  font-size: .94rem;
  color: var(--muted);
}

.hok-tegels .hok-knop{
  align-self: stretch;
  margin-top: .8rem;
  font-size: .95rem;
}

@media (prefers-reduced-motion: reduce){
  .hok-tegels article{ transition: none; }
}

/* De knop onderaan een tegel glanst mee met de koopknoppen, maar begint later,
   zodat de hele bladzijde één trage beweging maakt en geen slinger. */
.hok-tegels article:nth-child(1) .hok-knop::after{ animation-delay: 1.8s; }
.hok-tegels article:nth-child(2) .hok-knop::after{ animation-delay: 2.2s; }
.hok-tegels article:nth-child(3) .hok-knop::after{ animation-delay: 2.6s; }
.hok-tegels article:nth-child(4) .hok-knop::after{ animation-delay: 3s; }

/* ── Smal ────────────────────────────────────────────────────────────────── */

@media (max-width: 560px){
  .hok-verhaal{ font-size: 1.1rem; }
  .hok-kaart{ padding: 1.2rem; }
}