/* ------------------------- Style - Samen Toegankelijk Heerlen (Pendra Studio) ------------------------- */

/* ------------------------- Cookie Jar -------------------------------------------------- */

.cookie-jar {
   position: fixed;
   bottom: calc(var(--gap-padding) * 0.75);
   right: calc(var(--gap-padding) * 1.5);
   z-index: 200;
   background: var(--color-dark-medium);
   padding: 2.5em 2em;
   border-radius: var(--border-radius-small);
   max-width: 19em;
   border: 1px solid rgba(var(--color-light-rgb), 0.15);
}

.cookie-jar .col-content {
   display: flex;
   flex-direction: column;
   gap: 1em;
   text-align: center;
   align-items: center;
}

.cookie-jar .col-content h4 {
   font-weight: 400;
   color: var(--color-light);
}

.cookie-jar .col-content p {
   color: var(--color-text-light);
}

.cookie-jar .col-content a {
   color: var(--color-light);
}

.cookie-jar .col-content a::after {
   background: var(--color-secondary);
}

.cookie-jar .col-btns {
   padding-top: 2em;
   display: flex;
   justify-content: center;
   gap: 1em;
}

.cookie-jar .col-btns .btn-small.flipped .arrow.first .arrow-fill {
   border: 1px solid var(--color-border-light);
}

.cookie-jar .col-btns .btn-small.flipped .arrow.first .arrow-content {
   color: var(--color-light);
}

.cookie-jar .icon {
   width: 1.75em;
   height: 1.5em;
}

.cookie-jar .icon svg {
   width: 100%;
}

.cookie-jar .icon svg path {
   stroke: var(--color-light);
}

@media screen and (max-width: 540px) {
   /* .cookie-jar {
      right: calc(var(--container-padding) * 2);
      width: calc(100% - (var(--container-padding) * 4));
      max-width: 100%;
   } */

   .cookie-jar {
      width: 100%;
      max-width: 100%;
      bottom: 0;
      right: 0;
      border-radius: calc(var(--border-radius) * 1.5) calc(var(--border-radius) * 1.5) 0 0;
   }

   .cookie-jar .col-btns {
      padding-top: 1.5em;
   }
}


/* ------------------------- Page Transition -------------------------------------------------- */

.pendra-loader {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   overflow: hidden;
   z-index: 6000;
   background: transparent;
   display: flex;
   padding: var(--gap-padding);
   align-items: center;
   justify-content: center;
   background: var(--color-dark-medium);
}

.pendra-loader .logo-wrapper {
   position: relative;
   overflow: hidden;
}

.pendra-loader .logo {
   padding: 0.1em;
}

.pendra-loader .counter {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: var(--gap-padding);
   overflow: hidden;
}

/* Bewuste uitzondering op de huisregel "Neue voor alles, Atkinson voor lopende
   tekst": de teller is geen kop maar een klein stukje interface, en staat hier
   rechtop in het tekstfont. Twee overrides nodig, want de styleguide zet
   h1-h4 op --font-heading en legt via h3 em daar nog cursief bovenop.

   Maat in em, niet in px: body rekent --pendra-tekst mee, dus de teller
   schaalt mee met de tekstgrootte-schuif in het toegankelijkheidspaneel. */
.pendra-loader h3 {
   font-family: var(--font-primary);
   font-weight: 400;
   font-size: 0.65em;
   line-height: 1em;
}

.pendra-loader h3 em {
   font-family: var(--font-primary);
   font-weight: 400;
   font-style: normal;
   font-size: 1em;
   /* Fluistertint: komt op de loader-achtergrond (#E5E0DC) uit op #C5C3BF,
      contrast 1,34:1. Bewust ver onder de leesbaarheidsnorm - dit is een
      decoratief detail, geen informatie die iemand nodig heeft. Als alpha
      genoteerd en niet als vaste hex, zodat het meebeweegt met het groen. */
   color: rgba(var(--color-light-rgb), 0.2);
}

/*  Loading Fade  */

.pendra-loader-fade {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   overflow: hidden;
   z-index: 5900;
   background: var(--color-dark-medium);
   visibility: visible;
   opacity: 1;
   pointer-events: none;
}

.pendra-loader-fade svg {
   position: absolute;
   bottom: var(--gap-padding);
   right: var(--gap-padding);
   width: 2.5em;
}

.pendra-loader-fade svg path {
   fill: var(--color-light-medium);
}

/*  Split Words  */

.split-words {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 0 0.2em;
}

.default-header.center .split-words {
   justify-content: center;
}

.split-words .pendra-word {
   overflow: hidden;
   padding: 0.15em 0.05em;
   margin: -0.15em -0.05em;
}

.split-words em {
   display: inline-block;
   line-height: inherit;
}

.split-words .pendra-word-inner {
   position: relative;
   transform-origin: left bottom;
}

/* ------------------------- Nav Bar -------------------------------------------------- */

.nav-bar {
   padding: 0;
   position: fixed;
   z-index: 100;
   width: 100%;
   display: flex;
   flex-direction: column;
   pointer-events: none;
   transition: all var(--animation-nav);
   transform: translateY(0em) rotate(0.001deg);
   --border-radius-medium: calc(var(--border-radius) * 5);
}

.scroll-direction-down.nav-bar {
   transform: translateY(calc(-2.5em - 1px)) rotate(0.001deg);
}

.nav-bar .corner {
   position: absolute;
   top: 100%;
   width: var(--border-radius-medium);
   height: var(--border-radius-medium);
   width: var(--border-radius);
   height: var(--border-radius);
   display: flex;
   z-index: 2;
}

.nav-bar .corner.right {
   right: 0;
   transform: scaleX(-1);
}

.nav-bar .corner.left.fill svg,
.nav-bar .corner.right.fill svg {
   margin-top: -2%;
}

@media screen and (max-width: 540px){
   .nav-bar .corner.left.fill svg,
   .nav-bar .corner.right.fill svg {
      margin-top: -4%;
   }
}

.nav-bar .corner path:first-child {
   fill: var(--color-dark);
   transition: fill var(--animation-nav);
}

.nav-bar .corner path:last-child {
   stroke: transparent;
}

.nav-bar .corner.outline path:last-child {
   stroke: var(--color-light);
   stroke-width: 0.225em;
   transition: stroke var(--animation-nav);
}

@media screen and (max-width: 540px){
   .nav-bar .corner.outline path:last-child {
      stroke-width: 0.35em;
   }
}

.nav-bar .cut-out {
   opacity: 0;
   top: 100%;
   position: absolute;
   left: 0;
   width: calc(100% - 1px);
   z-index: 3;
   transition: opacity var(--animation-nav);
}

.nav-bar .cut-out .stroke {
   width: 100%;
   top: 100%;
   left: 0;
   background: var(--color-light);
   position: absolute;
   height: 1px;
   transition: background-color var(--animation-nav);
}

.nav-height {
   padding: 0;
   width: 100%;
   height: 8.5em;
}

.nav-height + .section {
   margin-top: -1px;
}

.nav-height-actueel {
   padding: 0;
   width: 100%;
   height: 4.25em;
}

/* Colors */

.nav-bar.theme-nav-light .nav-main,
.nav-bar.theme-nav-light .nav-main::before {
   background: var(--color-light);
}

.nav-bar.theme-nav-light-medium .nav-main,
.nav-bar.theme-nav-light-medium .nav-main::before {
   background: var(--color-light-medium);
}

.nav-bar.theme-nav-light .corner path:first-child {
   fill: var(--color-light);
}

.nav-bar.theme-nav-light-medium .corner path:first-child {
   fill: var(--color-light-medium);
}

.nav-bar.scroll-scrolled .cut-out,
.nav-bar.scroll-scrolled .cut-out {
   opacity: 0.15;
}

.nav-bar.theme-nav-light.scroll-scrolled .cut-out,
.nav-bar.theme-nav-light-medium.scroll-scrolled .cut-out {
   opacity: 0.15;
}

.nav-bar.theme-nav-light .cut-out .stroke,
.nav-bar.theme-nav-light-medium .cut-out .stroke {
   background: var(--color-dark);
}

.nav-bar.theme-nav-light .corner.outline path:last-child,
.nav-bar.theme-nav-light-medium .corner.outline path:last-child {
   stroke: var(--color-dark);
}

/* See Through */

/* .nav-bar.pendra-nav-clear:is(.theme-nav-light, .theme-nav-dark) .nav-main,
.nav-bar.pendra-nav-clear .nav-main::before {
   background: transparent;
} */

/* ------------------------- Logo -------------------------------------------------- */

/* Zie het lockup-blok verderop ("Logo Samen Toegankelijk Heerlen") voor de
   volledige logo-styling; hier staat alleen wat de nav-layout nodig heeft. */

/* ------------------------- Nav Main -------------------------------------------------- */

.nav-main {
   background: var(--color-dark);
   border-radius: calc(var(--border-radius) * 1) calc(var(--border-radius) * 1) 0 0;
   height: 6em;
   transition: all var(--animation-nav);
   z-index: 1;
   position: relative;
   overflow: hidden;
}

.nav-main::before {
   content: "";
   top: 0;
   left: -1px;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   background: var(--color-dark);
   position: absolute;
   transition: all var(--animation-nav);
}

.nav-bar.scroll-direction-down .nav-main {
   height: 5em;
   border-radius: 0;
}

.nav-main-wrapper {
   padding: 0 var(--gap-padding);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 100%;
   transform: translateY(0em) rotate(0.0001deg);
   transition: transform var(--animation-nav);
}

.nav-bar.scroll-direction-down .nav-main-wrapper {
   transform: translateY(0em) rotate(0.0001deg);
}

.nav-main .logo {
   pointer-events: all;
}

.nav-main ul {
   display: flex;
   gap: 1.5em;
   align-items: center;
   pointer-events: all;
}

.nav-main ul li:not(:last-child) {
   padding-left: 0.25em;
}

.nav-main ul li .btn span {
   font-size: 1em;
}

.nav-main .btn-link .btn-content {
   height: 2em;
}

.theme-nav-dark .nav-main ul li .btn span {
   color: var(--color-light);
}

.nav-main li.active .btn-link .btn-content::after {
   transform: rotate(0.001deg) scaleX(1);
}

/* Search */

.nav-main-search {
   width: 2.6em;
   height: 2.6em;
   border-radius: 50%;
   border: 1px solid rgba(var(--color-dark-rgb), 0.25);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--animation-nav);
}

.theme-nav-dark .nav-main-search {
   border: 1px solid rgba(var(--color-light-rgb), 0.2);
}

.nav-main-search span {
   position: absolute;
   left: 99999px;
}

.nav-main-search svg {
   width: 1.2em;
}

.nav-main-search svg path {
   stroke: var(--color-dark);
   stroke-width: 1.25px;
   transition: var(--animation-nav);
}

.nav-main-search:hover svg path {
   opacity: .66;
}

.theme-nav-dark .nav-main-search svg path {
   stroke: var(--color-light);
}

/* Hamburger */

.nav-main-hamburger {
   width: 2.6em;
   height: 2.6em;
   border-radius: 50%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--animation-nav);
   background: var(--color-dark-medium);
}

.nav-main-hamburger span {
   position: absolute;
   left: 99999px;
}

.nav-main-hamburger svg {
   width: 0.85em;
}

.nav-main-hamburger svg rect {
   fill: var(--color-light);
   transition: var(--animation-nav);
}

.nav-main-hamburger:hover svg path {
   opacity: .66;
}

@media screen and (max-width: 720px){

   .nav-main ul {
      gap: 0.4em;
   }

}

/* ------------------------- Nav Secondary -------------------------------------------------- */

.nav-secondary {
   padding: 0 calc(var(--gap-padding) - .5em);
   height: 2.5em;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   pointer-events: all;
   transform: translateY(0%) rotate(0.001deg);
   transition: all var(--animation-nav);
   position: relative;
}

.nav-secondary::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 150%;
   background: var(--color-dark-medium);
}

.scroll-direction-down .nav-secondary-up {
   transform: translateY(50%) rotate(0.001deg);
}

.nav-secondary ul {
   display: flex;
   gap: .25em;
   position: relative;
}

.nav-secondary .mobile-left {
   display: flex;
   gap: .25em;
   position: relative;
}

.nav-secondary ul li .nav-secondary-click {
   display: flex;
   align-items: center;
   padding: 0.5em .5em;
   cursor: pointer;
}

.nav-secondary ul li .nav-secondary-click span {
   font-size: .7em;
   color: var(--color-light);
   line-height: 1em;
   margin-bottom: 0em;
   transition: opacity var(--animation-primary);
}

.nav-secondary ul li .nav-secondary-click:hover span {
   opacity: .66;
}

.nav-secondary .nav-secondary-language span {
   text-transform: uppercase;
}

/* ---- Topbalk: "Meld een obstakel." met roterend woord ----

   Gescoped op .nav-secondary-up, want .nav-secondary wordt ook door de footer
   gebruikt. De auto-marge duwt de rest naar rechts; auto-marges pakken de vrije
   ruimte vóór justify-content, dus de bestaande flex-end en de mobiele
   space-between blijven ongemoeid. Zelfde techniek als .credits in de footer. */

.nav-secondary-up ul {
   width: 100%;
}

.nav-secondary-up .nav-meld {
   margin-right: auto;
}

.nav-secondary ul li .nav-secondary-click .wissel-tekst {
   display: flex;
   /* center en niet baseline: overflow:hidden verlegt de basislijn van het
      masker naar zijn ondermarge, waardoor de zin scheef zou staan. */
   align-items: center;
   white-space: nowrap;
}

/* De spans erven .7em al van de regel hierboven; zonder deze reset stapelt dat
   per niveau (.7 x .7 = .49em). Idem voor de hover-dimming. */

.nav-secondary ul li .nav-secondary-click .wissel-tekst span {
   font-size: 1em;
   line-height: 1em;
   color: inherit;
   display: block;
}

.nav-secondary ul li .nav-secondary-click:hover .wissel-tekst span {
   opacity: 1;
}

/* Afstand tussen de vaste tekst en het woord. Bewust een marge op alleen dit
   element en geen gap op de rij: een gap zou ook tussen het woord en de punt
   vallen, en dan staat er "obstakel ." met een spatie ervoor. In de kop regelt
   de gap op .kop-meld het, want daar staat geen punt. */

.nav-secondary .wissel-vast {
   margin-right: .3em;
}

/* ---- Roterend woord: gedeeld mechanisme ----

   Gebruikt in de topbalk en in de kop op de meldpagina. Twee variabelen regelen
   het verschil: --wissel-regel is de regelhoogte van de plek waar het staat, en
   --wissel-lek de speling waarbinnen stokken en staarten mogen uitsteken.

   Zelfde padding/negatieve-marge-truc als .split-words .pendra-word: de letters
   blijven heel, maar de woorden verdwijnen wel achter de rand.

   Verticaal geen negatieve marge: die zou het margevak van het masker laten
   verschillen van waar de tekst erin staat, waardoor align-items:center het
   woord net naast de vaste tekst legt. Horizontaal wel, anders krijg je een
   spatie voor en na het woord. */

.wissel-masker {
   --wissel-regel: 1em;
   --wissel-lek: 0.18em;   /* verticale speling: stokken en staarten */
   --wissel-zij: 0.06em;   /* horizontale speling: cursieve overhang */
   /* content-box zodat de breedte die JS zet de gemeten woordbreedte IS.
      Met de globale border-box zat de padding er nog vanaf en werd het woord
      juist krapper dan gemeten - de laatste letter viel er dan af. */
   box-sizing: content-box;
   position: relative;
   overflow: hidden;
   padding: var(--wissel-lek) var(--wissel-zij);
   margin: 0 calc(-1 * var(--wissel-zij));
}

.wissel-woord {
   white-space: nowrap;
}

/* Zonder JS blijft woord 1 in de flow staan: de zin klopt en de breedte komt
   vanzelf goed. De rest is dan verborgen. */

.wissel-woord ~ .wissel-woord {
   position: absolute;
   top: var(--wissel-lek);
   left: var(--wissel-zij);
   visibility: hidden;
}

/* JS heeft gemeten en neemt het over: alle woorden absoluut, masker op een
   vaste breedte zodat de regel niet verspringt bij een wissel.

   De hoogte moet expliciet, want absolute kinderen dragen niets bij. Let op
   box-sizing: border-box (staat globaal): de padding zit IN deze waarde, dus
   regelhoogte plus tweemaal de speling. Zet je hier alleen de regelhoogte, dan
   wordt de staart van de g afgeknipt en zakt het woord scheef. */

/* content-box: dit is de inhoudshoogte, de speling komt er nog omheen. */
.wissel--js .wissel-masker {
   height: var(--wissel-regel);
}

.wissel--js .wissel-woord {
   position: absolute;
   top: var(--wissel-lek);
   left: var(--wissel-zij);
   visibility: visible;
}

/* ---- Plaatsing: kop op de meldpagina ---- */

.kop-meld {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0 0.2em;
}

.kop-meld .wissel-masker {
   /* h1 heeft line-height 1.1; het masker moet die regel volgen, niet 1em.
      Ruimere zijspeling: cursief op kopformaat hangt fors over. */
   --wissel-regel: 1.1em;
   --wissel-lek: 0.14em;
   --wissel-zij: 0.14em;
}

.kop-meld .wissel-woord {
   font-family: var(--font-heading);
   font-style: italic;
}

@media screen and (max-width: 720px) {
   /* Het e-mailadres maakt plaats voor de meldlink. De hele groep kan weg:
      Melding doen en Contact waren hier al verborgen. */
   .nav-secondary-up .mobile-left {
      display: none;
   }
}

.nav-secondary .nav-secondary-language .flag {
   width: 0.8em;
   height: 0.6em;
   margin-right: .3em;
   background-color: var(--color-light-medium);
   border-radius: 1px;
}

.flag.nl {
   background: url("../img/nl.svg") center center no-repeat;
   background-size: cover;
}

.flag.en {
   background: url("../img/en.svg") center center no-repeat;
   background-size: cover;
}

.flag.de {
   background: url("../img/de.svg") center center no-repeat;
   background-size: cover;
}

@media screen and (max-width: 720px){

   .nav-secondary ul {
      justify-content: space-between;
      width: 100%;
   }

   .nav-secondary ul .mobile-left {
      gap: 0em;
   }
}

/* ------------------------- Nav - Actueel -------------------------------------------------- */

.nav-actueel {
   background: var(--color-dark);
   border-top: 1px solid var(--color-border-light);
   display: flex;
   align-items: center;
   padding: 0 var(--gap-padding);
   height: 4.25em;
   transition: var(--animation-nav);
   margin-top: -1px;
   z-index: 2;
}

.scroll-direction-down .nav-actueel {
   height: 3.75em;
}

.nav-actueel .col {
   display: flex;
   align-items: center;
   min-width: 33.333%;
}

.nav-actueel .breadcrumb {
   margin: 0;
}

.nav-actueel .col:nth-child(2) {
   justify-content: center;
} 

.nav-actueel .col:nth-child(2) ul {
   display: flex;
   align-items: center;
   gap: 1.5em;
}

.nav-actueel .col ul li a {
   pointer-events: all;
}

.nav-actueel .col:nth-child(2) a span {
   color: rgba(var(--color-light-rgb), 0.5);
   transition: var(--animation-primary);
}

.nav-actueel .col:nth-child(2) li a:hover span {
   opacity: .6;
}

.nav-actueel .col:nth-child(2) li.active a span {
   color: var(--color-light);
   opacity: 1;
}

.nav-actueel .col:nth-child(3) {
   justify-content: flex-end;
} 

@media screen and (max-width: 720px){
   .nav-actueel .col:nth-child(2) ul {
      display: none;
   }

   #actueel .nav-actueel .col:nth-child(1) .breadcrumb {
      display: none;
   }

   #actueel .nav-actueel .col:nth-child(2) ul {
      display: flex;
   }
}

/* ------------------------- Modal - Language -------------------------------------------------- */

.modal-language {
   align-items: flex-start;
   justify-content: flex-end;
}

.modal-language.modal-language-bottom {
   align-items: flex-end;
}

.modal-language .modal-block {
   padding: 0.75em 1.25em;
   margin-top: 1em;
   margin-bottom: 2em;
}

.modal-language ul {
   display: flex;
   flex-direction: column;
}

.modal-language ul li {
   transition: var(--animation-primary);
}

.modal-language ul li a {
   display: flex;
   align-items: center;
   padding: 0.25em 0.75em 0.25em 0;
}

.modal-language ul li a span {
   color: var(--color-text);
   font-size: .9em;
   transition: var(--animation-primary);
}

.modal-language .flag {
   width: 1.2em;
   height: 0.9em;
   margin-right: .5em;
   background-color: var(--color-light-medium);
   border-radius: 2px;
}

.modal-language ul li a:hover span {
   opacity: .66;
}

.modal-language li.active {
   display: none;
}

@media screen and (max-width: 720px){
   .modal-language .modal-block {
      margin-top: 2.5em;
   }
}

/* ------------------------- Modal - Search -------------------------------------------------- */

.modal-search {
   align-items: flex-start;
   justify-content: center;
   padding-top: 25vh;
}

.modal-search .modal-block {
   width: min(100%, 35em);
   padding: 0em var(--gap-padding);
}

.search-form {
   display: flex;
   align-items: center;
   justify-content: center;
}

.search-form svg {
   width: 1.3em;
   flex-shrink: 0;
   flex-grow: 0;
}

.search-form svg path {
   stroke: var(--color-dark);
   stroke-width: 0.075em;
   transition: var(--animation-primary);
}

.search-form input {
   outline: 0;
   border: 0;
   background: transparent;
   padding: 1.6em 0.5em;
   font-size: 1.3em;
   width: 100%;
   color: var(--color-dark);
}

.search-form .submit {
   position: absolute;
   left: 0;
   width: 3em;
   height: 100%;
}

#search .search-form .submit {
   width: 1.25em;
}

/* ------------------------- Modal - Tags -------------------------------------------------- */

.modal-filter {
   align-items: center;
   justify-content: center;
}

.modal-filter .modal-block {
   width: min(100%, 45em);
   padding: calc(var(--gap-padding) * 0.8) var(--gap-padding) calc(var(--gap-padding) * 1.2) var(--gap-padding);
   display: flex;
   flex-direction: column;
   gap: 0.75em;
}

.modal-filter .modal-filter-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--color-border);
   padding-bottom: 1.25em;
}

.modal-filter .modal-filter-title * {
   font-weight: 400;
}

.modal-filter .tags-small-title {
   width: 100%;
   display: block;
   margin: 0;
   padding-top: 0.75em;
}

@media screen and (max-width: 720px){
   .modal-filter .modal-block {
      width: min(100%, 45em);
      padding: 1.25em var(--gap-padding) 1.5em var(--gap-padding);
      display: flex;
      flex-direction: column;
      gap: 0.75em;
   }
   
   .modal-filter .tags .single-tag {
      font-size: min(3.25vw, 1em);
  }
}

/* ------------------------- Modal - Mobile Nav -------------------------------------------------- */

.modal-mobile-nav {
   align-items: flex-start;
   padding-top: 20vh;
}

.modal-mobile-nav .modal-mobile-nav-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.modal-mobile-nav .modal-block {
   width: min(100%, 18em);
   padding: 1.5em 1.5em 2em 2.25em;
   display: flex;
   flex-direction: column;
   gap: 0.5em;
}

.modal-mobile-nav .modal-mobile-nav-title p {
   margin: 0;
   opacity: .75;
}

.modal-mobile-nav ul span {
   font-size: 1.35em;
   color: var(--color-dark-medium);
   line-height: 1.2em;
}

.modal-mobile-nav ul li {
   display: flex;
   width: 100%;
   padding-right: 1.3em;
}

.modal-mobile-nav ul li a {
   display: flex;
   width: 100%;
   position: relative;
   align-items: center;
   padding: 0.5em 0;
}

.modal-mobile-nav ul li.active a::after {
   content: "";
   position: absolute;
   right: 0;
   width: 0.4em;
   height: 0.4em;
   background: var(--color-secondary);
   border-radius: 1em;
   transform: translateX(50%);
}

.modal-mobile-nav ul li.active span {
   color: var(--color-secondary);
}

/* ------------------------- Footer -------------------------------------------------- */

.footer {
   padding: 0;
   z-index: -1;
}

.footer .footer-top {
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
   background: var(--color-dark-medium);
   border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
   position: relative;
   z-index: 2;
}

.footer .footer-top .pendra-deco {
   top: calc(var(--border-radius-medium) * -1);
   height: calc(100% + var(--border-radius-medium));
}

.footer .footer-top .row {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 5;
   justify-content: space-between;
}

.footer .footer-top .flex-col {
   width: unset;
}

.footer .footer-top ul li .footer-item {
   display: flex;
   height: 1.75em;
   align-items: center;
   gap: 0.75em;
}

.footer .footer-top ul li .footer-item span {
   color: rgba(var(--color-light-rgb), 0.8);
   transition: var(--animation-primary);
   white-space: nowrap;
}

.footer .footer-top ul li .footer-item.footer-item-title span {
   color: rgba(var(--color-light-rgb), 0.4);
}

.footer .footer-top ul li .footer-item .icon {
   width: 1.5em;
   height: 1.5em;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.footer .footer-top ul li .footer-item .icon.outline svg {
   width: 90%;
}

.footer .footer-top ul li .footer-item .icon.filled svg {
   width: 80%;
}

.footer .footer-top ul li .footer-item .icon.outline path {
   stroke: rgba(var(--color-light-rgb), 0.4);
}

.footer .footer-top ul li .footer-item .icon.filled path {
   fill: rgba(var(--color-light-rgb), 0.4);
}

.footer .footer-top ul li .footer-item.footer-item-link-icon {
   margin-bottom: 0.875em;
   margin-bottom: 0.575em;
}

@media (hover: hover) {
   .footer .footer-top ul li a.footer-item:hover span {
      opacity: .66;
   }
   
}

@media screen and (max-width: 1024px){
   .footer .footer-top .row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--section-padding-small) var(--gap);
      --gap: var(--gap-padding);
      --columns: 3;
   }
   
   .footer .footer-top .flex-col {
      width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   }

   .footer .footer-top .flex-col:nth-child(1),
   .footer .footer-top .flex-col:nth-child(2),
   .footer .footer-top .flex-col:nth-child(4) {
      order: 1;
   }

   .footer .footer-top .flex-col:nth-child(3) {
      margin-left: auto;
   }
}

@media screen and (max-width: 540px){

   .footer .footer-top .pendra-deco {
      display: none;
   }
   .footer .footer-top .row {
      --columns: 2;
      gap: var(--section-padding-small) var(--gap);
   }

   .footer .footer-top .flex-col:nth-child(1) {
      width: 100%;
   }

   .footer .footer-top .row .footer-item span {
      font-size: 0.9em;
   }
}

/* Footer Bottom */

.footer .footer-bottom {
   padding: 1.5em 0;
   position: relative;
} 

.footer .footer-bottom::after {
   content: "";
   background: var(--color-dark);
   height: 1em;
   top: 100%;
   position: absolute;
   left: 0;
   width: 100%;
   transform: translateY(-50%);
}

.footer .footer-bottom .nav-secondary::before {
   display: none;
}

.footer .footer-bottom .credits {
   margin-right: auto;
   display: flex;
   gap: 1em;
}

.footer .footer-bottom .credits a.credits-item span {
   font-size: 0.7em;
   color: var(--color-light);
   padding: 0 0.5em;
   transition: var(--animation-primary);
}

.footer .footer-bottom .credits div.credits-item span {
   font-size: 0.7em;
   color: rgba(var(--color-light-rgb), 0.5);
   padding: 0 0.5em;
}

.footer .footer-bottom .nav-secondary-click span {
   color: rgba(var(--color-light-rgb), 0.8);
}

@media (hover: hover) {

   .footer .footer-bottom .credits a.credits-item:hover span {
      opacity: .66;
   }
   
}

@media screen and (max-width: 1024px){

   .footer .footer-bottom {
      padding: 2em 0 var(--section-padding) 0;
   }

   .footer .footer-bottom .nav-secondary {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1em;
      height: unset;  
   }

   .footer .footer-bottom .credits {
      margin-right: unset;
      order: 2;
   }

   .footer .footer-bottom ul {
      order: 1;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0;
   }



}

@media screen and (max-width: 540px){

   .footer .footer-bottom .nav-secondary {
      gap: 1.5em; 
   }
}

/* ------------------------- Actueel Cat -------------------------------------------------- */

.actueel-cat-title {
   padding-bottom: var(--section-padding-small);
}

.actueel-cat-title .row {
   align-items: center;
   justify-content: space-between;
   gap: 1em;
}

.actueel-cat-title .row .flex-col {
   width: unset;
   display: flex;
   align-items: center;
   gap: 0.5em;
}

.actueel-cat-title .row .flex-col p {
   margin: 0;
}

/* ------------------------- Actueel Grid -------------------------------------------------- */

.actueel-grid {
   padding: 0;
}

.actueel-grid ul {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 3;
}

.actueel-grid ul li {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
}

@media screen and (max-width: 1024px){
   .actueel-grid ul {
      --columns: 2;
   }
}

@media screen and (max-width: 720px){
   .actueel-grid ul {
      gap: 4em var(--gap);
      --columns: 1;
   }
}

/* ------------------------- Actueel Slider -------------------------------------------------- */

.actueel-slider .btn-next,
.actueel-slider .btn-prev {
   top: 30%;
}

.actueel-slider + .actueel-slider {
   padding-top: 0;
}

.actueel-slider + .actueel-slider .row-title {
   padding-top: var(--section-padding);
}

.actueel-slider + .actueel-slider .row-title::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}

/* ------------------------- Team Grid -------------------------------------------------- */

.team-grid {
   padding-top: 0;
}

.team-grid ul {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 3;
}

/* .team-grid h3 span {
   font-size: 0.75em;
} */

.team-grid ul li {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
}

.team-grid .pendra-team-item .no-image {
   background: var(--color-portrait-back);
}

/* Ondersteunend */

.team-grid .row-title .flex-col {
   justify-content: center;
}

.team-grid .row-title .flex-col p {
   font-weight: 500;
   color: var(--color-primary);
}

.team-grid.team-grid-ondersteunend ul {
   --columns: 4;
}

.team-grid.team-grid-ondersteunend h3 span {
   font-size: 0.75em;
}

.team-grid.team-grid-ondersteunend .tags {
   display: none;
}

@media screen and (max-width: 1240px) {
   .team-grid ul {
      --columns: 3;
   }

   .team-grid.team-grid-ondersteunend ul {
      --columns: 4;
   }
}

@media screen and (max-width: 1024px){
   .team-grid ul {
      --columns: 2;
   }

   .team-grid.team-grid-ondersteunend ul {
      --columns: 3;
   }
}

@media screen and (max-width: 720px){
   .team-grid ul {
      gap: 4em var(--gap);
      --columns: 1;
   }

   .team-grid.team-grid-ondersteunend ul {
      --columns: 2;
   }
}

@media screen and (max-width: 540px) {
   /* .team-grid .pendra-team-item h3 span {
      font-size: 1.2em;
   } */

   .team-grid h3 span {
      font-size: 0.85em;
   }

   .team-grid.team-grid-ondersteunend h3 span {
      font-size: 0.85em;
   }
}

/* ------------------------- Team Slider -------------------------------------------------- */

/* .team-slider .flickity-slider-col-4 .flex-col {
   padding-top: 0.5em;
   margin-top: -0.5em;
} */

.team-slider .btn-next,
.team-slider .btn-prev {
   top: 40%;
}

.team-slider .pendra-team-item h3 span {
   font-size: 0.8em;
}

@media screen and (max-width: 1240px) {
   .team-slider .pendra-team-item h3 span {
      font-size: 1em;
   }
}

@media screen and (max-width: 540px) {
   .team-slider .pendra-team-item h3 span {
      font-size: 1.2em;
   }
}

/* ------------------------- Expertises Grid -------------------------------------------------- */

.expertises-grid {
   padding-top: 0;
}

/* ------------------------- Search Bar -------------------------------------------------- */

.search-bar {
   padding: 0;
   border-bottom: 1px solid var(--color-border);
}

/* ------------------------- Search Bar -------------------------------------------------- */

.search-grid {
   padding-top: var(--section-padding-small);
   padding-bottom: 0;
}

.search-results-title {
   text-align: center;
   margin-bottom: 2em;
}

.search-grid ul {
   display: flex;
   flex-direction: column;
   gap: 1em;
}

.single-search-result {
   background: var(--color-light);
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: calc(var(--border-radius) * 0.5);
   padding: calc(var(--gap-padding) * 0.75) var(--gap-padding);
   gap: 1em;
   position: relative;
   overflow: hidden;
}

.single-search-result::before {
   content: "";
   left: 0;
   top: 0;
   height: 100%;
   width: 0.3em;
   background: var(--color-primary);
   position: absolute;
   transition: var(--animation-primary);
   transform: scaleX(0) rotate(0.001deg);
   transform-origin: left;
}

.single-search-result:hover::before {
   transform: scaleX(1) rotate(0.001deg); 
}

.single-search-result .col {
   display: flex;
   flex-direction: column;
   gap: .4em;
}

.single-search-result .col:nth-child(1) {
   transition: var(--animation-primary);
   transform: translateX(0em) rotate(0.001deg);
}

.single-search-result:hover .col:nth-child(1) {
   transform: translateX(0.3em) rotate(0.001deg);
}

.single-search-result .col:nth-child(2) {
   flex-shrink: 0;
}

.single-search-result img {
   width: 5em;
   height: 5em;
   border-radius: .25em;
   background: var(--color-light-medium);
   position: relative;
   display: block;
}

.single-search-result span {
   color: var(--color-dark-light);
   font-size: 0.85em;
}

.single-search-result .bottom {
   display: flex;
   gap: 0.3em;
   padding-top: 0.2em;
}

.single-search-result p {
   padding-left: 0.6em;
   margin: 0;
   color: var(--color-text);
   position: relative;
}

.single-search-result p::before {
   content: "";
   display: block;
   width: 0.3em;
   height: 1px;
   position: absolute;
   left: 0;
   top: 50%;
   background: var(--color-text);
}

.single-search-result p:nth-child(1) {
   padding-left: 0;
}

.single-search-result p:nth-child(1)::before {
   display: none;
}

.single-search-result h4 {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
}

.single-search-result p.text-overflow {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   min-height: 1em;
}

@media screen and (max-width: 540px) {

   .single-search-result {
      padding: calc(var(--gap-padding) * 1) var(--gap-padding);
   }
}

/* ------------------------- Article - Header -------------------------------------------------- */

.article-header {
   padding-bottom: 0;
   z-index: 1;
}

.article-header + .article-content {
   margin-top: calc(var(--gap-padding) * -1);
}

.article-header .row .flex-col:nth-child(1) {
   display: flex;
   flex-direction: column;
   gap: 2.5em;
}

.article-header .row .flex-col:nth-child(1) .published {
   margin: 0;
}

.article-header .row .flex-col:nth-child(1) .tags {
   padding-top: 0.3em;
}

.article-header .row .flex-col:nth-child(2) {
   display: flex;
   flex-direction: column;
   gap: 1.1em;
}

@media screen and (max-width: 1024px) {

   .article-header .row .flex-col:nth-child(2) {
      display: none;
   } 

   .article-header .row .flex-col:nth-child(1) {
      gap: 1.5em;
   }

   .article-header{
      padding-top: calc(var(--section-padding) * 0.75);
   }

   .article-header + .article-content {
      margin-top: 0;
   }
}


/* ------------------------- Article - Thumbnail -------------------------------------------------- */

.article-thumbnail {
   padding-bottom: 0;
}

/* Zelfde ingreep als bij de beeldband op de homepage: 2/1 vulde het scherm
   bijna helemaal, waardoor de bezoeker eerst alleen een foto zag. Nu 21/9 met
   een plafond van 60vh, zodat de kop van het artikel meteen meekomt. Onder
   1024px blijft het 4/3 (zie verderop) -- daar bijt het plafond niet. */
.article-thumbnail .thumbnail {
   position: relative;
   width: 100%;
   border-radius: var(--border-radius-small);
   overflow: hidden;
   aspect-ratio: 21/9;
   max-height: 60vh;
}

@media (hover: hover) {
   /* Loco Styling */
   .article-thumbnail img {
      width: 100%;
      height: calc(100% + 20vh);
      top: -20vh;
   }
   }

@media screen and (max-width: 1024px) {

   .article-thumbnail .thumbnail {
      aspect-ratio: 4/3;
   }
}

/* ------------------------- Article - Content -------------------------------------------------- */

.article-content {
   padding-top: 0;
   padding-bottom: calc(var(--section-padding) - var(--gap-padding));
}

.article-content .pendra-content {
   padding-top: var(--section-padding);
}

.article-content .pendra-content-side {
   position: relative;
   margin-top: -3em;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}

.article-content .sticky-box {
   padding-top: calc(var(--section-padding) + 3em);
   padding-bottom: calc(var(--section-padding) + var(--section-padding));
   display: flex;
   flex-direction: column;
   gap: 1em;
}

/* Event */

.event-content .sticky-box .btn .arrow.second .arrow-fill {
   background: var(--color-secondary);
}

.event-content .sticky-box .btn .arrow.first .arrow-fill {
   background: var(--color-primary);
}

.event-content .sticky-box .disabled-btn {
   background: transparent;
   border-radius: 200em;
   border: 1px solid var(--color-border);
   height: 3.75em;
   padding: 0 2em;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: not-allowed;
}

.event-content .sticky-box .disabled-btn span {
   color: var(--color-text);
   font-size: 0.85em;
   transform: translateY(-5%);
   opacity: 0.6;
}


/* Single Jobs */

.single-jobs-content {
   padding-top: 0;
   padding-bottom: var(--section-padding);
}


@media screen and (max-width: 1024px) {

   .article-content {
      padding-top: 0;
      padding-bottom: var(--section-padding-small);
   }

   .single-jobs-content {
      padding-top: 0;
      padding-bottom: var(--section-padding);
   }

   .article-content .pendra-content {
      padding-bottom: var(--section-padding-small);
   }

   .article-content .pendra-content-side {
      flex-direction: row;
      margin-top: 0;
      padding-top: var(--section-padding-small);
      border-top: 1px solid var(--color-border);
   }

   .article-content .sticky-box {
      padding-top: 0;
      padding-bottom: 0;
      width: 100%;
      display: none;
   }

   .article-content .pendra-author {
      flex-shrink: 0;
   }

   .article-content .pendra-content-side {
      flex-direction: c;
   }

   .event-content .sticky-box {
      display: flex;
   }

   .event-content .pendra-content-side {
      flex-direction: column;
      gap: 2.5em;
   }

   .event-content .pendra-content-side .disabled-btn {
      width: 100%;
   }
}

/* ------------------------- Article - Side Sticky -------------------------------------------------- */

.pendra-content-side .specialisms-list {
   background: var(--color-dark);
   border-radius: var(--border-radius-small);
}

.pendra-content-side .specialisms-list {
   padding: 1em;
}

.pendra-content-side .specialisms-list ul li a {
   padding: 0.2em 0;
   gap: 1em;
}

.pendra-content-side .specialisms-list ul li a span {
   font-size: 0.85em;
   padding-left: 0.5em;
   color: var(--color-text-light);
}




/* ------------------------- Article - Credits -------------------------------------------------- */

.article-credits {
   padding-top: 0;
}

.article-credits .flex-col:nth-child(1) {
   display: flex;
   justify-content: space-between;
   gap: 0 1em;
}

.article-credits .tags {
   padding-top: 1em;
}

.article-credits .published {
   padding-top: 1.5em;
   color: var(--color-primary);
   font-weight: 500;
}

.article-credits .flex-col:nth-child(2) p {
   margin-bottom: 0.8em;
}

@media screen and (max-width: 1024px) {

   .article-credits + .section-stripe {
      opacity: 0;
      margin-top: calc( var(--section-padding) * -1);
   }

   .article-credits .row {
      padding: calc(var(--gap-padding) * 1.25);
      background: var(--color-white);
      border-radius: var(--border-radius);
   }

   /* De kaart is echt wit, maar de kopjes en deel-iconen droegen nog de
      cremekleuren van de donkere sectie eromheen en waren onzichtbaar.
      Let op het omgedraaide palet: --color-light is donkergroen. */
   .article-credits .row p.small {
      color: rgba(var(--color-light-rgb), 0.55);
   }

   .article-credits .row .social-share ul li a {
      border-color: rgba(var(--color-light-rgb), 0.2);
   }

   .article-credits .row .social-share ul li a svg path {
      fill: var(--color-light-medium);
   }

   .article-credits .flex-col:nth-child(1) {
      padding-bottom: var(--gap-padding);
      border-bottom: 1px solid rgba(var(--color-light-rgb), 0.125);
   }

   .article-credits .flex-col:nth-child(1) .col:nth-child(2) {
      flex-shrink: 0;
   }

   .article-credits .flex-col:nth-child(2) {
      padding-top: var(--gap-padding);
      padding-bottom: 0.25em;
   }
}

@media screen and (max-width: 540px) {
   .article-credits .flex-col:nth-child(1) {
      display: flex;
      flex-direction: column;
      gap: calc(var(--gap-padding) * 1.5);
   }

   .article-credits .published {
      padding-top: .5em;
      font-size: 1em;
   }
}


/* ------------------------- Expertises - Expertises Grid -------------------------------------------------- */


#expertises .expertises-grid .pendra-grid-item:last-child a {
   padding-bottom: 0;
}

/* ------------------------- Team Single - Expertises Grid -------------------------------------------------- */


#team-single .expertises-grid .pendra-grid-item:first-child::before {
   display: none;
}

#team-single .expertises-grid .pendra-grid-item:last-child a {
   padding-bottom: 0;
}


/* ------------------------- Expertises - Section Specialisms -------------------------------------------------- */

.section-specialisms .row-content {
   justify-content: space-between;
}

.section-specialisms .row-content .flex-col {
   width: 28%;
   display: flex;
   flex-direction: column;
   padding-bottom: 0;
}

.section-specialisms .row-content .flex-col .title {
   border-bottom: 1px solid var(--color-border-light);
   padding-bottom: 2.25em;
   margin-bottom: 1.5em;
}

.section-specialisms h3 {
   font-size: calc(var(--title-size) * 0.35);
}

@media screen and (max-width: 1400px) {

   .section-specialisms .container {
      padding: 0 calc(var(--gap-padding) * 2);
   }

   .section-specialisms .row-content .flex-col {
      width: calc((99.99% - (var(--gap-padding) * 2)) / 3);
   }
}

@media screen and (max-width: 1080px) {

   .section-specialisms .container {
      padding: 0 var(--gap-padding);
   }
}

@media screen and (max-width: 720px) {

   .section-specialisms .row-content {
      gap: var(--gap-padding);
   }

   .section-specialisms .row-content .flex-col {
      width: 100%;
   }

   .section-specialisms .row-content .flex-col:nth-child(2) {
      padding-top: 2em;
   }

   .section-specialisms .row-content .flex-col .title {
      padding-bottom: 1.5em;
      margin-bottom: .75em;
   }

   .specialisms-list ul li a {
      padding: 0.3em 0;
   }

}

/* ------------------------- Expertise Child - Header -------------------------------------------------- */

.expertises-child-header .row {
   gap: calc(var(--gap-padding) * 2);
   flex-wrap: nowrap;
   align-items: center;
}

.expertises-child-header .flex-col:nth-child(2) {
   flex-shrink: 0;
   width: 32%;
}

.expertises-child-header .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
   width: 100%;
}

.expertises-child-header .image::before {
   content: "";
   display: block;
   padding-top: 66.666%;
}

.expertises-child-header .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.expertises-child-header .image-dark {
   background: rgba(var(--color-black-rgb), 0.2);
   border-radius: var(--border-radius-small);
   opacity: 0;
   transition: opacity var(--animation-primary);
}

.expertises-child-header .no-image {
   background: var(--color-light-medium);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.expertises-child-header .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
}

@media screen and (max-width: 1024px) {

   .expertises-child-header {
      padding-bottom: 0;
   }

   .expertises-child-header .row {
      gap: var(--section-padding-medium);
      flex-direction: column;
   }

   .expertises-child-header .flex-col:nth-child(2) {
      width: 100%;
   }

   .expertises-child-header .image {
      width: calc(100% + (var(--container-padding) * 2));
      left: calc(var(--container-padding) * -1);
   }

   .expertises-child-header .image, 
   .expertises-child-header .image img.thumbnail {
      border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   }

   .expertises-child-header .image::before {
      padding-top: 50%;
   }

   .expertises-child-header .overlay-borders::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      height: calc((var(--border-radius-medium) * 2) + 1px);
      width: 100%;
      background: var(--color-light);
      border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
      box-shadow: 0 0 10em rgba(var(--color-black-rgb), 0.5);
   }

   .expertises-child-header + .expertises-grid .pendra-grid-item:first-child a {
      padding-top: 0.5em;
   }

   .expertises-child-header + .expertises-grid .pendra-grid-item:first-child::before {
      display: none;
   }

}

@media screen and (max-width: 540px) {
   .expertises-child-header .image::before {
      padding-top: 75%;
   }
}


/* ------------------------- Contact Person -------------------------------------------------- */

.contact-person {
   padding: 0;
}

.contact-person .row.split.split-30-70 .flex-col:nth-child(1) {
   width: 30%;
}

.contact-person .row {
   padding: var(--section-padding-medium) 0;
}

.contact-person .row .flex-col {
   display: flex;
   align-items: center;
}

.contact-person .row::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}

.contact-person .pendra-author .author-single-author .author-image {
   width: 6em;
}

.contact-person .col-content {
   max-width: calc(25em + 10vw);
}

.contact-person .pendra-author .author-single-author .author-image .no-image {
   padding: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.contact-person .pendra-author .author-single-author .author-image .no-image span {
   font-size: 0.75em;
   text-align: center;
   line-height: 1.2;
}

.contact-person .col-content .btn-row {
   gap: 2em;
   padding-top: 1.5em;
}

@media screen and (max-width: 1024px) {

   .contact-person .row.split.split-30-70 {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--container-padding);
      align-items: center;
   }

   .contact-person .row.split.split-30-70 .flex-col:nth-child(1) {
      width: unset;
   }

   .contact-person .row.split.split-30-70 .flex-col:nth-child(2) {
      width: 100%;
   }

   .contact-person .author-content {
      display: none;
   }

   .contact-person .pendra-author .author-single-author .author-image {
      width: 6em;
      flex-shrink: 0;
   }
}

@media screen and (max-width: 540px) {

   .contact-person .row.split.split-30-70 {
      flex-direction: column;
      flex-wrap: wrap;
      gap: var(--section-padding-small);
      align-items: center;
   }

   .contact-person .row.split.split-30-70 h3 {
      text-align: center;
   }

   .contact-person .btn-row {
      justify-content: center;
   }
}


/* ------------------------- Section Split Image -------------------------------------------------- */

.section-split-image .row:not(:first-child) {
   padding-top: var(--section-padding);
   margin-top: var(--section-padding);
}

.section-split-image .row:not(:first-child)::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}

.section-split-image .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   width: 100%;
}

.section-split-image .image::before {
   content: "";
   padding-top: 75%;
   display: block;
}

/* Square */
.section-split-image .image.size-1-1::before {
   padding-top: 100%;
}

.section-split-image .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.section-split-image .image .no-image {
   background: var(--color-light-medium);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.theme-light-medium.section-split-image .image .no-image {
   background: var(--color-light-dark);
}

.section-split-image .col-content {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.section-split-image .icon-with-title {
   padding-bottom: 0;
   margin-bottom: -0.25em;
}

/* Auto Flip */
.section-split-image .row:nth-of-type(odd) .flex-col:nth-child(2) {
   order: 1;
}

/* Custom Flip */
.section-split-image .row.flip .flex-col:nth-child(2) {
   order: 1;
}

.section-split-image .row.flip .flex-col:nth-child(1) {
   order: 2;
}

@media screen and (max-width: 1024px) {

   .section-split-image .row.split {
      justify-content: center;
   }

   .section-split-image .row.split .flex-col {
      max-width: 36em;
   }

   /* Auto Flip */
   .section-split-image .row:nth-of-type(odd) .flex-col:nth-child(2) {
      order: 2;
   }

   /* Custom Flip */
   .section-split-image .row.flip .flex-col:nth-child(2) {
      order: 2;
   }

   .section-split-image .row.flip .flex-col:nth-child(1) {
      order: 2;
   }

}

/* ------------------------- Section Split Text -------------------------------------------------- */

.section-split-text .row.split.split-50-50 {
   align-items: flex-start;
}

.section-split-text .col-content {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.section-split-text .icon-with-title {
   padding-bottom: 0;
   margin-bottom: -0.25em;
}

@media screen and (max-width: 1024px) {

   .section-split-text .row.split {
      justify-content: center;
   }

   .section-split-text .row.split .flex-col {
      max-width: 36em;
   }

}

/* ------------------------- About -  Split Text -------------------------------------------------- */

.about-split-text {
   padding-top: 0;
}

.about-split-text .row {
   padding-top: var(--section-padding)
}

.about-split-text .row::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border-light);
}

/* ------------------------- Expertise Cat. Grid -------------------------------------------------- */

.expertises-cat-grid {
   padding-bottom: 0;
}

/* ------------------------- Expertise Cat. Split Image -------------------------------------------------- */

.expertises-cat-split-image {
   padding-top: 0;
}

.expertises-cat-split-image .row:first-child {
   padding-top: var(--section-padding);
}

.expertises-cat-split-image .row:first-child::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}


/* ------------------------- Home - Header -------------------------------------------------- */

.home-header .flex-col {
   max-width: calc(var(--title-size) * 13);
}

/* De hero duwde de beeldband zo ver omlaag dat de "Scroll verder"-knop net
   onder de vouw viel. Alleen op desktop ingeperkt: onder 1024px is die knop
   toch verborgen, en daar zou een kleinere --section-padding de hero juist
   ruimer maken dan de mobiele waarde die er al staat.

   Op 1728x966 scheelt dit samen zo'n 158px, waarvan 116px uit de padding. Die
   was met 145px boven en onder de grootste post -- meer lucht dan de kop zelf
   hoog is. De typografie krimpt maar licht, zodat de hero niet gedrongen oogt. */
@media screen and (min-width: 1025px) {

   .home-header {
      padding-top: min(9vh, 9em);
      padding-bottom: min(9vh, 9em);
   }

   .home-header h1 {
      font-size: calc(var(--title-size) * 0.92);
   }

   .home-header h1 + p {
      margin-top: 1.5em;
   }

   .home-header .flex-col .btn-row {
      padding-top: 2em;
   }

}

:is(.home-header, .error-header, .jobs-header) .flex-col .btn-row {
   padding-top: 2.5em;
}

/* Regel onder de hero-knop: voor wie "Wat kunt u doen" bedoeld is. Bewust
   .tiny (0.75em, dus ~12-14px afhankelijk van de viewport) in plaats van een
   vaste 12px, zodat de tekstvergroting uit de toegankelijkheidsknop meeschaalt.
   De klasse .fade-in in de markup laat 'm meelopen in de intro-timeline en de
   paginatransitie, als laatste stap van de stagger. */
/* Rollenregel onder de heroknop: zoals het origineel (tiny, gedempt),
   alleen 2px groter en met de vier rollen als stille links. */
.home-header .pendra-btn-note {
   margin-top: 1em;
   font-size: calc(0.75em + 2px);
   font-weight: 400;
   color: rgba(var(--color-light-rgb), 0.6);
}

.home-header .pendra-btn-note a {
   color: inherit;
   text-decoration: none;
   transition: color var(--animation-primary);
}

.home-header .pendra-btn-note a:hover {
   color: var(--color-light);
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

:is(.home-header, .error-header, .jobs-header) .btn .arrow:is(.second) .arrow-fill {
   background: var(--color-secondary);
}

:is(.home-header, .error-header, .jobs-header) .btn .arrow:is(.first) .arrow-fill {
   background: var(--color-light);
}

:is(.home-header, .error-header, .jobs-header) .btn .arrow:is(.first) .arrow-content {
   color: var(--color-dark-medium);
}

/* ------------------------- Videoposter -------------------------------------------------- */

/* De poster van de informatiefilm is een <a> in plaats van een <div>, zodat het
   hele beeld klikbaar is. .section-split-image .image rekent op een blok-element
   (het gebruikt ::before met padding-top voor de 4:3-verhouding), dus dat moet
   hier expliciet gezet worden. */
.pendra-video-poster {
   display: block;
}

/* Speelknop midden op de poster. Geen echte knop: de <a> eromheen is de
   bediening en draagt het label. Vandaar aria-hidden in de markup. */
.pendra-video-play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 4em;
   height: 4em;
   border-radius: 50%;
   background: var(--color-secondary);
   color: var(--color-light);
   transition: transform var(--animation-primary);
}

.pendra-video-play svg {
   width: 1.75em;
   height: 1.75em;
   /* De driehoek oogt optisch links van het midden; een halve slag terug. */
   margin-left: 0.1em;
}

@media (hover: hover) {

   .pendra-video-poster:hover .pendra-video-play {
      transform: translate(-50%, -50%) scale(1.08);
   }

}

html.pendra-rustig .pendra-video-play {
   transition: none;
}

/* Ingebedde speler (film via eigen CDN). De film is 16:9; het vaste kader van
   .section-split-image .image (::before met padding-top) wordt hier dus
   overschreven, en in artikeltekst werkt het blok zelfstandig. */
.pendra-video-embed {
   position: relative;
   display: block;
   overflow: hidden;
   border-radius: 0.25em;
}

.pendra-video-embed::before,
.image.pendra-video-embed::before {
   content: "";
   display: block;
   padding-top: 56.25%;
}

.pendra-video-embed video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--color-black);
}

/* ------------------------- Home - Big Image -------------------------------------------------- */

.home-big-image {
   padding-top: 0;
   padding-bottom: 0;
}

/* De band was 2/1 en vulde daarmee 75 tot 84% van het scherm: op 1920x1080
   werd hij 902px hoog en drukte hij alles eronder weg. Nu 21/9, een filmische
   verhouding die als bewuste keuze leest, met een plafond van 60vh voor grote
   schermen -- daar wint de aspect-ratio het anders alsnog. Op gewone
   desktopformaten is de hoogte daarmee overal precies 60% van het venster.
   Onder 1024px gaat de ratio naar 4/3 (zie verderop); het plafond bijt daar
   niet, behalve op een telefoon in liggende stand, waar het juist helpt. */
.home-big-image .thumbnail {
   position: relative;
   width: 100%;
   border-radius: var(--border-radius-small);
   overflow: hidden;
   aspect-ratio: 21/9;
   max-height: 60vh;
}

@media (hover: hover) {
   /* Loco Styling */
   .home-big-image img {
      width: 100%;
      height: calc(100% + 20vh);
      top: -20vh;
   }
}

/* Button */
.home-big-image .btn-scroll {
   position: absolute;
   right: var(--gap-padding);
   top: var(--gap-padding);
}


@media screen and (max-width: 1024px) {

   .home-big-image .thumbnail {
      aspect-ratio: 4/3;
   }

   .home-big-image .btn-scroll {
      display: none;
   }
}

/* ------------------------- Jobs - USP -------------------------------------------------- */

.jobs-usp {
   padding-top: 0;
}

/* ------------------------- Expertises Single - Builder -------------------------------------------------- */

.expertises-single-builder {
   padding-top: 0;
}

.expertises-single-builder .row::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
   background: var(--color-border);
}

.expertises-single-builder .single-block:not(:last-child) {
   padding-bottom: var(--section-padding-medium);
}

.expertises-single-builder .pendra-content {
   padding-top: var(--section-padding);
}

.expertises-single-builder .pendra-content-side {
   position: relative;
   margin-top: -3em;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}

.expertises-single-builder .sticky-box {
   padding-top: calc(var(--section-padding) + 3em) !important;
   display: flex;
   flex-direction: column;
   gap: 1em;
   padding-top: 0;
}

.expertises-single-builder .sticky-box h3 a {
   color: var(--color-dark-light);
   font-weight: 500;
}

.expertises-single-builder .specialisms-list {
   background: transparent;
   padding: 0;
}

.expertises-single-builder .specialisms-list ul {
   gap: 0;
}

.expertises-single-builder .specialisms-list ul li a {
   padding: 0;
   gap: 1em;
}

.expertises-single-builder .specialisms-list ul li a.active span {
   font-weight: 500;
   color: var(--color-dark);
}

.expertises-single-builder .specialisms-list ul li a span {
   font-size: 0.85em;
   padding-left: 0em;
   color: rgba(var(--color-dark-rgb), 0.5);
}

.expertises-single-builder .specialisms-list ul li a .arrow.first .arrow-fill {
   border: 1px solid var(--color-border);
   background: transparent;
}

.expertises-single-builder .specialisms-list ul li a .arrow.first .arrow-content {
   color: var(--color-dark);
}

@media screen and (max-width: 1024px) {

   .expertises-single-builder .row::before {
      display: none;
   }

   .expertises-single-builder .row .sticky-box {
      display: none;
   }

   .expertises-single-builder .pendra-content {
      padding-top: 0;
   }
}


/* ------------------------- Expertises - Link Cards -------------------------------------------------- */

.link-cards {
   display: flex;
   flex-wrap: wrap;
   --gap: 1em;
   --columns: 3;
   gap: var(--gap);
}

.link-cards a {
   display: flex;
   flex-direction: column;
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   flex-shrink: 0;
   overflow: hidden;
   padding: 2em 1em 1em 1em; 
   background: var(--color-light-dark);
   border-radius: var(--border-radius-small);
   white-space: normal;
   justify-content: space-between;
   align-items: flex-end;
}

.link-cards a .content {
   width: 100%;
   display: flex;
   flex-direction: column;
   padding-bottom: 2em;
}

.link-cards a .content h4 span {
   font-size: 0.85em;
   font-weight: inherit;
}

.link-cards a .content p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
   line-clamp: 5;
   max-height: calc((1.66em * 0.85em) * 5);
}

.link-cards a .arrow.first .arrow-fill {
   background: var(--color-dark);
}

/* Hover */

@media (hover: hover) {

   .link-cards a:hover .arrow .arrow-content {
      transform: rotate(-45deg);
   }

   .link-cards a:hover .arrow.first {
      transform: scale(1) rotate(0.001deg);
   }

   .link-cards a:hover .arrow.second {
      transform: scale(0) rotate(0.001deg);
   }

   .link-cards a:hover .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }
}

/* Colors */

.link-cards a:is(:nth-child(1), :nth-child(6)) {
   background: var(--color-dark-medium);
}

.link-cards a:is(:nth-child(3), :nth-child(5)) {
   background: var(--color-dark-light);
}

.link-cards a:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6)) h4 span {
   color: var(--color-light);
}

.link-cards a:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6)) p {
   color: var(--color-text-light);
}

.link-cards a:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6)) .btn .arrow.second .arrow-fill {
   border: 1px solid var(--color-border-light);
}

.link-cards a:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6)) .btn .arrow.second .arrow-content {
   color: var(--color-light);
}

@media screen and (max-width: 720px) {

   .link-cards {
      flex-direction: column;
      --gap: 1em;
      --columns: 1;
      gap: var(--gap);
   }
   
   .link-cards a {
      width: 100%;
      flex-direction: row;
      padding: 1.5em 1em 1em 1em;
   }

   .link-cards a .content {
      padding-bottom: 0.5em;
      padding-right: 1em;
   }

}

/* ------------------------- Error - Header -------------------------------------------------- */

.error-header .row .flex-col.col-image:nth-child(2) {
   order: 3;
}

/* ------------------------- Textpage - Header -------------------------------------------------- */

.textpage-header .flex-col:nth-child(1) p {
   margin-bottom: calc(var(--section-padding-medium) * 0.75);
}

.textpage-header .flex-col:nth-child(2) {
   padding-top: var(--section-padding-medium);
}


/* ------------------------- Actueel - Header -------------------------------------------------- */

.section-wrap-actueel {
   display: flex;
   flex-direction: column;
   min-height: min(calc(100vh - (var(--border-radius) * 1.5)), 55em);
}

.section-wrap-actueel + .section-wrap,
.section-wrap-actueel + .section {
   z-index: 4;
}

#actueel .footer {
   z-index: 3;
}

.section-wrap-actueel .actueel-header {
   flex-grow: 1;
   padding: 0;
   display: flex;
}

.single-actueel-slide {
   padding-top: var(--section-padding);
   padding-bottom: calc(var(--section-padding) * 1.5);
   display: flex;
   align-items: center;
   position: relative;
   flex-grow: 1;
}

.single-actueel-slide .container {
   width: 100%;
}

.single-actueel-slide .thumbnail {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% + var(--border-radius));
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   background: var(--color-dark-medium);
}

.single-actueel-slide .thumbnail .dark-overlay {
   background: rgba(var(--color-black-rgb), 0.5);
}

.single-actueel-slide .row .flex-col:nth-child(1) {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.single-actueel-slide .small-title {
   color: var(--color-light);
}

.single-actueel-slide h1 {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   /* padding-bottom: 0.1em; */
   min-height: calc(2em * 1.15);
   color: var(--color-white);
}

.single-actueel-slide h1 a {
   color: inherit;
   font-weight: inherit;
}

.single-actueel-slide .row .flex-col:nth-child(1) .tags {
   padding-top: 0.3em;
}

.single-actueel-slide .tags .single-tag {
   color: var(--color-white);
}

.single-actueel-slide .tags .single-tag.light-medium {
   background: var(--color-light);
}

.single-actueel-slide .row .flex-col:nth-child(2) {
   display: flex;
   flex-direction: column;
   gap: 2.5em;
}

.single-actueel-slide .pendra-author {
   background: var(--color-light);
   padding: 0.66em;
   border-radius: 0.66em;
}

.single-actueel-slide .pendra-author h4 {
   color: var(--color-dark);
}

.actueel-swiper-slider .swiper-pagination {
   position: absolute;
}

.actueel-swiper-slider .fixed-items {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
}

.actueel-swiper-slider .fixed-items .container {
   display: flex;
   justify-content: flex-end;
   flex-direction: column;
   height: 100%;
   position: relative;
}

.actueel-swiper-slider .fixed-items .flex-col:nth-child(2) {
   display: flex;
   justify-content: flex-end;
}

.actueel-swiper-slider .fixed-items .btn {
   z-index: 1;
   transform: translateY(calc((var(--section-padding) * 0.5) + 0%));
}

.single-actueel-slide .btn-read-more {
   position: absolute;
   left: var(--container-padding);
   bottom: calc(var(--section-padding) * 0.5);
}

@media (min-aspect-ratio: 8/5) {

#actueel .nav-main {
   height: 5em;
}

#actueel .nav-actueel {
   height: 3.75em;
}

#actueel .nav-height-actueel {
   height: 2.75em;
}

}

@media screen and (max-width: 1024px) {

   .single-actueel-slide .row .flex-col:nth-child(2) {
      display: none;
   } 

   .single-actueel-slide .row .flex-col:nth-child(1) {
      gap: 1.5em;
   }

   .single-actueel-slide h1 {
      -webkit-line-clamp: 3;
      line-clamp: 3;
      min-height: calc(3em * 1.15);
   }

   .section-wrap-actueel {
      min-height: min(calc((var(--vh, 1vh) * 100) - (var(--border-radius) * 1.5)), 45em);
   }

   .single-actueel-slide {
      padding-top: calc(var(--section-padding) * 1);
      padding-bottom: calc(var(--section-padding) * 2.5);
   }
}

@media screen and (max-width: 540px) {
   
}


/* ------------------------- Team Single - Header -------------------------------------------------- */

.team-single-header .author-top {
   display: flex;
   flex-direction: column;
}

.team-single-header em {
   width: 100%;
}

.team-single-header .author-top .author-top-hidden {
   display: none;
}

/* .team-single-header .col-image {
   padding-right: calc(var(--container-padding) * 0.25);
} */

.team-single-header .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   transform: scale(1) rotate(0.001deg);
   width: 100%;
}

.team-single-header .image::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.team-single-header .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.team-single-header .image-dark {
   background: rgba(var(--color-black-rgb), 0.2);
   border-radius: var(--border-radius-small);
   opacity: 0;
}

.team-single-header .no-image {
   background: var(--color-portrait-back);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.team-single-header .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
   text-align: center;
   line-height: 1.2;
}

.team-single-header .col-content .job-title {
   color: var(--color-primary);
   font-weight: 500;
   margin-top: 1.5em;
}

.team-single-header .col-content .links-wrap {
   border-top: 1px solid var(--color-border);
   margin-top: 2.5em;
   padding: 2.5em 0 0 0;
   align-items: center;
   display: flex;
   gap: 3em;
}

.team-single-header .col-content .links-wrap .single-link {
   display: flex;
   align-items: center;
   gap: 0.75em;
}

.team-single-header .col-content .links-wrap .single-link p {
   margin-top: 0.05em;
}

.team-single-header .col-content .links-wrap .single-link .btn-link .btn-content {
   height: 1.75em;
}

.team-single-header .col-content .links-wrap .single-link .btn-small .btn-text span {
   font-size: 1em;
   color: var(--color-dark);
   font-weight: 500;
}

.team-single-header .col-content .pendra-content {
   padding-top: 2.25em;
}

/* Team Nav */

.team-nav {
   position: absolute;
   right: var(--gap-padding);
   top: var(--section-padding);
   display: flex;
   gap: 0.5em;
   z-index: 1;
}

.team-nav .author-image {
   aspect-ratio: 3/4;
   position: relative;
   width: 4em;
   background: var(--color-portrait-back);
   border-radius: 0.25em;
   overflow: hidden;
   flex-shrink: 0;
   flex-grow: 0;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
}

.team-nav .author-image .overlay-dark {
   background: rgba(var(--color-black-rgb), 0.1);
   transition: opacity var(--animation-primary);
   opacity: 0;
}

.team-nav .author-image .author-count {
   background: var(--color-dark-medium);
   display: flex;
   align-items: center;
   justify-content: center;
}

.team-nav .author-image .author-count span {
   color: var(--color-light);
   font-size: 0.85em;
}

@media (hover: hover) { 
   /* Hover */

   .team-nav .author-image:hover {
      transform: scale(0.98) rotate(0.001deg);
   }

   .team-nav .author-image:hover .overlay-dark {
      opacity: 1;
   }
}

@media screen and (max-width: 1024px) {
   .team-nav {
      display: none;
   }

   .team-single-header .col-image {
      padding-right: 0;
   }

   .team-single-header .row.split.split-30-70 .flex-col:nth-child(1) {
      width: calc(35% - (var(--gap-padding-big) * 0.5));
   }

   .team-single-header .row.split.split-30-70 .flex-col:nth-child(2) {
      width: calc(65% - (var(--gap-padding-big) * 0.5));
   }

   .team-single-header .col-content .links-wrap {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25em;
   }
}

@media screen and (max-width: 540px) {
   .team-single-header .row.split.split-30-70 .flex-col:nth-child(1) {
      width: 100%;
      display: none;
   }

   .team-single-header .row.split.split-30-70 .flex-col:nth-child(2) {
      width: 100%;
      order: 1;
   }

   .team-single-header .author-top {
      flex-direction: row;
      justify-content: space-between;
   }

   .team-single-header .author-top .author-top-hidden {
      display: block;
      width: 25vw;
   }

   .team-single-header .author-top .author-top-hidden .image img {
      border-radius: 0.25em;
   }

   .team-single-header .col-content .job-title {
      font-size: 1.1em;
      margin-top: 1em;
   }
}


/* ------------------------- About - About Cards -------------------------------------------------- */

.about-cards {
   padding-top: 0;
}

.about-cards .row {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
   --gap: var(--gap-padding);
   --columns: 3;
}

.about-cards .row .flex-col {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}

.about-cards .card {
   width: 100%;
   display: flex;
   flex-direction: column;
   padding: 2.5em var(--gap-padding);
   border-radius: var(--border-radius-small);
   position: relative;
   overflow: hidden;
}

.about-cards .card .pendra-deco {
   top: 0;
   left: 50%;
   transform: translateX(-50%) scaleY(-1);
}

.about-cards .flex-col:nth-child(2) .card:nth-child(3) .pendra-deco {
   transform: translateX(0%) scaleX(-1);
   left: unset;
   right: 0;
}

.about-cards .card .pendra-deco .line {
   background: rgba(var(--color-dark-rgb), 0.15);
}

/* Colors */

.about-cards .card.card-dark-light {
   background: var(--color-dark-light);
}

.about-cards .card.card-dark-medium {
   background: var(--color-dark-medium);
}

.about-cards .card.card-light {
   background: var(--color-light);
}

.about-cards .card.card-light-medium {
   background: var(--color-light-medium);
}

/* Card Image */

.about-cards .card-image::before {
   content: "";
   padding-top: 70%;
   display: block;
}

.about-cards .card-image-long::before {
   padding-top: 110%;
}

.about-cards .card-image .dark-overlay {
   background: linear-gradient(0deg, rgba(var(--color-black-rgb), 0.5) 0%, rgba(var(--color-black-rgb), 0) 75%);
}

.about-cards .card-image .content {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 2.5em var(--gap-padding);
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.about-cards .card-image .content .icon-with-title {
   padding-bottom: 0.5em;
}

/* Card Content */

.about-cards .card-content .content {
   position: relative;
   width: 100%;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1em;
} 

.about-cards .card-content.card-theme-light .content h3 {
   color: var(--color-dark);
}

.about-cards .card-content.card-theme-light .content p {
   color: var(--color-text);
   margin-bottom: 0.75em;
}

.about-cards .card-content .content .icon-with-title {
   padding-bottom: 0em;
}

.about-cards .card-content.card-theme-light .btn .arrow.second .arrow-fill {
   border: 1px solid var(--color-border);
}

.about-cards .card-content.card-theme-light .btn .arrow.second .arrow-content {
   color: var(--color-dark-medium);
}

.about-cards .card-content.card-theme-light .btn span {
   color: var(--color-text);
}

.about-cards .card-content img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.about-cards .flex-col:nth-child(3) .card:nth-child(2) svg path {
   stroke: var(--color-primary);
   stroke-width: 1px;
}


/* Card Person */

.about-cards .card-person .person {
   display: flex;
   width: 100%;
   align-items: center;
   flex-direction: column;
   text-align: center;
   margin-bottom: 1.5em;
}

.about-cards .card-person .person .thumbnail {
   width: 70%;
   position: relative;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
   border-radius: var(--border-radius-small);
   overflow: hidden;
}

.about-cards .card-person .person .thumbnail .dark-overlay {
   transition: var(--animation-primary);
   opacity: 0.075;
   background: var(--color-black);  
}

.about-cards .card-person .person .thumbnail::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.about-cards .card-person .person .thumbnail img {
   border-radius: var(--border-radius-small);
}

.about-cards .card-person .person h3 {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   padding: var(--gap-padding);
}

.about-cards .card-person .person:hover .thumbnail {
   transform: scale(0.95) rotate(0.001deg);
}

.about-cards .card-person .person:hover .thumbnail .dark-overlay {
   opacity: .15;
}

/* Card Loop */

.about-cards .card-loop .loop {
   overflow: hidden;
   position: relative;
   width: calc(100% + (var(--gap-padding) * 2));
   left: calc(var(--gap-padding) * -1);
   padding-bottom: 2em;
   padding-top: 1em;
}

.about-cards .card-loop .loop-box {
   position: relative;
   float: left;
}

.about-cards .card-loop .loop-box.duplicate {
   position: absolute;
   transform: translateX(100%);
}

.about-cards .card-loop .loop-box-inner {
   flex-shrink: 0;
   display: flex;
   position: relative;
   width: 100%;
   animation: loopThumb 30s linear;
   animation-iteration-count: infinite;
}

@keyframes loopThumb { 
   0% { transform: translateX(0%); }
   100% {transform: translateX(-100%); } 
}

.about-cards .card-loop .thumbnail {
   width: 6em;
   position: relative;
   border-radius: 0.25em;
   overflow: hidden;
   flex-shrink: 0;
   background: var(--color-portrait-back);
   margin-right: 1em;
}

.about-cards .card-loop .thumbnail::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.about-cards .card-loop .thumbnail img {
   border-radius: 0.25em;
}

/* Card Slider */

.about-cards .card-slider {
   padding-left: 0;
   padding-right: 0;
}

.about-cards .card-slider .swiper-pagination {
   position: absolute;
   left: 20%;
   top: 0;
   width: 60%;
   background: var(--color-primary);
}

.about-cards .card-slider .single-card-slide {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding-top: 2.5em;
}

.about-cards .card-slider .single-card-slide em {
   font-size: 2em;
}

.about-cards .card-slider .single-card-slide p {
   color: var(--color-light);
   margin-top: 1em;
   margin-bottom: 1em;
   white-space: nowrap;
   text-align: center;
}

@media screen and (max-width: 1024px) {

   .about-cards .row {
      --columns: 2;
   }

   .about-cards .row .flex-col:nth-child(1) .card:nth-child(3)::before {
      padding-top: 102.5%;
   }

   .about-cards .row .flex-col:nth-child(3) {
      width: 100%;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
   }

   .about-cards .row .flex-col:nth-child(3) .card {
      width: calc(50% - (var(--gap-padding) * 0.5));
   }
   
}

@media screen and (max-width: 540px) {
   .about-cards .row {
      --columns: 1;
   }

   .about-cards .row .flex-col:nth-child(3) {
      width: 100%;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: center;
   }

   .about-cards .row .flex-col:nth-child(3) .card {
      width: 100%;
   }

   .about-cards .card-slider .single-card-slide em {
      font-size: 2.5em;
   }
}

/* ------------------------- Jobs - Header -------------------------------------------------- */

.jobs-header {
   padding-top: 0;
}

.jobs-header .btn:hover .arrow .arrow-content {
   transform: rotate(45deg);
}

.jobs-header .image-wrap {
   width: calc(100% + (var(--container-padding) - var(--gap-padding)));
   position: relative;
   height: calc(100vh - 8.5em - var(--gap-padding));
   display: flex;
   flex-direction: column;
   gap: 1em;
}

.jobs-header .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   width: 100%;
   height: 100%;
}

.jobs-header .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.jobs-header .image .no-image {
   background: var(--color-dark-medium);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.jobs-header .image .no-image span {
   color: var(--color-text-light);
}

.jobs-header .image:nth-child(1) {
   height: 33%;
}

.jobs-header .image:nth-child(2) {
   height: 66%;
}

@media screen and (max-width: 1024px){

   .jobs-header {
      padding-top: var(--section-padding);
   }   

   .jobs-header .image-wrap {
      width: 100%;
      height: calc(var(--vh, 1vh) * 60);
   }
}



/* ------------------------- Jobs - List Grid -------------------------------------------------- */

.row-jobs-grid ul {
   display: flex;
   flex-direction: column;
   gap: 1em;
}

/* ------------------------- Single Job - Header -------------------------------------------------- */

.single-job-header .col-info {
   display: flex;
   gap: var(--gap-padding);
}

.single-jobs-content .sticky-box {
   padding-bottom: 0;
   width: calc(100% + (var(--container-padding) - var(--gap-padding)));
}

.single-jobs-content .sticky-box h3 {
   margin-bottom: 0.5em;
}

@media screen and (max-width: 1024px){
   .single-jobs-content .sticky-box {
      display: block;
   }

   .single-jobs-content .sticky-box h3 {
      margin-bottom: 1em;
   }
}

/* ------------------------- Contact - Header -------------------------------------------------- */

.contact-header .row.split.split-50-50 {
   align-items: flex-start;
}

.contact-header .stripe {
   margin: 3em 0;
}

.contact-header .contact-links {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 2;
   justify-content: space-between;
}

.contact-header .contact-links .col {
   width: calc(50% - (var(--gap-padding) * 0.5));
}

.contact-header li .footer-item {
   display: flex;
   height: 1.75em;
   align-items: center;
   gap: 0.75em;
}

.contact-header li .footer-item span {
   color: rgba(var(--color-dark-rgb), 0.8);
   transition: var(--animation-primary);
   white-space: nowrap;
}

.contact-header li .footer-item.footer-item-title span {
   color: rgba(var(--color-dark-rgb), 0.4);
}

.contact-header li .footer-item .icon {
   width: 1.5em;
   height: 1.5em;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.contact-header li .footer-item .icon.outline svg {
   width: 90%;
}

.contact-header li .footer-item .icon.filled svg {
   width: 80%;
}

/* Stond op --color-primary (#5F5D4E): op de groene achtergrond van deze header
   is dat 1,32:1, dus de iconen waren praktisch onzichtbaar -- het mail-icoon
   ontbrak visueel helemaal. #939B95 haalt 3,08:1 en blijft rustig naast de
   tekst. */
.contact-header li .footer-item .icon.outline path {
   stroke: #939B95;
}

.contact-header li .footer-item .icon.filled path {
   fill: #939B95;
}

.contact-header li .footer-item.footer-item-link-icon {
   margin-bottom: 0.875em;
   margin-bottom: 0.575em;
}

@media (hover: hover) {
   .contact-header li a.footer-item:hover span {
      opacity: .66;
   }
   
}

@media screen and (max-width: 540px){

   .contact-header li .footer-item span {
      font-size: 0.9em;
   }
}

/* ------------------------- Contact - Route -------------------------------------------------- */

.contact-route .col-content {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.contact-route .row {
   padding: var(--gap-padding) 0;
}

.contact-route .col-content .btn-row {
   margin-left: -0.5em;
}


@media screen and (max-width: 540px){

   .contact-route{
      padding-top: 0;
   }

   .contact-route .row {
      padding-top: 0;
   }

   .contact-route .col-content {
      order: 3;
   }

   .contact-route.section-split-image .image {
      width: calc(100% + (var(--container-padding) * 2));
      left: calc(var(--container-padding) * -1);
      border-radius: var(--border-radius-medium);
   }

   .contact-route.section-split-image .image::before {
      padding-top: 100%;
   }

}


/* ------------------------- Contact - Map -------------------------------------------------- */

.section-map {
   padding: 0;
}

.section-map iframe {
   width: 100%;
   height: 75vh;
   pointer-events: none;
   filter: hue-rotate(-25deg) saturate(0.95);
   border-radius: var(--border-radius-medium);
}

@media (hover: hover) {
   .section-map iframe {
      pointer-events: none;
   }
}

.section-map .overlay-map {
   background: var(--color-light);
   mix-blend-mode: multiply;
   filter: saturate(0);
   pointer-events: none;
}

/* ------------------------- Jobs - Quote Slider -------------------------------------------------- */

.quote-slider .btn-wrap {
   width: calc(50% - (var(--gap-padding-big) * 0.5));
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
   z-index: 10;
   align-items: center;
}

.quote-slider .btn-wrap button.btn-arrow[disabled] {
   transform: rotate(0.001deg) scale(1);
   pointer-events: none;
}

.quote-slider .btn-wrap .arrow.second .arrow-fill,
.quote-slider .btn-wrap .arrow.second .arrow-content {
   transition: var(--animation-primary);
}

.quote-slider .btn-wrap button.btn-arrow[disabled] .arrow.second .arrow-fill {
   background: transparent;
   border: 1px solid var(--color-border);
}

.quote-slider .btn-wrap button.btn-arrow[disabled] .arrow.second .arrow-content {
   color: var(--color-dark);
}

.quote-slider .row {
   background: var(--color-light-medium);
}

.quote-slider .pendra-content h3 {
   margin-bottom: 0.5em;
}

.quote-slider .col-image {
   display: flex;
   justify-content: center;
}

.quote-slider .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   width: calc(100% - ((3.75em + var(--gap-padding)) * 2));
}

.quote-slider .image::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.quote-slider .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.quote-slider .image .image-dark {
   background: rgba(var(--color-black-rgb), 0.1);
   border-radius: var(--border-radius-small);
   opacity: 0;
   transition: opacity var(--animation-primary);
}

.quote-slider .image .no-image {
   background: var(--color-portrait-back);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.quote-slider .image .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
}

@media screen and (max-width: 1024px){
   .quote-slider .image {
      width: calc(100vw - ((3.75em + var(--container-padding)) * 4));
   }

   .quote-slider .btn-wrap {
      top: 0;
      transform: translateY(0);
      width: calc(100vw - (var(--container-padding)) * 2);
      height: calc((100vw - ((3.75em + var(--container-padding)) * 4)) * 1.333);
   }

}

@media screen and (max-width: 540px){
   .quote-slider .image {
      width: calc(100vw - ((5.25em + var(--container-padding)) * 2));
   }

   .quote-slider .btn-wrap {
      height: calc((100vw - ((5.25em + var(--container-padding)) * 2)) * 1.333);
   }


}
/* ------------------------- Formulierstatus + select ------------------------- */

.pendra-form .form-col select {
   appearance: none;
   width: 100%;
   padding: 0.75em 0 1em 0;
   border: 0;
   border-bottom: 1px solid var(--color-border-light);
   border-radius: 0;
   font-weight: 400;
   font-size: 0.9em;
   font-family: var(--font-primary);
   /* Zelfde als de invoervelden: --color-light is in dit palet donkergroen. */
   color: var(--color-light);
   display: block;
   background: transparent;
   cursor: pointer;
}

.pendra-form .form-col select:focus {
   outline: 0;
   border-bottom: 1px solid rgba(var(--color-light-rgb), 0.5);
}

.pendra-form .form-col select option {
   color: var(--color-black);
}

.pendra-form .form-status {
   margin-top: 1.25em;
   font-size: 0.9em;
   min-height: 1.4em;
}

.pendra-form .form-status.success {
   color: var(--color-alert-success);
}

.pendra-form .form-status.error {
   color: var(--color-alert-error);
}

/* ------------------------- Toegankelijkheid: reduced motion + focus ------------------------- */

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[data-toggle]:focus-visible {
   outline: 2px solid var(--color-secondary) !important;
   outline-offset: 3px;
   border-radius: 2px;
}

.skip-link {
   position: fixed;
   left: 1em;
   top: 1em;
   z-index: 10000;
   background: var(--color-light);
   color: var(--color-dark);
   padding: 0.75em 1.25em;
   border-radius: var(--border-radius-small);
   font-size: 0.9em;
   transform: translateY(-300%);
   opacity: 0;
   pointer-events: none;
}

.skip-link:focus {
   transform: none;
   opacity: 1;
   pointer-events: auto;
}

/* ------------------------- Logo Samen Toegankelijk Heerlen (merkteken + woordmerk) -------------------------

   Twee lagen: .logo-mark-accent blijft altijd geel, .logo-mark-ink volgt het
   sectiethema — net als het woordmerk ernaast. Let op het geinverteerde
   kleurschema: .theme-nav-light betekent een DONKERE navbalk.

   svg { width: 100% } staat globaal in styleguide.css, dus de breedte hoort
   op .logo-mark (met height: auto), niet op .logo. */

.logo {
   display: flex;
   align-items: center;
   gap: 0.55em;
   width: auto;
   position: relative;
   text-decoration: none;
}

.logo .logo-mark {
   width: 2.6em;
   height: auto;
   flex: 0 0 auto;
}

.logo .logo-mark-accent {
   fill: var(--color-secondary);
}

.logo .logo-mark-ink {
   fill: var(--color-light);
   transition: fill var(--animation-nav);
}

.logo .logo-word {
   font-family: var(--font-heading);
   font-weight: 500;
   font-size: 0.95em;
   line-height: 1.15;
   letter-spacing: -0.005em;
   color: var(--color-light);
   white-space: nowrap;
   transition: color var(--animation-nav);
}

/* Donkere navbalk */
.nav-bar.theme-nav-light .logo .logo-mark-ink,
.nav-bar.theme-nav-light-medium .logo .logo-mark-ink {
   fill: var(--color-dark-medium);
}

.nav-bar.theme-nav-light .logo .logo-word,
.nav-bar.theme-nav-light-medium .logo .logo-word {
   color: var(--color-dark-medium);
}

@media (hover: hover) {
   a.logo:hover {
      opacity: .66;
   }
}

/* Preloader */
.pendra-loader .logo {
   gap: 0.7em;
}

.pendra-loader .logo .logo-mark {
   width: 4.25em;
}

/* De animatie heeft een ruimere viewBox (341 tegen 232), waardoor het merk daar
   77,6% van het vlak vult in plaats van 85,4%. Opgemeten factor 1,10 houdt het
   teken optisch even groot als het statische merk dat hier eerst stond. */

.pendra-loader .logo .logo-mark-anim {
   width: 4.68em;
}

.pendra-loader .logo .logo-word {
   font-size: 1.5em;
   color: var(--color-light);
}

/* Alleen in de loader: op een telefoon vulde "Samen Toegankelijk Heerlen"
   driekwart van de schermbreedte. white-space: nowrap staat op .logo-word, dus
   het kan niet afbreken - kleiner is hier de enige uitweg. De navbar en de
   footer blijven ongemoeid. */
@media screen and (max-width: 540px) {
   .pendra-loader .logo .logo-word {
      font-size: 1.1em;
   }
}

.pendra-loader .logo .logo-mark-ink {
   fill: var(--color-light);
}

/* Geanimeerd merkteken (logo-loader.js vult deze container met een SVG).
   De breedte hoort op de container: styleguide.css zet globaal svg { width: 100% }. */

.pendra-loader .logo-mark-anim > svg {
   display: block;
   width: 100%;
   height: auto;
}

/* Kleur via de merktokens, niet via de hex in het script. De selectors staan
   bewust op de groep, zodat de zwarte maskercirkel in <defs> ongemoeid blijft. */

.pendra-loader .lgl-a path { stroke: var(--color-light); }
.pendra-loader .lgl-a circle { fill: var(--color-light); }

.pendra-loader .lgl-b path { stroke: var(--color-secondary); }
.pendra-loader .lgl-b circle { fill: var(--color-secondary); }

/* Footer: naam breekt af zodat de kolom smal blijft */
.footer .logo .logo-mark {
   width: 3em;
}

.footer .logo .logo-word {
   white-space: normal;
   max-width: 6.5em;
   font-size: 1.05em;
}

/* Krappe nav: klein, vet woordmerk in drie regels naast het merkteken.
   De max-width dwingt de afbreking na elk woord; "Toegankelijk" is het
   breedste woord en bepaalt de maat. */
@media screen and (max-width: 720px) {
   .nav-main .logo .logo-word {
      font-size: 0.7em;
      font-weight: 700;
      line-height: 1;
      white-space: normal;
      max-width: 6.4em;
   }
}


/* ------------------------- Sierlijnen -> cirkels (logo-motief) ------------------------- */

.pendra-deco {
   overflow: visible;
}

/* Korte headers (artikelen, juridisch) krijgen dezelfde cirkelgrootte als home */
.default-header .pendra-deco {
   min-height: calc(70vh + 6em);
}

.pendra-deco .line,
.theme-dark .pendra-deco .line,
.theme-dark-medium .pendra-deco .line,
.theme-light .pendra-deco .line,
.theme-light-medium .pendra-deco .line {
   background: transparent;
   height: auto;
   aspect-ratio: 1 / 1;
   border: 1px solid var(--color-border);
   border-radius: 50%;
   top: 72%;
   left: 88%;
}

.theme-dark .pendra-deco .line,
.theme-dark-medium .pendra-deco .line {
   border-color: var(--color-border-light);
}

.pendra-deco .line:nth-child(1) {
   width: 340%;
   transform: translate(-50%, -50%);
}

.pendra-deco .line:nth-child(2) {
   width: 460%;
   transform: translate(-50%, -50%);
}

.pendra-deco .line:nth-child(3) {
   display: none;
}

/* ------------------------- Kaarttitels: 2 regels toestaan ------------------------- */

.pendra-grid-item .col-content h3 span {
   -webkit-line-clamp: 2;
   line-clamp: 2;
}

/* ------------------------- Footer mobiel: geen overflow, strakke onderkant ------------------------- */

@media screen and (max-width: 720px) {
   .footer .footer-top ul li .footer-item {
      height: auto;
      min-height: 1.75em;
   }

   .footer .footer-top ul li .footer-item span {
      white-space: normal;
      overflow-wrap: anywhere;
   }

   .footer .footer-top .flex-col {
      max-width: 100%;
   }

   .footer .footer-top {
      padding-bottom: var(--section-padding-small);
   }

   .footer .footer-bottom {
      padding: 1em 0 1.25em;
   }
}

/* ------------------------- Hero desktop: foto meer in beeld ------------------------- */

@media screen and (min-width: 721px) {
   .home-header {
      padding-top: calc(var(--section-padding) * 0.65);
      padding-bottom: calc(var(--section-padding) * 0.3);
   }
}

.home-big-image .btn-scroll span {
   color: var(--color-dark);
}

/* ------------------------- Toegankelijkheidspaneel ------------------------- */

.pendra-vis-verborgen {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

/* components.css verbergt het label van .close door het 99999px naar rechts te
   duwen. Het paneel is een scrollcontainer (overflow-y voor lage schermen), en
   daarin rekt dat de inhoud op tot 100.000px breed - je kon het paneel dan opzij
   slepen. Hier dezelfde clip-techniek als hierboven, die het vak niet oprekt. */

.pendra-a11y-sluit span {
   left: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.pendra-a11y {
   position: fixed;
   right: 4.5em;
   bottom: clamp(1.5em, 6vh, 4.5em);
   z-index: 5000;
   transition: bottom 0.2s ease;
   font-family: var(--font-primary);
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 0.85em;
}

@media screen and (max-width: 720px) {
   .pendra-a11y {
      right: 1em;
      bottom: 1.25em;
   }
}

.pendra-a11y-knop {
   width: auto;
   height: 3.6em;
   border-radius: 1.8em;
   border: 0;
   /* Browsers zetten hier standaard 1px 6px op; daardoor sloeg de 100% op het
      icoon op een vak van 46 in plaats van 58px. */
   padding: 0;
   background: var(--color-secondary);
   color: var(--color-light);
   display: flex;
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
   transition: transform var(--animation-primary);
}

/* Label naast het icoon: bij het laden even uitgeklapt (--intro, gezet door
   toegankelijkheid.js), daarna ingevouwen; hover en focus klappen het weer
   uit. Invouwen via max-width zodat de tekst voor hulptechnologie gewoon
   blijft bestaan. */
.pendra-a11y-knoplabel {
   font-size: 0.95em;
   font-weight: 500;
   color: var(--color-light);
   white-space: nowrap;
   max-width: 0;
   opacity: 0;
   overflow: hidden;
   padding-right: 0;
   transition: max-width var(--animation-primary), opacity var(--animation-primary), padding var(--animation-primary);
}

.pendra-a11y-knop:hover .pendra-a11y-knoplabel,
.pendra-a11y-knop:focus-visible .pendra-a11y-knoplabel,
.pendra-a11y--intro .pendra-a11y-knop .pendra-a11y-knoplabel {
   max-width: 12em;
   opacity: 1;
   padding-right: 1.2em;
}

/* De iconen krijgen hun maat uit width/height-attributen in de SVG. Die staan in
   px en zouden dus niet meeschalen als de bezoeker de tekst vergroot, terwijl de
   knop eromheen (3.6em) dat wel doet. In em zetten houdt ze in verhouding.

   De waarden zijn de originele px-maten gedeeld door 16, zodat het icoon bij de
   standaardgrootte precies even groot blijft als voorheen. Niet kleiner maken:
   de ring in het toegankelijkheidsicoon is maar 1,9 van de 62 eenheden dik, dus
   bij 30px al 0,9px - onder die maat verdwijnt hij. */

/* Het icoon vult de knop volledig; de gouden rand die je overhoudt komt uit de
   tekening zelf: de ring loopt tot 27 van de 31 eenheden, dus visueel is de ring
   87% van de knop. Bewust 100% en geen vaste em-waarde, zodat dit meebeweegt als
   de knopgrootte (3.6em) ooit verandert. */

.pendra-a11y-knop svg {
   width: 3.6em;
   height: auto;
   flex: 0 0 auto;
}

.pendra-a11y-sluit svg {
   width: 1.5em;    /* 24px */
   height: 1.5em;
}

.pendra-leesicoon svg {
   width: 1.625em;  /* 26px */
   height: 1.625em;
}

.pendra-a11y-knop:hover {
   transform: scale(1.06);
}

/* Paneel in dezelfde modal-stijl als het mobiele menu */
/* padding-top begrenzen op 6em: 20vh alleen was op lage schermen zoveel dat het
   paneel eronder niet meer paste - en bij 115% tekst is het paneel ook nog eens
   groter. max-height plus overflow maakt het in het ergste geval scrollbaar.
   Locomotive staat stil zolang het paneel open is, dus native scrollen werkt. */

.pendra-a11y-modal {
   align-items: flex-start;
   padding-top: min(20vh, 6em);
   color: var(--color-dark);
   /* Binnen het paneel valt niets horizontaal te pannen; dit voorkomt dat een
      veeg die net naast de schuif begint de pagina alsnog opzij trekt. */
   touch-action: pan-y;
}

.pendra-a11y-modal .modal-block {
   width: min(100%, 21em);
   max-height: 100%;
   /* Expliciet allebei de assen: zet je alleen overflow-y, dan maakt de spec van
      overflow-x automatisch auto en wordt het paneel horizontaal versleepbaar. */
   overflow: hidden auto;
   overscroll-behavior: contain;
   padding: 1.5em 1.5em 2em 2.25em;
   display: flex;
   flex-direction: column;
   gap: 0.5em;
}

.pendra-a11y-titelrij {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.pendra-a11y-titelrij p {
   margin: 0;
   opacity: .75;
}

.pendra-a11y-sluit {
   background: none;
   padding: 0;
}

.pendra-a11y-groep {
   padding: 1em 0;
   border-top: 1px solid rgba(var(--color-dark-rgb), 0.15);
}

.pendra-a11y-label {
   font-weight: 700;
   font-size: 1em;
   color: var(--color-dark);
}

.pendra-a11y-uitleg {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.75);
   margin-bottom: 0.6em;
}

.pendra-a11y-toggle {
   display: inline-flex;
   align-items: center;
   gap: 0.6em;
   background: rgba(var(--color-dark-rgb), 0.12);
   border: 1px solid rgba(var(--color-dark-rgb), 0.3);
   border-radius: 999px;
   padding: 0.3em 0.9em 0.3em 0.3em;
   cursor: pointer;
   color: var(--color-dark);
   font-family: var(--font-primary);
   font-size: 1em;
   margin-top: 0.35em;
}

/* De bol schuift van links (uit) naar rechts (aan), zoals overal gebruikelijk.
   Voorheen bleef hij staan en veranderde alleen de kleur; de stand was dan
   alleen af te lezen aan het woord ernaast.

   translateX en niet left: dat is compositor-only, dus geen herberekening van
   de layout. html.pendra-rustig zet transition-duration op 0.01ms via de
   universele selector, dus bij "verminder beweging" springt de bol vanzelf. */

.pendra-a11y-toggle .spoor {
   position: relative;
   flex: 0 0 auto;
   width: 2.9em;
   height: 1.6em;
   border-radius: 999px;
   background: rgba(var(--color-dark-rgb), 0.22);
   border: 1px solid rgba(var(--color-dark-rgb), 0.35);
   transition: border-color var(--animation-primary);
}

.pendra-a11y-toggle .bol {
   position: absolute;
   top: 50%;
   left: 0.15em;
   width: 1.2em;
   height: 1.2em;
   margin-top: -0.6em;
   border-radius: 50%;
   background: rgba(var(--color-dark-rgb), 0.5);
   transition: transform var(--animation-primary), background var(--animation-primary);
}

.pendra-a11y-toggle[aria-checked="true"] .spoor {
   border-color: var(--color-secondary);
}

/* 2.9em spoor - 1.2em bol - 2x 0.15em inset */
.pendra-a11y-toggle[aria-checked="true"] .bol {
   transform: translateX(1.4em);
   background: var(--color-secondary);
}

/* ---- Tekstgrootte-schuifregelaar ---- */

.pendra-a11y-labelrij {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 0.75em;
}

.pendra-a11y-waarde {
   font-size: 0.9em;
   font-variant-numeric: tabular-nums;
   color: rgba(var(--color-dark-rgb), 0.75);
}

/* De pil is de zichtbare baan; het range-element zelf is doorzichtig en reist
   tussen de twee labels in. */

.pendra-a11y-schuif {
   display: flex;
   align-items: center;
   gap: 0.7em;
   margin-top: 0.6em;
   padding: 0.3em 0.9em;
   border-radius: 999px;
   background: rgba(var(--color-dark-rgb), 0.12);
   border: 1px solid rgba(var(--color-dark-rgb), 0.3);
}

.pendra-a11y-schuif > span {
   font-size: 0.8em;
   line-height: 1;
   white-space: nowrap;
   color: rgba(var(--color-dark-rgb), 0.75);
   pointer-events: none;
}

.pendra-a11y-schuif input[type="range"] {
   flex: 1 1 auto;
   min-width: 3em;
   height: 2em;
   margin: 0;
   padding: 0;
   background: transparent;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
   /* Zonder dit weet de browser bij een horizontale veeg niet of je de schuif
      bedient of de pagina wilt verslepen, en kiest hij voor pannen: het paneel
      schuift dan mee opzij. pan-y houdt verticaal scrollen wel intact, zodat
      het paneel op lage schermen bereikbaar blijft. */
   touch-action: pan-y;
}

/* LET OP: de vendor-pseudo's hieronder mogen NIET in een selectorlijst
   samengevoegd worden. Een browser die er een niet kent, gooit de hele regel
   weg - dan verdwijnt de bol in alle browsers tegelijk. */

.pendra-a11y-schuif input[type="range"]::-webkit-slider-runnable-track {
   height: 2em;
   background: transparent;
   border: 0;
}

.pendra-a11y-schuif input[type="range"]::-moz-range-track {
   height: 2em;
   background: transparent;
   border: 0;
}

/* Firefox vult standaard het stuk links van de bol */
.pendra-a11y-schuif input[type="range"]::-moz-range-progress {
   background: transparent;
}

.pendra-a11y-schuif input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 1.7em;
   height: 1.7em;
   /* (2em baan - 1.7em bol) / 2; WebKit centreert de bol niet zelf */
   margin-top: 0.15em;
   border: 0;
   border-radius: 50%;
   background: var(--color-secondary);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pendra-a11y-schuif input[type="range"]::-moz-range-thumb {
   width: 1.7em;
   height: 1.7em;
   /* Firefox tekent hier standaard een rand omheen */
   border: 0;
   border-radius: 50%;
   background: var(--color-secondary);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pendra-a11y-knop:focus-visible,
.pendra-a11y-sluit:focus-visible,
.pendra-a11y-toggle:focus-visible,
.pendra-a11y-schuif input:focus-visible,
.pendra-leesknop:focus-visible {
   outline: 2px solid var(--color-secondary);
   outline-offset: 3px;
}

/* ------------------------- Lees-voor-balk ------------------------- */

.pendra-leesknop {
   display: inline-flex;
   align-items: center;
   background: var(--color-light);
   color: var(--color-dark);
   border: 0;
   border-radius: 999px;
   padding: 0.4em;
   font-size: 0.9em;
   font-family: var(--font-primary);
   font-weight: 500;
   cursor: pointer;
   transition: transform var(--animation-primary);
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
   white-space: nowrap;
}

/* Tekst schuift uit; ingeklapt is de knop een rond icoon (zelfde vormtaal als het bolletje eronder) */
.pendra-leestekst {
   display: block;
   max-width: 12em;
   margin: 0 0.8em 0 0.6em;
   overflow: hidden;
   opacity: 1;
   transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

.pendra-leesbalk.ingeklapt .pendra-leesknop:not(:hover):not(:focus-visible) .pendra-leestekst {
   max-width: 0;
   margin: 0;
   opacity: 0;
}

.pendra-leesknop:hover:not(:disabled) {
   transform: scale(1.03);
}

.pendra-leesknop:disabled {
   opacity: 0.6;
   cursor: default;
}

.pendra-leesicoon {
   width: 2.5em;
   height: 2.5em;
   border-radius: 50%;
   color: var(--color-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

/* De balk is een kolom: de regelaars komen bóven de speelknop te staan, zodat
   de knop zelf niet verspringt zodra je begint te luisteren. */
.pendra-leesbalk {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 0.5em;
}

.pendra-leesregelaars {
   display: flex;
   align-items: center;
   gap: 0.25em;
   max-width: calc(100vw - 2em);
   padding: 0.35em 0.9em 0.35em 0.5em;
   background: var(--color-light);
   color: var(--color-dark);
   border-radius: 999px;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
   font-size: 0.9em;
}

/* display: flex hierboven wint het van de UA-regel voor [hidden] */
.pendra-leesregelaars[hidden],
.pendra-a11y-groep-meelezen[hidden] {
   display: none;
}

.pendra-leesspoel {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2em;
   height: 2em;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: inherit;
   cursor: pointer;
}

.pendra-leesspoel:hover {
   background: rgba(var(--color-dark-rgb), 0.15);
}

.pendra-leesspoel svg {
   width: 1.25em;
   height: 1.25em;
}

.pendra-leestijd {
   flex-shrink: 0;
   font-size: 0.85em;
   /* Cijfers even breed: anders danst de tijd bij elke seconde heen en weer */
   font-variant-numeric: tabular-nums;
   opacity: 0.8;
}

/* Voortgangsschuif: zelfde opbouw als de tekstgrootte-schuif in het paneel -
   een native range met een eigen baan en bol. */
.pendra-leespositie {
   flex: 1 1 6em;
   min-width: 4em;
   max-width: 12em;
   height: 1.5em;
   margin: 0;
   padding: 0;
   background: transparent;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
}

.pendra-leespositie::-webkit-slider-runnable-track {
   height: 0.3em;
   border-radius: 999px;
   background: rgba(var(--color-dark-rgb), 0.35);
}

.pendra-leespositie::-moz-range-track {
   height: 0.3em;
   border-radius: 999px;
   background: rgba(var(--color-dark-rgb), 0.35);
}

.pendra-leespositie::-moz-range-progress {
   height: 0.3em;
   border-radius: 999px;
   background: var(--color-secondary);
}

.pendra-leespositie::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 0.95em;
   height: 0.95em;
   /* (0.3em baan - 0.95em bol) / 2; WebKit centreert de bol niet zelf */
   margin-top: -0.325em;
   border: 0;
   border-radius: 50%;
   background: var(--color-secondary);
}

.pendra-leespositie::-moz-range-thumb {
   width: 0.95em;
   height: 0.95em;
   border: 0;
   border-radius: 50%;
   background: var(--color-secondary);
}

.pendra-leesspoel:focus-visible,
.pendra-leespositie:focus-visible {
   outline: 2px solid var(--color-secondary);
   outline-offset: 3px;
}

/* ------------------------- Meelezen: markering tijdens het voorlezen -------------------------

   Twee lagen: de alinea die aan de beurt is krijgt een rustige tint, het woord
   dat op dat moment klinkt de volle accentkleur. De tint ligt om de wóórden en
   niet om het tekstvak: een <p> is zo breed als de kolom, en dan krijg je een
   balk over de hele breedte in plaats van gemarkeerde tekst. De box-shadow doet
   dienst als padding, zodat de regels niet opschuiven. Zwarte tekst op het geel
   haalt ruim voldoende contrast, ook op de donkere secties. */

.pendra-lees-hier.pendra-lees-perwoord .pendra-lees-woord,
.pendra-lees-hier.pendra-lees-perwoord .pendra-word {
   background: rgba(253, 182, 40, 0.12);
   box-shadow: 0 0 0 0.12em rgba(253, 182, 40, 0.12);
   border-radius: 0.1em;
}

/* Vangnet: lukt het opdelen in woorden niet, dan markeren we het blok zelf */
.pendra-lees-hier:not(.pendra-lees-perwoord) {
   background: rgba(253, 182, 40, 0.12);
   border-radius: 0.15em;
}

.pendra-lees-hier .pendra-lees-woord.pendra-lees-nu,
.pendra-lees-hier .pendra-word.pendra-lees-nu {
   background: var(--color-secondary);
   color: var(--color-black);
   box-shadow: 0 0 0 0.12em var(--color-secondary);
}

/* ------------------------- Instellingen: tekstgrootte + rust -------------------------

   De tekstgrootte loopt via --pendra-tekst (zie styleguide.css). De oude klassen
   html.pendra-fs-l / -xl stonden hier, maar deden niets: die zetten de font-size
   van <html>, terwijl body die meteen overschrijft met een eigen clamp en de hele
   site in em werkt, relatief aan body. Met nul rem-waarden in de CSS had die
   html-waarde niets om op in te werken. */

html.pendra-rustig *,
html.pendra-rustig *::before,
html.pendra-rustig *::after {
   animation-duration: 0.01ms !important;
   animation-iteration-count: 1 !important;
   transition-duration: 0.01ms !important;
   scroll-behavior: auto !important;
}

html.pendra-rustig .pendra-loader {
   display: none !important;
}

/* ------------------------- Overlay-lagen: a11y-knop onder open site-modals ------------------------- */

/* Als een site-modal (menu, taal) open is, hoort de gele knop + leesbalk erónder,
   niet erbovenop; het eigen a11y-paneel is uitgezonderd (dat leeft ín .pendra-a11y) */
body:has(.modal.active:not(.pendra-a11y-modal)) .pendra-a11y {
   z-index: 150;
}

/* ------------------------- Hero-cirkels: animatie rond de toegankelijkheidsknop ------------------------- */

/* Inhoud stapelt boven de cirkels, op elke pagina. De sierlijnen zijn
   positioned en schilderen anders over de statische inhoud van secties
   verderop heen. Containers en volle-breedte thumbnails een laag omhoog:
   de lijnen blijven zichtbaar op de sectievlakken, nooit over de inhoud. */
.section .container {
   position: relative;
   z-index: 1;
}

/* Thumbnails zijn al gepositioneerd (absoluut in de big-image-secties,
   relatief op home); alleen de laag zetten, de position niet aanraken. */
.section > .thumbnail {
   z-index: 1;
}

/* Startstand homepage: klein achter de knop; JS laat ze groeien (niet in rustige modus) */
html:not(.pendra-rustig) .home-header .pendra-deco {
   transform: scale(0);
}

/* ------------------------- "Herkent u dit?"-slider: kaartjes met introtekst ------------------------- */

/* Geen height:100% op de cellen: Flickity meet de viewporthoogte aan de cellen
   en andersom, dat klapt circulair in elkaar. Gelijke hoogte komt van de
   min-hoogtes op titel en intro hieronder. */
.pendra-kaart-slider .pendra-news-item {
   background: var(--color-dark);
   border-radius: var(--border-radius-small);
   padding: 0.85em 0.85em 1.15em 0.85em;
}

.pendra-kaart-slider .pendra-news-item .col-image .image {
   margin-bottom: 0.25em;
}

.pendra-kaart-slider .pendra-news-item .col-title a {
   padding: 0.75em 0.25em 0.35em 0.25em;
}

.pendra-kaart-slider .pendra-news-item .col-title h4 {
   color: var(--color-light);
   min-height: calc(2em * 1.2);
}

.pendra-kaart-slider .pendra-news-item .col-intro {
   padding: 0 0.25em;
}

.pendra-kaart-slider .pendra-news-item .col-intro p {
   font-size: 0.85em;
   line-height: 1.55;
   color: rgba(var(--color-light-rgb), 0.8);
   margin: 0;
   min-height: calc(3em * 1.55);
}

/* Tags/meldlink onderaan het kaartje vastpinnen zodat alle kaartjes gelijk ogen */
.pendra-kaart-slider .pendra-news-item .col-tags {
   margin-top: auto;
   padding: 1.2em 0.25em 0 0.25em;
}

.pendra-kaart-slider .pendra-news-item .col-tags .date span {
   color: rgba(var(--color-light-rgb), 0.7);
}

/* Zelfde gedrag als de actueel-kaarten: pijl schuift in op hover, de
   meldtekst dimt en schuift opzij (zie components.css). */
.pendra-kaart-slider .pendra-news-item .col-tags .arrow {
   right: 0.25em;
}