.hcs-thema--licht,
:root {
--hcs-achtergrond: 255 255 255;
--hcs-primair:     254 0 0;
--hcs-secundair:   4 21 24;
--hcs-tertiair:    4 21 24;
--hcs-signaal:     254 0 0;
}
.hcs-thema--donker {
--hcs-achtergrond: 10 47 51;
--hcs-primair:     254 0 0;
--hcs-secundair:   255 255 255;
--hcs-tertiair:    4 21 24;
--hcs-signaal:     254 0 0;
}
.hcs-thema--fel {
--hcs-achtergrond: 254 0 0;
--hcs-primair:     255 255 255;
--hcs-secundair:   255 255 255;
--hcs-tertiair:    4 21 24;
--hcs-signaal:     4 21 24;
}
.hcs-thema--zwart {
--hcs-achtergrond: 0 0 0;
--hcs-primair:     255 255 255;
--hcs-secundair:   255 255 255;
--hcs-tertiair:    10 47 51;
--hcs-signaal:     254 0 0;
}
.hcs-thema--parelzwart {
--hcs-achtergrond: 4 21 24;
--hcs-primair:     255 255 255;
--hcs-secundair:   255 255 255;
--hcs-tertiair:    10 47 51;
--hcs-signaal:     254 0 0;
}
.hcs-thema--licht,
.hcs-thema--donker,
.hcs-thema--fel,
.hcs-thema--zwart,
.hcs-thema--parelzwart {
background-color: rgb(var(--hcs-achtergrond));
color: rgb(var(--hcs-primair));
}
:root {
--hcs-kopletter: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
--hcs-tekstletter: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--hcs-curve: cubic-bezier(0.3, 1, 0.3, 1);
--hcs-duur: 0.5s;
--hcs-pil: 9999px;
}
.hcs-kop {
font-family: var(--hcs-kopletter);
font-weight: 500;
line-height: 1;
color: rgb(var(--hcs-primair));
margin: 0;
}
.hcs-kop--2xl { font-size: clamp(40px, 6.6667vw, 96px); font-weight: 900; }
.hcs-kop--xl  { font-size: clamp(36px, 16px + 3.3333vw, 64px); font-weight: 900; }
.hcs-kop--lg  { font-size: clamp(28px, 8px + 3.3333vw, 56px); }
.hcs-kop--md  { font-size: clamp(24px, 12.5714px + 1.9048vw, 40px); line-height: 1.2; }
.hcs-kop--sm  { font-size: clamp(22px, 14.8571px + 1.1905vw, 32px); line-height: 1.2; }
.hcs-kop--xs  { font-size: clamp(18px, 13.7143px + 0.7143vw, 24px); line-height: 1.2; }
.hcs-intro {
font-family: var(--hcs-tekstletter);
color: rgb(var(--hcs-secundair));
}
.hcs-intro--xl { font-size: clamp(28px, 8px + 3.3333vw, 56px); line-height: 1; }
.hcs-intro--lg { font-size: clamp(22px, 14.8571px + 1.1905vw, 32px); line-height: 1.2; }
.hcs-intro--md { font-size: clamp(18px, 13.7143px + 0.7143vw, 24px); line-height: 1.2; }
.hcs-tekst {
font-family: var(--hcs-tekstletter);
font-size: 1rem;
line-height: 1.5;
color: rgb(var(--hcs-secundair));
}
.hcs-overline {
font-family: var(--hcs-kopletter);
font-weight: 500;
font-size: 0.75rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media (max-width: 799px) {
.hcs-overline { font-size: 0.625rem; }
}
.hcs-tagtekst {
font-family: var(--hcs-kopletter);
font-weight: 500;
font-size: 0.625rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.hcs-knop {
--hcs-clip-basis: 50%;
--hcs-pijl-basis: 1.375rem;
display: inline-flex;
align-items: center;
border: 0;
padding: 0;
background: none;
font-family: var(--hcs-kopletter);
font-size: 1rem;
font-weight: 500;
line-height: 1;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.hcs-knop:disabled { cursor: not-allowed; }
.hcs-knop * {
transition:
transform var(--hcs-duur) var(--hcs-curve),
clip-path var(--hcs-duur) var(--hcs-curve);
}
.hcs-knop__blok {
display: flex;
align-items: center;
pointer-events: none;
transform: translateX(var(--hcs-schuif));
}
.hcs-knop__tekst {
margin-bottom: calc(5 / 16 * 1rem);
white-space: nowrap;
}
.hcs-knop__cirkel {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--hcs-pil);
}
.hcs-knop__cirkel svg { width: 0.5rem; height: 0.5rem; }
.hcs-knop__cirkel--een    { clip-path: circle(calc(var(--hcs-clip-basis) - var(--hcs-clip-1)) at 50%); }
.hcs-knop__cirkel--twee   { clip-path: circle(var(--hcs-clip-2) at 50%); }
.hcs-knop__cirkel--een svg  { transform: translate(calc(var(--hcs-pijl-1) * -1), var(--hcs-pijl-1)); }
.hcs-knop__cirkel--twee svg { transform: translate(var(--hcs-pijl-2), calc(var(--hcs-pijl-2) * -1)); }
.hcs-knop--primair {
--hcs-schuif: 0;
--hcs-clip-1: var(--hcs-clip-basis);
--hcs-clip-2: var(--hcs-clip-basis);
--hcs-pijl-1: var(--hcs-pijl-basis);
--hcs-pijl-2: 0;
}
.hcs-knop--primair .hcs-knop__tekst { color: rgb(var(--hcs-secundair)); }
.hcs-knop--primair .hcs-knop__cirkel {
background-color: rgb(var(--hcs-signaal));
color: #fff;
}
.hcs-knop--primair .hcs-knop__cirkel--een {
position: absolute;
right: 100%;
margin-right: 1rem;
}
.hcs-knop--primair .hcs-knop__cirkel--twee { margin-left: 1rem; }
.hcs-knop--primair .hcs-knop__blok { position: relative; }
.hcs-knop--primair:hover,
.hcs-knop--primair:focus-visible {
--hcs-schuif: 3.75rem;
--hcs-clip-1: 0%;
--hcs-clip-2: 0%;
--hcs-pijl-1: 0;
--hcs-pijl-2: var(--hcs-pijl-basis);
}
.hcs-knop--secundair {
--hcs-schuif: -0.875rem;
--hcs-clip-1: var(--hcs-clip-basis);
--hcs-clip-2: var(--hcs-clip-basis);
--hcs-pijl-1: var(--hcs-pijl-basis);
--hcs-pijl-2: 0;
border: 1px solid rgb(var(--hcs-secundair));
border-radius: var(--hcs-pil);
color: rgb(var(--hcs-secundair));
}
.hcs-knop--secundair .hcs-knop__cirkel {
width: calc(46 / 16 * 1rem);
height: calc(46 / 16 * 1rem);
color: inherit;
}
.hcs-knop--secundair:hover,
.hcs-knop--secundair:focus-visible {
--hcs-schuif: 0.875rem;
--hcs-clip-1: 0%;
--hcs-clip-2: 0%;
--hcs-pijl-1: 0;
--hcs-pijl-2: var(--hcs-pijl-basis);
}
.hcs-knop--icoon {
--hcs-schuif: 0;
--hcs-cirkel-basis: 40%;
--hcs-cirkel-x: var(--hcs-cirkel-basis);
--hcs-clip-1: var(--hcs-clip-basis);
--hcs-clip-2: var(--hcs-clip-basis);
--hcs-pijl-1: calc(var(--hcs-pijl-basis) * -1);
--hcs-pijl-2: 0;
width: 2.75rem;
height: 2.75rem;
overflow: hidden;
border-radius: var(--hcs-pil);
}
.hcs-knop--icoon * { transition: var(--hcs-duur) var(--hcs-curve); }
.hcs-knop--icoon .hcs-knop__blok {
display: flex;
justify-content: flex-end;
width: 2.75rem;
height: 2.75rem;
}
.hcs-knop--icoon .hcs-knop__cirkel {
background-color: rgb(var(--hcs-signaal));
color: #fff;
}
.hcs-knop--icoon .hcs-knop__cirkel svg { width: 0.625rem; height: 0.6875rem; }
.hcs-knop--icoon .hcs-knop__cirkel--een {
clip-path: circle(calc(var(--hcs-clip-basis) - var(--hcs-clip-1)) at 50%);
transform: translateX(var(--hcs-cirkel-x));
}
.hcs-knop--icoon .hcs-knop__cirkel--twee {
clip-path: circle(var(--hcs-clip-2) at 50%);
transform: translateX(calc((var(--hcs-cirkel-basis) - var(--hcs-cirkel-x)) * -1));
}
.hcs-knop--icoon .hcs-knop__cirkel--een svg  { transform: translateX(var(--hcs-pijl-1)); }
.hcs-knop--icoon .hcs-knop__cirkel--twee svg { transform: translateX(var(--hcs-pijl-2)); }
.hcs-knop--icoon:hover,
.hcs-knop--icoon:focus-visible {
--hcs-cirkel-x: 0%;
--hcs-clip-1: 0%;
--hcs-clip-2: 0%;
--hcs-pijl-1: 0;
--hcs-pijl-2: var(--hcs-pijl-basis);
--hcs-schuif: 100%;
}
.hcs-knop--icoon.hcs-knop--links .hcs-knop__blok    { transform: translateX(var(--hcs-schuif)) rotate(-180deg); }
.hcs-knop--icoon.hcs-knop--links svg                   { transform: rotate(180deg); }
.hcs-knop--icoon.hcs-knop--boven .hcs-knop__blok    { transform: translateX(var(--hcs-schuif)) rotate(-90deg); }
.hcs-knop--icoon.hcs-knop--boven svg                   { transform: rotate(90deg); }
.hcs-knop--icoon.hcs-knop--onder .hcs-knop__blok    { transform: translateX(var(--hcs-schuif)) rotate(90deg); }
.hcs-knop--icoon.hcs-knop--onder svg                   { transform: rotate(-90deg); }
.hcs-label {
display: inline-block;
padding: 7px 15px 9px;
border-radius: var(--hcs-pil);
background-color: rgb(var(--hcs-secundair));
color: rgb(var(--hcs-achtergrond));
}
.hcs-tag {
display: inline-block;
padding: 8px 10px;
background-color: rgb(var(--hcs-signaal));
color: #fff;
}
.hcs-bullet {
display: inline-block;
padding: 17px 25px;
border: 1px solid rgb(var(--hcs-primair));
border-radius: var(--hcs-pil);
color: rgb(var(--hcs-primair));
}
.hcs-rij {
position: relative;
display: flex;
align-items: flex-end;
gap: 0 1.25rem;
width: 100%;
padding-top: 3rem;
padding-bottom: 1rem;
color: rgb(var(--hcs-secundair));
text-decoration: none;
}
.hcs-rij::before,
.hcs-rij::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
transition: transform var(--hcs-duur) var(--hcs-curve);
}
.hcs-rij::before {
background-color: rgb(var(--hcs-secundair));
transform-origin: right center;
transform: scaleX(1);
}
.hcs-rij::after {
background-color: rgb(var(--hcs-signaal));
transform-origin: left center;
transform: scaleX(0);
}
.hcs-rij:hover::before,
.hcs-rij:focus-visible::before { transform: scaleX(0); }
.hcs-rij:hover::after,
.hcs-rij:focus-visible::after { transform: scaleX(1); }
.hcs-rij--rustig { padding-bottom: 1.5rem; }
.hcs-rij--rustig .hcs-knop--primair { display: none; }
@media (min-width: 800px) {
.hcs-rij--nadruk .hcs-knop--icoon { display: none; }
}
@media (max-width: 799px) {
.hcs-rij--nadruk .hcs-knop--primair { display: none; }
.hcs-rij { flex-wrap: wrap; }
}
.hcs-rij:hover .hcs-knop--primair,
.hcs-rij:focus-visible .hcs-knop--primair {
--hcs-schuif: 3.75rem;
--hcs-clip-1: 0%;
--hcs-clip-2: 0%;
--hcs-pijl-1: 0;
--hcs-pijl-2: var(--hcs-pijl-basis);
}
.hcs-rij:hover .hcs-knop--icoon,
.hcs-rij:focus-visible .hcs-knop--icoon {
--hcs-cirkel-x: 0%;
--hcs-clip-1: 0%;
--hcs-clip-2: 0%;
--hcs-pijl-1: 0;
--hcs-pijl-2: var(--hcs-pijl-basis);
--hcs-schuif: 100%;
}
.hcs-rij__titel { flex: 1 1 auto; }
.hcs-rij__meta  { flex: 0 0 auto; }
.hcs-onderstreep {
position: relative;
z-index: 1;
color: rgb(var(--hcs-secundair));
text-decoration: none;
}
.hcs-onderstreep::before,
.hcs-onderstreep::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 1px;
}
.hcs-onderstreep::before { background-color: currentColor; }
.hcs-onderstreep::after {
background-color: rgb(var(--hcs-signaal));
transform: scaleX(0);
transform-origin: right center;
transition: transform var(--hcs-duur) var(--hcs-curve);
}
.hcs-onderstreep:hover::after,
.hcs-onderstreep:focus-visible::after {
transform: scaleX(1);
transform-origin: left center;
}
.hcs-container { padding-left: 1.25rem; padding-right: 1.25rem; }
.hcs-container--vol { padding-left: 0; padding-right: 0; }
.hcs-binnen { padding-top: 3rem; padding-bottom: 4rem; }
@media (min-width: 600px) {
.hcs-binnen { padding-top: 8vw; padding-bottom: 10.6667vw; }
}
@media (min-width: 1000px) {
.hcs-binnen { padding-top: 11.1111vw; padding-bottom: 11.1111vw; }
}
.hcs-raster {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
column-gap: 0.75rem;
}
@media (min-width: 1000px) {
.hcs-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.hcs-knop *,
.hcs-rij::before,
.hcs-rij::after,
.hcs-onderstreep::after {
transition: none;
}
}