/* =========================================================================
   home.css — de startpagina van pixelpand.nl

   style.css levert het fundament (palet, type, knoppen, balk, voet) en wordt
   door alle pagina's gedeeld. Dit bestand is alleen voor de startpagina.

   Het lay-outidee: de pagina is metselwerk. Overal waar iets scheidt, staat
   een voeg (haarlijn). Het raster is geen decoratie maar de constructie.
   ========================================================================= */

/* ---------- aanvullende sleutels ---------- */

:root {
  --voeg: rgba(21, 23, 25, 0.13);
  --voeg-zacht: rgba(21, 23, 25, 0.07);
  --voeg-licht: rgba(237, 234, 227, 0.18);
  --blok: 12px;              /* de rastermaat waar de aanwijzer op klikt */
  --toneel-hoogte: 100dvh;
}

/* ============================================================
   1. Voortgangsvoeg: hoever het pand af is
   ============================================================ */

.voortgang {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  background: var(--voeg-zacht);
  transform-origin: 0 50%;
  pointer-events: none;
}
.voortgang__vul {
  height: 100%;
  width: 100%;
  background: var(--menie);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
html:not(.js) .voortgang { display: none; }

/* ============================================================
   2. De eigen aanwijzer
   De bezoeker is zelf een blok op het raster. Hij beweegt in stappen
   van precies een rastermaat, niet vloeiend, want zo wordt hier
   gebouwd. De twee haarlijnen zijn de voegen waar hij op staat.
   ============================================================ */

.aanwijzer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.aanwijzer__blok {
  position: absolute;
  width: var(--blok);
  height: var(--blok);
  margin: calc(var(--blok) / -2) 0 0 calc(var(--blok) / -2);
  background: var(--menie);
  transition: width 0.22s var(--uit), height 0.22s var(--uit),
              margin 0.22s var(--uit), background-color 0.22s var(--uit),
              box-shadow 0.22s var(--uit);
}
.aanwijzer__voeg {
  position: absolute;
  background: var(--menie);
  opacity: 0.22;
  transition: opacity 0.25s var(--uit);
}
.aanwijzer__voeg--h { left: -50vw; top: -0.5px; width: 100vw; height: 1px; }
.aanwijzer__voeg--v { top: -50vh; left: -0.5px; height: 100vh; width: 1px; }

/* boven een link of knop wordt het blok een plattegrond: een pand
   waar je binnen kunt lopen */
.aanwijzer[data-vorm='pand'] .aanwijzer__blok {
  width: calc(var(--blok) * 3);
  height: calc(var(--blok) * 3);
  margin: calc(var(--blok) * -1.5) 0 0 calc(var(--blok) * -1.5);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--menie);
}
.aanwijzer[data-vorm='pand'] .aanwijzer__voeg { opacity: 0.4; }

/* boven een invoerveld wordt het een troffel-streek: hoog en smal */
.aanwijzer[data-vorm='veld'] .aanwijzer__blok {
  width: calc(var(--blok) / 3);
  height: calc(var(--blok) * 2.4);
  margin: calc(var(--blok) * -1.2) 0 0 calc(var(--blok) / -6);
}
/* op de donkere afsluitband keert het blok om */
.aanwijzer[data-donker='ja'] .aanwijzer__blok { background: var(--menie); }
.aanwijzer[data-donker='ja'][data-vorm='pand'] .aanwijzer__blok {
  box-shadow: inset 0 0 0 2px var(--menie);
}

html.aanwijzer-aan,
html.aanwijzer-aan a,
html.aanwijzer-aan button,
html.aanwijzer-aan input,
html.aanwijzer-aan summary,
html.aanwijzer-aan label { cursor: none; }

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .aanwijzer { display: none !important; }
  html.aanwijzer-aan, html.aanwijzer-aan * { cursor: auto; }
}

/* ============================================================
   3. Het toneel: hero, bouw en etalage delen een decor
   ============================================================ */

.toneel { position: relative; }

.toneel__doek {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--kalk);
}
.toneel__doek canvas { width: 100%; height: 100%; display: block; }

.toneel__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 62% 78%;
}
.toneel__doek[data-modus='webgl'] .toneel__poster,
.toneel__doek[data-modus='webgl'] .toneel__ruiten { display: none; }
.toneel__doek[data-modus='beeld'] canvas { display: none; }

/* Terugval zonder WebGL: de ramen van de poster gaan één voor één aan,
   van de etalage omhoog, in kalk. Alleen zichtbaar zolang de poster
   staat (data-modus is 'beeld'). Het kader heeft dezelfde verhouding
   als de render (1400×1104) en dezelfde ligging als object-fit: contain
   plus object-position: 62% 78%, zodat de vierkantjes meeschalen. */
.toneel__ruiten {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
}
.toneel__ruiten-kader {
  position: absolute;
  aspect-ratio: 1400 / 1104;
  width: min(100cqw, calc(100cqh * 1400 / 1104));
  left: 62%;
  top: 78%;
  transform: translate(-62%, -78%);
}
.toneel__ruiten-kader i {
  position: absolute;
  background: var(--kalk);
  opacity: 0;
  animation: toneel-raam 0.7s var(--uit) both;
}
.toneel__ruiten-kader i:nth-child(1)  { left: 43.07%; top: 71.38%; width: 4.36%; height: 4.17%; animation-delay: 0.00s; }
.toneel__ruiten-kader i:nth-child(2)  { left: 48.36%; top: 71.01%; width: 4.29%; height: 4.17%; animation-delay: 0.16s; }
.toneel__ruiten-kader i:nth-child(3)  { left: 53.57%; top: 70.65%; width: 4.21%; height: 4.17%; animation-delay: 0.32s; }
.toneel__ruiten-kader i:nth-child(4)  { left: 43.57%; top: 57.43%; width: 3.29%; height: 2.17%; animation-delay: 0.48s; }
.toneel__ruiten-kader i:nth-child(5)  { left: 48.86%; top: 57.25%; width: 3.29%; height: 2.08%; animation-delay: 0.64s; }
.toneel__ruiten-kader i:nth-child(6)  { left: 54.07%; top: 57.07%; width: 3.21%; height: 2.08%; animation-delay: 0.80s; }
.toneel__ruiten-kader i:nth-child(7)  { left: 59.21%; top: 56.79%; width: 3.21%; height: 2.17%; animation-delay: 0.96s; }
.toneel__ruiten-kader i:nth-child(8)  { left: 43.50%; top: 43.48%; width: 3.29%; height: 4.17%; animation-delay: 1.12s; }
.toneel__ruiten-kader i:nth-child(9)  { left: 48.86%; top: 43.48%; width: 3.29%; height: 4.08%; animation-delay: 1.28s; }
.toneel__ruiten-kader i:nth-child(10) { left: 54.07%; top: 43.30%; width: 3.29%; height: 4.17%; animation-delay: 1.44s; }
.toneel__ruiten-kader i:nth-child(11) { left: 59.21%; top: 43.21%; width: 3.21%; height: 4.08%; animation-delay: 1.60s; }
@keyframes toneel-raam {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .toneel__ruiten-kader i { animation: none; opacity: 1; }
}
@supports not (width: 1cqw) {
  .toneel__ruiten { display: none; }
}

/* De scrim: één zachte overgang zodat de tekstkolom altijd op kalk staat
   en het pand rechts vrij blijft. Geen kader, geen doos. */
.toneel__scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Smal scherm: de tekstkolom loopt door tot in de bovenrand van het decor,
     dus daar mag de gevel niet op volle sterkte staan. De overgang loopt
     lang genoeg door om het bijschrift leesbaar te houden en houdt de
     onderste helft van het pand, waar het uithangbord zit, ongemoeid. */
  background:
    linear-gradient(to top, var(--kalk) 0, rgba(237, 234, 227, 0) 14vh),
    linear-gradient(
      to bottom,
      var(--kalk) 0%,
      var(--kalk) 38%,
      rgba(237, 234, 227, 0.66) 56%,
      rgba(237, 234, 227, 0) 74%
    );
}
@media (min-width: 900px) {
  .toneel__scrim {
    background:
      linear-gradient(to top, var(--kalk) 0, rgba(237, 234, 227, 0) 16vh),
      linear-gradient(
        100deg,
        var(--kalk) 0%,
        var(--kalk) 45%,
        rgba(237, 234, 227, 0.86) 52%,
        rgba(237, 234, 227, 0) 62%
      );
  }
}

/* Smal scherm: het pand kan niet achter de tekst staan, daar is de kolom
   te breed voor. Het decor krijgt dan de onderste helft van het scherm en
   de tekst de bovenste. Geen tekst over een gevel heen. */
@media (max-width: 899px) {
  .toneel__doek { inset: auto 0 0 0; height: 44dvh; }
}

/* Smal scherm zonder bewegingslaag — dus bij prefers-reduced-motion en
   zonder JavaScript. Het decor stapt daar niet opzij, want dat opzij
   stappen hangt aan de scroll en die beweging hoort er dan niet te zijn.
   Zonder ingreep komt de tekst van de twee secties die over het decor heen
   schuiven dus boven op het metselwerk te staan, en dat is onleesbaar.
   Ze krijgen daarom een eigen vlak en schuiven er als een plaat overheen.
   Met bewegingslaag mag dit vlak er juist niet zijn: dan zou het de gevel
   afdekken terwijl het uithangbord nog omhoog gaat. */
@media (max-width: 899px) {
  html:not(.beweegt) .snel,
  html:not(.beweegt) .bouw {
    background: var(--kalk);
  }
}

.toneel > section { position: relative; z-index: 2; }

/* ============================================================
   4. Hero
   ============================================================ */

.hero {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  padding-block: clamp(5.5rem, 12vh, 7rem) clamp(3rem, 8vh, 6rem);
}
@media (min-width: 900px) {
  .hero { align-items: center; padding-block: clamp(6rem, 14vh, 9rem) clamp(3rem, 8vh, 6rem); }
}
.hero__in { width: 100%; }
.hero__tekst { max-width: min(34rem, 100%); }

.hero h1 {
  font-size: clamp(2.9rem, 8.6vw, 5.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-variation-settings: 'wdth' 116;
  margin-bottom: var(--maat-3);
}
.hero h1 .licht-aan { color: var(--menie); }

/* Woorden komen als blokken binnen: elk woord in een strook die niets
   laat uitsteken tot het blok op zijn plek ligt. */
.woord { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; }
.woord__in { display: inline-block; }
html.js.beweegt .woord__in { transform: translateY(115%); }

.hero__sub {
  font-size: clamp(1.15rem, 2.7vw, 1.5rem);
  line-height: 1.45;
  max-width: 26ch;
  font-variation-settings: 'opsz' 30;
}
.hero__actie {
  margin-top: var(--maat-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maat-2) var(--maat-3);
}
.hero__voet {
  margin-top: var(--maat-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: center;
  border-top: 1px solid var(--voeg);
  padding-top: var(--maat-2);
  max-width: 32rem;
}
.hero__voet span { display: inline-flex; align-items: center; }
.hero__voet span + span { border-left: 1px solid var(--voeg); padding-left: 1.4rem; }
.hero__voet .hero__voet-extra {
  flex-basis: 100%;
  border-left: none;
  padding-left: 0;
}

/* ============================================================
   4b. Het bordje onder de hero: de twee dingen die meteen tellen

   Hangt aan dezelfde tekstkolom als de hero, want het decor rechts moet
   vrij blijven. Twee regels, gescheiden door een voeg: eerst hoe snel,
   dan wat het kost. Geen kader, geen doos, alleen lijnen.
   ============================================================ */

/* De bouw-sectie eronder brengt zijn eigen bovenruimte mee, dus hier
   alleen genoeg lucht om de plaat vrij te laten staan. */
.snel { padding-block: 0 clamp(2.5rem, 6vw, 4rem); }

.snel__plaat {
  max-width: min(34rem, 100%);
  border-top: 3px solid var(--inkt);
}
.snel__regel { padding-block: clamp(1.15rem, 2.8vw, 1.6rem); }
.snel__regel + .snel__regel { border-top: 1px solid var(--voeg); }

.snel__zin {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  letter-spacing: -0.026em;
  line-height: 1.16;
  text-wrap: balance;
}
.snel__zin b {
  color: var(--menie);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.snel__zin .was { font-size: 0.86em; vertical-align: 0.02em; }

.snel__uitleg {
  margin-top: 0.55rem;
  color: var(--grijs);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 44ch;
}

/* ============================================================
   5. De bouw: drie akten die met de gewone scroll meelopen

   Geen vastgezet toneel meer. De drie stappen staan gewoon onder elkaar
   en de bezoeker scrolt er in zijn eigen tempo langs. Wat meebeweegt is
   het pand achter de tekst: de camera loopt zijn baan en de straat komt
   op over de natuurlijke lengte van deze sectie. De voeg links loopt mee,
   zodat je ziet hoever je in de reeks bent zonder dat er iets vastzit.
   ============================================================ */

.bouw { border-top: 1px solid var(--voeg); padding-block: var(--sectie); }

.bouw__in { width: 100%; }

.bouw__kop {
  max-width: 30rem;
  border-bottom: 1px solid var(--voeg);
  padding-bottom: var(--maat-3);
  margin-bottom: var(--maat-5);
}

.akten {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  --gevorderd: 1;
}
html.js.beweegt .akten { --gevorderd: 0; }

/* De voeg door de drie stappen: een zandkleurige lijn die menie wordt
   naarmate u zakt. Geen scrollbalk, wel een bouwlijn. */
.akten::before,
.akten::after {
  content: '';
  position: absolute;
  left: 0.62rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--zand);
}
.akten::after {
  background: var(--menie);
  transform: scaleY(var(--gevorderd, 1));
  transform-origin: 50% 0;
}

.akte {
  max-width: 34rem;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 var(--maat-3);
  position: relative;
}
.akte + .akte { margin-top: var(--maat-5); padding-top: var(--maat-5); }
/* De voeg tussen twee stappen loopt alleen over de tekstkolom, zodat de
   doorlopende lijn links er niet door wordt afgesneden. */
.akte + .akte::before {
  content: '';
  position: absolute;
  left: 2.6rem;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--voeg);
}

.akte__nr {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  line-height: 1;
  color: var(--menie);
  font-variant-numeric: tabular-nums;
  padding-block: 0.14em 0.3em;
  position: relative;
  z-index: 1;
  background: var(--kalk);
  text-align: center;
  margin-left: -0.15rem;
  width: 1.55rem;
}
.akte__kop {
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  letter-spacing: -0.03em;
}
.akte__lijf { grid-column: 2; margin-top: var(--maat-2); }
.akte__lijf p + p { margin-top: var(--maat-2); }
.akte__lijf strong { color: var(--inkt); font-weight: 700; }

.akte__rol {
  margin-top: var(--maat-3);
  display: grid;
  gap: var(--maat-1) var(--maat-3);
  grid-template-columns: auto minmax(0, 1fr);
  font-family: var(--display);
  font-size: 0.875rem;
  border-top: 1px solid var(--voeg);
  padding-top: var(--maat-2);
}
.akte__rol dt {
  font-weight: 700;
  font-variation-settings: 'wdth' 104;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--menie-tekst);
  padding-top: 0.22em;
}
.akte__rol dd { margin: 0; color: var(--grijs); }

@media (min-width: 900px) {
  .akte { max-width: 30rem; }
}

/* ============================================================
   6. De etalage: het interactieve moment
   ============================================================ */

.etalage { border-top: 1px solid var(--voeg); padding-block: var(--sectie); }
.etalage__in { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.etalage__paneel { max-width: 34rem; }

@media (max-width: 899px) {
  .etalage {
    min-height: 100dvh;
    padding-block: clamp(3rem, 8vh, 4.5rem) calc(44dvh + 1.5rem);
  }
  .etalage h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .etalage .lood { font-size: 1.05rem; }
  .etalage__veld { margin-top: var(--maat-3); }
  .etalage__veld input { min-height: 50px; font-size: 1.05rem; padding: 0.75rem 0.85rem; }
  .etalage__gok { font-size: 0.8rem; padding: 0.4rem 0.65rem; min-height: 34px; }
  .etalage__adres { margin-top: var(--maat-2); font-size: 0.95rem; }
  .etalage__bijschrift, .etalage .klein { margin-top: var(--maat-2); }

  /* De onderkant van de kolom komt op smal scherm onvermijdelijk voor de
     gevel te staan: het decor ligt vast onderin en de tekst loopt eroverheen.
     De ramen en de kleine letter krijgen daarom samen één kalkband, precies
     zo breed als het scherm (marge naar buiten, rand weer naar binnen, dus
     geen overloop). Een bordje op de gevel, in dezelfde taal als de rest van
     de pagina, en het is weer gewoon te lezen. */
  .lampjes,
  #etalage-uitleg {
    position: relative;
    background: var(--kalk);
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
  }
  .lampjes {
    margin-top: var(--maat-2);
    padding-top: var(--maat-2);
    border-top: 1px solid var(--voeg);
  }
  /* Boven de band een strook die naar kalk oploopt, zodat de gevel de band
     in verdwijnt in plaats van er met een rand tegenaan te lopen. Waar het
     pand ook staat, er steekt nooit een stuk dak boven de voeg uit. */
  .lampjes::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 3.5rem;
    background: linear-gradient(to top, var(--kalk), rgba(237, 234, 227, 0));
    pointer-events: none;
  }
  #etalage-uitleg { margin-top: 0; padding-block: var(--maat-2); }
}

.etalage__veld { margin-top: var(--maat-4); max-width: 26rem; }
.etalage__veld label {
  display: block;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grijs);
  margin-bottom: 0.55rem;
}
.etalage__veld input {
  width: 100%;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 106;
  color: var(--inkt);
  background: var(--kalk-licht);
  border: 1px solid var(--veldrand);
  border-radius: var(--radius);
  padding: 0.95rem 1rem;
  min-height: 56px;
}
.etalage__veld input::placeholder { color: var(--grijs); opacity: 1; }
.etalage__veld input:focus-visible { border-color: var(--menie); }

.etalage__schakel {
  margin-top: var(--maat-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.etalage__gok {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--inkt);
  background: transparent;
  border: 1px solid var(--voeg);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  min-height: 38px;
  cursor: pointer;
  transition: border-color 0.2s var(--uit), background-color 0.2s var(--uit);
}
.etalage__gok:hover { border-color: var(--inkt); background: var(--kalk-licht); }

.etalage__adres {
  margin-top: var(--maat-3);
  font-family: var(--display);
  font-size: 1rem;
  color: var(--grijs);
}
.etalage__adres b { color: var(--menie-tekst); font-weight: 700; }

/* de lampjes: de ramen die aangaan, ook als je het pand niet ziet */
.lampjes { display: flex; gap: 5px; margin-top: var(--maat-3); }
.lampjes i {
  width: 13px;
  height: 13px;
  background: var(--zand);
  display: block;
  transition: background-color 0.3s var(--uit);
}
.lampjes i[data-aan='ja'] { background: var(--menie); }

/* ============================================================
   7. Wat u krijgt: ongelijke tegels
   ============================================================ */

.krijgt { padding-block: var(--sectie); border-top: 1px solid var(--voeg); background: var(--kalk); position: relative; z-index: 3; }

.tegels {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 1px;
  background: var(--voeg);
  border: 1px solid var(--voeg);
}
.tegel {
  background: var(--kalk);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: var(--maat-2);
  min-height: 12rem;
}
.tegel h3 { font-size: clamp(1.05rem, 2vw, 1.28rem); }
.tegel p { color: var(--grijs); font-size: 1rem; line-height: 1.6; }
.tegel__merk {
  width: 26px;
  height: 26px;
  color: var(--menie);
  flex: none;
}
.tegel__merk svg { width: 100%; height: 100%; }

/* twee tegels dragen een vlak in plaats van alleen tekst */
.tegel--vol { background: var(--inkt); color: var(--kalk); }
.tegel--vol h3 { color: var(--kalk-licht); }
.tegel--vol p { color: var(--zand); }
.tegel--vol .tegel__merk { color: var(--menie); }

.tegel--raster { background: var(--kalk-licht); position: relative; overflow: hidden; }
.tegel--raster::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--voeg-zacht) 1px, transparent 1px),
    linear-gradient(to bottom, var(--voeg-zacht) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.tegel--raster > * { position: relative; }

@media (min-width: 640px) {
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Acht tegels op een raster van zes kolommen: 3+3, 2+2+2, 2+2+2.
   Elke rij loopt precies vol, er blijft nergens een gat over. */
@media (min-width: 1000px) {
  .tegels { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tegel:nth-child(1) { grid-column: span 3; }
  .tegel:nth-child(2) { grid-column: span 3; min-height: 15rem; }
  .tegel:nth-child(3),
  .tegel:nth-child(4),
  .tegel:nth-child(5),
  .tegel:nth-child(6),
  .tegel:nth-child(7),
  .tegel:nth-child(8) { grid-column: span 2; }
  .tegel:nth-child(8) > div { display: flex; flex-direction: column; gap: var(--maat-2); }
}

/* ============================================================
   7b. Uitbreidingen: het pand krijgt verdiepingen

   Elke module is een regel, en links van elke regel staan de ramen van die
   verdieping. Ze gaan aan zodra u de regel leest, zodat de lijst zich van
   boven naar beneden als een gevel opbouwt. De twee die het vaakst gevraagd
   worden krijgen een dubbele verdieping: vier ramen in plaats van twee.
   ============================================================ */

.aanbouw {
  padding-block: var(--sectie);
  border-top: 1px solid var(--voeg);
  background: var(--kalk-licht);
  position: relative;
  z-index: 3;
}

.modules {
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 6vw, 3.75rem) 0 0;
  border-top: 1px solid var(--inkt);
  counter-reset: verdieping;
}

.module {
  display: grid;
  gap: var(--maat-2) var(--maat-3);
  padding-block: clamp(1.5rem, 3.2vw, 2.1rem);
  border-bottom: 1px solid var(--voeg);
  /* Prijskolom is 6 bakstenen: vast, zodat €45 en €295 op dezelfde x staan. */
  grid-template-columns: 2.4rem minmax(0, 1fr) 4.5rem;
  grid-template-areas:
    'ramen naam prijs'
    'wat   wat  wat'
    'voor  voor voor';
  align-items: start;
}
/* Op een breed scherm staat de naam links en de uitleg rechts. De prijs
   blijft de laatste kolom: over alle zeven verdiepingen dezelfde voeg. */
@media (min-width: 900px) {
  .module {
    grid-template-columns: 2.9rem minmax(11.5rem, 0.9fr) minmax(0, 1.45fr) 6rem;
    grid-template-areas:
      'ramen naam wat prijs'
      'ramen voor wat prijs';
    grid-template-rows: auto 1fr;
    gap: var(--maat-2) clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
  }
}

.module__ramen {
  grid-area: ramen;
  display: grid;
  grid-template-columns: repeat(2, 12px);
  gap: 5px;
  align-content: start;
  padding-top: 0.45rem;
}
.module__ramen i {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--menie);
}
/* Uit gaan ze pas als er beweging is om ze weer aan te doen. */
html.js.beweegt .module__ramen i {
  background: var(--zand);
  transition: background-color 0.5s var(--uit);
}
html.js.beweegt .module[data-aan='ja'] .module__ramen i { background: var(--menie); }

.module__naam {
  grid-area: naam;
  min-width: 0;
  text-wrap: balance;
}
.module--eerst .module__naam { font-size: clamp(1.28rem, 2.7vw, 1.62rem); }

/* Prijskolom: 'vanaf' als bovenschrift, bedrag in display. Inkt, geen menie:
   het oranje hoort bij de plaat verderop. Rechts uitgelijnd, tabulair, zodat
   de enen onder de enen staan. */
.module__prijs {
  grid-area: prijs;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin: 0;
  padding-top: 0.15rem;
  font-family: var(--display);
  text-align: right;
  line-height: 1;
}
.module__prijs-vanaf {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 104;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grijs);
}
.module__prijs-bedrag {
  display: block;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--inkt);
  white-space: nowrap;
}

.module__voor {
  grid-area: voor;
  font-family: var(--display);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--grijs);
}
@media (max-width: 899px) {
  .module__voor {
    border-top: 1px solid var(--voeg-zacht);
    padding-top: 0.85rem;
  }
}

.module__wat { grid-area: wat; }
.module__wat p { color: var(--grijs); font-size: 1rem; line-height: 1.6; }
.module__wat p + p { margin-top: var(--maat-2); }
.module--eerst .module__wat p:first-child { color: var(--inkt); }

/* De afspraak over geld staat apart, want dat is waar de ondernemer op let.
   Geen doos: een menielijst over de volle breedte en de tekst in twee
   kolommen eronder, net als de rest van de pagina. */
.aanbouw__afspraak {
  margin-top: clamp(2.75rem, 6vw, 4rem);
  padding-top: clamp(1.5rem, 3.5vw, 2.25rem);
  border-top: 4px solid var(--menie);
  display: grid;
  gap: var(--maat-3) clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .aanbouw__afspraak {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.aanbouw__afspraak p { color: var(--grijs); max-width: 48ch; }
.aanbouw__afspraak h3 + p { margin-top: var(--maat-2); }
.aanbouw__afspraak p + p { margin-top: var(--maat-2); }
.aanbouw__afspraak strong { color: var(--inkt); }

/* ============================================================
   8. Voorbeeld: een site die al staat
   ============================================================ */

.voorbeeld { padding-block: var(--sectie); border-top: 1px solid var(--voeg); background: var(--kalk); position: relative; z-index: 3; }

.venster {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  position: relative;
  display: block;
  border: 1px solid var(--voeg);
  background: var(--kalk-licht);
  color: inherit;
  text-decoration: none;
}
.venster:hover,
.venster:focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 3px;
}
.venster__cta {
  display: block;
  padding: 0.85rem 0.9rem 1rem;
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--inkt);
  border-top: 1px solid var(--voeg);
}
.venster__balk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--voeg);
  font-family: var(--display);
  font-size: 0.78rem;
  color: var(--grijs);
  letter-spacing: 0.02em;
}
.venster__knopjes { display: flex; gap: 5px; }
.venster__knopjes i { width: 9px; height: 9px; background: var(--zand); display: block; }
.venster__adres {
  margin-left: 0.5rem;
  background: var(--kalk);
  border: 1px solid var(--voeg);
  border-radius: var(--radius);
  padding: 0.2rem 0.6rem;
}
.venster__beeld { display: block; overflow: hidden; }
.venster__beeld img { width: 100%; height: auto; display: block; }

.venster__telefoon {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(-1.5rem, -2vw, -2.5rem);
  width: clamp(96px, 15vw, 172px);
  border: 1px solid var(--voeg);
  background: var(--kalk);
  box-shadow: 0 18px 44px rgba(21, 23, 25, 0.16);
  display: none;
}
.venster__telefoon img { width: 100%; height: auto; display: block; }
@media (min-width: 760px) { .venster__telefoon { display: block; } }

.voorbeeld__uitleg {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  display: grid;
  gap: var(--maat-4);
}
.voorbeeld__uitleg h3 { margin-bottom: var(--maat-2); }
.voorbeeld__uitleg p { color: var(--grijs); }
@media (min-width: 860px) {
  .voorbeeld__uitleg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--maat-5); }
}

/* ============================================================
   9. De straat: horizontaal, op de echte scrollpositie

   De rij panden schuift mee terwijl de sectie langskomt. Niets wordt
   vastgezet: de bezoeker scrolt gewoon door en ziet de straat passeren.
   ============================================================ */

.straat { border-top: 1px solid var(--voeg); background: var(--kalk); position: relative; z-index: 3; }
.straat__in {
  padding-block: var(--sectie);
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.straat__kop > * { max-width: 40rem; }
.straat__baan { overflow: hidden; width: 100%; }
.straat__rij {
  display: flex;
  width: max-content;
  max-width: none;
}
.straat__rij--spiegel { transform: scaleX(-1); }
.straat__rij img {
  display: block;
  height: clamp(190px, 36vh, 340px);
  width: auto;
  max-width: none;
}
html.js.beweegt .straat__rij { will-change: transform; }

.straat__lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--voeg);
}
.straat__lijst li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.85rem 1.4rem 0.85rem 0;
  font-family: var(--display);
  font-size: 0.95rem;
  border-right: 1px solid var(--voeg);
  margin-right: 1.4rem;
}
.straat__lijst li:last-child { border-right: 0; margin-right: 0; }

@media (max-width: 720px) {
  .straat__lijst { display: grid; }
  .straat__lijst li {
    border-right: 0;
    margin-right: 0;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--voeg-zacht);
    justify-content: space-between;
  }
  .straat__lijst li:last-child { border-bottom: 0; }
}
.straat__lijst .staat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--menie-tekst);
}
.straat__lijst .staat[data-staat='wacht'] { color: var(--grijs); }

/* ============================================================
   10. Prijs: een tableau van lijnen
   ============================================================ */

.prijs { padding-block: var(--sectie); border-top: 1px solid var(--voeg); background: var(--kalk); position: relative; z-index: 3; }

/* De plaat: het aanbod op ware grootte. Geen doos met een schaduw, maar
   een vlak met een menielijst erboven, zoals een geschilderde plint. */
.plaat {
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
  background: var(--kalk-licht);
  border-top: 6px solid var(--menie);
  border-bottom: 1px solid var(--voeg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.plaat__kop { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); }
@media (min-width: 900px) {
  .plaat__kop {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: end;
  }
}

.plaat__prijs {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.6rem, 12vw, 6.6rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variation-settings: 'wdth' 112;
  font-variant-numeric: tabular-nums;
  color: var(--menie);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.24em;
}
.plaat__was {
  font-size: 0.32em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.plaat__eenmalig {
  margin-top: 0.8rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--grijs);
  letter-spacing: 0.005em;
}

.plaat__tekst h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); text-wrap: balance; }
.plaat__tekst h3 + p { margin-top: var(--maat-2); color: var(--grijs); }

/* De drie feiten liggen als een plint onder de plaat: op een breed scherm
   naast elkaar onder één voeg, op een smal scherm onder elkaar. */
.plaat__punten {
  list-style: none;
  padding: 0;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  display: grid;
}
.plaat__punten li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.7rem;
  border-top: 1px solid var(--voeg-zacht);
  color: var(--grijs);
  font-size: 1rem;
  line-height: 1.5;
}
.plaat__punten li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 9px;
  height: 9px;
  background: var(--menie);
}
.plaat__punten li b { color: var(--inkt); font-weight: 700; }
@media (min-width: 760px) {
  .plaat__punten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--voeg-zacht);
  }
  .plaat__punten li { border-top: 0; padding-block: 1.1rem 0; }
  .plaat__punten li::before { top: 1.5rem; }
}

.tarief { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--inkt); }
.tarief__regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--maat-2) var(--maat-3);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3.4vw, 2.2rem);
  border-bottom: 1px solid var(--voeg);
}
.tarief__wat {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.tarief__wat span {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--grijs);
  line-height: 1.55;
  max-width: 44ch;
}
.tarief__bedrag {
  font-family: var(--display);
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tarief__bedrag small {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--grijs);
  margin-top: 0.45rem;
  font-variation-settings: 'wdth' 100;
}
/* De bedragen in de tabel blijven inkt: het oranje is van de plaat erboven,
   anders staan er twee keer dezelfde 195 te schreeuwen. */
.tarief__regel--aanbod .tarief__bedrag { color: var(--menie); }

/* De prijs die vervalt. Eén klasse, overal hetzelfde: onder de hero, op de
   plaat en in de tabel. De streep valt op de scroll (--streep). */
.was {
  position: relative;
  display: inline-block;
  line-height: 1;
  color: var(--grijs);
  white-space: nowrap;
}
/* 44% ligt op de helft van de cijferhoogte, niet op de helft van de
   regelhoogte: anders zakt de streep naar de basislijn. */
.was::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 44%;
  height: 0.1em;
  min-height: 2px;
  background: var(--menie);
  transform: scaleX(var(--streep, 1));
  transform-origin: 0 50%;
}
.tarief__was {
  margin-right: 0.6rem;
  font-size: 0.5em;
  vertical-align: 0.35em;
}

/* Uitbreidingen dragen geen bedrag maar een woord. */
.tarief__bedrag--woord {
  font-size: clamp(1.3rem, 2.9vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--grijs);
  white-space: normal;
  text-align: right;
  max-width: 13rem;
}
.tarief__bedrag--woord small { margin-left: auto; max-width: 13rem; }
.tarief__regel--open .tarief__wat span { max-width: 46ch; }

.prijs__naast {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .prijs__naast { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* de vergelijking: twee balken zonder gevulde achtergrondbaan */
.weeg { margin-top: var(--maat-3); display: grid; gap: var(--maat-3); }
.weeg__rij { display: grid; gap: 0.5rem; }
.weeg__kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--maat-2);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
}
.weeg__kop b { font-variant-numeric: tabular-nums; font-weight: 800; }
.weeg__staaf { height: 10px; background: var(--zand); transform-origin: 0 50%; transform: scaleX(var(--vul, 1)); }
.weeg__staaf--ons { --vul: 0.54; }
.weeg__rij--ons .weeg__staaf { background: var(--menie); }

/* wat u niet krijgt: elk punt wordt doorgestreept */
.tegen { list-style: none; padding: 0; margin: var(--maat-3) 0 0; }
.tegen li {
  position: relative;
  padding: 0.95rem 0 0.95rem 2.3rem;
  border-bottom: 1px solid var(--voeg-zacht);
  color: var(--grijs);
}
.tegen li:first-child { border-top: 1px solid var(--voeg-zacht); }
.tegen li b { color: var(--inkt); font-weight: 700; }
.tegen li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 15px;
  height: 15px;
  background: var(--zand);
}
.tegen li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 15px;
  height: 15px;
  background: var(--menie);
  transform: scale(var(--gedaan, 1));
  transform-origin: 50% 50%;
}

/* ============================================================
   11. Vragen
   ============================================================ */

.vragen { padding-block: var(--sectie); border-top: 1px solid var(--voeg); background: var(--kalk-licht); position: relative; z-index: 3; }

.vraaglijst { margin-top: clamp(2.5rem, 6vw, 3.5rem); border-top: 1px solid var(--voeg); }
.vraag { border-bottom: 1px solid var(--voeg); }
.vraag > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.6rem;
  gap: var(--maat-3);
  align-items: center;
  padding-block: clamp(1.1rem, 2.4vw, 1.5rem);
  font-family: var(--display);
  font-size: clamp(1.02rem, 2.1vw, 1.24rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.018em;
  line-height: 1.25;
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary:hover { color: var(--menie-tekst); }
.vraag__teken { position: relative; width: 15px; height: 15px; justify-self: end; }
.vraag__teken::before,
.vraag__teken::after {
  content: '';
  position: absolute;
  background: var(--menie);
  transition: transform 0.28s var(--uit);
}
.vraag__teken::before { left: 0; right: 0; top: 6px; height: 3px; }
.vraag__teken::after { top: 0; bottom: 0; left: 6px; width: 3px; }
.vraag[open] .vraag__teken::after { transform: scaleY(0); }

.vraag__lijf { overflow: hidden; }
.vraag__lijf > div { padding-bottom: clamp(1.2rem, 2.6vw, 1.7rem); max-width: 62ch; }
.vraag__lijf p + p { margin-top: var(--maat-2); }
.vraag__lijf p { color: var(--grijs); }
.vraag__lijf strong { color: var(--inkt); }

/* ============================================================
   12. Over ons
   ============================================================ */

.over { padding-block: var(--sectie); border-top: 1px solid var(--voeg); background: var(--kalk); position: relative; z-index: 3; }
.over__in { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 940px) {
  .over__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); align-items: start; gap: clamp(3rem, 6vw, 5rem); }
}
.over__tekst { max-width: 36em; }
.over__tekst p + p { margin-top: var(--maat-3); }
.over__tekst h3 { margin-top: var(--maat-4); margin-bottom: var(--maat-2); }
.over__tekst strong { color: var(--inkt); font-weight: 700; }

/* Het paneel met het grotere werk. Het begint als bouwtekening en wordt
   naar beneden toe gewoon papier: het raster dooft uit onder de kop, zodat
   de lopende tekst niet op ruitjespapier komt te staan. Dat is ook wat er
   staat: van een plan naar iets dat er straks echt is. */
.ruimer {
  background: var(--kalk-licht);
  border: 1px solid var(--voeg);
  border-top: 3px solid var(--inkt);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  position: relative;
  overflow: hidden;
}
.ruimer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--voeg-zacht) 1px, transparent 1px),
    linear-gradient(to bottom, var(--voeg-zacht) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  /* In pixels, niet in procenten: op een smal scherm is het paneel twee
     keer zo hoog en zou een procentuele overgang de lopende tekst alsnog
     op ruitjespapier zetten. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.4) 92px, transparent 190px);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.4) 92px, transparent 190px);
}
.ruimer > * { position: relative; }

.ruimer__kop { font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -0.03em; }
.ruimer__lood { margin-top: var(--maat-2); color: var(--grijs); font-size: 1rem; line-height: 1.6; }

.ruimer__lijst {
  list-style: none;
  padding: 0;
  margin: var(--maat-3) 0 0;
  border-top: 1px solid var(--voeg);
}
.ruimer__lijst li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-bottom: 1px solid var(--voeg-zacht);
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ruimer__lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.02rem;
  width: 9px;
  height: 9px;
  background: var(--menie);
}
.ruimer__slot { margin-top: var(--maat-3); color: var(--grijs); font-size: 1rem; line-height: 1.6; }

.kaartlijst { list-style: none; padding: 0; margin: var(--maat-4) 0 0; display: grid; gap: 0; }
.kaartlijst li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--maat-2);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--voeg-zacht);
  font-family: var(--display);
  font-size: 0.92rem;
}
.kaartlijst li:first-child { border-top: 1px solid var(--voeg-zacht); }
.kaartlijst .sleutel { color: var(--grijs); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding-top: 0.2em; }

/* ============================================================
   13. Afsluiting: het licht gaat aan
   Eén omslag naar donker, precies waar het verhaal om vraagt, en die
   loopt door tot en met de voet. Geen wisselend thema per sectie.
   ============================================================ */

.slot {
  background: var(--inkt);
  color: var(--kalk);
  padding-block: clamp(4rem, 9vw, 7rem);
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.slot h2 { color: var(--kalk-licht); }
.slot p { color: var(--zand); }
.slot a { color: var(--kalk-licht); }
/* De algemene linkkleur van de band won het van de knop, waardoor het label
   op menie op 4,2:1 uitkwam. Wit haalt 4,6:1 en is ook wat de knop hoort te
   zijn. */
.slot a.knop--primair { color: #fff; }

.slot__gevel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  max-width: 19rem;
}
.slot__gevel i {
  display: block;
  aspect-ratio: 1;
  background: rgba(237, 234, 227, 0.12);
}
.slot__gevel i[data-aan='ja'] { background: var(--menie); }

.slot__in { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 900px) {
  .slot__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(3rem, 7vw, 5.5rem); }
}
/* De twee argumenten nog één keer, vlak boven de knop */
.slot__usp { list-style: none; padding: 0; margin: var(--maat-4) 0 0; max-width: 34rem; }
.slot__usp li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.7rem;
  border-top: 1px solid rgba(237, 234, 227, 0.16);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--zand);
}
.slot__usp li:last-child { border-bottom: 1px solid rgba(237, 234, 227, 0.16); }
.slot__usp li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 9px;
  height: 9px;
  background: var(--menie);
}
.slot__usp b { color: var(--kalk-licht); font-weight: 800; }

.slot__acties { margin-top: var(--maat-4); display: flex; flex-wrap: wrap; gap: var(--maat-2) var(--maat-3); align-items: center; }
.slot .knop--stil { color: var(--kalk); border-color: rgba(237, 234, 227, 0.32); }
.slot .knop--stil:hover { border-color: var(--kalk); background: rgba(237, 234, 227, 0.08); }

.gegevens { list-style: none; padding: 0; margin: 0; }
.gegevens li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--maat-2);
  padding-block: 0.8rem;
  border-bottom: 1px solid rgba(237, 234, 227, 0.14);
  font-family: var(--display);
  font-size: 0.95rem;
}
.gegevens li:first-child { border-top: 1px solid rgba(237, 234, 227, 0.14); }
.gegevens .sleutel { color: var(--zand); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding-top: 0.25em; }
.gegevens a { color: var(--kalk-licht); }

/* ============================================================
   14. Verschijnen op de scroll
   Zonder JS staat alles er gewoon. Pas als JS draait mag iets beginnen
   met verstoppen, en alleen als de bezoeker beweging wil.
   ============================================================ */

html.js.beweegt [data-toon] { opacity: 0; }
html.js.beweegt [data-toon].in { opacity: 1; }

/* ============================================================
   15. Minder beweging: alles staat stil, niets ontbreekt
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.js .woord__in { transform: none !important; }
  html.js [data-toon] { opacity: 1 !important; }
  .akte { position: static !important; opacity: 1 !important; }
  .akten { --gevorderd: 1 !important; }
  .was::after { transform: scaleX(1) !important; }
  html.js .module__ramen i { background: var(--menie) !important; transition: none !important; }
  .tegen li::after { transform: scale(1) !important; }
  .weeg__staaf { transform: scaleX(var(--vul, 1)) !important; }
  .aanwijzer { display: none !important; }
}