/* Creative Studio Jogi, nieuw ontwerp (gekozen op 1 oktober 2026, zie CLAUDE.md).
   De opbouw en kleuren van de eigen site (warm donker en roze), met de letters, het logo en de knoppen van de Inktuur-proef.
   Geen beige: de lichte vlakken zijn wit of neutraal lichtgrijs. Schuin alleen voor het logo en losse woorden in koppen. */

/* Kleuren, letters, knoppen en labels staan in /huisstijl/huisstijl.css (de huisstijl). Hier alleen de maten van de site. */
:root {
  --breed: 1200px;
  --rand: clamp(20px, 5vw, 56px);
  --ruimte: clamp(88px, 11vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; font-family: var(--letter); font-size: .98rem; line-height: 1.75; color: var(--tekst); background: var(--wit); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; text-wrap: balance; }
h1 em, h2 em { font-style: italic; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
.binnen { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visueel-verborgen, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.alleen-muis { display: none; }
@media (hover: hover) { .alleen-muis { display: inline; } }

/* Voor wie met het toetsenbord werkt: meteen naar de inhoud */
.overslaan { position: absolute; left: 16px; top: -100px; z-index: 50; padding: .7rem 1.2rem; border-radius: 999px; background: var(--wit); color: var(--tekst); font-weight: 500; text-decoration: none; }
.overslaan:focus { top: 16px; }

/* Labels en accentregels. De accentregels staan rechtop in de letter van de koppen: donker op wit, wit op donker */
.accent-regel { font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 1.75rem); line-height: 1.25; color: var(--tekst); }
.held .accent-regel, .band .accent-regel { color: var(--wit); }
.sectie-kop { max-width: 640px; margin-bottom: 52px; }
.sectie-kop h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
.sectie-kop p:not(.label) { margin-top: 1rem; color: var(--zacht); }

/* Menu: doorzichtig op de opening, wit zodra je scrolt */
.kop { position: sticky; top: 0; z-index: 20; height: 80px; margin-bottom: -80px; color: var(--wit); transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.kop.gescrold { background: var(--wit); color: var(--tekst); box-shadow: 0 1px 0 var(--lijn), 0 8px 24px rgb(22 18 15 / .06); }
.kop-binnen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo { position: relative; z-index: 1; text-decoration: none; }
.logo-3 { display: inline-flex; align-items: baseline; gap: .6rem; }
.logo-3 b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.8rem; line-height: 1; }
.logo-3 i { font-style: normal; font-size: .78rem; letter-spacing: .04em; opacity: .8; }
.menu { display: flex; align-items: center; gap: 1.7rem; }
.menu a { position: relative; padding: .3rem 0; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--vloeiend); }
.menu a:hover::after { transform: scaleX(1); }
/* De knop bovenin: dezelfde witte pil, iets kleiner. Op het witte menu krijgt hij een iets duidelijkere rand. */
.menu .knop-kop { margin-left: .4rem; padding: .72rem 1rem .72rem 1.35rem; gap: .6rem; font-family: var(--letter); font-size: .9rem; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; }
.menu .knop-kop::after { display: none; }
.kop.gescrold .knop-kop { box-shadow: 0 0 0 1px #d6d2ce; }
.kop.gescrold .knop-kop:hover { box-shadow: 0 0 0 1px var(--roze), 0 14px 30px rgb(22 18 15 / .14); }
.menu-knop { display: none; }

/* Opening: het warme donker met de roze gloed; computer en telefoon lopen over de rand.
   Alleen opzij afknippen (overflow-x: clip), zodat de schaduw onder computer en telefoon zacht uitloopt in het wit eronder. */
.held {
  --rand-licht: clamp(150px, 20vw, 290px);
  position: relative; overflow-x: clip; padding: 150px 0 70px; color: var(--wit); text-align: center;
  background: linear-gradient(180deg, var(--nacht) 0, var(--nacht) calc(100% - var(--rand-licht)), var(--wit) calc(100% - var(--rand-licht)));
}
.held::before {
  content: ""; position: absolute; right: -24vw; top: -34vw; pointer-events: none;
  width: min(92vw, 1300px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(233 195 179 / .2), rgb(233 195 179 / .07) 55%, rgb(233 195 179 / 0));
  clip-path: inset(34vw 0 0 0);
  animation: gloed 2s ease-out both;
}
.held-tekst { position: relative; max-width: 820px; }
.held-tekst > * { animation: op 1.1s var(--vloeiend) backwards; }
.held-tekst > :nth-child(2) { animation-delay: .1s; }
.held-tekst > :nth-child(3) { animation-delay: .2s; }
.held-tekst > :nth-child(4) { animation-delay: .3s; }
.held-tekst > :nth-child(5) { animation-delay: .4s; }
@keyframes op { from { opacity: 0; transform: translateY(18px); } }
@keyframes gloed { from { opacity: 0; transform: scale(.85); } }
.held h1 { font-size: clamp(3rem, 6.6vw, 5.3rem); line-height: 1.04; margin-bottom: .35em; }
.held h1 em { color: var(--blush); }
.held-intro { max-width: 34rem; margin: 0 auto 2rem; font-size: 1.05rem; color: var(--taupe); }
.held .accent-regel { margin-top: 1.4rem; }

.hero-schermen { position: relative; width: min(940px, 84%); margin: 64px auto 0; }
.browser-balk { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #ebe9e7; }
.browser-balk span { width: 9px; height: 9px; border-radius: 50%; background: #cfccc9; }
.browser-balk p { margin: 0 auto; padding: 1px 34px; border-radius: 6px; background: var(--wit); font-size: 11px; line-height: 1.7; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-schermen .scherm-computer { position: relative; overflow: hidden; border-radius: 14px; background: var(--wit); box-shadow: 0 44px 90px -34px rgb(22 18 15 / .34), 0 0 0 1px rgb(244 238 230 / .06); animation: schermop 1.4s var(--vloeiend) .5s both; }
.hero-schermen .scherm-telefoon {
  position: absolute; right: -7%; bottom: -46px; width: clamp(120px, 17vw, 215px); aspect-ratio: 9 / 19.5; overflow: hidden;
  padding: 8px; border-radius: 36px; background: #0a0908; border: 1px solid #3a322c; box-shadow: 0 34px 64px -22px rgb(22 18 15 / .42);
  animation: schermop 1.4s var(--vloeiend) .8s both;
}
@keyframes schermop { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
.scherm-dias { position: relative; overflow: hidden; background: #ebe9e7; }
.hero-schermen .scherm-computer .scherm-dias, .browser .scherm-dias { aspect-ratio: 16 / 10; }
.hero-schermen .scherm-telefoon .scherm-dias { height: 100%; border-radius: 28px; }
.scherm-dias img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 1.1s ease; }
.scherm-dias img.actief { opacity: 1; }

/* Herken je dit: tekst met vinkjes links, een rekenhulp uit een voorbeeldsite rechts */
.herken { padding: 110px 0 var(--ruimte); background: var(--wit); }
.herken-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.herken h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); margin-bottom: 1.1rem; }
.herken-tekst > p:not(.label) { margin-bottom: .9rem; max-width: 33em; color: var(--zacht); }
.voor-jou { max-width: 33em; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--lijn); }
.voor-jou .accent-regel { margin-bottom: 16px; }
.vinklijst { list-style: none; padding: 0; display: grid; gap: 10px; }
.vinklijst li { display: flex; align-items: flex-start; gap: 12px; }
.vinklijst li > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%; background: var(--blush-zacht); color: var(--roze); }
.vinklijst svg { width: 15px; height: 15px; }
.browser { overflow: hidden; border-radius: 14px; background: var(--wit); box-shadow: 0 30px 60px -22px rgb(22 18 15 / .3), 0 0 0 1px var(--lijn); transition: transform .6s var(--vloeiend); }
.herken-beeld:hover .browser { transform: translateY(-6px); }
.herken-beeld figcaption { margin-top: 22px; font-size: .9rem; line-height: 1.6; color: var(--zacht); text-align: center; }

/* Zo werkt het: warme donkere band met een roze gloed; links de kop (blijft staan bij scrollen), rechts de vijf stappen.
   overflow: clip en niet hidden, anders blijft de kop niet staan. */
.band { position: relative; overflow: clip; padding: var(--ruimte) 0; background: var(--omber); color: var(--wit); }
.band::before {
  content: ""; position: absolute; left: -20vw; top: -30vw; width: min(80vw, 1100px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(233 195 179 / .12), rgb(233 195 179 / 0));
}
.band-rij { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: start; }
.band-kop { position: sticky; top: 130px; }
.band h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); margin-bottom: .3em; }
.band .accent-regel { margin-top: .5rem; }
.band-kop > p:last-child { max-width: 30em; margin-top: 1.6rem; color: var(--taupe); }
.stappen { list-style: none; padding: 0; counter-reset: stap; }
.stap { display: grid; grid-template-columns: 64px 1fr; gap: 6px 8px; padding: 26px 0 28px; border-top: 1px solid var(--lijn-donker); }
.stap:last-child { border-bottom: 1px solid var(--lijn-donker); }
.stap-nummer { grid-row: span 2; font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--blush); }
.stap h3 { font-size: 1.55rem; line-height: 1.15; }
.stap p { color: rgb(255 255 255 / .8); }
.stap a { color: var(--wit); text-underline-offset: 3px; }

/* Voorbeeldsites en recent werk: kaarten die door de site scrollen bij aanwijzen */
.voorbeelden { padding: var(--ruimte) 0; background: var(--wit-zacht); }
.projecten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.project { display: block; overflow: hidden; border-radius: 18px; background: var(--wit); color: inherit; text-decoration: none; box-shadow: 0 0 0 1px var(--lijn), 0 40px 80px -60px rgb(22 18 15 / .55); transition: transform .5s var(--vloeiend), box-shadow .5s ease; }
.project:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--lijn), 0 50px 90px -55px rgb(22 18 15 / .6); }
.project-beeld { aspect-ratio: 4 / 3; overflow: hidden; background: var(--wit-zacht); }
.project-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 8s cubic-bezier(.45, 0, .25, 1); }
.project:hover .project-beeld img, .project:focus-visible .project-beeld img { object-position: 50% 100%; }
.project-label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 20px; }
.project-label strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.project-label small { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.4; color: var(--zacht); }
.pijl { flex: none; display: grid; place-items: center; width: 56px; height: 38px; border-radius: 999px; background: var(--nacht); color: var(--wit); transition: background-color .3s ease, color .3s ease, transform .3s var(--vloeiend); }
.pijl svg { width: 20px; height: 20px; }
.project:hover .pijl { background: var(--blush); color: var(--nacht); transform: translate(2px, -2px); }
.meer-knop { margin: 52px 0 0; text-align: center; }

.recent { padding: var(--ruimte) 0; background: var(--wit); }
.recent .projecten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.recent .project-beeld { aspect-ratio: 16 / 11; }
.recent .project-beeld img { transition-duration: 10s; }
.recent .project-label { padding: 22px 24px 24px; }
.recent .project-label strong { font-size: 1.7rem; }

/* Prijzen: twee kaarten onder elkaar, zoals op de huidige site. Eerst de website in het donker, met de enige aanvraagknop;
   daarna hosting en onderhoud in het wit. Links de prijs, rechts wat erbij hoort, als lijst met dunne lijnen. */
.prijzen { padding: var(--ruimte) 0; background: var(--wit-zacht); }
.prijs-kaarten { display: grid; gap: 28px; }
.prijs {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px clamp(40px, 7vw, 96px); align-items: start;
  border-radius: 22px; padding: clamp(28px, 5vw, 56px); background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 40px 80px -60px rgb(22 18 15 / .45);
}
.prijs-website { background: var(--nacht); color: var(--wit); box-shadow: 0 50px 90px -50px rgb(22 18 15 / .55); }
.prijs h3 { font-size: 1.9rem; }
.prijs-bedrag { margin: 14px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: var(--serif); font-size: clamp(3.2rem, 5vw, 4.2rem); line-height: 1; }
.prijs-bedrag small { font-family: var(--letter); font-size: .88rem; line-height: 1.4; color: var(--zacht); }
.prijs-uitleg { max-width: 26em; color: var(--zacht); }
.prijs-website .prijs-bedrag small, .prijs-website .prijs-uitleg { color: var(--taupe); }
.prijs-kop .knop { margin-top: 30px; }
.prijs .vinklijst { gap: 0; }
.prijs .vinklijst li { padding: 13px 0; border-bottom: 1px solid var(--lijn); }
.prijs .vinklijst li:first-child { padding-top: 4px; }
.prijs-website .vinklijst li { border-bottom-color: var(--lijn-donker); }
.prijs-website .vinklijst li > i { background: rgb(233 195 179 / .14); color: var(--blush); }
.prijs-website .vinklijst a { color: var(--wit); text-underline-offset: 3px; }
.prijs-noot { margin-top: 18px; font-size: .92rem; color: var(--zacht); }

/* Onder: het contactblok en de voet */
.contact { position: relative; overflow: hidden; background: var(--nacht); color: var(--wit); padding-block: var(--ruimte) clamp(96px, 12vw, 160px); }
.contact::before {
  content: ""; position: absolute; left: -26vw; bottom: -46vw; width: min(96vw, 1300px); aspect-ratio: 1; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(233 195 179 / .16), rgb(233 195 179 / .05) 55%, rgb(233 195 179 / 0));
}
.contact .binnen { position: relative; }
.contact h2 { font-size: clamp(3.4rem, 9vw, 7.5rem); line-height: .98; letter-spacing: -.01em; }
.contact h2 em { color: var(--blush); }
.contact-tekst { margin-top: 1.4rem; max-width: 34em; font-size: 1.05rem; color: var(--taupe); }
.contact-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 40px; }
.contact-adres { margin-top: 22px; font-size: .92rem; color: var(--taupe); }
.contact-adres a { color: var(--wit); text-underline-offset: 3px; }
.voet-blok { background: var(--nacht); color: var(--taupe); }
.voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 28px; border-top: 1px solid var(--lijn-donker); font-size: .86rem; }
.voet .logo { color: var(--wit); }
.voet a:not(.logo) { display: inline-block; padding-block: 8px; color: var(--taupe); text-decoration: none; }
.voet a:not(.logo):hover { color: var(--wit); }
.voet-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.voet-gegevens { flex-basis: 100%; margin: 0; font-size: .8rem; }

/* Pagina Voorbeeldsites: een donkere kop zoals de opening, daarna de groepen op lichtgrijs */
.pagina-kop { position: relative; overflow-x: clip; padding: 170px 0 96px; background: var(--nacht); color: var(--wit); text-align: center; }
.pagina-kop::before {
  content: ""; position: absolute; right: -24vw; top: -34vw; pointer-events: none; width: min(92vw, 1300px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(233 195 179 / .2), rgb(233 195 179 / .07) 55%, rgb(233 195 179 / 0));
  clip-path: inset(34vw 0 0 0); animation: gloed 2s ease-out both;
}
.pagina-kop h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: 1.04; margin-bottom: .35em; }
.pagina-kop h1 em { color: var(--blush); }
.groep-knopjes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.groep-knopjes a { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border: 1px solid rgb(244 238 230 / .3); border-radius: 999px; font-size: .9rem; text-decoration: none; transition: border-color .3s ease, background-color .3s ease, color .3s ease; }
.groep-knopjes a:hover { border-color: var(--wit); background: var(--wit); color: var(--tekst); }
.groep-knopjes span { font-family: var(--serif); font-size: 1.05rem; color: var(--blush); }
.groep-knopjes a:hover span { color: var(--roze); }
.demo-lijst { padding: 24px 0 var(--ruimte); background: var(--wit-zacht); }
.demo-groep { padding-top: clamp(64px, 8vw, 100px); scroll-margin-top: 20px; }
.demo-groep-kop { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 32px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.demo-groep-kop span { font-size: .6em; color: var(--roze); }
/* De schermafbeeldingen hebben bovenaan de demobalk; die valt weg door onderaan uit te lijnen */
.project-beeld-kort { aspect-ratio: 16 / 9.4; }
.project-beeld-kort img { object-position: 50% 100%; transition: transform 1s var(--vloeiend); }
.project:hover .project-beeld-kort img, .project:focus-visible .project-beeld-kort img { object-position: 50% 100%; transform: scale(1.04); }
.pagina-kop .held-tekst { max-width: 940px; }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Voorwaarden en privacy: rustige leestekst met genummerde artikelen */
.juridisch { padding: 72px 0 var(--ruimte); background: var(--wit); }
.juridisch .binnen { max-width: 820px; }
.juridisch section + section { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--lijn); }
.juridisch h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: 14px; }
.juridisch h2 span { margin-right: .45em; color: var(--roze); }
.juridisch p, .juridisch li { color: var(--zacht); }
.juridisch ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.juridisch p + p, .juridisch p + ul, .juridisch ul + p { margin-top: 10px; }
.juridisch strong { color: var(--tekst); font-weight: 600; }
.juridisch a { color: var(--roze); text-underline-offset: 3px; }

/* Pagina niet gevonden: het donkere contactblok over de hele hoogte */
.niet-gevonden { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.niet-gevonden .logo { display: inline-block; margin-bottom: clamp(48px, 8vw, 80px); color: var(--wit); }
.niet-gevonden h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 1; }
.niet-gevonden h1 em { color: var(--blush); }

/* Inschuiven bij scrollen: alleen als JavaScript draait, anders blijft alles gewoon zichtbaar */
.js [data-onthul] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--vloeiend), transform .9s var(--vloeiend); transition-delay: var(--vertraging, 0s); }
.js [data-onthul].zichtbaar { opacity: 1; transform: none; }

/* Tablet en telefoon: het menu klapt open over de hele pagina */
@media (max-width: 980px) {
  .menu-knop {
    position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
    border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; cursor: pointer;
  }
  .menu-knop svg { width: 20px; height: 20px; }
  .menu-knop .dicht, .menu-open .menu-knop .open { display: none; }
  .menu-open .menu-knop .dicht { display: block; }
  .menu {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
    padding: 100px var(--rand) 48px; background: var(--nacht); color: var(--wit);
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .menu a:not(.knop) { padding: .35rem 0; font-family: var(--serif); font-size: clamp(2rem, 8vw, 2.6rem); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.25; }
  .menu a::after { display: none; }
  .menu .knop-kop { margin: 1.8rem 0 0; padding: 1rem 1.3rem 1rem 1.7rem; font-size: .98rem; }
  .menu-open .menu { opacity: 1; visibility: visible; transition: opacity .35s ease; }
  .menu-open .kop { background: none; color: var(--wit); box-shadow: none; }
  .menu-open { overflow: hidden; }
  .herken-rij, .band-rij { grid-template-columns: 1fr; gap: 56px; }
  .prijs { grid-template-columns: 1fr; }
  .band-kop { position: static; }
  .projecten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-schermen .scherm-telefoon { right: -3%; }
}
@media (max-width: 600px) {
  .held { --rand-licht: 110px; padding-top: 130px; padding-bottom: 50px; }
  .hero-schermen { width: 88%; margin-top: 50px; }
  .hero-schermen .scherm-telefoon { right: -6%; bottom: -30px; width: 92px; border-radius: 20px; padding: 5px; }
  .hero-schermen .scherm-telefoon .scherm-dias { border-radius: 15px; }
  .projecten, .recent .projecten { grid-template-columns: 1fr; }
  .stap { grid-template-columns: 48px 1fr; }
  .stap-nummer { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-onthul] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}