.cp-blok {
--primair: #2934c4;
--primair-hover: #1f2596;
--accent: #4bb3ff;
--kop: #1f2937;
--muted: #5b6472;
--body: #f1f6fb;
--grijs: #f7f9fc;
--wit: #ffffff;
--lijn: #e5e7eb;
--groen: #10b981;
--r-knop: 8px;
--r-pill: 999px;
--r-kaart: 1.5rem;
--schaduw: 0 2px 12px rgba(0, 0, 0, .06);
--schaduw-hover: 0 12px 32px rgba(0, 0, 0, .12);
--schaduw-cta: 0 4px 12px rgba(41, 52, 196, .3);
--curve: cubic-bezier(0.22, 1, 0.36, 1);
--fh: var(--font-heading, 'Poppins', sans-serif);
--fb: var(--font-body, 'Inter', system-ui, sans-serif);
padding: 5rem 0;
color: var(--kop);
}
@media (min-width: 768px) {
.cp-blok {
padding: 7rem 0;
}
}
.cp-blok--wit {
background: var(--wit);
}
.cp-blok--grijs {
background: var(--grijs);
} .cp-blok--licht {
background: var(--body);
} .cp-kop {
max-width: 52rem;
margin-bottom: 3rem;
}
.cp-kop h2 {
font-family: var(--fh);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
color: var(--primair);
line-height: 1.12;
letter-spacing: -0.035em;
margin: 1rem 0 0;
}
.cp-kop h2 .cp-kern,
.cp-blok .cp-kern {
color: var(--color-accent-tekst);
}
.cp-lead {
font-size: 1.125rem;
line-height: 1.65;
color: var(--muted);
max-width: 44rem;
margin: 1rem 0 0;
} .cp-lead a {
color: var(--primair);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: color .2s var(--curve);
}
@media (hover: hover) {
.cp-lead a:hover {
color: var(--primair-hover);
}
}
.cp-blok h3,
.cp-blok h4 {
font-family: var(--fh);
line-height: 1.15;
margin: 0;
}
.cp-blok .cta {
display: inline-flex;
align-items: center;
gap: .4rem;
font-weight: 600;
color: var(--primair);
text-decoration: none;
}
.cp-blok .cta .pijl {
display: inline-block;
transition: transform .2s var(--curve);
}
@media (hover: hover) {
.cp-blok .cta:hover .pijl {
transform: translateX(4px);
}
} .cp-blok .scr {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 12px;
overflow: hidden;
font-family: var(--fb);
font-size: 12px;
line-height: 1.35;
color: var(--kop);
}
.cp-blok .chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #f3f4f6;
border-bottom: 1px solid var(--lijn);
}
.cp-blok .chrome i {
width: 9px;
height: 9px;
border-radius: 50%;
background: #d1d5db;
display: block;
}
.cp-blok .chrome .url {
margin-left: 8px;
flex: 1;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 6px;
padding: 2px 10px;
font-size: 11px;
color: var(--muted);
}
.cp-blok .tag {
display: inline-block;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
background: #eef2ff;
color: var(--primair);
} .cp-blok .tag.groen {
background: #ecfdf5;
color: #047857;
} .cp-blok .tag.grijs {
background: #f3f4f6;
color: var(--kop);
}  .cp-wijs-balk {
display: flex;
align-items: center;
gap: .9rem;
padding: .8rem 1rem;
background: var(--wit);
border: 1px solid var(--lijn);
border-bottom: 0;
border-radius: var(--r-kaart) var(--r-kaart) 0 0;
text-decoration: none;
position: relative;
z-index: 1;
transition: background .25s var(--curve);
}
.cp-wijs-balk .merk {
flex: none;
width: 40px;
height: 40px;
border-radius: 10px;
overflow: hidden;
display: grid;
place-items: center;
background: var(--grijs);
border: 1px solid var(--lijn);
}
.cp-wijs-balk .merk img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .cp-wijs-balk .merk b {
font-family: var(--fh);
font-weight: 700;
font-size: 1.1rem;
color: var(--primair);
}
.cp-wijs-balk .naam {
min-width: 0;
}
.cp-wijs-balk .naam h3 {
margin: 0;
font-size: 1.0625rem;
font-weight: 600;
color: var(--kop);
line-height: 1.3;
}
.cp-wijs-balk .adres {
display: block;
margin-top: 1px;
font-size: .8125rem;
color: var(--muted);
word-break: break-all;
}
.cp-wijs-balk .ga {
margin-left: auto;
flex: none;
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .85rem;
font-weight: 600;
color: var(--primair);
white-space: nowrap;
}
.cp-wijs-balk .pijl {
transition: transform .2s var(--curve);
}
@media (hover: hover) {
.cp-wijs-balk:hover {
background: #fbfcff;
}
.cp-wijs-balk:hover .pijl {
transform: translateX(4px);
}
}
.cp-wijs-balk:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
} @media (max-width: 1023px) {
.cp-wijs-balk .ga {
display: none;
}
} .cp-wijs-uitleg-kolom {
align-self: start;
padding-top: calc(48px + 1.6rem + 1px);
} .cp-wijs-intro {
margin: 0 0 1.5rem;
color: var(--muted);
}
.cp-wijs {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 3rem;
align-items: center;
margin-top: 3.5rem;
} .cp-wijs.spiegel {
grid-template-columns: 1fr 1.35fr;
}
.cp-wijs.spiegel .cp-wijs-scherm {
order: 2;
}
.cp-wijs-scherm {
position: relative;
} .cp-wijs-scherm::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-kaart);
background: rgba(41, 52, 196, .07);
transform: rotate(-2deg) translateX(10px) translateY(-10px);
} .cp-blok .kp2 {
position: relative;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 0 0 var(--r-kaart) var(--r-kaart);
box-shadow: var(--schaduw);
overflow: hidden;
font-size: 12px;
line-height: 1.4;
color: var(--kop);
display: flex;
flex-direction: column;
} .cp-blok .kp2 small,
.cp-blok .dkk2 small,
.cp-blok .mp small {
font-size: 11px;
}
.cp-blok .kp2 > .app {
flex: 1;
} .cp-wijs-scherm .kp2 {
min-height: 396px;
}
.cp-blok .kp2 .app {
display: grid;
grid-template-columns: 150px 1fr;
min-height: 340px;
}
.cp-blok .kp2 .zone {
position: relative;
transition: opacity .45s var(--curve);
}
.cp-blok .kp2 .zone::after {
content: '';
position: absolute;
inset: -4px;
border: 2px solid var(--primair);
border-radius: 12px;
opacity: 0;
transition: opacity .35s;
pointer-events: none;
}
.cp-wijs[data-act] .zone:not(.act) {
opacity: .35;
}
.cp-wijs[data-act] .zone.act::after {
opacity: 1;
}
.cp-blok .kp2 aside {
background: var(--grijs);
border-right: 1px solid var(--lijn);
padding: 14px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cp-blok .kp2 aside .zone {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.cp-blok .kp2 .logo {
font-family: var(--fh);
font-weight: 700;
font-size: 12px;
color: var(--primair);
}
.cp-blok .kp2 .inlog {
border: 1px solid var(--lijn);
background: var(--wit);
border-radius: var(--r-knop);
padding: 8px;
}
.cp-blok .kp2 .inlog b {
display: block;
font-size: 11px;
}
.cp-blok .kp2 .inlog small {
color: var(--muted);
font-size: 11px;
}
.cp-blok .kp2 .proj {
padding: 6px 8px;
border-radius: var(--r-knop);
}
.cp-blok .kp2 .proj.act {
background: var(--primair);
color: var(--wit);
}
.cp-blok .kp2 main {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.cp-blok .kp2 h4 {
margin: 0;
font-size: 13px;
font-weight: 600;
}
.cp-blok .kp2 .uitgelicht {
border: 1px solid var(--lijn);
border-radius: var(--r-knop);
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
background: var(--grijs);
}
.cp-blok .kp2 .uitgelicht b {
display: block;
}
.cp-blok .kp2 .uitgelicht small {
color: var(--muted);
}
.cp-blok .kp2 .docs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.cp-blok .kp2 .doc {
border: 1px solid var(--lijn);
border-radius: var(--r-knop);
padding: 9px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cp-blok .kp2 .doc b {
font-weight: 600;
}
.cp-blok .kp2 .doc small {
color: var(--muted);
font-size: 11px;
}
.cp-blok .kp2 .drop {
border: 1.5px dashed #c7d2fe;
border-radius: var(--r-knop);
padding: 12px;
text-align: center;
color: var(--primair);
background: rgba(41, 52, 196, .03);
}
.cp-blok .kp2 .drop b {
display: block;
margin-bottom: 2px;
}
.cp-blok .kp2 .drop small {
color: var(--muted);
} .cp-blok .hot {
all: unset;
position: absolute;
z-index: 2;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--primair);
color: var(--wit);
font-family: var(--fh);
font-weight: 700;
font-size: 11px;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: var(--schaduw-cta);
transition: transform .3s var(--curve);
}
.cp-blok .hot::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--accent);
opacity: 0;
animation: cp-puls 2.2s infinite;
}
.cp-blok .zone.act .hot {
transform: scale(1.15);
}
@media (hover: hover) {
.cp-blok .hot:hover {
transform: scale(1.15);
}
}
.cp-blok .hot:focus-visible {
outline: 2px solid var(--kop);
outline-offset: 2px;
}
@keyframes cp-puls {
0% {
transform: scale(.7);
opacity: .9;
}
70% {
transform: scale(1.25);
opacity: 0;
}
100% {
opacity: 0;
}
}
.cp-wijs-lijst {
list-style: none;
margin: 0;
padding: 0;
}
.cp-wijs-lijst li {
display: grid;
grid-template-columns: 2.2rem 1fr;
gap: .25rem 1rem;
padding: 1rem .5rem;
border-radius: var(--r-knop);
cursor: pointer;
transition: background .3s, transform .3s var(--curve);
}
.cp-wijs-lijst li.act {
background: rgba(41, 52, 196, .05);
transform: translateX(6px);
}
@media (hover: hover) {
.cp-wijs-lijst li:hover {
background: rgba(41, 52, 196, .05);
}
}
.cp-wijs-lijst .nr {
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: rgba(41, 52, 196, .08);
color: var(--primair);
font-family: var(--fh);
font-weight: 700;
font-size: .8rem;
display: grid;
place-items: center;
transition: background .3s, color .3s;
}
.cp-wijs-lijst li.act .nr {
background: var(--primair);
color: var(--wit);
} .cp-wijs-lijst h4 {
display: flex;
align-items: center;
gap: .75rem;
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--kop);
align-self: center;
transition: color .3s var(--curve);
}
.cp-wijs-lijst li.act h4 {
color: var(--primair);
}
.cp-wijs-lijst h4:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 4px;
border-radius: 4px;
}
.cp-wijs-lijst h4 .chev {
flex: none;
margin-left: auto;
width: .6rem;
height: .6rem;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform .35s var(--curve), border-color .3s;
}
.cp-wijs-lijst li.act h4 .chev {
transform: rotate(-135deg);
border-color: var(--primair);
} .cp-wijs-lijst .uitklap {
grid-column: 2;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .45s var(--curve);
}
.cp-wijs-lijst .uitklap > div {
display: grid;
gap: .25rem;
overflow: hidden;
visibility: hidden;
transition: visibility 0s linear .45s;
}
.cp-wijs-lijst li.act .uitklap {
grid-template-rows: 1fr;
}
.cp-wijs-lijst li.act .uitklap > div {
visibility: visible;
transition: visibility 0s;
}
.cp-wijs-lijst p {
margin: 0;
color: var(--muted);
font-size: .95rem;
line-height: 1.55;
}
.cp-wijs-lijst .cta {
margin-top: .4rem;
} .cp-blok .dkk2 {
--dkk-roze: #fd9f9d;
--dkk-donker: #2c3639;
--dkk-zand: #dcd7c9;
--dkk-creme: #f9f7f2;
--dkk-lijn: #e8e3df;
--dkk-muted: #6b6461;
background: var(--dkk-creme);
border-color: var(--dkk-lijn);
color: var(--dkk-donker);
}
.cp-blok .dkk2 .app {
grid-template-columns: 1fr;
}
.cp-blok .dkk2 h4 {
color: var(--dkk-donker);
}
.cp-blok .dkk2 .band {
display: flex;
gap: 12px;
align-items: center;
padding: 10px 16px;
background: var(--wit);
border-bottom: 1px solid var(--dkk-lijn);
color: var(--dkk-muted);
}
.cp-blok .dkk2 .band b {
font-family: var(--fh);
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--dkk-donker);
}
.cp-blok .dkk2 .band b::before {
content: '';
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--dkk-roze);
border: 2px solid var(--dkk-zand);
} .cp-blok .dkk2 .zone::after {
border-color: var(--dkk-donker);
}
.cp-blok .dkk2 .band .bewerk {
margin-left: auto;
padding: 4px 10px;
border-radius: 999px;
background: #047857;
color: var(--wit);
font-weight: 600;
font-size: 11px;
}
.cp-blok .dkk2 main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 14px 16px;
}
.cp-blok .dkk2 .kaarten {
display: flex;
flex-direction: column;
gap: 6px;
}
.cp-blok .dkk2 .kat {
display: flex;
align-items: center;
gap: 8px;
background: var(--wit);
border: 1px solid var(--dkk-lijn);
border-radius: var(--r-knop);
padding: 7px 9px;
}
.cp-blok .dkk2 .kat i {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--dkk-roze), var(--dkk-zand));
flex: none;
}
.cp-blok .dkk2 .kat b {
display: block;
font-weight: 600;
}
.cp-blok .dkk2 .kat small {
color: var(--dkk-muted);
font-size: 11px;
}
.cp-blok .dkk2 .live {
border: 1.5px dashed var(--dkk-roze);
border-radius: var(--r-knop);
padding: 10px;
background: var(--wit);
}
.cp-blok .dkk2 .live b {
display: block;
font-family: var(--fh);
font-size: 12px;
margin-bottom: 4px;
outline: 1.5px solid var(--dkk-roze);
outline-offset: 2px;
border-radius: 2px;
}
.cp-blok .dkk2 .live p {
margin: 0;
font-size: 12px;
color: var(--dkk-muted);
}
.cp-blok .dkk2 .pub {
grid-column: 1 / -1;
background: var(--wit);
border: 1px solid var(--dkk-lijn);
border-radius: var(--r-knop);
padding: 9px 12px;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.cp-blok .dkk2 .pub .tabje {
padding: 4px 9px;
border-radius: 999px;
background: var(--dkk-creme);
border: 1px solid var(--dkk-lijn);
} .cp-blok .dkk2 .pub .tabje.act {
background: var(--dkk-roze);
border-color: var(--dkk-roze);
color: var(--dkk-donker);
font-weight: 600;
}
.cp-blok .dkk2 .pub .knop {
margin-left: auto;
padding: 5px 10px;
border-radius: var(--r-knop);
background: var(--dkk-donker);
color: var(--wit);
font-weight: 600;
}
.cp-wijs-uitleg {
margin-top: 2.5rem;
font-size: 1rem;
}
.cp-wijs-uitleg a {
color: var(--primair);
font-weight: 600;
} @media (max-width: 1023px) {
.cp-wijs,
.cp-wijs.spiegel {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2rem;
align-items: start;
margin-top: 2.5rem;
}
.cp-wijs.spiegel .cp-wijs-scherm {
order: 0;
} .cp-wijs-scherm::before {
display: none;
}
.cp-wijs-balk {
border-bottom: 1px solid var(--lijn);
border-radius: var(--r-kaart);
box-shadow: var(--schaduw);
margin-bottom: 1rem;
}  .cp-blok .kp2 .app {
display: flex;
flex-direction: column;
min-height: 0;
}
.cp-blok .kp2 aside {
border-right: 0;
border-bottom: 1px solid var(--lijn);
padding: 34px 12px 10px;
}
.cp-blok .kp2 aside .zone {
display: grid;
grid-template-columns: auto 1fr 1fr;
gap: 8px 6px;
align-items: center; padding-right: 18px;
}
.cp-blok .kp2 .inlog {
grid-column: 2 / -1;
padding: 5px 8px;
}
.cp-blok .kp2 .proj {
grid-row: 2;
text-align: center;
padding: 5px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--wit);
border: 1px solid var(--lijn);
}
.cp-blok .kp2 .proj.act {
background: var(--primair);
border-color: var(--primair);
}
.cp-blok .kp2 main {
padding: 14px 12px;
gap: 10px;
}
.cp-blok .kp2 .uitgelicht {
flex-wrap: wrap;
}
.cp-blok .kp2 .docs {
grid-template-columns: 1fr;
gap: 6px;
}
.cp-blok .kp2 .doc {
display: grid;
grid-template-columns: auto 1fr;
gap: 0 8px;
align-items: center;
padding: 7px 9px;
}
.cp-blok .kp2 .doc .tag {
grid-row: 1 / 3;
}
.cp-blok .kp2 .doc b,
.cp-blok .kp2 .doc small {
grid-column: 2;
} .cp-blok .dkk2 .app {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
background: var(--wit);
}
.cp-blok .dkk2 .band {
display: contents;
}
.cp-blok .dkk2 .band b {
grid-row: 1;
grid-column: 1 / 3;
padding: 34px 12px 10px;
font-size: 12px;
}
.cp-blok .dkk2 .band .bewerk {
grid-row: 1;
grid-column: 3;
justify-self: end;
align-self: end;
margin: 0 10px 9px 0; white-space: nowrap;
}
.cp-blok .dkk2 main {
grid-row: 2;
grid-column: 1 / -1;
grid-template-columns: 1fr;
gap: 10px;
padding: 12px;
background: var(--dkk-creme);
border-top: 1px solid var(--dkk-lijn);
border-bottom: 1px solid var(--dkk-lijn);
}
.cp-blok .dkk2 .band span:not(.bewerk) {
grid-row: 3;
text-align: center;
padding: 9px 4px 2px;
font-size: 11px;
font-weight: 600;
color: var(--dkk-muted);
}
.cp-blok .dkk2 .band span:not(.bewerk):first-of-type {
color: var(--dkk-donker);
} .cp-blok .hot::after {
content: '';
position: absolute;
inset: -9px;
}
.cp-blok .kp2 .zone[data-zone="2"] .uitgelicht {
padding-left: 22px;
}
.cp-wijs-lijst li.act {
transform: none;
}
} @media (max-width: 767px) {
.cp-wijs,
.cp-wijs.spiegel {
grid-template-columns: 1fr;
gap: 1.5rem;
} .cp-wijs-balk {
margin-bottom: 0;
} .cp-wijs-uitleg-kolom {
padding-top: 0;
}
.cp-wijs-lijst li {
padding: .85rem .5rem;
} .cp-wijs-lijst li .kp2 {
grid-column: 1 / -1;
margin: .85rem auto .25rem;
}
} .cp-blok .direct .uitklap,
.cp-blok .direct .uitklap > div,
.cp-blok .direct .chev {
transition: none;
} .cp-tafel {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 3rem;
align-items: stretch;
}
.cp-lijst {
list-style: none;
margin: 0;
padding: 0;
} .cp-lijst li {
border-bottom: 1px solid var(--lijn);
transition: background .25s var(--curve);
} @media (hover: hover) {
.cp-lijst li:not(.act):hover {
background: rgba(41, 52, 196, .04);
}
.cp-lijst li:not(.act) h3:hover .chev {
border-color: var(--primair);
transform: rotate(45deg) translate(2px, 2px);
}
}
.cp-lijst li:first-child {
border-top: 1px solid var(--lijn);
} .cp-lijst h3 {
display: flex;
align-items: center;
gap: .75rem;
margin: 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--kop);
cursor: pointer;
padding: 1.05rem .25rem;
transition: color .3s var(--curve);
}
.cp-lijst h3:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 4px;
border-radius: 4px;
}
.cp-lijst h3 .nr {
font-family: var(--fh);
font-size: .8rem;
font-weight: 700;
color: var(--primair);
width: 1.6rem;
flex: none;
}
.cp-lijst h3 .chev {
margin-left: auto;
width: .6rem;
height: .6rem;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform .35s var(--curve), border-color .3s;
}
.cp-lijst li.act h3 {
color: var(--primair);
padding-bottom: 0;
}
.cp-lijst li.act h3 .chev {
transform: rotate(-135deg);
border-color: var(--primair);
} .cp-lijst .uitklap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .45s var(--curve);
} .cp-lijst .uitklap > div {
overflow: hidden;
padding: 0 .25rem;
visibility: hidden;
transition: visibility 0s linear .45s;
} .cp-lijst li.act .uitklap > div {
padding-bottom: 1.05rem;
visibility: visible;
transition: visibility 0s;
}
.cp-lijst li.act .uitklap {
grid-template-rows: 1fr;
}
.cp-lijst p {
margin: .6rem 0 .55rem;
padding-left: 2.35rem;
color: var(--muted);
font-size: .98rem;
line-height: 1.55;
}
.cp-lijst .cta {
margin-left: 2.35rem;
margin-bottom: .3rem;
} .cp-portaalcel {
position: relative;
min-height: 0;
}
.cp-portaalcel .mp {
position: absolute;
inset: 0;
}
.cp-portaalcel::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-kaart);
background: rgba(41, 52, 196, .07);
transform: rotate(-2deg) translateX(10px) translateY(-10px);
}  .cp-blok .mp {
display: flex;
flex-direction: column;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: var(--r-kaart);
box-shadow: var(--schaduw);
overflow: hidden;
font-size: 12px;
line-height: 1.4;
color: var(--kop);
z-index: 1;
}
.cp-blok .mp .chrome {
flex: none;
}
.cp-blok .mp .app {
display: grid;
grid-template-columns: 150px 1fr;
flex: 1;
min-height: 0;
}
.cp-blok .mp aside {
background: var(--grijs);
border-right: 1px solid var(--lijn);
padding: 12px 10px;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 0;
}
.cp-blok .mp .logo {
font-family: var(--fh);
font-weight: 700;
font-size: 12px;
color: var(--primair);
padding: 2px 6px 8px;
}
.cp-blok .mp nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.cp-blok .mp nav button {
all: unset;
display: block;
padding: 6px 8px;
border-radius: var(--r-knop);
cursor: pointer;
color: var(--kop);
font: inherit;
transition: background .25s, color .25s, opacity .3s;
}
@media (hover: hover) {
.cp-blok .mp nav button:hover {
background: var(--wit);
}
}
.cp-blok .mp nav button.act {
background: var(--primair);
color: var(--wit);
}
.cp-blok .mp nav button:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
} .cp-blok .mp[data-rol="m"] nav button:not([data-zicht~="m"]),
.cp-blok .mp[data-rol="k"] nav button:not([data-zicht~="k"]) {
opacity: .28;
text-decoration: line-through;
}
.cp-blok .mp .wie {
margin-top: auto;
font-size: 11px;
color: var(--muted);
padding: 6px;
}
.cp-blok .mp .wie b {
color: var(--kop);
}
.cp-blok .mp main {
position: relative;
overflow: auto;
min-height: 0;
padding: 14px 16px;
}
.cp-blok .mp .view {
display: none;
animation: cp-fade .4s var(--curve);
}
.cp-blok .mp .view.act {
display: block;
}
.cp-blok .mp h4 {
margin: 0 0 2px;
font-size: 13px;
font-weight: 600;
}
.cp-blok .mp .sub {
color: var(--muted);
font-size: 11px;
margin: 0 0 10px;
}
.cp-blok .mp .rij {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--lijn);
border-radius: var(--r-knop);
margin-bottom: 6px;
background: var(--wit);
text-align: left;
width: 100%;
font: inherit;
color: inherit;
cursor: pointer;
transition: transform .3s var(--curve), box-shadow .3s;
}
@media (hover: hover) {
.cp-blok .mp .rij:hover {
transform: translateY(-2px);
box-shadow: var(--schaduw);
}
}
.cp-blok .mp .rij b {
flex: 1;
font-weight: 600;
}
.cp-blok .mp .rij small {
color: var(--muted);
}
.cp-blok .mp .mpbtn {
all: unset;
display: inline-block;
padding: 6px 10px;
border-radius: var(--r-knop);
background: var(--primair);
color: var(--wit);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background .25s, transform .2s;
}
@media (hover: hover) {
.cp-blok .mp .mpbtn:hover {
background: var(--primair-hover);
}
}
.cp-blok .mp .mpbtn.licht {
background: rgba(41, 52, 196, .08);
color: var(--primair);
}
.cp-blok .mp .mpbtn.act {
background: var(--primair);
color: var(--wit);
}
.cp-blok .mp .mpbtn:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
}
.cp-blok .mp .knoppen {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 0 0 10px;
}
.cp-blok .mp .detail {
display: none;
}
.cp-blok .mp .view.open .lijst-docs {
display: none;
}
.cp-blok .mp .view.open .detail {
display: block;
animation: cp-fade .35s var(--curve);
}
.cp-blok .mp .doc-body {
border: 1px solid var(--lijn);
border-radius: var(--r-knop);
padding: 12px;
margin: 8px 0 10px;
background: var(--grijs);
}
.cp-blok .mp .doc-body i {
display: block;
height: 6px;
border-radius: 3px;
background: #dbe2ea;
margin: 5px 0;
}
.cp-blok .mp .kpi3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.cp-blok .mp .kpi3 div {
border: 1px solid var(--lijn);
border-radius: var(--r-knop);
padding: 8px;
}
.cp-blok .mp .kpi3 b {
display: block;
font-family: var(--fh);
font-size: 18px;
color: var(--primair);
}
.cp-blok .mp .kpi3 span {
color: var(--muted);
font-size: 11px;
}
.cp-blok .mp .staaf {
display: flex;
align-items: flex-end;
gap: 5px;
height: 64px;
border-bottom: 1px solid var(--lijn);
padding-bottom: 2px;
margin-bottom: 10px;
}
.cp-blok .mp .staaf i {
flex: 1;
background: var(--primair);
border-radius: 3px 3px 0 0;
transition: height .6s var(--curve);
opacity: .85;
}
.cp-blok .mp table {
width: 100%;
border-collapse: collapse;
}
.cp-blok .mp td,
.cp-blok .mp th {
padding: 6px 4px;
border-bottom: 1px solid var(--lijn);
text-align: left;
font-weight: 400;
}
.cp-blok .mp th {
color: var(--muted);
font-size: 11px;
font-weight: 600;
}
.cp-blok .mp .sw {
all: unset;
width: 26px;
height: 15px;
border-radius: 999px;
background: #d1d5db;
position: relative;
cursor: pointer;
transition: background .25s;
vertical-align: middle;
}
.cp-blok .mp .sw::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--wit);
transition: transform .25s var(--curve);
}
.cp-blok .mp .sw.aan {
background: var(--groen);
}
.cp-blok .mp .sw.aan::after {
transform: translateX(11px);
}
.cp-blok .mp .sw:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
}
.cp-blok .mp .week {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.cp-blok .mp .dag {
font-size: 11px;
color: var(--muted);
text-align: center;
font-weight: 600;
}
.cp-blok .mp .slot {
all: unset;
display: block;
text-align: center;
padding: 7px 2px;
border: 1px dashed #c7d2fe;
border-radius: var(--r-knop);
color: var(--primair);
cursor: pointer;
font: inherit;
font-size: 11px;
transition: background .25s, border-color .25s, transform .2s;
}
@media (hover: hover) {
.cp-blok .mp .slot:hover {
background: rgba(41, 52, 196, .06);
}
}
.cp-blok .mp .slot:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
}
.cp-blok .mp .slot.vol {
border-style: solid;
border-color: var(--lijn);
background: var(--grijs);
color: var(--muted);
cursor: default;
}
.cp-blok .mp .slot.net {
background: #ecfdf5;
border-color: var(--groen);
color: #047857;
}
.cp-blok .mp .kop2 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 8px;
align-items: start;
}
.cp-blok .mp .sys {
border: 1px solid var(--lijn);
border-radius: var(--r-knop);
padding: 8px;
min-height: 88px;
}
.cp-blok .mp .sys b {
display: block;
font-family: var(--fh);
font-size: 11px;
margin-bottom: 6px;
}
.cp-blok .mp .sys .item {
padding: 4px 6px;
background: var(--grijs);
border-radius: 4px;
margin-top: 4px;
animation: cp-fade .4s var(--curve);
}
.cp-blok .mp .lijnv {
position: relative;
width: 54px;
align-self: center;
height: 2px;
background: var(--lijn);
margin-top: 36px;
}
.cp-blok .mp .lijnv i {
position: absolute;
top: -4px;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
opacity: 0;
}
.cp-blok .mp .lijnv.gaat i {
animation: cp-reis .7s var(--curve) forwards;
}
@keyframes cp-reis {
0% {
left: 0;
opacity: 1;
}
100% {
left: 44px;
opacity: 0;
}
}
.cp-blok .mp .site {
border: 1px solid var(--lijn);
border-radius: var(--r-knop);
overflow: hidden;
position: relative;
min-height: 150px;
}
.cp-blok .mp .site .snav {
display: flex;
gap: 10px;
padding: 7px 10px;
border-bottom: 1px solid var(--lijn);
font-size: 11px;
}
.cp-blok .mp .site .snav b {
margin-right: auto;
color: var(--primair);
}
.cp-blok .mp .site .shero {
padding: 14px 12px;
}
.cp-blok .mp .site .shero strong {
display: block;
font-family: var(--fh);
font-size: 13px;
margin-bottom: 6px;
}
.cp-blok .mp .site .paneel {
position: absolute;
inset: 0;
background: var(--wit);
transform: translateX(100%);
transition: transform .5s var(--curve);
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cp-blok .mp .site.in .paneel {
transform: none;
}
.cp-blok .mp .chatv {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 120px;
}
.cp-blok .mp .bub {
max-width: 88%;
padding: 7px 10px;
border-radius: 12px;
background: var(--grijs);
animation: cp-fade .35s var(--curve);
font-size: 11px;
}
.cp-blok .mp .bub.ik {
align-self: flex-end;
background: var(--primair);
color: var(--wit);
}
.cp-blok .mp .typ span {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--muted);
margin-right: 3px;
animation: cp-stip 1s infinite;
}
.cp-blok .mp .typ span:nth-child(2) {
animation-delay: .15s;
}
.cp-blok .mp .typ span:nth-child(3) {
animation-delay: .3s;
}
@keyframes cp-stip {
0%,
100% {
opacity: .3;
}
50% {
opacity: 1;
}
}
.cp-blok .mp .toast {
position: absolute;
left: 50%;
bottom: 12px;
transform: translate(-50%, 12px);
background: var(--kop);
color: var(--wit);
padding: 7px 12px;
border-radius: var(--r-knop);
font-size: 11px;
opacity: 0;
pointer-events: none;
transition: opacity .3s, transform .4s var(--curve);
white-space: nowrap;
}
.cp-blok .mp .toast.zie {
opacity: 1;
transform: translate(-50%, 0);
}
@keyframes cp-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
} @media (max-width: 1023px) {
.cp-wijs .kp2,
.cp-portaalcel .mp,
.cp-tour--hero .tour-tel,
.cp-rollen .scherm-kaart {
min-height: 0;
max-width: 320px;
margin-inline: auto;
border: 8px solid #0f172a;
border-radius: 2.5rem;
box-shadow: var(--schaduw-hover);
}
.cp-wijs .kp2::before,
.cp-portaalcel .mp::before,
.cp-tour--hero .tour-tel::before,
.cp-rollen .scherm-kaart::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 18px;
border-radius: 999px;
background: #0f172a;
z-index: 3;
} .cp-wijs .kp2::after,
.cp-portaalcel .mp::after,
.cp-tour--hero .tour-tel::after,
.cp-rollen .scherm-kaart::after {
content: '';
flex: none;
width: 92px;
height: 4px;
border-radius: 999px;
background: var(--kop);
opacity: .3;
margin: 6px auto 8px;
}
} @media (max-width: 1023px) {
.cp-tafel {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.cp-portaalcel {
min-height: 0;
} .cp-portaalcel::before {
display: none;
}
.cp-portaalcel .mp {
position: relative;
inset: auto;
height: 560px;
}
.cp-blok .mp .chrome {
display: none;
}
.cp-blok .mp .app {
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr auto;
}
.cp-blok .mp aside {
display: contents;
}
.cp-blok .mp .logo {
grid-row: 1;
grid-column: 1;
padding: 34px 14px 8px;
font-size: 13px;
}
.cp-blok .mp .wie {
grid-row: 1;
grid-column: 2;
align-self: end;
margin: 0;
padding: 0 14px 9px;
}
.cp-blok .mp main {
grid-row: 2;
grid-column: 1 / -1;
padding: 12px 14px;
border-top: 1px solid var(--lijn);
}
.cp-blok .mp nav {
grid-row: 3;
grid-column: 1 / -1;
flex-direction: row;
gap: 0;
padding: 0 6px;
border-top: 1px solid var(--lijn);
background: var(--grijs);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cp-blok .mp nav::-webkit-scrollbar {
display: none;
} .cp-blok .mp nav::after {
content: '';
position: sticky;
right: 0;
flex: none;
width: 36px;
margin-left: -36px;
background: linear-gradient(90deg, transparent, var(--grijs) 70%);
pointer-events: none;
transition: opacity .25s;
}
.cp-blok .mp nav.eind::after {
opacity: 0;
} .cp-blok .mp nav::before {
content: '';
position: sticky;
left: 0;
flex: none;
width: 36px;
margin-right: -36px;
background: linear-gradient(90deg, var(--grijs) 30%, transparent);
pointer-events: none;
opacity: 0;
transition: opacity .25s;
z-index: 1;
}
.cp-blok .mp nav.begin::before {
opacity: 1;
}
.cp-blok .mp nav button {
flex: none;
display: grid;
justify-items: center;
gap: 3px;
padding: 8px 10px 6px;
border-radius: 0;
font-size: 11px;
font-weight: 600;
color: var(--muted);
}
.cp-blok .mp nav button::before {
content: '';
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
.cp-blok .mp nav button.act {
background: none;
color: var(--primair);
}
.cp-blok .mp nav button[data-view="klantportaal"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
.cp-blok .mp nav button[data-view="dashboards"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20v-7M12 20V5M19 20v-10M3 20h18'/%3E%3C/svg%3E");
}
.cp-blok .mp nav button[data-view="rollen"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
}
.cp-blok .mp nav button[data-view="afspraken"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 11h16M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.cp-blok .mp nav button[data-view="koppelingen"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.5-1.5'/%3E%3C/svg%3E");
}
.cp-blok .mp nav button[data-view="bestaande-site"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}
.cp-blok .mp nav button[data-view="ai"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2zM19 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E");
} .cp-blok .mp .toast {
bottom: 76px;
} .cp-blok .mp .rij {
display: grid;
grid-template-columns: auto 1fr;
gap: 0 8px;
}
.cp-blok .mp .rij .tag {
grid-row: 1 / 3;
}
.cp-blok .mp .rij b,
.cp-blok .mp .rij small {
grid-column: 2;
} .cp-blok .mp .kpi3 {
grid-template-columns: 1fr 1fr;
}
.cp-blok .mp .kpi3 div:first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.cp-tafel {
grid-template-columns: 1fr;
gap: 1.5rem;
} .cp-lijst li .cp-portaalcel {
margin: .25rem 0 1.25rem;
} .cp-lijst li .cp-portaalcel .mp p {
padding-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cp-blok .mp * {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
.cp-blok .hot::before {
animation: none;
}
} @property --cp-px {
syntax: '<percentage>';
inherits: false;
initial-value: 50%;
}
@property --cp-py {
syntax: '<percentage>';
inherits: false;
initial-value: 50%;
}
@property --cp-s {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
@property --cp-ox {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
@property --cp-oy {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
@property --cp-rx {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@property --cp-rz {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.cp-tour {
position: relative;
padding: 0;
--bu: min(.0768vw, .1111vh);
--zoom: 1;
--kantlijn: 40px;
--gat: clamp(48px, calc(var(--vw, 100vw) * .055), 92px);
--bw: 1600;
--bh: 1000;
--bord: 900;
--tekstbreed: clamp(220px, var(--vw, 100vw) - 2 * var(--kantlijn) - var(--gat) - var(--bord) * var(--bu) * var(--zoom), 440px); --frame: calc(100dvh - var(--header-offset, 0px));
}
.cp-tour .tour-sticky {
position: sticky;
top: var(--header-offset, 0px);
height: var(--frame);
z-index: 1;
pointer-events: none;
background: radial-gradient(115% 85% at 50% 26%, #fff 0%, var(--body) 42%, var(--lijn) 100%);
} .cp-tour .scene {
position: absolute;
inset: 0;
overflow: hidden;
perspective: 2400px;
perspective-origin: 50% 44%;
}
.cp-tour .cam {
position: absolute;
left: 50%;
top: 50%;
width: calc(var(--bw) * var(--bu));
height: calc(var(--bh) * var(--bu));
transform-style: preserve-3d;
will-change: transform;
--cp-px: 50%;
--cp-py: 50%;
--cp-s: .766;
--cp-ox: 0px;
--cp-oy: 46vh;
--cp-rx: 36deg;
--cp-rz: -2deg;
transform: translate(var(--cp-ox), var(--cp-oy)) translate(-50%, -50%) rotateX(var(--cp-rx)) rotateZ(var(--cp-rz)) scale(var(--cp-s)) translate(calc(50% - var(--cp-px)), calc(50% - var(--cp-py)));
transition: --cp-px 1.05s var(--curve), --cp-py 1.05s var(--curve), --cp-s 1.05s var(--curve), --cp-ox 1.05s var(--curve), --cp-oy 1.05s var(--curve), --cp-rx 1.05s var(--curve), --cp-rz 1.05s var(--curve);
} .cp-tour.gestuurd .cam {
transition: none;
will-change: auto;
} .cp-tour.plat .scene {
perspective: none;
}
.cp-tour.plat .cam {
transform-style: flat;
} .cp-tour.rust .cam {
will-change: auto;
}
.cp-tour .board {
position: absolute;
inset: 0;
border-radius: calc(28 * var(--bu));
background: var(--wit) radial-gradient(circle, #dbe2ea calc(1.4 * var(--bu)), transparent calc(1.6 * var(--bu))) 0 0 / calc(40 * var(--bu)) calc(40 * var(--bu));
box-shadow: 0 calc(30 * var(--bu)) calc(80 * var(--bu)) rgba(31, 41, 55, .18), 0 0 0 1px var(--lijn);
font-family: var(--fb);
color: var(--kop);
} .cp-tour .vak {
position: absolute;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
padding: calc(22 * var(--bu)) calc(24 * var(--bu)) calc(18 * var(--bu));
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: calc(18 * var(--bu));
font-size: calc(15 * var(--bu));
line-height: 1.45;
box-shadow: 0 calc(8 * var(--bu)) calc(28 * var(--bu)) rgba(31, 41, 55, .08);
transition: opacity .45s var(--curve), box-shadow .45s var(--curve);
}
.cp-tour .vak .vk {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(10 * var(--bu));
margin-bottom: calc(14 * var(--bu));
}
.cp-tour .vak .vk b {
font-family: var(--fh);
font-weight: 600;
font-size: calc(19 * var(--bu));
}
.cp-tour .vak .vtag {
font-family: var(--fh);
font-size: calc(11 * var(--bu));
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--primair);
background: rgba(41, 52, 196, .08);
padding: calc(4 * var(--bu)) calc(10 * var(--bu));
border-radius: 999px;
white-space: nowrap;
}
.cp-tour .vak .vtag.groen {
color: #047857;
background: #ecfdf5;
}
.cp-tour .vak .rij {
display: flex;
justify-content: space-between;
gap: calc(12 * var(--bu));
padding: calc(9 * var(--bu)) 0;
border-bottom: 1px solid var(--lijn);
}
.cp-tour .vak .rij span:last-child {
color: var(--muted);
white-space: nowrap;
}
.cp-tour .vak .rij.totaal {
border-bottom: 0;
font-weight: 600;
margin-top: calc(6 * var(--bu));
}
.cp-tour .vak .voet {
margin-top: auto;
padding-top: calc(12 * var(--bu));
color: var(--muted);
font-size: calc(13 * var(--bu));
}
.cp-tour .vak .lijntjes {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
background: repeating-linear-gradient(transparent 0, transparent calc(31 * var(--bu)), var(--lijn) calc(31 * var(--bu)), var(--lijn) calc(32 * var(--bu)));
line-height: calc(32 * var(--bu));
}
.cp-tour .vak .lijntjes li {
padding-left: calc(6 * var(--bu));
}
.cp-tour .vak .lijntjes li.door {
text-decoration: line-through;
color: var(--muted);
}
.cp-tour .vak .lijntjes li.nieuw {
color: var(--primair);
}
.cp-tour .vak .mini-scherm {
border: 1px solid var(--lijn);
border-radius: calc(10 * var(--bu));
padding: calc(12 * var(--bu)) calc(14 * var(--bu));
background: var(--grijs);
margin-bottom: calc(12 * var(--bu));
}
.cp-tour .vak .mini-scherm b {
display: block;
font-family: var(--fh);
font-size: calc(13 * var(--bu));
margin-bottom: calc(8 * var(--bu));
}
.cp-tour .vak .groei {
display: block;
height: calc(8 * var(--bu));
border-radius: 999px;
background: #dbe2ea;
margin: calc(6 * var(--bu)) 0;
transform-origin: left;
transition: transform .8s var(--curve);
}
html.js .cp-tour .vak .groei {
transform: scaleX(0);
}
html.js .cp-tour .vak.is-aan .groei,
html.js .cp-tour:not(.gedimd) .vak .groei {
transform: scaleX(1);
}
.cp-tour .vak .groei:nth-child(2) {
transition-delay: .1s;
}
.cp-tour .vak .groei:nth-child(3) {
transition-delay: .2s;
}
.cp-tour .vak .groei:nth-child(4) {
transition-delay: .3s;
}
.cp-tour .vak .voortgang {
height: calc(8 * var(--bu));
border-radius: 999px;
background: var(--lijn);
overflow: hidden;
margin: calc(8 * var(--bu)) 0 calc(4 * var(--bu));
}
.cp-tour .vak .voortgang i {
display: block;
height: 100%;
width: 55%;
background: var(--primair);
border-radius: inherit;
transform-origin: left;
transition: transform .9s var(--curve) .2s;
}
html.js .cp-tour .vak .voortgang i {
transform: scaleX(0);
}
html.js .cp-tour .vak.is-aan .voortgang i,
html.js .cp-tour:not(.gedimd) .vak .voortgang i {
transform: scaleX(1);
} .cp-tour .vak .rij .bol {
display: inline-block;
width: calc(8 * var(--bu));
height: calc(8 * var(--bu));
border-radius: 999px;
background: var(--groen);
margin-right: calc(7 * var(--bu));
vertical-align: middle;
position: relative;
top: calc(-1 * var(--bu));
}
.cp-tour .vak .groot {
font-family: var(--fh);
font-size: calc(34 * var(--bu));
font-weight: 700;
color: var(--primair);
line-height: 1;
}
.cp-tour .vak .groot small {
font-family: var(--fb);
font-size: calc(13 * var(--bu));
font-weight: 400;
color: var(--muted);
margin-left: calc(6 * var(--bu));
} .cp-tour.gedimd .vak {
opacity: .26;
}
.cp-tour.gedimd .vak.was-aan {
opacity: .77;
z-index: 1;
}
.cp-tour.gedimd .vak.is-aan,
.cp-tour .vak.is-aan {
opacity: 1;
z-index: 2;
box-shadow: 0 0 0 calc(2 * var(--bu)) rgba(75, 179, 255, .7), 0 calc(24 * var(--bu)) calc(50 * var(--bu)) rgba(31, 41, 55, .16);
}
.cp-tour .tour-kop {
position: relative;
z-index: 2;
margin-top: calc(var(--header-offset, 0px) - 100dvh);
min-height: var(--frame);
display: flex;
align-items: flex-start;
padding-top: clamp(3rem, 8vh, 6rem);
pointer-events: none;
}
.cp-tour .tour-kop .container {
pointer-events: auto;
}
.cp-tour .tour-kop .cp-kop {
margin-bottom: 0;
}
.cp-tour .tour-stap {
position: relative;
z-index: 2;
height: var(--frame);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding-inline: var(--kantlijn);
pointer-events: none;
} .cp-tour .tour-stap .tekst {
grid-column: 1;
justify-self: start;
width: var(--tekstbreed);
pointer-events: auto;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(6px);
border-radius: var(--r-kaart);
padding: 1.25rem 1.5rem;
margin-left: -1.5rem;
box-shadow: var(--schaduw);
}
.cp-tour .tour-stap[data-kant="r"] .tekst {
grid-column: 2;
justify-self: end;
}
.cp-tour .stap-kop {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: .5rem;
}
.cp-tour .stap-kop .section-pill {
margin-bottom: 0;
}
.cp-tour .stap-foto {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
flex: none;
border: 4px solid var(--wit);
box-shadow: var(--schaduw);
}
.cp-tour .tour-stap .tekst h3 {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 600;
color: var(--primair);
margin: .6rem 0 .75rem;
}
.cp-tour .tour-stap .tekst p {
color: var(--muted);
font-size: 1.125rem;
line-height: 1.6;
margin: 0;
}
html.js .cp-tour .tour-stap .tekst {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s var(--curve) .18s, transform .7s var(--curve) .18s;
} html.js .cp-tour .tour-stap.is-active .tekst,
html.js .cp-tour .tour-uit.is-active .tekst {
opacity: 1;
transform: none;
transition: opacity .6s var(--curve) .18s, transform .7s var(--curve) .18s;
} .cp-tour .tour-uit {
position: relative;
z-index: 2;
height: var(--frame);
display: grid;
place-items: start center;
padding: clamp(2.5rem, 7vh, 4.5rem) var(--kantlijn) 0;
pointer-events: none;
}
.cp-tour .tour-uit .tekst {
pointer-events: auto;
text-align: center;
max-width: 44rem;
}
.cp-tour .tour-uit .section-pill {
margin-bottom: .75rem;
} .cp-tour--hero .tour-uit {
place-items: end center;
padding: 0 var(--kantlijn) clamp(3rem, 10vh, 6rem);
}
.cp-tour .tour-uit .cp-bewijs {
background: rgba(255, 255, 255, .86);
backdrop-filter: blur(8px);
border-radius: var(--r-kaart);
padding: 1.5rem 2rem;
box-shadow: var(--schaduw);
} html.js .cp-tour .tour-uit .tekst {
opacity: 0;
transform: translateY(22px);
transition: opacity .22s linear 0s, transform .22s var(--curve) 0s;
}
.cp-tour .tour-uit h3 {
font-size: clamp(1.75rem, 5vw, 2.625rem);
font-weight: 600;
color: var(--primair);
margin: 0 0 .75rem;
line-height: 1.2;
}
.cp-tour .tour-uit p {
margin: 0;
color: var(--muted);
font-size: 1.125rem;
line-height: 1.6;
}
.cp-tour .tour-uit a {
color: var(--primair);
font-weight: 600;
}
.cp-tour .tour-dots {
position: absolute;
left: var(--kantlijn);
bottom: 2rem;
display: flex;
align-items: center;
gap: .25rem;
pointer-events: auto;
z-index: 3;
}
.cp-tour .tour-dots button {
all: unset;
width: 30px;
height: 24px;
cursor: pointer;
position: relative;
}
.cp-tour .tour-dots button::after {
content: '';
position: absolute;
left: 3px;
right: 3px;
top: 10px;
height: 4px;
border-radius: 999px;
background: #c7d2fe;
transition: background .3s, height .25s var(--curve), top .25s var(--curve);
}
.cp-tour .tour-dots button[aria-current="step"]::after,
.cp-tour .tour-dots button.af::after {
background: var(--primair);
} @media (hover: hover) {
.cp-tour .tour-dots button:hover::after {
background: var(--primair-hover);
top: 9px;
height: 6px;
}
}
.cp-tour .tour-dots button:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
border-radius: 4px;
}
.cp-tour .tour-dots .skip {
margin-left: .75rem;
font-size: .85rem;
font-weight: 600;
color: var(--kop);
background: var(--wit);
padding: .45rem .9rem;
border-radius: var(--r-pill);
box-shadow: var(--schaduw);
text-decoration: none;
transition: transform .2s var(--curve), box-shadow .3s;
}
@media (hover: hover) {
.cp-tour .tour-dots .skip:hover {
transform: translateY(-2px);
box-shadow: var(--schaduw-hover);
}
}
.cp-tour .tour-mobiel {
display: none;
} @media (max-width: 1023px) { .cp-tour {
--kantlijn: 16px;
}
.cp-tour .tour-sticky {
display: none;
}
.cp-tour .tour-kop {
margin-top: 0;
min-height: 0;
padding-top: 0;
}
.cp-tour .tour-stap,
.cp-tour .tour-uit {
height: auto;
display: block;
padding: 2.5rem var(--kantlijn) 0;
}
.cp-tour .tour-stap .tekst {
width: auto;
max-width: 36rem;
background: transparent;
backdrop-filter: none;
padding: 0;
margin-left: 0;
box-shadow: none;
}
html.js .cp-tour .tour-stap .tekst,
html.js .cp-tour .tour-uit .tekst {
opacity: 1;
transform: none;
}
.cp-tour .tour-uit .tekst {
max-width: 36rem;
margin: 0 auto;
}
.cp-tour .tour-uit .cp-bewijs {
background: transparent;
backdrop-filter: none;
box-shadow: none;
padding: 0;
}
.cp-tour .tour-mobiel {
display: block;
--bu: 1px;
margin: 1.5rem 0 0;
max-width: 36rem;
}
.cp-tour .tour-mobiel .vak {
position: static;
width: auto;
height: auto;
transform: none;
opacity: 1;
box-shadow: var(--schaduw);
padding: 1.25rem;
}
.cp-tour .tour-mobiel .vak .groei,
.cp-tour .tour-mobiel .vak .voortgang i {
transform: scaleX(1) !important;
}
.cp-tour.gedimd .tour-mobiel .vak {
opacity: 1;
}
}
@media (min-width: 1024px) {
.cp-tour .tour-mobiel {
display: none !important;
}
} @media (max-width: 1023px) {
.cp-tour:not(.cp-tour--hero) {
counter-reset: stap;
} .cp-tour:not(.cp-tour--hero) .tour-kop {
padding-top: 5rem;
}
@media (min-width: 768px) {
.cp-tour:not(.cp-tour--hero) .tour-kop {
padding-top: 7rem;
}
}
.cp-tour:not(.cp-tour--hero) .tour-stap {
display: grid;
grid-template-columns: 56px minmax(0, 36rem);
grid-template-rows: auto auto auto auto;
justify-content: center;
column-gap: 1rem;
padding: 0 1rem;
pointer-events: auto;
}
.cp-tour:not(.cp-tour--hero) .tour-kop + .tour-stap {
padding-top: .5rem;
}
.cp-tour:not(.cp-tour--hero) .tour-stap .tekst,
.cp-tour:not(.cp-tour--hero) .tour-stap .stap-kop {
display: contents;
} .cp-tour:not(.cp-tour--hero) .tour-stap::before {
content: '';
grid-column: 1;
grid-row: 1 / -1;
align-self: stretch;
justify-self: center;
width: 2px;
background: var(--lijn);
}
.cp-tour:not(.cp-tour--hero) .tour-kop + .tour-stap::before {
margin-top: 28px;
} .cp-tour:not(.cp-tour--hero) .tour-stap:has(+ .tour-uit)::before,
.cp-tour:not(.cp-tour--hero) .tour-stap:last-child::before {
grid-row: 1;
align-self: start;
height: 28px;
}
.cp-tour:not(.cp-tour--hero) .stap-foto {
grid-column: 1;
grid-row: 1;
width: 56px;
height: 56px;
border-width: 3px;
position: relative;
z-index: 1;
} .cp-tour:not(.cp-tour--hero) .tour-stap::after {
counter-increment: stap;
content: counter(stap);
grid-column: 1;
grid-row: 1;
align-self: end;
justify-self: end;
position: relative;
z-index: 2;
width: 22px;
height: 22px;
margin: 0 -4px -2px 0;
border-radius: 50%;
background: var(--primair);
color: var(--wit);
font-family: var(--fh);
font-weight: 700;
font-size: 11px;
line-height: 22px;
text-align: center;
box-shadow: 0 0 0 2px var(--wit);
}
.cp-tour:not(.cp-tour--hero) .stap-kop .section-pill {
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: start;
}
.cp-tour:not(.cp-tour--hero) .tour-stap .tekst h3 {
grid-column: 2;
grid-row: 2;
margin: .75rem 0 .5rem;
font-size: clamp(1.5rem, 4vw, 2rem);
}
.cp-tour:not(.cp-tour--hero) .tour-stap .tekst p {
grid-column: 2;
grid-row: 3;
font-size: 1.0625rem;
}
.cp-tour:not(.cp-tour--hero) .tour-stap .tour-mobiel {
grid-column: 2;
grid-row: 4;
margin: 1.25rem 0 2.5rem;
max-width: none;
} .cp-tour:not(.cp-tour--hero) .tour-mobiel .vak {
box-shadow: none;
border-radius: 8px;
padding: 1rem 1.1rem;
font-size: 14px;
}
.cp-tour:not(.cp-tour--hero) .tour-mobiel .vak .vk b {
font-size: 16px;
}
.cp-tour:not(.cp-tour--hero) .tour-mobiel .vak .voet {
font-size: 12px;
}
.cp-tour:not(.cp-tour--hero) .tour-mobiel .vak .groot {
font-size: 30px;
}
.cp-tour:not(.cp-tour--hero) .tour-mobiel .vak .lijntjes {
background: none;
line-height: 1.45;
}
.cp-tour:not(.cp-tour--hero) .tour-mobiel .vak .lijntjes li {
padding: 7px 6px;
border-bottom: 1px solid var(--lijn);
} .cp-tour:not(.cp-tour--hero) .tour-uit {
display: block;
padding-bottom: 5rem;
}
.cp-tour:not(.cp-tour--hero) .tour-eind {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .75rem;
margin: 1.5rem auto 0;
counter-reset: eind;
}
.cp-tour:not(.cp-tour--hero) .tour-eind .vak {
box-shadow: none;
border-radius: 8px;
padding: .9rem 1rem;
gap: 8px;
}
.cp-tour:not(.cp-tour--hero) .tour-eind .vak > :not(.vk) {
display: none;
}
.cp-tour:not(.cp-tour--hero) .tour-eind .vak::before {
counter-increment: eind;
content: counter(eind);
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primair);
color: var(--wit);
font-family: var(--fh);
font-weight: 700;
font-size: 11px;
line-height: 22px;
text-align: center;
}
.cp-tour:not(.cp-tour--hero) .tour-eind .vak .vk {
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin: 0;
}
.cp-tour:not(.cp-tour--hero) .tour-eind .vak .vk b {
font-size: 13px;
line-height: 1.3;
}
} html:not(.js) .cp-tour .tour-sticky {
display: none;
}
html:not(.js) .cp-tour .tour-kop {
margin-top: 0;
min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
.cp-tour .cam {
transition: none;
--cp-rx: 0deg !important;
--cp-rz: 0deg !important;
}
.cp-tour .vak,
.cp-tour.gedimd .vak,
.cp-tour.gedimd .vak.was-aan {
opacity: 1;
transition: none;
}
html.js .cp-tour .vak .groei,
html.js .cp-tour .vak .voortgang i {
transform: scaleX(1);
transition: none;
}
html.js .cp-tour .tour-stap .tekst,
html.js .cp-tour .tour-uit .tekst {
opacity: 1;
transform: none;
transition: none;
}
} .cp-drie {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.cp-kaart {
position: relative;
isolation: isolate;
border-radius: var(--r-kaart);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: .75rem;
text-decoration: none;
color: inherit;
background: transparent;
transition: transform .4s var(--curve);
} .cp-kaart::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--wit);
box-shadow: var(--schaduw);
z-index: -1;
transition: box-shadow .4s var(--curve);
}
.cp-kaart::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(41, 52, 196, .07);
transform: rotate(-2deg) translateX(10px) translateY(-10px);
z-index: -2;
} @media (hover: hover) {
.cp-kaart:hover {
transform: translateY(-6px);
padding-bottom: calc(1.5rem + 6px);
margin-bottom: -6px;
}
.cp-kaart:hover::after,
.cp-kaart:hover::before {
bottom: 6px;
}
.cp-kaart:hover::after {
box-shadow: var(--schaduw-hover);
}
} .cp-kaart:hover {
color: var(--kop);
}
.cp-kaart:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 4px;
}
.cp-kaart h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--primair);
}
.cp-kaart p {
color: var(--muted);
margin: 0;
}
.cp-kaart .cta {
margin-top: auto;
} .cp-kaart .mini {
background: var(--grijs);
border-radius: 12px;
padding: 12px;
min-height: 180px;
font-size: 11px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
.cp-kaart .mini .vak {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 10px;
padding: 9px 10px;
}
.cp-kaart .mini .kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.cp-kaart .mini .kpis .vak {
text-align: center;
padding: 8px 6px;
}
.cp-kaart .mini .kpis b {
display: block;
font-family: var(--fh);
font-size: 18px;
}
.cp-kaart .mini .kpis span {
font-size: 11px;
color: var(--muted);
}
.cp-kaart .mini .balken {
display: flex;
align-items: flex-end;
gap: 6px;
height: 44px;
}
.cp-kaart .mini .balken i {
flex: 1;
background: var(--primair);
opacity: .85;
border-radius: 3px 3px 0 0;
display: block;
}
.cp-kaart .mini .kop2 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
}
.cp-kaart .mini .kop2 .sys {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 10px;
padding: 10px;
text-align: center;
}
.cp-kaart .mini .kop2 .sys b {
display: block;
font-size: 12px;
}
.cp-kaart .mini .kop2 .sys span {
font-size: 11px;
color: var(--muted);
}
.cp-kaart .mini .kop2 .lijn {
position: relative;
width: 90px;
height: 2px;
background: linear-gradient(90deg, var(--primair), var(--accent));
}
.cp-kaart .mini .kop2 .lijn::after {
content: 'sync';
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 999px;
padding: 1px 8px;
font-size: 11px;
color: var(--primair);
}
.cp-kaart .mini .chat {
display: flex;
flex-direction: column;
gap: 6px;
}
.cp-kaart .mini .bub {
max-width: 88%;
padding: 8px 10px;
border-radius: 12px;
background: var(--wit);
border: 1px solid var(--lijn);
font-size: 11px;
}
.cp-kaart .mini .bub.ik {
align-self: flex-end;
background: var(--primair);
color: var(--wit);
border-color: var(--primair);
}
.cp-kaart .mini .bub.klein {
font-size: 11px;
color: var(--muted);
} @keyframes cp-balk {
0%,
100% {
transform: scaleY(1);
}
45% {
transform: scaleY(.45);
}
}
@keyframes cp-punt {
0% {
transform: translateX(0);
opacity: 0;
}
12%,
80% {
opacity: 1;
}
100% {
transform: translateX(82px);
opacity: 0;
}
} @keyframes cp-bub {
0% {
opacity: .12;
transform: translateY(8px);
}
100% {
opacity: 1;
transform: none;
}
}
.cp-kaart .mini .balken i {
transform-origin: 50% 100%;
}
.cp-kaart .mini .kop2 .lijn::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 999px;
background: var(--primair);
opacity: 0;
}
@media (hover: hover) {
.cp-kaart:hover .mini .balken i,
.cp-kaart:focus-visible .mini .balken i {
animation: cp-balk 1.5s var(--curve) infinite;
}
.cp-kaart:hover .mini .balken i:nth-child(2),
.cp-kaart:focus-visible .mini .balken i:nth-child(2) {
animation-delay: .1s;
}
.cp-kaart:hover .mini .balken i:nth-child(3),
.cp-kaart:focus-visible .mini .balken i:nth-child(3) {
animation-delay: .2s;
}
.cp-kaart:hover .mini .balken i:nth-child(4),
.cp-kaart:focus-visible .mini .balken i:nth-child(4) {
animation-delay: .3s;
}
.cp-kaart:hover .mini .balken i:nth-child(5),
.cp-kaart:focus-visible .mini .balken i:nth-child(5) {
animation-delay: .4s;
}
.cp-kaart:hover .mini .kop2 .lijn::before,
.cp-kaart:focus-visible .mini .kop2 .lijn::before {
animation: cp-punt 1.5s linear infinite;
}
.cp-kaart:hover .mini .vak:nth-child(2) .lijn::before,
.cp-kaart:focus-visible .mini .vak:nth-child(2) .lijn::before {
animation-delay: .5s;
}
.cp-kaart:hover .mini .bub,
.cp-kaart:focus-visible .mini .bub {
animation: cp-bub .7s var(--curve) both;
}
.cp-kaart:hover .mini .bub:nth-child(2),
.cp-kaart:focus-visible .mini .bub:nth-child(2) {
animation-delay: .3s;
}
.cp-kaart:hover .mini .bub:nth-child(3),
.cp-kaart:focus-visible .mini .bub:nth-child(3) {
animation-delay: .6s;
}
}
@media (prefers-reduced-motion: reduce) {
.cp-kaart:hover .mini .balken i,
.cp-kaart:focus-visible .mini .balken i,
.cp-kaart:hover .mini .kop2 .lijn::before,
.cp-kaart:focus-visible .mini .kop2 .lijn::before,
.cp-kaart:hover .mini .bub,
.cp-kaart:focus-visible .mini .bub {
animation: none;
}
} @media (max-width: 1023px) {
.cp-drie {
display: flex;
gap: 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
margin-inline: -1rem;
padding: 18px 1rem 20px;
scroll-padding-inline: 1rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cp-drie::-webkit-scrollbar {
display: none;
}
.cp-kaart {
flex: 0 0 calc(50% - 2.5rem);
min-width: 0;
scroll-snap-align: start;
}
.cp-kaart .mini .kop2 {
grid-template-columns: 1fr minmax(40px, 90px) 1fr;
gap: 8px;
}
.cp-kaart .mini .kop2 .sys {
padding: 10px 8px;
min-width: 0;
}
.cp-kaart .mini .kop2 .lijn {
width: auto;
}
} @media (min-width: 768px) and (max-width: 1023px) {
.cp-kaart .mini {
min-height: 210px;
}
}
@media (max-width: 767px) {
.cp-kaart {
flex-basis: min(82vw, 340px);
padding: 1.25rem;
}
.cp-kaart .mini {
min-height: 150px;
}
} @media (hover: none) {
.cp-kaart.is-in .mini .balken i {
animation: cp-balk 1.5s var(--curve) 2;
}
.cp-kaart.is-in .mini .balken i:nth-child(2) {
animation-delay: .1s;
}
.cp-kaart.is-in .mini .balken i:nth-child(3) {
animation-delay: .2s;
}
.cp-kaart.is-in .mini .balken i:nth-child(4) {
animation-delay: .3s;
}
.cp-kaart.is-in .mini .balken i:nth-child(5) {
animation-delay: .4s;
}
.cp-kaart.is-in .mini .kop2 .lijn::before {
animation: cp-punt 1.5s linear 1;
}
.cp-kaart.is-in .mini .vak:nth-child(2) .lijn::before {
animation-delay: .5s;
}
.cp-kaart.is-in .mini .bub {
animation: cp-bub .7s var(--curve) both;
}
.cp-kaart.is-in .mini .bub:nth-child(2) {
animation-delay: .3s;
}
.cp-kaart.is-in .mini .bub:nth-child(3) {
animation-delay: .6s;
}
}
@media (prefers-reduced-motion: reduce) {
.cp-kaart.is-in .mini .balken i,
.cp-kaart.is-in .mini .kop2 .lijn::before,
.cp-kaart.is-in .mini .bub {
animation: none;
}
}  .cp-tour[data-hoogte="frame"] {
--bu: min(.0768vw, calc(var(--frame) * .001111));
--zoom: 1;
} .cp-tour--dash {
--bw: 1600;
--bh: 900;
--bord: 950;
} @media (min-width: 1024px) {
.cp-tour--hero {
margin-top: calc(-1 * var(--header-offset, 0px));
padding-top: var(--header-offset, 0px);
}
}
.cp-tour--hero {
background: var(--body);
}
.cp-tour--hero .tour-sticky {
background: var(--body);
} .cp-tour--hero .tour-sticky::before {
content: '';
position: absolute;
inset: calc(-1 * var(--header-offset, 0px)) 0 0;
pointer-events: none;
background:
radial-gradient(circle at 10% 20%, rgba(200, 230, 255, .6) 0%, rgba(241, 246, 251, 0) 50%),
radial-gradient(circle at 90% 80%, rgba(255, 230, 240, .5) 0%, rgba(241, 246, 251, 0) 50%);
-webkit-mask-image: linear-gradient(#000 85%, transparent);
mask-image: linear-gradient(#000 85%, transparent);
}
.cp-tour--hero .tour-kop {
padding-top: clamp(2rem, 5vh, 3.5rem);
align-items: flex-start;
} .cp-tour--hero .hero-icon-1,
.cp-tour--hero .hero-icon-2 {
top: 14%;
}
.cp-tour--hero .hero-icon-3,
.cp-tour--hero .hero-icon-4 {
top: 36%;
}
.cp-tour--hero .hero-icon-5,
.cp-tour--hero .hero-icon-6 {
top: 58%;
bottom: auto;
} .cp-hero-tekst {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 48rem;
margin: 0 auto;
}
.cp-hero-tekst h1 {
font-family: var(--fh);
font-weight: 800;
font-size: clamp(2rem, 6vw, 3.5rem);
line-height: 1.1;
letter-spacing: -.02em;
color: var(--primair);
margin: 0 0 .75rem;
}
.cp-hero-tekst .cp-hero-lead {
max-width: 36rem;
font-weight: 500;
color: var(--muted);
margin: 0 0 2rem;
font-size: 1.125rem;
line-height: 1.65;
} .cp-hero-tekst .cp-hero-lead a {
color: var(--primair);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: color .2s var(--curve);
}
@media (hover: hover) {
.cp-hero-tekst .cp-hero-lead a:hover {
color: var(--primair-hover);
}
}
.cp-hero-tekst .cp-hero-knoppen {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.cp-hero-tekst .cp-hero-hint {
margin: 1.25rem 0 0;
font-size: .8rem;
color: var(--muted);
}
@media (max-width: 1023px) {
.cp-hero-tekst .cp-hero-hint {
display: none;
}
} .cp-tour--hero .board {
pointer-events: auto;
}
.cp-tour--hero .vak {
cursor: pointer;
}
@media (hover: hover) {
.cp-tour--hero .vak:hover {
box-shadow: 0 0 0 calc(2 * var(--bu)) rgba(75, 179, 255, .45), 0 calc(12 * var(--bu)) calc(32 * var(--bu)) rgba(31, 41, 55, .12);
}
.cp-tour--hero.gedimd .vak:not(.is-aan):hover {
opacity: .6;
}
} .cp-tour .board .rail {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 10.6%;
background: var(--grijs);
border-right: 1px solid var(--lijn);
border-radius: calc(28 * var(--bu)) 0 0 calc(28 * var(--bu));
padding: calc(20 * var(--bu)) calc(12 * var(--bu));
display: flex;
flex-direction: column;
gap: calc(3 * var(--bu));
}
.cp-tour .board .rail .merk {
display: flex;
align-items: center;
gap: calc(9 * var(--bu));
font-family: var(--fh);
font-weight: 600;
font-size: calc(15 * var(--bu));
margin-bottom: calc(18 * var(--bu));
padding: 0 calc(6 * var(--bu));
}
.cp-tour .board .rail .merk i {
flex: none;
width: calc(22 * var(--bu));
height: calc(22 * var(--bu));
border-radius: calc(6 * var(--bu));
background: var(--primair);
}
.cp-tour .board .rail button,
.cp-tour .board .rail .ri {
all: unset;
display: flex;
align-items: center;
gap: calc(10 * var(--bu));
padding: calc(7 * var(--bu)) calc(8 * var(--bu));
border-radius: calc(8 * var(--bu));
font-size: calc(13 * var(--bu));
color: var(--muted);
transition: background .2s, color .2s;
}
.cp-tour .board .rail button {
cursor: pointer;
}
.cp-tour .board .rail button i,
.cp-tour .board .rail .ri i {
flex: none;
width: calc(15 * var(--bu));
height: calc(15 * var(--bu));
border-radius: calc(4 * var(--bu));
background: #d3dae5;
transition: background .2s;
}
@media (hover: hover) {
.cp-tour .board .rail button:hover {
background: var(--wit);
color: var(--kop);
}
}
.cp-tour .board .rail button.act {
background: var(--wit);
color: var(--primair);
font-weight: 600;
box-shadow: 0 calc(2 * var(--bu)) calc(8 * var(--bu)) rgba(31, 41, 55, .08);
}
.cp-tour .board .rail button.act i {
background: var(--primair);
}
.cp-tour .board .rail button:focus-visible {
outline: calc(2 * var(--bu)) solid var(--primair);
outline-offset: calc(2 * var(--bu));
}
.cp-tour .board .rail .streep {
height: 1px;
background: var(--lijn);
margin: calc(12 * var(--bu)) calc(6 * var(--bu));
}
.cp-tour .board .top {
position: absolute;
left: 10.6%;
right: 0;
top: 0;
height: 10.7%;
display: flex;
align-items: center;
gap: calc(18 * var(--bu));
padding: 0 calc(26 * var(--bu));
font-size: calc(14 * var(--bu));
color: var(--kop);
border-bottom: 1px solid var(--lijn);
}
.cp-tour .board .top .kruimel {
font-family: var(--fh);
font-weight: 600;
font-size: calc(17 * var(--bu));
white-space: nowrap;
}
.cp-tour .board .top .kruimel em {
font-style: normal;
font-weight: 400;
color: var(--muted);
}
.cp-tour .board .top .zoek {
flex: 1;
max-width: calc(300 * var(--bu));
display: flex;
align-items: center;
gap: calc(9 * var(--bu));
background: var(--grijs);
border: 1px solid var(--lijn);
border-radius: 999px;
padding: calc(7 * var(--bu)) calc(14 * var(--bu));
color: var(--muted);
font-size: calc(13 * var(--bu));
white-space: nowrap;
overflow: hidden;
}
.cp-tour .board .top .zoek i {
flex: none;
width: calc(11 * var(--bu));
height: calc(11 * var(--bu));
border: calc(2 * var(--bu)) solid #aab4c2;
border-radius: 50%;
}
.cp-tour .board .top .wie {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: calc(12 * var(--bu));
color: var(--muted);
font-size: calc(13 * var(--bu));
white-space: nowrap;
}
.cp-tour .board .top .bel {
position: relative;
flex: none;
width: calc(15 * var(--bu));
height: calc(15 * var(--bu));
border-radius: calc(6 * var(--bu)) calc(6 * var(--bu)) calc(3 * var(--bu)) calc(3 * var(--bu));
background: #d3dae5;
}
.cp-tour .board .top .bel::after {
content: '';
position: absolute;
top: calc(-2 * var(--bu));
right: calc(-3 * var(--bu));
width: calc(8 * var(--bu));
height: calc(8 * var(--bu));
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 0 calc(1.5 * var(--bu)) var(--wit);
}
.cp-tour .board .top .av {
flex: none;
width: calc(24 * var(--bu));
height: calc(24 * var(--bu));
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--primair));
} .cp-tour .vak .periode {
display: inline-flex;
background: var(--grijs);
border-radius: 999px;
padding: calc(2 * var(--bu));
}
.cp-tour .vak .periode button,
.cp-tour .vak .knopje {
all: unset;
cursor: pointer;
font-family: var(--fh);
font-size: calc(11 * var(--bu));
font-weight: 600;
padding: calc(4 * var(--bu)) calc(10 * var(--bu));
border-radius: 999px;
color: var(--muted);
transition: background .2s, color .2s;
}
.cp-tour .vak .periode button.act {
background: var(--wit);
color: var(--primair);
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cp-tour .vak .knopje {
background: rgba(41, 52, 196, .08);
color: var(--primair);
}
@media (hover: hover) {
.cp-tour .vak .knopje:hover {
background: var(--primair);
color: var(--wit);
}
}
.cp-tour .vak .knopje.draait {
animation: cp-puls .6s var(--curve);
}
@keyframes cp-puls {
50% {
transform: scale(.92);
}
}
.cp-tour .vak .kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(10 * var(--bu));
margin-bottom: calc(12 * var(--bu));
}
.cp-tour .vak .kpi {
background: var(--grijs);
border-radius: calc(10 * var(--bu));
padding: calc(10 * var(--bu)) calc(12 * var(--bu));
}
.cp-tour .vak .kpi b {
display: block;
font-family: var(--fh);
font-size: calc(26 * var(--bu));
font-weight: 700;
color: var(--primair);
line-height: 1.1;
}
.cp-tour .vak .kpi span {
font-size: calc(12 * var(--bu));
color: var(--muted);
}
.cp-tour .vak .balken {
display: flex;
align-items: flex-end;
gap: calc(6 * var(--bu));
height: calc(70 * var(--bu));
margin-bottom: calc(12 * var(--bu));
}
.cp-tour .vak .balken i {
flex: 1;
background: #dbe2ea;
border-radius: calc(4 * var(--bu)) calc(4 * var(--bu)) 0 0;
transition: height .7s var(--curve), background .3s;
}
.cp-tour .vak .balken i:nth-child(4) {
background: var(--primair);
}
.cp-tour .vak .rr {
display: grid;
grid-template-columns: 1fr calc(64 * var(--bu)) calc(84 * var(--bu)) calc(64 * var(--bu));
align-items: center;
gap: calc(6 * var(--bu));
padding: calc(7 * var(--bu)) 0;
border-bottom: 1px solid var(--lijn);
}
.cp-tour .vak .rr.kopr {
font-size: calc(11 * var(--bu));
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
border-bottom-color: var(--kop);
}
.cp-tour .vak .rr.kopr span:not(:first-child) {
text-align: center;
}
.cp-tour .sw {
display: inline-block;
justify-self: center;
width: calc(30 * var(--bu));
height: calc(18 * var(--bu));
border-radius: 999px;
background: #dbe2ea;
position: relative;
cursor: pointer;
transition: background .25s;
}
.cp-tour .sw::after {
content: '';
position: absolute;
top: calc(2 * var(--bu));
left: calc(2 * var(--bu));
width: calc(14 * var(--bu));
height: calc(14 * var(--bu));
border-radius: 50%;
background: var(--wit);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
transition: transform .25s var(--curve);
}
.cp-tour .sw.aan {
background: var(--groen);
}
.cp-tour .sw.aan::after {
transform: translateX(calc(12 * var(--bu)));
}
.cp-tour .sw.vast {
cursor: default;
opacity: .85;
}
.cp-tour .sw:focus-visible {
outline: calc(2 * var(--bu)) solid var(--primair);
outline-offset: calc(2 * var(--bu));
}
.cp-tour .vak .bron {
display: grid;
grid-template-columns: 1fr calc(60 * var(--bu)) auto;
align-items: center;
gap: calc(10 * var(--bu));
padding: calc(9 * var(--bu)) 0;
border-bottom: 1px solid var(--lijn);
}
.cp-tour .vak .bron b {
display: block;
font-weight: 600;
}
.cp-tour .vak .bron span {
color: var(--muted);
font-size: calc(12 * var(--bu));
}
.cp-tour .vak .bron .lijn {
height: 2px;
background: repeating-linear-gradient(90deg, var(--accent) 0 calc(6 * var(--bu)), transparent calc(6 * var(--bu)) calc(11 * var(--bu)));
animation: cp-loop 1.2s linear infinite;
}
@keyframes cp-loop {
to {
background-position: calc(11 * var(--bu)) 0;
}
}
.cp-tour .vak .bron .ok {
font-size: calc(12 * var(--bu));
color: #047857;
white-space: nowrap;
}
.cp-tour .vak .actie {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: calc(10 * var(--bu));
padding: calc(9 * var(--bu)) 0;
border-bottom: 1px solid var(--lijn);
}
.cp-tour .vak .actie b {
display: block;
font-weight: 600;
}
.cp-tour .vak .actie span:not(.st):not(.kn) {
color: var(--muted);
font-size: calc(12 * var(--bu));
}
.cp-tour .vak .actie .st {
font-size: calc(11 * var(--bu));
font-weight: 600;
padding: calc(3 * var(--bu)) calc(8 * var(--bu));
border-radius: 999px;
background: #fff7ed;
color: #c2410c;
}
.cp-tour .vak .actie .st.klaar {
background: #ecfdf5;
color: #047857;
}
.cp-tour .vak .actie .kn {
all: unset;
cursor: pointer;
font-family: var(--fh);
font-size: calc(12 * var(--bu));
font-weight: 600;
padding: calc(5 * var(--bu)) calc(11 * var(--bu));
border-radius: calc(8 * var(--bu));
background: var(--primair);
color: var(--wit);
transition: background .2s, transform .2s;
}
@media (hover: hover) {
.cp-tour .vak .actie .kn:hover {
background: var(--primair-hover);
}
}
.cp-tour .vak .actie .kn:focus-visible {
outline: calc(2 * var(--bu)) solid var(--primair);
outline-offset: calc(2 * var(--bu));
}
.cp-tour .vak .actie .kn.klaar {
background: #eef2ff;
color: var(--primair);
cursor: default;
}
.cp-tour .vak .actie[data-doe="ga"] {
cursor: pointer;
}
.cp-tour .board .toast {
position: absolute;
left: 50%;
bottom: 4%;
transform: translate(-50%, calc(12 * var(--bu)));
background: var(--kop);
color: var(--wit);
font-size: calc(13 * var(--bu));
padding: calc(8 * var(--bu)) calc(14 * var(--bu));
border-radius: calc(8 * var(--bu));
opacity: 0;
transition: opacity .3s, transform .3s var(--curve);
pointer-events: none;
white-space: nowrap;
}
.cp-tour .board .toast.zien {
opacity: 1;
transform: translate(-50%, 0);
} .cp-tour .tour-uit .cp-bewijs {
display: flex;
gap: 1.25rem;
align-items: flex-start;
text-align: left;
max-width: 44rem;
}
.cp-tour .tour-uit .cp-bewijs img {
width: 56px;
height: 56px;
border-radius: 12px;
flex: none;
}
.cp-tour .tour-uit .cp-bewijs h3 {
margin: .4rem 0 .5rem;
font-size: clamp(1.35rem, 2.4vw, 1.6rem);
}
.cp-tour .tour-uit .cp-bewijs p {
margin-bottom: .75rem;
}
@media (max-width: 1023px) {
.cp-tour .tour-uit .cp-bewijs {
flex-direction: column;
} .cp-tour--hero .tour-kop {
background: var(--body);
padding: 3rem 0 2rem;
} .cp-tour .tour-mobiel .rail,
.cp-tour .tour-mobiel .top {
display: none;
}
.cp-tour--hero .tour-mobiel .vak {
cursor: default;
} .cp-tour .tour-mobiel .vak .rr {
grid-template-columns: 1fr 1.45fr 1fr;
gap: 4px .5rem;
padding: .4rem 0;
}
.cp-tour .tour-mobiel .vak .rr.kopr {
padding: .3rem 0 .25rem;
font-size: .7rem;
letter-spacing: .04em;
}
.cp-tour .tour-mobiel .vak .rr.kopr > span:first-child {
display: none;
}
.cp-tour .tour-mobiel .vak .rr.kopr span:not(:first-child) {
text-align: left;
}
.cp-tour .tour-mobiel .vak .rr > span:first-child {
grid-column: 1 / -1;
font-weight: 600;
}
.cp-tour .tour-mobiel .vak .rr .sw {
justify-self: start;
}
} @media (max-width: 1023px) {
.cp-tour--hero .tour-stap {
padding: 0 var(--kantlijn);
} .cp-tour--hero .tour-stap .tekst {
width: auto;
max-width: 36rem;
margin: 0 auto;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
column-gap: .9rem;
align-items: center;
padding: 1rem 0;
background: transparent;
backdrop-filter: none;
border-radius: 0;
box-shadow: none;
border-bottom: 1px solid var(--lijn);
}
.cp-tour--hero .tour-kop + .tour-stap .tekst {
border-top: 1px solid var(--lijn);
}
.cp-tour--hero .stap-kop {
display: contents;
}
.cp-tour--hero .stap-foto {
grid-row: 1 / 3;
grid-column: 1;
width: 56px;
height: 56px;
border-width: 3px;
}
.cp-tour--hero .stap-kop .section-pill {
grid-column: 2;
justify-self: start;
font-size: .72rem;
padding: 6px 16px;
} .cp-tour--hero .tour-stap .tekst h3 {
position: relative;
grid-column: 2;
display: block;
margin: .3rem 0 0;
padding: .625rem 1.75rem .625rem 0;
font-size: 1.15rem;
line-height: 1.3;
color: var(--kop);
cursor: pointer;
transition: color .3s var(--curve);
}
.cp-tour--hero .tour-stap .tekst h3::before {
content: '';
position: absolute;
inset: -9px;
}
.cp-tour--hero .tour-stap.open .tekst h3 {
color: var(--primair);
}
.cp-tour--hero .tour-stap .tekst h3::after {
content: '';
position: absolute;
right: .35rem;
top: 50%;
width: .6rem;
height: .6rem;
margin-top: -.3rem;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: translateY(-.15rem) rotate(45deg);
transition: transform .35s var(--curve), border-color .3s;
}
.cp-tour--hero .tour-stap.open .tekst h3::after {
transform: translateY(.15rem) rotate(-135deg);
border-color: var(--primair);
}
.cp-tour--hero .tour-stap .tekst h3:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 4px;
border-radius: 4px;
} .cp-tour--hero .tour-stap .uitklap {
grid-column: 1 / -1;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .45s var(--curve);
} .cp-tour--hero .tour-stap .uitklap > div {
overflow: hidden;
visibility: hidden;
margin: 0 calc(-1 * var(--kantlijn));
padding: 0 var(--kantlijn);
transition: visibility 0s linear .45s;
}
.cp-tour--hero .tour-stap.open .uitklap {
grid-template-rows: 1fr;
}
.cp-tour--hero .tour-stap.open .uitklap > div {
visibility: visible;
transition: visibility 0s;
}
.cp-tour--hero .tour-stap .tekst p {
font-size: 1rem;
margin: .75rem 0 0;
} .cp-tour--hero.direct .uitklap,
.cp-tour--hero.direct .uitklap > div,
.cp-tour--hero.direct .tekst h3::after {
transition: none;
} .cp-tour--hero .tour-tel {
display: flex;
flex-direction: column;
position: relative;
height: 620px;
width: min(320px, 100vw - 2rem);
max-width: none; margin: 1.25rem auto 2.5rem;
--bu: 1px;
background: var(--wit);
overflow: hidden;
} .cp-tour--hero .tour-tel .board {
position: relative;
inset: auto;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: 0;
background: var(--grijs);
box-shadow: none;
} .cp-tour--hero .tour-tel .board .top {
display: flex;
position: static;
order: 1;
height: auto;
gap: 8px;
padding: 30px 14px 8px;
font-size: 12px;
background: var(--wit);
}
.cp-tour--hero .tour-tel .board .top .kruimel {
font-size: 14px;
}
.cp-tour--hero .tour-tel .board .top .zoek {
display: none;
} .cp-tour--hero .tour-tel .board .top .wie {
gap: 8px;
}
.cp-tour--hero .tour-tel .board .top .bel {
width: 14px;
height: 14px;
}
.cp-tour--hero .tour-tel .board .top .av {
width: 22px;
height: 22px;
} .cp-tour--hero .tour-tel .board .vak {
display: none;
}
.cp-tour--hero .tour-tel .board .vak.is-aan {
display: flex;
position: static;
order: 2;
flex: 1;
min-height: 0;
width: auto;
height: auto;
margin: 12px;
padding: 12px;
border-radius: 12px;
box-shadow: none;
opacity: 1;
overflow-y: auto;
cursor: default;
} .cp-tour--hero .tour-tel .board .vak .actie {
grid-template-columns: 1fr auto;
row-gap: 6px;
}
.cp-tour--hero .tour-tel .board .vak .actie > div {
grid-column: 1 / -1;
}
.cp-tour--hero .tour-tel .board .vak .actie .st {
justify-self: start;
} .cp-tour--hero .tour-tel .board .vak .bron {
grid-template-columns: 1fr auto;
row-gap: 6px;
}
.cp-tour--hero .tour-tel .board .vak .bron > div:first-child {
grid-column: 1 / -1;
} .cp-tour--hero .tour-tel .board .rail {
display: flex;
position: static;
order: 3;
width: auto;
flex-direction: row;
gap: 0;
padding: 6px 6px 4px;
border-right: 0;
border-top: 1px solid var(--lijn);
border-radius: 0;
background: var(--grijs);
}
.cp-tour--hero .tour-tel .board .rail .merk,
.cp-tour--hero .tour-tel .board .rail .streep,
.cp-tour--hero .tour-tel .board .rail .ri {
display: none;
}
.cp-tour--hero .tour-tel .board .rail button {
flex: 1 1 0;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 8px 4px 6px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
} .cp-tour--hero .tour-tel .board .rail button i {
width: 20px;
height: 20px;
border-radius: 0;
background: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
.cp-tour--hero .tour-tel .board .rail button[data-naar="1"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20v-7M12 20V5M19 20v-10M3 20h18'/%3E%3C/svg%3E");
}
.cp-tour--hero .tour-tel .board .rail button[data-naar="2"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
}
.cp-tour--hero .tour-tel .board .rail button[data-naar="3"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.5-1.5'/%3E%3C/svg%3E");
}
.cp-tour--hero .tour-tel .board .rail button[data-naar="4"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}
.cp-tour--hero .tour-tel .board .rail button.act {
background: none;
box-shadow: none;
} .cp-tour--hero .tour-tel .board .toast {
left: 14px;
right: 14px;
bottom: 72px;
transform: translateY(12px);
white-space: normal;
text-align: center;
}
.cp-tour--hero .tour-tel .board .toast.zien {
transform: none;
} .cp-tour--hero .tour-tel .vak .kn,
.cp-tour--hero .tour-tel .vak .knopje,
.cp-tour--hero .tour-tel .vak .periode button {
position: relative;
}
.cp-tour--hero .tour-tel .vak .kn::before,
.cp-tour--hero .tour-tel .vak .knopje::before,
.cp-tour--hero .tour-tel .vak .sw::before {
content: '';
position: absolute;
inset: -9px;
}
.cp-tour--hero .tour-tel .vak .sw::before {
inset: -13px -8px;
}
.cp-tour--hero .tour-tel .vak .periode button::before {
content: '';
position: absolute;
inset: -10px 0;
} .cp-tour--hero .tour-uit {
padding: 2.5rem var(--kantlijn) 5rem;
} .cp-tour--hero .tour-uit .cp-bewijs {
background: var(--wit);
border-radius: var(--r-kaart);
padding: 1.5rem;
box-shadow: var(--schaduw);
}
} .cp-rollen .kiezer {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.cp-rollen .kiezer button {
all: unset;
cursor: pointer;
font-family: var(--fh);
font-weight: 600;
font-size: .95rem;
padding: .6rem 1.25rem;
border-radius: var(--r-pill);
background: var(--wit);
color: var(--kop);
box-shadow: var(--schaduw);
transition: transform .3s var(--curve), background .3s, color .3s, box-shadow .3s;
}
@media (hover: hover) {
.cp-rollen .kiezer button:hover {
transform: translateY(-2px);
box-shadow: var(--schaduw-hover);
}
}
.cp-rollen .kiezer button.act {
background: var(--primair);
color: var(--wit);
box-shadow: var(--schaduw-cta);
}
.cp-rollen .kiezer button:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
} .cp-rollen .mdv {
position: relative;
}
.cp-rollen .mdv::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-kaart);
background: rgba(41, 52, 196, .07);
transform: rotate(-2deg) translateX(10px) translateY(-10px);
}
.cp-rollen .mdv .scherm-kaart {
position: relative;
z-index: 1;
background: var(--wit);
border-radius: var(--r-kaart);
box-shadow: var(--schaduw);
overflow: hidden;
}
.cp-rollen .md {
font-size: .85rem;
color: var(--kop);
}
.cp-rollen .md .chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--grijs);
border-bottom: 1px solid var(--lijn);
}
.cp-rollen .md .chrome i {
width: 10px;
height: 10px;
border-radius: 50%;
background: #dbe2ea;
}
.cp-rollen .md .chrome .url {
margin-left: 10px;
font-size: .75rem;
color: var(--muted);
background: var(--wit);
border-radius: 6px;
padding: 3px 10px;
flex: 1;
max-width: 320px;
}
.cp-rollen .md-app {
display: grid;
grid-template-columns: 190px 1fr;
min-height: 520px;
}
.cp-rollen .md aside {
background: var(--grijs);
border-right: 1px solid var(--lijn);
padding: 1rem .75rem;
display: flex;
flex-direction: column;
}
.cp-rollen .md .wie {
display: flex;
align-items: center;
gap: .5rem;
font-size: .78rem;
color: var(--muted);
padding: .25rem .5rem .9rem;
border-bottom: 1px solid var(--lijn);
margin-bottom: .6rem;
}
.cp-rollen .md .wie i {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--primair));
flex: none;
}
.cp-rollen .md nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.cp-rollen .md nav button {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem .65rem;
border-radius: 8px;
color: var(--kop);
transition: background .2s, color .2s;
}
@media (hover: hover) {
.cp-rollen .md nav button:hover {
background: var(--wit);
}
}
.cp-rollen .md nav button.act {
background: rgba(41, 52, 196, .08);
color: var(--primair);
font-weight: 600;
}
.cp-rollen .md nav button:focus-visible,
.cp-rollen .md .mbtn:focus-visible,
.cp-rollen .md .periode button:focus-visible,
.cp-rollen .md .slot:focus-visible,
.cp-rollen .meer-knop:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
}
.cp-rollen .md nav .badge {
font-size: .7rem;
font-weight: 700;
background: var(--primair);
color: var(--wit);
border-radius: 999px;
padding: 1px 7px;
}
.cp-rollen .md .tip {
margin-top: auto;
font-size: .72rem;
color: var(--muted);
padding: .5rem .65rem;
}
.cp-rollen .md main {
padding: 1.1rem 1.25rem;
position: relative;
}
.cp-rollen .md-view {
display: none;
}
.cp-rollen .md-view.act {
display: block;
}
.cp-rollen .md-kop {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: .9rem;
flex-wrap: wrap;
}
.cp-rollen .md h6 {
font-family: var(--fh);
font-size: .95rem;
font-weight: 600;
margin: 0;
color: var(--kop);
}
.cp-rollen .md .md-lijst h6 {
font-size: .8rem;
color: var(--muted);
margin: 0 0 .35rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.cp-rollen .md .tag {
font-family: var(--fh);
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--primair);
background: rgba(41, 52, 196, .08);
border-radius: 999px;
padding: 3px 9px;
}
.cp-rollen .md .tag.groen {
color: #047857;
background: #ecfdf5;
}
.cp-rollen .md .tag.grijs {
color: var(--muted);
background: var(--grijs);
}
.cp-rollen .md .periode {
display: inline-flex;
background: var(--grijs);
border-radius: 999px;
padding: 2px;
}
.cp-rollen .md .periode button {
all: unset;
cursor: pointer;
font-family: var(--fh);
font-size: .72rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
color: var(--muted);
transition: background .2s, color .2s;
}
.cp-rollen .md .periode button.act {
background: var(--wit);
color: var(--primair);
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cp-rollen .kpi3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .6rem;
margin-bottom: .9rem;
}
.cp-rollen .kpi3 .kc {
background: var(--grijs);
border-radius: 10px;
padding: .65rem .8rem;
}
.cp-rollen .kpi3 .kc b {
display: block;
font-family: var(--fh);
font-size: 1.4rem;
font-weight: 700;
color: var(--primair);
line-height: 1.1;
}
.cp-rollen .kpi3 .kc span {
font-size: .72rem;
color: var(--muted);
}
.cp-rollen .md .staaf {
display: flex;
align-items: flex-end;
gap: 5px;
height: 64px;
margin-bottom: 1rem;
}
.cp-rollen .md .staaf i {
flex: 1;
background: #dbe2ea;
border-radius: 3px 3px 0 0;
transition: height .6s var(--curve);
}
.cp-rollen .md .staaf i:nth-child(4) {
background: var(--primair);
}
.cp-rollen .md-lijst {
margin-bottom: .9rem;
}
.cp-rollen .mrij {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .5rem 0;
border-bottom: 1px solid var(--lijn);
}
.cp-rollen .mrij > span:first-child {
display: flex;
flex-direction: column;
}
.cp-rollen .mrij small {
color: var(--muted);
font-size: .72rem;
}
.cp-rollen .mrij > span:last-child {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.cp-rollen .mrij.kies {
cursor: pointer;
padding-left: .5rem;
padding-right: .5rem;
border-radius: 8px;
transition: background .2s;
}
@media (hover: hover) {
.cp-rollen .mrij.kies:hover {
background: var(--grijs);
}
}
.cp-rollen .mrij.kies.act {
background: rgba(41, 52, 196, .06);
}
.cp-rollen .md .st {
font-size: .7rem; font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
background: #fff7ed;
color: #c2410c;
white-space: nowrap;
}
.cp-rollen .md .st.groen {
background: #ecfdf5;
color: #047857;
}
.cp-rollen .md .st.grijs {
background: var(--grijs);
color: var(--muted);
}
.cp-rollen .mbtn {
all: unset;
cursor: pointer;
font-family: var(--fh);
font-size: .75rem;
font-weight: 600;
padding: .4rem .8rem;
border-radius: 8px;
background: var(--primair);
color: var(--wit);
transition: background .2s, transform .2s;
white-space: nowrap;
}
@media (hover: hover) {
.cp-rollen .mbtn:hover {
background: var(--primair-hover);
}
}
.cp-rollen .mbtn.licht {
background: rgba(41, 52, 196, .08);
color: var(--primair);
}
@media (hover: hover) {
.cp-rollen .mbtn.licht:hover {
background: rgba(41, 52, 196, .16);
}
}
.cp-rollen .mbtn[disabled] {
opacity: .5;
cursor: default;
}
.cp-rollen .mknoppen {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-top: .5rem;
}
.cp-rollen .md .detail {
background: var(--grijs);
border-radius: 12px;
padding: .9rem 1rem;
margin-top: .5rem;
}
.cp-rollen .md .detail p {
margin: .4rem 0 .6rem;
color: var(--muted);
font-size: .8rem;
} .cp-rollen .md .zoek {
font: inherit;
font-size: 16px;
border: 1px solid var(--lijn);
border-radius: 8px;
padding: .4rem .7rem;
width: 190px;
background: var(--wit);
color: var(--kop);
}
@media (min-width: 1024px) {
.cp-rollen .md .zoek {
font-size: .8rem;
}
}
.cp-rollen .md .zoek:focus {
outline: 2px solid var(--primair);
outline-offset: 1px;
}
.cp-rollen .md .leeg,
.cp-rollen .md-noot {
font-size: .78rem;
color: var(--muted);
padding: .5rem 0;
}
.cp-rollen .md .timer {
display: inline-flex;
align-items: center;
gap: .6rem;
}
.cp-rollen .md .timer b {
font-family: var(--fh);
font-variant-numeric: tabular-nums;
color: var(--primair);
}
.cp-rollen .md .urentabel {
width: 100%;
border-collapse: collapse;
font-size: .8rem;
}
.cp-rollen .md .urentabel th {
text-align: left;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
padding: .35rem 0;
border-bottom: 1px solid var(--kop);
}
.cp-rollen .md .urentabel td {
padding: .45rem 0;
border-bottom: 1px solid var(--lijn);
}
.cp-rollen .md .urentabel td:last-child,
.cp-rollen .md .urentabel th:last-child {
text-align: right;
}
.cp-rollen .md .urentabel tfoot td {
font-weight: 600;
border-bottom: 0;
}
.cp-rollen .md .urentabel tr.nieuw td {
animation: cp-inkomen .5s var(--curve);
}
@keyframes cp-inkomen {
from {
opacity: 0;
transform: translateY(6px);
}
}
.cp-rollen .md .rooster {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: .5rem;
margin-bottom: .5rem;
}
.cp-rollen .md .dag {
display: flex;
flex-direction: column;
gap: 4px;
}
.cp-rollen .md .dag b {
font-size: .72rem;
color: var(--muted);
text-align: center;
margin-bottom: 2px;
}
.cp-rollen .md .slot {
font-size: .72rem;
text-align: center;
padding: .4rem .2rem;
border-radius: 8px;
border: 1px solid var(--lijn);
background: var(--wit);
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
@media (hover: hover) {
.cp-rollen .md .slot:hover {
border-color: var(--primair);
color: var(--primair);
}
}
.cp-rollen .md .slot.vol {
background: var(--grijs);
color: var(--muted);
cursor: default;
border-color: transparent;
}
.cp-rollen .md .slot.gekozen {
background: var(--primair);
color: var(--wit);
border-color: var(--primair);
}
.cp-rollen .md .toast {
position: absolute;
left: 50%;
bottom: 14px;
transform: translate(-50%, 10px);
background: var(--kop);
color: var(--wit);
font-size: .78rem;
padding: .5rem .9rem;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
transition: opacity .3s, transform .3s var(--curve);
pointer-events: none;
max-width: calc(100% - 2rem);
overflow: hidden;
text-overflow: ellipsis;
}
.cp-rollen .md .toast.zien {
opacity: 1;
transform: translate(-50%, 0);
} .cp-rollen .md[data-rol="eigenaar"] [data-zicht]:not([data-zicht~="e"]),
.cp-rollen .md[data-rol="medewerker"] [data-zicht]:not([data-zicht~="m"]),
.cp-rollen .md[data-rol="klant"] [data-zicht]:not([data-zicht~="k"]) {
display: none !important;
}
.cp-rollen .meer {
margin-top: 1.5rem;
}
.cp-rollen .meer-knop {
all: unset;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--fh);
font-weight: 600;
color: var(--primair);
padding: .6rem 1.1rem;
border-radius: var(--r-pill);
background: rgba(41, 52, 196, .08);
transition: background .2s;
}
@media (hover: hover) {
.cp-rollen .meer-knop:hover {
background: rgba(41, 52, 196, .14);
}
}
.cp-rollen .meer-knop .chev {
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform .3s var(--curve);
}
.cp-rollen .meer-knop[aria-expanded="true"] .chev {
transform: rotate(-135deg) translateY(-2px);
}
.cp-rollen .meer-paneel {
max-width: 44rem;
padding-top: 1.25rem;
}
.cp-rollen .meer-paneel h3 {
font-size: 1.2rem;
margin: 0 0 .5rem;
color: var(--primair);
} .cp-rollen .meer-paneel ul {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
display: grid;
gap: .55rem;
}
.cp-rollen .meer-paneel li {
display: flex;
align-items: flex-start;
gap: .7rem;
font-size: 1rem;
line-height: 1.6;
color: var(--kop);
}
.cp-rollen .meer-paneel li i {
flex: none;
color: var(--groen);
font-size: .85rem;
margin-top: .4rem;
}
.cp-rollen .meer-paneel .voetnoot {
color: var(--kop);
font-size: 1rem;
line-height: 1.6;
margin: 0;
padding-top: 1rem;
border-top: 1px solid var(--lijn);
}
.cp-rollen .meer-paneel .voetnoot b {
font-weight: 600;
}
.cp-rollen .meer-paneel .voetnoot a {
color: var(--primair);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: color .2s var(--curve);
}
@media (hover: hover) {
.cp-rollen .meer-paneel .voetnoot a:hover {
color: var(--primair-hover);
}
} @media (max-width: 1023px) { .cp-rollen .mdv::before {
display: none;
}
.cp-rollen .mdv .scherm-kaart {
display: flex;
flex-direction: column;
height: 620px;
border-radius: 2.5rem;
box-shadow: var(--schaduw-hover);
} .cp-rollen .kiezer {
justify-content: center;
} .cp-rollen .kiezer button {
padding: .7rem 1.25rem;
}
.cp-rollen .meer {
text-align: center;
}
.cp-rollen .meer-paneel {
text-align: left;
}
.cp-rollen .md {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.cp-rollen .md .chrome {
display: none;
}
.cp-rollen .md-app {
flex: 1;
min-height: 0;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.cp-rollen .md aside {
display: contents;
} .cp-rollen .md .wie {
grid-row: 1;
margin: 0;
padding: 34px 14px 10px;
font-size: .78rem;
color: var(--kop);
border-bottom: 1px solid var(--lijn);
}
.cp-rollen .md .tip {
display: none;
} .cp-rollen .md main {
grid-row: 2;
min-height: 0;
overflow-y: auto;
padding: 10px 14px;
} .cp-rollen .md nav {
grid-row: 3;
flex-direction: row;
gap: 0;
padding: 0 6px;
border-top: 1px solid var(--lijn);
background: var(--grijs);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cp-rollen .md nav::-webkit-scrollbar {
display: none;
}
.cp-rollen .md nav::after {
content: '';
position: sticky;
right: 0;
flex: none;
width: 36px;
margin-left: -36px;
background: linear-gradient(90deg, transparent, var(--grijs) 70%);
pointer-events: none;
transition: opacity .25s;
}
.cp-rollen .md nav.eind::after {
opacity: 0;
}
.cp-rollen .md nav::before {
content: '';
position: sticky;
left: 0;
flex: none;
width: 36px;
margin-right: -36px;
background: linear-gradient(90deg, var(--grijs) 30%, transparent);
pointer-events: none;
opacity: 0;
transition: opacity .25s;
z-index: 1;
}
.cp-rollen .md nav.begin::before {
opacity: 1;
}
.cp-rollen .md nav button {
position: relative;
flex: none;
display: grid;
justify-items: center;
gap: 3px;
padding: 8px 10px 6px;
border-radius: 0;
font-size: 11px;
font-weight: 600;
color: var(--muted);
}
.cp-rollen .md nav button::before {
content: '';
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
.cp-rollen .md nav button.act {
background: none;
color: var(--primair);
} .cp-rollen .md nav .badge {
position: absolute;
top: 4px;
left: calc(50% + 6px);
font-size: 11px;
line-height: 14px;
padding: 0 4px;
}
.cp-rollen .md nav button[data-view="overzicht"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20v-7M12 20V5M19 20v-10M3 20h18'/%3E%3C/svg%3E");
}
.cp-rollen .md nav button[data-view="aanvragen"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2M5 5h14l3 7v7H2v-7z'/%3E%3C/svg%3E");
}
.cp-rollen .md nav button[data-view="klanten"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
}
.cp-rollen .md nav button[data-view="uren"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M12 7v5l3 2'/%3E%3C/svg%3E");
}
.cp-rollen .md nav button[data-view="facturen"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E");
}
.cp-rollen .md nav button[data-view="agenda"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 11h16M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.cp-rollen .md nav button[data-view="documenten"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
.cp-rollen .md nav button[data-view="instellingen"] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
} .cp-rollen .md .toast {
bottom: 82px;
} .cp-rollen .kpi3 {
grid-template-columns: 1fr 1fr;
}
.cp-rollen .md[data-rol="eigenaar"] .kpi3 .kc:nth-child(1),
.cp-rollen .md[data-rol="medewerker"] .kpi3 .kc:nth-child(3),
.cp-rollen .md[data-rol="klant"] .kpi3 .kc:nth-child(6) {
grid-column: 1 / -1;
}
.cp-rollen .md .rooster {
gap: .25rem;
}
.cp-rollen .md .zoek {
width: 100%;
}
} .cp-prijs .meter {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
align-items: start;
}
.cp-prijs .vraag {
border: 0;
padding: 0;
margin: 0 0 1.5rem;
}
.cp-prijs .vraag legend {
font-family: var(--fh);
font-weight: 600;
font-size: 1.05rem;
margin-bottom: .6rem;
padding: 0;
color: var(--kop);
}
.cp-prijs .vraag .opties {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.cp-prijs .vraag .opties button {
all: unset;
cursor: pointer;
font-size: .9rem;
font-weight: 500;
padding: .55rem 1rem;
border-radius: var(--r-pill);
background: var(--wit);
color: var(--kop);
box-shadow: var(--schaduw);
transition: transform .3s var(--curve), background .3s, color .3s, box-shadow .3s;
}
@media (hover: hover) {
.cp-prijs .vraag .opties button:hover {
transform: translateY(-2px);
box-shadow: var(--schaduw-hover);
}
}
.cp-prijs .vraag .opties button.act {
background: var(--primair);
color: var(--wit);
box-shadow: var(--schaduw-cta);
}
.cp-prijs .vraag .opties button:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
}
.cp-prijs .mkv {
position: sticky;
top: calc(var(--header-offset, 0px) + 2rem);
}
.cp-prijs .mkv::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-kaart);
background: rgba(41, 52, 196, .07);
transform: rotate(-2deg) translateX(10px) translateY(-10px);
}
.cp-prijs .meterkaart {
position: relative;
z-index: 1;
background: var(--wit);
border-radius: var(--r-kaart);
box-shadow: var(--schaduw);
padding: 1.75rem;
}
.cp-prijs .meterkaart .mono {
font-family: var(--fh);
font-size: .72rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--muted);
}
.cp-prijs .meterkaart .balk {
position: relative;
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg, #dbeafe, #c7d2fe, var(--primair));
margin: 2.75rem 0 2.6rem;
}
.cp-prijs .meterkaart .naald {
position: absolute;
top: 50%;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--wit);
border: 4px solid var(--primair);
box-shadow: var(--schaduw-hover);
transform: translate(-50%, -50%);
transition: left .6s var(--curve);
z-index: 2;
}
.cp-prijs .meterkaart .anker {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
pointer-events: none;
}
.cp-prijs .meterkaart .anker i {
width: 6px;
height: 18px;
border-radius: 3px;
background: var(--wit);
box-shadow: 0 0 0 2px rgba(41, 52, 196, .35);
}
.cp-prijs .meterkaart .anker b {
position: absolute;
top: -1.6rem;
font-size: .7rem; font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
transition: color .3s;
}
.cp-prijs .meterkaart .anker.act b {
color: var(--primair);
}
.cp-prijs .meterkaart .uitkomst {
font-family: var(--fh);
font-weight: 600;
font-size: 1.25rem;
margin: 0 0 1rem;
color: var(--kop);
}
.cp-prijs .meterkaart .uitkomst span {
color: var(--primair);
}
.cp-prijs .ankerkaart {
background: var(--grijs);
border-radius: 1rem;
padding: 1.1rem 1.25rem;
margin-bottom: 1rem;
animation: cp-inkomen .5s var(--curve);
}
.cp-prijs .ankerkaart .section-pill {
margin-bottom: .5rem;
} .cp-prijs .ankerkaart .kopregel {
display: flex;
align-items: center;
gap: .9rem;
}
.cp-prijs .ankerkaart .merk {
flex: none;
width: 44px;
height: 44px;
border-radius: 10px;
overflow: hidden;
display: grid;
place-items: center;
background: var(--wit);
border: 1px solid var(--lijn);
}
.cp-prijs .ankerkaart .merk img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cp-prijs .ankerkaart .kopregel h4 {
margin-bottom: 0;
}
.cp-prijs .ankerkaart .kopregel + .kort {
margin-top: .5rem;
}
.cp-prijs .ankerkaart h4 {
font-family: var(--fh);
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 .35rem;
color: var(--primair);
}
.cp-prijs .ankerkaart .kort {
margin: 0 0 .6rem;
color: var(--muted);
font-size: .92rem;
line-height: 1.55;
}
.cp-prijs .meterkaart .noot {
color: var(--muted);
font-size: .9rem;
line-height: 1.55;
margin: 0 0 1rem;
}
@media (max-width: 900px) {
.cp-prijs .meter {
grid-template-columns: 1fr;
gap: 2rem;
}
.cp-prijs .mkv {
position: relative;
top: auto;
}
} @media (max-width: 1023px) {
.cp-prijs .vraag .opties button {
padding: .7rem 1rem;
}
} @media (max-width: 767px) {
.cp-prijs .meterkaart .anker + .anker b {
top: auto;
bottom: -1.6rem;
}
.cp-prijs .meterkaart .anker + .anker + .anker b {
top: -1.6rem;
bottom: auto;
}
} .cp-rollen,
.cp-prijs {
overflow-x: clip;
}  .cp-kiezer {
display: flex;
gap: .5rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 2rem;
}
.cp-kiezer button {
all: unset;
cursor: pointer;
font-family: var(--fh);
font-weight: 600;
font-size: .95rem;
padding: .6rem 1.25rem;
border-radius: var(--r-pill);
background: var(--wit);
color: var(--kop);
box-shadow: var(--schaduw);
transition: transform .3s var(--curve), background .3s, color .3s, box-shadow .3s;
}
@media (hover: hover) {
.cp-kiezer button:hover {
transform: translateY(-2px);
box-shadow: var(--schaduw-hover);
}
}
.cp-kiezer button.act {
background: var(--primair);
color: var(--wit);
box-shadow: var(--schaduw-cta);
}
.cp-kiezer button:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
} .cp-kaart-nav {
display: none;
}
@media (max-width: 767px) {
.cp-koppel .cp-kiezer,
.cp-verzoek .cp-kiezer {
display: none;
}
.cp-kaart-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--lijn);
}
.cp-kaart-nav[hidden] {
display: none;
}
.cp-kaart-nav-midden {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
min-width: 0;
text-align: center;
}
.cp-kaart-nav .naam {
font-family: var(--fh);
font-weight: 600;
font-size: .95rem;
line-height: 1.3;
color: var(--kop);
} .cp-koppel-kaart.schuif-links > .cp-schema.act,
.cp-verzoek-kaart.schuif-links > .cp-verzoek-soort.act {
animation: cp-schuif-links .3s var(--curve) both;
}
.cp-koppel-kaart.schuif-rechts > .cp-schema.act,
.cp-verzoek-kaart.schuif-rechts > .cp-verzoek-soort.act {
animation: cp-schuif-rechts .3s var(--curve) both;
}
}
@keyframes cp-schuif-links {
from {
opacity: 0;
transform: translateX(24px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes cp-schuif-rechts {
from {
opacity: 0;
transform: translateX(-24px);
}
to {
opacity: 1;
transform: none;
}
} .cp-koppel-kaart {
padding: 1.5rem;
transform: none;
}
@media (hover: hover) {
.cp-koppel-kaart:hover {
transform: none;
}
.cp-koppel-kaart:hover::after {
box-shadow: var(--schaduw);
}
}
.cp-schema {
display: grid;
grid-template-columns: 1fr 240px 1fr;
gap: 1rem;
align-items: stretch;
}
.cp-schema[hidden] {
display: none;
} @media (min-width: 1024px) {
.cp-koppel-kaart {
display: grid;
align-items: center;
}
.cp-koppel-kaart > .cp-schema {
grid-area: 1 / 1;
}
.cp-koppel-kaart > .cp-schema[hidden] {
display: grid;
visibility: hidden;
pointer-events: none;
}
} .cp-schema .cp-koppel-velden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
} .cp-schema .baan {
position: relative;
min-height: 200px;
align-self: center;
}
.cp-schema .baan svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.cp-schema .draad {
fill: none;
stroke: var(--primair);
stroke-width: 2;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.cp-schema .draad.terug {
stroke: var(--accent);
stroke-dasharray: .04 .02;
} .cp-schema .draad.v {
display: none;
}
.cp-schema.loopt .draad {
animation: cp-teken 1.2s cubic-bezier(0.22, 0.61, 0.27, 1) forwards;
}
.cp-schema.loopt .draad.terug {
animation-delay: .3s;
}
@keyframes cp-teken {
to {
stroke-dashoffset: 0;
}
}
.cp-schema .midden {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--r-pill);
background: var(--wit);
border: 1px solid var(--lijn);
color: var(--primair);
white-space: nowrap;
}  .cp-schema .chip {
position: absolute;
left: 0;
top: calc(16px + var(--i) * 34px);
z-index: 2;
display: inline-flex;
white-space: nowrap;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
padding: 4px 10px;
border-radius: var(--r-pill);
background: #eef2ff;
color: var(--primair);
border: 1px solid rgba(41, 52, 196, .15);
opacity: 0;
max-width: 100%;
}
.cp-schema .chip .kort {
display: none;
}
.cp-schema .chip.terug {
left: auto;
right: 0;
background: #e0f2fe;
color: #0369a1;
border-color: rgba(3, 105, 161, .15);
}
.cp-schema.loopt .chip {
animation: cp-reis 1.6s cubic-bezier(0.31, -0.01, 0.55, 0.99) forwards;
animation-delay: var(--wacht);
}
.cp-schema.loopt .chip.terug {
animation-name: cp-reisterug;
}
.cp-schema .chip.af {
opacity: 0 !important;
}
@keyframes cp-reis {
from {
left: 0;
transform: translateX(0);
opacity: 1;
}
to {
left: 100%;
transform: translateX(-100%);
opacity: 1;
}
}
@keyframes cp-reisterug {
from {
right: 0;
transform: translateX(0);
opacity: 1;
}
to {
right: 100%;
transform: translateX(100%);
opacity: 1;
}
}  .cp-schema .scr .v {
position: relative;
transition: opacity .3s, background .3s, box-shadow .3s;
}
.cp-schema .scr .v.wacht {
opacity: .3;
}
.cp-schema .scr .v.aan {
opacity: 1;
background: #f0fdf4;
box-shadow: 0 0 0 2px #f0fdf4;
}
.cp-schema .scr .ok {
position: absolute;
top: -6px;
right: -6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--groen);
box-shadow: 0 0 0 2px var(--wit);
opacity: 0;
transform: scale(.4);
transition: opacity .3s, transform .3s var(--curve);
z-index: 1;
}
.cp-schema .scr .ok::after {
content: '';
position: absolute;
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid var(--wit);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.cp-schema .scr .v.aan .ok {
opacity: 1;
transform: scale(1);
} .cp-schema .scr tr.v td:last-child {
position: relative;
}
.cp-schema .scr tr.v td .ok {
top: 50%;
right: 2px;
margin-top: -8px;
} .cp-schema .scr .kopje {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 9px 12px;
font-weight: 600;
border-bottom: 1px solid var(--lijn);
}
.cp-schema .scr .mono {
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
color: var(--muted);
}
.cp-schema .scr small.mono {
display: block;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 2px;
}
.cp-schema .scr b {
font-weight: 600;
color: var(--kop);
}
.cp-schema .scr s {
color: var(--muted);
}
.cp-schema .scr .sbtn {
display: inline-block;
background: var(--primair);
color: var(--wit);
border-radius: 6px;
padding: 5px 12px;
font-weight: 600;
white-space: nowrap;
}
.cp-schema .scr .stip {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--groen);
flex: none;
}
.cp-schema .scr .veld {
display: block;
border: 1px solid var(--lijn);
border-radius: 6px;
padding: 5px 8px;
color: var(--muted);
background: var(--wit);
}
.cp-schema .scr .veld.tekstvak,
.cp-schema .scr .lijnen {
display: grid;
gap: 5px;
padding: 8px;
}
.cp-schema .scr .veld.tekstvak i,
.cp-schema .scr .lijnen i {
display: block;
height: 5px;
border-radius: 3px;
background: var(--lijn);
width: 92%;
}
.cp-schema .scr .veld.tekstvak i:nth-child(2),
.cp-schema .scr .lijnen i:nth-child(2) {
width: 70%;
}
.cp-schema .scr .veld.tekstvak i:nth-child(3),
.cp-schema .scr .lijnen i:nth-child(3) {
width: 84%;
}
.cp-schema .scr .lijnen i:nth-child(4) {
width: 40%;
}
.cp-schema .scr table {
width: 100%;
border-collapse: collapse;
}
.cp-schema .scr th {
text-align: left;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
padding: 4px 6px;
border-bottom: 1px solid var(--lijn);
}
.cp-schema .scr td {
padding: 5px 6px;
border-bottom: 1px solid #f3f4f6;
}
.cp-schema .scr th:nth-child(n+2),
.cp-schema .scr td:nth-child(n+2) {
text-align: right;
} .cp-schema .scr .blokje {
padding: 6px 8px;
border-radius: 6px;
border: 1px solid var(--lijn);
} .cp-schema .scr--webshop .best,
.cp-schema .scr--boekhouding .fact,
.cp-schema .scr--formulier .form,
.cp-schema .scr--crm .crm,
.cp-schema .scr--voorraad .voorraad,
.cp-schema .scr--productpagina .prod,
.cp-schema .scr--agenda .week,
.cp-schema .scr--afspraak .boek {
padding: 10px 12px;
display: grid;
gap: 8px;
align-content: start;
}
.cp-schema .best-kop {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
}
.cp-schema .best-regels {
display: grid;
gap: 4px;
padding: 6px 8px;
border-radius: 6px;
}
.cp-schema .best-regels .regel {
display: grid;
grid-template-columns: 22px 1fr auto auto;
gap: 8px;
align-items: center;
}
.cp-schema .best-regels .thumb {
width: 22px;
height: 22px;
border-radius: 4px;
background: var(--lijn);
}
.cp-schema .best-regels .bedrag {
font-weight: 600;
}
.cp-schema .best-onder {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.cp-schema .best-klant,
.cp-schema .best-totaal,
.cp-schema .fact-relatie,
.cp-schema .fact-totaal,
.cp-schema .crm-notitie,
.cp-schema .crm-taak,
.cp-schema .vr-regel,
.cp-schema .prod-nieuw,
.cp-schema .week-regel,
.cp-schema .form-bron {
padding: 6px 8px;
border-radius: 6px;
border: 1px solid var(--lijn);
}
.cp-schema .best-klant b,
.cp-schema .best-klant span,
.cp-schema .fact-relatie b,
.cp-schema .fact-relatie span,
.cp-schema .fact-nr b,
.cp-schema .fact-nr span,
.cp-schema .crm-kop b,
.cp-schema .crm-kop span,
.cp-schema .week-regel span {
display: block;
}
.cp-schema .best-totaal div,
.cp-schema .fact-totaal div {
display: flex;
justify-content: space-between;
gap: 8px;
}
.cp-schema .best-totaal .som,
.cp-schema .fact-totaal .som {
font-weight: 600;
border-top: 1px solid var(--lijn);
margin-top: 4px;
padding-top: 4px;
}
.cp-schema .best-betaal,
.cp-schema .crm-bron,
.cp-schema .crm-taak,
.cp-schema .vr-regel,
.cp-schema .prod-knop,
.cp-schema .prod-nieuw,
.cp-schema .boek-mail {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
} .cp-schema .fact-kop {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.cp-schema .fact-nr {
padding: 6px 8px;
border-radius: 6px;
}
.cp-schema .fact-nr b {
font-size: 14px;
}
.cp-schema .fact-status {
padding: 6px 0;
}
.cp-schema .fact-status.wacht {
opacity: 1;
}
.cp-schema .fact-status .wordt,
.cp-schema .fact-status.zend .was {
display: none;
}
.cp-schema .fact-status.zend .wordt {
display: inline-block;
}
.cp-schema .fact-regels {
border-radius: 6px;
padding: 2px;
}
.cp-schema .fact-totaal {
margin-left: auto;
width: 62%;
} .cp-schema .form-groep {
padding: 6px 8px;
border-radius: 6px;
display: grid;
gap: 6px;
}
.cp-schema .form-groep label {
display: grid;
gap: 2px;
}
.cp-schema .form-groep label > span:first-child {
font-size: 11px;
font-weight: 600;
}
.cp-schema .form-rij {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
align-items: end;
}
.cp-schema .form-bron {
border-style: dashed;
}
.cp-schema .form-knop {
display: flex;
align-items: center;
gap: 10px;
padding-top: 2px;
} .cp-schema .crm-kop {
display: flex;
gap: 10px;
align-items: center;
padding: 6px 8px;
border-radius: 6px;
}
.cp-schema .crm-kop .avatar {
position: relative;
width: 34px;
height: 34px;
border-radius: 50%;
background: #eef2ff;
flex: none;
overflow: hidden;
}
.cp-schema .crm-kop .avatar i {
position: absolute;
left: 50%;
top: 7px;
width: 11px;
height: 11px;
margin-left: -5.5px;
border-radius: 50%;
background: var(--primair);
opacity: .55;
}
.cp-schema .crm-kop .avatar::after {
content: '';
position: absolute;
left: 50%;
top: 21px;
width: 22px;
height: 22px;
margin-left: -11px;
border-radius: 50%;
background: var(--primair);
opacity: .55;
}
.cp-schema .crm-bron small.mono {
display: inline;
margin: 0;
}
.cp-schema .crm-taak .vink {
width: 14px;
height: 14px;
border: 1.5px solid var(--primair);
border-radius: 4px;
flex: none;
position: relative;
}
.cp-schema .crm-taak.aan .vink {
background: var(--primair);
}
.cp-schema .crm-taak.aan .vink::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 3px;
height: 7px;
border: solid var(--wit);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.cp-schema .crm-taak .mono {
margin-left: auto;
} .cp-schema .vr-tabel td:nth-child(3),
.cp-schema .vr-tabel td:nth-child(4),
.cp-schema .vr-tabel th:nth-child(3),
.cp-schema .vr-tabel th:nth-child(4) {
text-align: center;
}
.cp-schema .vr-tabel .badge {
display: inline-block;
min-width: 24px;
text-align: center;
padding: 1px 6px;
border-radius: var(--r-pill);
background: #ecfdf5;
color: #047857;
font-weight: 600;
font-size: 11px;
}
.cp-schema .vr-tabel .badge.leeg {
background: #f3f4f6;
color: var(--kop);
}
.cp-schema .vr-regel small.mono {
display: inline;
margin: 0;
flex: none;
} .cp-schema .prod-top {
display: grid;
grid-template-columns: 96px 1fr;
gap: 12px;
}
.cp-schema .prod .beeld {
display: block;
aspect-ratio: 1;
border-radius: 8px;
background: var(--body);
border: 1px solid var(--lijn);
}
.cp-schema .prod .beeld.klein {
width: 28px;
flex: none;
border-radius: 6px;
}
.cp-schema .prod-info {
display: grid;
gap: 4px;
align-content: start;
justify-items: start;
}
.cp-schema .prod-info > b {
font-size: 14px;
}
.cp-schema .prod-prijs {
display: flex;
gap: 8px;
align-items: baseline;
padding: 3px 6px;
border-radius: 6px;
}
.cp-schema .prod-prijs b {
font-size: 15px;
} .cp-schema .prod-prijs.wacht {
opacity: 1;
}
.cp-schema .prod-prijs.wacht b {
display: none;
}
.cp-schema .prod-prijs.wacht s {
text-decoration: none;
color: var(--kop);
font-weight: 600;
font-size: 15px;
}
.cp-schema .prod-voorraad {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 6px;
border-radius: 6px;
}
.cp-schema .prod-nieuw small.mono {
display: inline;
margin: 0;
flex: none;
} .cp-schema .week-raster {
display: grid;
grid-template-columns: 36px repeat(5, 1fr);
gap: 4px;
height: 132px;
}
.cp-schema .week-raster .tijden {
display: grid;
grid-template-rows: repeat(4, 1fr);
padding-top: 16px;
}
.cp-schema .week-raster .tijden span {
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
color: var(--muted);
line-height: 1;
}
.cp-schema .week-raster .dag {
position: relative;
border-left: 1px solid #f3f4f6;
}
.cp-schema .week-raster .dag b {
display: block;
text-align: center;
font-size: 11px;
height: 16px;
line-height: 16px;
}
.cp-schema .week-raster .blok {
position: absolute;
left: 2px;
right: 2px;
top: calc(16px + var(--van) * (100% - 16px) / 4);
height: calc((var(--tot) - var(--van)) * (100% - 16px) / 4);
border-radius: 4px;
}
.cp-schema .week-raster .blok.bezet {
background: var(--lijn);
}
.cp-schema .week-raster .blok.vrij {
background: repeating-linear-gradient(135deg, #bbf7d0 0 2px, transparent 2px 7px);
border: 1px dashed #86efac;
}
.cp-schema .week-raster .blok.afspraak {
background: var(--primair);
color: var(--wit);
font-size: 11px;
line-height: 1.2;
padding: 2px 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
z-index: 1;
}
.cp-schema .week-raster .blok.afspraak.wacht {
opacity: 0;
}
.cp-schema .week-raster .blok.afspraak.aan {
background: var(--primair);
box-shadow: 0 0 0 2px #bbf7d0;
}
.cp-schema .week-raster .blok .ok {
display: none;
}
.cp-schema .week-onder {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
} .cp-schema .boek-dagen {
display: flex;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
}
.cp-schema .boek-dagen > span {
flex: 1;
text-align: center;
padding: 5px 0;
border-radius: 6px;
border: 1px solid var(--lijn);
color: var(--muted);
transition: background .3s, color .3s, border-color .3s;
}
.cp-schema .boek-dagen .kan {
border-color: var(--primair);
color: var(--primair);
font-weight: 600;
}
.cp-schema .boek-dagen .kan.gekozen {
background: var(--primair);
color: var(--wit);
}
.cp-schema .boek-tijden {
display: flex;
gap: 6px;
align-items: center;
padding: 6px 8px;
border-radius: 6px;
}
.cp-schema .boek-tijden .vak {
padding: 5px 10px;
border-radius: 6px;
border: 1px solid var(--lijn);
transition: background .3s, color .3s, border-color .3s;
}
.cp-schema .boek-tijden .vak.gekozen {
background: var(--primair);
color: var(--wit);
border-color: var(--primair);
}
.cp-schema .boek-tijden .duur {
margin-left: auto;
} .cp-schema .boek-dagen.wacht,
.cp-schema .boek-tijden.wacht {
opacity: 1;
}
.cp-schema .boek-dagen.wacht .kan,
.cp-schema .boek-dagen.wacht .kan.gekozen,
.cp-schema .boek-tijden.wacht .vak.gekozen {
background: transparent;
border-color: var(--lijn);
color: var(--muted);
font-weight: 400;
}
.cp-schema .boek-wie {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 6px;
align-items: center;
padding: 6px 8px;
border-radius: 6px;
} .cp-koppel-teksten {
margin-top: 2.5rem;
}
.cp-koppel-tekst {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem 2rem;
flex-wrap: wrap;
}
.cp-koppel-tekst[hidden] {
display: none;
}
.cp-koppel-tekst h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--primair);
margin: 0 0 .35rem;
}
.cp-koppel-tekst p {
color: var(--muted);
margin: 0;
} .cp-koppel-tekst .cta {
flex: none;
padding: .65rem 0;
}  .cp-koppel.stil .cp-schema .draad {
animation: none;
stroke-dashoffset: 0;
}
.cp-koppel.stil .cp-schema .chip {
animation: none;
opacity: 1;
left: 100%;
transform: translateX(-100%);
}
.cp-koppel.stil .cp-schema .chip.terug {
left: 0;
right: auto;
transform: none;
} @media (max-width: 1023px) {
.cp-schema {
grid-template-columns: 1fr;
}
.cp-schema .baan {
min-height: 150px;
overflow: hidden;
} .cp-schema .midden {
z-index: 3;
}
.cp-schema .draad.h {
display: none;
}
.cp-schema .draad.v {
display: block;
}
.cp-schema .chip {
top: 0;
left: calc(var(--i) * 19%);
right: auto;
}
.cp-schema .chip .lang {
display: none;
}
.cp-schema .chip .kort {
display: inline;
}
.cp-schema .chip.terug {
left: calc(var(--i) * 19%);
right: auto;
}
.cp-schema.loopt .chip {
animation-name: cp-reisy;
}
.cp-schema.loopt .chip.terug {
animation-name: cp-reisyterug;
}
.cp-koppel.stil .cp-schema .chip {
left: calc(var(--i) * 19%);
top: 100%;
transform: translateY(-100%);
}
.cp-koppel.stil .cp-schema .chip.terug {
top: 0;
transform: none;
}
.cp-koppel-tekst {
flex-direction: column;
align-items: flex-start;
}
}
@keyframes cp-reisy {
from {
top: 0;
transform: translateY(0);
opacity: 1;
}
to {
top: 100%;
transform: translateY(-100%);
opacity: 1;
}
}
@keyframes cp-reisyterug {
from {
top: 100%;
transform: translateY(-100%);
opacity: 1;
}
to {
top: 0;
transform: translateY(0);
opacity: 1;
}
} @media (max-width: 1023px) {
.cp-kiezer button {
padding: .7rem 1.25rem;
}
}
@media (max-width: 767px) {
.cp-koppel-kaart {
padding: 1rem;
}
.cp-schema .best-onder,
.cp-schema .form-rij,
.cp-schema .week-onder {
grid-template-columns: 1fr;
}
.cp-schema .fact-totaal {
width: 100%;
}
.cp-schema .prod-top {
grid-template-columns: 72px 1fr;
}
.cp-schema .boek-wie {
grid-template-columns: 1fr 1fr;
}
.cp-schema .boek-wie .sbtn {
grid-column: 1 / -1;
justify-self: start;
}
} .cp-knopen-slider {
position: relative;
}  .cp-knopen-spoor {
display: flex;
gap: 2rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 24px 20px 20px 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cp-knopen-spoor::-webkit-scrollbar {
display: none;
}
.cp-knopen-spoor > .cp-knoop {
flex: 0 0 calc(50% - 1rem);
min-width: 0;
scroll-snap-align: start;
}
.cp-knopen-spoor > .cp-knoop > .cp-knoop-kaart {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
} .cp-slider-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: .25rem;
}
.cp-slider-nav[hidden] {
display: none;
}
.cp-slider-knop {
all: unset;
box-sizing: border-box;
cursor: pointer;
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--primair);
background: var(--wit);
border: 1px solid var(--lijn);
box-shadow: var(--schaduw);
transition: transform .3s var(--curve), box-shadow .3s, opacity .3s;
}
@media (hover: hover) {
.cp-slider-knop:not([disabled]):hover {
transform: translateY(-2px);
box-shadow: var(--schaduw-hover);
}
}
.cp-slider-knop:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
}
.cp-slider-knop[disabled] {
cursor: default;
opacity: .35;
}
.cp-slider-knop .chev {
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateX(2px) rotate(135deg);
}
.cp-slider-knop.volgende .chev {
transform: translateX(-2px) rotate(-45deg);
}
.cp-slider-stippen {
display: flex;
gap: .5rem;
}
.cp-slider-stippen span {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(41, 52, 196, .18);
transition: background .3s, transform .3s var(--curve);
}
.cp-slider-stippen span.act {
background: var(--primair);
transform: scale(1.25);
} .cp-slider-stand {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
} .cp-knoop {
padding: 1.5rem;
gap: 1rem;
transform: none;
}
@media (hover: hover) {
.cp-knoop:hover {
transform: none;
}
.cp-knoop:hover::after {
box-shadow: var(--schaduw);
}
} .cp-knoop-kop {
display: flex;
align-items: center;
gap: .9rem;
min-height: 44px; text-decoration: none;
color: inherit;
border-radius: 10px;
}
.cp-knoop-kop .merk {
flex: none;
width: 40px;
height: 40px;
border-radius: 10px;
overflow: hidden;
display: grid;
place-items: center;
background: var(--grijs);
border: 1px solid var(--lijn);
} .cp-knoop-kop .merk img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 3px;
box-sizing: border-box;
display: block;
}
.cp-knoop-kop .merk b {
font-family: var(--fh);
font-weight: 700;
font-size: 1.1rem;
color: var(--primair);
}
.cp-knoop-kop .naam {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .2rem .6rem;
}
.cp-knoop-kop h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--kop);
line-height: 1.3;
}
.cp-knoop-kop .ga {
margin-left: auto;
flex: none;
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .85rem;
font-weight: 600;
color: var(--primair);
white-space: nowrap;
}
.cp-knoop-kop .pijl {
display: inline-block;
transition: transform .2s var(--curve);
}
@media (hover: hover) {
a.cp-knoop-kop:hover h3 {
color: var(--primair);
}
a.cp-knoop-kop:hover .pijl {
transform: translateX(4px);
}
}
a.cp-knoop-kop:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 4px;
}
.cp-knoop-intro {
margin: -.35rem 0 0;
color: var(--muted);
font-size: .95rem;
line-height: 1.5;
} .cp-knoop-kaart {
position: relative;
padding: .5rem 0;
}
.cp-knoop-kaart .lijnen {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.cp-knoop-kaart .dozen {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
column-gap: 2.25rem;
row-gap: .75rem;
align-items: center;
}
.cp-knoop-kaart .doos {
grid-row: var(--r);
position: relative;
z-index: 1;
display: grid;
gap: 1px;
min-width: 0;
padding: .5rem .7rem;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
box-shadow: var(--schaduw);
transition: border-color .25s, box-shadow .25s;
}
.cp-knoop-kaart .doos.links {
grid-column: 1;
}
.cp-knoop-kaart .doos.rechts {
grid-column: 3;
}
.cp-knoop-kaart .doos b {
font-size: 13px;
font-weight: 600;
color: var(--kop);
line-height: 1.25;
overflow-wrap: anywhere;
}
.cp-knoop-kaart .doos small {
font-size: 11px;
color: var(--muted);
line-height: 1.3;
}
.cp-knoop-kaart .doos.act {
border-color: var(--primair);
box-shadow: 0 0 0 2px rgba(41, 52, 196, .15);
}
.cp-knoop-kaart .hub {
grid-column: 2;
grid-row: 1 / span var(--rijen);
align-self: center;
justify-self: center;
position: relative;
z-index: 1;
max-width: 150px;
padding: .75rem 1rem;
border-radius: 10px;
background: var(--primair);
color: var(--wit);
font-family: var(--fh);
font-weight: 600;
font-size: 14px;
line-height: 1.25;
text-align: center;
box-shadow: var(--schaduw-cta);
}
.cp-knoop-kaart .pad {
fill: none;
stroke: #c7d2fe;
stroke-width: 2;
transition: stroke .25s, stroke-width .25s;
}
.cp-knoop-kaart .pad.act {
stroke: var(--primair);
stroke-width: 3;
}
.cp-knoop-kaart .tok {
fill: var(--primair);
} .cp-knoop-kaart .lijnen.stil .tok {
visibility: hidden;
} .cp-knoop-lijst {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .25rem;
}
.cp-knoop-lijst li {
display: flex;
gap: .75rem;
align-items: flex-start;
padding: .5rem .6rem;
border-radius: 8px;
transition: background .25s;
}
@media (hover: hover) {
.cp-knoop-lijst li:hover {
background: #eef2ff;
}
}
.cp-knoop-lijst li.act {
background: #eef2ff;
}
.cp-knoop-lijst .nr {
flex: none;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 50%;
background: #eef2ff;
color: var(--primair);
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
font-weight: 700;
display: grid;
place-items: center;
}
.cp-knoop-lijst li.act .nr {
background: var(--primair);
color: var(--wit);
}
.cp-knoop-lijst .tekst {
font-size: .9rem;
line-height: 1.45;
color: var(--muted);
min-width: 0;
}
.cp-knoop-lijst .tekst b {
color: var(--kop);
font-weight: 600;
}
.cp-knoop-lijst .richting {
color: var(--primair);
font-weight: 600;
margin: 0 .3rem;
} @media (max-width: 1023px) { .cp-knopen-spoor {
gap: 1rem;
margin-inline: -1rem;
padding: 24px 20px 20px 1rem;
scroll-padding-inline: 1rem;
}
.cp-knopen-spoor > .cp-knoop {
flex-basis: 88%;
}
.cp-knoop-lijst li {
min-height: 44px;
align-items: center;
}
}
@media (max-width: 767px) {
.cp-knoop {
padding: 1rem;
} .cp-knoop-kop .ga .ga-tekst {
display: none;
}
} @media (max-width: 639px) {
.cp-knoop-kaart .dozen {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: .75rem;
}
.cp-knoop-kaart .hub {
grid-column: 1 / -1;
grid-row: 1;
margin-bottom: 1.25rem;
}
.cp-knoop-kaart .doos {
grid-row: calc(var(--r) + 1);
}
.cp-knoop-kaart .doos.rechts {
grid-column: 2;
}
} .cp-auto-raster {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 3rem 4rem;
align-items: start;
} .cp-auto-tijdlijn {
--klok: 6.25rem; position: relative;
}
.cp-auto-tijdlijn::before {
content: '';
position: absolute;
top: 1rem;
bottom: 1rem;
left: calc(var(--klok) / 2);
width: 2px;
margin-left: -1px;
background: #c7d2fe;
} .cp-auto-tijdlijn.gemeten::before {
top: var(--van);
bottom: auto;
height: calc(var(--tot) - var(--van));
}
.cp-auto-stip {
position: absolute;
top: 0;
left: calc(var(--klok) / 2);
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
background: var(--primair);
box-shadow: 0 0 0 4px rgba(41, 52, 196, .15);
opacity: 0;
transition: transform .9s var(--curve), opacity .3s;
z-index: 0; }
.cp-auto-stip.aan {
opacity: 1;
}
.cp-auto-stip.direct {
transition: opacity .3s;
}
.cp-auto-lijst {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.25rem;
}
.cp-auto-lijst .moment {
display: grid;
grid-template-columns: var(--klok) minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
padding: .5rem 0;
border-radius: 8px;
transition: background .25s;
} .cp-auto-lijst .klok {
position: relative;
z-index: 1;
display: grid;
gap: 2px;
justify-items: center;
text-align: center;
width: 100%;
margin: 0;
padding: .55rem .4rem;
font: inherit;
color: inherit;
appearance: none;
cursor: pointer;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
box-shadow: var(--schaduw);
transition: border-color .25s, box-shadow .25s;
}
.cp-auto-lijst .klok:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
}
.cp-auto-lijst .klok b {
font-family: ui-monospace, Menlo, monospace;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
color: var(--primair);
line-height: 1.2;
}
.cp-auto-lijst .klok small {
font-size: 11px;
line-height: 1.3;
color: var(--muted);
}
.cp-auto-lijst .inhoud h3 {
font-size: 1.0625rem;
font-weight: 600;
color: var(--kop);
margin-top: .35rem;
}
.cp-auto-lijst .inhoud p {
margin: .35rem 0 0;
font-size: .95rem;
line-height: 1.55;
color: var(--muted);
}  .cp-auto-lijst .inhoud h3 .cp-meer-knop {
width: 100%;
min-height: 44px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "titel tag chev";
align-items: center;
gap: .35rem .75rem;
color: inherit;
}
.cp-auto-lijst .inhoud .titel {
grid-area: titel;
}
.cp-auto-lijst .inhoud .tag {
grid-area: tag;
justify-self: start;
margin: 0;
}
.cp-auto-lijst .inhoud .chev {
grid-area: chev;
margin-left: .5rem;
color: var(--muted);
}
@media (max-width: 1023px) {
.cp-auto-lijst .inhoud h3 .cp-meer-knop {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"titel chev"
"tag chev";
}
} .cp-auto-lijst .inhoud .cp-meer-paneel > div > p {
margin-top: 0;
padding-top: .5rem;
padding-bottom: .35rem;
}
@media (max-width: 1023px) {
.cp-auto-lijst .inhoud .cp-meer-paneel > div > p {
padding-top: .75rem;
}
}
.cp-auto-lijst .moment.act .klok {
border-color: var(--primair);
box-shadow: 0 0 0 2px rgba(41, 52, 196, .15);
}
.cp-auto-lijst .moment.act .inhoud h3 {
color: var(--primair);
} .cp-auto-zij {
position: sticky;
top: 6rem;
display: grid;
gap: 1.5rem;
}
.cp-auto-project {
display: flex;
align-items: center;
gap: .9rem;
min-height: 44px;
padding: .9rem 1rem;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: var(--r-kaart);
box-shadow: var(--schaduw);
text-decoration: none;
color: inherit;
transition: background .25s var(--curve), box-shadow .25s var(--curve);
}
.cp-auto-project .merk {
flex: none;
width: 40px;
height: 40px;
border-radius: 10px;
overflow: hidden;
display: grid;
place-items: center;
background: var(--grijs);
border: 1px solid var(--lijn);
}
.cp-auto-project .merk img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 3px;
box-sizing: border-box;
display: block;
}
.cp-auto-project .merk b {
font-family: var(--fh);
font-weight: 700;
font-size: 1.1rem;
color: var(--primair);
}
.cp-auto-project .naam {
min-width: 0;
}
.cp-auto-project .voor {
display: block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.cp-auto-project h3 {
font-size: 1.0625rem;
font-weight: 600;
color: var(--kop);
line-height: 1.3;
}
.cp-auto-project .sub {
display: block;
margin-top: 1px;
font-size: .8125rem;
color: var(--muted);
}
.cp-auto-project .ga {
margin-left: auto;
flex: none;
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .85rem;
font-weight: 600;
color: var(--primair);
white-space: nowrap;
}
.cp-auto-project .pijl {
display: inline-block;
transition: transform .2s var(--curve);
}
@media (hover: hover) {
a.cp-auto-project:hover {
background: #fbfcff;
box-shadow: var(--schaduw-hover);
}
a.cp-auto-project:hover .pijl {
transform: translateX(4px);
}
}
a.cp-auto-project:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
}
.cp-auto-prijs {
padding: 1.25rem 1.5rem;
background: var(--grijs);
border: 1px solid var(--lijn);
border-radius: var(--r-kaart);
}
.cp-auto-prijs h3 {
font-size: 1.0625rem;
font-weight: 600;
color: var(--kop);
}
.cp-auto-prijs p {
margin: .5rem 0 0;
line-height: 1.6;
color: var(--muted);
}
.cp-auto-prijs .chips {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: 1rem;
}
.cp-auto-prijs .chip {
display: inline-flex;
align-items: center;
gap: .35rem;
min-height: 44px;
padding: .55rem 1rem;
border-radius: 999px;
background: var(--wit);
border: 1px solid var(--lijn);
font-size: .9rem;
font-weight: 600;
color: var(--primair);
text-decoration: none;
transition: border-color .25s, box-shadow .25s;
}
.cp-auto-prijs .chip .pijl {
display: inline-block;
transition: transform .2s var(--curve);
}
@media (hover: hover) {
.cp-auto-prijs .chip:hover {
border-color: var(--primair);
box-shadow: var(--schaduw);
}
.cp-auto-prijs .chip:hover .pijl {
transform: translateX(4px);
}
}
.cp-auto-prijs .chip:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
} @media (max-width: 1023px) {
.cp-auto-raster {
grid-template-columns: 1fr;
gap: 2rem;
}
.cp-auto-zij {
display: contents;
}
.cp-auto-project {
order: 1;
}
.cp-auto-tijdlijn {
order: 2;
}
.cp-auto-prijs {
order: 3;
}
.cp-auto-project .ga .ga-tekst {
display: none;
}
}
@media (max-width: 767px) {
.cp-auto-tijdlijn {
--klok: 5.25rem;
}
.cp-auto-lijst .moment {
gap: .9rem;
}
.cp-auto-lijst .klok {
padding: .5rem .3rem;
}
.cp-auto-prijs {
padding: 1.25rem 1rem;
}
}  .cp-verzoek-kaart {
padding: 1.5rem;
transform: none;
}
@media (hover: hover) {
.cp-verzoek-kaart:hover {
transform: none;
}
.cp-verzoek-kaart:hover::after {
box-shadow: var(--schaduw);
}
}
.cp-verzoek-soort[hidden] {
display: none;
}
.cp-verzoek-intro {
margin-bottom: 1.25rem;
}
.cp-verzoek-intro h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--primair);
}
.cp-verzoek-intro p {
margin: .35rem 0 0;
color: var(--muted);
line-height: 1.55;
} .cp-scene {
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
gap: 1rem;
position: relative;
min-height: 230px;
}
.cp-scene .kant {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: var(--body);
border: 1px solid var(--lijn);
border-radius: 12px;
font-size: 12px;
min-width: 0;
}
.cp-scene .kant h4 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--kop);
} .cp-scene .deur,
.cp-scene .bubbel,
.cp-scene .klokje {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
font-size: 11px;
color: var(--kop);
}
.cp-scene .deur i {
display: block;
position: relative;
width: 22px;
height: 30px;
border: 2px solid var(--kop);
border-radius: 3px 3px 0 0;
transform-origin: left center;
transition: transform .5s var(--curve), border-color .3s;
}
.cp-scene .deur i::after {
content: '';
position: absolute;
right: 3px;
top: 13px;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--kop);
}
.cp-scene .deur .slot {
margin-left: auto;
}
.cp-scene[data-fase="1"] .deur[data-open~="1"] i,
.cp-scene[data-fase="2"] .deur[data-open~="2"] i,
.cp-scene[data-fase="3"] .deur[data-open~="3"] i,
.cp-scene[data-fase="4"] .deur[data-open~="4"] i {
transform: perspective(60px) rotateY(-45deg);
border-color: var(--groen);
} .cp-scene .bubbel {
border-radius: 12px 12px 12px 4px;
font-style: italic;
}
.cp-scene .klokje {
font-family: ui-monospace, Menlo, monospace;
font-weight: 700;
color: var(--primair);
}
.cp-scene .klokje i {
display: block;
position: relative;
width: 22px;
height: 22px;
border: 2px solid var(--kop);
border-radius: 50%;
flex: none;
}
.cp-scene .klokje i::before,
.cp-scene .klokje i::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 2px;
background: var(--kop);
transform-origin: bottom center;
}
.cp-scene .klokje i::before {
height: 7px;
margin: -7px 0 0 -1px;
}
.cp-scene .klokje i::after {
height: 5px;
margin: -5px 0 0 -1px;
transform: rotate(90deg);
}
.cp-scene .kant .inhoud {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
padding: 8px;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
}
.cp-scene .r {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 3px 0;
border-bottom: 1px solid #f1f5f9;
font-size: 11px;
opacity: .35;
transition: opacity .3s;
}
.cp-scene .r span:last-child {
color: var(--muted);
white-space: nowrap;
}
.cp-scene .r.zicht {
opacity: 1;
}
.cp-scene .midden {
background: var(--wit);
border: 1px dashed #c7d2fe;
}
.cp-scene .stapje {
display: flex;
gap: 8px;
align-items: center;
padding: 6px 8px;
border-radius: 8px;
font-size: 11px;
opacity: .4;
transition: opacity .3s, background .3s;
}
.cp-scene .stapje b {
font-family: var(--fh);
color: var(--primair);
width: 14px;
flex: none;
}
.cp-scene[data-fase="1"] .stapje[data-f="1"],
.cp-scene[data-fase="2"] .stapje[data-f="2"],
.cp-scene[data-fase="3"] .stapje[data-f="3"],
.cp-scene[data-fase="4"] .stapje[data-f="4"] {
opacity: 1;
background: #eef2ff;
} .cp-scene .vertaal {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
padding-top: 6px;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
color: var(--muted);
opacity: .35;
transition: opacity .3s;
}
.cp-scene .vertaal span {
padding: 2px 6px;
border-radius: 4px;
background: #f3f4f6;
color: var(--kop);
}
.cp-scene .vertaal .n {
background: #ecfdf5;
color: #047857;
}
.cp-scene[data-fase="3"] .vertaal,
.cp-scene[data-fase="4"] .vertaal {
opacity: 1;
} .cp-scene .token {
position: absolute;
top: 34%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px 12px;
border-radius: 999px;
background: var(--primair);
color: var(--wit);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
box-shadow: var(--schaduw-cta);
transition: left 1s var(--curve), background .3s, opacity .3s;
z-index: 2;
}
.cp-scene[data-fase="0"] .token {
opacity: 0;
}
.cp-scene[data-fase="1"] .token {
left: var(--p1);
}
.cp-scene[data-fase="2"] .token {
left: var(--p2);
background: #0369a1;
}
.cp-scene[data-fase="3"] .token {
left: var(--p3);
background: #0369a1;
}
.cp-scene[data-fase="4"] .token {
left: var(--p4);
background: #047857;
} .cp-verzoek .fasen {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .75rem;
}
.cp-verzoek .fase {
all: unset;
box-sizing: border-box;
display: block;
width: 100%;
min-height: 44px;
padding: .85rem 1rem;
border-radius: 12px;
border: 1px solid transparent;
cursor: pointer;
text-align: left;
transition: background .3s, border-color .3s, box-shadow .3s;
}
.cp-verzoek .fase b {
display: block;
font-family: var(--fh);
font-weight: 600;
color: var(--kop);
line-height: 1.3;
}
.cp-verzoek .fase .nr {
font-family: var(--fh);
color: var(--color-accent-tekst);
font-weight: 700;
font-size: .8rem;
margin-right: .4rem;
}
@media (hover: hover) {
.cp-verzoek .fase:hover {
background: rgba(41, 52, 196, .04);
}
}
.cp-verzoek .fase.act {
background: var(--grijs);
border-color: var(--lijn);
box-shadow: var(--schaduw);
}
.cp-verzoek .fase:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 2px;
} .cp-verzoek-vragen {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 1.5rem;
margin-top: 2.5rem;
}
.cp-verzoek-vragen > div {
padding: .5rem 1.5rem;
border-left: 3px solid var(--accent);
} .cp-verzoek-vragen h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--kop);
}
.cp-verzoek-vragen h3 .cp-meer-knop {
width: 100%;
min-height: 44px;
color: inherit;
}
.cp-verzoek-vragen .chev {
margin-left: auto;
color: var(--muted);
}
.cp-verzoek-vragen p {
margin: 0;
padding-bottom: .75rem;
color: var(--muted);
font-size: .95rem;
line-height: 1.55;
} @media (max-width: 1023px) {
.cp-scene {
grid-template-columns: 1fr;
min-height: 0;
}
.cp-scene .token {
display: none;
}
.cp-verzoek .fasen {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.cp-verzoek-kaart {
padding: 1rem;
}
.cp-verzoek-vragen {
grid-template-columns: 1fr;
gap: 1rem;
}
.cp-verzoek-vragen > div {
padding: .75rem 1rem;
}
}
@media (max-width: 639px) {
.cp-verzoek .fasen {
grid-template-columns: 1fr;
gap: .25rem;
}
.cp-verzoek .fase {
padding: .65rem .85rem;
}
} .cp-meer-knop {
all: unset;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--fh);
font-weight: 600;
text-align: left;
}
.cp-meer-knop:focus-visible {
outline: 2px solid var(--primair);
outline-offset: 3px;
border-radius: var(--r-knop);
}
.cp-meer-knop .chev {
flex: none;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform .3s var(--curve);
}
.cp-meer-knop[aria-expanded="true"] .chev {
transform: rotate(-135deg) translateY(-2px);
} .cp-meer-knop--pill {
color: var(--primair);
padding: .6rem 1.1rem;
min-height: 44px;
border-radius: var(--r-pill);
background: rgba(41, 52, 196, .08);
transition: background .2s;
}
.cp-meer-knop--pill:focus-visible {
border-radius: var(--r-pill);
}
@media (hover: hover) {
.cp-meer-knop--pill:hover {
background: rgba(41, 52, 196, .14);
}
}
.cp-meer-paneel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .45s var(--curve);
}
.cp-meer-paneel > div {
overflow: hidden;
visibility: hidden;
transition: visibility 0s linear .45s;
}
.cp-meer.open .cp-meer-paneel {
grid-template-rows: 1fr;
}
.cp-meer.open .cp-meer-paneel > div {
visibility: visible;
transition: visibility 0s;
} .cp-knoop .cp-meer-paneel > div > .cp-knoop-lijst {
padding-top: .75rem;
}  .cp-stappen-sectie .cp-kop h2,
.cp-vijf-sectie .cp-kop h2,
.cp-grenzen-sectie .cp-kop h2 {
text-wrap: balance;
}
.cp-stappen {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 2.5rem;
align-items: start;
} .cp-stap-frame {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 14px;
padding: 14px;
height: 540px;
border-radius: var(--r-kaart);
background: var(--wit);
box-shadow: var(--schaduw);
}
.cp-stap-frame::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(41, 52, 196, .07);
transform: rotate(-2deg) translateX(10px) translateY(-10px);
z-index: -1;
}
.cp-stap-frame .scr,
.cp-stap-frame .chat {
height: 100%;
min-height: 0;
}
.cp-stap-frame .scr {
display: flex;
flex-direction: column;
} .cp-stappen .web .wnav {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px;
border-bottom: 1px solid var(--lijn);
font-size: 11px;
}
.cp-stappen .web .wnav b {
font-family: var(--fh);
color: var(--primair);
font-size: 12px;
margin-right: auto;
}
.cp-stappen .web .wnav span {
width: 34px;
height: 6px;
border-radius: 3px;
background: var(--lijn);
display: block;
}
.cp-stappen .web .wnav em {
width: 52px;
height: 16px;
border-radius: 999px;
background: var(--primair);
display: block;
opacity: .85;
}
.cp-stappen .web .wbody {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 14px;
padding: 14px;
flex: 1;
min-height: 0;
background: var(--body);
}
.cp-stappen .web .wkop {
font-family: var(--fh);
font-weight: 600;
font-size: 12px;
margin-bottom: 8px;
}
.cp-stappen .web .wpost {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: start;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 10px;
padding: 10px;
margin-bottom: 8px;
}
.cp-stappen .web .wfoto {
width: 54px;
height: 54px;
border-radius: 8px;
background: linear-gradient(135deg, #bfdbfe, #93c5fd 60%, #60a5fa);
}
.cp-stappen .web .wfoto.oud {
background: var(--lijn);
}
.cp-stappen .web .wtekst b {
display: block;
height: 8px;
width: 70%;
border-radius: 4px;
background: #cbd5e1;
margin: 2px 0 8px;
}
.cp-stappen .web .wtekst i {
display: block;
height: 5px;
border-radius: 3px;
background: var(--lijn);
margin-bottom: 5px;
}
.cp-stappen .web .wtekst i:last-child {
width: 60%;
}
.cp-stappen .web .wpost.nieuw .wtekst b {
background: #94a3b8;
}
.cp-stappen .web .wtag {
white-space: nowrap;
} .cp-stappen .web .wtag .slot {
display: none;
margin-left: 4px;
}
.cp-stappen.s4 .web .wtag .slot {
display: inline;
}
.cp-stappen .web .wrev {
display: flex;
gap: 8px;
align-items: flex-start;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 10px;
padding: 9px;
margin-bottom: 8px;
position: relative;
}
.cp-stappen .web .wrev .wava {
width: 22px;
height: 22px;
border-radius: 50%;
background: #dbeafe;
flex: none;
}
.cp-stappen .web .wrev div {
flex: 1;
}
.cp-stappen .web .wrev b {
display: block;
height: 6px;
width: 45%;
border-radius: 3px;
background: #cbd5e1;
margin: 3px 0 7px;
}
.cp-stappen .web .wrev i {
display: block;
height: 4px;
border-radius: 2px;
background: var(--lijn);
margin-bottom: 4px;
}
.cp-stappen .web .wrev .tag {
position: absolute;
right: 8px;
top: 8px;
}
.cp-stappen .web .wrev.nieuw b {
width: 35%;
}
.cp-stappen .web .wrev.nieuw i {
width: 60%;
}
.cp-stappen .web .wpub {
margin-top: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
border: 1px dashed #cbd5e1;
border-radius: 8px;
padding: 7px 10px;
font-size: 11px;
color: var(--muted);
}
.cp-stappen .web .wpub span {
font-weight: 600;
color: var(--kop);
}
.cp-stappen .web .wpub small {
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
} .cp-stappen .chat {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: var(--fb);
line-height: 1.35;
}
.cp-stappen .chat .chatkop {
flex: none;
font-family: var(--fh);
font-weight: 600;
font-size: 12px;
padding: 0 2px 10px;
border-bottom: 1px solid var(--lijn);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
} .cp-stappen .chat .gesprek {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 32px);
mask-image: linear-gradient(to bottom, transparent, #000 32px);
}
.cp-stappen .chat .chatkop i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--groen);
display: block;
}
.cp-stappen .chat .bub {
flex: none;
max-width: 88%;
padding: 8px 10px;
border-radius: 12px;
background: var(--wit);
border: 1px solid var(--lijn);
font-size: 11.5px;
line-height: 1.4;
}
.cp-stappen .chat .bub.ik {
align-self: flex-end;
background: var(--primair);
color: var(--wit);
border-color: var(--primair);
}
.cp-stappen .chat .bub.ai {
align-self: flex-start;
position: relative;
min-width: 150px;
} .cp-stappen .chat .bub.ai .denk {
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: 4px;
padding-left: 12px;
opacity: 0;
}
.cp-stappen .chat .bub.ai .denk i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #9ca3af;
display: block;
animation: cp-stap-puls 1.2s infinite;
}
.cp-stappen .chat .bub.ai .denk i:nth-child(2) {
animation-delay: .2s;
}
.cp-stappen .chat .bub.ai .denk i:nth-child(3) {
animation-delay: .4s;
}
@keyframes cp-stap-puls {
0%,
80%,
100% {
transform: translateY(0);
opacity: .5;
}
40% {
transform: translateY(-3px);
opacity: 1;
}
}
.cp-stappen .chat .bub.ai .inhoud {
opacity: 0;
min-height: 22px;
}
.cp-stappen .chat .bub.ai .inhoud > i {
display: block;
height: 5px;
border-radius: 3px;
background: var(--lijn);
margin-bottom: 5px;
width: 150px;
}
.cp-stappen .chat .bub.ai .inhoud > i:nth-child(2) {
width: 120px;
}
.cp-stappen .chat .bub.ai .inhoud > i:nth-child(3) {
width: 90px;
}
.cp-stappen .chat .chip {
display: flex;
width: fit-content;
max-width: 100%;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 11px;
line-height: 1.3;
font-weight: 600;
color: #047857;
background: #ecfdf5;
border-radius: 999px;
padding: 3px 9px;
}
.cp-stappen .chat .chip.grijs {
color: var(--kop);
background: #f3f4f6;
}
.cp-stappen .chat .chip .ok {
width: 12px;
height: 12px;
flex: none;
border-radius: 50%;
background: var(--groen);
position: relative;
display: block;
}
.cp-stappen .chat .chip .ok::after {
content: '';
position: absolute;
left: 4px;
top: 1.5px;
width: 3px;
height: 6px;
border: solid var(--wit);
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.cp-stappen .chat .mfoto {
width: 44px;
height: 32px;
border-radius: 6px;
background: linear-gradient(135deg, #bfdbfe, #60a5fa);
display: block;
margin-bottom: 4px;
}
.cp-stappen .chat .veld {
display: flex;
align-items: center;
gap: 8px;
border: 1px dashed #9ca3af;
border-radius: 6px;
padding: 4px 8px;
margin-bottom: 4px;
width: 140px;
}
.cp-stappen .chat .veld b {
font-family: var(--fh);
font-size: 14px;
color: var(--primair);
}
.cp-stappen .chat .veld i {
flex: 1;
height: 5px;
border-radius: 3px;
background: var(--lijn);
}
.cp-stappen .chat .plak {
display: block;
border-left: 3px solid #cbd5e1;
padding: 2px 8px;
margin-bottom: 4px;
}
.cp-stappen .chat .plak i {
display: block;
height: 5px;
border-radius: 3px;
background: rgba(255, 255, 255, .45);
margin-bottom: 4px;
width: 120px;
}
.cp-stappen .chat .plak i:last-child {
width: 80px;
} .cp-stappen .chat [data-stop] {
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
}
.cp-stappen .web [data-stop] {
max-height: 0;
opacity: 0;
overflow: hidden;
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
}
.cp-stappen .web .wfoto[data-stop] {
width: 0;
}
@keyframes cp-stap-bub {
from {
max-height: 0;
opacity: 0;
transform: translateY(8px);
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
}
} @keyframes cp-stap-web-m {
from {
opacity: 0;
transform: translateY(6px);
}
}
@keyframes cp-stap-denk {
0% {
opacity: 0;
}
10%,
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes cp-stap-inhoud {
from {
opacity: 0;
}
}
@keyframes cp-stap-web {
from {
max-height: 0;
opacity: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
}
}
@keyframes cp-stap-foto {
from {
width: 0;
max-height: 0;
opacity: 0;
}
} .cp-stappen.s1 .web [data-stop="1"],
.cp-stappen.s2 .web [data-stop="2"],
.cp-stappen.s3 .web [data-stop="3"],
.cp-stappen.s4 .web [data-stop="4"] {
max-height: 240px;
opacity: 1;
border-width: 1px;
}
.cp-stappen.s1 .web .wpost[data-stop="1"] {
margin-bottom: 8px;
padding: 10px;
}
.cp-stappen.s3 .web .wrev[data-stop="3"] {
margin-bottom: 8px;
padding: 9px;
}
.cp-stappen.s2 .web .wfoto[data-stop="2"] {
max-height: 54px;
width: 54px;
}
.cp-stappen.s4 .web .wpub[data-stop="4"] {
margin-top: 12px;
padding: 7px 10px;
} @media (prefers-reduced-motion: no-preference) {
.cp-stappen[data-stand="1"] .web [data-stop="1"],
.cp-stappen[data-stand="2"] .web [data-stop="2"],
.cp-stappen[data-stand="3"] .web [data-stop="3"],
.cp-stappen[data-stand="4"] .web [data-stop="4"] {
animation: cp-stap-web .45s var(--curve) 2.2s both;
}
.cp-stappen[data-stand="2"] .web .wfoto[data-stop="2"] {
animation-name: cp-stap-foto;
} .cp-stappen[data-stand="1"] .chat [data-stop="1"],
.cp-stappen[data-stand="2"] .chat [data-stop="2"],
.cp-stappen[data-stand="3"] .chat [data-stop="3"],
.cp-stappen[data-stand="4"] .chat [data-stop="4"] {
animation: cp-stap-bub .45s var(--curve) both;
}
.cp-stappen[data-stand="1"] .chat .bub.ai[data-stop="1"],
.cp-stappen[data-stand="2"] .chat .bub.ai[data-stop="2"],
.cp-stappen[data-stand="3"] .chat .bub.ai[data-stop="3"],
.cp-stappen[data-stand="4"] .chat .bub.ai[data-stop="4"] {
animation-delay: .5s;
}
.cp-stappen[data-stand="1"] .chat .bub.ai[data-stop="1"] .denk,
.cp-stappen[data-stand="2"] .chat .bub.ai[data-stop="2"] .denk,
.cp-stappen[data-stand="3"] .chat .bub.ai[data-stop="3"] .denk,
.cp-stappen[data-stand="4"] .chat .bub.ai[data-stop="4"] .denk {
animation: cp-stap-denk 1.7s forwards .5s;
}
.cp-stappen[data-stand="1"] .chat .bub.ai[data-stop="1"] .inhoud,
.cp-stappen[data-stand="2"] .chat .bub.ai[data-stop="2"] .inhoud,
.cp-stappen[data-stand="3"] .chat .bub.ai[data-stop="3"] .inhoud,
.cp-stappen[data-stand="4"] .chat .bub.ai[data-stop="4"] .inhoud {
animation: cp-stap-inhoud .4s var(--curve) 2.1s both;
}
} @media (min-width: 768px) {
.cp-stappen.s1 .chat [data-stop="1"],
.cp-stappen.s2 .chat [data-stop="2"],
.cp-stappen.s3 .chat [data-stop="3"],
.cp-stappen.s4 .chat [data-stop="4"] {
max-height: 200px;
opacity: 1;
margin-top: 8px;
padding: 8px 10px;
border-width: 1px;
}
.cp-stappen.s1 .chat .bub.ai[data-stop="1"] .inhoud,
.cp-stappen.s2 .chat .bub.ai[data-stop="2"] .inhoud,
.cp-stappen.s3 .chat .bub.ai[data-stop="3"] .inhoud,
.cp-stappen.s4 .chat .bub.ai[data-stop="4"] .inhoud {
opacity: 1;
}
} .cp-stap-lijst {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.cp-stap {
position: relative;
border-radius: var(--r-knop);
padding-bottom: 10px;
opacity: .75;
transition: opacity .3s, background .3s;
}
.cp-stap.act {
opacity: 1;
background: rgba(41, 52, 196, .05);
}
@media (hover: hover) {
.cp-stap:not(.act):hover {
opacity: .85;
}
} .cp-stap::before {
content: '';
position: absolute;
left: 14px;
top: 30px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
transition: background .3s;
}
.cp-stap.act::before {
background: var(--primair);
} .cp-stap .lijn {
position: absolute;
left: 0;
top: 0;
height: 2px;
width: 100%;
background: var(--primair);
transform: scaleX(0);
transform-origin: left;
border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.cp-stappen.loopt .cp-stap.act .lijn {
animation: cp-stap-vul 6s linear forwards;
} .cp-stappen.loopt.pauze .cp-stap.act .lijn {
animation-play-state: paused;
}
}
@keyframes cp-stap-vul {
to {
transform: scaleX(1);
}
}
.cp-stap-kop {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
}
.cp-stap-kop button {
all: unset;
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .5rem;
width: 100%;
padding: 22px 24px 12px 32px;
font-family: var(--fh);
font-weight: 600;
font-size: 1.125rem;
line-height: 1.25;
color: var(--kop);
}
.cp-stap-kop button:focus-visible {
outline: 2px solid var(--primair);
outline-offset: -2px;
border-radius: 12px;
}
.cp-stap .nr {
font-family: ui-monospace, Menlo, monospace;
font-size: .72rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--primair);
}
.cp-stap .nr::before {
content: 'Stap ';
}
.cp-stap .chev {
display: none;
} .cp-stap .uitklap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .45s var(--curve);
}
.cp-stap .uitklap > div {
overflow: hidden;
visibility: hidden;
transition: visibility 0s linear .45s;
}
.cp-stap.act .uitklap {
grid-template-rows: 1fr;
}
.cp-stap.act .uitklap > div {
visibility: visible;
transition: visibility 0s;
}
.cp-stap .uitklap p {
margin: 0;
padding: 0 24px 12px 32px;
color: var(--muted);
font-size: .95rem;
line-height: 1.55;
} @media (min-width: 768px) and (max-width: 1023px) {
.cp-stappen {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 1.5rem;
}
.cp-stap-frame {
height: 500px;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.cp-stap-kop button {
padding: 18px 16px 10px 28px;
font-size: 1rem;
}
.cp-stap .uitklap p {
padding: 0 16px 10px 28px;
font-size: .9rem;
}
} @media (max-width: 767px) {
.cp-stappen {
grid-template-columns: 1fr;
gap: 0;
}
.cp-stap-lijst {
gap: 0;
}
.cp-stap {
opacity: 1;
padding-bottom: 0;
border-radius: var(--r-knop);
}
.cp-stap::before,
.cp-stap .lijn {
display: none;
}
.cp-stap-kop button {
flex-direction: row;
align-items: center;
gap: .75rem;
padding: .85rem .5rem;
min-height: 44px;
font-size: 1.1rem;
transition: color .3s var(--curve);
}
.cp-stap.act .cp-stap-kop button {
color: var(--primair);
}
.cp-stap .nr {
flex: none;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: rgba(41, 52, 196, .08);
color: var(--primair);
font-family: var(--fh);
font-weight: 700;
font-size: .8rem;
letter-spacing: 0;
text-transform: none;
display: grid;
place-items: center;
transition: background .3s, color .3s;
}
.cp-stap .nr::before {
content: none;
}
.cp-stap.act .nr {
background: var(--primair);
color: var(--wit);
}
.cp-stap .titel {
flex: 1;
}
.cp-stap .chev {
display: block;
flex: none;
margin-left: auto;
width: .6rem;
height: .6rem;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform .35s var(--curve), border-color .3s;
}
.cp-stap.act .chev {
transform: rotate(-135deg);
border-color: var(--primair);
} .cp-stap .uitklap p {
padding: 0 .5rem .85rem 3.05rem;
} .cp-stappen .cp-stap-frame {
display: flex;
flex-direction: column;
height: 600px;
width: min(320px, 100vw - 2rem);
margin: .25rem auto 2.5rem;
padding: 0;
border: 8px solid #0f172a;
border-radius: 2.5rem;
box-shadow: var(--schaduw-hover);
overflow: hidden;
}
.cp-stappen .cp-stap-frame::before {
inset: auto;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 18px;
border-radius: 999px;
background: #0f172a;
z-index: 3;
}
.cp-stappen .cp-stap-frame::after {
content: '';
flex: none;
width: 92px;
height: 4px;
border-radius: 999px;
background: var(--kop);
opacity: .3;
margin: 6px auto 8px;
}
.cp-stap .uitklap > div > .cp-stap-frame {
margin-top: .25rem;
} .cp-stappen .cp-stap-frame .chat {
order: -1;
flex: none;
height: 240px;
border: 0;
border-bottom: 1px solid var(--lijn);
border-radius: 0;
padding: 34px 12px 10px;
justify-content: flex-start;
gap: 0;
}
.cp-stappen .chat .chatkop {
margin: 0 0 4px;
}
.cp-stappen .cp-stap-frame .scr {
flex: 1;
height: auto;
min-height: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
}
.cp-stappen .web .wbody {
grid-template-columns: 1fr;
gap: 10px;
flex: none;
}
.cp-stappen .web .oud2 {
display: none;
} .cp-stappen[data-stand="1"] .chat [data-stop="1"],
.cp-stappen[data-stand="2"] .chat [data-stop="2"],
.cp-stappen[data-stand="3"] .chat [data-stop="3"],
.cp-stappen[data-stand="4"] .chat [data-stop="4"] {
max-height: 200px;
opacity: 1;
margin-top: 8px;
padding: 8px 10px;
border-width: 1px;
}
.cp-stappen .chat .gesprek {
flex: none;
justify-content: flex-start;
-webkit-mask-image: none;
mask-image: none;
} @media (prefers-reduced-motion: no-preference) {
.cp-stappen[data-stand="1"] .web [data-stop="1"],
.cp-stappen[data-stand="2"] .web [data-stop="2"],
.cp-stappen[data-stand="3"] .web [data-stop="3"],
.cp-stappen[data-stand="4"] .web [data-stop="4"],
.cp-stappen[data-stand="2"] .web .wfoto[data-stop="2"] {
animation-name: cp-stap-web-m;
}
}
.cp-stappen[data-stand="1"] .chat .bub.ai[data-stop="1"] .inhoud,
.cp-stappen[data-stand="2"] .chat .bub.ai[data-stop="2"] .inhoud,
.cp-stappen[data-stand="3"] .chat .bub.ai[data-stop="3"] .inhoud,
.cp-stappen[data-stand="4"] .chat .bub.ai[data-stop="4"] .inhoud {
opacity: 1;
}
} .cp-blok .direct .cp-stap-kop button,
.cp-blok .direct .cp-stap .nr {
transition: none;
} .cp-vijf {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
}
.cp-vijf .cp-kaart {
grid-column: span 2;
gap: .6rem;
}
.cp-vijf .cp-kaart:nth-child(4),
.cp-vijf .cp-kaart:nth-child(5) {
grid-column: span 3;
}
.cp-vijf .cp-kaart > .tag {
align-self: flex-start;
}
.cp-vijf .cp-kaart h3 {
font-size: 1.125rem;
color: var(--kop);
}
.cp-vijf .cp-kaart p {
font-size: .95rem;
line-height: 1.55; max-width: 44ch;
} .cp-vijf .cp-kaart .mini {
border: 1px solid var(--lijn);
min-height: 160px;
justify-content: flex-start;
position: relative;
overflow: hidden;
color: var(--kop);
margin-top: .25rem;
}
.cp-vijf .mini small {
display: block;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.cp-vijf .mini .bub.ik {
display: inline-block;
max-width: 100%;
align-self: auto;
padding: 7px 10px;
border-radius: 12px;
}
.cp-vijf .mini .doc {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
padding: 10px;
position: relative;
}
.cp-vijf .mini .doc i,
.cp-vijf .mini .lijstje i {
display: block;
height: 5px;
border-radius: 3px;
background: var(--lijn);
margin-bottom: 5px;
}
.cp-vijf .mini .doc b {
display: block;
height: 7px;
width: 60%;
border-radius: 4px;
background: #cbd5e1;
margin-bottom: 8px;
}
.cp-vijf .mini .doc .tag {
position: absolute;
right: 8px;
top: 8px;
} .cp-vijf .mini.m1 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: center;
} .cp-vijf .mini.m2 .mail {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 8px;
}
.cp-vijf .mini.m2 .mail b,
.cp-vijf .mini.m2 .lijstje b {
display: block;
font-weight: 600;
font-size: 11px;
}
.cp-vijf .mini.m2 .lijstje {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
padding: 8px 10px;
}
.cp-vijf .mini.m2 .lijstje i {
width: 70%;
}
.cp-vijf .mini.m2 .lijstje i:nth-child(3) {
width: 55%;
}
.cp-vijf .mini.m2 .lijstje b.nieuw {
color: var(--primair);
margin-top: 4px;
} .cp-vijf .mini.m3 {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 10px;
}
.cp-vijf .mini.m3 .tel {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 12px;
padding: 10px 8px;
}
.cp-vijf .mini .mf {
display: block;
height: 22px;
border-radius: 5px;
background: linear-gradient(135deg, #bfdbfe, #60a5fa);
margin-bottom: 5px;
}
.cp-vijf .mini.m3 .doc .mf {
height: 40px;
margin-bottom: 8px;
} .cp-vijf .mini.m4 .veld {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
padding: 6px 10px;
margin-bottom: 6px;
font-weight: 600;
}
.cp-vijf .mini.m4 .veld i {
width: 70px;
height: 6px;
border-radius: 3px;
background: var(--lijn);
display: block;
}
.cp-vijf .mini.m4 .veld:first-of-type {
box-shadow: 0 0 0 2px var(--primair);
}
.cp-vijf .mini.m4 .pils {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.cp-vijf .mini.m4 .pil {
background: #eef2ff;
color: var(--primair);
border-radius: 999px;
padding: 3px 9px;
font-weight: 600;
font-size: 11px;
} .cp-vijf .mini.m5 .baan {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 6px;
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 10px;
align-items: center;
}
.cp-vijf .mini.m5 .baan small {
margin: 0;
grid-column: 1 / -1;
}
.cp-vijf .mini.m5 .stippen {
display: flex;
gap: 3px;
height: 10px;
}
.cp-vijf .mini.m5 .stippen i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
display: block;
}
.cp-vijf .mini.m5 .druk .stippen i {
background: var(--primair);
}
.cp-vijf .mini.m5 em {
font-style: normal;
color: var(--muted);
font-size: 11px;
} @keyframes cp-vijf-rechts {
from {
opacity: var(--vijf-van, 0);
transform: translateX(24px);
}
}
@keyframes cp-vijf-links {
from {
opacity: var(--vijf-van, 0);
transform: translateX(-20px);
}
}
@keyframes cp-vijf-omlaag {
from {
opacity: var(--vijf-van, 0);
transform: translateY(-10px);
}
}
@keyframes cp-vijf-op {
from {
opacity: var(--vijf-van, 0);
transform: translateY(8px);
}
}
@keyframes cp-vijf-ring {
from {
box-shadow: 0 0 0 0 rgba(41, 52, 196, 0);
}
}
@keyframes cp-vijf-stip {
from {
transform: scale(0);
}
} @keyframes cp-vijf-tik {
from {
box-shadow: 0 0 0 8px rgba(41, 52, 196, .14);
}
} @keyframes cp-vijf-golf {
40% {
transform: scale(1.5);
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.cp-vijf .cp-kaart:hover .mini {
--vijf-van: .12;
}
.cp-vijf .cp-kaart:hover .mini.m1 .bub.ik {
animation: cp-vijf-op .4s var(--curve) both;
}
.cp-vijf .cp-kaart:hover .mini.m1 .doc {
animation: cp-vijf-rechts .5s var(--curve) .3s both;
}
.cp-vijf .cp-kaart:hover .mini.m2 .mail {
animation: cp-vijf-op .4s var(--curve) both;
}
.cp-vijf .cp-kaart:hover .mini.m2 .lijstje b.nieuw {
animation: cp-vijf-omlaag .5s var(--curve) .35s both;
}
.cp-vijf .cp-kaart:hover .mini.m3 .tel .mf {
animation: cp-vijf-op .35s var(--curve) both;
}
.cp-vijf .cp-kaart:hover .mini.m3 .tel .mf:nth-child(3) {
animation-delay: .1s;
}
.cp-vijf .cp-kaart:hover .mini.m3 .tel .mf:nth-child(4) {
animation-delay: .2s;
}
.cp-vijf .cp-kaart:hover .mini.m3 .doc .mf {
animation: cp-vijf-links .5s var(--curve) .35s both;
}
.cp-vijf .cp-kaart:hover .mini.m4 .veld:first-of-type {
animation: cp-vijf-tik .5s var(--curve) .15s both;
}
.cp-vijf .cp-kaart:hover .mini.m4 .pil {
animation: cp-vijf-op .4s var(--curve) .45s both;
}
.cp-vijf .cp-kaart:hover .mini.m4 .pil:nth-child(2) {
animation-delay: .6s;
}
.cp-vijf .cp-kaart:hover .mini.m5 .stippen i {
animation: cp-vijf-golf .45s var(--curve);
}
.cp-vijf .cp-kaart:hover .mini.m5 .stippen i:nth-child(2) { animation-delay: .07s; }
.cp-vijf .cp-kaart:hover .mini.m5 .stippen i:nth-child(3) { animation-delay: .14s; }
.cp-vijf .cp-kaart:hover .mini.m5 .stippen i:nth-child(4) { animation-delay: .21s; }
.cp-vijf .cp-kaart:hover .mini.m5 .stippen i:nth-child(5) { animation-delay: .28s; }
.cp-vijf .cp-kaart:hover .mini.m5 .stippen i:nth-child(6) { animation-delay: .35s; }
.cp-vijf .cp-kaart:hover .mini.m5 .stippen i:nth-child(7) { animation-delay: .42s; }
.cp-vijf .cp-kaart:hover .mini.m5 .stippen i:nth-child(8) { animation-delay: .49s; }
} @media (hover: none) and (prefers-reduced-motion: no-preference) {
.cp-vijf .cp-kaart.is-in .mini.m1 .bub.ik {
animation: cp-vijf-op .4s var(--curve) both;
}
.cp-vijf .cp-kaart.is-in .mini.m1 .doc {
animation: cp-vijf-rechts .5s var(--curve) .4s both;
}
.cp-vijf .cp-kaart.is-in .mini.m2 .mail {
animation: cp-vijf-op .4s var(--curve) both;
}
.cp-vijf .cp-kaart.is-in .mini.m2 .lijstje b.nieuw {
animation: cp-vijf-omlaag .5s var(--curve) .5s both;
}
.cp-vijf .cp-kaart.is-in .mini.m3 .tel .mf {
animation: cp-vijf-op .35s var(--curve) both;
}
.cp-vijf .cp-kaart.is-in .mini.m3 .tel .mf:nth-child(3) {
animation-delay: .1s;
}
.cp-vijf .cp-kaart.is-in .mini.m3 .tel .mf:nth-child(4) {
animation-delay: .2s;
}
.cp-vijf .cp-kaart.is-in .mini.m3 .doc .mf {
animation: cp-vijf-links .5s var(--curve) .5s both;
}
.cp-vijf .cp-kaart.is-in .mini.m4 .veld:first-of-type {
animation: cp-vijf-ring .3s var(--curve) .5s both;
}
.cp-vijf .cp-kaart.is-in .mini.m4 .pil {
animation: cp-vijf-op .4s var(--curve) .8s both;
}
.cp-vijf .cp-kaart.is-in .mini.m4 .pil:nth-child(2) {
animation-delay: 1s;
}
.cp-vijf .cp-kaart.is-in .mini.m5 .stippen i {
animation: cp-vijf-stip .3s var(--curve) both;
}
.cp-vijf .cp-kaart.is-in .mini.m5 .stippen i:nth-child(2) { animation-delay: .06s; }
.cp-vijf .cp-kaart.is-in .mini.m5 .stippen i:nth-child(3) { animation-delay: .12s; }
.cp-vijf .cp-kaart.is-in .mini.m5 .stippen i:nth-child(4) { animation-delay: .18s; }
.cp-vijf .cp-kaart.is-in .mini.m5 .stippen i:nth-child(5) { animation-delay: .24s; }
.cp-vijf .cp-kaart.is-in .mini.m5 .stippen i:nth-child(6) { animation-delay: .3s; }
.cp-vijf .cp-kaart.is-in .mini.m5 .stippen i:nth-child(7) { animation-delay: .36s; }
.cp-vijf .cp-kaart.is-in .mini.m5 .stippen i:nth-child(8) { animation-delay: .42s; }
} @media (max-width: 1023px) {
.cp-vijf {
display: flex;
gap: 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
margin-inline: -1rem;
padding: 18px 1rem 20px;
scroll-padding-inline: 1rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cp-vijf::-webkit-scrollbar {
display: none;
}
.cp-vijf .cp-kaart,
.cp-vijf .cp-kaart:nth-child(4),
.cp-vijf .cp-kaart:nth-child(5) {
grid-column: auto;
}
} .cp-grenzen {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: 3rem;
align-items: start;
}
.cp-grenzen .cp-kop {
margin-bottom: 0;
}
.cp-grenzen-onder {
font-size: .95rem;
margin-top: 1.5rem;
} .cp-grenzen-scherm {
position: relative;
isolation: isolate;
border-radius: var(--r-kaart);
}
.cp-grenzen-scherm::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(41, 52, 196, .07);
transform: rotate(-2deg) translateX(10px) translateY(-10px);
z-index: -1;
}
.cp-grenzen-scherm .scr {
border-radius: var(--r-kaart);
box-shadow: var(--schaduw);
font-size: 14px;
}
.cp-grenzen-scherm .chrome {
padding: 10px 14px;
}
.cp-grenzen-scherm .chrome .url {
font-family: var(--fh);
font-weight: 600;
color: var(--kop);
font-size: 12px;
}
.cp-grenzen-lijst {
list-style: none;
margin: 0;
padding: 6px 0 0;
}
.cp-grenzen-lijst > li {
border-bottom: 1px solid #f1f5f9;
}
.cp-grenzen-lijst > li:last-child {
border-bottom: 0;
} .cp-grenzen-regel {
display: grid;
grid-template-columns: 1fr auto 12px;
align-items: center;
gap: 14px;
width: 100%;
min-height: 52px;
padding: 12px 18px;
font-size: 14px;
color: var(--kop);
transition: background .2s;
}
.cp-grenzen-regel:focus-visible {
border-radius: 0;
outline-offset: -2px;
}
@media (hover: hover) {
.cp-grenzen-regel:hover {
background: var(--grijs);
}
}
.cp-grenzen-regel .chev {
color: var(--muted);
margin-right: 4px;
}
.cp-meer.open .cp-grenzen-regel .chev {
color: var(--primair);
} .cp-grenzen-regel .stand {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 10px 3px 8px;
border-radius: 999px;
background: #f3f4f6;
color: var(--kop);
white-space: nowrap;
}
.cp-grenzen-regel .stand::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #9ca3af;
}
.cp-grenzen-regel .stand--jij {
background: rgba(41, 52, 196, .08);
color: var(--primair);
}
.cp-grenzen-regel .stand--jij::before {
background: var(--primair);
} .cp-grenzen-scherm .stand {
opacity: 0;
transform: translateY(8px);
transition: opacity .4s var(--curve), transform .4s var(--curve);
transition-delay: calc(.15s + var(--i, 0) * .08s);
}
.cp-grenzen-scherm.visible .stand,
html:not(.js) .cp-grenzen-scherm .stand {
opacity: 1;
transform: none;
} .cp-grenzen-punten {
list-style: none;
margin: 0;
padding: 0 18px 14px;
display: grid;
gap: 5px;
}
.cp-grenzen-punten li {
position: relative;
padding-left: 1.1rem;
font-size: 13px;
line-height: 1.5;
color: var(--muted);
}
.cp-grenzen-punten li::before {
content: '';
position: absolute;
left: 2px;
top: .45em;
width: 4px;
height: 8px;
border: solid var(--groen);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
} html:not(.js) .cp-grenzen-lijst .cp-meer-paneel {
grid-template-rows: 1fr;
}
html:not(.js) .cp-grenzen-lijst .cp-meer-paneel > div {
visibility: visible;
}
html:not(.js) .cp-grenzen-regel .chev {
display: none;
} .cp-grenzen-voet {
display: flex;
align-items: center;
padding: 12px 18px;
border-top: 1px solid var(--lijn);
background: var(--grijs);
}
.cp-grenzen-voet .mono {
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
} @media (max-width: 1023px) {
.cp-grenzen {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.cp-grenzen-scherm {
max-width: 40rem;
}
} @media (max-width: 479px) {
.cp-grenzen-regel {
grid-template-columns: 1fr 12px;
gap: 6px 12px;
padding: 12px 16px;
}
.cp-grenzen-regel .zin {
grid-column: 1;
grid-row: 1;
}
.cp-grenzen-regel .chev {
grid-column: 2;
grid-row: 1 / span 2;
}
.cp-grenzen-regel .stand {
grid-column: 1;
grid-row: 2;
justify-self: start;
}
.cp-grenzen-punten {
padding: 0 16px 14px;
}
.cp-grenzen-voet {
padding: 12px 16px;
}
} @media (prefers-reduced-motion: reduce) {
.cp-tour .board .bron .lijn,
.cp-tour .vak .knopje.draait,
.cp-prijs .ankerkaart,
.cp-rollen .md .urentabel tr.nieuw td {
animation: none;
}
.cp-tour .board .toast,
.cp-rollen .md .toast,
.cp-prijs .meterkaart .naald,
.cp-tour .vak .balken i,
.cp-rollen .md .staaf i,
.cp-rollen .kiezer button,
.cp-prijs .vraag .opties button {
transition: none;
} .cp-tour--hero .tour-stap .uitklap,
.cp-tour--hero .tour-stap .uitklap > div {
transition: none;
} .cp-schema .draad,
.cp-schema .chip,
.cp-koppel-kaart.schuif-links > .cp-schema.act,
.cp-koppel-kaart.schuif-rechts > .cp-schema.act,
.cp-verzoek-kaart.schuif-links > .cp-verzoek-soort.act,
.cp-verzoek-kaart.schuif-rechts > .cp-verzoek-soort.act {
animation: none;
}
.cp-knopen-spoor {
scroll-behavior: auto;
}
.cp-meer-paneel,
.cp-meer-paneel > div,
.cp-meer-knop .chev,
.cp-slider-knop,
.cp-slider-stippen span,
.cp-kiezer button,
.cp-auto-stip,
.cp-scene .token,
.cp-scene .deur i,
.cp-scene .r,
.cp-scene .stapje,
.cp-knoop-kop .pijl,
.cp-auto-project .pijl,
.cp-auto-prijs .chip .pijl,
.cp-koppel-tekst .cta .pijl {
transition: none;
} .cp-stap,
.cp-stap::before,
.cp-stap-kop button,
.cp-stap .nr,
.cp-stap .chev,
.cp-stap .uitklap,
.cp-stap .uitklap > div,
.cp-grenzen-regel,
.cp-grenzen-scherm .stand {
transition: none;
}
}