/*
Theme Name: Gearwurkje
Theme URI: https://gearwurkje.nl/
Author: Custard / Bosma Multimedia
Description: Custom Wordpress Thema voor Gearwurkje.nl
Version: 1.0
*/
:root {
    --font:'area-normal', sans-serif;
    --gap:3rem;
    --color-primary:#003c19ff;
    --color-primary-trans:#003c1922;
    --color-secondary:#00a59eff;
    --color-secondary-trans:#00a59e22;
    --color-tertiary:#f58331ff;
    --color-tertiary-trans:#f5833122;
    --color-accent:#19a94bff;
    --color-accent-trans:#19a94b22;
    --color-soft:#f2f29dff;
    --color-soft-trans:#f2f29d22;
    --color-bg:#ffffff;
    --color-bg-trans:#ffffff44;
    --color-text:#003c19;
    --color-error:#ed0044;
    --color-error-bg:#ed004426;
    --color-success:#30c28f;
    --color-success-bg:#30c28f26;
    --spacer-0:0;
    --spacer-1:0.25rem;
    --spacer-2:0.5rem;
    --spacer-3:1rem;
    --spacer-4:1.5rem;
    --spacer-5:3rem;
    --spacer-6:4rem;
    --spacer-7:5rem;
    --padding-vertical: clamp(var(--spacer-2), 6vw, var(--spacer-5));
    --padding-horizontal: clamp(var(--spacer-3), 6vw, var(--spacer-4));
    --padding-vertical-small: clamp(var(--spacer-1), 6vw, var(--spacer-3));
    --padding-horizontal-small: clamp(var(--spacer-2), 6vw, var(--spacer-5));
    --padding-vertical-big: clamp(var(--spacer-5), 6vw, var(--spacer-7));
    --padding-horizontal-big: clamp(var(--spacer-5), 6vw, var(--spacer-7));
    --header-offset: 150px;
}
*,
*::before,
*::after {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html {
    min-height:100vh;
    overflow-x:hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    width:100%;
    min-height:100vh;
    font-family:var(--font);
    font-optical-sizing:auto;
    font-weight:400;
    font-style:normal;
    font-variation-settings:"wdth" 100;
    font-variant-numeric: lining-nums tabular-nums;
    font-size: clamp(1rem, .96rem + .18vw, 1.1rem);
    padding:0;margin: 0;
    color:var(--color-text);
    background-image:url('assets/img/bg-page.svg');
    background-repeat:no-repeat;
    background-size:2500px 833px;
    background-position: calc(50% - 1050px) top;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
.mouse-pointer {
    cursor:pointer;
}
.no-padding-bottom {
    padding-bottom:0 !important;
}
#wpadminbar {
    position:fixed;
}
a {
    color:var(--color-primary);
    text-decoration:none;
}
a:hover,
a:focus {
    text-decoration:underline;
}
/* Hyperlinkjes in gewone lopende tekst (bv. de pagina-inhoud of een WYSIWYG-
   veld) altijd onderstreept, zodat ze duidelijk als link herkenbaar zijn
   tussen de rest van de tekst - dit raakt bewust geen opsommingen (bv. de
   ul.arrows-lijstjes) of link-achtige componenten (a.arrowlink, .more-btn,
   .normal-btn, kaarten, menu's): die zitten altijd in een <li> of hebben een
   eigen klasse (die wint van deze algemene "p a"-regel qua CSS-specificiteit,
   ook mocht zo'n link ooit toch in lopende tekst voorkomen). */
p a {
    text-decoration: underline;
}
a.strong {
    font-weight:700;
    color:var(--color-soft);
}
a.strong:hover,
a.strong:focus {
    text-decoration:underline;
    color:var(--color-soft);
}
a.arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color:currentColor;
    font-weight: 400;
    text-decoration: none;
}
a.arrowlink::after {
    content: "";
    width: 0.9em;
    height: 0.9em;
    flex: 0 0 0.9em;
    background-color: currentColor;
    -webkit-mask: url('assets/img/icon-arrow.svg') no-repeat center / contain;
    mask: url('assets/img/icon-arrow.svg') no-repeat center / contain;
}
a.arrowlink:hover,
a.arrowlink:focus {
    color:var(--color-primary);
    text-decoration:none;
}
.more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacer-2);
    color: var(--color-tertiary);
    font-size: 1rem;
    text-decoration: none;
    transition: all .25s ease-in-out;
}
.more-btn::after {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
    mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
    transition: transform .25s ease-in-out;
    position: relative;
    top: 2px;
}
.more-btn:hover,
.more-btn:focus {
    text-decoration: underline;
}
.more-btn:hover::after,
.more-btn:focus::after {
    transform: translateX(4px);
}

.more-btn--terug {
    flex-direction: row-reverse;
}
.more-btn--terug::after {
    transform: scaleX(-1);
}
.more-btn--terug:hover::after,
.more-btn--terug:focus::after {
    transform: scaleX(-1) translateX(4px);
}
.normal-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    vertical-align: middle;
    width: fit-content;
    line-height:1.6rem;
    min-height: 60px;
    padding: calc(var(--spacer-4) - 5px) calc(var(--spacer-4) + 32px + var(--spacer-4)) var(--spacer-4) var(--spacer-4);
    font-size: 1.2rem;
    background-color: var(--color-secondary);
    color: var(--color-bg);
    transition: all .25s ease-in-out;

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: var(--spacer-4);
        width: 32px;
        height: 32px;
        transform: translateY(-50%);
        background-color: currentColor;
        -webkit-mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
        mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
        transition: all .25s ease-in-out;
    }

    &.bg-primary { background-color: var(--color-primary); }
    &.bg-secondary { background-color: var(--color-secondary); }
    &.bg-tertiary { background-color: var(--color-tertiary); }
    &.bg-accent { background-color: var(--color-accent); }
    &.bg-soft { background-color: var(--color-soft); }
}

.normal-btn:hover,
.normal-btn:focus {
    text-decoration: none;
    scale: 1.03;
}
.normal-btn:hover::after,
.normal-btn:focus::after {
    right: var(--spacer-3);
    scale: 0.95;
}
@media (max-width: 767.98px) {
    .normal-btn {
        min-height: 48px;
        padding: var(--spacer-2) calc(var(--spacer-3) + 24px + var(--spacer-3)) var(--spacer-2) var(--spacer-3);
        font-size: 1.1rem;
    }
    .normal-btn::after {
        right: var(--spacer-3);
        width: 24px;
        height: 24px;
    }
    .normal-btn:hover::after,
    .normal-btn:focus::after {
        right: var(--spacer-2);
    }
}

.laad-meer-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    margin: var(--spacer-5) auto;
    line-height: 1.4rem;
    min-height: 44px;

    padding: var(--spacer-3) calc(var(--spacer-3) + 22px + var(--spacer-3)) var(--spacer-3) var(--spacer-3);
    font-size: 1rem;
    background-color: var(--color-secondary);
    color: var(--color-bg);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: all .25s ease-in-out;
}
.laad-meer-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--spacer-3);
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background-color: currentColor;
    -webkit-mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
    mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
    transition: all .25s ease-in-out;
}
.laad-meer-btn:hover,
.laad-meer-btn:focus {
    text-decoration: none;
    scale: 1.03;
}
.laad-meer-btn:hover::after,
.laad-meer-btn:focus::after {
    right: calc(var(--spacer-3) - 4px);
    scale: 0.95;
}
ul.socials {
    display: flex;
    justify-content: center;
    gap: var(--spacer-3);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacer-3) 0;
}
ul.socials li {
    list-style: none;
}
ul.socials li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-indent: -9999em;
    overflow: hidden;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: opacity .25s ease-in-out;
}
ul.socials li a {
    color: var(--color-bg);
}
ul.socials li.instagram a {
    -webkit-mask-image: url('assets/img/icon-instagram.svg');
    mask-image: url('assets/img/icon-instagram.svg');
}
ul.socials li.tiktok a {
    -webkit-mask-image: url('assets/img/icon-tiktok.svg');
    mask-image: url('assets/img/icon-tiktok.svg');
}
ul.socials li.youtube a {
    -webkit-mask-image: url('assets/img/icon-youtube.svg');
    mask-image: url('assets/img/icon-youtube.svg');
}
ul.socials li.linkedin a {
    -webkit-mask-image: url('assets/img/icon-linkedin.svg');
    mask-image: url('assets/img/icon-linkedin.svg');
}
ul.socials li.facebook a {
    -webkit-mask-image: url('assets/img/icon-facebook.svg');
    mask-image: url('assets/img/icon-facebook.svg');
}
ul.socials li.phone a {
    -webkit-mask-image: url('assets/img/icon-phone.svg');
    mask-image: url('assets/img/icon-phone.svg');
}
ul.socials li.mail a {
    -webkit-mask-image: url('assets/img/icon-mail.svg');
    mask-image: url('assets/img/icon-mail.svg');
}
ul.socials li.pinterest a {
    -webkit-mask-image: url('assets/img/icon-pinterest.svg');
    mask-image: url('assets/img/icon-pinterest.svg');
}
ul.socials li a:hover,
ul.socials li a:focus {
    opacity: .75;
    text-decoration: none;
}
.swiper-button-prev,
.swiper-button-next {
    top: auto !important;
    bottom:15px !important;
    transform: none !important;
    width:32px;height:32px;
}
.swiper-button-prev {
    left:15px !important;
}
.swiper-button-next {
    right:15px !important;
}
.swiper-pagination-bullet {
    border-radius:0 !important;
    width:10px;height:10px;
}
.swiper-pagination {
    bottom:15px !important;
}
.offset-image-left-top {
    position: relative;
    top:-40px;left:-40px;
}
.offset-image-right-top {
    position: relative;
    top:-40px;right:-40px;
}
section {
    margin-top:var(--padding-vertical);
}
section.no-margin {
    margin-top:0;
}

section.breadcrumb + section {
    margin-top: 0;
}

section.breadcrumb + section .content-padding {
    padding-top: var(--padding-vertical-small);
}

section:has(.offset-image-right-top) {
    margin-top: calc(var(--spacer-5) + 40px);
}

.kolommen-blok-relatief {
    position:relative;
}
.kolommen-blok-achtergrond {
    position:absolute;
    inset:0;
    z-index:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.kolommen-blok-link {
    position:absolute;
    inset:0;
    z-index:1;
}
.kolommen-blok-relatief > .content-wrapper {
    position:relative;
    z-index:2;
}
h1, h2, h3, h4 {
    font-family:var(--font);
}
h1, h2 {
    font-size:clamp(1rem, 7vw, 2rem);
    line-height:clamp(1.8rem, 8vw, 2.2rem);
    margin-bottom:var(--spacer-3);
    color:var(--color-text);
    &.fg-primary {
        color:var(--color-primary);
    }
    &.fg-secondary {
        color:var(--color-secondary);
    }
    &.fg-tertiary {
        color:var(--color-tertiary);
    }
    &.fg-accent {
        color:var(--color-accent);
    }
    &.fg-soft {
        color:var(--color-soft);
    }
    &.big {
        font-size:4rem;
    }
}
ul.page-numbers {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    margin: 1.5rem 0;
    padding:var(--spacer-3);
    background:var(--color-primary-trans);
}
ul.page-numbers li {
    list-style: none;
}
ul.page-numbers li a.page-numbers,
ul.page-numbers li span.page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 2.2rem;
    height: 2.2rem;
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--color-primary);
}
ul.page-numbers li a.page-numbers:not(.prev):not(.next) {
    background: #ffffff;
}
ul.page-numbers li span.page-numbers.current {
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 600;
}
ul.page-numbers li a.prev,
ul.page-numbers li a.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 1rem;
    min-width: auto;
    background: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
ul.page-numbers li a.prev {
    left: 1rem;
}
ul.page-numbers li a.next {
    right: 1rem;
}
ul.page-numbers li a.prev:hover,
ul.page-numbers li a.next:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.tag {
    font-weight:100;
    font-size:1.4rem;
    text-transform:uppercase;
    color:var(--color-secondary);
    mix-blend-mode: invert;
}
time.date {
    display:block;
    text-transform:uppercase;
    font-size:0.9rem;
    margin-top:calc(-0.5 * var(--spacer-3));
    margin-bottom:var(--spacer-3);
}
p {
    line-height:1.8rem;
    margin-bottom:var(--spacer-3);
}
.float-img-left {
    float: left;
    margin: 0 var(--spacer-4) var(--spacer-4) 0;
    height: auto;
}
.float-img-right {
    float: right;
    margin: var(--spacer-4) 0 0 var(--spacer-4);
    height: auto;
}
ul.menu {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacer-4) 0;
}
ul.menu li {
    font-size: 1.1rem;
    padding: 0 0 0 24px;
    margin: 10px 0;
    color: var(--color-soft);
    position: relative;
}
ul.menu li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 16px;
    transform: translateY(-50%);
    background-color: var(--color-primary);
    -webkit-mask: url('img/icon-arrow.svg') no-repeat center / contain;
          mask: url('img/icon-arrow.svg') no-repeat center / contain;
}
ul.arrows{
    list-style:none;
    padding:0;
    margin:0;
}
ul.arrows li {
    position:relative;
    font-size:inherit;
    padding-left:24px;
    margin:10px 0;
    color: inherit;
}
ul.arrows li::before{
    content:"";
    position:absolute;
    left:0;

    top:calc(0.6em - 3px);
    width:14px;
    height:16px;
    background-color:currentColor;
    -webkit-mask:url('assets/img/icon-arrow.svg') no-repeat center / contain;
          mask:url('assets/img/icon-arrow.svg') no-repeat center / contain;
}
.breadcrumb {
    font-size: 1rem;
    padding: var(--spacer-4) 0;
}
.breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.breadcrumb li {
    display: inline-flex;

    align-items: baseline;
    color: var(--color-primary);
}
.breadcrumb li:last-child {

    color: var(--color-tertiary);
}
.breadcrumb li + li::before {
    content: "";
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin: 0 .5rem;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
    mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
    opacity: .6;
}
.breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.content-padding {
    padding: var(--padding-vertical) var(--padding-horizontal);
    display:flow-root;
}
.content-padding-left-right {
    padding: 0 var(--padding-horizontal);
    display:flow-root;
}
.content-padding-big {
    padding: var(--padding-vertical-big) var(--padding-horizontal);
    display:flow-root;
}

.content-padding.center-media {
    height: 100%;
    display: grid;
    place-items: center;
}
.text-center {
    text-align:center;
}
.bg-color {
    padding:0 !important;margin:0 !important;
}
.bg-color-primary {
    background-color:var(--color-primary);
}
.bg-color-secondary {
    background-color:var(--color-secondary);
}
.bg-color-tertiary {
    background-color:var(--color-tertiary);
}
.bg-color-primary-trans {
    background-color:var(--color-primary-trans);
}
.bg-color-secondary-trans {
    background-color:var(--color-secondary-trans);
}
.bg-color-tertiary-trans {
    background-color:var(--color-tertiary-trans);
}
.bg-color-accent {
    background-color:var(--color-accent);
}
.bg-color-accent-trans {
    background-color:var(--color-accent-trans);
}
.bg-color-soft {
    background-color:var(--color-soft);
}
.bg-color-soft-trans {
    background-color:var(--color-soft-trans);
}

.bg-color-primary,
.bg-color-secondary,
.bg-color-accent {
    color: var(--color-bg);
}
.bg-color-tertiary {
    color: var(--color-text);
}

@supports (color: contrast-color(black)) {
    .bg-color-primary   { color: contrast-color(var(--color-primary)); }
    .bg-color-secondary { color: contrast-color(var(--color-secondary)); }
    .bg-color-tertiary  { color: contrast-color(var(--color-tertiary)); }
    .bg-color-accent    { color: contrast-color(var(--color-accent)); }
}

:is(.bg-color-primary, .bg-color-secondary, .bg-color-tertiary, .bg-color-accent)
:is(h1, h2, h3, h4, p, li, a) {
    color: inherit;
}

.columns {
    display: grid;
}
.gap-big {

    gap: var(--spacer-5);
}
.kolommen-blok-columns {
    column-gap: var(--spacer-2);
}
.columns-1 {
    grid-template-columns: 1fr;
}
.columns-2-50-50 {
    grid-template-columns: 1fr 1fr;
}
.columns-2-66-33 {
    grid-template-columns: 2fr 1fr;
}
.columns-2-33-66 {
    grid-template-columns: 1fr 2fr;
}
.columns-2-75-25 {
    grid-template-columns: 3fr 1fr;
}
.columns-2-25-75 {
    grid-template-columns: 1fr 3fr;
}
.columns-3-33-33-33 {
    grid-template-columns: 1fr 1fr 1fr;
}
.columns-3-50-25-25 {
    grid-template-columns: 2fr 1fr 1fr;
}
.columns-3-25-50-25 {
    grid-template-columns: 1fr 2fr 1fr;
}
.columns-3-25-25-50 {
    grid-template-columns: 1fr 1fr 2fr;
}
.columns-4-25-25-25-25 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.columns-4-50-25-12-12 {
    grid-template-columns: 4fr 2fr 1fr 1fr;
}
.columns-4-12-50-25-12 {
    grid-template-columns: 1fr 4fr 2fr 1fr;
}
.columns-4-12-12-50-25 {
    grid-template-columns: 1fr 1fr 4fr 2fr;
}
.columns-6-16-16-16-16-16-16 {
    grid-template-columns: repeat(6, 1fr);
}
.column {
    position: relative;
    padding: 0;
    margin: 0;
}
.column img {
    width: 100%;
    object-fit: cover;
}
.column img.no-upscale {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.project-kaart-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease-in-out;
}
.project-kaart-link:hover,
.project-kaart-link:focus {
    text-decoration: none;
    background-color: var(--color-primary-trans);
}

.bericht-rij-link {
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease-in-out;
}
.bericht-rij-link:hover,
.bericht-rij-link:focus {
    text-decoration: none;
    background-color: var(--color-primary-trans);
}

.bericht-rij .gearwurkje-media-cover {
    height: 100%;
    min-height: 240px;
}

.gearwurkje-media-cover {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.gearwurkje-media-cover--detail {
    height: 400px;
    margin-bottom: var(--spacer-5);
}

.gearwurkje-media-cover--dummy {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-trans);
}
.gearwurkje-media-cover--dummy img {
    width: 45%;
    max-width: 160px;
    height: auto;
}

@media (min-width: 768px) {
    .columns-divided {
        gap: var(--spacer-5);
    }
}
.columns-divided > .column + .column {
    border-left: 1px solid var(--color-text, rgba(0, 0, 0, .1));
    padding-left:var(--padding-horizontal);
}
@media (max-width: 767.98px) {
    .columns-divided > .column + .column {
        border-left: 0;
        border-top: 1px solid var(--color-text, rgba(0, 0, 0, .1));
    }
}
@media (max-width: 991.98px) {
    [class*="columns-4"] {
        grid-template-columns: 1fr 1fr;
    }
    .gap-big {
        padding: var(--spacer-4) 0;
        gap: var(--spacer-4);
    }
}
@media (max-width: 767.98px) {
    .columns[class*="columns-"] {
        grid-template-columns: 1fr;
    }
    .gap-big {
        padding: var(--spacer-3) 0;
        gap: var(--spacer-3);
    }
    .columns-reverse-mobile > .column:first-child {
        order: 2;
    }
    .columns-reverse-mobile > .column:last-child {
        order: 1;
    }
}
.content-wrapper {
    display:grid;
    position:relative;
    grid-template-columns: 1fr;
    grid-template-areas:
    "header"
    "main"
    "footer";
    max-width:1400px; width:100%;
    padding:0;margin:0 auto;
    transition: all .5s ease-in-out;
}
maincontent {

    display:flow-root;
}
main {
    position:relative;
    grid-area:main;
    box-sizing:border-box;

    padding-top: var(--header-offset, 150px);

    display:flex;
    flex-direction:column;
    min-height:100vh;
}
.main-inner {
    flex:1 0 auto;
    width:100%;
}
main .content-wrapper {
    position:relative;
    gap:0 !important;
    overflow:visible !important;
}
.overlay-menu {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:100vw;
    box-sizing:border-box;
    padding:0;
    padding-top:var(--header-offset, 150px);
    overflow-y:auto;
    background-color:var(--color-bg);

    z-index:40;
    visibility:hidden;
    transform:translateX(-100%);
    transition:transform .3s ease-in-out, visibility 0s linear .3s;
}
.overlay-menu.open {
    visibility:visible;
    transform:translateX(0);
    transition:transform .3s ease-in-out;
}

.overlay-menu-zoeken {
    padding:20px;
    border-bottom:solid 1px var(--color-primary-trans);
}
.overlay-menu-zoeken .search-form {
    display:flex;
    gap:var(--spacer-2);
    max-width:400px;
}
.overlay-menu-zoeken .search-field {
    flex:1 1 auto;
    min-width:0;
    padding:var(--spacer-2) var(--spacer-3);
    border:1px solid var(--color-primary-trans);
    background-color:var(--color-bg);
    color:var(--color-text);
    font:inherit;
    font-size:0.9rem;
}
.overlay-menu-zoeken .search-submit {

    padding:calc(var(--spacer-2) - 3px) var(--spacer-3) var(--spacer-2) var(--spacer-3);
    border:0;
    background-color:var(--color-secondary);
    color:var(--color-bg);
    font:inherit;
    cursor:pointer;
    transition:background-color .2s ease-in-out;
}
.overlay-menu-zoeken .search-submit:hover,
.overlay-menu-zoeken .search-submit:focus {
    background-color:var(--color-secondary);
}

.screen-reader-text {
    border:0;
    clip:rect(1px, 1px, 1px, 1px);
    clip-path:inset(50%);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
    word-wrap:normal !important;
}
.overlay-menu ul {
    list-style:none;
    border-top:solid 1px var(--color-primary-trans);
    padding:0;margin:0;
}
.overlay-menu ul li a {
    display:block;
    min-width:300px;
    padding:20px var(--spacer-5) 20px 20px;
    text-decoration:none;
    color:var(--color-primary);
    font-size:1.2rem;
    font-weight:500;
    transition: all .5s ease-in-out;
    border-bottom:solid 1px var(--color-primary-trans);
}
.overlay-menu ul li ul {
    list-style:none;
    box-shadow:none;
    border-top:none;
    border-bottom:none;
}
.overlay-menu ul li ul li a {
    display:block;
    min-width:300px;
    padding:10px 60px 10px 25px;
    border-bottom:solid 1px var(--color-bg-trans);
    text-transform:none;
    text-decoration:none;
    font-size:0.9rem;
    color:var(--color-primary);
    transition: all .5s ease-in-out;
}
.overlay-menu ul li a:hover {
    background-color:var(--color-primary-trans);
    border-bottom:solid 1px var(--color-bg);
}
.overlay-menu > ul > li > ul {
    display:block;
    background-color:transparent;
    transition: all .25s ease-in-out;
}
.overlay-menu > ul > li:hover > ul {
    visibility: visible;
    background-color:var(--color-bg);
}
.overlay-menu ul li ul li {
    display:block;
}

.overlay-menu > ul + ul > li > a {
    padding:10px var(--spacer-5) 10px 20px;
    font-size:0.9rem;
    font-weight:400;
    border-bottom:solid 1px var(--color-bg-trans);
}
aside {
    grid-area:aside;
}

header {
    position:fixed;
    top:0;left:0;
    width:100%;
    background-image:url('assets/img/bg-page.svg');
    background-repeat:no-repeat;
    background-size:2500px 833px;
    background-position: calc(50% - 1050px) top;
    background-color:var(--color-bg);
    z-index:100;
}

body.admin-bar header {
    top:32px;
}
body.admin-bar .overlay-menu {
    padding-top:calc(var(--header-offset, 150px) + 32px);
}
@media (max-width: 782px) {
    body.admin-bar header {
        top:46px;
    }
    body.admin-bar .overlay-menu {
        padding-top:calc(var(--header-offset, 150px) + 46px);
    }
}

header.is-scrolled {
    background-color:var(--color-bg);
    box-shadow:0 2px 10px rgba(0, 0, 0, .06);
}
header .content-wrapper {
    display:flex;
    flex-direction:column;

    padding-left: var(--padding-horizontal);
    padding-right: var(--padding-horizontal);
}
.topnav {
    padding:10px 0;
}
.topnav ul {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0.6rem;
    list-style:none;
}
.topnav ul li {
    position:relative;
    font-size:1rem;
    color:var(--color-text);
}
.topnav ul li a {
    color:var(--color-text);
    text-transform:lowercase;
}
.topnav ul li.current-menu-item a {
    text-decoration:none;
}

.topnav ul li:not(.mail):not(.linkedin):not(.facebook):not(.instagram):not(.youtube):not(.tiktok):not(.pinterest):not(.phone):has(+ li:not(.mail):not(.linkedin):not(.facebook):not(.instagram):not(.youtube):not(.tiktok):not(.pinterest):not(.phone))::after {
    content:"|";
    margin-left:0.8rem;
    margin-right:0.3rem;
    opacity:.4;
}
.topnav ul li.mail a,
.topnav ul li.linkedin a,
.topnav ul li.facebook a,
.topnav ul li.instagram a,
.topnav ul li.youtube a,
.topnav ul li.tiktok a,
.topnav ul li.pinterest a,
.topnav ul li.phone a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;height:22px;
    text-indent:-9999em;
    overflow:hidden;
    color:inherit;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
    margin-left:0.3rem;
    position:relative;
    top:2px;
}
.topnav ul li.mail a      { -webkit-mask-image:url('assets/img/icon-mail.svg'); mask-image:url('assets/img/icon-mail.svg'); }
.topnav ul li.linkedin a  { -webkit-mask-image:url('assets/img/icon-linkedin.svg'); mask-image:url('assets/img/icon-linkedin.svg'); }
.topnav ul li.facebook a  { -webkit-mask-image:url('assets/img/icon-facebook.svg'); mask-image:url('assets/img/icon-facebook.svg'); }
.topnav ul li.instagram a { -webkit-mask-image:url('assets/img/icon-instagram.svg'); mask-image:url('assets/img/icon-instagram.svg'); }
.topnav ul li.youtube a   { -webkit-mask-image:url('assets/img/icon-youtube.svg'); mask-image:url('assets/img/icon-youtube.svg'); }
.topnav ul li.tiktok a    { -webkit-mask-image:url('assets/img/icon-tiktok.svg'); mask-image:url('assets/img/icon-tiktok.svg'); }
.topnav ul li.pinterest a { -webkit-mask-image:url('assets/img/icon-pinterest.svg'); mask-image:url('assets/img/icon-pinterest.svg'); }
.topnav ul li.phone a     { -webkit-mask-image:url('assets/img/icon-phone.svg'); mask-image:url('assets/img/icon-phone.svg'); }
.header-main {
    display:flex;
    align-items:center;
    padding:10px 0;
}
#logo {
    margin-top:-30px;
    display:block;
    width:300px;height:112px;
    background-image:url('assets/img/logo-gearwurkje-color.svg');
    background-size:contain;
    background-position:left center;
    background-repeat:no-repeat;
    flex:0 0 auto;
}
#logo a {
    display:block;
    width:100%;height:100%;
    text-indent:-9999em;
}
nav {
    margin-left:auto;
    margin-right:var(--spacer-4);
}
nav ul {
    display:flex;
    align-items:center;
    gap:var(--spacer-4);
    list-style:none;
}
nav ul li {
    position:relative;
}
nav ul li a {
    position:relative;
    display:flex;
    align-items:center;
    padding:8px 0;
    color:var(--color-primary);
    font-size:1.2rem;
    font-weight:500;
    text-decoration:none;
    transition:scale .25s ease-in-out;
}
nav ul li a:hover {
    text-decoration:none;
    scale:1.05;
}
nav ul li a:after {
    content:"";
    position:absolute;
    left:0;right:0;
    bottom:0;
    height:2px;
    background-color:var(--color-tertiary);
    transform:scale(0,0);
    transform-origin:center;
    transition:transform 0.25s ease-in-out;
    pointer-events:none;
}
nav ul li.current-menu-item a:after,
nav ul li a:hover:after {
    transform:scale(1);
}
nav ul li ul {
    display:block;
    visibility:hidden;
    position:absolute;
    /* Iets omhoog (was +2px) zodat het paneel de oranje hover-lijn (nav ul li
       a:after, bottom:0 van de link) net overlapt/bedekt i.p.v. dat die lijn
       los "vloekt" tussen de menubalk en het geopende submenu. */
    /* -4px i.p.v. exact 0: geeft wat overlap-marge t.o.v. de linkerkant van
       de link eronder, anders kan er (afhankelijk van sub-pixel afronding)
       nog net een puntje van de oranje hover-lijn onder de paneelrand
       vandaan piepen. */
    top:calc(100% - 2px );left:-4px;
    background-color:var(--color-bg);
    min-width:260px;
    box-shadow:0 2px 10px rgba(0, 0, 0, .06);
}
nav > ul > li:hover > ul {
    visibility:visible;
}
nav ul li ul li {
    display:block;
}
nav ul li ul li a {
    padding:10px 20px;
    font-size:0.9rem;
    font-weight:400;
}
nav ul li ul li a:after {
    content:none;
}
nav ul li ul li.current-menu-item a,
nav ul li ul li a:hover {
    background-color:var(--color-primary-trans);
    scale:1;
}
nav ul li:last-child > ul {
    left:auto;
    /* Zelfde -4px overlap-marge als hierboven, nu aan de rechterkant. */
    right:-4px;
}
nav ul li:last-child > ul li a {
    /* Box staat rechts uitgelijnd (ivm buitenbeeld lopen); de linktekst zelf
       (in een display:flex-link) daarom ook rechts in die box i.p.v. links
       - anders "zweeft" de tekst los van de rechter menu-trigger erboven. */
    justify-content:flex-end;
}
.zoek-icoon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;height:40px;
    padding:0;
    border:0;
    background:none;
    color:var(--color-primary);
    flex:0 0 auto;
    cursor:pointer;
}
.zoek-icoon svg {
    width:26px;height:26px;
    fill:currentColor;
}
.mobile-menu {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;height:40px;
    text-indent:-9999em;
    flex:0 0 auto;
}
#naviIcon {
    position:relative;
    width:30px;height:20px;
    cursor:pointer;
}
#naviIcon span {
    display:block;
    position:absolute;
    left:0;
    height:3px;
    width:100%;
    background:var(--color-primary);
    opacity:1;
    transform:rotate(0deg);
    transition:.25s ease-in-out;
}
#naviIcon span:nth-child(1) {
    top:0;
}
#naviIcon span:nth-child(2),
#naviIcon span:nth-child(3) {
    top:10px;
}
#naviIcon span:nth-child(4) {
    top:20px;
}
#naviIcon.open span:nth-child(1) {
    top:8px;
    width:0%;
    left:50%;
    opacity:0;
}
#naviIcon.open span:nth-child(2) {
    transform:rotate(45deg);
}
#naviIcon.open span:nth-child(3) {
    transform:rotate(-45deg);
}
#naviIcon.open span:nth-child(4) {
    top:8px;
    width:0%;
    left:50%;
}
@media (max-width: 992px) {
    :root {

        --header-offset: 84px;
    }

    .topnav,
    nav {
        display:none;
    }
    header .content-wrapper {
        padding:0 var(--spacer-4);
    }

    .mobile-menu {
        margin-left:auto;
    }
    #logo {
        margin-top:0;
        width:200px;height:64px;
    }
}
.hero {
    position:relative;
    width:100%;

    margin-top:0;
}
.hero > .content-wrapper {

    display:block;
}
.hero .swiper {
    position:relative;
    width:100%;
    height:56vw;
    max-height:650px;
    min-height:400px;
}

.hero-static-bg {
    position:absolute;
    inset:0;
    z-index:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.hero .swiper-wrapper {
    position:relative;
    z-index:1;
}
.hero .swiper-slide {
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.hero-slide-bg {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.hero-inner {
    position:relative;
    z-index:2;
    width:100%;
    padding:0 clamp(var(--spacer-4), 6vw, var(--spacer-6));
}
.hero-content {
    max-width:600px;
}
.hero-title {
    color:#ffffff;
    font-size:clamp(2.2rem, 4.4vw, 3.52rem);
    line-height:1.25;
    text-transform:none;
    margin-bottom:var(--spacer-2);
    text-shadow:0 3px 8px rgba(0, 0, 0, 0.45);
}
.hero-title .word {
    display:inline-block;
    white-space:nowrap;
}
.hero-title .char {
    display:inline-block;
    opacity:0;
}

.swiper-slide-active .hero-title .char.typed {
    opacity:1;
}
.hero-cursor {
    display:inline-block;
    opacity:0;
    margin-left:2px;
    font-weight:300;
}

.swiper-slide-active .hero-cursor.visible {
    opacity:1;
}
.hero-subtitle {
    position:relative;
    display:inline-block;
    font-size:clamp(1.54rem, 2.64vw, 2.42rem);
    font-weight:300;
    color:#ffffff;
    opacity:0;
    margin-top:20px;
    padding-bottom:15px;
    text-shadow:0 3px 8px rgba(0, 0, 0, 0.45);
}
.swiper-slide-active .hero-subtitle.fade-in {
    animation:hero-fade-in .6s ease forwards;
}
@keyframes hero-fade-in {
    to { opacity:1; }
}
.hero-subtitle::after {
    content:"";
    position:absolute;
    left:0;bottom:0;
    height:4px;
    width:100%;
    background-color:var(--color-soft);
    transform:scaleX(0);
    transform-origin:left;
}
.swiper-slide-active .hero-subtitle.underline::after {
    animation:hero-underline .6s ease forwards;
}
@keyframes hero-underline {
    to { transform:scaleX(1); }
}
.hero .swiper-pagination-bullet {
    background:#ffffff;
    opacity:.6;
}
.hero .swiper-pagination-bullet-active {
    opacity:1;
    background:var(--color-soft);
}
.hero .swiper-button-prev,
.hero .swiper-button-next {
    color:#ffffff;
}
@media (prefers-reduced-motion: reduce) {
    .hero-title .char,
    .hero-subtitle,
    .hero-subtitle::after {
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
    }
    .hero-cursor {
        display:none !important;
    }
}
@media (max-width: 992px) {
    .hero .swiper {
        height:110vw;
        max-height:520px;
    }
    .hero-inner {
        padding:0 var(--padding-horizontal-small);
    }
}
.hero--small .swiper {
    height:32vw;
    max-height:400px;
    min-height:260px;
}
.hero--small .hero-content {
    max-width:520px;
}
.hero--small .hero-title {
    font-size:clamp(1.76rem, 3.3vw, 2.64rem);
    margin-bottom:var(--spacer-2);
    text-shadow:0 3px 8px rgba(0, 0, 0, 0.45);
}
.hero--small .hero-subtitle {
    font-size:clamp(1.21rem, 1.98vw, 1.76rem);
    margin-top:12px;
    padding-bottom:10px;
    text-shadow:0 3px 8px rgba(0, 0, 0, 0.45);
}
@media (max-width: 992px) {
    .hero--small .swiper {
        height:70vw;
        max-height:320px;
        min-height:220px;
    }
}

.media-text-block {
    position: relative;
}
.media-text-block .content-wrapper {
    position: relative;
    display: flow-root;
    min-height: clamp(400px, 56vw, 650px);
}
.media-text-block__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}
.media-text-block__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-text-block__card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    margin: var(--spacer-5) 0 var(--spacer-5) var(--spacer-5);
    padding: var(--spacer-5);
    background-color: var(--color-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
@media (max-width: 991.98px) {
    .media-text-block__card {
        max-width: 380px;
        margin: var(--spacer-4) 0 var(--spacer-4) var(--spacer-4);
        padding: var(--spacer-4);
    }
}

@media (max-width: 767.98px) {
    .media-text-block .content-wrapper {
        min-height: 60vw;
    }
    .media-text-block__card {
        max-width: none;
        width: calc(100% - var(--spacer-3) * 2);
        margin: var(--spacer-3) auto var(--spacer-3) var(--spacer-3);
        padding: var(--spacer-3);
    }
}

.logo-scroller-section .column {
    min-width: 0;
}

.logo-swiper {
    overflow: hidden;
    width: 100%;
    min-width: 0;
}

.logo-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
    align-items: center;
}

.logo-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-swiper .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.logo-swiper .swiper-slide img {
    display: block;
    max-height: clamp(48px, 6vw, 80px);
    padding: 0;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: all .25s ease-in-out;
}

.logo-swiper .swiper-slide a:hover img,
.logo-swiper .swiper-slide a:focus img,
.logo-swiper .swiper-slide img:hover {
    filter: none;
    opacity: 1;
}

.logo-swiper .swiper-slide img[src*="logo-provinsje-fryslan"] {
    transform: scale(0.7);
}
.logo-swiper .swiper-slide img[src*="logo-achtkarspelen"] {
    transform: scale(0.8);
}

@media (max-width: 767.98px) {
    .logo-swiper .swiper-slide img {
        max-height: clamp(40px, 12vw, 64px);
    }
}
footer {
    margin-top:var(--padding-vertical);
}
footer .columns {
    /* Als de opsommingen in kolom 1/2 (footer_kolom_1/2) vier items bevatten
       worden die hoger dan het logo (kolom 3) en de socials + "foar us regio"
       (kolom 4) - die twee blijven dan anders bovenaan "plakken". Verticaal
       centreren houdt alle vier de kolommen mooi op één lijn, ongeacht hoeveel
       items de lijstjes bevatten. */
    align-items: center;
}
footer h2 {
    color: var(--color-bg);
    font-size:1.8rem;
    font-weight:400;
}
#footer-logo {
    width: 250px;
    height: 80px;
}
#footer-logo a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999em;
    background-image: url('assets/img/logo-gearwurkje-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}
/* Subfootertekst (Thema opties > Footer) - dunne regel onderaan de footer
   zelf, los van de 4-koloms rij erboven. Kleur komt automatisch mee via de
   bestaande contrast-regel voor .bg-color-primary (zie hierboven), dus hier
   alleen de opmaak. */
.subfooter {
    border-top: 1px solid var(--color-bg-trans);
    margin-top: var(--spacer-4);
    padding: var(--spacer-3) 0;
    text-align: center;
    font-size: 0.875rem;
}
.subfooter p {
    margin: 0;
}

.project-detail-info-blok + .project-detail-info-blok {
    margin-top: var(--spacer-6);
}
.project-detail-gemeente-logo {
    width: 100%;
    height: auto;
}
.gerelateerde-projecten-intro {
    background-color: #eef2ee;
}

.project-titel {
    font-size: clamp(0.95rem, 5vw, 1.5rem);
    line-height: clamp(1.5rem, 6vw, 1.9rem);
    font-weight: 800;
}

.projecten-blok-grid {
    margin-top: var(--padding-vertical);
}

.projecten-blok-cta {
    padding-top: var(--spacer-2);
}

.bericht-titel {
    font-size: clamp(0.95rem, 5vw, 1.5rem);
    line-height: clamp(1.5rem, 6vw, 1.9rem);
    font-weight: 800;
}

.berichten-rijen {
    display: flex;
    flex-direction: column;
}

.bericht-rij + .bericht-rij {
    margin-top: var(--spacer-4);
    padding-top: var(--spacer-4);
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.weergave-toggle-rij {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacer-3);

    /* Was alleen padding-right - op mobiel (waar deze rij, met filters erbij,
       de volle breedte gebruikt) gaf dat rechts wel en links geen witruimte. */
    padding-left: var(--spacer-3);
    padding-right: var(--spacer-3);
}
.weergave-toggle {
    display: flex;
    gap: var(--spacer-1);
}
.weergave-toggle-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--color-primary-trans);
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.weergave-toggle-knop svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.weergave-toggle-knop:hover,
.weergave-toggle-knop:focus {
    background-color: var(--color-secondary);
    color: var(--color-bg);
}
.weergave-toggle-knop.is-actief {
    background-color: var(--color-secondary);
    color: var(--color-bg);
}

.weergave-rijen.columns[class*="columns-"] {
    grid-template-columns: 1fr;
    gap: 0;
}

#projecten-resultaten.weergave-rijen .column + .column,
#partners-resultaten.weergave-rijen .column + .column {
    margin-top: var(--spacer-4);
    padding-top: var(--spacer-4);
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.weergave-rijen .project-kaart-link {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0;
}
.weergave-rijen .project-kaart-link .gearwurkje-media-cover {
    height: 100%;
    min-height: 180px;
}
@media (max-width: 767.98px) {
    .weergave-rijen .project-kaart-link {
        grid-template-columns: 1fr;
    }
}

.weergave-blokken.berichten-resultaten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacer-5);
}
.weergave-blokken .bericht-rij + .bericht-rij {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.weergave-blokken .bericht-rij-link.columns {
    grid-template-columns: 1fr;
}
.weergave-blokken .bericht-rij-link .gearwurkje-media-cover {
    height: 240px;
}
@media (max-width: 767.98px) {
    .weergave-blokken.berichten-resultaten {
        grid-template-columns: 1fr;
    }
}

.andere-berichten h3 {
    font-size: 1rem;
    margin-bottom: var(--spacer-3);
}
.andere-berichten ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-4);
}

.andere-berichten li + li {
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding-top: var(--spacer-4);
}
.andere-berichten li a {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    background-color: var(--color-primary-trans);
    transition: background-color .2s ease-in-out;
}

.andere-berichten li a:hover,
.andere-berichten li a:focus {
    text-decoration: none;
    background-color: transparent;
}
.andere-berichten li a .gearwurkje-media-cover--zijbalk {
    height: 160px;
}
.andere-berichten-item-tekst {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-1);
    padding: var(--spacer-3);
}
.andere-berichten-titel {
    font-weight: 800;
}
.andere-berichten-tekst {
    font-size: 0.9rem;
}

.andere-berichten-lijst {
    transition: opacity .2s ease-in-out;
}
.andere-berichten.is-loading .andere-berichten-lijst {
    opacity: .4;
}
.andere-berichten-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer-3);
    margin: var(--spacer-5) auto 0;
}
.andere-berichten-pager-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--color-secondary);
    color: var(--color-bg);
    cursor: pointer;
    transition: background-color .2s ease-in-out, opacity .2s ease-in-out;
}
.andere-berichten-pager-knop::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
    mask: url('assets/img/icon-arrow.svg') center / contain no-repeat;
}
.andere-berichten-pager-vorige::after {
    transform: scaleX(-1);
}
.andere-berichten-pager-knop:hover:not(:disabled),
.andere-berichten-pager-knop:focus:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--color-bg);
}
.andere-berichten-pager-knop:disabled {
    background-color: var(--color-primary-trans);
    color: var(--color-bg);
    opacity: .35;
    cursor: default;
}
.andere-berichten-pager-status {
    min-width: 2.5em;
    font-size: 0.9rem;
    text-align: center;
}

.gallery .columns {
    gap: var(--spacer-2);
}
.galleryImg {
    display: block;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary-trans);
    cursor: pointer;
    transition: opacity .2s ease-in-out;
}
.galleryImg:hover,
.galleryImg:focus {
    opacity: .85;
}

/* --- Ninja Forms - basisopmaak ---------------------------------------
   Ninja Forms laadt zelf alleen zijn structuur-CSS (display-structure.css),
   geen visuele template, dus formulieren (bv. het contactformulier) kwamen
   zonder deze regels met kale browser-standaardstijl op de pagina (Arial,
   inset-rand om de velden, "outset"-knop). Deze regels gelden voor elk
   Ninja Forms-formulier op de site, niet alleen het contactformulier. */
.nf-form-title h3 {
    margin-bottom: var(--spacer-2);
}
.nf-form-fields-required {
    margin-bottom: var(--spacer-4);
    font-size: 0.9rem;
    opacity: .75;
    text-align: right;
}
.nf-field-container {
    margin-bottom: var(--spacer-4);
}
.nf-field-label label {
    display: block;
    margin-bottom: var(--spacer-1);
    font-size: 0.9rem;
}
.nf-field-element input.ninja-forms-field,
.nf-field-element textarea.ninja-forms-field {
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacer-2) var(--spacer-3);
    border: 1px solid var(--color-primary-trans);
    border-radius: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 1rem;
    transition: border-color .2s ease-in-out;
}
.nf-field-element textarea.ninja-forms-field {
    min-height: 160px;
    resize: vertical;
}
.nf-field-element input.ninja-forms-field:hover,
.nf-field-element textarea.ninja-forms-field:hover {
    border-color: var(--color-secondary);
}
.nf-field-element input.ninja-forms-field:focus,
.nf-field-element textarea.ninja-forms-field:focus {
    outline: none;
    border-color: var(--color-secondary);
}
.nf-error-wrap.nf-error:not(:empty) {
    margin-top: var(--spacer-1);
}
/* Foutmeldingen (bv. "Dit is een vereist veld." per veld, en de algemene
   "Corrigeer de fouten..." bovenaan) in een lichtrode box - .nf-error-msg is
   de gedeelde klasse die Ninja Forms op beide gebruikt (bevestigd via de
   werkende site: #nf-error-1 .nf-error-msg.nf-error-required-error en
   .nf-form-errors .nf-error-msg.nf-error-field-errors). */
.nf-error-msg {
    display: inline-block;
    padding: var(--spacer-1) var(--spacer-2);
    background-color: #fdecea;
    color: #c0392b;
    font-size: 0.85rem;
}
.nf-form-errors:not(:empty) {
    margin-bottom: var(--spacer-4);
}
input[type="submit"].ninja-forms-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 52px;
    padding: 0 var(--spacer-5);
    border: 0;
    border-radius: 0;
    background-color: var(--color-secondary);
    color: var(--color-bg);
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all .25s ease-in-out;
}
input[type="submit"].ninja-forms-field:hover,
input[type="submit"].ninja-forms-field:focus {
    scale: 1.03;
}