:root {
  --inkt: #211B12;
  --room: #F5F1E9;
  --wit: #FFFFFF;
  --koper: #B07436;
  --koper-licht: #E9D3BB;
  --grijs: #6B645A;
  --lijn: #E3DCD0;
  --nacht: #17130D;
  --kopletter: "Futura PT", Futura, "Poppins", sans-serif;
  --letter: "Manrope", "Avenir Next", Avenir, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--letter); color: var(--inkt); background: var(--wit); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--kopletter); font-weight: 500; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(44px, 6vw, 80px); letter-spacing: -0.01em; }
h2 { font-size: clamp(32px, 3.6vw, 48px); }
h3 { font-size: 24px; margin-bottom: 12px; }
h4 { font-size: 18px; margin: 0 0 12px; }
p { margin: 0; }
em { font-style: normal; color: var(--koper); }

.binnen { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.midden { text-align: center; margin-left: auto; margin-right: auto; }
.grijs { color: var(--grijs); }

.knop { display: inline-block; background: var(--inkt); color: var(--wit); padding: 15px 28px; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 4px; border: 1px solid var(--inkt); transition: background .25s, color .25s, transform .25s; }
.knop:hover { background: var(--koper); border-color: var(--koper); transform: translateY(-2px); }
.knop.licht { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.knop.licht:hover { background: var(--koper); border-color: var(--koper); color: var(--wit); }
.knop.rand { background: transparent; color: var(--wit); border-color: rgba(255,255,255,.7); }
.knop.rand:hover { background: var(--wit); color: var(--inkt); }

/* kop */
.kop { position: fixed; top: 0; left: 0; right: 0; z-index: 20; color: var(--wit); transition: background .3s, color .3s, box-shadow .3s; }
.kop.vast { background: var(--wit); color: var(--inkt); box-shadow: 0 1px 0 var(--lijn); }
.kop-rij { display: flex; align-items: center; gap: 36px; height: 84px; }
.merk img { height: 38px; }
.logo-donker, .kop.vast .logo-wit { display: none; }
.kop.vast .logo-donker { display: block; }
.menu { display: flex; align-items: center; gap: 30px; margin-left: 32px; font-size: 15px; font-weight: 500; }
.menu > a, .uitklap > button { text-decoration: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 30px 0; }
.uitklap > button::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.uitklap { position: relative; }
.paneel { position: absolute; top: 78px; left: -24px; width: 720px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: var(--wit); color: var(--inkt); padding: 24px; border-radius: 6px; box-shadow: 0 24px 60px rgba(33,27,18,.18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
.paneel.smal { width: 340px; grid-template-columns: 1fr; }
.uitklap:hover .paneel, .uitklap:focus-within .paneel { opacity: 1; visibility: visible; transform: none; }
.paneel-lijst a { display: block; padding: 12px 14px; text-decoration: none; color: var(--grijs); font-size: 14px; border-radius: 4px; }
.paneel-lijst a:hover { background: var(--room); }
.paneel-lijst strong { display: block; color: var(--inkt); font-size: 16px; font-weight: 600; }
.paneel-beeld { text-decoration: none; }
.paneel-beeld img { border-radius: 4px; aspect-ratio: 16/10; object-fit: cover; }
.paneel-beeld span { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; }
.login { margin-left: auto; font-size: 15px; text-decoration: none; opacity: .85; }
.kop .knop { padding: 12px 22px; }
.kop:not(.vast) .knop { background: var(--wit); color: var(--inkt); border-color: var(--wit); }

/* held */
.held { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--wit); overflow: hidden; background: var(--nacht); }
.held-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.held-laag { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,19,13,.86) 0%, rgba(23,19,13,.55) 50%, rgba(23,19,13,.2) 100%), linear-gradient(0deg, rgba(23,19,13,.9) 0%, rgba(23,19,13,0) 40%); }
.held-inhoud { position: relative; width: 100%; padding-top: 180px; }
.held-inhoud h1 { max-width: 14em; }
.held-inhoud p { margin-top: 28px; font-size: 20px; max-width: 32em; color: #E6DFD2; }
.held-knoppen { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 44px; }
.held-voet { position: relative; margin-top: 110px; padding: 28px 0 36px; border-top: 1px solid rgba(255,255,255,.15); }
.held-klein { text-align: center; font-size: 14px; color: #BDB4A5; margin-bottom: 22px; }
.band { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.band-rij { display: flex; gap: 72px; width: max-content; animation: band 40s linear infinite; }
.band-rij img { height: 46px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .8; }
@keyframes band { to { transform: translateX(-50%); } }

/* secties */
.sectie { padding: 120px 0; position: relative; }
.sectie.zacht { background: var(--room); }
.intro { margin-top: 18px; font-size: 19px; color: var(--grijs); max-width: 38em; }
.intro.licht { color: #CFC7B8; }
.soort { color: var(--koper); font-size: 15px; font-weight: 600; margin-bottom: 12px; letter-spacing: .02em; }
.soort.licht { color: #D9A56F; }

.stelling-rij { display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: start; }
.stelling h2 { font-size: clamp(30px, 3.2vw, 42px); }
.stelling p { font-size: 18px; color: var(--grijs); }
.stelling p + p { margin-top: 18px; }

.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; }
.gebouwen > div { text-align: center; padding: 40px 32px 44px; border: 1px solid var(--lijn); border-radius: 6px; transition: transform .35s, box-shadow .35s; }
.gebouwen > div:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(33,27,18,.1); }
.teken { width: 170px; height: auto; margin: 0 auto 24px; color: var(--inkt); }
.teken path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s ease; }
.teken .accent { fill: none; stroke: var(--koper); stroke-width: 2.4; transition-delay: 1.2s; }
.zichtbaar .teken path { stroke-dashoffset: 0; }
.maat { color: var(--koper); font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.gebouwen p:not(.maat) { color: var(--grijs); margin-bottom: 28px; }

/* diensten */
.dienst { display: grid; grid-template-columns: 5fr 6fr; gap: 88px; align-items: center; margin-top: 120px; }
.dienst.om { grid-template-columns: 6fr 5fr; }
.dienst.om .dienst-tekst { order: 2; }
.dienst h3 { font-size: 36px; margin-bottom: 18px; }
.dienst-tekst > p:not(.soort) { font-size: 18px; color: var(--grijs); }
.vink { list-style: none; padding: 0; margin: 26px 0 34px; }
.vink li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.vink li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 12px; border-right: 2px solid var(--koper); border-bottom: 2px solid var(--koper); transform: rotate(45deg); }

.dienst-beeld { position: relative; perspective: 1200px; }
.dienst-beeld .clip, .dienst-beeld > img { position: relative; z-index: 1; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 70px rgba(33,27,18,.18); }
.cirkel { position: absolute; border-radius: 50%; z-index: 0; transform: translateZ(-80px); }
.c1 { width: 260px; height: 260px; background: var(--koper-licht); top: -50px; left: -60px; }
.c2 { width: 140px; height: 140px; border: 1px solid var(--koper); bottom: -40px; right: -30px; }
.c3 { width: 90px; height: 90px; background: var(--koper); opacity: .85; top: 30px; right: -28px; }
.zweef { position: absolute; z-index: 2; background: var(--wit); border-radius: 6px; box-shadow: 0 26px 60px rgba(33,27,18,.22); transition: transform .4s ease-out; }
.kantel { transform-style: preserve-3d; }

.rapport { width: 300px; left: -48px; bottom: -48px; padding: 22px 24px; font-size: 14px; }
.rapport-kop { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.rapport-score { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.rapport-score .grijs { font-size: 12px; }
.groot { font-family: var(--kopletter); font-size: 40px; line-height: 1; }
.groot small { font-size: .5em; color: var(--grijs); }
.rapport-sub { font-weight: 600; font-size: 13px; color: var(--koper); }
.rapport-tekst { margin-top: 4px; font-size: 13px; line-height: 1.5; }

.telefoon { width: 210px; right: -36px; bottom: -70px; padding: 10px; border-radius: 30px; background: var(--inkt); }
.telefoon-scherm { background: var(--wit); border-radius: 22px; padding: 18px 14px; font-size: 12px; min-height: 380px; }
.tel-kop { font-weight: 700; font-size: 11px; color: var(--koper); margin-bottom: 10px; text-align: center; }
.telefoon-scherm img { border-radius: 6px; aspect-ratio: 16/9; object-fit: cover; }
.tel-titel { margin-top: 10px; font-weight: 700; font-size: 13px; }
.tel-balk { height: 4px; background: var(--lijn); margin: 10px 0 6px; border-radius: 2px; overflow: hidden; }
.groei { display: block; height: 100%; width: 0; background: var(--koper); transition: width 1.6s ease .4s; }
.tel-klein { color: var(--grijs); font-size: 11px; }
.tel-lijst { list-style: none; padding: 0; margin: 12px 0 0; }
.tel-lijst li { padding: 6px 0 6px 20px; border-top: 1px solid var(--lijn); position: relative; color: var(--grijs); }
.tel-lijst li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 9px; height: 9px; border: 1px solid #C9C1B3; border-radius: 50%; }
.tel-lijst li.af { color: var(--inkt); }
.tel-lijst li.af::before { background: var(--koper); border-color: var(--koper); }

.mini-bord { width: 340px; left: -56px; bottom: -56px; padding: 20px 22px; }
.mini-kop { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.mini-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 6px; }
.mini-tegels .grijs { font-size: 12px; }
.mini-tegels .groot { font-size: 32px; }
.mini-lijn { width: 100%; height: auto; }
.trek { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s ease .3s; }
.zichtbaar .trek, .zichtbaar.trek { stroke-dashoffset: 0; }

.certificaat { width: 300px; right: -40px; bottom: -56px; padding: 26px 26px 22px; text-align: center; border: 1px solid var(--koper-licht); outline: 6px solid var(--wit); }
.cert-logo { height: 24px; margin: 0 auto 14px; }
.certificaat .grijs { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cert-naam { font-family: var(--kopletter); font-size: 24px; margin: 6px 0 8px; }
.cert-wie { font-size: 13px; color: var(--grijs); }
.cert-voet { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--lijn); font-size: 11px; color: var(--grijs); }

/* eigen check-in */
.eigen-checkin { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
.eigen-checkin h2 { margin-bottom: 4px; }
.stappen { margin-top: 44px; counter-reset: stap; }
.stappen > div { position: relative; padding: 0 0 30px 64px; }
.stappen > div::before { counter-increment: stap; content: counter(stap); position: absolute; left: 0; top: -4px; width: 40px; height: 40px; border: 1px solid var(--koper); color: var(--koper); border-radius: 50%; display: grid; place-items: center; font-family: var(--kopletter); font-size: 18px; }
.stappen > div::after { content: ""; position: absolute; left: 20px; top: 44px; bottom: 4px; width: 1px; background: var(--lijn); }
.stappen > div:last-child::after { display: none; }
.stappen h3 { font-size: 20px; margin-bottom: 6px; }
.stappen p { color: var(--grijs); }
.ag-voorbeeld { background: var(--room); border-radius: 6px; overflow: hidden; }
.ag-voorbeeld .clip { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.ag-tekst { padding: 28px 32px 34px; }
.ag-tekst > .grijs { font-size: 14px; margin-bottom: 20px; }
.ag-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ag-kolommen h4 + p { color: var(--grijs); font-size: 15px; }
.ag-kolommen ol + h4 { margin-top: 22px; }
.tik { list-style: none; counter-reset: tik; padding: 0; margin: 0; font-size: 15px; }
.tik li { counter-increment: tik; position: relative; padding: 7px 0 7px 30px; border-top: 1px solid var(--lijn); }
.tik li::before { content: counter(tik); position: absolute; left: 0; top: 7px; color: var(--koper); font-family: var(--kopletter); }
.tik li { opacity: .35; transition: opacity .5s; }
.zichtbaar .tik li { opacity: 1; }

/* dashboard */
.donker { background: var(--nacht); color: var(--wit); overflow: hidden; }
.donker::before { content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(176,116,54,.22), rgba(176,116,54,0) 65%); pointer-events: none; }
.bord { position: relative; margin-top: 56px; background: var(--wit); color: var(--inkt); border-radius: 8px; padding: 28px 32px 32px; box-shadow: 0 40px 100px rgba(0,0,0,.45); transform: perspective(1600px) rotateX(10deg) scale(.96); transform-origin: 50% 100%; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bord.zichtbaar { transform: none; }
.bord-kop { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--lijn); }
.voorbeeld { font-size: 13px; color: var(--grijs); border: 1px solid var(--lijn); padding: 4px 10px; border-radius: 4px; }
.bord-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 22px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: 6px; overflow: hidden; }
.bord-tegels > div { background: var(--wit); padding: 20px 22px; }
.bord-tegels .grijs { font-size: 13px; min-height: 40px; }
.bord-tegels .groot { font-size: 44px; margin: 8px 0 6px; }
.bord-tegels .klein { font-size: 13px; color: var(--grijs); }
.bord-grafieken { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; margin-top: 28px; }
.grafiek { margin: 0; border: 1px solid var(--lijn); border-radius: 6px; padding: 20px 22px; }
.grafiek figcaption { display: flex; flex-direction: column; font-size: 14px; margin-bottom: 14px; }
.grafiek figcaption .grijs { font-size: 13px; }
.lijn-houder { position: relative; }
.lijn-houder svg { width: 100%; height: auto; display: block; overflow: visible; }
.staaf { display: grid; grid-template-columns: 150px 1fr 44px; gap: 12px; align-items: center; font-size: 13px; padding: 7px 0; }
.staaf-baan { height: 12px; background: var(--room); border-radius: 0 4px 4px 0; }
.staaf-vul { height: 100%; width: 0; background: var(--koper); border-radius: 0 4px 4px 0; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.staaf-vul.laag { background: #8A8276; }
.staaf b { text-align: right; font-weight: 600; }
.bord-tabel { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 14px; }
.bord-tabel th { text-align: left; font-weight: 600; color: var(--grijs); font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--lijn); }
.bord-tabel td { padding: 12px; border-bottom: 1px solid var(--lijn); }
.bord-tabel tr:hover td { background: var(--room); }
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 72px; }
.meet h3 { font-size: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 14px; }
.meet ul { list-style: none; padding: 0; margin: 0; color: #CFC7B8; }
.meet li { padding: 5px 0; }

/* cursus */
.carrousel-houder { margin-top: 56px; perspective: 1400px; height: 380px; position: relative; }
.carrousel { position: absolute; left: 50%; top: 40px; width: 420px; height: 236px; margin-left: -210px; transform-style: preserve-3d; animation: draai 48s linear infinite; }
.carrousel-houder:hover .carrousel { animation-play-state: paused; }
.carrousel figure { position: absolute; inset: 0; margin: 0; backface-visibility: hidden; }
.carrousel img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 20px 50px rgba(33,27,18,.25); }
.carrousel figure:nth-child(1) { transform: rotateY(0deg) translateZ(560px); }
.carrousel figure:nth-child(2) { transform: rotateY(45deg) translateZ(560px); }
.carrousel figure:nth-child(3) { transform: rotateY(90deg) translateZ(560px); }
.carrousel figure:nth-child(4) { transform: rotateY(135deg) translateZ(560px); }
.carrousel figure:nth-child(5) { transform: rotateY(180deg) translateZ(560px); }
.carrousel figure:nth-child(6) { transform: rotateY(225deg) translateZ(560px); }
.carrousel figure:nth-child(7) { transform: rotateY(270deg) translateZ(560px); }
.carrousel figure:nth-child(8) { transform: rotateY(315deg) translateZ(560px); }
@keyframes draai { from { transform: translateZ(-560px) rotateY(0); } to { transform: translateZ(-560px) rotateY(-360deg); } }
.module-lijst { list-style: none; counter-reset: mod; padding: 0; margin: 40px auto 0; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.module-lijst li { counter-increment: mod; position: relative; padding: 18px 60px 18px 44px; border-top: 1px solid var(--lijn); color: var(--grijs); font-size: 15px; }
.module-lijst li::before { content: counter(mod); position: absolute; left: 0; top: 16px; font-family: var(--kopletter); font-size: 22px; color: var(--koper); }
.module-lijst strong { display: block; color: var(--inkt); font-weight: 600; font-size: 17px; }
.module-lijst span { position: absolute; right: 0; top: 19px; font-size: 14px; color: var(--grijs); }

/* eigen versies: podium */
.podium { position: relative; padding: 130px 0; background: var(--room); overflow: hidden; }
.podium-rij { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.podium-tekst { position: relative; z-index: 5; }
.namen { list-style: none; padding: 0; margin: 48px 0 0; }
.namen li { position: relative; padding: 16px 0 16px 0; cursor: pointer; transition: padding .5s; }
.namen li span { display: block; font-family: var(--kopletter); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; color: #B9B1A4; transition: color .4s; }
.namen li small { display: block; font-size: 14px; color: var(--grijs); margin-top: 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .4s; }
.namen li::before { content: ""; position: absolute; left: 0; top: 34px; width: 0; height: 2px; background: var(--koper); transition: width .5s; }
.namen li.aan { padding-left: 56px; }
.namen li.aan::before { width: 40px; }
.namen li.aan span, .namen li:hover span { color: var(--inkt); }
.namen li.aan small { max-height: 30px; opacity: 1; }
.podium-beeld { position: relative; height: 620px; perspective: 1600px; isolation: isolate; }
.gloed { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; border-radius: 50%; background: var(--koper-licht); opacity: .55; z-index: 0; }
.gids { position: absolute; z-index: 1; left: 50%; top: 50%; width: 560px; max-width: none; margin: -273px 0 0 -280px; opacity: 0; filter: drop-shadow(0 30px 40px rgba(33,27,18,.25)); transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .7s; }
.gids.voor { z-index: 2; opacity: 1; transform: none; transition-delay: .25s; }
.gids.rechts { transform: translateX(80px) rotateY(-22deg) scale(.94); }
.gids.links { transform: translateX(-80px) rotateY(22deg) scale(.94); }

/* cijfers */
.cijfers { position: relative; padding: 130px 0 140px; color: var(--wit); background: var(--nacht); overflow: hidden; }
.cijfers::before { content: ""; position: absolute; width: 1100px; height: 1100px; left: -400px; bottom: -700px; border-radius: 50%; background: radial-gradient(circle, rgba(176,116,54,.35), rgba(176,116,54,0) 65%); pointer-events: none; }
.cijfers .intro { margin-bottom: 80px; }
.cijfer-rij { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.cijfer-rij > div { padding: 0 48px; border-left: 1px solid rgba(255,255,255,.18); }
.cijfer-rij > div:first-child { padding-left: 0; border-left: 0; }
.getal { font-family: var(--kopletter); font-size: clamp(96px, 11vw, 168px); line-height: .9; color: var(--wit); letter-spacing: -0.03em; }
.getal small { font-size: .32em; color: #D9A56F; letter-spacing: 0; margin: 0 4px; }
.streep { display: block; width: 0; height: 2px; background: var(--koper); margin: 28px 0 24px; transition: width 1.2s cubic-bezier(.2,.7,.2,1) .4s; }
.zichtbaar .streep { width: 72px; }
.cijfer-rij h3 { font-size: 22px; margin-bottom: 8px; }
.cijfer-rij p:not(.getal) { color: #CFC7B8; max-width: 18em; }

/* faq */
.faq { display: grid; grid-template-columns: 4fr 7fr; gap: 80px; }
details { border-top: 1px solid var(--lijn); }
details:last-child { border-bottom: 1px solid var(--lijn); }
summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-weight: 600; font-size: 18px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 28px; width: 9px; height: 9px; border-right: 1.5px solid var(--inkt); border-bottom: 1.5px solid var(--inkt); transform: rotate(45deg); transition: transform .3s; }
details[open] summary::after { transform: rotate(225deg); top: 33px; }
details p { padding: 0 40px 24px 0; color: var(--grijs); }

/* slot */
.slot { background: var(--room); padding: 120px 0; overflow: hidden; }
.slot-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.slot p { margin: 20px 0 36px; max-width: 30em; font-size: 19px; color: var(--grijs); }
.ringen { position: relative; height: 380px; display: grid; place-items: center; }
.ringen span { position: absolute; border: 1px solid var(--koper); border-radius: 50%; opacity: .5; animation: puls 6s ease-out infinite; }
.ringen span:nth-child(1) { width: 140px; height: 140px; }
.ringen span:nth-child(2) { width: 220px; height: 220px; animation-delay: 1.5s; }
.ringen span:nth-child(3) { width: 300px; height: 300px; animation-delay: 3s; }
.ringen span:nth-child(4) { width: 380px; height: 380px; animation-delay: 4.5s; }
.ringen img { position: relative; width: 240px; background: var(--room); padding: 16px; }
@keyframes puls { 0% { transform: scale(.9); opacity: 0; } 30% { opacity: .55; } 100% { transform: scale(1.12); opacity: 0; } }

/* voet */
.voet { background: var(--nacht); color: #CFC7B8; padding: 88px 0 32px; font-size: 15px; }
.voet-rij { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.voet-logo { height: 34px; margin-bottom: 18px; }
.voet-kop { color: var(--wit); font-weight: 600; margin-bottom: 12px; }
.voet a { display: block; text-decoration: none; margin-bottom: 8px; }
.voet a:hover { color: var(--wit); }
.concept { margin-top: 64px; color: #7D7466; font-size: 13px; }

/* tooltip */
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--inkt); color: var(--wit); font-size: 13px; padding: 8px 12px; border-radius: 4px; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.tip.aan { opacity: 1; }

/* beweging bij scrollen */
.opkomst { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.opkomst.zichtbaar { opacity: 1; transform: none; }
.held .opkomst:nth-child(2) { transition-delay: .15s; }
.held .opkomst:nth-child(3) { transition-delay: .3s; }
.drie > .opkomst:nth-child(2), .vier > .opkomst:nth-child(2), .cijfer-rij > .opkomst:nth-child(2) { transition-delay: .12s; }
.drie > .opkomst:nth-child(3), .vier > .opkomst:nth-child(3), .cijfer-rij > .opkomst:nth-child(3) { transition-delay: .24s; }
.vier > .opkomst:nth-child(4) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .opkomst { opacity: 1; transform: none; }
  .teken path, .trek { stroke-dashoffset: 0; }
}

@media (max-width: 960px) {
  .menu, .login { display: none; }
  .kop .knop { margin-left: auto; }
  .stelling-rij, .dienst, .dienst.om, .drie, .vier, .eigen-checkin, .bord-grafieken, .faq, .slot-rij, .voet-rij, .cijfer-rij, .podium-rij { grid-template-columns: 1fr; gap: 48px; }
  .dienst.om .dienst-tekst { order: 0; }
  .dienst-beeld { margin-bottom: 60px; }
  .rapport, .mini-bord { left: 12px; }
  .telefoon, .certificaat { right: 12px; }
  .bord-tegels { grid-template-columns: 1fr 1fr; }
  .bord-tabel { display: block; overflow-x: auto; }
  .module-lijst, .ag-kolommen { grid-template-columns: 1fr; }
  .carrousel-houder { transform: scale(.6); height: 260px; }
  .sectie { padding: 88px 0; }
  .cijfer-rij > div { padding: 0; border-left: 0; }
  .podium-beeld { height: 420px; transform: scale(.7); }
}