/*
 * De koptypografie: Bricolage Grotesque, zelf gehost.
 *
 * Hier stond eerst `system-ui`. Dat is geen keuze maar de afwezigheid ervan:
 * op Windows krijg je Segoe UI, op een Mac San Francisco, op Android Roboto —
 * precies de letter die elke andere site ook heeft. Sven op 2 oktober 2026:
 * "ge zit wel heel dicht bij knitoo met dat font, en 368456624596 andere sites."
 *
 * Bricolage Grotesque is een grotesk met eigen hoeken: afgeknotte schuine
 * uiteinden, een smalle a, en een variabele optische grootte, zodat een kop van
 * zestig pixels andere verhoudingen krijgt dan een etiket van twaalf. Dat is
 * wat een letter voor een smidse hoort te doen: zwaar en gesmeed, niet glad.
 *
 * Twee bestanden, samen 107 kB, naast de bladzijde en niet bij Google. Eén
 * variabel bestand draagt alle gewichten van 400 tot 800, dus er is geen tweede
 * verzoek voor vet. `font-display: swap` zorgt dat de tekst meteen leesbaar is
 * in de systeemletter en daarna omklapt; de lopende tekst staat sowieso op de
 * systeemletter, dus de omklap raakt alleen de koppen.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("letters/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("letters/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * De pagina van Smidse.
 *
 * Overgenomen uit de gedeelde componentenbank van Nonius en enkel bovenaan
 * hertekend: het palet en het verloop. Verderop staat geen
 * kleur hardgecodeerd, dus alles hieronder volgt vanzelf mee.
 *
 * Twee dingen zijn wel bijgezet, onderaan dit bestand: de onderdelen die deze
 * pagina nodig heeft en de bank niet kent (de positionering, het pad, de
 * vraag), en één correctie op de knop in een lichte sectie.
 *
 * Het verloop is geen regenboog maar een smeltgloed: koud ijzer, roodgloeiend,
 * oranje, goud, en terug. Het staat op dezelfde drie plekken als in de bank —
 * de streep boven de pagina, één woord in de kop, de zijkant van de kaarten —
 * en nergens anders. Een pagina over een smidse mag warm zijn; ze mag geen
 * kermis zijn.
 */

:root {
  --bg: #f6f2ea;
  --surface: #fffdf8;
  --ink: #241d18;
  --ink-soft: #6a5c50;
  --accent: #c27514;
  /* Dezelfde oker, maar donker genoeg om als kleine tekst te lezen. Het oker
     van de huisstijl haalt op room 3,2 tegen 1, en dat is te weinig voor een
     etiket van twaalf pixels. Grote cijfers en alles wat lijn of vlak is,
     blijven op --accent staan; wat gelezen moet worden, staat hierop. */
  --accent-tekst: #8f5209;
  --accent-wash: #f7e6c9;
  --sage: #704b43;
  --greige: #b3a795;
  --border: #e6dcc9;
  /* De koppen staan in een vette schreefloze. Tot 2 oktober 2026 stond hier
     Georgia; Sven wou er een vette sans. Eén token, dus terugdraaien is één
     regel. Geen webfont: deze site laadt er geen enkele, en een kop die pas
     verschijnt als een bestand van elders binnen is, is een kop die flikkert. */
  --f-kop: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI",
           system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* De schaal. Eén reeks in plaats van een maat per plek: zo staat de verhouding
     tussen een kop en een etiket vast, ook als er morgen een blok bij komt.
     De sprongen worden groter naar boven toe, want daar valt het verschil pas
     op; onderaan zou dezelfde sprong de tekst onleesbaar klein maken. */
  --t-fijn:  0.76rem;
  --t-klein: 0.86rem;
  --t-lees:  1rem;
  --t-lead:  clamp(1.02rem, 0.96rem + 0.28vw, 1.18rem);
  --t-h3:    clamp(1.12rem, 0.98rem + 0.6vw, 1.42rem);
  --t-h2:    clamp(1.8rem, 1.15rem + 2.4vw, 2.95rem);
  --t-h1:    clamp(2.3rem, 1.3rem + 3.9vw, 4.1rem);

  /* Spatiëring hoort bij de maat, niet bij het blok. Groot zet je strak, want
     de letters raken elkaar vanzelf; kapitalen zet je wijd, want die hebben
     geen stokken en lopen anders dicht. */
  --sp-strak: -0.03em;
  --sp-wijd:  0.15em;
  --radius: 20px;
  --max: 68rem;
  --lees: 40rem;

  /* De smeltgloed. Begin- en eindkleur zijn dezelfde, zodat de lus naadloos
     is bij een verschuiving over precies de eigen breedte. */
  --spectrum: linear-gradient(
    90deg,
    #6d2a0b 0%, #b8380c 14%, #f5230e 28%, #ff7a00 44%,
    #ffc400 58%, #db9815 74%, #a8500e 88%, #6d2a0b 100%
  );

  /* De donkere grond van het laadscherm, voor de kop van de pagina. */
  --nacht: #17110b;
  --nacht-diep: #0c0806;
  --nacht-ink: #f7f1e5;
  --nacht-soft: rgba(247, 241, 229, 0.66);
  --goud: #db9815;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14100c;
    --surface: #1f1a15;
    --ink: #f4eee3;
    --ink-soft: #ab9c88;
    --accent: #e0a53a;
    --accent-tekst: #e8b658;
    --accent-wash: #3a2a13;
    --sage: #a8776c;
    --greige: #8c8172;
    --border: #3a3128;
  }
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/*
 * Hier stond `overflow-x: hidden` op de body, en dat is weg.
 *
 * Het lost niets op, het verbergt. Wat te breed is, wordt dan weggeknipt in
 * plaats van afgebroken, en op het scherm ziet dat eruit als een kop die
 * midden in een woord ophoudt — zonder schuifbalk die verraadt dat er iets
 * scheelt. Met de regel weg valt zoiets meteen op en wordt het rechtgezet
 * waar het ontstaat.
 *
 * De twee gloedvlekken in de kop hangen met opzet buiten het scherm; die
 * worden geknipt door `.held { overflow: hidden }` en niet door de body.
 */

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-tekst); }

h1, h2, h3 {
  font-family: var(--f-kop);
  /* Een schreefloze op 600 oogt dunner dan een schreef op 600, en de letters
     staan er losser bij. Vandaar 800 en een strakkere spatiëring. */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--sp-strak);
  margin: 0;
  text-wrap: balance;
  /* Een kop is de enige plek waar één woord breder kan zijn dan het scherm.
     Georgia staat niet op elke telefoon; valt ze terug op de schreefletter van
     het toestel, dan is hetzelfde woord zo twintig procent breder. Dan hoort
     het af te breken en niet over de rand te lopen. */
  overflow-wrap: break-word;
}

/* Hier stond `hyphens: auto` bij. Dat is weg: het brak "iedereen" af tot
   "ieder-een" midden in de kop, en een koppelteken in een titel van veertig
   pixels valt harder op dan de smalle regel die het moest oplossen.
   `overflow-wrap` blijft staan als vangnet voor een woord dat werkelijk
   breder is dan het scherm; dat breekt zonder streepje af. */

/*
 * De kop schaalt mee vanaf de smalste telefoon.
 *
 * De ondergrens stond op 2,4rem en dat is vast: op 320 pixels is dat bijna
 * veertig pixels voor een woord als "bedienen", en er is geen ruimte meer om
 * af te breken. Nu groeit de kop vanaf 320 mee met het scherm en haalt ze pas
 * op een bureau haar volle maat.
 */
h1 { font-size: clamp(1.85rem, 1.05rem + 4.5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.05rem + 2.4vw, 2.5rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1rem; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/*
 * De spectrumlijn schuift zijwaarts.
 *
 * Het verloop is twee keer zo breed als het vlak en verschuift over precies zijn
 * eigen breedte; op dat punt staat het weer waar het begon, dus de lus is
 * naadloos. Traag genoeg om niet af te leiden — dit is een teken van leven, geen
 * animatie waar iemand naar moet kijken.
 *
 * Dezelfde beweging draagt het woord in de kop en de rand van de vaste
 * onderbalk, zodat het één gebaar blijft in plaats van drie losse effecten.
 */
@keyframes spectrumSchuif {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

.spectrumlijn {
  height: 5px;
  background: var(--spectrum);
  background-size: 200% 100%;
  animation: spectrumSchuif 18s linear infinite;
}

/* Voor wat alleen een schermlezer hoeft te horen. */
.enkel-voorlezen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ balk */

.balk {
  position: sticky; top: 0; z-index: 20;
  background: rgba(23, 17, 11, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(247, 241, 229, 0.1);
}

.balk .wrap { display: flex; align-items: center; gap: 1rem; min-height: 62px; }
.balk .merk { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-height: 44px; }
.balk .merk:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; border-radius: 8px; }
.balk .merk img { height: 30px; width: auto; }

/* Het merk boven de heldtekst: de enige plek waar het teken op ware grootte
   staat. Onder een telefoonbreedte gaat het kleiner, want daar moet de kop
   zelf nog binnen het eerste scherm vallen. */
.heldmerk { display: block; height: 128px; width: auto; margin: 0 0 1.6rem; }
@media (max-width: 720px) { .heldmerk { height: 88px; margin-bottom: 1.1rem; } }
.balk .merk span {
  font-family: var(--f-kop); font-size: 1.15rem; font-weight: 600;
  color: var(--nacht-ink); letter-spacing: 0.01em;
}

.balk nav {
  margin-left: auto; display: flex; align-items: center;
  gap: 1.25rem; font-size: 0.94rem;
}

/*
 * Elk doel in de kop is minstens vierenveertig pixels hoog.
 *
 * Een duim is geen muisaanwijzer. De taalcodes waren zeventien bij zesentwintig
 * pixels; dat is raak of mis, en bij mis staat de bezoeker in de verkeerde
 * taal. De hoogte komt uit binnenruimte en niet uit een grotere letter, zodat
 * de kop even hoog blijft.
 */
.balk nav a {
  color: var(--nacht-soft); text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.balk nav a:hover { color: var(--nacht-ink); }
.balk nav a:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 40rem) { .balk .verbergklein { display: none; } }

.taalknop {
  border: 1px solid rgba(247, 241, 229, 0.26);
  border-radius: 999px; padding: 0.26rem 0.9rem;
  font-size: 0.82rem; letter-spacing: 0.05em;
  color: var(--nacht-ink) !important;
  min-height: 44px;
}

/* ------------------------------------------------------------------ held */

/* De smidse zelf is de kop, niet een kaartje ernaast. Het beeld ligt als foto
   over de volle sectie; de tekst staat er los boven, gedragen door een
   donkere veeg van links (waar gelezen wordt) naar het vuur rechts (waar het
   beeld z'n eigen licht al geeft). Geen kader, geen scheidingslijn. */
.held {
  position: relative;
  background: radial-gradient(120% 92% at 85% 10%, #3a2415 0%, var(--nacht) 46%, var(--nacht-diep) 100%);
  color: var(--nacht-ink);
  overflow: hidden;
  min-height: min(46rem, 96vh);
  display: flex;
  align-items: center;
  padding-top: clamp(4.5rem, 9vw, 6.5rem);
}

/* Het beeld hangt rechts vastgepind op een eigen breedte — nooit uitgerekt
   over de volle sectie. Op een smal scherm is dat vanzelf de hele breedte; op
   een breed scherm vult de gloed van .held zelf de rest, in plaats van een
   uitgerokken foto die op de rand in het niets uitkomt. */
.held-foto {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(64rem, 62vw);
  object-fit: cover; object-position: 38% 45%;
  /*
   * Het beeld lost naar links op in het donker.
   *
   * Dit stond op `black 62%, transparent 96%`: een rechte helling over een
   * derde van de breedte, die op 96% abrupt eindigde. Dat gaf een rechte
   * verticale naad van boven tot onder — Sven op 3 oktober 2026: "de overgang
   * tussen niets en iets in de achtergrond is veel te scherp."
   *
   * Twee dingen daaraan. De helling begon te laat, en ze liep niet door tot de
   * rand: de laatste vier procent was al volledig doorzichtig, dus het verloop
   * werd in de resterende ruimte samengeperst. En een rechte alfahelling leest
   * niet als een rechte overgang, want helderheid wordt niet lineair waargenomen
   * — het oog pikt er een rand uit waar de helling het snelst verandert.
   *
   * Vandaar vier stops in plaats van twee: vroeger beginnen, trager zakken in
   * het midden, en helemaal tot 100% doorlopen. Nagekeken in de browser door
   * de drie varianten naast elkaar te zetten.
   *
   * Het masker van .heldvuur hieronder moet hetzelfde blijven, anders fade de
   * gloed op een andere plek uit dan de foto eronder.
   */
  -webkit-mask-image: linear-gradient(to left, black 38%, rgba(0, 0, 0, 0.75) 58%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  mask-image: linear-gradient(to left, black 38%, rgba(0, 0, 0, 0.75) 58%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  z-index: 0;
}

.held::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--nacht-diep) 0%, transparent 32%);
  z-index: 1; pointer-events: none;
}

/* ---------------------------------------------------------- het aanblazen */

/* Een smid die iets heet wil hebben, blaast op de kolen. Dat is wat hier
   gebeurt zodra de muis op het aambeeld of op de laptop komt: het vuur laait
   op, het metaal gloeit rood, en het zakt daarna terug naar een warme gloed in
   plaats van naar niets.

   Sven, 2 oktober 2026: "ik wil dat hij fel oplaait en hel rood gloeit als ge
   over het logo van smidse gaat" — en even later: "en ook over het logo op of
   de laptop zelf."

   Twee dingen daarover, want ze bepalen hoe dit gebouwd is:

   De opflakkering zit in een `animation` en niet in een `transition`, want een
   overgang kan niet eerst doorschieten en dan terugzakken. Een blaasbalg doet
   precies dat: één harde stoot, daarna een hogere rusttoestand. De laatste
   stap van de animatie en de hover-eindstand zijn met opzet dezelfde waarden,
   zodat er geen sprongetje zit op het moment dat de animatie afloopt.

   De gloed zelf staat op `drop-shadow` en niet op `box-shadow`. Allebei de
   beelden hebben een doorzichtige rand — het merk is een PNG met alfa, de foto
   draagt een `mask-image` die links uitvloeit. `box-shadow` zou een rechthoek
   oplichten die er niet staat; `drop-shadow` volgt de vorm, dus de gloed komt
   uit het aambeeld en uit de rand van de laptop en niet uit een kader. */

.heldmerk,
.held-foto {
  /* Zonder deze regel springt de eindstand er hard in als de animatie klaar
     is en de muis blijft staan. */
  transition: filter 420ms ease-out;
  will-change: filter;
}

/* De tekstband van de kop (`.held .wrap`) staat op z-index 2 en is zo breed als
   de hele sectie. Ze heeft geen achtergrond, dus je ziet ze niet — maar ze ving
   wel elke muisbeweging op, ook rechts waar enkel de foto staat. Daardoor
   gebeurde er niets wanneer je over de laptop ging.

   De band laat de muis nu door; alleen wat er werkelijk in staat, vangt hem nog.
   Dat is nodig voor de knoppen en de links, en meteen genoeg: de tekst zelf is
   op 40rem afgekapt, dus rechts ligt de foto vrij. */
.held .wrap { pointer-events: none; }
.held .wrap > * { pointer-events: auto; }

.heldmerk:hover,
.heldmerk:focus-visible {
  animation: aanblazen 900ms cubic-bezier(.22, 1, .36, 1) both;
}

.held-foto:hover {
  animation: aanblazenPlaat 900ms cubic-bezier(.22, 1, .36, 1) both;
}

/* Het merk mag het verst gaan: het is een vlak teken op een donkere plaat, dus
   het verdraagt een harde gloed zonder dat er detail verloren gaat. */
@keyframes aanblazen {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 74, 20, 0)) brightness(1) saturate(1);
  }
  22% {
    filter:
      drop-shadow(0 0 14px rgba(255, 112, 36, 0.98))
      drop-shadow(0 0 52px rgba(255, 38, 10, 0.95))
      drop-shadow(0 0 120px rgba(190, 14, 6, 0.8))
      brightness(1.3) saturate(2.6);
  }
  55% {
    filter:
      drop-shadow(0 0 11px rgba(255, 104, 32, 0.85))
      drop-shadow(0 0 40px rgba(255, 36, 10, 0.8))
      drop-shadow(0 0 94px rgba(190, 14, 6, 0.6))
      brightness(1.14) saturate(2.1);
  }
  100% {
    filter:
      drop-shadow(0 0 12px rgba(255, 108, 34, 0.9))
      drop-shadow(0 0 46px rgba(255, 36, 10, 0.88))
      drop-shadow(0 0 108px rgba(190, 14, 6, 0.68))
      brightness(1.18) saturate(2.3);
  }
}

/* De foto krijgt hetzelfde gebaar maar met minder helderheid erbij: daar staat
   een gerenderd beeld met eigen licht in, en dat slaat bij 1.7 helemaal dicht
   in het wit. De gloed eromheen mag wel even ver gaan. */
@keyframes aanblazenPlaat {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 74, 20, 0)) brightness(1) saturate(1);
  }
  22% {
    filter:
      drop-shadow(0 0 34px rgba(255, 96, 28, 0.85))
      drop-shadow(0 0 110px rgba(214, 34, 10, 0.6))
      brightness(1.3) saturate(1.7) contrast(1.06);
  }
  55% {
    filter:
      drop-shadow(0 0 26px rgba(255, 86, 24, 0.7))
      drop-shadow(0 0 86px rgba(214, 34, 10, 0.45))
      brightness(1.12) saturate(1.42) contrast(1.03);
  }
  100% {
    filter:
      drop-shadow(0 0 30px rgba(255, 90, 26, 0.78))
      drop-shadow(0 0 98px rgba(214, 34, 10, 0.5))
      brightness(1.16) saturate(1.5) contrast(1.04);
  }
}

/* De hele kop kleurt mee. Zonder dit gloeit het beeld wel maar blijft de
   sectie eromheen koud staan, en dan ziet het eruit als een effectje op een
   plaatje in plaats van als een vuur dat aangeblazen wordt.

   `:has()` doet hier het werk; waar dat niet bestaat, blijft alles hierboven
   gewoon werken en valt enkel deze laag weg. */
.held::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  opacity: 0;
  transition: opacity 620ms ease-out;
  background:
    radial-gradient(66% 78% at 70% 50%, rgba(255, 58, 14, 0.72) 0%, rgba(206, 20, 8, 0.4) 34%, rgba(150, 10, 4, 0.16) 58%, transparent 78%);
  mix-blend-mode: screen;
}

.held:has(.heldmerk:hover)::after,
.held:has(.heldmerk:focus-visible)::after,
.held:has(.held-foto:hover)::after {
  opacity: 1;
}

/* Wie beweging afgezet heeft, krijgt geen opflakkering maar wel het gloeien:
   het effect draagt hier de betekenis — dit ding is heet — en dat mag niet
   wegvallen omdat iemand geen animaties wil. */
@media (prefers-reduced-motion: reduce) {
  .heldmerk:hover,
  .heldmerk:focus-visible,
  .held-foto:hover {
    animation: none;
  }
  .heldmerk:hover,
  .heldmerk:focus-visible {
    filter:
      drop-shadow(0 0 12px rgba(255, 108, 34, 0.9))
      drop-shadow(0 0 46px rgba(255, 36, 10, 0.88))
      brightness(1.18) saturate(2.3);
  }
  .held-foto:hover {
    filter:
      drop-shadow(0 0 30px rgba(255, 90, 26, 0.78))
      brightness(1.16) saturate(1.5);
  }
  .held::after { transition: none; }
}

/* Vonken uit de gloed. Twaalf vaste stipjes, geen canvas en geen JS — elk
   met zijn eigen zijwaartse positie en vertraging, zodat ze niet als één blok
   tegelijk opstijgen. Puur decoratief, dus aria-hidden en weg bij
   reduced-motion. */
.vonken { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.vonken span {
  position: absolute; bottom: -4%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--goud);
  box-shadow: 0 0 6px 1px rgba(242, 179, 61, 0.8);
  opacity: 0;
  animation: vonkStijg 8s ease-in infinite;
}
.vonken span:nth-child(1)  { left: 6%;  width: 2px; height: 2px; animation-delay: 0.2s; animation-duration: 7.2s; }
.vonken span:nth-child(2)  { left: 14%; animation-delay: 2.6s; animation-duration: 8.6s; }
.vonken span:nth-child(3)  { left: 22%; width: 2px; height: 2px; animation-delay: 4.8s; animation-duration: 6.8s; }
.vonken span:nth-child(4)  { left: 31%; animation-delay: 1.1s; animation-duration: 9.4s; }
.vonken span:nth-child(5)  { left: 39%; width: 2px; height: 2px; animation-delay: 5.9s; animation-duration: 7.6s; }
.vonken span:nth-child(6)  { left: 47%; animation-delay: 3.3s; animation-duration: 8.1s; }
.vonken span:nth-child(7)  { left: 58%; width: 2px; height: 2px; animation-delay: 0.7s; animation-duration: 7.9s; }
.vonken span:nth-child(8)  { left: 67%; animation-delay: 4.2s; animation-duration: 6.9s; }
.vonken span:nth-child(9)  { left: 75%; width: 2px; height: 2px; animation-delay: 2.1s; animation-duration: 8.8s; }
.vonken span:nth-child(10) { left: 83%; animation-delay: 6.4s; animation-duration: 7.4s; }
.vonken span:nth-child(11) { left: 91%; width: 2px; height: 2px; animation-delay: 1.6s; animation-duration: 9.1s; }
.vonken span:nth-child(12) { left: 96%; animation-delay: 5.2s; animation-duration: 6.6s; }

@keyframes vonkStijg {
  0%   { transform: translate(0, 0); opacity: 0; }
  6%   { opacity: 1; }
  70%  { opacity: 0.55; }
  100% { transform: translate(10px, -85vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vonken { display: none; }
}

.held .wrap {
  position: relative; z-index: 2;
}

.held-tekst { max-width: 40rem; padding-bottom: clamp(3rem, 8vw, 6rem); }

.held h1 {
  color: var(--nacht-ink);
  font-size: clamp(2.6rem, 2rem + 3.6vw, 5rem);
  letter-spacing: -0.015em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.held .inleiding {
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
  color: var(--nacht-soft); max-width: 30rem; margin-top: 1.3rem;
}

@media (max-width: 640px) {
  .held { min-height: auto; }
  .held-foto {
    width: 100%; object-position: 45% 30%;
    -webkit-mask-image: linear-gradient(to top, black 42%, transparent 88%);
    mask-image: linear-gradient(to top, black 42%, transparent 88%);
  }
  /* Op een telefoon staat de tekst zelf boven op het beeld, niet ernaast —
     dus moet de donkere laag daar meelopen tot boven de titel, niet enkel
     onderaan. De vorige versie werd zwak precies waar "Het CMS..." begint. */
  .held::before {
    background: linear-gradient(to top, var(--nacht-diep) 0%, rgba(15, 9, 5, 0.86) 62%, rgba(15, 9, 5, 0.4) 85%, transparent 100%);
  }
}

/* ----------------------------------------------------------- winkelknoppen */

.winkels { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Achtenveertig pixels hoog, want dit is de knop waar het om draait en een
   kraanman of een bakker bedient die met een duim. */
.winkel {
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 48px;
  padding: 0.7rem 1.35rem; border-radius: 14px;
  background: var(--nacht-ink); color: var(--nacht) !important;
  text-decoration: none; font-weight: 650; line-height: 1.15;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.winkel:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.winkel:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }
.winkel small { display: block; font-size: 0.72rem; font-weight: 500; opacity: 0.8; }
.winkel svg { width: 22px; height: 22px; flex: none; }

/* Zolang de app nog niet in de winkel staat, is de knop een mededeling en geen
   belofte. Hem tonen mag, zolang er letterlijk bij staat dat hij nog niet
   werkt; hem weglaten laat de pagina onaf ogen. */
.winkel[aria-disabled="true"] {
  background: transparent; color: var(--nacht-ink) !important;
  border: 1px solid rgba(247, 241, 229, 0.28); cursor: default;
}

.winkel[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

.gratisregel { margin-top: 1rem; font-size: 0.9rem; color: var(--nacht-soft); }

/* ------------------------------------------------------- de vaste oproep */

/*
 * De balk die onderaan blijft staan zodra de held uit beeld is.
 *
 * Op een pagina van zeven schermhoogtes staat de koopknop anders alleen
 * bovenaan en helemaal onderaan. Wie halverwege overtuigd raakt — en dat is
 * precies waar het rekenblokje voor staat — moet dan scrollen om iets te
 * kunnen doen, en dat doet niemand.
 *
 * Hij verschijnt pas ná de held. Dat gebeurt zonder JavaScript: een onzichtbaar
 * ijkpunt onder de held schakelt hem aan via de scroll-driven animatie van de
 * browser. Kent een browser dat niet, dan staat de balk er gewoon altijd — dat
 * is de veilige kant om op te falen.
 */
.vasteoproep {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(23, 17, 11, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(247, 241, 229, 0.12);
  padding: 0.7rem 0 calc(0.7rem + env(safe-area-inset-bottom, 0px));
}

.vasteoproep::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--spectrum);
  background-size: 200% 100%;
  animation: spectrumSchuif 18s linear infinite;
}

.vasteoproep .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/*
 * De balk, typografisch.
 *
 * "Vanaf 39 euro per maand" — het getal is het hele argument en stond er even
 * zwaar bij als de woorden eromheen. Nu draagt het bedrag het gewicht: groter,
 * vetter, in de merkkleur, met cijfers van gelijke breedte zodat 39 en 349
 * onder elkaar niet verspringen. De woorden eromheen zakken naar een rustiger
 * gewicht; samen leest het als één zin met een klemtoon in plaats van als een
 * rij gelijke woorden.
 */
.vasteoproep .zin {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--nacht-ink);
  font-size: var(--t-klein);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.vasteoproep .zin b {
  font-family: var(--f-kop);
  font-weight: 800;
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: var(--sp-strak);
  color: var(--goud);
  font-variant-numeric: lining-nums tabular-nums;
  /* Een cijfer op 1,5em duwt de regel uit elkaar. Dit houdt de regelhoogte
     waar ze hoort zonder de kop af te knippen. */
  margin-inline-end: 0.06em;
}

.vasteoproep .zin small {
  display: block;
  margin-top: 0.1rem;
  color: var(--nacht-soft);
  font-size: var(--t-fijn);
  letter-spacing: 0.01em;
}

.vasteoproep .winkels { margin-top: 0; gap: 0.5rem; }
.vasteoproep .winkel { padding: 0.55rem 1rem; font-size: 0.9rem; }
.vasteoproep .winkel small { font-size: 0.62rem; }

@media (max-width: 34rem) {
  .vasteoproep .zin small { display: none; }
  .vasteoproep .winkel span { font-size: 0.85rem; }
}

/*
 * Pas tonen zodra de held voorbij is.
 *
 * Let op bij het overnemen: een view-tijdlijn werkt hier NIET. Die meet of het
 * element zelf in beeld komt, en een vastgezette balk staat per definitie
 * altijd in beeld — de balk verscheen dus meteen, boven op de held. Gevonden bij
 * Twitchy op 29 augustus 2026; de vorige versie van dit onderdeel had die fout.
 *
 * De juiste tijdlijn is die van de pagina zelf: toon hem zodra er ongeveer een
 * schermhoogte gescrold is. Dat werkt bij elke hoogte van de held en heeft geen
 * onzichtbaar ijkpunt in de HTML nodig.
 *
 * Browsers die scroll-driven animaties niet kennen negeren het hele blok en
 * houden de balk zichtbaar. Dat is de veilige kant om op te falen.
 */
@supports (animation-timeline: scroll()) {
  .vasteoproep {
    opacity: 0;
    transform: translateY(100%);
    animation: oproepIn linear both;
    animation-timeline: scroll(root block);
    animation-range: 68vh 88vh;
  }
  @keyframes oproepIn {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* De pagina krijgt onderaan lucht, zodat de voet niet onder de balk verdwijnt. */
body { padding-bottom: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  .vasteoproep { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ oproep in de tekst */

/*
 * De oproep tussen twee secties. Staat op de twee plekken waar de lezer het
 * meest overtuigd is: vlak na zijn eigen bedrag in de berging, en vlak na de
 * schermen. Een knop op het moment van instemmen is meer waard dan drie
 * knoppen onderaan.
 */
.tussenoproep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.tussenoproep p {
  margin: 0;
  flex: 1 1 16rem;
  font-family: var(--f-kop);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.3;
  color: var(--ink);
}

.tussenoproep .winkels { margin-top: 0; }

/* Op de donkere secties keert hij mee. */
.schermen .tussenoproep {
  background: rgba(247, 241, 229, 0.05);
  border-color: rgba(247, 241, 229, 0.14);
}

.schermen .tussenoproep p { color: var(--nacht-ink); }

/* --------------------------------------------------------------- secties */

section { padding-block: clamp(3.5rem, 7.5vw, 6rem); }
.sectiekop { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sectiekop p { color: var(--ink-soft); font-size: 1.06rem; margin-top: 0.75rem; }

/* Geen los label meer boven elke kop — de kop draagt haar eigen betekenis.
   .etiket blijft in de opmaak staan (leeg element, geen risico bij hertekst)
   maar toont niets meer. */
.etiket { display: none; }

/* --------------------------------------------------------------- het punt */

.pijn { background: var(--surface); border-block: 1px solid var(--border); }

.rekensom {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-top: 2.25rem;
}

@media (min-width: 44rem) { .rekensom { grid-template-columns: repeat(3, 1fr); } }

.rekensom > div { background: var(--bg); padding: 1.5rem; }

.rekensom strong {
  display: block; font-family: var(--f-kop); font-size: 2rem;
  line-height: 1.1; color: var(--accent); margin-bottom: 0.35rem;
}

.rekensom span { color: var(--ink-soft); font-size: 0.95rem; }

/* ------------------------------------------------------------- de keuze */

/*
 * De staafgrafiek onder de rekensom.
 *
 * Het blok beweerde dat te veel kopen geld kost, maar liet het niet zien. Hier
 * staan de combinaties naast elkaar die de winkel werkelijk verkoopt, met wat
 * je nodig hebt in kleur en wat je over houdt erbovenop. Dat het derde balkje
 * korter is dan het eerste, is het hele argument in één oogopslag.
 *
 * Alles in gewone HTML: een rij per combinatie, en de breedte via een
 * aangepaste eigenschap. Geen bibliotheek voor vier balkjes.
 */

.keuze {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.keuzekop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.keuzekop h3 { margin: 0; }

.keuzekop label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.keuzekop input {
  width: 5.5rem;
  padding: 0.5rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  -moz-appearance: textfield;
}

.keuzekop input::-webkit-outer-spin-button,
.keuzekop input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.keuzekop input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.staven { display: grid; gap: 0.9rem; }

.staaf {
  display: grid;
  gap: 0.15rem 1rem;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 42rem) {
  .staaf {
    grid-template-columns: 11rem 1fr auto;
    gap: 1rem;
  }
}

.staaf .naam { font-size: 0.95rem; color: var(--ink); }

.staaf .balk {
  position: relative;
  height: 1.9rem;
  background: var(--accent-wash);
  border-radius: 6px;
  overflow: hidden;
}

/* Wat je werkelijk opschildert. */
.staaf .nodig {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--nodig, 50%);
  background: var(--accent);
  border-radius: 6px 0 0 6px;
}

/* En wat erbovenop in de berging belandt. Gestreept, want het is geen verf
   die iets doet — het is verlies, en dat hoort er ook uit te zien. */
.staaf .over {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--nodig, 50%);
  width: var(--over, 10%);
  background: repeating-linear-gradient(
    -45deg,
    var(--greige) 0 5px,
    transparent 5px 10px
  );
  border-right: 2px solid var(--greige);
}

.staaf .cijfer {
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.staaf .cijfer b { color: var(--ink); font-weight: 700; }

/* De combinatie die de app kiest. */
.staaf.gekozen .naam { font-weight: 700; }
.staaf.gekozen .naam::after {
  content: "";
  display: inline-block;
  width: 0.45rem; height: 0.8rem;
  margin-left: 0.5rem;
  border: 2px solid var(--sage);
  border-top: 0; border-left: 0;
  transform: rotate(42deg) translateY(-2px);
}

.keuzevoet {
  margin: 1.35rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.keuzevoet b { color: var(--accent-tekst); font-weight: 700; }

/* De legenda, klein en onderaan. */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.legenda span { display: inline-flex; align-items: center; gap: 0.45rem; }

.legenda i {
  width: 1.1rem; height: 0.75rem;
  border-radius: 3px;
  background: var(--accent);
}

.legenda i.rest {
  background: repeating-linear-gradient(-45deg, var(--greige) 0 4px, transparent 4px 8px);
  border: 1px solid var(--greige);
}

/* ------------------------------------------------------- wat er blijft staan */

/*
 * Het accentblok, halverwege de pagina.
 *
 * De pagina liep van donker naar licht naar licht naar donker; twee lichte
 * secties op rij maakten het midden vlak. Dit blok breekt dat, en het staat op
 * precies de plek waar de lezer overtuigd moet raken dat hij een probleem
 * heeft. Vandaar de warme grond in plaats van weer wit.
 */

.berging {
  background: var(--accent-wash);
  border-block: 1px solid var(--border);
}

.berging .sectiekop { margin-bottom: 2rem; }

.bergingblok {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 52rem) {
  .bergingblok { grid-template-columns: 1fr 1fr; }
}

/* De rekenhulp zelf. Zonder JavaScript blijft het een gewone zin met velden
   erin die niets doen — daarom staat de uitkomst ook in woorden onder het
   blok, en niet alleen als getal. */
.rekenhulp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.rekenhulp .veldrij {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.rekenhulp label {
  display: block;
  flex: 1 1 8rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.rekenhulp input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  -moz-appearance: textfield;
}

.rekenhulp input::-webkit-outer-spin-button,
.rekenhulp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rekenhulp input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.uitkomst {
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
}

.uitkomst .bedrag {
  font-family: var(--f-kop);
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 1;
  color: var(--accent);
  margin: 0;
}

.uitkomst p {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* De stapel blikken ernaast: puur decoratief, maar het maakt het bedrag
   tastbaar. Getekend met randen in plaats van als afbeelding, zodat het
   meeschaalt en in donkere modus vanzelf klopt. */
.blikstapel {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.9rem;
  min-height: 15rem;
  padding-bottom: 0.9rem;
  position: relative;
}

/* Een plank onder de blikken. Zonder die lijn zweven ze in het midden van hun
   vak; met de lijn staan ze ergens op, en dat is precies het beeld dat de kop
   oproept. */
.blikstapel::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.35;
  border-radius: 2px;
}

.blikje {
  width: clamp(3.4rem, 10vw, 5.2rem);
  border: 2px solid var(--accent);
  border-radius: 6px 6px 10px 10px;
  background:
    linear-gradient(to bottom, transparent 0 var(--vulling, 40%), var(--accent) var(--vulling, 40%) 100%);
  opacity: 0.85;
  position: relative;
}

/* Het hengsel. */
.blikje::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: -0.7rem; height: 0.7rem;
  border: 2px solid var(--accent);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  opacity: 0.75;
}

/* ------------------------------------------------------------- de troeven */

/* Geen zes identieke kaartjes met dezelfde ronding en schaduw: een lijst
   zoals een specificatieblad, met haarlijnen in plaats van kaders. De kop
   staat naast de tekst op een breed scherm — lezen als twee kolommen van een
   productfiche, niet als een raster van tegels. */
.troeven {
  border-top: 1px solid var(--border);
}

.troef {
  display: grid; gap: 0.3rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 40rem) {
  .troef { grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: baseline; }
}

.troef h3 {
  margin: 0; font-family: var(--f-kop); font-size: 1.05rem;
  color: var(--accent-tekst);
}

.troef p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }

/* --------------------------------------------------------------- schermen */

.schermen { background: var(--nacht); color: var(--nacht-ink); }
.schermen .sectiekop p { color: var(--nacht-soft); }
.schermen .etiket { color: var(--goud); }

.schermenrij {
  display: flex; gap: 1.25rem; overflow-x: auto;
  padding-block: 0.5rem 1.5rem;
  scroll-snap-type: x mandatory;
}

.scherm { flex: 0 0 auto; width: min(15rem, 62vw); scroll-snap-align: center; margin: 0; }

.scherm img {
  border-radius: 22px;
  border: 1px solid rgba(247, 241, 229, 0.14);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

.scherm figcaption {
  margin-top: 0.9rem; font-size: 0.88rem;
  color: var(--nacht-soft); text-align: center;
}

/* ------------------------------------------------------------------ prijs */

.prijzen {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
}

.prijs {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
}

.prijs.uitgelicht {
  border-color: var(--accent);
  box-shadow: 0 14px 36px rgba(196, 112, 79, 0.15);
}

.bedrag { font-family: var(--f-kop); font-size: 2.5rem; line-height: 1; margin: 0.7rem 0 0.25rem; }
.bedrag small { font-size: 0.88rem; color: var(--ink-soft); font-family: inherit; }

.prijs ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }

.prijs li {
  padding-left: 1.6rem; position: relative;
  margin-bottom: 0.55rem; color: var(--ink-soft); font-size: 0.97rem;
}

.prijs li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.42em;
  width: 0.45rem; height: 0.8rem;
  border: 2px solid var(--sage); border-top: 0; border-left: 0;
  transform: rotate(42deg);
}

/* -------------------------------------------------------------------- faq */

.faq details { border-bottom: 1px solid var(--border); padding: 1.1rem 0; }

.faq summary {
  cursor: pointer; font-weight: 650; list-style: none;
  display: flex; gap: 1rem; align-items: baseline;
}

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

.faq summary::after {
  content: "+"; margin-left: auto; color: var(--accent);
  font-size: 1.3rem; line-height: 1;
}

.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0.85rem 0 0; color: var(--ink-soft); max-width: var(--lees); }

/* ------------------------------------------------------------------- slot */

.slot { background: var(--nacht); color: var(--nacht-ink); text-align: center; }

.slot.vraag {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(13, 9, 5, 0.85), rgba(13, 9, 5, 0.93)),
    url("vraag-achtergrond.webp") center 40% / cover no-repeat,
    var(--nacht);
}
.slot.vraag > .wrap { position: relative; z-index: 1; }
.slot h2 { color: var(--nacht-ink); }
.slot p { color: var(--nacht-soft); margin-inline: auto; max-width: 34rem; }
.slot .winkels { justify-content: center; }
.slot .gratisregel { text-align: center; }

/* ------------------------------------------------------------------ maker */

/*
 * Wie het maakt. Een pagina die iets verkoopt en niet zegt van wie het komt,
 * leest als een advertentie; een naam en een adres maken er een bedrijf van.
 * Dit is geen bijzaak op een pagina die de eerste etalage van Noappy is.
 */
.maker { background: var(--surface); border-top: 1px solid var(--border); }

.makerblok {
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 46rem) {
  .makerblok { grid-template-columns: auto 1fr; }
}

/* Het naamplaatje. Een gefreesde plaat draagt de naam en het jaartal zelf,
 * dus er staat geen letter naast: alles wat er nog bij zou komen, maakt er
 * weer een stapeltje van. Hij is een link naar nonius.be en verder niets. */
.makerplaat { display: block; line-height: 0; }

.makerplaat img {
  display: block;
  width: 27.5rem;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease;
}

.makerplaat:hover img { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .makerplaat img { transition: none; }
  .makerplaat:hover img { transform: none; }
}

.makerblok p { color: var(--ink-soft); margin: 0 0 0.75rem; max-width: var(--lees); }
.makerblok p:last-child { margin-bottom: 0; }
.makerblok strong { color: var(--ink); }

/* ------------------------------------------------------------------- voet */

footer.voet {
  background: var(--nacht-diep); color: var(--nacht-soft);
  padding-block: 2.5rem; font-size: 0.9rem;
}

footer.voet .wrap {
  display: flex; flex-wrap: wrap;
  gap: 1.5rem 2.5rem; justify-content: space-between;
}

footer.voet a { color: var(--nacht-soft); }
footer.voet strong { color: var(--nacht-ink); }
footer.voet nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
footer.voet p { margin: 0 0 0.35rem; }


/* ================================================================== *
 *  Vertrekken — een schakelaar tussen vier volwaardige delen
 *
 *  Voor een pagina die vier doelgroepen moet overtuigen. Onder elkaar
 *  zetten betekent dat iedereen door drie stukken moet die niet over hem
 *  gaan; naast elkaar in kaarten betekent dat er van elk maar drie zinnen
 *  passen, en dan is het een opsomming en geen argument. Met een
 *  schakelaar krijgt elk deel de ruimte van een hele sectie.
 *
 *  Alle panelen staan in de HTML en worden verborgen met `hidden`, niet
 *  weggelaten. Een zoekmachine leest dus alle vier de argumentaties.
 *
 *  Kleuren: pas de zeven `--v-*` hieronder aan en het onderdeel volgt het
 *  merk. Verder in dit blok staat geen kleur hardgecodeerd.
 * ================================================================== */

.vertrekken {
  --v-grond:   var(--nacht);
  --v-grond-2: var(--nacht-diep);
  --v-ink:     var(--nacht-ink);
  --v-soft:    var(--nacht-soft);
  --v-zacht:   rgba(247, 241, 229, 0.38);
  --v-lijn:    rgba(247, 241, 229, 0.14);
  --v-accent:  var(--goud);
  --v-accent-2: var(--accent);

  margin-block: 1.5rem;
}

.vertrekken__keuze {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--v-lijn);
  border: 1px solid var(--v-lijn);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.vertrekken__keuze button {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem 1.15rem;
  border: 0;
  background: var(--v-grond-2);
  color: var(--v-zacht);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease;
}
.vertrekken__keuze button b {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--v-soft);
  transition: color .22s ease;
}
.vertrekken__keuze button span {
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}

/* De streep staat boven en niet onder: zo naait ze de knop aan het paneel vast. */
.vertrekken__keuze button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v-accent), var(--v-accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}

.vertrekken__keuze button:hover { background: rgba(247, 241, 229, .05); }
.vertrekken__keuze button:hover b { color: var(--v-ink); }
.vertrekken__keuze button[aria-selected="true"] { background: var(--v-grond); }
.vertrekken__keuze button[aria-selected="true"] b { color: var(--v-ink); }
.vertrekken__keuze button[aria-selected="true"]::before { transform: scaleX(1); }

@media (max-width: 820px) { .vertrekken__keuze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) {
  .vertrekken__keuze { grid-template-columns: 1fr; }
  .vertrekken__keuze button { flex-direction: row; align-items: baseline; gap: .6rem; padding: .85rem 1rem; }
}

.vertrek {
  position: relative;
  border: 1px solid var(--v-lijn);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--v-grond);
  overflow: hidden;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  color: var(--v-soft);
}
.vertrek[hidden] { display: none; }

/* Het beeld staat achter de tekst en vervaagt naar de leeskant toe. Volledig
   zichtbaar vecht het met de tekst; volledig weg had je het net zo goed niet
   kunnen zetten. */
.vertrek__vlak {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--vlak);
  background-size: cover;
  background-position: 60% 40%;
  opacity: .62;
  mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.35) 38%, #000 82%);
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.35) 38%, #000 82%);
  pointer-events: none;
}
.vertrek__vlak::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, var(--v-grond) 18%, var(--v-grond) 30%, transparent 100%);
  opacity: .86;
}

.vertrek__tekst { position: relative; z-index: 1; max-width: 58rem; }

.vertrek h3 {
  margin: 0 0 1.3rem;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--v-ink);
}
.vertrek__intro { margin: 0 0 1rem; max-width: 42rem; line-height: 1.6; }

.vertrek__punten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2rem 3rem;
  margin-top: 2.4rem;
}
@media (max-width: 700px) { .vertrek__punten { grid-template-columns: 1fr; } }
.vertrek__punten h4 { margin: 0 0 .4rem; font-size: 1.02rem; color: var(--v-ink); }
.vertrek__punten h4::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: .85rem;
  background: linear-gradient(90deg, var(--v-accent), var(--v-accent-2));
}
.vertrek__punten p { margin: 0; font-size: .93rem; line-height: 1.55; }

.vertrek[data-komt] { animation: vertrekOp .42s cubic-bezier(.16, 1, .3, 1); }
@keyframes vertrekOp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vertrek[data-komt] { animation: none; }
  .vertrekken__keuze button::before { transition: none; }
}

/* ═══════════════════════════════════════════════════ winkelonderdelen ══
 *
 * Onderdelen die uit een webshopvoet komen en op een verkooppagina net zo
 * goed werken. Ze staan hier omdat ze precies hetzelfde doen als de rest van
 * deze bank: één ding, goed, zonder afhankelijkheden.
 *
 * Ze gebruiken de tokens van dit stijlblad en niet die van het thema waar ze
 * vandaan komen. Wie ze meeneemt naar een project, neemt dus de vorm mee en
 * niet de kleur — dat is de bedoeling.
 */

/* ── nu open ──
 *
 * Van alles wat onderaan een pagina van een zaak met een deur kan staan, is
 * dit het onderdeel dat het meeste doet. "Openingsuren" is een tabel die de
 * lezer met de klok moet vergelijken; "Nu open tot 18:00" is een antwoord.
 *
 * Let op bij het overnemen: de stand wordt op de server bepaald, in de
 * tijdzone van de zaak. Doe je dat in de browser, dan staat er "open" bij
 * iemand met een verkeerd gezette klok — en die staat straks voor een
 * gesloten deur.
 */
.nu-open {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
}
.nu-open__stip {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--greige);
}
.nu-open[data-open="ja"] .nu-open__stip {
  background: var(--sage);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--sage) 60%, transparent);
  animation: nuOpenPols 2.4s ease-out infinite;
}
.nu-open[data-open="ja"] strong { color: var(--sage); }
@keyframes nuOpenPols {
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .nu-open[data-open="ja"] .nu-open__stip { animation: none; }
}

.urenlijst {
  display: grid;
  gap: 2px;
  margin: .75rem 0 0;
  font-size: .88rem;
  color: var(--ink-soft);
  max-inline-size: 22rem;
}
.urenlijst > div { display: flex; justify-content: space-between; gap: 1.5rem; }
.urenlijst dt, .urenlijst dd { margin: 0; }
.urenlijst dd { font-variant-numeric: tabular-nums; }

/* ── inschrijven met dubbele bevestiging ──
 *
 * Het formulier is de helft; de zin eronder is de andere helft. Wie niet leest
 * wat er met zijn adres gebeurt, vult het niet in — en wie het wél invult
 * zonder dat te weten, klaagt later.
 *
 * Het lokveld staat buiten beeld in plaats van op display:none. Dat laatste is
 * precies wat een fatsoenlijke bot controleert.
 */
.inschrijven { display: grid; gap: .75rem; max-inline-size: 34rem; }
.inschrijven__rij { display: flex; gap: .5rem; flex-wrap: wrap; }
.inschrijven__rij input[type="email"] {
  flex: 1;
  min-inline-size: 12rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.inschrijven__rij input[type="email"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.inschrijven__rij button {
  padding: .7rem 1.2rem;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.inschrijven__rij button:hover { background: var(--accent); }

.inschrijven__klein { font-size: .82rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.lokveld {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ── waarborgen ──
 *
 * Vier redenen, elk één regel vet en één regel uitleg. Meer dan vier en het
 * wordt een opsomming die niemand leest; minder dan vier en het oogt mager.
 */
.waarborgen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.waarborgen li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.waarborgen strong { display: block; color: var(--ink); margin-bottom: 1px; }
.waarborgen__icoon {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent);
}
.waarborgen__icoon svg { inline-size: 18px; block-size: 18px; }


/* ================================================================== *
 *  Wat de bank niet kent
 *
 *  Alles hierboven komt uit `_componenten/verkoop.css` en hoort daar ook
 *  te blijven. Wat hieronder staat is van deze pagina alleen: een
 *  investeerderspagina heeft geen prijstabel en geen winkelknoppen, maar
 *  wel een positionering, een pad en een vraag. Blijkt een van deze drie
 *  op een tweede project weer van pas te komen, dan verhuist het naar de
 *  bank — niet eerder.
 * ================================================================== */

/*
 * De knop op een lichte grond.
 *
 * In de bank is `.winkel` een lichte knop op de donkere held: room op zwart.
 * In een tussenoproep staat diezelfde knop op `--surface`, en dan is het room
 * op room. Hier keert hij om.
 */
.tussenoproep .winkel,
.maker .winkel {
  background: var(--ink);
  color: var(--surface) !important;
}

.tussenoproep .winkel:hover,
.maker .winkel:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }

/* ------------------------------------------------------- de positionering */

/*
 * Drie kaarten naast elkaar met twee balkjes per kaart.
 *
 * Beweren dat je tussen de bouwers en de klassieke systemen staat, overtuigt
 * niemand; het naast elkaar zetten wel. De balkjes dragen met opzet geen
 * percentages — het is een verhouding, geen meting, en een verzonnen getal
 * eronder zetten maakt het niet waarder.
 */
.positie {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2.5rem;
}

.positie > div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
}

.positie .ons {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.09);
}

.positie .rol {
  display: block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.6rem;
}

.positie .ons .rol { color: var(--accent-tekst); }
.positie h3 { margin-bottom: 0.6rem; }
.positie p { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 1.4rem; }

.meter {
  display: grid; grid-template-columns: 4.5rem 1fr;
  align-items: center; gap: 0.8rem;
  margin-top: 0.55rem;
  font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-soft);
}

.meter i {
  display: block; height: 8px; border-radius: 99px;
  background: var(--border); font-style: normal;
}

.meter i b { display: block; height: 100%; width: var(--v); border-radius: 99px; background: var(--greige); }
.positie .ons .meter i b { background: var(--accent); }

/* -------------------------------------------------------------- het pad */

/*
 * De roadmap als een lijn met drie haltes, niet als een lijst met bolletjes.
 * De halte waar het vandaag staat, krijgt de accentkleur; de rest blijft grijs.
 * Zo is er geen tekst nodig die zegt waar we zitten.
 */
.pad {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.pad > li {
  border-top: 2px solid var(--border);
  padding-top: 1.5rem;
  position: relative;
}

.pad > li::before {
  content: ""; position: absolute; top: -7px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border);
}

.pad > li.nu { border-top-color: var(--accent); }
.pad > li.nu::before { background: var(--accent); border-color: var(--accent); }

.pad .fase {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.5rem;
}

.pad > li.nu .fase { color: var(--accent-tekst); }
.pad h3 { margin-bottom: 0.45rem; }
.pad p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------- de vraag */

/*
 * De ask staat op de donkere grond van het slot, want het is het slot. Eén
 * zin, en dan de enige knop die op deze pagina iets doet.
 */
.vraag .zin {
  font-family: var(--f-kop);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.3;
  color: var(--nacht-ink);
  max-width: 40rem;
  margin-inline: auto;
}

.model .rekensom h3 { margin-bottom: 0.45rem; }
.model .rekensom p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------------------ afwerking */

/*
 * De held staat in twee kolommen omdat daar een render naast de tekst hoort.
 * Een held zonder beeld (`.held-tekst` zonder `.held-beeld` ernaast, zoals de
 * bankpagina) krijgt de klasse `held--geen-beeld`: anders staat de titel op de
 * helft van de breedte met een gat ernaast.
 */
.held--geen-beeld .wrap { grid-template-columns: 1fr; }
.held--geen-beeld .held-tekst { max-width: 46rem; }

/* Het besluit onder een blok: één zin die het voorgaande vastzet. */
.besluit { margin-top: 2.25rem; max-width: var(--lees); font-size: 1.06rem; }

.etiket.goud { color: var(--goud); }

.makerlogo { max-width: 240px; margin-bottom: 1.25rem; }

/* De balkjes van de drie kaarten op één lijn, ook als de ene kop over twee
   regels loopt en de andere niet. */
.positie > div { display: flex; flex-direction: column; }
.positie p { flex: 1 1 auto; }

/* Het logo in de makerblok is een grijs wordmerk; op de donkere grond van de
   nachtstand wordt dat te stil. Optillen in plaats van een tweede bestand. */
@media (prefers-color-scheme: dark) {
  .makerlogo { filter: brightness(1.85); }
}

/* De zin onder de vraag stond bijna even groot als de kop erboven en ging
   ermee concurreren. */
.vraag .zin { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.45; }

/* ------------------------------------------------------------ de talenrij */

/*
 * Vier taalcodes in de kop. Codes en geen vlaggen: een vlag staat voor een
 * land en niet voor een taal, en de helft van Europa spreekt er meer dan één.
 * De huidige taal is gemarkeerd met aria-current en niet met een klasse, zodat
 * de markering ook klopt voor wie de pagina laat voorlezen.
 */
.talen {
  display: flex;
  gap: 0.55rem;
  padding-inline: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.talen a {
  color: var(--nacht-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 44px;
}

.talen a:hover { color: var(--nacht-ink); }
.talen a:focus-visible { outline: 2px solid var(--goud); outline-offset: 2px; border-radius: 6px; }

.talen a[aria-current] {
  color: var(--goud);
  box-shadow: inset 0 -1px 0 0 var(--goud);
}

@media (max-width: 30rem) {
  .balk nav { gap: 0.55rem; }
  .talen { gap: 0.15rem; padding-inline: 0; }
}

/* Het naschrift onder een besluit: dezelfde breedte, maar gedempt, zodat het
   leest als een toevoeging en niet als een tweede even zware bewering. */
.besluit.naschrift {
  margin-top: 0.9rem;
  font-size: 0.99rem;
  color: var(--ink-soft);
}

/* ================================================================== *
 *  Het tarief — drie banden, geen drie kaartjes
 *
 *  Een rooster van drie kaarten naast elkaar is wat elke SaaS-pagina doet,
 *  en deze bladzijde heeft er al drie van (de troeven, de positionering,
 *  de rekensom). Een vierde zou de pagina één lange rij doosjes maken.
 *
 *  Dit is een tarieflijst zoals ze in een werkplaats hangt: drie banden
 *  onder elkaar over de volle breedte, met het bedrag groot vooraan. Dat
 *  leest op een telefoon zonder dat er iets moet krimpen, en op een bureau
 *  leest het als een prijslijst in plaats van als een keuzemenu.
 *
 *  De streep links is de temperatuur van het ijzer: koud, warm, heet. Dat
 *  is de smidse zonder dat de smeltgloed een vierde plek krijgt — die
 *  blijft waar ze staat.
 * ================================================================== */

.tarieven {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Drie identieke afgeronde kaarten waar enkel de kleur verschilt, is precies
   het SaaS-drieluik dat de rest van de bladzijde nu niet meer heeft. In de
   plaats: de twee gewone paden staan vlak, als een regel in een prijslijst
   met enkel een bovenlijn — zoals de producttroeven hierboven. Het gekozen
   pad krijgt als enige nog een kaart, een rand en een gloed: één gedurfd
   element, niet drie gelijke. */
/*
 * De drie kaarten dragen dezelfde vorm.
 *
 * Tot 2 oktober 2026 was alleen de middelste een kaart: afgeronde hoeken en
 * ruime binnenruimte. De andere twee waren banden met scherpe hoeken en
 * 0,25rem ruimte links, waardoor hun tekst vier centimeter verder naar links
 * begon dan die van de middelste. Drie pakketten naast elkaar horen dezelfde
 * vorm te hebben; wat de middelste eruit laat springen is zijn rand, zijn
 * vlag en zijn achtergrond, niet een andere geometrie.
 */
.tarief {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.75rem clamp(1.25rem, 3vw, 1.85rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tarief::before {
  content: "";
  position: absolute;
  inset: 0.3rem auto 0.3rem 0;
  width: 3px;
  background: var(--temp, var(--greige));
}

@media (min-width: 54rem) {
  .tarief::before { inset: 0.6rem auto 0.6rem 0; }
}

@media (min-width: 54rem) {
  .tarief {
    grid-template-columns: 14rem minmax(0, 1fr) auto;
    gap: 2.25rem;
    align-items: center;
    padding-block: 1.75rem;
  }
}

/* --- het bedrag, en dat staat vooraan --- */

.tarief__prijs { margin: 0; }

.tarief__prijs b {
  display: block;
  font-family: var(--f-kop);
  /* Cijfers van gelijke breedte: 39, 99 en 349 staan onder elkaar en mogen
     niet verspringen omdat een 1 smaller is dan een 9. */
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(2.6rem, 1.4rem + 3.4vw, 3.6rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.tarief__prijs b i {
  font-style: normal;
  font-size: 0.48em;
  vertical-align: 0.42em;
  margin-right: 0.12em;
  color: var(--accent-tekst);
}

.tarief__prijs span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.tarief h3 {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: var(--sp-wijd);
  text-transform: uppercase;
  color: var(--accent-tekst);
}

.tarief__jaar {
  margin: 0.6rem 0 0;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* --- wat erin zit --- */

.tarief__voor {
  margin: 0 0 0.85rem;
  font-family: var(--f-kop);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--ink);
}

.tarief ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem 1.5rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

@media (min-width: 34rem) { .tarief ul { grid-template-columns: 1fr 1fr; } }

.tarief li { position: relative; padding-left: 1.4rem; }

.tarief li::before {
  content: "";
  position: absolute;
  left: 0.1rem; top: 0.45em;
  width: 0.42rem; height: 0.76rem;
  border: 2px solid var(--temp, var(--greige));
  border-top: 0; border-left: 0;
  transform: rotate(42deg);
}

/* Wat er níét in zit, staat er ook. Een grens die pas blijkt wanneer iemand
   ertegen loopt, levert een telefoontje op, en bij duizend winkels is dat
   niet te dragen. */
.tarief li.niet { color: var(--greige); }
.tarief li.niet::before {
  border: 0;
  top: 0.62em; left: 0.15rem;
  width: 0.62rem; height: 2px;
  background: var(--greige);
  transform: none;
}

/* --- de knop --- */

.tarief__knop { display: flex; }
.tarief__knop .winkel { width: 100%; justify-content: center; text-align: center; }

@media (min-width: 54rem) {
  .tarief__knop .winkel { width: auto; }
}

/* De stille knop voor de twee pakketten die niet de bedoeling zijn. Wie
   alles laat glimmen, heeft niets meer dat opvalt. */
.tarief .winkel {
  background: transparent;
  color: var(--ink) !important;
  border: 1px solid var(--ink);
  font-size: 0.97rem;
}

.tarief .winkel:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }

/* --- de band die de bedoeling is --- */

.tarief.gekozen::before { display: none; }

.tarief.gekozen {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(143, 82, 9, 0.14);
}

@media (min-width: 54rem) {
  .tarief.gekozen { padding-block: 1.75rem; }
}

.tarief.gekozen .winkel {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--surface) !important;
  border-color: var(--ink);
  font-weight: 700;
}

/*
 * De knop gloeit, hij glanst niet.
 *
 * Hier stond een witte glans die eroverheen liep. Op een roomkleurige knop is
 * wit over wit, en op de afdruk was er niets te zien. Een gloed eromheen leest
 * op elke grond, en ze past bij wat de bladzijde is: ijzer dat warm staat.
 * Eén beweging op de hele bladzijde die naar een aankoop wijst.
 */
.tarief.gekozen .winkel {
  animation: tariefGloed 3.6s ease-in-out infinite;
}

@keyframes tariefGloed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(219, 152, 21, 0), 0 6px 16px rgba(0, 0, 0, 0.3); }
  50%      { box-shadow: 0 0 22px 3px rgba(219, 152, 21, 0.62), 0 6px 16px rgba(0, 0, 0, 0.3); }
}

.tarief__vlag {
  position: absolute;
  overflow: hidden;
  top: -0.7rem; right: 1.25rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: #1b1207;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Het badge glanst waar de knop dat niet mocht: op goud is wit wél te zien.
   Eén keer over, dan lang stil — een vlag die om de paar tellen knippert is
   geen accent meer, het is lawaai. */
.tarief__vlag::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(75deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: vlagGlans 6s ease-in-out infinite;
}
@keyframes vlagGlans {
  0%, 55% { left: -60%; }
  75% { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .tarief__vlag::after { display: none; }
}

/* --- de regels onder de lijst --- */

.tariefvoet {
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.6rem 2rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

@media (min-width: 46rem) { .tariefvoet { grid-template-columns: 1fr 1fr; } }
.tariefvoet p { margin: 0; }
.tariefvoet strong { color: var(--ink); }

/* ------------------------------------------------------------ afwerking 2 */

/* De stille tweede knop naast de hoofdknop in de kop. */
.winkel.stil {
  background: transparent;
  color: var(--nacht-ink) !important;
  border: 1px solid rgba(247, 241, 229, 0.34);
}

.winkel.stil:hover { background: rgba(247, 241, 229, 0.08); box-shadow: none; }

/* De links in de voet staan op een eigen regel en zijn dus geen link in een
   zin: ze hebben een eigen tikvlak nodig. De binnenruimte groeit, de
   regelafstand niet. */
footer.voet p a {
  display: inline-block;
  padding-block: 0.7rem;
  margin-block: -0.7rem;
}

footer.voet a:focus-visible,
.maker a:focus-visible,
.tariefvoet a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ------------------------------------------------- het prijsblok in het vuur
 *
 * De tarieven staan op de donkere grond en niet op room. Twee redenen: de
 * bladzijde had drie lichte secties na elkaar en zakte in het midden weg, en
 * dit is het stuk waar het om draait — het hoort in het vuur te liggen en niet
 * op de werkbank ernaast.
 */

.prijsblok { background: var(--nacht); color: var(--nacht-ink); }
.prijsblok h2, .prijsblok h3 { color: var(--nacht-ink); }
.prijsblok .sectiekop p { color: var(--nacht-soft); }
.prijsblok .etiket { color: var(--goud); }

.prijsblok .tarief {
  position: relative;
  background: rgba(247, 241, 229, 0.045);
  border-color: rgba(247, 241, 229, 0.14);
  transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s ease;
}

/* Een lopende lijn vuur boven elke kaart, in drie oranje tinten — traag als
   sintel in rust, ze wakkert aan zodra je erover hovert. Eén repeterende
   gradiënt die naar links verschuift; op hover versnelt de tijdslijn zelf. */
.prijsblok .tarief::before {
  content: "";
  position: absolute;
  /* Binnen de ronding blijven: een lijn van rand tot rand steekt sinds de
     kaarten afgerond zijn buiten de hoeken uit. */
  top: -1px; left: var(--radius); right: var(--radius);
  height: 3px;
  background: linear-gradient(
    90deg,
    #6b2f10 0%, #d97a1f 18%, #ff9d2e 32%, #ffcf7a 42%,
    #ff9d2e 52%, #d97a1f 66%, #6b2f10 82%, #d97a1f 92%, #ff9d2e 100%
  );
  background-size: 200% 100%;
  opacity: 0.55;
  animation: tariefVuurlijn 5.5s linear infinite;
}

@keyframes tariefVuurlijn {
  from { background-position: 0% 0; }
  to   { background-position: -200% 0; }
}

@media (hover: hover) {
  .prijsblok .tarief:hover {
    transform: scale(1.035);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4);
    z-index: 2;
  }

  .prijsblok .tarief:hover::before {
    opacity: 1;
    animation-duration: 1.4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prijsblok .tarief::before { animation: none; }
  .prijsblok .tarief { transition: none; }
}

.prijsblok .tarief h3 { color: var(--goud); }
.prijsblok .tarief__prijs b { color: var(--nacht-ink); }
.prijsblok .tarief__prijs b i { color: var(--goud); }
.prijsblok .tarief__prijs span,
.prijsblok .tarief__jaar { color: var(--nacht-soft); }
.prijsblok .tarief__voor { color: var(--nacht-ink); }
.prijsblok .tarief ul { color: var(--nacht-soft); }
.prijsblok .tarief li.niet { color: rgba(247, 241, 229, 0.5); }
.prijsblok .tarief li.niet::before { background: rgba(247, 241, 229, 0.5); }

.prijsblok .tarief .winkel {
  background: rgba(219, 152, 21, 0.09);
  color: var(--nacht-ink) !important;
  border-color: rgba(247, 241, 229, 0.34);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.prijsblok .tarief .winkel:hover {
  background: rgba(219, 152, 21, 0.22);
  border-color: var(--goud);
  box-shadow: 0 0 18px 2px rgba(219, 152, 21, 0.28);
  transform: translateY(-1px);
}

.prijsblok .tarief.gekozen {
  background: rgba(219, 152, 21, 0.1);
  border-color: var(--goud);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.5);
}

.prijsblok .tarief.gekozen .winkel {
  background: var(--nacht-ink);
  color: var(--nacht) !important;
  border-color: var(--nacht-ink);
}

.prijsblok .tariefvoet {
  border-top-color: rgba(247, 241, 229, 0.14);
  color: var(--nacht-soft);
}

.prijsblok .tariefvoet strong { color: var(--nacht-ink); }
.prijsblok .tariefvoet a { color: var(--goud); }

/* De vlag staat op de rand van de band; op de donkere grond heeft ze een
   eigen achtergrond nodig, anders zweeft ze. */
.prijsblok .tarief__vlag { color: #1b1207; }

/* Vijf rubrieken, vier taalcodes en een knop passen niet op een klein
   bureauscherm. Prijs blijft staan zolang er ruimte is; de rest wijkt eerst. */
@media (max-width: 60rem) { .balk .verbergmiddel { display: none; } }

/* De kop blijft boven staan, dus een sprong naar een rubriek landt er anders
   onder. Vijf rem is de hoogte van de balk plus lucht. */
section[id], [id]:target { scroll-margin-top: 5rem; }

/* De vaste balk blijft op een telefoon op één regel: de zin krimpt, de knop
   niet. Twee regels eten een derde van een telefoonscherm op. */
.vasteoproep .zin { flex: 1 1 7rem; }
.vasteoproep .winkels { flex: 0 0 auto; }
.vasteoproep .winkel { min-height: 44px; }

@media (max-width: 26rem) {
  .vasteoproep .zin { font-size: 0.88rem; }
  .vasteoproep .winkel { padding-inline: 0.85rem; }
}

/* Op de smalste telefoon passen het merk, vier taalcodes en een knop niet
   naast elkaar. De knop wijkt, want de vaste balk onderaan draagt dezelfde
   oproep en die staat altijd in beeld. */
@media (max-width: 26rem) {
  .balk .taalknop { display: none; }
  .balk .wrap { gap: 0.5rem; }
}

/* De balkjes van de positionering waren greige op room: op een telefoon in
   de zon is dat geen balkje maar een vermoeden. De rail blijft licht, de
   vulling wordt donker genoeg om van een afstand te lezen. */
.meter i { background: var(--accent-wash); }
.meter i b { background: #7d7263; }
.positie .ons .meter i b { background: var(--accent); }

@media (prefers-color-scheme: dark) {
  .meter i { background: rgba(247, 241, 229, 0.12); }
  .meter i b { background: #9a8d79; }
}

/*
 * Het prijsblok ligt in het vuur, en dat moet in beide standen te zien zijn.
 *
 * In de lichte stand steekt de donkere grond er vanzelf uit. In de donkere
 * stand is de rest van de bladzijde ook donker en verdwijnt de breuk. Een
 * gloed die van onderen opkomt houdt hem in beide standen herkenbaar, en het
 * is hetzelfde gebaar als in de kop van de bladzijde.
 */
.prijsblok {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(247, 241, 229, 0.12);
  background:
    radial-gradient(118% 76% at 50% 108%, #40270f 0%, rgba(23, 17, 11, 0) 62%),
    linear-gradient(rgba(13, 9, 5, 0.94), rgba(13, 9, 5, 0.97)),
    url("prijs-achtergrond.webp") center 35% / cover no-repeat,
    var(--nacht);
}

.prijsblok > .wrap { position: relative; z-index: 1; }

/* Twee kolommen die rij voor rij vullen, springen uit de pas zodra één punt
   over twee regels loopt. Een echte kolomstroom houdt de regelafstand
   gelijk en leest van boven naar onder, zoals een lijst hoort te lezen. */
@media (min-width: 34rem) {
  .tarief ul { display: block; columns: 2; column-gap: 2rem; }
  .tarief li { break-inside: avoid; margin-bottom: 0.4rem; }
}

/* De jaarprijs brak over twee regels in een kolom van veertien rem. */
@media (min-width: 54rem) {
  .tarief { grid-template-columns: 15.5rem minmax(0, 1fr) auto; }
}

/* De lucht onder de bladzijde stond op de body, en die is roomkleurig. Onder
   de zwarte voet las dat als een naad van vijf rem. De lucht hoort bij de
   voet, dan loopt het zwart door tot achter de vaste balk. */
body { padding-bottom: 0; }
footer.voet { padding-bottom: calc(2.5rem + 5.5rem); }

/* Een bladzijde zonder voet (de 404) heeft de lucht wel nodig. */
body:not(:has(footer.voet)) { padding-bottom: 5.5rem; }

/*
 * De band gaat pas op vierenzestig rem in drie kolommen.
 *
 * Op vierenvijftig rem paste hij wel, maar dan is de kolom met de punten zo
 * smal dat elke regel over twee of drie regels breekt. Een lijst die overal
 * afbreekt leest als een puinhoop, ook als ze past. Daaronder staat de band
 * gestapeld met de lijst over de volle breedte, en dat leest beter.
 */
@media (min-width: 54rem) and (max-width: 63.99rem) {
  .tarief { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .tarief__knop .winkel { width: 100%; }
}

@media (min-width: 64rem) {
  .tarief { grid-template-columns: 15.5rem minmax(0, 1fr) auto; gap: 2.25rem; align-items: center; }
  .tarief__knop .winkel { width: auto; }
}

/* Onder de heldtekst stond zes rem lucht op een telefoon: de sectiemarge en
   de eigen binnenruimte bovenop elkaar. Dat is een half scherm dat niets doet
   op het toestel waar de bladzijde het vaakst op opengaat. */
@media (max-width: 46rem) {
  .held { padding-bottom: 1.25rem; }
  .held-tekst { padding-bottom: 2rem; }
  .held .inleiding { margin-top: 0.9rem; }
  .winkels { margin-top: 1.5rem; }
}

/* De balk heeft een onderrand en de prijssectie een bovenrand; samen lezen ze
   als een dubbele lijn zodra je op de prijs landt. Eén volstaat. */
.prijsblok { border-top: 0; }

/* ================================================================= aanvraag
 *
 * Het stappenformulier. Bijgezet op 2 oktober 2026, toen de zes mailto-knoppen
 * verdwenen die allemaal op dezelfde postbus uitkwamen.
 *
 * De opbouw van achter naar voor:
 *
 *   1. het scherm      — de bladzijde erachter gaat dicht en vervaagt
 *   2. de doos         — het paneel zelf, met de gloed van een haard
 *   3. de kolen        — een canvas dat zichzelf tekent (aanvraag.js)
 *   4. de spot         — een donkere schijf die naar de randen uitdooft
 *   5. het formulier   — en dat staat dus op die schijf, niet op de vlammen
 *
 * De buitenste stop staat op 0,70 en niet lager, en dat is een gemeten grens,
 * geen smaak. Op 0,34 haalt de gedempte tekst nog 3,2:1 boven een felle kool,
 * en dat is onder de 4,5:1 die gelezen tekst nodig heeft. Op 0,70 haalt de
 * gewone tekst 9,1:1 en de gedempte 5,0:1, in het slechtste geval dat het
 * canvas kan tekenen. Wie dit donkerder of lichter zet, rekent het opnieuw na.
 *
 * Punt 4 is het stuk dat telt. Letters op bewegend vuur zijn onleesbaar en
 * halen op geen enkel moment 4,5:1, want de achtergrond wisselt elk frame. De
 * schijf legt daar een vaste grond onder: in het midden is ze bijna dicht
 * (0,94) en naar de randen laat ze het vuur door. Daar staat ook geen tekst.
 */

/* Een knop die eruitziet als de knoppen die er al stonden. De drie regels
   hieronder zijn het verschil tussen een <a> en een <button>: een knop erft
   het lettertype niet en brengt zijn eigen rand mee. */
button.winkel,
button.taalknop {
  font: inherit;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button.taalknop {
  background: transparent;
  border: 1px solid rgba(247, 241, 229, 0.26);
  display: inline-flex; align-items: center;
}

button.taalknop:hover { background: rgba(247, 241, 229, 0.08); }

/* Een knop in een lopende zin. Hij moet lezen als een link, want dat is wat
   er staat: "stel ze hier". */
.alslink {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.alslink:hover { color: var(--accent-tekst); }

/* ----------------------------------------------------------- het scherm */

.aanvraag {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}

.aanvraag[hidden] { display: none; }

/*
 * Geen backdrop-filter hier, en dat is gemeten op 2 oktober 2026 op de live
 * site. Met `blur(6px)` tekende Chrome de bladzijde erachter als een raster
 * van gespiegelde tegels in plaats van als de bladzijde zelf. Met de blur uit
 * staat ze correct. Een vlak dat toch al voor 88% dekt, heeft die blur niet
 * nodig: wat erdoor schemert is vorm en kleur, geen leesbare tekst.
 */
.aanvraag__scherm {
  position: absolute; inset: 0;
  background: rgba(8, 5, 3, 0.88);
  animation: aanvraagScherm 0.42s ease both;
}

@keyframes aanvraagScherm { from { opacity: 0; } to { opacity: 1; } }

/* Zolang de doos openstaat, scrollt de bladzijde eronder niet mee. */
.aanvraag-open { overflow: hidden; }

/* -------------------------------------------------------------- de doos */

.aanvraag__doos {
  position: relative;
  width: min(42rem, 100%);
  max-height: min(44rem, 92vh);
  display: flex; flex-direction: column;
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  background: var(--nacht-diep);
  border: 1px solid rgba(219, 152, 21, 0.26);
  /* De gloed van een open haard: warm en dichtbij, niet een harde schaduw. */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 30px 90px rgba(0, 0, 0, 0.72),
    0 0 120px rgba(226, 100, 20, 0.16);
  animation: aanvraagDoos 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes aanvraagDoos {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* De kolen en de schijf liggen allebei achter de inhoud en vangen geen klik. */
.aanvraag__kolen,
.aanvraag__spot {
  position: absolute; inset: 0;
  pointer-events: none;
}

.aanvraag__kolen { width: 100%; height: 100%; }

/*
 * De leesschijf.
 *
 * `closest-side` houdt de schijf rond in een doos die breder is dan hoog, en
 * dat is precies wat een spot doet. De vier stops lopen van bijna dicht naar
 * doorzichtig; de eerste twee staan dicht bij elkaar zodat het midden een
 * rustig vlak is en niet een verloop waar de tekst doorheen zakt.
 */
.aanvraag__spot {
  background:
    radial-gradient(closest-side at 50% 46%,
      rgba(10, 6, 4, 0.94) 0%,
      rgba(10, 6, 4, 0.92) 42%,
      rgba(10, 6, 4, 0.84) 74%,
      rgba(10, 6, 4, 0.70) 100%),
    linear-gradient(to bottom,
      rgba(10, 6, 4, 0.55) 0%,
      rgba(10, 6, 4, 0) 30%,
      rgba(10, 6, 4, 0) 70%,
      rgba(10, 6, 4, 0.5) 100%);
}

.aanvraag__sluit {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.6rem; line-height: 1;
  color: var(--nacht-soft);
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
}

.aanvraag__sluit:hover { color: var(--nacht-ink); background: rgba(247, 241, 229, 0.08); }
.aanvraag__sluit:focus-visible { outline: 3px solid var(--goud); outline-offset: 2px; }

/* --------------------------------------------------------- het formulier */

/*
 * De doos scrollt niet als geheel: de teller blijft bovenaan staan en de
 * pijlen onderaan. Alleen het venster met de stap erin schuift. Een knop
 * "verder" die wegscrollt terwijl je aan het invullen bent, is een knop die
 * niet bestaat.
 */
.aanvraag__form,
.aanvraag__klaar {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--nacht-ink);
  min-height: 0;
  overflow: hidden;
}

.aanvraag__form[hidden],
.aanvraag__klaar[hidden] { display: none; }

/* De honeypot. Hij staat er voor de bots en mag voor niemand anders bestaan:
   buiten beeld, niet in de tabvolgorde, en zonder hoogte in de stroom. */
.aanvraag__honing {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; opacity: 0;
}

.aanvraag__hoofd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem;
  /* Ruimte voor het kruisje, dat rechtsboven over deze regel heen ligt. Zonder
     dit vallen de stipjes van het spoor eronder. */
  padding-right: 2.5rem;
}

.aanvraag__teller {
  margin: 0;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--goud);
}

.aanvraag__spoor { display: flex; gap: 0.4rem; }

.spoor__bol {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(247, 241, 229, 0.2);
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.spoor__bol.is-gehad { background: rgba(219, 152, 21, 0.55); }

.spoor__bol.is-nu {
  background: var(--goud);
  transform: scale(1.45);
  box-shadow: 0 0 10px rgba(219, 152, 21, 0.7);
}

/* ------------------------------------------------------------ de stappen */

/*
 * Eén stap tegelijk, en de hoogte mag verschillen zonder dat de doos springt:
 * het venster groeit mee met een eigen overgang.
 */
.aanvraag__venster {
  position: relative; flex: 1 1 auto;
  min-height: 0; overflow-y: auto;
  /* Ruimte voor de focusring van het laatste veld, anders knipt de
     rand van het scrollvlak hem af. */
  padding: 4px;  margin: -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(219, 152, 21, 0.45) transparent;
}

.aanvraag__venster::-webkit-scrollbar { width: 8px; }
.aanvraag__venster::-webkit-scrollbar-track { background: transparent; }

.aanvraag__venster::-webkit-scrollbar-thumb {
  background: rgba(219, 152, 21, 0.4);
  border-radius: 999px;
}

.aanvraag__venster::-webkit-scrollbar-thumb:hover { background: rgba(219, 152, 21, 0.6); }

/* Een stap is een <section>, en de pagina geeft elke section ruim negentig
   pixels binnenruimte. Binnen de doos is dat een gat van een derde scherm
   boven elke vraag, dus hier gaat die ruimte eruit. */
.aanvraag .stap {
  padding: 0; margin: 0;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.stap[hidden] { display: none; }

/* Wat weggaat zakt een haar naar boven, wat komt een haar van onder. Vier
   pixels — meer en het wordt een schuifbeweging, en dan kijkt de bezoeker naar
   de beweging in plaats van naar de vraag. */
.stap--weg  { opacity: 0; transform: translateY(-4px); }
.stap--komt { opacity: 0; transform: translateY(6px); }

.stap__kop {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  line-height: 1.15;
  color: var(--nacht-ink);
}

/* De kop krijgt focus zodat een schermlezer de nieuwe vraag voorleest. Dat is
   geen halte in de tabvolgorde en dus geen plek voor een focusring: wie met
   het toetsenbord werkt is hier niet naartoe gestapt, hij is hier gezet. */
.stap__kop:focus,
.stap__kop:focus-visible { outline: none; }

.stap__zin {
  margin: 0 0 1.5rem;
  color: var(--nacht-soft);
  font-size: 0.95rem;
}

/* -------------------------------------------------------------- de keuzes */

.av-keuzes { display: grid; gap: 0.6rem; }

.av-keuze { display: block; cursor: pointer; }

/* De radio zelf gaat weg, maar niet uit de tabvolgorde: hij blijft het ding
   dat de focus krijgt en dat met de pijltjes bediend wordt. */
.av-keuze input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px;
}

.av-keuze__vlak {
  display: block;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(247, 241, 229, 0.16);
  background: rgba(247, 241, 229, 0.035);
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.av-keuze__vlak b {
  display: block;
  font-size: 1rem; font-weight: 650;
  color: var(--nacht-ink);
}

.av-keuze__vlak i {
  display: block; margin-top: 0.15rem;
  font-style: normal; font-size: 0.85rem;
  color: var(--nacht-soft);
}

.av-keuze:hover .av-keuze__vlak {
  border-color: rgba(219, 152, 21, 0.5);
  background: rgba(219, 152, 21, 0.07);
}

.av-keuze input:checked + .av-keuze__vlak {
  border-color: var(--goud);
  background: rgba(219, 152, 21, 0.12);
  box-shadow: 0 0 0 1px var(--goud), 0 0 24px rgba(219, 152, 21, 0.18);
}

.av-keuze input:focus-visible + .av-keuze__vlak {
  outline: 3px solid var(--goud); outline-offset: 3px;
}

/* -------------------------------------------------------------- de velden */

.veld { display: block; margin-bottom: 1.1rem; }

.veld__label {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--nacht-ink);
}

.veld input,
.veld textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  /* Een rand die je kunt zien. De zachte lijnkleuren van de site zijn voor
     scheidingen tussen rijen; een invoerveld is iets wat je moet kunnen
     aanwijzen, en dat vraagt 3:1. */
  border: 1px solid rgba(247, 241, 229, 0.38);
  background: rgba(8, 5, 3, 0.55);
  color: var(--nacht-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.veld textarea { resize: vertical; min-height: 6.5rem; }

.veld input::placeholder,
.veld textarea::placeholder { color: rgba(247, 241, 229, 0.42); }

.veld input:focus,
.veld textarea:focus {
  outline: 0;
  border-color: var(--goud);
  background: rgba(8, 5, 3, 0.75);
  box-shadow: 0 0 0 3px rgba(219, 152, 21, 0.3);
}

.veld__klein {
  display: block; margin-top: 0.3rem;
  font-size: 0.78rem; color: var(--nacht-soft);
}

/* De foutregel bestaat altijd in de opbouw en wordt enkel getoond. Zo springt
   de stap niet op het moment dat er iets misloopt. */
.veld__fout {
  display: none; margin-top: 0.3rem;
  font-size: 0.8rem; color: #ffb4a2;
}

.veld--fout .veld__fout { display: block; }

.veld--fout input {
  border-color: #ff8a70;
  box-shadow: 0 0 0 3px rgba(255, 138, 112, 0.22);
}

/* ----------------------------------------------------------- de termijnen */

.termijnen { border: 0; padding: 0; margin: 1.4rem 0 0; }

.termijnen legend {
  padding: 0; margin-bottom: 0.55rem;
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--nacht-ink);
}

.termijn { display: inline-block; margin: 0 0.45rem 0.45rem 0; cursor: pointer; }

.termijn input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.termijn span {
  display: inline-block;
  padding: 0.5rem 1rem; min-height: 44px; line-height: 1.6;
  border-radius: 999px;
  border: 1px solid rgba(247, 241, 229, 0.22);
  font-size: 0.88rem;
  color: var(--nacht-ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.termijn:hover span { border-color: rgba(219, 152, 21, 0.5); }

.termijn input:checked + span {
  border-color: var(--goud);
  background: rgba(219, 152, 21, 0.14);
}

.termijn input:focus-visible + span { outline: 3px solid var(--goud); outline-offset: 3px; }

/* Het aanmeldvinkje. Groot genoeg om met een duim te raken, en het vakje
   staat bovenaan uitgelijnd zodat het bij een tekst van twee regels niet in
   het midden gaat zweven. */
.av-lijst {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.4rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(247, 241, 229, 0.16);
  border-radius: 14px;
  background: rgba(247, 241, 229, 0.035);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.av-lijst:hover { border-color: rgba(219, 152, 21, 0.45); }

.av-lijst input {
  flex: none;
  width: 20px; height: 20px;
  margin: 0.1rem 0 0;
  accent-color: var(--goud);
  cursor: pointer;
}

.av-lijst input:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }

.av-lijst__vlak {
  font-size: var(--t-klein);
  line-height: 1.4;
  color: var(--nacht-ink);
}

.av-lijst:has(input:checked) {
  border-color: var(--goud);
  background: rgba(219, 152, 21, 0.1);
}

.aanvraag__privacy {
  margin: 1.2rem 0 0;
  font-size: 0.78rem; color: var(--nacht-soft);
}

/* ------------------------------------------------------------- de pijlen */

.aanvraag__voet {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.8rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(247, 241, 229, 0.12);
}

.pijl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.3rem;
  font: inherit; font-weight: 650; font-size: 0.95rem;
  border-radius: 14px; border: 0; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease, opacity 0.18s ease;
}

.pijl[hidden] { display: none; }

.pijl__teken { width: 20px; height: 20px; flex: none; }

/* Terug staat links, is stil, en zijn pijl wijst terug. Eén vorm, gespiegeld:
   twee pijlen zijn geen reden voor een tweede tekening. */
.pijl--terug {
  background: transparent;
  color: var(--nacht-ink);
  border: 1px solid rgba(247, 241, 229, 0.3);
  margin-right: auto;
}

.pijl--terug .pijl__teken { transform: scaleX(-1); }
.pijl--terug:hover { background: rgba(247, 241, 229, 0.08); }

.pijl--verder,
.pijl--verstuur {
  margin-left: auto;
  background: var(--nacht-ink);
  color: var(--nacht);
}

.pijl--verder:hover,
.pijl--verstuur:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.pijl--verstuur {
  background: var(--goud);
  color: #1a1206;
}

.pijl:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

.pijl:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }

.aanvraag__misging {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: rgba(255, 138, 112, 0.12);
  border: 1px solid rgba(255, 138, 112, 0.45);
  font-size: 0.88rem;
  color: #ffd9cf;
}

.aanvraag__misging b { display: block; color: #ffb4a2; }

/* ------------------------------------------------------------- het einde */

.aanvraag__klaar { text-align: center; align-items: center; justify-content: center; }

.klaar__vonk {
  width: 54px; height: 54px; margin-bottom: 1.2rem;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd27a 0%, #ff7a1f 45%, rgba(226, 74, 16, 0) 72%);
  animation: klaarGloed 2.6s ease-in-out infinite;
}

@keyframes klaarGloed {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

.klaar__kenmerk {
  margin: 0 0 1.6rem;
  font-size: 0.85rem; color: var(--nacht-soft);
}

.klaar__kenmerk b { color: var(--goud); letter-spacing: 0.08em; }

.aanvraag__klaar .pijl--verder { margin: 0; }

/* ------------------------------------------------------- minder beweging */

/*
 * Wie beweging uitzet, krijgt hier geen enkele: geen kolen, geen vervaging,
 * geen gloed. In ruil daarvoor krijgt de doos een vaste warme grond, zodat ze
 * niet als een zwart gat oogt.
 */
@media (prefers-reduced-motion: reduce) {
  .aanvraag__scherm,
  .aanvraag__doos,
  .klaar__vonk { animation: none; }

  .stap,
  .spoor__bol,
  .av-keuze__vlak,
  .pijl,
  .veld input,
  .veld textarea { transition: none; }

  .stap--weg, .stap--komt { opacity: 1; transform: none; }

  .aanvraag__doos {
    background: radial-gradient(120% 100% at 50% 100%, #2a1810 0%, var(--nacht-diep) 55%);
  }
}

/* ------------------------------------------------------------ op een gsm */

@media (max-width: 640px) {
  .aanvraag { padding: 0; place-items: stretch; }

  .aanvraag__doos {
    width: 100%; max-height: 100%; height: 100%;
    border-radius: 0; border-left: 0; border-right: 0;
  }

  /* Op een smal scherm is de doos hoger dan breed, en dan zou `closest-side`
     een smalle schijf tekenen die links en rechts het vuur doorlaat waar wél
     tekst staat. Een ovaal over de volle breedte lost dat op. */
  .aanvraag__spot {
    background:
      radial-gradient(130% 55% at 50% 42%,
        rgba(10, 6, 4, 0.94) 0%,
        rgba(10, 6, 4, 0.9) 50%,
        rgba(10, 6, 4, 0.72) 100%),
      linear-gradient(to bottom,
        rgba(10, 6, 4, 0.6) 0%,
        rgba(10, 6, 4, 0.2) 40%,
        rgba(10, 6, 4, 0.75) 100%);
  }

  .aanvraag__voet { gap: 0.4rem; }
  .pijl { padding: 0.7rem 1rem; font-size: 0.9rem; }
}

/* ============================================================== heldvuur
 *
 * De gloed in de held-afbeelding flikkert. Bijgezet op 2 oktober 2026.
 *
 * ── Waarom een tweede kopie van dezelfde foto ───────────────────────────────
 *
 * De vraag was om de flikkering op de kernen van het beeld te leggen: op het
 * gloeiende merk in het aambeeld, niet op het hele vlak. Je kunt die plek
 * uitmeten en er een vlek neerleggen, maar die vlek staat scheef zodra de
 * uitsnede wijzigt — en `object-fit: cover` snijdt bij elke schermbreedte
 * anders.
 *
 * Daarom ligt er dezelfde render nog eens overheen, in `mix-blend-mode:
 * screen`. Die menging rekent per beeldpunt `1 - (1-a)(1-b)`: donkere punten
 * veranderen zo goed als niets, lichte punten lopen naar wit. Het beeld wijst
 * dus zelf aan waar zijn kernen zitten, en de uitsnede klopt altijd, want het
 * is letterlijk dezelfde uitsnede.
 *
 * ── Waarom het onregelmatig is ──────────────────────────────────────────────
 *
 * De stops staan met opzet op ongelijke afstanden en de twee lagen hebben een
 * andere omlooptijd (7,3 s en 11 s). Twee keerpunten die niet samenvallen,
 * lopen pas na tachtig seconden weer gelijk; een vuur dat op een vaste tel
 * ademt, leest als een knipperlicht.
 */

.heldvuur {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(64rem, 62vw);
  z-index: 0;
  pointer-events: none;

  /* Exact dezelfde uitsnede als .held-foto. Wijzigt die, dan wijzigt deze mee,
     anders schuift de gloed van het beeld af. */
  background: url("held-render.jpg") 38% 45% / cover no-repeat;

  /* Alleen wat al gloeit telt mee: het warme eruit halen en de rest dempen. */
  filter: brightness(1.18) saturate(1.7) contrast(1.22);
  mix-blend-mode: screen;

  /* Dezelfde uitvloeiing naar links als de foto zelf, anders tekent de gloed
     een harde rand waar de foto al vervaagd is. Wijzigt die, dan wijzigt deze
     mee — het zijn twee lagen van hetzelfde beeld. */
  -webkit-mask-image: linear-gradient(to left, black 38%, rgba(0, 0, 0, 0.75) 58%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  mask-image: linear-gradient(to left, black 38%, rgba(0, 0, 0, 0.75) 58%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);

  opacity: 0.42;
  animation: heldKern 7.3s ease-in-out infinite;
  will-change: opacity;
}

/* De kern: het haalt aan en zakt terug, met twee korte opflakkeringen zoals
   een kool die lucht krijgt. */
@keyframes heldKern {
  0%   { opacity: 0.34; }
  12%  { opacity: 0.58; }
  19%  { opacity: 0.41; }
  31%  { opacity: 0.66; }
  38%  { opacity: 0.47; }
  52%  { opacity: 0.72; }
  61%  { opacity: 0.44; }
  74%  { opacity: 0.61; }
  83%  { opacity: 0.38; }
  91%  { opacity: 0.55; }
  100% { opacity: 0.34; }
}

/*
 * En de huid eroverheen: het hele beeld ademt mee, maar nauwelijks. Vier
 * procent helderheid is genoeg om te voelen en te weinig om te zien als je er
 * niet naar zoekt. Meer dan dat en de kop ervoor begint mee te pulseren, en
 * dan kijkt niemand nog naar wat er staat.
 */
.held-foto {
  animation: heldHuid 11s ease-in-out infinite;
  will-change: filter;
}

@keyframes heldHuid {
  0%   { filter: brightness(1)     saturate(1); }
  23%  { filter: brightness(1.035) saturate(1.05); }
  41%  { filter: brightness(0.985) saturate(0.98); }
  58%  { filter: brightness(1.045) saturate(1.07); }
  76%  { filter: brightness(1.005) saturate(1.01); }
  100% { filter: brightness(1)     saturate(1); }
}

/* Het merk boven de kop is dezelfde vlam, dus die gloeit mee. Hier met een
   schaduw en niet met helderheid: het is een png met doorzichtige randen, en
   een filter op helderheid doet daar niets zichtbaars. */
.heldmerk {
  animation: heldMerk 9.1s ease-in-out infinite;
}

@keyframes heldMerk {
  0%   { filter: drop-shadow(0 0 10px rgba(226, 100, 20, 0.18)); }
  27%  { filter: drop-shadow(0 0 20px rgba(255, 140, 40, 0.42)); }
  44%  { filter: drop-shadow(0 0 13px rgba(226, 100, 20, 0.24)); }
  66%  { filter: drop-shadow(0 0 25px rgba(255, 170, 60, 0.5)); }
  85%  { filter: drop-shadow(0 0 12px rgba(226, 100, 20, 0.2)); }
  100% { filter: drop-shadow(0 0 10px rgba(226, 100, 20, 0.18)); }
}

/*
 * Wie beweging uitzet, krijgt geen flikkering. De gloedlaag blijft wél liggen,
 * op een vaste waarde: ze is niet alleen beweging, ze geeft het beeld ook zijn
 * warmte. Stilgezet is dat gewoon een mooiere foto.
 */
@media (prefers-reduced-motion: reduce) {
  .heldvuur { animation: none; opacity: 0.45; }
  .held-foto { animation: none; filter: none; }
  .heldmerk { animation: none; filter: drop-shadow(0 0 14px rgba(226, 100, 20, 0.28)); }
}

/* Op een smal scherm ligt de foto achter de tekst in plaats van ernaast. Een
   flikkerende laag onder een lopende zin is onrustig, dus daar gaat de kern
   een stap zachter en blijft alleen het ademen over. */
@media (max-width: 720px) {
  .heldvuur { opacity: 0.3; animation-duration: 9.5s; }
}