/* ── Last Real Engines · de website, lichte stijl (ontwerpronde C) ─────────────────────────────
   7 oktober 2026. Wessel koos variant C ("modern wit"); daarna heeft een team van vier — creative
   director, UX, conversie, front-end — hem kritisch bekeken. Dit bestand is hun uitkomst, en het
   vervangt de donkere stijl helemaal in plaats van erop te stapelen.

   De regel die het merk herkenbaar houdt: DE WINKEL SPREEKT JOST OP WIT, DE GIDS SPREEKT BODONI OP
   PAPIER. Alles wat het product ís — de modelnaam, het bedrag, de cijfers, de stukken uit de gids, de
   gratis gids zelf — staat in Bodoni en, waar het kan, op het crème van de pdf. Al het andere is
   Jost op wit. En de vormen komen uit het logo: rechte hoeken, haarlijnen, geen pillen.

   Opbouw: tokens, basis, dan één blok per onderdeel (in de volgorde van bouw_v2.py). Mobiel eerst;
   breder via min-width. Kleuren alleen als token. */

@font-face { font-family:'Bodoni Moda'; src:url('/opmaak/BodoniModa.woff2') format('woff2');
             font-weight:400 700; font-display:swap; }
@font-face { font-family:'Bodoni Moda'; src:url('/opmaak/BodoniModa-Italic.woff2') format('woff2');
             font-weight:400 700; font-style:italic; font-display:swap; }
@font-face { font-family:'Jost'; src:url('/opmaak/Jost.woff2') format('woff2');
             font-weight:300 600; font-display:swap; }

:root {
  /* kleur — contrast op wit tussen haakjes */
  --wit:#ffffff;
  --papier:#fbf9f4;          /* de pdf zelf */
  --band:#f4f1ea;            /* een sectie die zich onderscheidt */
  --inkt:#171512;            /* koppen, de hoofdknop */
  --tekst:#2a2722;           /* lopende tekst */
  --zacht:#6b665d;           /* bijzaken (5.7:1) */
  --lijn:#e7e2d8;            /* scheidingen */
  --lijn-ui:#8c8476;         /* velden en lijnknoppen (3.7:1) */
  --messing:#a86f39;         /* versiering vanaf 24 px: de R, de cijfers, lijnen */
  --messing-tekst:#8a5a2b;   /* messing als kleine tekst (5.9:1) */
  --messing-was:rgba(168,111,57,.08);
  --schaduw-papier:0 1px 2px rgba(23,21,18,.06), 0 16px 32px -16px rgba(23,21,18,.28);

  --serif:'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

  --r-klein:2px; --r:4px;
  --rand:max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --maat:72rem; --leesmaat:40rem;
}

/* ── basis ── */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; color-scheme:light; scroll-behavior:smooth; }
body { margin:0; background:var(--wit); color:var(--tekst);
       font:400 1.0625rem/1.65 var(--sans); }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration-color:var(--messing); text-underline-offset:3px;
    text-decoration-thickness:1px; }
a:hover { color:var(--inkt); }
b, strong { font-weight:600; color:var(--inkt); }
::selection { background:var(--messing); color:var(--wit); }
:focus-visible { outline:2px solid var(--messing); outline-offset:3px; }
h1, h2, h3, h4 { margin:0; color:var(--inkt); font-weight:500; text-wrap:balance; }
h1 { font:500 clamp(2rem, 4.4vw, 2.85rem)/1.1 var(--sans); letter-spacing:-.02em; }
h2 { font:500 clamp(1.5rem, 3vw, 1.9rem)/1.18 var(--sans); letter-spacing:-.015em; margin-bottom:1rem; }
h3 { font:500 1.15rem/1.3 var(--sans); margin-bottom:.4rem; }
p { margin:0 0 1rem; }
.serif, .bedrag span, .slot h2, .blad .monster-kop {
  font-family:var(--serif); letter-spacing:-.005em; font-optical-sizing:none; }
.label { font:500 .8125rem/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase;
         color:var(--messing-tekst); margin:0 0 .75rem; }
.lood { font-size:clamp(1.0625rem, 1.6vw, 1.2rem); line-height:1.55; color:var(--tekst); max-width:38em; }
.klein, .fijn, .meta { font-size:.875rem; color:var(--zacht); }
.klein a, .fijn a, .meta a { color:var(--tekst); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
      clip-path:inset(50%); white-space:nowrap; }
.overslaan { position:absolute; left:-999px; top:.5rem; background:var(--inkt); color:var(--wit);
             padding:.6rem 1rem; z-index:60; border-radius:var(--r); }
.overslaan:focus { left:.5rem; }
.w { width:min(100% - 2 * var(--rand), var(--maat)); margin-inline:auto; }
.smal { max-width:var(--leesmaat); }
.twee { display:grid; gap:2.5rem; }
@media (min-width:56rem) { .twee { grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start; } }

/* ── secties: wit met een haarlijn ertussen, of een band ── */
.sectie { padding:3.5rem 0; }
.sectie + .sectie:not(.band), .band + .sectie { border-top:1px solid var(--lijn); }
.band { background:var(--band); border-top:0; }
.band + .sectie { border-top:0; }
@media (min-width:56rem) { .sectie { padding:6rem 0; } }

/* ── logo: het kader met L·R·E, ruimte binnen de lijn ── */
.logo { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--inkt); }
.logo-kader { display:inline-flex; align-items:center; justify-content:center; width:2.25rem;
              height:2.25rem; border:1px solid var(--inkt); font:500 .82rem/1 var(--serif);
              letter-spacing:.06em; padding-left:.06em; }
.logo-kader em, .logo-naam em { font-style:italic; color:var(--messing); }
.logo-naam { font:400 1.06rem/1 var(--serif); white-space:nowrap; }

/* ── kop ── */
.kop { border-bottom:1px solid var(--lijn); background:var(--wit); }
.kop-w { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4rem; }
.kop-nav { display:flex; gap:1.25rem; }
.kop-nav a { font-size:.9375rem; text-decoration:none; color:var(--tekst); padding:.6rem 0; }
.kop-nav a:hover { color:var(--inkt); text-decoration:underline; }
@media (max-width:23rem) { .kop-nav a:last-child { display:none; } .logo-naam { font-size:.98rem; } }

/* ── knoppen: rechthoekig, 4 px, de vorm van het logo ── */
.knop { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:3rem;
        padding:.7rem 1.4rem; border:1px solid var(--inkt); border-radius:var(--r);
        font:500 1rem/1.2 var(--sans); text-decoration:none; cursor:pointer;
        transition:background .15s, color .15s, border-color .15s; }
.knop-hoofd { background:var(--inkt); color:var(--wit); }
.knop-hoofd:hover { background:var(--messing-tekst); border-color:var(--messing-tekst); color:var(--wit); }
.knop-groot { min-height:3.25rem; padding:.8rem 1.8rem; font-size:1.0625rem; }
.knop-lijn { background:transparent; color:var(--inkt); border-color:var(--lijn-ui); }
.knop-lijn:hover { border-color:var(--inkt); background:var(--wit); }
.knop.is-uit { background:var(--band); color:var(--zacht); border-color:var(--lijn); cursor:default; }
.knoppen { display:flex; flex-wrap:wrap; gap:.6rem; }

/* ── voorpagina: kop met de keuze, daaronder de foto ── */
.held { display:flex; flex-direction:column; }
.held-foto { order:-1; display:block; }
.held-foto img { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
.held-tekst { padding:1.75rem 0 2.75rem; }
.held h1 { max-width:20em; margin-bottom:1rem; }
.held .lood { margin-bottom:1.6rem; }
.kiezer { display:grid; gap:.6rem; max-width:40rem; margin:0 0 1rem; }
.kiezer select { width:100%; min-height:3.25rem; padding:.7rem 2.6rem .7rem 1rem; font:400 1rem var(--sans);
                 color:var(--inkt); background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23171512' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1rem center;
                 border:1px solid var(--lijn-ui); border-radius:var(--r); -webkit-appearance:none; appearance:none; }
.kiezer select:hover { border-color:var(--inkt); }
.held-prijs { font-size:.9375rem; color:var(--zacht); max-width:36rem; margin:0 0 .4rem; }
.held-prijs strong { color:var(--inkt); }
.held-onder { margin:0; font-size:.9375rem; }
@media (min-width:52rem) {
  .held { flex-direction:column; }
  .held-foto { order:0; width:min(100% - 2 * var(--rand), 80rem); margin:0 auto 4rem; }
  .held-foto img { aspect-ratio:21 / 9; border-radius:var(--r); }
  .held-tekst { text-align:center; padding:4.5rem 0 3rem; }
  .held h1, .held .lood, .held-prijs { margin-inline:auto; }
  .held h1 { max-width:17em; }
  .kiezer { grid-template-columns:1fr auto; margin-inline:auto; }
}

/* ── het product: inhoudsopgave, kaart en telefoon ── */
.productbeeld { margin:0; }
.pb-vlak { position:relative; aspect-ratio:1 / 1.02; max-width:30rem; margin:0 auto; }
.pb-vlak img { position:absolute; height:auto; border-radius:var(--r-klein); box-shadow:var(--schaduw-papier); }
.pb-a4 { left:9%; top:1%; width:54%; transform:rotate(-3deg); }
.pb-kaart { right:0; top:14%; width:50%; transform:rotate(2.5deg); }
.pb-telefoon { position:absolute; left:0; bottom:2%; width:29%; aspect-ratio:9 / 19; padding:2.6%;
               background:var(--inkt); border-radius:15% / 7%; box-shadow:0 18px 36px -14px rgba(23,21,18,.55); }
.pb-telefoon img { position:static; width:100%; height:100%; object-fit:contain; object-position:top;
                   background:var(--papier); border-radius:12% / 5.6%; box-shadow:none; }
.productbeeld figcaption { margin-top:1.1rem; font-size:.8125rem; color:var(--zacht); text-align:center; }

/* ── rijen: een lijst met haarlijnen in plaats van kaartjes ── */
.rijen { list-style:none; padding:0; margin:1.25rem 0 1.5rem; }
.rijen li { padding:1.1rem 0; border-top:1px solid var(--lijn); }
.rijen li:last-child { border-bottom:1px solid var(--lijn); }
.rijen p { margin:0; color:var(--tekst); }
.rijen.kort li { padding:.85rem 0; }
.band .rijen li { border-color:#ddd6c8; }

/* ── een stuk uit de gids, op papier ── */
.blad { background:var(--papier); padding:1.4rem 1.4rem 1.6rem; box-shadow:var(--schaduw-papier);
        color:var(--tekst); }
.blad-kop { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0 0 1.2rem;
            padding-bottom:.7rem; border-bottom:1px solid var(--lijn); font:500 .75rem/1.4 var(--sans);
            letter-spacing:.08em; text-transform:uppercase; color:var(--messing-tekst); }
.blad-merk { font:400 .875rem var(--serif); letter-spacing:0; text-transform:none; color:var(--inkt);
             white-space:nowrap; }
.blad-merk i { color:var(--messing); }
.blad .monster-kop { font-size:1.45rem; line-height:1.2; color:var(--inkt); margin:0 0 .5rem;
                     font-variation-settings:'opsz' 28; }
.blad .spec { font-size:.9rem; font-weight:500; color:var(--messing-tekst); margin:0 0 .8rem; }
.blad ul.afvink, .gids ul.afvink { list-style:none; padding:0; margin:0 0 1rem; }
.blad ul.afvink li, .gids ul.afvink li { position:relative; padding:0 0 .85rem 1.9rem; margin:0 0 .85rem;
                                         border-bottom:1px solid var(--lijn); }
.blad ul.afvink li:last-child { border-bottom:0; margin-bottom:0; }
.blad ul.afvink li::before, .gids ul.afvink li::before { content:''; position:absolute; left:0; top:.3em;
                     width:.95rem; height:.95rem; border:1.5px solid var(--inkt); }
@media (min-width:40rem) { .blad { padding:1.8rem 2.2rem 2.2rem; } }
@media (max-width:30rem) { .blad-merk { display:none; } }

/* ── merken en het raster met alle auto's ── */
.chips { display:flex; gap:.5rem; overflow-x:auto; scroll-snap-type:x proximity; margin:0 0 1.75rem;
         padding-bottom:.25rem; -webkit-overflow-scrolling:touch; scrollbar-width:none;
         mask-image:linear-gradient(90deg, #000 88%, transparent); }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:.35rem;
        min-height:2.75rem; padding:.5rem .95rem; border:1px solid var(--lijn-ui); border-radius:var(--r);
        font-size:.9375rem; text-decoration:none; color:var(--inkt); white-space:nowrap; }
.chip span { color:var(--zacht); font-size:.8125rem; }
.chip:hover { border-color:var(--inkt); }
.chip[aria-current] { background:var(--inkt); border-color:var(--inkt); color:var(--wit); }
.chip[aria-current] span { color:#c9c3b8; }
@media (min-width:56rem) { .chips { flex-wrap:wrap; overflow:visible; mask-image:none; } }

.raster { display:grid; grid-template-columns:1fr; }
.kaartje { display:grid; grid-template-columns:7rem 1fr; gap:1rem; align-items:center; padding:.75rem 0;
           border-top:1px solid var(--lijn); text-decoration:none; color:var(--inkt); }
.kaartje[hidden] { display:none; }
.kaartje-beeld { position:relative; display:block; border-radius:var(--r); overflow:hidden; background:#ece7dd; }
.kaartje-beeld::after { content:''; position:absolute; inset:0; border-radius:inherit;
                        box-shadow:inset 0 0 0 1px rgba(23,21,18,.08); }
.kaartje-foto img { width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; transition:transform .3s; }
.kaartje-tekst strong { display:block; font:500 1rem/1.3 var(--sans); color:var(--inkt); }
.kaartje-tekst span { display:block; font-size:.8125rem; line-height:1.45; color:var(--zacht); margin-top:.15rem; }
.kaartje:hover strong { text-decoration:underline; text-decoration-color:var(--messing); text-underline-offset:3px; }
@media (min-width:40rem) {
  .raster { grid-template-columns:repeat(auto-fill, minmax(14.5rem, 1fr)); gap:2rem 1.25rem; }
  .kaartje { display:block; padding:0; border:0; }
  .kaartje-tekst { display:block; padding-top:.75rem; }
  .kaartje:hover .kaartje-foto img { transform:scale(1.02); }
}
.merkkop { display:flex; align-items:baseline; gap:.6rem; font-size:1.375rem; margin:3rem 0 1rem;
           padding-top:1.5rem; border-top:1px solid var(--lijn); scroll-margin-top:1rem; }
.merkkop span { font-size:.875rem; font-weight:400; color:var(--zacht); }

/* ── hoe het werkt ── */
.stappen { list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:1.5rem; counter-reset:stap; }
.stappen li { counter-increment:stap; display:grid; grid-template-columns:3rem 1fr; column-gap:1rem;
              padding-top:1.25rem; border-top:1px solid #ddd6c8; }
.stappen li::before { content:counter(stap, decimal-leading-zero); grid-row:span 2; font:400 1.5rem/1 var(--serif);
                      color:var(--messing); font-variation-settings:'opsz' 28; }
.stappen p { margin:0; color:var(--tekst); }
@media (min-width:56rem) {
  .stappen { grid-template-columns:repeat(3, 1fr); gap:2.5rem; }
  .stappen li { display:block; }
  .stappen li::before { display:block; font-size:1.75rem; margin-bottom:1rem; }
}

/* ── vragen: uitklapbaar, zonder script ── */
.faq { border-top:1px solid var(--lijn); }
.faq details { border-bottom:1px solid var(--lijn); }
.faq summary { position:relative; list-style:none; cursor:pointer; padding:1.05rem 2.5rem 1.05rem 0;
               font-weight:500; color:var(--inkt); min-height:2.75rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:.25rem; top:.75rem; font:300 1.5rem/1 var(--sans);
                      color:var(--messing-tekst); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0 0 1.25rem; max-width:38rem; }

/* ── het slot ── */
.slot { padding:4.5rem 0; text-align:center; border-top:1px solid var(--lijn); }
.slot .w { margin-inline:auto; }
.slot h2 { font-size:clamp(1.85rem, 3.6vw, 2.5rem); font-weight:500; line-height:1.12; margin-bottom:1.25rem;
           font-variation-settings:'opsz' 36; }
.slot .knop { margin-bottom:.5rem; }
@media (min-width:56rem) { .slot { padding:6.5rem 0; } }

/* ── modelpagina ── */
.kruimel { display:flex; flex-wrap:wrap; gap:.4rem; padding:1rem 0 0; font-size:.875rem; color:var(--zacht); }
.kruimel a { color:var(--zacht); }
.kruimel a:hover { color:var(--inkt); }
.held-model { padding:1rem 0 3rem; }
.held-model-w { display:flex; flex-direction:column; gap:1.5rem; }
.hm-foto { order:-1; margin:0 calc(-1 * var(--rand)); }
.hm-beeld img { width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; }
.hm-foto figcaption { padding:.5rem var(--rand) 0; font-size:.78rem; color:var(--zacht); }
.held-model h1 { font-size:clamp(2.1rem, 4.6vw, 2.9rem); line-height:1.06; letter-spacing:-.01em;
                 margin-bottom:.9rem; font-variation-settings:'opsz' 36; }
.hm-koop { margin:1.4rem 0 .7rem; }
.hm-koop .knop { width:100%; }
.pakket { font-size:.875rem; color:var(--zacht); margin-bottom:.6rem; }
.hm-gratis { margin:0; font-size:.9375rem; }
@media (min-width:56rem) {
  .held-model { padding:2rem 0 5rem; }
  .held-model-w { display:grid; grid-template-columns:5fr 6fr; gap:4rem; align-items:center; }
  .hm-foto { order:0; margin:0; }
  .hm-beeld img { border-radius:var(--r); }
  .hm-foto figcaption { padding:.5rem 0 0; }
  .hm-koop .knop { width:auto; }
}

.inhoudlijst { list-style:none; padding:0; margin:1.25rem 0 0; }
.inhoudlijst li { display:grid; grid-template-columns:3rem 1fr; align-items:baseline; padding:.9rem 0;
                  border-top:1px solid #ddd6c8; font-size:1.0625rem; color:var(--inkt); }
.inhoudlijst li:last-child { border-bottom:1px solid #ddd6c8; }
.inhoudlijst .nr { font:400 1.35rem/1 var(--serif); color:var(--messing); font-variation-settings:'opsz' 28; }

.bladen { margin-top:1.5rem; align-items:start; }

.prijs { display:grid; gap:2rem; }
.bedrag span { display:block; font-size:clamp(3.25rem, 7vw, 4.25rem); font-weight:500; line-height:1;
               color:var(--inkt); font-variation-settings:'opsz' 36; }
.bedrag small { display:block; margin-top:.75rem; font-size:.875rem; color:var(--zacht); max-width:18rem; }
.prijs-tekst p { font-size:1.0625rem; color:var(--tekst); }
.prijs .knop { margin:.5rem 0 .25rem; }
@media (min-width:56rem) { .prijs { grid-template-columns:16rem 1fr; gap:4rem; align-items:start; } }

.vragen { padding-left:1.4rem; margin:0 0 2rem; color:var(--zacht); }
.vragen li { padding:.35rem 0 .35rem .25rem; }
.vragen a { color:var(--inkt); }
.gratis-blok { border:1px solid var(--lijn); border-radius:var(--r); padding:1.4rem 1.4rem .6rem; }
.gratis-lood { color:var(--tekst); }

.rail-kaartjes { display:grid; grid-auto-flow:column; grid-auto-columns:72%; gap:1rem; overflow-x:auto;
                 scroll-snap-type:x mandatory; padding-bottom:.5rem; scrollbar-width:thin; }
.rail-kaartjes .kaartje { display:block; padding:0; border:0; scroll-snap-align:start; }
.rail-kaartjes .kaartje-tekst { padding-top:.6rem; }
.meer { margin:1.25rem 0 0; }
@media (min-width:40rem) { .rail-kaartjes { grid-auto-columns:40%; } }
@media (min-width:56rem) { .rail-kaartjes { grid-auto-flow:row; grid-template-columns:repeat(4, 1fr);
                                             overflow:visible; gap:2rem 1.25rem; } }

/* ── de koopbalk: alleen op een telefoon, alleen als er geen andere knop in beeld is ── */
.koopbalk { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center;
            justify-content:space-between; gap:.75rem; background:var(--wit); border-top:1px solid var(--lijn);
            padding:.65rem var(--rand) calc(.65rem + env(safe-area-inset-bottom));
            transform:translateY(105%); visibility:hidden; transition:transform .25s, visibility .25s; }
.koopbalk.is-zichtbaar { transform:none; visibility:visible; }
.koopbalk-naam { min-width:0; font-weight:500; color:var(--inkt); line-height:1.25; overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap; }
.koopbalk-naam small { display:block; font-weight:400; font-size:.78rem; color:var(--zacht); }
.koopbalk .knop { flex:none; min-height:2.75rem; padding:.55rem 1rem; font-size:.9375rem; }
body.met-balk { padding-bottom:4.5rem; }
@media (min-width:56rem) { .koopbalk { display:none; } body.met-balk { padding-bottom:0; } }

/* ── de gratis gids: de pagina is papier ── */
body.papier, body.papier .kop { background:var(--papier); }
.voortgang { position:fixed; top:0; left:0; right:0; height:2px; z-index:50; pointer-events:none; }
.voortgang span { display:block; height:100%; background:var(--messing); transform-origin:left; transform:scaleX(0); }
.gids { padding:0 0 3rem; }
.gids-raster { display:block; }
.gids-tekst { max-width:42rem; margin:0 auto; }
.gids .kruimel { padding-top:1.25rem; margin-bottom:1.5rem; }
.gids h1 { font:500 clamp(2rem, 4.5vw, 2.75rem)/1.1 var(--serif); letter-spacing:-.01em; margin-bottom:1rem;
           font-variation-settings:'opsz' 36; }
.gids .lood { font-size:1.15rem; }
.gids .meta { margin-bottom:1.5rem; }
.kort-antwoord { background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r);
                 padding:1.2rem 1.4rem .6rem; margin:0 0 1.75rem; }
.kort-antwoord ol { padding-left:1.25rem; margin:0 0 .6rem; }
.kort-antwoord li { padding:.2rem 0; }
.kort-antwoord a { color:var(--inkt); }
.omslag { margin:0 0 1.5rem; }
.omslag-beeld img { width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; border-radius:var(--r-klein); }
.omslag figcaption { font-size:.78rem; color:var(--zacht); margin-top:.5rem; }
.inhoud-mobiel { border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn); margin:0 0 1rem; }
.inhoud-mobiel summary { cursor:pointer; padding:.9rem 0; font-weight:500; color:var(--inkt); }
.inhoud-mobiel ol { margin:0 0 1rem; padding-left:1.4rem; }
.inhoud-mobiel li { padding:.2rem 0; }
.gids-tekst h2 { font:500 clamp(1.5rem, 3vw, 1.9rem)/1.18 var(--serif); margin:3.5rem 0 1rem; padding-top:2rem;
                 border-top:1px solid var(--lijn); scroll-margin-top:1rem; font-variation-settings:'opsz' 28; }
.gids-tekst h3 { font:500 1.2rem/1.3 var(--sans); margin:2rem 0 .6rem; }
.gids-tekst h4 { font:600 1.0625rem/1.35 var(--sans); margin:1.6rem 0 .45rem; }
.gids-tekst h3.punt, .gids-tekst h4.punt { font:600 1.15rem/1.4 var(--sans); margin:1.9rem 0 .45rem;
                                           scroll-margin-top:1rem; }
.gids-tekst p, .gids-tekst li { font-size:1.0625rem; line-height:1.72; }
.gids-tekst ul { padding-left:1.25rem; }
.gids-tekst .spec { font-size:.9rem; color:var(--messing-tekst); font-weight:500; }
.gids-tekst blockquote { margin:1.5rem 0; padding:.1rem 0 .1rem 1.2rem; border-left:2px solid var(--messing); }
.schuif { overflow-x:auto; margin:0 0 1.5rem; }
.schuif table { width:100%; border-collapse:collapse; font-size:.9375rem; font-variant-numeric:tabular-nums; }
.schuif th, .schuif td { text-align:left; padding:.6rem .75rem .6rem 0; border-bottom:1px solid var(--lijn);
                         vertical-align:top; }
.schuif th { font-size:.78rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--messing-tekst); }
.tussenkoop, .koopblok { background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r);
                         padding:1.5rem 1.5rem 1.2rem; margin:2.5rem 0 1rem; }
.tussenkoop-lood, .koopblok-lood { color:var(--tekst); }
.gids .terug { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--lijn); }
.rail { display:none; }
@media (min-width:74rem) {
  .gids-raster { display:grid; grid-template-columns:14rem minmax(0, 42rem); gap:5rem; justify-content:center;
                 width:min(100% - 2 * var(--rand), 66rem); }
  .gids-tekst { margin:0; }
  .rail { display:block; position:sticky; top:2rem; align-self:start; max-height:calc(100vh - 4rem);
          overflow:auto; padding-top:4.5rem; }
  .rail ol { list-style:none; padding:0; margin:0 0 1.5rem; }
  .rail a { display:block; padding:.45rem 0 .45rem .9rem; border-left:2px solid var(--lijn); font-size:.875rem;
            line-height:1.4; color:var(--zacht); text-decoration:none; }
  .rail a:hover { color:var(--inkt); }
  .rail a.is-actief { color:var(--inkt); border-left-color:var(--messing); background:var(--messing-was); }
  .rail-koop a { display:inline-block; font-size:.875rem; font-weight:500; color:var(--messing-tekst); }
  .inhoud-mobiel { display:none; }
}

/* ── tekstpagina's: één leeskolom ── */
.tekst { padding:3rem 0 4rem; }
.tekst h1 { margin-bottom:0; }
.streep { width:3rem; height:2px; background:var(--messing); border:0; margin:1.5rem 0 2rem; }
.tekst h2 { font-size:1.375rem; margin:2.5rem 0 .75rem; }
.tekst ul { padding-left:1.25rem; }
.tekst li { margin-bottom:.5rem; }
.credits { list-style:none; padding:0; }
.credits li { padding:.8rem 0; border-top:1px solid var(--lijn); font-size:.9375rem; }
.terug { margin-top:3rem; }
.eerste { padding-top:3rem; }

/* ── voet ── */
.voet { background:var(--band); padding:3.5rem 0 calc(1.5rem + env(safe-area-inset-bottom)); }
.voet-raster { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 2rem; }
.voet-merk { grid-column:1 / -1; }
.voet-merk p { color:var(--zacht); font-size:.9375rem; max-width:24rem; margin:1rem 0; }
.voet-contact { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.voet-contact a { color:var(--inkt); }
.voet-kolom { display:flex; flex-direction:column; }
.voet-kop { font:500 .8125rem/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase;
            color:var(--messing-tekst); margin:0 0 .4rem; }
.voet-kolom a { padding:.4rem 0; font-size:.9375rem; color:var(--tekst); text-decoration:none; width:fit-content; }
.voet-kolom a:hover { color:var(--inkt); text-decoration:underline; }
.voet-onder { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; margin:3rem 0 0;
              padding-top:1.25rem; border-top:1px solid #ddd6c8; font-size:.8125rem; color:var(--zacht); }
@media (min-width:56rem) { .voet-raster { grid-template-columns:2fr 1fr 1fr; } .voet-merk { grid-column:auto; } }

/* ── het label van de kijkversie ── */
.staging { position:fixed; left:.6rem; bottom:.6rem; z-index:70; background:var(--messing); color:var(--wit);
           font:500 .66rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; padding:.45rem .6rem;
           border-radius:var(--r-klein); pointer-events:none; }

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

.eerste h1 { margin-bottom:1.1rem; }
/* De kop van de voorpagina is de title: "Buying guides for the last real engines". Kort, dus groot —
   de grootste letter van de site, en op een laptop twee regels. De stelling eronder is de lood. */
.held h1 { font-size:clamp(2.4rem, 5.6vw, 3.9rem); line-height:1.04; letter-spacing:-.03em;
           max-width:11em; margin-bottom:1.1rem; }
.held .lood { max-width:34rem; }
@media (min-width:52rem) { .held h1 { max-width:13em; } }