/* Process Runner-pagina (techpartner). Alles gescoped onder .tpr. Bron: mockup /voorstel-pr/ (28-10-2026). */
.tpr { --txt: #272727; --txt-muted: #6b7680; --oranje: #e87722; --oranje-donker: #d16a1a; --donker: #3a4751; --donker-2: #323d46; --grijs: #f3f5f7; --lijn: #dee1e4; --wit: #fff; --groen: #2ea84a; --oranje-licht: #fff3e8; --font: 'Palanquin', 'Segoe UI', Arial, sans-serif; --nav: 'Open Sans', 'Segoe UI', Arial, sans-serif; color-scheme: light; }
.tpr * { box-sizing: border-box; }
/* het thema laat .band floaten (headerband); de blokken beginnen eronder */
.tpr { clear: both; }
.tpr { margin: 0px; background: var(--wit); color: var(--txt); font-family: var(--font); font-size: 17px; line-height: 29px; -webkit-font-smoothing: antialiased; }
.tpr img { max-width: 100%; height: auto; display: block; }
.tpr a { color: var(--oranje); text-decoration: none; transition: 0.3s ease-in-out; }
.tpr h2, .tpr h3 { font-family: var(--font); font-weight: 500; margin: 0px; text-wrap: balance; }
.tpr h2 { font-size: 28px; line-height: 38px; }
.tpr h3 { font-size: 21px; line-height: 32px; }
.tpr p { margin: 6px 0px 16px; }
.tpr ul { margin: 0px; padding-left: 22px; }
.tpr li { line-height: 29px; }
.tpr .pr-c { width: 100%; max-width: 1200px; margin: 0px auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 1240px) {
.tpr .pr-c { padding-left: 10px; padding-right: 10px; }
}
.tpr .eyebrow { display: block; font-family: var(--nav); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--oranje); margin-bottom: 10px; }
.tpr .lead { font-weight: 600; font-size: 19px; line-height: 32px; }
.tpr .button { display: inline-block; font-weight: 600; font-size: 15px; padding: 14px 18px; line-height: 1.2; cursor: pointer; border: 2px solid transparent; }
.tpr .button.orange { background: var(--oranje); border-color: var(--oranje); color: var(--wit) !important; }
.tpr .button.orange:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); }
.tpr .knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.tpr a:focus-visible, .tpr button:focus-visible, .tpr input:focus-visible { outline: 3px solid var(--oranje); outline-offset: 2px; }
.tpr .modal { position: fixed; inset: 0px; z-index: 100; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(28, 34, 38, 0.82); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.tpr .modal.open { opacity: 1; pointer-events: auto; }
.tpr .modal-inhoud { width: min(960px, 100%); transform: translateY(16px) scale(0.97); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tpr .modal.open .modal-inhoud { transform: none; }
.tpr .modal-sluit { position: absolute; top: -52px; right: 0px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 2px solid var(--oranje); background: var(--oranje); color: rgb(255, 255, 255); line-height: 0; cursor: pointer; }
.tpr .modal-inhoud { position: relative; }
.tpr .modal-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: rgb(0, 0, 0); box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 60px; }
.tpr .flow { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 0px; align-items: stretch; margin-top: 44px; background: var(--wit); border: 1px solid var(--lijn); }
.tpr :is(#demo, .demo-sectie) { position: relative; overflow: hidden; background: var(--donker); color: rgb(255, 255, 255); padding-block: 80px; }
.tpr :is(#demo, .demo-sectie) .pr-c { position: relative; }
.tpr .demo-grid { display: grid; grid-template-columns: minmax(0px, 0.95fr) minmax(0px, 1.05fr); gap: 56px; align-items: center; }
.tpr :is(#demo, .demo-sectie) .eyebrow { color: var(--oranje); }
.tpr :is(#demo, .demo-sectie) h2 { color: rgb(255, 255, 255); font-size: 38px; line-height: 46px; font-weight: 600; margin-bottom: 14px; }
.tpr :is(#demo, .demo-sectie) .cta-intro { color: rgb(223, 228, 232); font-size: 18px; line-height: 30px; margin: 0px; max-width: 520px; }
.tpr .demo-lijstkop { margin: 26px 0px 10px; font: 600 12px var(--nav); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oranje); }
.tpr .demo-usp { list-style: none; padding: 0px; margin: 0px; }
.tpr .demo-usp li { padding-left: 30px; position: relative; line-height: 28px; margin-bottom: 8px; color: rgb(255, 255, 255); }
.tpr .demo-usp li::before { content: ""; position: absolute; left: 0px; top: 8px; width: 12px; height: 7px; border-left: 2.5px solid var(--oranje); border-bottom: 2.5px solid var(--oranje); transform: rotate(-45deg); }
.tpr .cta-persoon .ci, .tpr .cta-persoon .cl, .tpr .cta-persoon .citaat { display: none; }
.tpr .cta-persoon .ci { width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.tpr .cta-persoon .contact a { display: inline-flex; align-items: center; gap: 8px; }
.tpr .cta-persoon { display: grid; grid-template-columns: 88px minmax(0px, 1fr); gap: 20px; align-items: center; margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.tpr .cta-persoon img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; filter: grayscale(1); box-shadow: 0 0 0 3px var(--oranje); }
.tpr .cta-persoon .vraag { display: block; font: 600 12px var(--nav); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(154, 166, 176); margin-bottom: 2px; }
.tpr .cta-persoon .naam { font-weight: 600; font-size: 19px; line-height: 26px; }
.tpr .cta-persoon .contact { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; line-height: 24px; }
.tpr .cta-persoon .contact a { color: rgb(255, 255, 255); text-decoration: underline rgba(232, 119, 34, 0.7); text-underline-offset: 4px; }
.tpr .cta-persoon .contact a:hover { color: var(--oranje); }
.tpr .cta-persoon[data-ep="10"] { position: relative; }
.tpr .cta-persoon[data-ep="10"] img { filter: none; box-shadow: none; }
.tpr .cta-persoon[data-ep="10"]::after { content: ""; position: absolute; left: 68px; top: 96px; width: 14px; height: 14px; border-radius: 50%; background: rgb(62, 196, 109); box-shadow: 0 0 0 3px var(--donker); }
@media (max-width: 760px) {
.tpr .cta-persoon[data-ep="10"]::after { left: 52px; top: 80px; }
}
.tpr .pr-form { background: var(--wit); color: var(--txt); padding: 34px 34px 30px; box-shadow: rgba(0, 0, 0, 0.45) 0px 30px 60px -20px; border-top: 4px solid var(--oranje); }
.tpr .gform .gtitel { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--donker); margin: 0px 0px 4px; }
.tpr .gform .gsub { font-size: 15px; line-height: 24px; color: var(--txt-muted); margin: 0px 0px 22px; }
.tpr .pr-form { width: 100%; max-width: 90%; justify-self: end; }
@media (max-width: 900px) {
.tpr .pr-form { max-width: none; }
}
@media (max-width: 760px) {
.tpr :is(#demo, .demo-sectie) { padding-block: 56px; }
.tpr :is(#demo, .demo-sectie) h2 { font-size: 30px; line-height: 38px; }
.tpr .pr-form { padding: 26px 20px 24px; }
.tpr .cta-persoon { grid-template-columns: 72px minmax(0px, 1fr); gap: 16px; }
.tpr .cta-persoon img { width: 72px; height: 72px; }
}
.tpr .l-sectie { padding-block: 80px; }
.tpr .l-grijs { background: var(--grijs); }
.tpr .l-kop { max-width: 760px; margin-bottom: 40px; }
.tpr .l-kop.midden { margin-inline: auto; text-align: center; }
.tpr .l-kop h2 { font-size: 36px; line-height: 46px; font-weight: 500; margin-bottom: 12px; color: var(--txt); }
.tpr .l-kop p { font-size: 18px; line-height: 30px; color: var(--txt-muted); margin: 0px; }
.tpr .l-hero { position: relative; background: var(--grijs); overflow: hidden; padding-block: 64px 72px; --hs-gap: 48px; --hs-band: 50px; --hs-o: .12; --hs-w: 21%; --hs-r: 0; }
.tpr .l-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 var(--hs-gap), rgba(232, 119, 34, var(--hs-o)) var(--hs-gap) calc(var(--hs-gap) + var(--hs-band))); -webkit-mask: linear-gradient(115deg, transparent var(--sl, 48%), #000 calc(var(--sl, 48%) + 8%)), radial-gradient(ellipse var(--hs-w) 110% at 72% 50%, #000 14%, transparent 100%), radial-gradient(ellipse var(--hs-w) 110% at 72% 0%, rgba(0, 0, 0, .73) 40%, transparent 100%), linear-gradient(90deg, transparent 66%, rgba(0, 0, 0, var(--hs-r)) 78%); -webkit-mask-composite: source-in, source-over, source-over; mask: linear-gradient(115deg, transparent var(--sl, 48%), #000 calc(var(--sl, 48%) + 8%)), radial-gradient(ellipse var(--hs-w) 110% at 72% 50%, #000 14%, transparent 100%), radial-gradient(ellipse var(--hs-w) 110% at 72% 0%, rgba(0, 0, 0, .73) 40%, transparent 100%), linear-gradient(90deg, transparent 66%, rgba(0, 0, 0, var(--hs-r)) 78%); mask-composite: intersect, add, add; pointer-events: none; }
.tpr .l-hero .pr-c { position: relative; display: grid; grid-template-columns: minmax(0px, 0.95fr) minmax(0px, 1.05fr); gap: 48px; align-items: center; }
.tpr .l-hero h2 { font-size: 50px; line-height: 58px; font-weight: 600; color: var(--donker); margin-bottom: 18px; }
.tpr .l-hero h2 span { color: var(--oranje); }
.tpr .l-hero p.lead { font-size: 19px; line-height: 31px; font-weight: 400; max-width: 530px; margin-bottom: 0px; }
.tpr .l-partner { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--lijn); font-size: 16px; line-height: 24px; color: var(--donker); }
.tpr .l-partner-logo { flex: 0 0 auto; display: inline-flex; align-items: center; background: rgb(255, 255, 255); padding: 8px 12px; box-shadow: 0 0 0 1px var(--lijn); }
.tpr .l-partner-logo img { height: 18px; width: auto; }
.tpr .l-klanten { padding-block: 44px 40px; background: rgb(255, 255, 255); border-bottom: 1px solid var(--lijn); }
.tpr .kl:not(.actief) { display: none; }
.tpr .kl-kop { font: 600 12px var(--nav); letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-muted); margin: 0px 0px 18px; text-align: center; }
.tpr .kl-logo { display: flex; align-items: center; justify-content: center; height: 46px; }
.tpr .kl-logo img { max-height: 46px; max-width: 130px; width: auto; height: auto; object-fit: contain; }
.tpr .kl-shell img { max-height: 50px; }
.tpr .kl-pace img { max-width: 150px; }
.tpr .kl-gemiddeld { margin: 26px 0px 0px; text-align: center; font-size: 16px; color: var(--txt); }
.tpr .kl-gemiddeld b { color: var(--oranje); }
.tpr .kl-gemiddeld span { color: var(--txt-muted); font-size: 13px; margin-left: 6px; }
.tpr .l-klanten:has(.kl2.actief) { background: var(--donker); border-bottom: 0px; }
.tpr .l-klanten:has(.kl2.actief) .kl-gemiddeld { color: rgb(223, 228, 232); border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 18px; }
.tpr .l-klanten:has(.kl2.actief) .kl-gemiddeld span { color: rgb(154, 166, 176); }
.tpr .l-klanten:has(.kl2.actief) { padding-block: 30px 36px; }
.tpr .kl3-logos { display: grid; grid-template-columns: repeat(var(--kl-n, 5), minmax(0px, 1fr)); border: 1px solid var(--lijn); }
.tpr .kl3-tab { border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 1px solid var(--lijn); background: rgb(255, 255, 255); padding: 20px 10px; cursor: pointer; position: relative; }
.tpr .kl3-tab:first-child { border-left: 0px; }
.tpr .kl3-tab .kl-logo { filter: grayscale(1); opacity: 0.55; transition: filter 0.25s, opacity 0.25s; }
.tpr .kl3-tab:hover .kl-logo, .tpr .kl3-tab[aria-pressed="true"] .kl-logo { filter: none; opacity: 1; }
.tpr .kl3-tab[aria-pressed="true"] { background: var(--grijs); }
.tpr .kl3-tab[aria-pressed="true"]::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: -1px; height: 3px; background: var(--oranje); }
.tpr .kl3-paneel { display: grid; grid-template-columns: 220px minmax(0px, 1fr); gap: 36px; align-items: center; background: var(--grijs); padding: 28px 32px; animation: 0.4s ease 0s 1 normal both running ru-in; }
.tpr .kl3-paneel[hidden] { display: none; }
.tpr .kl3-pct { font-size: 64px; line-height: 64px; font-weight: 700; color: var(--oranje); font-variant-numeric: tabular-nums; }
.tpr .kl3-pct small { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--txt-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.tpr .kl3-txt .naam { display: block; font-size: 20px; font-weight: 600; color: var(--donker); }
.tpr .kl3-txt .taak { display: block; color: var(--txt-muted); margin-bottom: 14px; }
.tpr .kl3-balken { display: grid; gap: 8px; }
.tpr .kl3-balken div { display: grid; grid-template-columns: 150px minmax(0px, 1fr) 110px; gap: 12px; align-items: center; font-size: 14px; }
.tpr .kl3-balken i { height: 14px; background: rgb(143, 154, 163); display: block; transform-origin: left center; animation: 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running ru-groei; }
.tpr .kl3-balken .pr i { background: var(--oranje); }
.tpr .kl3-balken em { font-style: normal; font-weight: 600; color: var(--donker); font-variant-numeric: tabular-nums; }
@keyframes ru-groei {    0% { transform: scaleX(0); } }
.tpr .kl3 .kl3-balken { gap: 14px; }
.tpr .kl3 .kl3-balken > div { position: relative; grid-template-columns: 150px minmax(0px, 1fr) 170px; }
.tpr .kl3 .kl3-balken i { height: 18px; }
.tpr .kl3 .kl3-balken em { padding-left: 30px; }
.tpr .kl3 .kl3-balken > div:not(.pr) em::after { content: " handwerk"; font-weight: 400; color: var(--txt-muted); }
.tpr .kl3 .kl3-balken .balkcel { display: flex; align-items: center; gap: 10px; min-width: 0px; }
.tpr .kl3 .kl3-balken .balkcel i { flex: 0 0 auto; min-width: 4px; }
.tpr .kl3 .kl3-balken .sneller { flex: 0 0 auto; background: var(--oranje); color: rgb(255, 255, 255); font: 700 13px/1 var(--nav); padding: 6px 11px; border-radius: 999px; white-space: nowrap; animation: 0.5s ease 0.5s 1 normal both running ru-in; }
@media (max-width: 760px) {
.tpr .kl3 .kl3-balken > div:not(.pr)::after { display: none; }
.tpr .kl3 .kl3-balken em { padding-left: 0px; }
}
@media (max-width: 600px) {
.tpr .kl3-paneel { grid-template-columns: minmax(0px, 1fr); gap: 14px; padding: 22px 18px; }
.tpr .kl3 .kl3-balken > div { grid-template-columns: minmax(0px, 1fr) 64px; gap: 4px 10px; font-size: 13px; }
.tpr .kl3 .kl3-balken .balkcel { grid-column: auto; }
.tpr .kl3-tab { padding: 14px 8px; }
.tpr .kl3-tab .kl-logo img { max-width: 100%; }
.tpr .kl3 .kl3-balken > div:not(.pr) em::after { content: none; }
.tpr .kl3 .kl3-balken .sneller { font-size: 12px; padding: 5px 8px; }
}
.tpr .kl3 .kl3-balken .pr i { min-width: 14%; }
.tpr .kl3[data-lb="2"] .sneller { background: rgb(255, 255, 255); color: var(--oranje); box-shadow: inset 0 0 0 2px var(--oranje); }
.tpr .kl3 .kl3-balken > div:not(.pr) i { position: relative; }
.tpr .kl3[data-gb="2"] .kl3-balken > div:not(.pr) i { transform-origin: left center; animation: 2.2s linear 0s 1 normal both running kl-kruip; }
@keyframes kl-kruip {    0% { transform: scaleX(0); } }
.tpr .kl3[data-gb="2"] .kl3-balken .pr i { transform-origin: left center; animation: 0.5s cubic-bezier(0.3, 0.6, 0.4, 1) 0s 1 normal both running kl-kruip; }
.tpr .kl3[data-gb="2"] .kl3-balken .sneller { animation-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
.tpr .kl3[data-gb="2"] .kl3-balken .pr i { animation: auto ease 0s 1 normal none running none; }
}
@media (prefers-reduced-motion: reduce) {
.tpr .kl3 .kl3-balken > div:not(.pr) i, .tpr .kl3 .kl3-balken > div:not(.pr)::after { animation: auto ease 0s 1 normal none running none !important; }
}
.tpr .kl3 .kl3-balken .pr i { position: relative; overflow: hidden; }
.tpr .kl3 .kl3-balken .balkcel i { order: 0; }
.tpr .kl3 .kl3-balken .balkcel::before { order: 1; }
.tpr .kl3 .kl3-balken .sneller { order: 2; }
.tpr .kl3 .kl3-balken .balkcel::after { order: 3; }
@keyframes fx-glans {    0% { transform: translateX(-120%); }   100% { transform: translateX(320%); } }
@keyframes fx-pop {    0% { transform: scale(0); opacity: 0; }   60% { transform: scale(1.25); opacity: 1; }   100% { transform: scale(1); opacity: 1; } }
.tpr .kl3[data-fx="1"] .pr i::before { content: ""; position: absolute; inset: 0px; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); animation: 0.55s ease-in 0s 1 normal both running fx-glans; }
.tpr .kl3[data-fx="1"] .balkcel::before { content: ""; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; animation: 0.4s ease-out 0.5s 1 normal both running fx-pop; }
.tpr .kl3[data-fx="1"] .sneller { animation-delay: 0.75s; }
@media (prefers-reduced-motion: reduce) {
.tpr .kl3 .pr i, .tpr .kl3 .pr i::before, .tpr .kl3 .pr i::after, .tpr .kl3 .balkcel::before, .tpr .kl3 .balkcel::after, .tpr .kl3 .sneller, .tpr .kl3 .pr em, .tpr .kl3 .pr em::after { animation: auto ease 0s 1 normal none running none !important; }
.tpr .kl3 .pr i::after { display: none; }
}
.tpr .kl3:not(.gezien) .kl3-balken *, .tpr .kl3:not(.gezien) .kl3-balken ::before, .tpr .kl3:not(.gezien) .kl3-balken ::after { animation-play-state: paused !important; }
.tpr .kl3:not(.gezien) .kl3-balken i { transform: scaleX(0.015); transform-origin: left center; animation: auto ease 0s 1 normal none running none !important; }
.tpr .kl3:not(.gezien) .kl3-balken .pr i { transform: scaleX(0.1); }
@media (prefers-reduced-motion: reduce) {
.tpr .kl3-paneel, .tpr .kl3-balken i { animation: auto ease 0s 1 normal none running none; transition: none; }
}
@media (max-width: 760px) {
.tpr .kl3-logos { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.tpr .kl3-paneel { grid-template-columns: minmax(0px, 1fr); gap: 16px; padding: 22px; }
.tpr .kl3-balken div { grid-template-columns: 1fr 80px; }
.tpr .kl3-balken span { grid-column: 1 / -1; }
}
.tpr .l-chat { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 18px 60px; max-width: 1040px; margin: 0px auto; }
.tpr .l-chat-kol { display: grid; gap: 24px; align-content: start; }
.tpr .l-chat .kolomkop { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--donker); font-size: 18px; padding-bottom: 8px; border-bottom: 2px solid var(--donker); }
.tpr .l-chat .kolomkop.it { border-bottom-color: var(--oranje); }
.tpr .l-chat .kolomkop img { width: 28px; height: 28px; }
.tpr .l-bel { position: relative; background: var(--grijs); padding: 18px 22px; font-size: 17px; line-height: 27px; margin: 0px; }
.tpr .l-bel::after { content: ""; position: absolute; left: 24px; bottom: -10px; border-width: 10px 10px 0px; border-style: solid solid none; border-right-color: transparent; border-left-color: transparent; border-image: none; border-top-color: var(--grijs); border-bottom-color: currentcolor; }
.tpr .l-bel.it { background: var(--oranje-licht); }
.tpr .l-bel.it::after { border-top-color: var(--oranje-licht); left: auto; right: 24px; }
.tpr .l-chat-slot { text-align: center; margin: 44px auto 0px; font-size: 22px; line-height: 32px; color: var(--donker); max-width: 700px; }
.tpr .l-chat-slot b { color: var(--oranje); font-weight: 600; }
.tpr .l-werking .l-kop { margin-bottom: 26px; }
.tpr .l-demo { background: rgb(255, 255, 255); border: 1px solid var(--lijn); padding: 26px; }
.tpr .l-demo[hidden] { display: none; }
.tpr .l-stappen { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 30px; margin-top: 44px; counter-reset: lst 0; }
.tpr .l-stap { padding-left: 62px; position: relative; }
.tpr .l-stap::before { counter-increment: lst 1; content: counter(lst); position: absolute; left: 0px; top: 0px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--oranje); color: var(--oranje); font-weight: 700; font-size: 19px; display: grid; place-items: center; }
.tpr .l-stap h3 { font-size: 19px; line-height: 27px; font-weight: 600; margin-bottom: 4px; }
.tpr .l-stap p { margin: 0px; font-size: 16px; line-height: 26px; color: var(--txt-muted); }
.tpr .l-stappen .l-stap { padding: 64px 0px 0px; }
.tpr .l-stappen .l-stap::before { border: 0px; background: rgba(232, 119, 34, 0.12); }
.tpr .l-stappen .l-stap:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 58px; right: -16px; border-top: 2px dotted rgba(232, 119, 34, 0.55); }
@media (max-width: 760px) {
.tpr .l-stappen .l-stap { padding: 0px 0px 0px 62px; }
.tpr .l-stappen .l-stap:not(:last-child)::after { inset: 54px auto -24px 21px; border-top: 0px; border-left: 2px dotted rgba(232, 119, 34, 0.55); }
}
.tpr .sapwin { border: 1px solid rgb(142, 164, 189); background: rgb(238, 243, 248); font: 12px / 1.4 Tahoma, Verdana, sans-serif; color: rgb(27, 42, 58); box-shadow: rgba(58, 71, 81, 0.15) 0px 6px 18px; }
.tpr .sapwin .titel { background: linear-gradient(rgb(223, 232, 242), rgb(199, 214, 230)); font-style: italic; font-weight: 700; padding: 6px 10px; border-bottom: 1px solid rgb(142, 164, 189); display: flex; justify-content: space-between; gap: 10px; }
.tpr .sapwin .titel span { font-style: normal; font-weight: 400; color: rgb(74, 93, 114); }
.tpr .sapwin .velden { padding: 12px 12px 14px; display: grid; grid-template-columns: 120px minmax(0px, 1fr); gap: 7px 10px; align-items: center; }
.tpr .sapwin .veld { background: rgb(255, 255, 255); border: 1px solid rgb(169, 185, 202); height: 22px; padding: 2px 6px; font-family: inherit; overflow: hidden; white-space: nowrap; }
.tpr .sapwin .veld.actief { border-color: rgb(232, 164, 0); background: rgb(255, 251, 230); }
.tpr .sapwin .knoppen-sap { display: flex; gap: 6px; padding: 0px 12px 12px; }
.tpr .sapwin .knoppen-sap span, .tpr .sapwin .knoppen-sap button { background: linear-gradient(rgb(253, 247, 216), rgb(242, 226, 160)); border: 1px solid rgb(201, 178, 90); padding: 3px 10px; font: inherit; color: inherit; }
.tpr .sapwin .knoppen-sap button { cursor: pointer; }
.tpr .sapwin .knoppen-sap button:hover { background: rgb(255, 229, 138); }
.tpr .xl { border: 1px solid rgb(185, 196, 185); background: rgb(255, 255, 255); font: 12px / 1.3 Calibri, "Segoe UI", Arial, sans-serif; box-shadow: rgba(58, 71, 81, 0.15) 0px 6px 18px; }
.tpr .xl .lint { background: rgb(33, 115, 70); color: rgb(255, 255, 255); padding: 6px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
.tpr .xl .lint span { background: rgb(255, 255, 255); color: rgb(33, 115, 70); padding: 1px 8px; font-size: 11px; }
.tpr .xl table { width: 100%; border-collapse: collapse; font-size: inherit; font-variant-numeric: tabular-nums; }
.tpr .xl th { background: rgb(243, 243, 243); color: rgb(85, 85, 85); font-weight: 600; text-align: left; padding: 4px 8px; border: 1px solid rgb(218, 218, 218); }
.tpr .xl td { padding: 3px 8px; border: 1px solid rgb(229, 229, 229); white-space: nowrap; }
.tpr .xl td.st { width: 112px; }
.tpr .xl tr.ok td.st { color: rgb(33, 115, 70); font-weight: 700; background: rgb(231, 244, 234); }
.tpr .xl tr.bezig td.st { color: var(--oranje); }
.tpr .xl .meer { padding: 5px 8px; color: rgb(119, 119, 119); font-style: italic; border-top: 1px solid rgb(229, 229, 229); }
.tpr .race { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 26px; }
.tpr .race > .baan { min-width: 0px; }
.tpr .race .sapwin, .tpr .race .xl { max-width: 100%; }
.tpr .race > .baan { display: flex; flex-direction: column; }
.tpr .race > .baan > .sapwin, .tpr .race > .baan > .xl { flex: 1 1 auto; }
.tpr .race .xl table { max-width: 100%; }
.tpr .race .xl td, .tpr .race .xl th { overflow: hidden; text-overflow: ellipsis; }
.tpr .race .sapwin .titel span:first-child { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
.tpr .race .xl table { table-layout: fixed; }
}
@media (max-width: 480px) {
.tpr .race .xl th:nth-child(4), .tpr .race .xl td:nth-child(4) { display: none; }
}
.tpr .race .baan h3 { font-size: 18px; line-height: 24px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tpr .race .baan h3 small { font: 600 12px var(--nav); color: var(--txt-muted); letter-spacing: 0.04em; }
.tpr .race .klok { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--donker); }
.tpr .race .tellerbalk { margin-top: 14px; }
.tpr .race .tellerbalk .tekst { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.tpr .race .tellerbalk .tekst b { font-size: 20px; color: var(--donker); }
.tpr .race .spoor { height: 12px; background: var(--grijs); position: relative; overflow: hidden; }
.tpr .race .vul { position: absolute; inset: 0px auto 0px 0px; width: 0px; background: rgb(183, 192, 199); }
.tpr .race .pr .vul { background: var(--oranje); }
.tpr .race-uitslag { margin-top: 20px; background: var(--oranje-licht); border-left: 4px solid var(--oranje); padding: 16px 20px; font-size: 17px; line-height: 27px; }
.tpr .race-uitslag b { color: var(--donker); }
.tpr .race-top { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.tpr .race-tempo { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/18px var(--nav); letter-spacing: 0.04em; color: var(--donker); background: var(--grijs); padding: 5px 12px; transition: background 0.3s, color 0.3s; }
.tpr .race-tempo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentcolor; }
.tpr #demo-race.snel .race-tempo { background: var(--oranje); color: rgb(255, 255, 255); }
.tpr #demo-race.klaar .race-tempo { background: var(--donker); color: rgb(255, 255, 255); }
.tpr .race-bron { font-size: 14px; color: var(--txt-muted); }
.tpr .race-tempo { display: none; }
.tpr .race-klok { font: 600 13px/18px var(--nav); color: var(--txt-muted); }
.tpr .race-klok b { color: var(--donker); font-variant-numeric: tabular-nums; margin-left: 4px; }
.tpr .race .sapwin, .tpr .race .xl { position: relative; }
.tpr #demo-race.snel .race .sapwin::after, .tpr #demo-race.snel .race .xl::after { content: "Versneld"; position: absolute; top: -11px; right: 12px; background: var(--oranje); color: rgb(255, 255, 255); font: 600 11px/16px var(--nav); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; z-index: 2; }
.tpr #demo-race.snel .race .sapwin .velden { filter: blur(0.6px); opacity: 0.75; }
.tpr .race .sapwin { display: flex; flex-direction: column; }
.tpr .race .sapwin .velden { flex: 1 1 auto; align-content: start; gap: 5px 10px; padding: 10px 12px; }
.tpr .race .sapwin .velden { min-height: 165px; }
.tpr .race .sapwin .velden label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpr .race .sapwin .veld { height: 20px; padding: 1px 6px; }
.tpr .race .sapwin .knoppen-sap span.druk { background: rgb(255, 210, 74); border-color: rgb(168, 137, 42); box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px inset; }
.tpr .sap-status { border-top: 1px solid rgb(169, 185, 202); background: rgb(223, 232, 242); min-height: 22px; padding: 3px 10px; font-size: 11px; color: rgb(74, 93, 114); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpr .sap-status.ok::before { content: "✔ "; color: rgb(43, 138, 62); font-weight: 700; }
.tpr .sap-status.let::before { content: "⚠ "; color: rgb(196, 127, 0); }
.tpr .sap-popup { position: absolute; left: 28px; right: 28px; top: 54px; background: rgb(238, 243, 248); border: 1px solid rgb(111, 138, 168); box-shadow: rgba(27, 42, 58, 0.3) 0px 8px 22px; z-index: 2; }
.tpr .sap-popup[hidden] { display: none; }
.tpr .sap-popup .pk { background: linear-gradient(rgb(223, 232, 242), rgb(199, 214, 230)); font-weight: 700; padding: 5px 10px; border-bottom: 1px solid rgb(142, 164, 189); }
.tpr .sap-popup .pt { padding: 10px 12px; }
.tpr .sap-popup .knoppen-sap { padding: 0px 12px 10px; }
.tpr #demo-race.snel .race .sapwin .velden { filter: none; opacity: 0.85; }
.tpr .race .pr .tellerbalk { position: relative; }
.tpr .rk-vink, .tpr .rk-melding { display: none; }
@keyframes rk-pop {    0% { transform: scale(0); }   60% { transform: scale(1.25); }   100% { transform: scale(1); } }
@keyframes rk-ring {    0% { box-shadow: rgba(232, 119, 34, 0.55) 0px 0px 0px 0px; }   100% { box-shadow: rgba(232, 119, 34, 0) 0px 0px 0px 14px; } }
@keyframes rk-op {    0% { opacity: 0; transform: translate(-50%, 12px); }   100% { opacity: 1; transform: translate(-50%, 0px); } }
.tpr #demo-race.pr-klaar .race .pr .spoor { margin-right: 18px; }
.tpr #demo-race.pr-klaar .rk-vink { display: block; position: absolute; right: -4px; bottom: -7px; width: 26px; height: 26px; border-radius: 50%; background: var(--oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; animation: 0.45s ease-out 0s 1 normal both running rk-pop, 0.9s ease-out 0.35s 2 normal none running rk-ring; }
.tpr #demo-race.pr-klaar .rk-melding { display: flex; gap: 8px; align-items: center; position: absolute; left: 50%; bottom: 12px; z-index: 3; white-space: nowrap; background: var(--donker); color: rgb(213, 219, 224); font: 400 13px/1 var(--nav); padding: 10px 14px; box-shadow: rgba(27, 42, 58, 0.3) 0px 8px 20px; animation: 0.4s ease-out 0.35s 1 normal both running rk-op; }
.tpr #demo-race.pr-klaar .rk-melding b { color: rgb(255, 255, 255); font-weight: 700; }
.tpr #demo-race.pr-klaar .rk-melding::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 3px; background: var(--oranje); }
@media (prefers-reduced-motion: reduce) {
.tpr #demo-race .rk-vink, .tpr #demo-race .rk-melding { animation: auto ease 0s 1 normal none running none !important; }
}
.tpr #r-resultaat[hidden], .tpr .rs:not(.actief) { display: none; }
.tpr .rs { margin: 22px 0px 0px; font-size: 20px; line-height: 30px; color: var(--donker); animation: 0.45s ease 0s 1 normal both running ru-in; }
.tpr .rs b { color: var(--oranje); font-weight: 700; }
@keyframes ru-in {    0% { opacity: 0; transform: translateY(6px); } }
.tpr .rs1 { text-align: center; padding: 18px 0px; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
.tpr .rs { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 760px) {
.tpr .rs1, .tpr .rs { font-size: 18px; line-height: 28px; }
}
@keyframes ru-in {    0% { opacity: 0; transform: translateY(6px); } }
.tpr .l-voordelen { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; }
.tpr .l-voordeel { background: rgb(255, 255, 255); padding: 30px 28px; display: grid; grid-template-columns: 56px minmax(0px, 1fr); gap: 20px; align-items: start; }
.tpr .l-voordeel .ic { width: 56px; height: 56px; }
.tpr .l-voordeel .ic svg { width: 56px; height: 56px; stroke: var(--donker); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tpr .l-voordeel .ic svg .acc { stroke: var(--oranje); }
.tpr .l-voordeel h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 6px; }
.tpr .l-voordeel p { margin: 0px; font-size: 16px; line-height: 26px; color: var(--txt-muted); }
.tpr .l-waarom-pr { background: rgb(255, 255, 255); }
.tpr .l-waarom-pr .l-voordelen { gap: 0px; border-top: 1px solid var(--lijn); }
.tpr .l-waarom-pr .l-voordeel { background: none; padding: 30px 26px 30px 0px; border-bottom: 1px solid var(--lijn); grid-template-columns: 64px minmax(0px, 1fr); }
.tpr .l-waarom-pr .l-voordeel .ic { width: 64px; height: 64px; display: grid; place-items: center; background: var(--donker); }
.tpr .l-waarom-pr .l-voordeel .ic svg { width: 38px; height: 38px; stroke: rgb(227, 232, 236); }
.tpr .l-waarom-pr .l-voordeel .ic svg rect[fill="#fff"] { fill: var(--donker); }
@media (max-width: 760px) {
.tpr .l-waarom-pr .l-voordeel { padding-right: 0px; }
}
.tpr .tc-wrap { overflow-x: clip; }
.tpr .tcv { position: relative; overflow: hidden; }
.tpr .tcv h2 { font-size: 28px; line-height: 36px; font-weight: 600; margin: 0px 0px 6px; }
.tpr .tcv .eyebrow { display: block; font: 600 12px/18px var(--nav); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oranje); margin-bottom: 8px; }
.tpr .tc3 { background: var(--donker); color: rgb(255, 255, 255); padding-block: 48px; }
.tpr .tc3 { --rs-w: 16%; --rs-gap: 28px; --rs-band: 47px; --rs-o: .16; --rs-fade: 87%; }
.tpr .tc3::after { content: ""; position: absolute; right: 0px; top: 0px; bottom: 0px; width: var(--rs-w); background: repeating-linear-gradient(-55deg, transparent 0 var(--rs-gap), rgba(232, 119, 34, var(--rs-o)) var(--rs-gap) calc(var(--rs-gap) + var(--rs-band))); mask: linear-gradient(90deg, transparent, #000 var(--rs-fade)); pointer-events: none; }
.tpr .tc3 .pr-c { display: grid; grid-template-columns: minmax(0px, 1.15fr) auto; gap: 30px 56px; align-items: center; position: relative; z-index: 1; }
.tpr .tc3 .rv-resultaat { display: flex; align-items: center; gap: 48px; }
.tpr .tc3 h2 { color: rgb(255, 255, 255); font-size: 26px; line-height: 34px; margin-bottom: 18px; }
.tpr .tc3 .slider { display: grid; gap: 10px; max-width: 480px; }
.tpr .tc3 output { font: 600 14px var(--nav); color: rgb(198, 206, 212); }
.tpr .tc3 input[type="range"] { appearance: none; width: 100%; height: 4px; margin: 10px 0px; background: linear-gradient(90deg, var(--oranje) var(--p, 18%), rgba(255, 255, 255, .25) var(--p, 18%)); outline: none; cursor: pointer; }
.tpr .tc3 input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; background: var(--oranje); border: 3px solid rgb(255, 255, 255); border-radius: 0px; cursor: grab; }
.tpr .tc3 input[type="range"]:focus-visible { outline: 3px solid var(--oranje); outline-offset: 6px; }
.tpr .tc3 .uitkomst { display: flex; flex-direction: column; min-width: 220px; padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.tpr .tc3 .uitkomst b { font-size: 52px; line-height: 1; font-weight: 700; color: var(--oranje); font-variant-numeric: tabular-nums; }
.tpr .tc3 .uitkomst span { font-size: 15px; color: rgb(255, 255, 255); margin-top: 6px; }
.tpr .tc3 .uitkomst small { font-size: 12px; line-height: 17px; color: rgb(154, 166, 176); margin-top: 10px; max-width: 240px; }
@media (max-width: 900px) {
.tpr .tc3 .pr-c { grid-template-columns: minmax(0px, 1fr); gap: 24px; }
.tpr .tc3 .uitkomst { border-left: 0px; padding-left: 0px; }
.tpr .tc3 .rv-resultaat { flex-wrap: wrap; gap: 20px 40px; }
}
@media (max-width: 600px) {
.tpr .tcv h2, .tpr .tc3 h2 { font-size: 23px; line-height: 30px; }
}
.tpr .tc3 input[type="range"] { height: 10px; margin: 16px 0px; }
.tpr .tc3 input[type="range"]::-webkit-slider-thumb { width: 34px; height: 34px; border-radius: 50%; border: 0px; background: var(--oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-4 5 4 5M15 7l4 5-4 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: rgba(232, 119, 34, 0.25) 0px 0px 0px 6px; }
.tpr .tc3 output { font-size: 16px; color: rgb(255, 255, 255); }
.tpr .button.rv-knop { background: var(--oranje); border-color: var(--oranje); white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; color: rgb(255, 255, 255) !important; }
.tpr .button.rv-knop:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); }
@media (prefers-reduced-motion: reduce) {
.tpr .button.rv-knop { transition: none; }
}
.tpr .l-module, .tpr .l-uitleg, .tpr .l-sap i { transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s; }
.tpr .l-module { position: relative; }
.tpr .l-sap i { position: relative; }
.tpr .l-suite-sectie .l-kader { border: 0px; background: rgb(255, 255, 255); padding: 62px 22px 24px; box-shadow: rgba(31, 39, 46, 0.4) 0px 26px 54px -30px; }
.tpr .l-suite-sectie .l-kader .kader-label { top: 0px; left: 0px; right: 0px; padding: 12px 18px; background: rgb(247, 249, 250); border-bottom: 1px solid var(--lijn); }
.tpr .l-suite-sectie .l-module { background: rgb(255, 255, 255); border-color: var(--lijn); padding: 20px 16px 18px; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.tpr .l-suite-sectie .l-module .iconen { background: var(--grijs); padding: 8px; align-self: flex-start; }
.tpr .l-suite-sectie .l-module:hover { transform: translateY(-2px); box-shadow: rgba(31, 39, 46, 0.35) 0px 12px 24px -16px; border-color: var(--lijn); }
.tpr .l-suite-sectie .l-module[aria-pressed="true"] { transform: translateY(-5px); border-color: transparent; box-shadow: 0 18px 32px -16px rgba(232, 119, 34, .5), inset 0 -3px 0 var(--oranje); }
.tpr .l-suite-sectie .l-module[aria-pressed="true"] .iconen { background: rgb(253, 238, 226); }
.tpr .l-suite-sectie .l-sap i { width: 2px; height: 30px; background: repeating-linear-gradient(to bottom, var(--oranje) 0 4px, transparent 4px 8px); }
.tpr .l-suite-sectie .l-sap i::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -5px; border-width: 5px 5px 0px; border-style: solid solid none; border-right-color: transparent; border-left-color: transparent; border-image: none; border-bottom-color: currentcolor; border-top-color: var(--oranje); }
.tpr .l-suite-sectie .l-sap i { margin-top: 10px; }
.tpr .l-suite-sectie .l-sap i::before { content: ""; position: absolute; left: 50%; top: -5px; margin-left: -5px; border-width: 0px 5px 5px; border-style: none solid solid; border-right-color: transparent; border-left-color: transparent; border-image: none; border-top-color: currentcolor; border-bottom-color: var(--oranje); }
.tpr .l-suite-sectie .l-sap img { border: 0px; box-shadow: rgba(31, 39, 46, 0.45) 0px 8px 18px -10px; }
.tpr .l-suite-sectie .l-sap > div { position: relative; }
.tpr .l-suite-sectie .l-sap > div::before { content: ""; position: absolute; left: 50%; top: 10px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--oranje); opacity: 0; }
.tpr .l-suite-sectie .l-sap.inbeeld > div::before { animation: 3.2s ease-in-out 0s infinite normal none running sapa-pak, 1.1s ease-out 0s infinite normal none running sapa-ring; }
@keyframes sapa-ring {    0% { box-shadow: rgba(232, 119, 34, 0.5) 0px 0px 0px 0px; }   100% { box-shadow: rgba(232, 119, 34, 0) 0px 0px 0px 7px; } }
.tpr .l-suite-sectie .l-sap.inbeeld > div:nth-child(2)::before { animation-delay: 1.6s; }
@keyframes sapa-pak {    0% { top: 8px; opacity: 0; }   8% { opacity: 1; }   40% { top: 34px; opacity: 1; }   48%, 52% { top: 34px; opacity: 0; }   60% { opacity: 1; }   92% { top: 8px; opacity: 1; }   100% { top: 8px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.tpr .l-suite-sectie .l-sap > div::before { display: none; }
}
.tpr .l-suite-sectie .l-uitleg { background: rgb(255, 255, 255); box-shadow: rgba(31, 39, 46, 0.4) 0px 26px 54px -30px; }
@media (prefers-reduced-motion: reduce) {
.tpr .l-suite-sectie .l-module, .tpr .l-suite-sectie .l-module[aria-pressed="true"] { transform: none; }
.tpr .l-module, .tpr .l-uitleg, .tpr .l-sap i { transition: none; }
}
.tpr .l-suite-sectie .l-module[aria-pressed="true"] { transform: none; background: rgb(255, 246, 238); border-color: rgb(244, 201, 166); box-shadow: none; }
.tpr .l-suite-sectie .l-module[aria-pressed="true"] .iconen { background: rgb(255, 255, 255); }
.tpr .l-suite-sectie .l-module[aria-pressed="true"]::before { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.tpr .l-suite-sectie .l-kader .kader-label { display: flex; align-items: center; gap: 8px; }
.tpr .l-suite-sectie .l-kader .kader-label { border-bottom-color: rgb(207, 230, 215); color: rgb(33, 115, 70); background: rgb(227, 241, 232); }
.tpr .l-suite-sectie .l-suite { grid-template-columns: minmax(0px, 1.6fr) minmax(0px, 1fr); gap: 32px; }
.tpr .l-suite-sectie .l-module { padding-inline: 13px; }
.tpr .l-suite-sectie .l-module .msub { font-size: 13px; line-height: 18px; }
.tpr .l-suite-sectie .l-modules { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.tpr .l-suite-sectie .l-sap { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.tpr .l-suite-sectie .l-sap > div:nth-child(1) { grid-column: 2; }
.tpr .l-module-ew { border-style: dashed !important; }
.tpr .l-module-ew .ew-tag { position: absolute; top: -9px; left: 12px; background: var(--oranje); color: rgb(255, 255, 255); font: 700 10px/1 var(--nav); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 6px; }
.tpr .l-module-ew::after { content: ""; position: absolute; right: -12px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--oranje); border-right: 2px solid var(--oranje); transform: rotate(45deg); z-index: 1; }
@media (max-width: 1100px) {
.tpr .l-suite-sectie .l-suite { grid-template-columns: minmax(0px, 1fr); }
}
@media (max-width: 760px) {
.tpr .l-suite-sectie .l-modules { grid-template-columns: minmax(0px, 1fr); }
.tpr .l-module-ew::after { inset: auto auto -13px 50%; margin: 0px 0px 0px -5px; transform: rotate(135deg); }
}
.tpr .l-suite { display: grid; grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1fr); gap: 40px; align-items: stretch; }
.tpr .l-kader { position: relative; border: 3px solid var(--donker); padding: 30px 24px 24px; background: rgb(255, 255, 255); }
.tpr .l-kader .kader-label { position: absolute; top: -13px; left: 18px; background: rgb(255, 255, 255); padding: 0px 8px; font: 600 12px var(--nav); letter-spacing: 0.08em; text-transform: uppercase; color: var(--donker); display: flex; align-items: center; gap: 6px; }
.tpr .l-kader .kader-label img { width: 22px; height: 22px; }
.tpr .l-modules { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px; }
.tpr .l-module { border: 1px solid var(--lijn); background: var(--grijs); padding: 18px 16px; text-align: left; cursor: pointer; font: inherit; color: var(--txt); display: flex; flex-direction: column; gap: 10px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.tpr .l-module:hover { border-color: var(--oranje); }
.tpr .l-module[aria-pressed="true"] { background: rgb(255, 255, 255); border-color: var(--oranje); box-shadow: 0 0 0 2px var(--oranje) inset; }
.tpr .l-module .iconen { display: flex; gap: 6px; }
.tpr .l-module .iconen img { width: 30px; height: 30px; }
.tpr .l-module .mnaam { font-weight: 700; font-size: 18px; line-height: 24px; color: var(--donker); }
.tpr .l-module[aria-pressed="true"] .mnaam { color: var(--oranje); }
.tpr .l-module .msub { font-size: 14px; line-height: 20px; color: var(--txt-muted); }
.tpr .l-sap { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px; padding: 0px 27px; margin-top: 0px; }
.tpr .l-sap div { display: flex; flex-direction: column; align-items: center; }
.tpr .l-sap i { width: 2px; height: 26px; background: var(--oranje); display: block; }
.tpr .l-sap img { height: 46px; width: auto; border: 1px solid var(--lijn); padding: 6px 10px; background: rgb(255, 255, 255); }
.tpr .l-uitleg { background: var(--grijs); padding: 32px 34px; }
.tpr .l-uitleg[hidden] { display: none; }
.tpr .l-uitleg .voor { font: 600 12px var(--nav); letter-spacing: 0.08em; text-transform: uppercase; color: var(--oranje); margin-bottom: 6px; }
.tpr .l-uitleg h3 { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--donker); margin-bottom: 10px; }
.tpr .l-uitleg .flow { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0px, 1fr); gap: 0px; margin: 28px 0px 24px; counter-reset: st 0; background: none; border: 0px; align-items: start; }
.tpr .l-uitleg .flow i { display: none; }
.tpr .l-uitleg .flow span { counter-increment: st 1; position: relative; background: none; border: 0px; padding: 38px 8px 0px 0px; text-align: left; font: 600 13px/18px var(--nav); color: var(--donker); }
.tpr .l-uitleg .flow span::before { content: counter(st); position: absolute; top: 0px; left: 0px; text-align: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(255, 255, 255); border: 2px solid var(--oranje); color: var(--oranje); font: 700 12px/24px var(--nav); z-index: 1; }
.tpr .l-uitleg .flow span::after { content: ""; position: absolute; top: 13px; left: 34px; right: 6px; height: 2px; background: rgb(244, 201, 166); }
.tpr .l-uitleg .flow span:last-child::after { display: none; }
.tpr .l-uitleg .flow span:last-child::before { background: var(--oranje); color: rgb(255, 255, 255); }
.tpr .l-uitleg[data-uitleg="ew"] .flow span:last-child::after, .tpr .l-uitleg[data-uitleg="glsu"] .flow span:last-child::after { display: block; content: ""; top: 17px; left: 20px; right: auto; width: 15px; height: 15px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / 10px auto no-repeat rgb(62, 196, 109); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; z-index: 2; }
.tpr .l-uitleg .flow.los { display: flex; flex-wrap: wrap; gap: 8px; }
.tpr .l-uitleg .flow.los span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; background: var(--grijs); }
.tpr .l-uitleg .flow.los span::before, .tpr .l-uitleg .flow.los span::after, .tpr .l-uitleg .flow.los span small { display: none; }
.tpr .l-uitleg .flow.los img { display: block; width: 20px; height: 20px; }
.tpr .l-uitleg .flow.los b { font-weight: 600; }
.tpr .l-uitleg ul { list-style: none; padding: 0px; margin: 14px 0px 0px; }
.tpr .l-uitleg li { padding-left: 26px; position: relative; margin-bottom: 6px; line-height: 27px; }
.tpr .l-uitleg li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 11px; height: 6px; border-left: 2.5px solid var(--oranje); border-bottom: 2.5px solid var(--oranje); transform: rotate(-45deg); }
.tpr .l-gebieden-grid { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); margin-top: 10px; }
.tpr .l-gebied { padding: 6px 26px 10px; border-left: 1px solid rgb(195, 202, 208); }
.tpr .l-gebied:first-child { border-left: 0px; }
.tpr .l-gebied .ic { display: block; width: 58px; height: 58px; margin: 0px auto 18px; }
.tpr .l-inzet .l-gebied .ic svg { width: 58px; height: 58px; stroke: var(--donker); stroke-width: 1.6; transition: stroke 0.25s, transform 0.25s; }
.tpr .l-gebied:hover .ic svg { stroke: var(--oranje); transform: translateY(-3px); }
.tpr .l-gebied h3 { text-align: center; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--oranje); margin: 0px 0px 18px; }
.tpr .l-gebied ul { display: grid; gap: 10px; }
.tpr .l-gebied li { font-size: 15px; line-height: 22px; padding-left: 16px; }
.tpr .l-gebied li::before { width: 5px; height: 5px; border-radius: 50%; top: 9px; }
@media (max-width: 1100px) {
.tpr .l-gebieden-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); row-gap: 36px; }
.tpr .l-gebied:nth-child(4) { border-left: 0px; }
.tpr .l-gebied h3 { min-height: 0px; }
}
@media (max-width: 600px) {
.tpr .l-gebieden-grid { grid-template-columns: minmax(0px, 1fr); row-gap: 0px; }
.tpr .l-gebied, .tpr .l-gebied:nth-child(4) { border-left: 0px; border-top: 1px solid rgb(195, 202, 208); padding: 24px 0px; display: grid; grid-template-columns: 52px minmax(0px, 1fr); column-gap: 16px; }
.tpr .l-gebied:first-child { border-top: 0px; }
.tpr .l-gebied .ic, .tpr .l-inzet .l-gebied .ic svg { width: 44px; height: 44px; margin: 0px; grid-row: span 2; }
.tpr .l-gebied h3 { text-align: left; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.tpr .l-gebied .ic svg { transition: none; }
.tpr .l-gebied:hover .ic svg { transform: none; }
}
.tpr .l-inzet { background: var(--grijs); }
.tpr .l-inzet .l-gebieden-grid { background: rgb(255, 255, 255); padding: 36px 10px 30px; box-shadow: rgba(58, 71, 81, 0.08) 0px 12px 34px; }
.tpr .l-inzet .ic svg { width: 24px; height: 24px; fill: none; stroke: var(--oranje); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tpr .l-inzet ul { list-style: none; margin: 0px; padding: 0px; }
.tpr .l-inzet li { position: relative; padding-left: 18px; font-size: 15px; line-height: 22px; }
.tpr .l-inzet li::before { content: ""; position: absolute; left: 0px; top: 8px; width: 7px; height: 7px; background: var(--oranje); }
.tpr .l-inzet .l-gebied { border-left-color: rgb(230, 233, 236); }
.tpr .l-inzet .l-gebied li { color: var(--txt-muted); }
.tpr .l-inzet .l-gebied li::before { width: 5px; height: 5px; top: 9px; opacity: 0.8; }
.tpr .l-faq { width: 100%; border-top: 1px solid var(--lijn); }
.tpr .l-faq details { border-bottom: 1px solid var(--lijn); }
.tpr .l-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; font-size: 19px; line-height: 28px; font-weight: 600; color: var(--donker); transition: color 0.2s; }
.tpr .l-faq summary::-webkit-details-marker { display: none; }
.tpr .l-faq summary::after { content: ""; flex: 0 0 auto; width: 24px; height: 24px; background: var(--oranje); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center center / contain no-repeat; transition: transform 0.3s; }
.tpr .l-faq summary:hover { color: var(--oranje); }
.tpr .l-faq details[open] summary { padding-bottom: 12px; }
.tpr .l-faq details[open] summary::after { transform: rotate(180deg); }
.tpr .l-faq details p { margin: 0px; padding: 0px 32px 28px; max-width: 960px; color: var(--txt); animation: 0.3s ease 0s 1 normal both running faq-in; }
@keyframes faq-in {    0% { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 760px) {
.tpr .l-faq summary { padding: 22px 8px; font-size: 17px; line-height: 26px; }
.tpr .l-faq details p { padding: 0px 8px 22px; }
}
@media (prefers-reduced-motion: reduce) {
.tpr .l-faq summary::after { transition: none; }
.tpr .l-faq details p { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 1100px) {
.tpr .l-suite { grid-template-columns: 1fr; }
.tpr .l-voordelen { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 760px) {
.tpr .l-sectie { padding-block: 56px; }
.tpr .l-hero .pr-c, .tpr .l-chat, .tpr .race, .tpr .l-stappen, .tpr .l-voordelen { grid-template-columns: 1fr; }
.tpr .l-hero h2 { font-size: 36px; line-height: 42px; }
.tpr .l-kop h2 { font-size: 28px; line-height: 36px; }
.tpr .l-modules { grid-template-columns: 1fr; }
.tpr .l-sap { display: flex; justify-content: center; gap: 30px; padding: 0px; }
.tpr .sapwin .velden { grid-template-columns: 96px minmax(0px, 1fr); }
}
.tpr .l-speler-wrap { position: relative; }
.tpr .l-speler { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0px; padding: 0px; cursor: pointer; border-radius: 12px; overflow: hidden; text-align: left; font: inherit; color: rgb(255, 255, 255); background: rgb(31, 39, 46); box-shadow: rgba(31, 39, 46, 0.45) 0px 30px 60px -20px, rgba(58, 71, 81, 0.12) 0px 0px 0px 1px; max-width: 100%; }
.tpr .l-poster { position: absolute; inset: 0px; display: block; overflow: hidden; background: linear-gradient(135deg, rgb(23, 29, 34) 0%, rgb(35, 44, 51) 55%, rgb(51, 64, 74) 100%); }
.tpr .l-poster::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(0deg, rgba(23, 29, 34, 0.7), transparent 45%); }
.tpr .l-poster .tekst { position: absolute; left: 7%; top: 13%; right: 55%; z-index: 2; }
.tpr .l-poster .boven { display: block; font: 600 12px var(--nav); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oranje); margin-bottom: 10px; }
.tpr .l-poster .groot { display: block; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; font-weight: 700; }
.tpr .l-poster .schot { position: absolute; display: block; max-width: none; width: 50%; right: -4%; top: 14%; transform: rotate(-3deg); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.6) 0px 24px 50px -10px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px; }
.tpr .l-play { position: absolute; left: 20%; top: 64%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: var(--oranje); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 2; box-shadow: rgba(232, 119, 34, 0.2) 0px 6px 18px; transition: transform 0.25s, background 0.25s, box-shadow 0.25s; font: 600 15px var(--nav); white-space: nowrap; }
.tpr .l-play svg { width: 30px; height: 30px; fill: currentcolor; margin-left: 4px; flex: 0 0 auto; }
.tpr .l-play .knop-tekst { display: none; }
.tpr .l-speler:hover .l-play, .tpr .l-speler:focus-visible .l-play { transform: translate(-50%, -50%) scale(1.03); }
.tpr .l-speler-wrap { --pm-s: 54px; --pm-x: 83%; --pm-y: 58%; }
.tpr .pr-merk { position: absolute; left: var(--pm-x); top: var(--pm-y); z-index: 1; display: block; width: var(--pm-s); height: var(--pm-s); transform: translate(-50%, -50%) rotate(-3deg); pointer-events: none; filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 6px 14px); }
.tpr .pr-merk img { display: block; width: 100%; height: 100%; }
.tpr .pr-merk b { display: none; }
.tpr .modal-video[hidden] { display: none; }
.tpr .modal-yt { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0px; background: rgb(0, 0, 0); box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 60px; }
@media (max-width: 760px) {
.tpr .pr-merk { width: calc(var(--pm-s) * .7); height: calc(var(--pm-s) * .7); }
}
.tpr .l-speler-wrap.speelt .l-speler { cursor: default; }
.tpr .l-speler-wrap.speelt .l-poster, .tpr .l-speler-wrap.speelt .l-play, .tpr .l-speler-wrap.speelt .l-balk { display: none; }
.tpr .l-play .oog, .tpr .l-poster .oog-groot, .tpr .knop-tekst .oog-klein { display: none; }
.tpr .l-balk { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 46px; border-radius: 8px; background: rgba(20, 26, 31, 0.72); backdrop-filter: blur(8px); display: flex; align-items: center; gap: 16px; padding: 0px 16px; z-index: 2; color: rgb(255, 255, 255); }
.tpr .l-balk svg { width: 20px; height: 20px; fill: none; stroke: currentcolor; stroke-width: 2; flex: 0 0 auto; opacity: 0.9; }
.tpr .l-balk svg.vol { fill: currentcolor; stroke: none; }
.tpr .l-balk .tijd { font: 600 14px var(--nav); font-variant-numeric: tabular-nums; opacity: .9; }
.tpr .l-balk .spoor { flex: 1 1 0%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); position: relative; }
.tpr .l-balk .spoor::before { content: ""; position: absolute; left: 0px; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--oranje); transform: translate(-30%, -50%); }
@media (max-width: 760px) {
.tpr .l-balk { gap: 10px; padding: 0px 10px; height: 40px; }
.tpr .l-balk .opt { display: none; }
.tpr .l-poster .boven { font-size: 10px; margin-bottom: 6px; }
.tpr .l-poster .groot { font-size: 22px; }
.tpr .l-play { width: 64px; height: 64px; top: 58%; }
}
@media (prefers-reduced-motion: reduce) {
.tpr .l-speler-wrap .l-play, .tpr .l-speler-wrap .l-play::before { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 1000px) {
.tpr .flow { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (max-width: 760px) {
.tpr .flow { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tpr * { transition: none !important; }
}
.tpr .l-waarom-pr .via-tentive { margin-top: 36px; }
.tpr .rs-blok { margin-top: 22px; padding: 20px 0px 4px; border-top: 1px solid var(--lijn); text-align: center; animation: 0.45s ease 0s 1 normal both running ru-in; }
.tpr .rs-blok .rs1 { margin: 0px; padding: 0px; border: 0px; animation: auto ease 0s 1 normal none running none; }
.tpr .race-knop { display: inline-block; margin-top: 14px; font: 600 15px/1.2 var(--font); padding: 13px 22px; border: 2px solid var(--oranje); background: var(--oranje); color: rgb(255, 255, 255); }
.tpr .race-knop:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); color: rgb(255, 255, 255); }
.tpr .rs-blok[data-k="2"] .race-knop { background: transparent; color: var(--oranje); font-size: 15px; font-weight: 600; line-height: 1.2; padding: 14px 18px; margin-top: 16px; animation: 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s 1 normal both running knop-in; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.tpr .rs-blok[data-k="2"] .race-knop:focus-visible { outline: 2px solid var(--oranje); outline-offset: 3px; }
@keyframes knop-in {    0% { opacity: 0; transform: translateY(8px); }   100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.tpr .rs-blok[data-k="2"] .race-knop { animation: auto ease 0s 1 normal none running none; }
}
.tpr .rs-blok[data-k="2"] .race-knop:hover { background: var(--oranje); color: rgb(255, 255, 255); }
.tpr .rs-blok[data-k="3"] .race-knop { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0px; padding: 4px 0px; color: var(--oranje); font-size: 19px; font-weight: 700; text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color 0.2s ease-out, color 0.2s ease-out; }
.tpr .rs-blok[data-k="3"] .race-knop:hover { background: none; color: var(--oranje-donker); text-decoration-color: currentcolor; }
.tpr .rs-blok[data-k="3"] .race-knop:focus-visible { outline: 2px solid var(--oranje); outline-offset: 4px; }
.tpr .race-knop svg { display: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: currentcolor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease-out; }
.tpr .rs-blok[data-k="3"] .race-knop svg { display: block; }
.tpr .rs-blok[data-k="3"] .race-knop:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.tpr .race-knop svg { transition: none; }
}
.tpr .rs-blok[data-k="4"] .race-knop { margin-top: 0px; padding: 9px 16px; font-size: 14px; background: transparent; color: var(--oranje); }
.tpr .rs-blok[data-k="4"] .race-knop:hover { background: var(--oranje); color: rgb(255, 255, 255); }
.tpr .rs-blok[data-k="5"] .race-knop { background: var(--donker); border-color: var(--donker); }
.tpr .rs-blok[data-k="5"] .race-knop:hover { background: var(--donker-2); border-color: var(--donker-2); }
@media (prefers-reduced-motion: reduce) {
.tpr .rs-blok { animation: auto ease 0s 1 normal none running none; }
}
.tpr .via-tentive { text-align: center; color: var(--donker); }
.tpr .via-tentive .via-kop { margin: 0px; font-size: 21px; line-height: 30px; font-weight: 600; color: var(--donker); }
.tpr .via-tentive ul { list-style: none; padding: 0px; margin: 16px 0px 0px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tpr .via-tentive li { position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid var(--lijn); background: rgb(255, 255, 255); padding: 9px 16px 9px 40px; font-size: 15px; line-height: 22px; text-align: left; color: var(--txt); }
.tpr .via-tentive li::before { content: ""; position: absolute; left: 16px; top: 15px; width: 12px; height: 7px; border-left: 2.5px solid var(--oranje); border-bottom: 2.5px solid var(--oranje); transform: rotate(-45deg); }
.tpr .via-tentive img { display: block; height: auto; }
.tpr .via-logo-chip { display: none !important; }
.tpr .via-tentive[data-v="2"] .via-logo-chip { display: flex !important; padding-left: 16px; }
.tpr .via-tentive[data-v="2"] .via-logo-chip::before { display: none; }
.tpr .via-tentive[data-v="2"] .via-logo-chip img { width: 118px; }
.tpr .via-tentive[data-v="2"] .via-logo-chip span { padding-left: 12px; border-left: 1px solid var(--lijn); }
@media (max-width: 760px) {
.tpr .via-tentive li { width: 100%; }
.tpr .via-tentive[data-v="2"] .via-logo-chip { flex-direction: column; align-items: flex-start; gap: 6px; }
.tpr .via-tentive[data-v="2"] .via-logo-chip span { padding-left: 0px; border-left: 0px; }
}

/* Gravity Forms (formulier 20, gravity-theme) in de stijl van de mockup */
.tpr .pr-form .gform_wrapper.gravity-theme { margin: 0; }
.tpr .pr-form .gform_wrapper.gravity-theme .gform_heading { display: none; }
.tpr .pr-form .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 18px; grid-column-gap: 20px; }
.tpr .pr-form .gform_wrapper.gravity-theme .gfield_label { display: block; font-family: var(--font); font-weight: 600; font-size: 15px; line-height: 22px; color: var(--txt); margin-bottom: 6px; padding: 0; }
.tpr .pr-form .gform_wrapper.gravity-theme .gfield_required { color: var(--oranje); font-weight: 400; font-size: 13px; font-style: italic; margin-left: 6px; }
.tpr .pr-form .gform_wrapper.gravity-theme input[type=text], .tpr .pr-form .gform_wrapper.gravity-theme input[type=email], .tpr .pr-form .gform_wrapper.gravity-theme input[type=tel], .tpr .pr-form .gform_wrapper.gravity-theme textarea { width: 100%; font-family: var(--font); font-size: 16px; line-height: 24px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 0; background: var(--grijs); color: var(--txt); box-shadow: none; }
.tpr .pr-form .gform_wrapper.gravity-theme input:focus-visible, .tpr .pr-form .gform_wrapper.gravity-theme textarea:focus-visible { outline: 3px solid var(--oranje); outline-offset: 0; background: #fff; }
/* het thema zet .gform_wrapper .gform_footer op margin-top: 0 !important */
.tpr .pr-form .gform_wrapper.gravity-theme .gform_footer { margin: 22px 0 0 !important; padding: 0; }
.tpr .pr-form .gform_wrapper.gravity-theme .gform_button { display: inline-block; font-family: var(--font); font-weight: 600; font-size: 15px; line-height: 1.2; padding: 14px 18px; border: 2px solid var(--oranje); border-radius: 0; background: var(--oranje); color: #fff; cursor: pointer; transition: background-color .2s ease-out, border-color .2s ease-out; }
.tpr .pr-form .gform_wrapper.gravity-theme .gform_button:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); }
.tpr .pr-form .gform_wrapper.gravity-theme .gform_button:focus-visible { outline: 3px solid var(--oranje); outline-offset: 2px; }
.tpr .pr-form .gform_wrapper.gravity-theme .validation_message, .tpr .pr-form .gform_wrapper.gravity-theme .gform_validation_errors { font-family: var(--font); font-size: 14px; line-height: 21px; }
.tpr .pr-form .gform_confirmation_message { font-size: 17px; line-height: 28px; padding: 14px 18px; background: var(--oranje-licht); }
.tpr .pr-form .privacy { font-size: 13px; line-height: 20px; color: var(--txt-muted); margin: 16px 0 0; }
.tpr .pr-form .privacy a { text-decoration: underline; text-underline-offset: 3px; }

/* Engelse versie: vaste teksten in pseudo-elementen */
.tpr.tpr-en .kl3 .kl3-balken > div:not(.pr) em::after { content: " manual"; }
.tpr.tpr-en #demo-race.snel .race .sapwin::after, .tpr.tpr-en #demo-race.snel .race .xl::after { content: "Accelerated"; }

/* mobiel: demoblok in één kolom (stond in de mockup samen met de formulierregels) */
@media (max-width: 760px) {
.tpr .demo-grid { grid-template-columns: 1fr; }
}

/* Het thema zet formuliervelden en de knop met !important (layout.css r.1176-1177, 1541); hier terug naar de mockup */
.tpr .pr-form .gform_wrapper.gravity-theme input[type=text], .tpr .pr-form .gform_wrapper.gravity-theme input[type=email], .tpr .pr-form .gform_wrapper.gravity-theme input[type=tel] { padding: 10px 12px !important; margin: 0 !important; text-indent: 0 !important; line-height: 29px; border: 1px solid var(--lijn) !important; }
.tpr .pr-form .gform_wrapper.gravity-theme .gform_button { padding: 14px 18px !important; border: 2px solid var(--oranje) !important; }
.tpr .pr-form .gform_wrapper.gravity-theme .gform_button:hover { border-color: var(--oranje-donker) !important; background: var(--oranje-donker) !important; }
.tpr .pr-form .gform_wrapper.gravity-theme .gform_footer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tpr .pr-form .gform_footer .privacy { margin: 0; flex: 1 1 220px; }
.tpr .pr-form .gform_footer .privacy a { color: var(--oranje) !important; }
.tpr .pr-form .gform_wrapper.gravity-theme .gfield_required .gfield_required { margin-left: 0; }

/* =====================================================================
   Native Gutenberg-variant: core-blokken met dezelfde klassen als de mockup.
   Alleen regels voor HTML die core-blokken anders opbouwen.
   ===================================================================== */
/* klassiek thema: core/group krijgt een binnencontainer; laat de kinderen meedoen in grid/flex van de groep */
.tpr .wp-block-group > .wp-block-group__inner-container { display: contents; }
.tpr figure.wp-block-image { margin: 0; }
.tpr .wp-block-image img { display: block; }
.tpr .wp-block-button__link { display: inline-block; font-family: var(--font); font-weight: 600; font-size: 15px; line-height: 1.2; padding: 14px 18px; border: 2px solid var(--oranje); border-radius: 0; background: var(--oranje); color: #fff; text-decoration: none; }
.tpr .wp-block-button__link:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); color: #fff; }
.tpr .wp-block-buttons.knoppen { gap: 12px; }
/* hero */
.tpr .l-hero h2 strong { color: var(--oranje); font-weight: inherit; }
.tpr .l-partner p { margin: 0; }
/* herken je dit */
.tpr .l-chat p.kolomkop { margin: 0; }
.tpr .l-chat .kolomkop img { display: block; }
.tpr .l-chat-slot strong { color: var(--oranje); font-weight: 600; }
/* waarom: iconen als afbeelding */
.tpr .l-voordeel figure.ic img { width: 56px; height: 56px; }
.tpr .l-waarom-pr .l-voordeel figure.ic img { width: 38px; height: 38px; }
.tpr .via-tentive li.via-chip-logo { padding-left: 16px; }
.tpr .via-tentive li.via-chip-logo::before { display: none; }
.tpr .via-tentive li.via-chip-logo img { width: 129px !important; height: auto; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--lijn); box-sizing: border-box; }
@media (max-width: 760px) {
.tpr .via-tentive li.via-chip-logo { flex-direction: column; align-items: flex-start; gap: 6px; }
.tpr .via-tentive li.via-chip-logo img { width: 118px !important; padding-right: 0; margin-right: 0; border-right: 0; }
}
/* automatiseer elk proces: iconen als afbeelding */
.tpr .l-inzet .l-gebied figure.ic img { width: 58px; height: 58px; transition: transform .25s; }
.tpr .l-gebied:hover figure.ic img { transform: translateY(-3px); }
@media (max-width: 600px) { .tpr .l-inzet .l-gebied figure.ic img { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tpr .l-gebied figure.ic img { transition: none; } .tpr .l-gebied:hover figure.ic img { transform: none; } }
/* rekenaar */
.tpr .tcv p.eyebrow { margin-top: 0; }
.tpr .tc3 .uitkomst .uk-label { font-size: 15px; line-height: inherit; color: #fff; margin: 6px 0 0; }
.tpr .tc3 .uitkomst .uk-noot { font-size: 12px; line-height: 17px; color: #9aa6b0; margin: 10px 0 0; max-width: 240px; }
.tpr .rv-knop .wp-block-button__link { white-space: nowrap; }
/* excel-suite: uitleg als gewone blokken; tonen per klik (JS) */
.tpr .l-uitleg p.voor { margin: 0 0 6px; }
.tpr .l-suite > .wp-block-group > .l-uitleg:not(.uitleg-pr) { display: none; }
.tpr .l-suite-sectie.js-klik .l-suite > .wp-block-group > .l-uitleg { display: block; }
.tpr .l-suite-sectie.js-klik .l-suite > .wp-block-group > .l-uitleg[hidden] { display: none; }
.tpr .l-uitleg ul.flow { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0px, 1fr); gap: 0px; margin: 28px 0px 24px; counter-reset: st 0; background: none; border: 0px; align-items: start;  list-style: none; padding: 0; }
.tpr .l-uitleg ul.flow li { counter-increment: st 1; position: relative; background: none; border: 0px; padding: 38px 8px 0px 0px; text-align: left; font: 600 13px/18px var(--nav); color: var(--donker);  }
.tpr .l-uitleg ul.flow li::before { content: counter(st); position: absolute; top: 0px; left: 0px; text-align: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(255, 255, 255); border: 2px solid var(--oranje); color: var(--oranje); font: 700 12px/24px var(--nav); z-index: 1;  transform: none; }
.tpr .l-uitleg ul.flow li::after { content: ""; position: absolute; top: 13px; left: 34px; right: 6px; height: 2px; background: rgb(244, 201, 166);  }
.tpr .l-uitleg ul.flow li:last-child::after { display: none;  }
.tpr .l-uitleg ul.flow li:last-child::before { background: var(--oranje); color: rgb(255, 255, 255);  }
.tpr .l-uitleg.uitleg-ew ul.flow li:last-child::after, .tpr .l-uitleg.uitleg-glsu ul.flow li:last-child::after { display: block; content: ""; top: 17px; left: 20px; right: auto; width: 15px; height: 15px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / 10px auto no-repeat rgb(62, 196, 109); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; z-index: 2;  }
.tpr .l-uitleg ul.flow.los { display: flex; flex-wrap: wrap; gap: 8px;  }
.tpr .l-uitleg ul.flow.los li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; background: var(--grijs);  }
.tpr .l-uitleg ul.flow.los li::before, .tpr .l-uitleg ul.flow.los li::after { display: none;  }
.tpr .l-uitleg ul.flow.los img { display: block; width: 20px; height: 20px;  }
.tpr .l-uitleg ul.flow.los strong { font-weight: 600;  }
/* demo */
.tpr :is(#demo, .demo-sectie) p.eyebrow { margin: 0 0 10px; }
.tpr .cta-persoon p.naam, .tpr .cta-persoon p.contact { margin: 0; }
.tpr .cta-persoon p.vraag { margin: 0 0 2px; }
.tpr .cta-persoon.ep-10 { position: relative; }
.tpr .cta-persoon.ep-10 img { filter: none; box-shadow: none; }
.tpr .cta-persoon.ep-10::after { content: ""; position: absolute; left: 68px; top: 96px; width: 14px; height: 14px; border-radius: 50%; background: rgb(62, 196, 109); box-shadow: 0 0 0 3px var(--donker); }
@media (max-width: 760px) { .tpr .cta-persoon.ep-10::after { left: 52px; top: 80px; } }
.tpr .l-uitleg ul.flow li { margin: 0; }
/* het thema geeft elke <p> een vaste kleur en grootte; deze stonden in de mockup in een div en erven */
.tpr .l-partner p { font-size: inherit; line-height: inherit; color: inherit; }
.tpr .cta-persoon p.naam { color: inherit; }
/* Gravity Forms foutmelding: de samenvatting is een <h2>; niet de witte demokop-stijl */
.tpr :is(#demo, .demo-sectie) .pr-form .gform_validation_errors { margin: 0 0 22px; padding: 12px 16px; border: 1px solid #c02b0a; border-radius: 0; background: #fff6f5; box-shadow: none; }
.tpr :is(#demo, .demo-sectie) .pr-form .gform_validation_errors h2,
.tpr :is(#demo, .demo-sectie) .pr-form .gform_validation_errors .gform_submission_error { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font); font-size: 15px; line-height: 22px; font-weight: 600; color: #c02b0a; }
.tpr :is(#demo, .demo-sectie) .pr-form .gform_validation_errors .gform-icon { display: none; }
.tpr .pr-form .gform_wrapper.gravity-theme .gfield_validation_message, .tpr .pr-form .gform_wrapper.gravity-theme .validation_message { margin-top: 6px; padding: 6px 12px; border: 0; border-left: 3px solid #c02b0a; background: #fff6f5; color: #c02b0a; font-size: 14px; line-height: 21px; }
.tpr .pr-form .gform_wrapper.gravity-theme .gfield_error input[type=text], .tpr .pr-form .gform_wrapper.gravity-theme .gfield_error input[type=email], .tpr .pr-form .gform_wrapper.gravity-theme .gfield_error input[type=tel] { border-color: #c02b0a !important; }
.tpr .pr-form .gform_wrapper.gravity-theme .gfield_error .gfield_label { color: var(--txt); }

/* Automatiseer elk SAP-proces: losse kaarten, icoon en titel gecentreerd, oranje streepje onder de titel */
.tpr .l-inzet .l-gebieden-grid { background: none; box-shadow: none; padding: 0; gap: 16px; }
.tpr .l-inzet .l-gebied { position: relative; background: #fff; border: 0; padding: 30px 24px 28px; box-shadow: 0 10px 28px rgba(58,71,81,.07); }
.tpr .l-inzet .l-gebied h3 { position: relative; color: var(--donker); text-align: center; padding-bottom: 14px; }
.tpr .l-inzet .l-gebied h3::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 28px; height: 3px; transform: translateX(-50%); background: var(--oranje); transition: width .25s; }
.tpr .l-inzet .l-gebied:hover h3::after { width: 56px; }
@media (max-width: 1100px) { .tpr .l-inzet .l-gebieden-grid { row-gap: 16px; } }
@media (max-width: 600px) {
.tpr .l-inzet .l-gebied, .tpr .l-inzet .l-gebied:nth-child(4), .tpr .l-inzet .l-gebied:first-child { border: 0; padding: 22px 20px; }
.tpr .l-inzet .l-gebied .ic { margin: 0; }
.tpr .l-inzet .l-gebied h3 { text-align: left; }
.tpr .l-inzet .l-gebied h3::after { left: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tpr .l-inzet .l-gebied h3::after { transition: none; } }
/* Video op mobiel: iframe vult het hele kader */
.tpr .l-speler .yt { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; border: 0; background: #000; }
/* Klantlogo's op mobiel kleiner, meer witruimte */
@media (max-width: 760px) {
.tpr .kl3-tab { padding: 20px 14px; }
.tpr .kl-logo { height: 30px; }
.tpr .kl3-tab .kl-logo img { max-height: 28px; max-width: 78%; }
}