/* ============================================================
   FR MODERN — style.css
   ============================================================ */

:root {

/* @group Basis*/
/* @group Basis/kleuren*/
--kleur-ink: #2a2430;
--kleur-muted: rgba(42, 36, 48, 0.58);
--kleur-purple: #581090;
--kleur-purple-deep: #800080;
--kleur-purple-soft: rgba(98, 36, 155, 0.10);
--kleur-purple-line: rgba(88, 16, 144, 0.28);
--kleur-accent: #f60000;
--kleur-accent-deep: #b3120d;
--kleur-paper: #fcfbf9;
--kleur-mild: #eae6e1;
--kleur-rule: rgba(42, 36, 48, 0.16);
--kleur-wit: #ffffff;

/* @group Basis/ruimte (4px-schaal)*/
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;

/* @group Basis/schaduw*/
--shadow-sm: 0 1px 2px rgba(45, 43, 43, 0.14);
--shadow-md: 0 4px 14px rgba(45, 43, 43, 0.16);
--shadow-lg: 0 14px 36px rgba(45, 43, 43, 0.22);

/* @group Header*/
/* @group Header/header*/
--header-color: var(--kleur-purple);
--header-background: var(--kleur-purple-soft);
--header-backgroundsize: cover;
--header-width: 100%;
--header-height: auto;
--header-position: relative;
--header-margin: 0;
--header-boxsizing: border-box;
--header-borderradius: var(--wrapper-borderradius) var(--wrapper-borderradius) 0 0;
--header-padding: var(--space-6) var(--space-8);
--header-display: grid;
--header-gridtempcols: minmax(120px, 1fr) auto 1fr;
--header-gap: var(--space-6);
--header-alignitems: center;
--header-logo-width: 84px;
--header-media-gridtemplatecols: auto 1fr;
--header-media-padding: var(--space-3);
--header-media-background: var(--kleur-purple-soft);
--header-media-backgroundsize: var(--header-backgroundsize);
/* @group Header/sitenaam*/
--sitenaam-fontfamily: 'Merienda';
--sitenaam-fontsize: 26px;
--sitenaam-color: var(--kleur-purple-deep);
--sitenaam-lineheight: 1.2;
--sitenaam-media-fontsize: 18px;
--tagline-fontfamily: 'Lato';
--tagline-fontsize: 12px;
--tagline-letterspacing: 0.18em;
--tagline-texttransform: uppercase;
--tagline-color: var(--kleur-purple);
--tagline-margintop: 6px;
/* @group Header/header bottom*/
--headerbottom-background: linear-gradient(rgba(98, 36, 155, 0.10), rgba(98, 36, 115, 0));
--headerbottom-height: 16px;
--headerbottom-padding: 0;

/* @group Footer*/
/* @group Footer/footer*/
--footer-color: var(--kleur-purple);
--footer-background: var(--kleur-purple-soft);
--footer-width: 100%;
--footer-minheight: 100px;
--footer-boxsizing: border-box;
--footer-borderradius: 0 0 var(--wrapper-borderradius) var(--wrapper-borderradius);
--footer-padding: var(--space-6) 25px;
--footer-textalign: center;
--footer-fontsize: 12px;
--footer-lineheight: 1.55;
--footer-textcolor: var(--kleur-ink);
--footer-maxwidth: 920px;
--footer-media-padding: var(--space-6) var(--space-3);
/* @group Footer/footer top*/
--footertop-background: linear-gradient(rgba(98, 36, 155, 0), rgba(98, 36, 115, 0.10));
--footertop-height: 20px;
--footertop-padding: 0;

/* @group Headings*/
/* @group Headings/H1*/
--h1-fontfamily: 'Merienda';
--h1-fontsize: 48px;
--h1-fontweight: 700;
--h1-textcolor: var(--kleur-purple-deep);
--h1-textshadow: 2px 6px 9px #cfc7d4;
--h1-margin: 0 0 var(--space-3) 0;
--h1-lineheight: 1.2;
--h1-textalign: center;
--h1-media-fontsize: 28px;
/* @group Headings/H2*/
--h2-fontfamily: 'Noto Sans';
--h2-fontsize: 34px;
--h2-fontweight: 600;
--h2-textcolor: var(--kleur-purple-deep);
--h2-textshadow: 2px 6px 9px #d6ccdc;
--h2-margin: 0 0 var(--space-8) 0;
--h2-lineheight: 1.2;
--h2-letterspacing: 0.06em;
--h2-media-fontsize: 22px;
/* @group Headings/H3*/
--h3-fontfamily: 'Noto Sans';
--h3-fontsize: 24px;
--h3-fontweight: 600;
--h3-textcolor: var(--kleur-purple);
--h3-textshadow: 2px 4px 9px #ddd5e2;
--h3-margin: 0 0 var(--space-6) 0;
--h3-lineheight: 1.2;
--h3-textalign: center;
--h3-media-fontsize: 18px;
/* @group Headings/H4*/
--h4-fontfamily: 'Roboto';
--h4-fontsize: 22px;
--h4-fontweight: 600;
--h4-textcolor: var(--kleur-purple-deep);
--h4-textshadow: ;
--h4-margin: 0 0 var(--space-2) 0;
--h4-lineheight: 1.3;
--h4-media-fontsize: 17px;
/* @group Headings/H5*/
--h5-fontfamily: 'Roboto';
--h5-fontsize: 17px;
--h5-fontweight: 600;
--h5-textcolor: var(--kleur-purple);
--h5-margin: 0 0 var(--space-2) 0;
--h5-media-fontsize: 15px;
/* @group Headings/H6*/
--h6-fontfamily: 'Roboto';
--h6-fontsize: 11px;
--h6-fontweight: 700;
--h6-textcolor: var(--kleur-accent-deep);
--h6-letterspacing: 0.2em;
--h6-texttransform: uppercase;
--h6-margin: 0 0 var(--space-4) 0;
--h6-media-fontsize: 10px;

/* @group Navigation menu*/
/* @group Navigation menu/menu balk*/
--menu-box-background: var(--kleur-paper);
--menu-box-padding: 0 var(--space-8);
--menu-box-borderbottom: 2px solid var(--kleur-purple-line);
--menu-box-gap: var(--space-8);
--menu-box-justify: flex-start;
/* @group Navigation menu/menu knop*/
--menu-parent-fontfamily: 'Lato';
--menu-parent-fontsize: 14px;
--menu-parent-fontweight: 400;
--menu-parent-color: var(--kleur-purple-deep);
--menu-parent-padding: 18px 0;
--menu-parent-letterspacing: 0.12em;
--menu-parent-texttransform: uppercase;
--menu-parent-textdecoration: none;
--menu-parent-hovercolor: var(--kleur-accent);
--menu-parent-current-color: var(--kleur-purple-deep);
/* @group Navigation menu/indicator (meebewegende onderstreep)*/
--menu-indicator-height: 3px;
--menu-indicator-background: var(--kleur-accent);
--menu-indicator-transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1);
/* @group Navigation menu/submenu*/
--menu-sub-background: var(--kleur-wit);
--menu-sub-boxshadow: var(--shadow-md);
--menu-sub-minwidth: 200px;
--menu-sub-a-fontsize: 13px;
--menu-sub-a-padding: 11px var(--space-4);
--menu-sub-a-color: var(--kleur-purple-deep);
--menu-sub-a-hovercolor: var(--kleur-wit);
--menu-sub-a-hoverbackground: var(--kleur-purple-deep);
--menu-sub-a-border: 1px solid var(--kleur-rule);
/* @group Navigation menu/zoekveld*/
--zoek-fontsize: 12px;
--zoek-color: var(--kleur-ink);
--zoek-background: transparent;
--zoek-border: 0;
--zoek-borderbottom: 1px solid var(--kleur-rule);
--zoek-padding: 6px 2px;
--zoek-width: 130px;
--zoek-focus-borderbottom: 1px solid var(--kleur-accent);
/* @group Navigation menu/mobiele knop*/
--menu-button-color: var(--kleur-purple-deep);
--menu-button-background: var(--kleur-paper);
--menu-button-padding: 16px var(--space-4);
--menu-button-fontsize: 13px;
/* @group Navigation menu/breadcrumbs*/
--breadcrumb-padding: var(--space-4) var(--space-8) 0;
--breadcrumb-fontsize: 12px;
--breadcrumb-letterspacing: 0.04em;
--breadcrumb-color: var(--kleur-muted);
--breadcrumb-a-color: var(--kleur-accent-deep);
--breadcrumb-a-hovercolor: var(--kleur-accent);
--breadcrumb-current-color: var(--kleur-purple-deep);
--breadcrumb-scheiding-color: var(--kleur-purple-line);

/* @group Language menu*/
--langmenu-justifyself: end;
--langmenu-display: flex;
--langmenu-alignitems: center;
--langmenu-gap: var(--space-3);
--langmenu-fontsize: 12px;
--langmenu-background: var(--kleur-wit);
--langmenu-padding: 7px var(--space-4);
--langmenu-borderradius: 999px;
--langmenu-boxshadow: var(--shadow-md);
--langmenu-a-color: rgba(42, 36, 48, 0.62);
--langmenu-current-color: var(--kleur-purple-deep);
--langmenu-current-fontweight: 700;
--langmenu-current-borderbottom: 2px solid var(--kleur-accent);
--langmenu-scheiding-color: rgba(42, 36, 48, 0.30);
--langmenu-login-fontsize: 11px;
--langmenu-login-color: var(--kleur-purple-deep);
--langmenu-login-letterspacing: 0.06em;
--langmenu-login-texttransform: uppercase;
--langmenu-media-gridcolumn: 1 / 3;

/* @group Body*/
--body-fontfamily: 'Lato', sans-serif;
--body-fontsize: 16px;
--body-color: var(--kleur-ink);
--body-background: var(--kleur-mild);
--body-lineheight: 1.7;
--body-margin: 0;
--body-padding: 0;
/* @group Body/kolommen*/
--body-columns-GapWidth: var(--space-8);
--body-columns-LeftWidth: 20fr;
--body-columns-MiddleWidth: 60fr;
--body-columns-RightWidth: 20fr;
--body-columns-mobileMiddleOrder: 1;
--body-columns-mobileLeftOrder: 2;
--body-columns-mobileRightOrder: 3;
/* @group Body/content*/
--content-padding: var(--space-1) var(--space-16) var(--space-16);
--content-media-padding: var(--space-8) var(--space-4) var(--space-12);

/* @group Wrapper*/
--wrapper-maxwidth: 1340px;
--wrapper-width: 94%;
--wrapper-margin: 30px auto;
--wrapper-background: var(--kleur-paper);
--wrapper-position: relative;
--wrapper-zindex: 300;
--wrapper-boxshadow: 0 0 60px rgba(90, 80, 100, 0.28);
--wrapper-borderradius: 30px;
--wrapper-display: flex;
--wrapper-flexdirection: column;
--wrapper-minheight: calc(100dvh - 60px);
--wrapper-overflow: hidden;
--wrapper-media-margin: 0 auto;
--wrapper-media-width: 100%;
--wrapper-media-boxshadow: none;
--wrapper-media-borderradius: 0;

/* @group Links*/
--link-fontfamily: 'Lato';
--link-fontweight: 400;
--link-color: var(--kleur-accent-deep);
--link-textdecoration: none;
--link-borderbottom: 1px solid rgba(179, 18, 13, 0.35);
--link-hover-color: var(--kleur-accent);
--link-hover-borderbottom: 1px solid var(--kleur-accent);
--link-visited-color: var(--kleur-purple);

/* @group Buttons*/
--button-1-fontfamily: 'Lato';
--button-1-fontsize: 14px;
--button-1-letterspacing: 0.06em;
--button-1-color: var(--kleur-wit);
--button-1-backgroundcolor: var(--kleur-purple-deep);
--button-1-padding: 12px 26px;
--button-1-borderradius: 999px;
--button-1-border: none;
--button-1-boxshadow: var(--shadow-sm);
--button-1-hover-backgroundcolor: var(--kleur-accent);
--button-1-hover-color: var(--kleur-wit);
--button-1-active-transform: translateY(1px);
--button-2-fontfamily: 'Lato';
--button-2-fontsize: 12px;
--button-2-letterspacing: 0.1em;
--button-2-texttransform: uppercase;
--button-2-color: var(--kleur-purple-deep);
--button-2-backgroundcolor: transparent;
--button-2-border: 1px solid var(--kleur-purple-line);
--button-2-padding: 9px 16px;
--button-2-borderradius: 999px;
--button-2-hover-color: var(--kleur-wit);
--button-2-hover-backgroundcolor: var(--kleur-purple-deep);

/* @group Foto's*/
--foto-boxshadow: var(--shadow-md);
--foto-hover-boxshadow: var(--shadow-lg);
--foto-hover-transform: translateY(-2px);
--foto-transition: box-shadow .25s ease, transform .25s ease;
--foto-border: 0;
--foto-borderradius: 0;
--caption-fontsize: 12px;
--caption-lineheight: 1.5;
--caption-color: var(--kleur-muted);
--caption-margintop: var(--space-3);
--caption-textalign: left;

/* @group Blokken*/
--blok-marge-onder: var(--space-12);
--grid-gap: var(--space-8);
--masonry-kolommen: 3;
--masonry-gap: var(--space-8);
--banner-height: 280px;
--sectiekop-lijn-dikte: 2px;
--sectiekop-lijn-kleur: var(--kleur-purple-line);
--sectiekop-gap: var(--space-6);
--intro-maxwidth: 720px;
--mediablok-kolommen: 1fr 400px;
--mediablok-gap: var(--space-12);
--contact-background: var(--kleur-purple-soft);
--contact-padding: var(--space-12);
--hr-background: var(--kleur-purple-line);
--hr-height: 2px;
--hr-margin: var(--space-8) 0;

/* @group Lightbox*/
--lightbox-background: rgba(24, 18, 28, 0.94);
--lightbox-padding: 48px;
--lightbox-img-maxwidth: 86%;
--lightbox-img-maxheight: 72vh;
--lightbox-img-boxshadow: 0 24px 70px rgba(0, 0, 0, 0.55);
--lightbox-cap-color: var(--kleur-wit);
--lightbox-cap-fontsize: 14px;
--lightbox-zindex: 9999;

/* @group Naar boven*/
--naarboven-fontsize: 11px;
--naarboven-letterspacing: 0.1em;
--naarboven-texttransform: uppercase;
--naarboven-color: var(--kleur-purple-deep);
--naarboven-border: 1px solid var(--kleur-purple-line);
--naarboven-padding: 8px 14px;
--naarboven-borderradius: 999px;
--naarboven-hover-color: var(--kleur-wit);
--naarboven-hover-background: var(--kleur-purple-deep);
--naarboven-offset: var(--space-6);

/* @group Responsive*/
--breakpoint-tablet: 900px;
--breakpoint-mobiel: 700px;

}

html { height: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------- */
/*         PAGE SETTINGS        */
/* ---------------------------- */

body {
font-family: var(--body-fontfamily);
font-size: var(--body-fontsize);
color: var(--body-color);
background: var(--body-background);
line-height: var(--body-lineheight);
margin: var(--body-margin);
padding: var(--body-padding);
-webkit-font-smoothing: antialiased;
text-wrap: pretty;
}

.wrapper {
max-width: var(--wrapper-maxwidth);
width: var(--wrapper-width);
margin: var(--wrapper-margin);
background: var(--wrapper-background);
position: var(--wrapper-position);
z-index: var(--wrapper-zindex);
box-shadow: var(--wrapper-boxshadow);
border-radius: var(--wrapper-borderradius);
display: var(--wrapper-display);
flex-direction: var(--wrapper-flexdirection);
min-height: var(--wrapper-minheight);
overflow: var(--wrapper-overflow);
}

.fulltop { padding: var(--space-4) var(--space-16) 0; }
.fullbottom { clear: both; padding: 0 var(--space-16); }
.content { padding: var(--content-padding); }

/* ---------------------------- */
/*           HEADINGS           */
/* ---------------------------- */

h1 {
font-family: var(--h1-fontfamily);
font-size: var(--h1-fontsize);
font-weight: var(--h1-fontweight);
color: var(--h1-textcolor);
text-shadow: var(--h1-textshadow);
margin: var(--h1-margin);
line-height: var(--h1-lineheight);
text-align: var(--h1-textalign);
}
h2 {
font-family: var(--h2-fontfamily);
font-size: var(--h2-fontsize);
font-weight: var(--h2-fontweight);
color: var(--h2-textcolor);
text-shadow: var(--h2-textshadow);
margin: var(--h2-margin);
line-height: var(--h2-lineheight);
letter-spacing: var(--h2-letterspacing);
}
h3 {
font-family: var(--h3-fontfamily);
font-size: var(--h3-fontsize);
font-weight: var(--h3-fontweight);
color: var(--h3-textcolor);
text-shadow: var(--h3-textshadow);
margin: var(--h3-margin);
line-height: var(--h3-lineheight);
text-align: var(--h3-textalign);
}
h4 {
font-family: var(--h4-fontfamily);
font-size: var(--h4-fontsize);
font-weight: var(--h4-fontweight);
color: var(--h4-textcolor);
text-shadow: var(--h4-textshadow);
margin: var(--h4-margin);
line-height: var(--h4-lineheight);
}
h5 {
font-family: var(--h5-fontfamily);
font-size: var(--h5-fontsize);
font-weight: var(--h5-fontweight);
color: var(--h5-textcolor);
margin: var(--h5-margin);
}
h6 {
font-family: var(--h6-fontfamily);
font-size: var(--h6-fontsize);
font-weight: var(--h6-fontweight);
color: var(--h6-textcolor);
letter-spacing: var(--h6-letterspacing);
text-transform: var(--h6-texttransform);
margin: var(--h6-margin);
}

/* ---------------------------- */
/*            HEADER            */
/* ---------------------------- */

.header {
color: var(--header-color);
background: var(--header-background);
background-size: var(--header-backgroundsize);
width: var(--header-width);
height: var(--header-height);
position: var(--header-position);
margin: var(--header-margin);
box-sizing: var(--header-boxsizing);
border-radius: var(--header-borderradius);
padding: var(--header-padding);
display: var(--header-display);
grid-template-columns: var(--header-gridtempcols);
gap: var(--header-gap);
align-items: var(--header-alignitems);
}
.header .logopic { justify-self: start; display: block; }
.header .logopic img { display: block; width: var(--header-logo-width); height: auto; }

.sitenaam { text-align: center; }
.sitenaam strong {
display: block;
font-family: var(--sitenaam-fontfamily);
font-size: var(--sitenaam-fontsize);
font-weight: 400;
color: var(--sitenaam-color);
line-height: var(--sitenaam-lineheight);
}
.sitenaam span {
display: block;
font-family: var(--tagline-fontfamily);
font-size: var(--tagline-fontsize);
letter-spacing: var(--tagline-letterspacing);
text-transform: var(--tagline-texttransform);
color: var(--tagline-color);
margin-top: var(--tagline-margintop);
}

.headerbottom {
clear: both;
height: var(--headerbottom-height);
background: var(--headerbottom-background);
padding: var(--headerbottom-padding);
}

/* ---------------------------- */
/*        LANGUAGE MENU         */
/* ---------------------------- */

.langmenu {
justify-self: var(--langmenu-justifyself);
display: var(--langmenu-display);
align-items: var(--langmenu-alignitems);
gap: var(--langmenu-gap);
font-size: var(--langmenu-fontsize);
background: var(--langmenu-background);
padding: var(--langmenu-padding);
border-radius: var(--langmenu-borderradius);
box-shadow: var(--langmenu-boxshadow);
}
.langmenu .talen { display: flex; align-items: center; gap: 6px; }
.langmenu .talen a { color: var(--langmenu-a-color); border: 0; }
.langmenu .talen a.actief {
color: var(--langmenu-current-color);
font-weight: var(--langmenu-current-fontweight);
border-bottom: var(--langmenu-current-borderbottom);
padding-bottom: 1px;
}
.langmenu .talen span { color: var(--langmenu-scheiding-color); }
.langmenu .scheiding { width: 1px; height: 14px; background: var(--kleur-rule); }
.langmenu .login {
font-size: var(--langmenu-login-fontsize);
color: var(--langmenu-login-color);
letter-spacing: var(--langmenu-login-letterspacing);
text-transform: var(--langmenu-login-texttransform);
border: 0;
}

/* ---------------------------- */
/*            FOOTER            */
/* ---------------------------- */

.footertop {
clear: both;
height: var(--footertop-height);
background: var(--footertop-background);
padding: var(--footertop-padding);
}
.footer {
clear: both;
color: var(--footer-color);
background: var(--footer-background);
width: var(--footer-width);
min-height: var(--footer-minheight);
box-sizing: var(--footer-boxsizing);
border-radius: var(--footer-borderradius);
padding: var(--footer-padding);
display: grid;
align-content: center;
justify-items: center;
}
.footer p {
margin: 0;
max-width: var(--footer-maxwidth);
text-align: var(--footer-textalign);
font-size: var(--footer-fontsize);
line-height: var(--footer-lineheight);
color: var(--footer-textcolor);
}
.footer a { color: var(--footer-textcolor); }

/* ---------------------------- */
/*             MENU             */
/* ---------------------------- */
/* Werkt op de bestaande menu-uitvoer van de CMS:
   #cssmenu > ul > li > a, met klassen menu-current / menu-parent /
   has-sub. De onderstreep-indicator wordt door template.js
   toegevoegd en verplaatst.                                     */

#cssmenu {
position: relative;
display: flex;
align-items: center;
justify-content: var(--menu-box-justify);
gap: var(--menu-box-gap);
padding: var(--menu-box-padding);
background: var(--menu-box-background);
border-bottom: var(--menu-box-borderbottom);
font-family: var(--menu-parent-fontfamily);
}
#cssmenu > ul {
display: flex;
align-items: center;
gap: var(--menu-box-gap);
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li { position: relative; list-style: none; padding: 0; }
#cssmenu > ul > li > a {
display: block;
font-size: var(--menu-parent-fontsize);
font-weight: var(--menu-parent-fontweight);
color: var(--menu-parent-color);
padding: var(--menu-parent-padding);
letter-spacing: var(--menu-parent-letterspacing);
text-transform: var(--menu-parent-texttransform);
text-decoration: var(--menu-parent-textdecoration);
border: 0;
white-space: nowrap;
}
#cssmenu > ul > li > a:hover { color: var(--menu-parent-hovercolor); }
#cssmenu > ul > li.menu-current > a,
#cssmenu > ul > li.menu-parent > a { color: var(--menu-parent-current-color); }

/* de meebewegende onderstreep */
.menu-indicator {
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: var(--menu-indicator-height);
background: var(--menu-indicator-background);
transition: var(--menu-indicator-transition);
pointer-events: none;
}

/* submenu */
#cssmenu ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: var(--menu-sub-minwidth);
margin: 0;
padding: 0;
list-style: none;
background: var(--menu-sub-background);
box-shadow: var(--menu-sub-boxshadow);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
z-index: 400;
}
#cssmenu > ul > li:hover > ul,
#cssmenu > ul > li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
#cssmenu ul ul li { list-style: none; padding: 0; }
#cssmenu ul ul li a {
display: block;
font-size: var(--menu-sub-a-fontsize);
padding: var(--menu-sub-a-padding);
color: var(--menu-sub-a-color);
border: 0;
border-bottom: var(--menu-sub-a-border);
}
#cssmenu ul ul li:last-child > a { border-bottom: 0; }
#cssmenu ul ul li a:hover {
color: var(--menu-sub-a-hovercolor);
background: var(--menu-sub-a-hoverbackground);
}

/* zoekveld in de menubalk */
#cssmenu .zoekbox { margin-left: auto; display: flex; align-items: center; }
#cssmenu .zoekbox input {
font-family: var(--body-fontfamily);
font-size: var(--zoek-fontsize);
color: var(--zoek-color);
background: var(--zoek-background);
border: var(--zoek-border);
border-bottom: var(--zoek-borderbottom);
padding: var(--zoek-padding);
width: var(--zoek-width);
outline: none;
}
#cssmenu .zoekbox input:focus { border-bottom: var(--zoek-focus-borderbottom); }

#cssmenu #menu-button { display: none; }

/* ---------------------------- */
/*         BREADCRUMBS          */
/* ---------------------------- */

.breadcrumbs {
padding: var(--breadcrumb-padding);
font-size: var(--breadcrumb-fontsize);
letter-spacing: var(--breadcrumb-letterspacing);
color: var(--breadcrumb-color);
}
.breadcrumbs a { color: var(--breadcrumb-a-color); border: 0; }
.breadcrumbs a:hover { color: var(--breadcrumb-a-hovercolor); }
.breadcrumbs .menu-current { color: var(--breadcrumb-current-color); }
.breadcrumbs .scheiding { color: var(--breadcrumb-scheiding-color); }

/* ---------------------------- */
/*            LINKS             */
/* ---------------------------- */

a {
font-family: var(--link-fontfamily);
font-weight: var(--link-fontweight);
color: var(--link-color);
text-decoration: var(--link-textdecoration);
}
.content p a,
.fr-intro a { border-bottom: var(--link-borderbottom); }
a:hover { color: var(--link-hover-color); }
.content p a:hover { border-bottom: var(--link-hover-borderbottom); }
a:focus-visible { outline: 2px solid var(--kleur-accent); outline-offset: 2px; }

/* ---------------------------- */
/*           BUTTONS            */
/* ---------------------------- */

.button1 {
display: inline-block;
font-family: var(--button-1-fontfamily);
font-size: var(--button-1-fontsize);
letter-spacing: var(--button-1-letterspacing);
color: var(--button-1-color);
background: var(--button-1-backgroundcolor);
padding: var(--button-1-padding);
border: var(--button-1-border);
border-radius: var(--button-1-borderradius);
box-shadow: var(--button-1-boxshadow);
cursor: pointer;
white-space: nowrap;
}
.button1:hover { background: var(--button-1-hover-backgroundcolor); color: var(--button-1-hover-color); }
.button1:active { transform: var(--button-1-active-transform); }

.button2 {
display: inline-block;
font-family: var(--button-2-fontfamily);
font-size: var(--button-2-fontsize);
letter-spacing: var(--button-2-letterspacing);
text-transform: var(--button-2-texttransform);
color: var(--button-2-color);
background: var(--button-2-backgroundcolor);
border: var(--button-2-border);
padding: var(--button-2-padding);
border-radius: var(--button-2-borderradius);
cursor: pointer;
}
.button2:hover { color: var(--button-2-hover-color); background: var(--button-2-hover-backgroundcolor); }

/* ---------------------------- */
/*            IMAGES            */
/* ---------------------------- */

img { max-width: 100%; height: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }
figure img {
display: block;
width: 100%;
height: auto;
border: var(--foto-border);
border-radius: var(--foto-borderradius);
box-shadow: var(--foto-boxshadow);
transition: var(--foto-transition);
}
figcaption {
margin-top: var(--caption-margintop);
font-size: var(--caption-fontsize);
line-height: var(--caption-lineheight);
color: var(--caption-color);
text-align: var(--caption-textalign);
}
figure[data-lightbox] { cursor: zoom-in; }
figure[data-lightbox]:hover img {
box-shadow: var(--foto-hover-boxshadow);
transform: var(--foto-hover-transform);
}

/* ---------------------------- */
/*      PAGINA BLOKKEN          */
/* ---------------------------- */

/* kop + intro tekst */
.fr-intro { max-width: var(--intro-maxwidth); margin: 0 auto var(--blok-marge-onder); text-align: center; }
.fr-intro.links { margin-left: 0; text-align: left; }

/* beeld + tekst naast elkaar */
.fr-media {
display: grid;
grid-template-columns: var(--mediablok-kolommen);
gap: var(--mediablok-gap);
align-items: start;
margin-bottom: var(--blok-marge-onder);
}
.fr-media.beeld-links { grid-template-columns: 400px 1fr; }
.fr-media.beeld-links figure { order: -1; }
.fr-media p:first-child { margin-top: 0; }

/* sectiekop met scheidingslijnen */
.fr-sectiekop {
display: flex;
align-items: center;
gap: var(--sectiekop-gap);
margin: 0 0 var(--blok-marge-onder);
}
.fr-sectiekop::before,
.fr-sectiekop::after {
content: "";
flex: 1;
height: var(--sectiekop-lijn-dikte);
background: var(--sectiekop-lijn-kleur);
}
.fr-sectiekop.links::before { display: none; }

/* fotogrids */
.fr-grid-2,
.fr-grid-3,
.fr-grid-4 { display: grid; gap: var(--grid-gap); margin-bottom: var(--blok-marge-onder); }
.fr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* masonry / metselverband */
.fr-masonry {
column-count: var(--masonry-kolommen);
column-gap: var(--masonry-gap);
margin-bottom: var(--blok-marge-onder);
}
.fr-masonry.kolommen-4 { column-count: 4; }
.fr-masonry figure { break-inside: avoid; margin: 0 0 var(--masonry-gap); }

/* volle breedte beeld / banner */
.fr-banner {
height: var(--banner-height);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: var(--blok-marge-onder);
}
.fr-banner img { width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
.fr-volle-breedte { margin-bottom: var(--blok-marge-onder); }
.fr-volle-breedte figcaption { text-align: center; }

/* contact / mailblok */
.fr-contact {
background: var(--contact-background);
padding: var(--contact-padding);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-8);
align-items: center;
}
.fr-contact p { margin: 0; max-width: 520px; font-size: 15px; }

/* horizontale lijn */
hr, .fr-hr {
border: 0;
height: var(--hr-height);
background: var(--hr-background);
margin: var(--hr-margin);
}

/* ---------------------------- */
/*           KOLOMMEN           */
/* ---------------------------- */

.frrows {
flex: 1;
display: grid;
grid-template-columns: var(--body-columns-LeftWidth) var(--body-columns-MiddleWidth) var(--body-columns-RightWidth);
gap: var(--body-columns-GapWidth);
}
.col--a-b-c, .col--a-b, .col--b-c, .col--a, .col--b, .col--c { min-width: 0; }
.col--a-b-c { grid-column: 1 / span 3; }
.col--a-b { grid-column: 1 / span 2; }
.col--b-c { grid-column: 2 / span 2; }
.col--a { grid-column: 1; }
.col--b { grid-column: 2; }
.col--c { grid-column: 3; }

/* ---------------------------- */
/*          LIGHTBOX            */
/* ---------------------------- */

.fr-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: var(--lightbox-zindex);
background: var(--lightbox-background);
align-items: center;
justify-content: center;
flex-direction: column;
gap: 18px;
padding: var(--lightbox-padding);
cursor: zoom-out;
}
.fr-lightbox.open { display: flex; }
.fr-lightbox img {
max-width: var(--lightbox-img-maxwidth);
max-height: var(--lightbox-img-maxheight);
width: auto;
box-shadow: var(--lightbox-img-boxshadow);
}
.fr-lightbox p {
margin: 0;
color: var(--lightbox-cap-color);
font-size: var(--lightbox-cap-fontsize);
text-align: center;
max-width: 640px;
}
.fr-lightbox .hint {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}

/* ---------------------------- */
/*          NAAR BOVEN          */
/* ---------------------------- */

.fr-naarboven {
display: flex;
justify-content: flex-end;
padding: 0 var(--space-16) var(--naarboven-offset);
}
.fr-naarboven a {
font-size: var(--naarboven-fontsize);
letter-spacing: var(--naarboven-letterspacing);
text-transform: var(--naarboven-texttransform);
color: var(--naarboven-color);
border: var(--naarboven-border);
padding: var(--naarboven-padding);
border-radius: var(--naarboven-borderradius);
}
.fr-naarboven a:hover {
color: var(--naarboven-hover-color);
background: var(--naarboven-hover-background);
border-color: var(--naarboven-hover-background);
}

/* ---------------------------- */
/*        TEXT SPECIALS         */
/* ---------------------------- */

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.1em; }
li { padding-bottom: var(--space-1); }
blockquote {
margin: 0 0 var(--space-6);
padding: var(--space-4) var(--space-6);
border-left: var(--hr-height) solid var(--kleur-purple-line);
background: var(--kleur-purple-soft);
}
address {
margin: var(--space-3) 0 var(--space-6);
padding-left: var(--space-3);
border-left: 6px solid var(--kleur-purple-line);
font-style: normal;
font-weight: 700;
line-height: 1.3;
}
table {
border-collapse: collapse;
width: 100%;
margin: var(--space-3) 0 var(--space-6);
font-size: 14px;
}
table th {
text-align: left;
padding: var(--space-2);
border-bottom: var(--hr-height) solid var(--kleur-purple-line);
font-family: var(--h6-fontfamily);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--kleur-muted);
}
table td { padding: var(--space-2); border-bottom: 1px solid var(--kleur-rule); vertical-align: top; }
input, textarea, select {
font-family: var(--body-fontfamily);
font-size: 14px;
color: var(--kleur-ink);
background: var(--kleur-wit);
border: 1px solid var(--kleur-rule);
padding: var(--space-2) var(--space-3);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--kleur-accent);
outline-offset: 2px;
}
::selection { background: rgba(246, 0, 0, 0.16); }

.mobiles_only { display: none; }

/* ============================================================ */
/* TABLET                                                       */
/* ============================================================ */
@media screen and (max-width: 900px) {

.frrows { grid-template-columns: 1fr; }
.col--a-b-c, .col--a-b, .col--b-c, .col--b { grid-column: 1; grid-row: var(--body-columns-mobileMiddleOrder); }
.col--a { grid-column: 1; grid-row: var(--body-columns-mobileLeftOrder); }
.col--c { grid-column: 1; grid-row: var(--body-columns-mobileRightOrder); }

.fr-media, .fr-media.beeld-links { grid-template-columns: 1fr; gap: var(--space-8); }
.fr-media.beeld-links figure { order: 0; }
.fr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-masonry, .fr-masonry.kolommen-4 { column-count: 2; }
.fr-contact { grid-template-columns: 1fr; }

}

/* ============================================================ */
/* MOBIEL                                                       */
/* ============================================================ */
@media screen and (max-width: 700px) {

.wrapper {
margin: var(--wrapper-media-margin);
width: var(--wrapper-media-width);
box-shadow: var(--wrapper-media-boxshadow);
border-radius: var(--wrapper-media-borderradius);
}
.header {
padding: var(--header-media-padding);
grid-template-columns: var(--header-media-gridtemplatecols);
background: var(--header-media-background);
background-size: var(--header-media-backgroundsize);
border-radius: 0;
}
.footer { border-radius: 0; padding: var(--footer-media-padding); }
.sitenaam strong { font-size: var(--sitenaam-media-fontsize); }
.langmenu { grid-column: var(--langmenu-media-gridcolumn); justify-self: start; margin-top: var(--space-2); }

h1 { font-size: var(--h1-media-fontsize); }
h2 { font-size: var(--h2-media-fontsize); }
h3 { font-size: var(--h3-media-fontsize); }
h4 { font-size: var(--h4-media-fontsize); }
h5 { font-size: var(--h5-media-fontsize); }
h6 { font-size: var(--h6-media-fontsize); }

.content { padding: var(--content-media-padding); }
.fulltop { padding: var(--space-8) var(--space-4) 0; }
.fullbottom { padding: 0 var(--space-4); }
.fr-naarboven { padding: 0 var(--space-4) var(--space-4); }

/* mobiel menu: knop + uitklappende lijst */
#cssmenu { display: block; padding: 0; }
#cssmenu #menu-button {
display: block;
padding: var(--menu-button-padding);
font-size: var(--menu-button-fontsize);
letter-spacing: var(--menu-parent-letterspacing);
text-transform: uppercase;
color: var(--menu-button-color);
background: var(--menu-button-background);
cursor: pointer;
}
#cssmenu > ul { display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
#cssmenu.open > ul { display: flex; }
#cssmenu > ul > li { width: 100%; border-top: 1px solid var(--kleur-rule); }
#cssmenu > ul > li > a { padding: 14px var(--space-4); }
#cssmenu ul ul {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
min-width: 0;
background: transparent;
}
#cssmenu ul ul li a { padding-left: var(--space-8); }
#cssmenu .zoekbox { margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--kleur-rule); }
#cssmenu .zoekbox input { width: 100%; }
.menu-indicator { display: none; }

.breadcrumbs { padding: var(--space-3) var(--space-4) 0; }
.fr-grid-2, .fr-grid-3, .fr-grid-4 { grid-template-columns: 1fr; }
.fr-masonry, .fr-masonry.kolommen-4 { column-count: 1; }
.fr-banner { height: 180px; }
.fr-contact { padding: var(--space-6); }

.mobiles_only { display: block; }
.desktops_only { display: none; }

}

@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}