.lg {
  --lg-diep: #121C17;
  --lg-land: #18261F;
  --lg-zand: #E8DCC0;
  --lg-zand-zacht: rgba(232, 220, 192, .5);
  --lg-licht: #F2F0E9;
  --lg-heide: #8B6FA3;
  --lg-heide-licht: #B79CCB;
  --lg-water: #86AFA9;
  --lg-inkt: #17221C;
  --lg-t0: #C6BC5A;
  --lg-t1: #C79DCB;
  --lg-t2: #9BD3E7;
  --lg-t3: #C48D52;
  --lg-t4: #7DA56E;
  --lg-voorz: #B4B8B0;
  position: relative; background: var(--lg-diep); color: var(--wit, #fff);
}
.lg .label { color: rgba(255, 255, 255, .66); }
.lg h2, .lg h3 { color: var(--wit, #fff); }
.lg .intro-zin { color: rgba(255, 255, 255, .8); }

.lg-baan { padding: 14rem 0 0; }
.lg-scherm { position: relative; }
.lg-titel, .lg-stappen { padding: 0 var(--rand); }
.lg-titel h2 { margin-top: 2.4rem; }
.lg-stappen { margin-top: 8rem; }
.lg-stap-vak { display: grid; gap: 5rem; }
.lg-stap h3 { margin: 1.6rem 0 0; font-size: 3.2rem; }
.lg-stap > p:not(.label) { margin: 1.4rem 0 0; max-width: 46rem; font-size: 1.6rem; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.lg-kaart, .lg-nav { display: none; }
@media (min-width: 1024px) { .lg-stap h3 { font-size: 4.4rem; } .lg-stap > p:not(.label) { font-size: 1.7rem; } }

.lg-teller { margin-top: 2rem; }
.lg-teller-kop { margin: 0; font: 300 3.2rem/1 var(--serif); letter-spacing: -.02em; color: var(--lg-licht); font-variant-numeric: tabular-nums; }
.lg-teller-n { display: inline-block; min-width: 1.3em; }
.lg-teller-van { font: 500 1.1rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.lg-teller-nu { display: none; }
.lg-teller-typen { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .5rem; max-width: 46rem; }
.lg-teller-typen li {
  display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  font: 500 1.3rem/1.3 var(--sans); color: rgba(255, 255, 255, .86);
}
.lg-teller-typen i { width: 1.2rem; height: 1.2rem; border-radius: .2rem; background: var(--lg-kleur); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.lg-teller-typen small { font: 500 1.05rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.lg-teller-typen b { font-weight: 500; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
.lg-teller-typen li[data-t="0"] { --lg-kleur: var(--lg-t0); }
.lg-teller-typen li[data-t="1"] { --lg-kleur: var(--lg-t1); }
.lg-teller-typen li[data-t="2"] { --lg-kleur: var(--lg-t2); }
.lg-teller-typen li[data-t="3"] { --lg-kleur: var(--lg-t3); }
.lg-teller-typen li[data-t="4"] { --lg-kleur: var(--lg-t4); }

.lg-kaart { position: relative; overflow: hidden; }
.lg-svg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.lg-grond { fill: var(--lg-diep); }
.lg-cam path { vector-effect: non-scaling-stroke; }
.lg-land { fill: var(--lg-land); stroke: none; fill-rule: evenodd; }
.lg-grens { fill: none; stroke: rgba(242, 240, 233, .42); stroke-width: 1; stroke-dasharray: 5 4; stroke-linejoin: round; }
.lg-maas { fill: none; stroke: var(--lg-water); stroke-opacity: .7; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.lg-water { fill: var(--lg-water); fill-opacity: .2; stroke: var(--lg-water); stroke-opacity: .45; stroke-width: .7; fill-rule: evenodd; }
.lg-snel { fill: none; stroke: #F2F0E9; stroke-opacity: .2; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.lg-route { fill: none; stroke: var(--lg-zand); stroke-opacity: .9; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.lg-wegen2 { fill: none; stroke: #F2F0E9; stroke-opacity: .16; stroke-width: .8; stroke-linejoin: round; }
.lg-np { fill: var(--lg-heide); fill-opacity: .2; stroke: none; fill-rule: evenodd; }
.lg-np-rand { fill: none; stroke: var(--lg-heide-licht); stroke-opacity: .55; stroke-width: 1.1; stroke-dasharray: 2 3; }
.lg-bos { fill: #2C4335; fill-opacity: .55; stroke: none; fill-rule: evenodd; }
.lg-heide { fill: var(--lg-heide); fill-opacity: .3; stroke: none; fill-rule: evenodd; }
.lg-ven { fill: var(--lg-water); fill-opacity: .24; stroke: var(--lg-water); stroke-opacity: .6; stroke-width: .8; fill-rule: evenodd; }
.lg-weg3 { fill: none; stroke: #F2F0E9; stroke-opacity: .34; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.lg-straat { fill: none; stroke: #F2F0E9; stroke-opacity: .2; stroke-width: .8; stroke-linejoin: round; }
.lg-pad { fill: none; stroke: #F2F0E9; stroke-opacity: .16; stroke-width: .8; stroke-dasharray: 1.5 2.5; stroke-linejoin: round; }
.lg-pad.lg-vol { stroke-dasharray: none; stroke-opacity: .08; }
.lg-np-rand.lg-vol { stroke-dasharray: none; stroke-opacity: .26; }
.lg-pand { fill: var(--lg-licht); fill-opacity: .045; stroke: var(--lg-licht); stroke-opacity: .3; stroke-width: .7; stroke-linejoin: round; }
.lg-terrein { fill: #F2F0E9; fill-opacity: .045; stroke: var(--lg-zand); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 3 3; }
.lg-bomen { fill: #7DA56E; fill-opacity: .1; stroke: #A9C79A; stroke-opacity: .42; stroke-width: .7; }
.lg-parkeer { fill: #F2F0E9; fill-opacity: .1; stroke: #F2F0E9; stroke-opacity: .28; stroke-width: .6; }
.lg-raster path { fill: none; stroke: #F0EEEA; stroke-width: 1; shape-rendering: crispEdges; }
.lg-vizier { fill: none; stroke: var(--lg-licht); stroke-opacity: .75; stroke-width: 1.2; stroke-linecap: square; }

.lg-spoor { fill: none; stroke: var(--lg-zand); stroke-opacity: .85; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 6.9; }
.lg-pen-lijn, .lg-pen-gloed, .lg-pen-staart { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lg-pen-lijn { stroke: var(--lg-zand); stroke-width: 2.2; }
.lg-pen-gloed { stroke: var(--lg-zand); stroke-opacity: .16; stroke-width: 10; }
.lg-pen-staart { stroke: #FFF8EA; stroke-width: 2.8; }
.lg-pen-staart-lang { stroke: var(--lg-licht); stroke-opacity: .3; stroke-width: 7; }

.lg-resort path { stroke-linejoin: round; }
.lg-r-weg { fill: none; stroke: #F2F0E9; stroke-opacity: .3; stroke-linecap: round; }
.lg-r-keer { fill: #F2F0E9; fill-opacity: .3; stroke: none; }
.lg-r-tip { fill: #FFF8EA; }
.lg-r-voorz { fill: var(--lg-voorz); fill-opacity: 0; stroke: var(--lg-voorz); stroke-width: 1.2; }
.lg-r-huis { fill-opacity: 0; stroke-width: 1; }
.lg-r-t0 { fill: var(--lg-t0); stroke: var(--lg-t0); }
.lg-r-t1 { fill: var(--lg-t1); stroke: var(--lg-t1); }
.lg-r-t2 { fill: var(--lg-t2); stroke: var(--lg-t2); }
.lg-r-t3 { fill: var(--lg-t3); stroke: var(--lg-t3); }
.lg-r-t4 { fill: var(--lg-t4); stroke: var(--lg-t4); }

.lg-steden circle:first-child { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1; }
.lg-steden circle:last-child { fill: var(--lg-licht); }
.lg-doel-ring { fill: none; stroke: var(--lg-licht); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: lg-doel 2.4s var(--uit) infinite; }
.lg-doel-ring-2 { animation-delay: 1.2s; }
.lg-stip-gloed { fill: url(#lg-gloed); transform-box: fill-box; transform-origin: center; }
.lg-stip-kern { fill: var(--lg-licht); }
.lg-stip-puls { fill: none; stroke: var(--lg-licht); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lg-stip.aan .lg-stip-gloed { animation: lg-bloei 1.8s var(--uit) both; }
.lg-klaar .lg-stip-puls { animation: lg-puls 3s var(--uit) infinite; }
.lg-kop-pen circle:last-child { fill: #FFF8EA; }
@keyframes lg-bloei { 0% { transform: scale(0); } 45% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes lg-puls { 0% { opacity: .8; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes lg-doel { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(3.4); } }

.lg-etiketten, .lg-punten, .lg-kaartjes { position: absolute; inset: 0; pointer-events: none; }
.lg-etiketten, .lg-punten { z-index: 1; }
.lg-kaartjes { z-index: 5; }
.lg-etiket, .lg-punt { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.lg-etiket { font: 300 1.7rem/1.1 var(--serif); letter-spacing: -.005em; color: var(--wit, #fff); text-shadow: 0 0 .35rem var(--lg-diep); }
.lg-etiket-klein { font: 500 1rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.lg-etiket-land { font: 300 1.3rem/1 var(--serif); letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.lg-etiket-water { font: 300 1.2rem/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; color: rgba(160, 200, 194, .8); }
.lg-etiket-ven { font-size: 1.5rem; color: rgba(176, 212, 206, .92); }
.lg-etiket-park { font: 300 1.3rem/1.25 var(--serif); letter-spacing: .26em; text-transform: uppercase; color: rgba(205, 184, 222, .85); text-align: center; }
.lg-etiket-weg {
  padding: .25rem .5rem; border-radius: .25rem; background: var(--lg-zand); color: var(--lg-inkt); text-shadow: none;
  font: 600 1rem/1 var(--sans); letter-spacing: .04em;
}
.lg-etiket-rand { font-size: 1.6rem; }
.lg-etiket small { display: block; margin-top: .3rem; font: 500 .95rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.lg-etiket-rand small { color: var(--lg-zand); }
.lg-etiket-rand.links { text-align: right; }
.lg-etiket-scroll { font: 500 1.05rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--lg-zand); }
.lg-etiket-fase { font: 500 .95rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.lg-adem { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; opacity: 0; will-change: transform, opacity; }
.lg-adem i { display: block; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 248, 234, .75), rgba(242, 240, 233, .26) 45%, rgba(232, 220, 192, 0)); animation: lg-adem 3.6s ease-in-out infinite; }
.lg-ver .lg-adem i { animation-play-state: paused; }
@keyframes lg-adem { 0%, 100% { opacity: .12; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.1); } }

.lg-punt {
  display: inline-flex; align-items: center; gap: .9rem; min-height: 4.4rem; margin: 0; padding: 0 .4rem;
  border: 0; background: none; color: var(--wit, #fff); cursor: pointer; pointer-events: auto; text-align: left;
  font: 300 1.7rem/1.1 var(--serif); letter-spacing: -.005em;
  text-shadow: 0 0 .35rem var(--lg-diep);
  -webkit-tap-highlight-color: transparent; transition: color .5s var(--uit);
}
.lg-punt::before {
  content: ""; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--lg-zand-zacht);
  background:
    linear-gradient(var(--lg-zand), var(--lg-zand)) center / .8rem 1px no-repeat,
    linear-gradient(var(--lg-zand), var(--lg-zand)) center / 1px .8rem no-repeat;
  transition: transform .5s var(--uit), background-color .5s var(--uit), border-color .5s var(--uit);
}
.lg-punt:hover::before, .lg-punt[aria-expanded="true"]::before { border-color: var(--lg-zand); background-color: rgba(232, 220, 192, .18); }
.lg-punt[aria-expanded="true"]::before { transform: rotate(45deg); }
.lg-punt.links { flex-direction: row-reverse; text-align: right; }
.lg-punt:focus-visible { outline: 1px solid var(--lg-zand); outline-offset: 2px; }
.lg-punt small { display: block; margin-top: .3rem; font: 500 .95rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.lg-punt-hier { font-size: 2rem; color: var(--lg-licht); }
@media (min-width: 1024px) {
  .lg-etiket, .lg-punt { font-size: 1.9rem; }
  .lg-etiket-klein { font-size: 1.05rem; }
  .lg-etiket-land { font-size: 1.45rem; }
  .lg-etiket-water { font-size: 1.3rem; }
  .lg-etiket-ven { font-size: 1.7rem; }
  .lg-etiket-park { font-size: 1.4rem; }
  .lg-etiket-weg { font-size: 1.1rem; }
  .lg-etiket-rand { font-size: 1.8rem; }
  .lg-etiket small, .lg-punt small { font-size: 1.05rem; }
  .lg-etiket-scroll { font-size: 1.2rem; letter-spacing: .16em; }
  .lg-etiket-fase { font-size: 1rem; }
  .lg-punt-hier { font-size: 2.4rem; }
}

.lg-kaartje {
  position: absolute; left: 0; top: 0; width: min(30rem, calc(100% - 2.4rem)); padding: 1.8rem 2rem 2rem;
  border-radius: .3rem; background: var(--lg-licht); color: var(--lg-inkt); pointer-events: auto;
  box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, .5);
  animation: lg-kaartje .45s var(--uit) both;
}
.lg-kaartje .label { margin-bottom: .8rem; color: rgba(23, 34, 28, .62); }
.lg-kaartje p:last-child { margin: 0; font-size: 1.5rem; line-height: 1.5; }
@keyframes lg-kaartje { from { opacity: 0; } }

.lg-niveau {
  position: absolute; z-index: 3; left: 1.6rem; top: calc(var(--kop) + 1.4rem); margin: 0; height: 1.4rem; pointer-events: none;
  font: 500 1rem/1.4rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--lg-licht);
  text-shadow: 0 0 .8rem var(--lg-diep), 0 0 .3rem var(--lg-diep);
}
.lg-niveau span { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 1rem; white-space: nowrap; opacity: 0; will-change: opacity, transform; }
.lg-niveau span::before { content: ""; width: 2.4rem; height: 1px; background: var(--lg-zand); }
@media (min-width: 1024px) { .lg-niveau { left: 42%; top: calc(var(--kop) + 3rem); font-size: 1.05rem; } }

.lg-meta {
  position: absolute; right: var(--rand); bottom: 3.2rem; z-index: 3; display: flex; align-items: flex-end; gap: 2.4rem;
  font: 500 1rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
  font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 0 .8rem var(--lg-diep), 0 0 .3rem var(--lg-diep);
}
.lg-schaal { display: flex; flex-direction: column; gap: .6rem; }
.lg-schaal i { display: block; width: 8rem; height: .5rem; border: 1px solid rgba(255, 255, 255, .45); border-top: 0; }
.lg-noord { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.lg-noord::after { content: ""; width: 1px; height: 1.6rem; background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
@media (max-width: 1023px) {
  .lg-meta { top: calc(var(--kop) + 1.2rem); right: 1.6rem; bottom: auto; align-items: flex-start; gap: 1.6rem; }
  .lg-coord { display: none; }
}

.lg-nav { list-style: none; margin: 0 0 2.8rem; padding: 0; gap: 1rem; max-width: 46rem; }
.lg-nav li { flex: 1; min-width: 0; }
.lg-nav button {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; width: 100%;
  padding: 0 0 1.1rem; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 1rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
  transition: color .5s var(--uit);
}
.lg-nav button:hover { color: rgba(255, 255, 255, .8); }
.lg-nav button.actief { color: var(--wit, #fff); }
.lg-nav-nr { font: 300 1.6rem/1 var(--serif); letter-spacing: 0; }
.lg-nav-naam { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-nav i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.lg-nav i::after { content: ""; position: absolute; inset: 0; background: var(--lg-zand); transform: scaleX(var(--vul, 0)); transform-origin: left; }
@media (max-width: 649px) { .lg-nav { gap: .8rem; } .lg-nav button { font-size: .9rem; letter-spacing: .06em; } }

@media (prefers-reduced-motion: no-preference) {
  .js .lg-baan { height: calc(1400vh + 45svh); padding: 0; }
  .js .lg-na { position: relative; z-index: 2; margin-top: -45vh; margin-top: -45svh; }
  .js .lg-scherm.lg-uit .lg-stappen, .js .lg-scherm.lg-uit .lg-titel { opacity: calc(1 - var(--lg-uitloop) * 2.2) !important; }
  .js .lg-scherm { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .js .lg-scherm::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(0deg, rgba(18, 28, 23, 0.97) 0%, rgba(18, 28, 23, 0.97) 20%, rgba(18, 28, 23, 0.962) 22.6%, rgba(18, 28, 23, 0.914) 25.2%, rgba(18, 28, 23, 0.812) 27.8%, rgba(18, 28, 23, 0.662) 30.4%, rgba(18, 28, 23, 0.485) 33%, rgba(18, 28, 23, 0.308) 35.6%, rgba(18, 28, 23, 0.158) 38.2%, rgba(18, 28, 23, 0.056) 40.8%, rgba(18, 28, 23, 0.008) 43.4%, rgba(18, 28, 23, 0) 46%);
  }
  .js .lg-kaart { display: block; position: absolute; inset: 0; }
  .js .lg-kaart::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 75%; z-index: 8; pointer-events: none;
    background: linear-gradient(to bottom, rgba(18, 28, 23, 0), rgba(18, 28, 23, .45) 45%, rgba(18, 28, 23, .85) 80%, var(--lg-diep));
    opacity: var(--lg-uitloop, 0);
  }
  .js .lg-titel, .js .lg-stappen {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; padding: 0 var(--rand) 3.2rem;
    will-change: opacity, transform;
  }
  .js .lg-titel.weg, .js .lg-stappen:not(.actief) { pointer-events: none; }
  .js .lg-stappen { opacity: 0; visibility: hidden; }
  .js .lg-nav { display: flex; }
  .js .lg-stappen { display: flex; flex-direction: column-reverse; }
  .js .lg-nav { margin: 2.8rem 0 0; }
  .js .lg-stap-vak { gap: 0; }
  .js .lg-stap { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; will-change: opacity, transform; }
  .js .lg-stap > .label { display: none; }
  .js .lg-stap h3 { margin-top: 0; text-wrap: balance; }
  @media (max-width: 1023px) {
    .js .lg-titel h2 { font-size: 3.6rem; }
    .js .lg-titel .intro-zin { font-size: 1.6rem; margin-top: 1.6rem; }
    .js .lg-stap h3 { font-size: 2.8rem; }
    .js .lg-stap > p:not(.label) { font-size: 1.5rem; margin-top: 1.2rem; }
    .js .lg-nav { margin-top: 2rem; }
    .js .lg-teller { margin-top: 1.4rem; }
    .js .lg-teller-kop { font-size: 2.6rem; }
    .js .lg-teller-typen { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
    .js .lg-teller-typen li { grid-template-columns: 1fr; gap: .4rem; font-size: 1rem; }
    .js .lg-teller-typen li i { width: 100%; height: .5rem; border-radius: .1rem; }
    .js .lg-teller-typen .lg-teller-naam { display: none; }
    .js .lg-teller-typen small { font-size: .9rem; letter-spacing: .04em; }
    .js .lg-teller-nu { display: block; margin-top: .8rem; min-height: 1.3em; font: 500 1.1rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--lg-zand); }
  }
  @media (min-width: 1024px) {
    .js .lg-scherm::after {
      background: linear-gradient(90deg, rgba(18, 28, 23, 0.95) 0%, rgba(18, 28, 23, 0.95) 10%, rgba(18, 28, 23, 0.942) 14.8%, rgba(18, 28, 23, 0.895) 19.6%, rgba(18, 28, 23, 0.795) 24.4%, rgba(18, 28, 23, 0.648) 29.2%, rgba(18, 28, 23, 0.475) 34%, rgba(18, 28, 23, 0.302) 38.8%, rgba(18, 28, 23, 0.155) 43.6%, rgba(18, 28, 23, 0.055) 48.4%, rgba(18, 28, 23, 0.008) 53.2%, rgba(18, 28, 23, 0) 58%);
    }
    .js .lg-titel, .js .lg-stappen { left: var(--rand); right: auto; bottom: 9rem; width: min(54rem, 38vw); padding: 0; }
  }
  .js .lg-teller-typen li { opacity: calc(.35 + .65 * var(--lg-aan, 0)); }
  .js .lg-teller-typen li i { transform: scale(calc(.6 + .4 * var(--lg-aan, 0))); }
  .js .lg-teller-typen li.nu .lg-teller-naam { color: var(--wit, #fff); }
}

@media (prefers-reduced-motion: reduce) {
  .js .lg-kaart { display: block; height: 72vh; min-height: 44rem; max-height: 80rem; margin: 6rem 0 0; }
  .js .lg-nav { display: flex; }
  .js .lg-stappen { margin-top: 4rem; }
  .js .lg-stap { display: none; }
  .js .lg-stap.actief { display: block; }
  .js .lg-stap > .label { display: none; }
  .js .lg-stap h3 { margin-top: 0; }
  .js .lg-niveau { top: 2rem; left: 1.6rem; }
  .js .lg-meta { top: auto; bottom: 1.6rem; right: 1.6rem; }
  .lg-doel-ring, .lg-klaar .lg-stip-puls, .lg-stip.aan .lg-stip-gloed, .lg-adem i { animation: none; }
  .lg-doel-ring { opacity: .6; transform: scale(1.6); }
}

.js .lg-zonder-data .lg-baan { height: auto; padding: 14rem 0 0; }
.js .lg-zonder-data .lg-scherm { position: relative; height: auto; overflow: visible; }
.js .lg-zonder-data .lg-scherm::after, .js .lg-zonder-data .lg-kaart, .js .lg-zonder-data .lg-nav { display: none; }
.js .lg-zonder-data .lg-titel, .js .lg-zonder-data .lg-stappen {
  position: relative; left: auto; right: auto; bottom: auto; width: auto; padding: 0 var(--rand); opacity: 1; visibility: visible;
}
.js .lg-zonder-data .lg-stappen { display: block; margin-top: 8rem; }
.js .lg-zonder-data .lg-stap-vak { gap: 5rem; }
.js .lg-zonder-data .lg-stap { display: block; grid-area: auto; align-self: auto; opacity: 1; visibility: visible; transform: none; }
.js .lg-zonder-data .lg-stap > .label { display: block; }
.js .lg-zonder-data .lg-stap h3 { margin-top: 1.6rem; }
.js .lg-zonder-data .lg-na { margin-top: 0; }
.js .lg-zonder-data .lg-teller-typen li { opacity: 1; }

.lg-na { padding-top: 12rem; padding-bottom: 6rem; }
@media (min-width: 1024px) { .lg-na { padding-top: 14rem; padding-bottom: 8rem; } }
.lg-getallen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; }
.lg-getallen li { padding: 3rem 0 3.6rem; border-top: 1px solid rgba(255, 255, 255, .16); }
@media (max-width: 649px) {
  .lg-getallen li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 1.6rem; align-items: baseline; padding: 2.4rem 0 2.8rem; }
  .lg-getallen li > p:last-child { margin-top: 0 !important; }
}
@media (min-width: 650px) { .lg-getallen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lg-getal { margin: 0; white-space: nowrap; font: 300 5.2rem/.9 var(--serif); letter-spacing: -.03em; color: var(--lg-licht); }
.lg-getal small { margin-left: .25em; font-size: .32em; letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.lg-tel { display: inline-block; }
.lg-getallen li > p:last-child { margin: 1.8rem 0 0; max-width: 32rem; font-size: 1.4rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
@media (min-width: 650px) { .lg-getal { font-size: 8rem; } }
@media (max-width: 649px) { .lg-getal { font-size: 4.4rem; } }
@media (min-width: 1024px) {
  .lg-getallen { gap: 0 6rem; }
  .lg-getal { font-size: 9.6rem; }
}
.lg-voet { padding-top: 6rem; padding-bottom: 12rem; }
.lg-bron { margin: 0; max-width: 90rem; font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, .34); }