:root{

  /* =====================================================
     KLEUREN – ALGEMEEN
     -----------------------------------------------------
     Pas hier je hoofdkleuren aan.
     ===================================================== */

  --bg-page:#ffffff;     /* Wil je lichte rand + schaduw? Gebruik bv. #f3f3f3 */
  --bg-sheet:#ffffff;    /* Mag iets afwijken als je bladspiegel wil accentueren */
  --bg-header:#ffffff;
  --bg-footer:#689327;

  --text:#444444;
  --h1:#689327;
  --h2:#689327;
  --h3:#E6B800;
  --h:#689327;


  /* =====================================================
     TYPOGRAFIE – FONTS
     ===================================================== */

  --font:'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading:'Merriweather', serif;


  /* =====================================================
     TYPOGRAFIE – FONT WEIGHTS
     ===================================================== */

  --w-light:300;
  --w-regular:400;
  --w-medium:500;
  --w-bold:700;


  /* =====================================================
     TYPOGRAFIE – FONT SIZES
     -----------------------------------------------------
     Verhoog --base-size om alles groter te maken.
     Paragraaf en li kun je apart bijstellen.
     ===================================================== */

  --base-size:1.1rem;   /* body basis */
  --p-size:1.1rem;      /* paragrafen */
  --li-size:1.1rem;     /* lijst items */
  --small-size:0.9rem;

  /* Headings */
  --h1-size:2.4rem;
  --h2-size:2.0rem;
  --h3-size:1.4rem;


  /* =====================================================
     TYPOGRAFIE – LINE HEIGHT
     ===================================================== */

  --base-line:1.6;
  --heading-line:1.3;


  /* =====================================================
     LINKS – CONTENT
     -----------------------------------------------------
     Alleen voor links binnen main / sheet.
     ===================================================== */

  --link-color:#689327;
  --link-underline:#ddd;
  --link-hover-underline:#7FAA45;


	/* =========================================================
	LIGHTBOX voor [img:...]
	========================================================= */

	/* klikgedrag */
	.svcms-imglink{
	display:inline-block;
	cursor:zoom-in;
	}

	/* voorkom underline systeem op deze links */
	.sheet a.svcms-imglink::before,
	.sheet a.svcms-imglink::after,
	main a.svcms-imglink::before,
	main a.svcms-imglink::after{
	content:none !important;
	display:none !important;
	}

	/* overlay */
	.svcms-lb{
	position:fixed;
	inset:0;
	z-index:3000;
	display:none;
	}

	.svcms-lb.is-open{
	display:block;
	}

	.svcms-lb__backdrop{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.72);
	}

	.svcms-lb__panel{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:22px; /* marge tot viewport-randen */
	}
    
        /* Zorg dat klikken naast de afbeelding op de BACKDROP terechtkomt */
        .svcms-lb__panel{
          pointer-events:none;
        }

        /* Maar de box (en dus de afbeelding) en de X blijven klikbaar */
        .svcms-lb__box,
        .svcms-lb__close,
        .svcms-lb__img{
          pointer-events:auto;
        }

	.svcms-lb__img{
	max-width:calc(100vw - 44px);
	max-height:calc(100vh - 44px);
	width:auto;
	height:auto;
	border-radius:10px;
	box-shadow:0 16px 46px rgba(0,0,0,.35);
	background:#fff;
	}

	.svcms-lb__box{
	position:relative;
	display:inline-block;
	max-width:calc(100vw - 44px);
	max-height:calc(100vh - 44px);
	}

	/* img blijft binnen de box */
	.svcms-lb__img{
	display:block;
	max-width:calc(100vw - 44px);
	max-height:calc(100vh - 44px);
	width:auto;
	height:auto;
	border-radius:10px;
	box-shadow:0 16px 46px rgba(0,0,0,.35);
	background:#fff;
	}

	/* X rechtsboven OP de box - (Als je liever nóg verder buiten het plaatje wil: maak -14px bijvoorbeeld -18px.) */
        .svcms-lb__close{
          position:absolute;
          top:-14px;
          right:-14px;
          width:36px;
          height:36px;
          border:0;
          border-radius:999px;
          background:#fff;
          color:#111;
          box-shadow:0 8px 20px rgba(0,0,0,.20);
          cursor:pointer;
          display:grid;
          place-items:center;
          line-height:1;
          z-index:3;
        }

	.svcms-lb__close:focus-visible{
	outline:2px solid rgba(255,255,255,.8);
	outline-offset:3px;
	}

	/* scroll blokkeren als lightbox open is */
	html.svcms-lb-open,
	html.svcms-lb-open body{
	overflow:hidden;
	}
    
    /* =========================================================
       [img:...] lightbox link (alleen deze afbeeldingen)
       - cursor handje/zoom
       - géén underline pseudo's van je globale link-styling
       ========================================================= */

    main a.svcms-imglink::before,
    main a.svcms-imglink::after,
    .sheet a.svcms-imglink::before,
    .sheet a.svcms-imglink::after{
      content:none !important;
      display:none !important;
    }

/* Cursor + display alleen voor [img:...] (dus alleen .svcms-imglink binnen .svcms-img) */
.svcms-img a.svcms-imglink{
  display:inline-block;   /* wint van main a { display:inline; } */
  cursor:pointer !important;
}

.svcms-img a.svcms-imglink img{
  cursor:pointer !important;
}

  /* =====================================================
     FOOTER – KLEUREN, SIZE, WEIGHT
     ===================================================== */

  --footer-heading:#d9f2c9;
  --footer-text:#ffffff;
  --footer-link:#ffffff;
  --footer-underline:#d9f2c9;

  --footer-heading-weight:400;
  --footer-heading-size:18px;

  --footer-text-size:14px;
  --footer-link-size:14px;


  /* =====================================================
     LAYOUT
     ===================================================== */

  --header-h:100px;
  --logo-h:77px;

  --sheet-pad:30px 0px;  
  /* Bewust geen links/rechts padding.
     Wil je bladspiegel ruimte? Gebruik bv. 30px of 30px 35px */


  /* =====================================================
     EFFECTEN en BOOTSTRAP OVERRIDES
     ===================================================== */

  --shadow:0 6px 18px rgba(0,0,0,.08);

  .alert {background-color: #fff8e3 !important; }


  /* =====================================================
     NAVIGATIE / HAMBURGER MENU
     ===================================================== */

  --nav-burger-size:46px;
  --nav-burger-pad:10px;
  --nav-burger-line-h:2px;
  --nav-burger-gap:6px;

  --nav-burger-color:#333;
  --nav-burger-x-color:#333;

  --nav-overlay-bg:rgba(255,255,255,.55);  /* melkglas */
  --nav-overlay-blur:7px;

  --nav-menu-color:#333;
  --nav-menu-size:1.6rem;
  --nav-menu-gap:16px;

  --nav-z:2000;

  --nav-anim:.28s;
  --nav-ease:cubic-bezier(.2,.8,.2,1);


  /* =====================================================
     MENU UNDERLINE (hover animatie vlnr)
     ===================================================== */

  --nav-underline-color:#F6BE28;
  --nav-underline-height:2px;
  
  --nav-overlay-underline-color:#ddd;



/* =========================================================
   XREF kleurensysteem
   wrap  = volle kleur
   head  = dezelfde kleur met 20% dekking (hex alpha = 33)
   Pas alleen de basiskleur aan indien nodig.
   ========================================================= */

/* --- BLOG (groen) ------------------------------------ */
--blog-wrap: #689327;
--blog-head: #6893274D;   /* 4D = ±30% zichtbaar (33 = 20%) */

/* --- STUDY (warm bruin) ------------------------------- */
--study-wrap: #B68A5A;
--study-head: #B68A5A4D;  /* ±30% zichtbaar */

/* --- ARTICLE (goud) ---------------------------------- */
--article-wrap: #F2B705;   /* helder, warmer goud */
--article-head: #F2B7054D; /* ±30% zichtbaar, warm maar niet flets */

/* Einde :root */
}


/* ========================================================= */
/* ========================================================= */


/* =========================================================
   BASIS
   ========================================================= */

html, body{
  height:100%;
}

body{
  margin:0;
  background:var(--bg-page);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--base-size);
  line-height:var(--base-line);
  font-weight:var(--w-regular);
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

h1, h2, h3{
  font-family:var(--font-heading);
  line-height:var(--heading-line);
  font-weight:var(--w-bold);
  margin-top:0;
}

h1{
  font-size:var(--h1-size);
  color:var(--h1);
}

h2{
  font-size:var(--h2-size);
  color:var(--h2);
}

h3{
  font-size:var(--h3-size);
  color:var(--h3);
}

p{
  font-size:var(--p-size);
  margin-bottom:1rem;
}

.small{ /* voor kleine "bij-teksten" */
  font-size: 70%;
  line-height: 1.2;
  color: #6f8860; /* groen-grijs */
}

ul, ol{
  margin-bottom:1rem;
  padding-left:1.5rem;
}

li{
  font-size:var(--li-size);
  margin-bottom:0.4rem;
}

/* GUTTER van Bootstrap 5 is normaal vrij smalletjes, 1.5        */
/* Grotere ruimte tussen Bootstrap-kolommen binnen mijn content, */
/* die ik zo aanroep: row g-4                                    */
.section-block > .row{
  --bs-gutter-x: 2.5rem;  /* horizontale ruimte */
  --bs-gutter-y: 1.5rem;  /* verticale ruimte (mag, hoeft niet) */
}


/* =========================
   LINKS – CONTENT (alleen in main/sheet, niet menu en footer)
   ========================= */

main a,
.sheet a{
  color:var(--link-color);
  text-decoration:none;
  position:relative;
  display:inline; /* voorkomt regelhoogte-gedoe in lopende tekst */
  position:relative;
  text-decoration:none;
}

/* Gestippelde lijn (blijft altijd zichtbaar) */
main a::before,
.sheet a::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  border-bottom:1px dotted var(--link-underline);
}

/* Hover-lijn (komt vlnr in beeld en wordt vast) */
main a::after,
.sheet a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  height:1px;
  width:0;
  background:var(--link-hover-underline);
  transition:width .25s ease;
}

main a:hover::after,
main a:focus-visible::after,
.sheet a:hover::after,
.sheet a:focus-visible::after{
  width:100%;
}

main a::before,
main a::after,
.sheet a::before,
.sheet a::after{
  pointer-events:none; /* hover blijft op de link zelf */
}

/* =========================
   Einde LINKS – CONTENT (alleen in main/sheet, niet menu en footer)
   ========================= */
   
/* kleine tekst onder Terug Volgende buttons navigatie pagina's */
.svcms-after-nav-sub {
    margin: 10px 0 15px 0;
}


/* =========================================================
   STICKY HEADER
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  height:var(--header-h);
  background:var(--bg-header);
  box-shadow:var(--shadow);
  z-index:999;
}

.header-inner{
  max-width:1064px;
  margin:0 auto;
  padding:0 var(--sheet-pad);
  width:100%;
}

.site-logo img{
  height:var(--logo-h);
  width:auto;
  display:block;
}


/* =========================================================
   NAVIGATIE volle breedte (desktop)
   ========================================================= */

.site-nav{
  display:flex;
  gap:20px;
}

.nav-link-anim{
  text-decoration:none;
  color:var(--text);
  font-weight:var(--w-medium);
  position:relative;
  padding:6px 0;
}

.nav-link-anim:after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:var(--nav-underline-height);
  background:var(--nav-underline-color);
  transition:width .2s ease;
}

.nav-link-anim:hover:after{
  width:100%;
}

/* =========================================================
   NAVIGATIE Hamburger-menu
   ========================================================= */

/* hamburger-menu */

/* Knop rechtsboven */
.nav-toggle{
  position:fixed;
  top:18px;
  right:18px;
  width:var(--nav-burger-size);
  height:var(--nav-burger-size);
  padding:var(--nav-burger-pad);
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  cursor:pointer;
  z-index:calc(var(--nav-z) + 2); /* altijd boven overlay */
  -webkit-tap-highlight-color:transparent;
}

/* Toetsenbord-focus (optioneel maar goed) */
.nav-toggle:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:4px;
  border-radius:10px;
}

/* 3 lijntjes */
.nav-toggle .nav-burger{
  position:relative;
  width:100%;
  height:calc(var(--nav-burger-line-h)*3 + var(--nav-burger-gap)*2);
}

.nav-toggle .nav-burger span{
  position:absolute;
  left:0;
  width:100%;
  height:var(--nav-burger-line-h);
  background:var(--nav-burger-color);
  border-radius:999px;
  transition:
    transform var(--nav-anim) var(--nav-ease),
    top var(--nav-anim) var(--nav-ease),
    opacity var(--nav-anim) var(--nav-ease),
    background var(--nav-anim) var(--nav-ease);
}

.nav-toggle .nav-burger span:nth-child(1){ top:0; }
.nav-toggle .nav-burger span:nth-child(2){ top:calc(var(--nav-burger-line-h) + var(--nav-burger-gap)); }
.nav-toggle .nav-burger span:nth-child(3){ top:calc((var(--nav-burger-line-h) + var(--nav-burger-gap))*2); }

/* Hover-hint alleen als menu NIET open is */
html:not(.nav-open) .nav-toggle:hover .nav-burger span:nth-child(1){ transform:translateY(1px); }
html:not(.nav-open) .nav-toggle:hover .nav-burger span:nth-child(3){ transform:translateY(-1px); }

/* Overlay (melkglas) */
.nav-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--nav-overlay-bg);
  backdrop-filter:blur(var(--nav-overlay-blur));
  -webkit-backdrop-filter:blur(var(--nav-overlay-blur));
  opacity:0;
  pointer-events:none;
  transition:opacity var(--nav-anim) var(--nav-ease);
  z-index:var(--nav-z);
}

/* Menu-items in het midden */
.nav-overlay .nav-menu{
  display:flex;
  flex-direction:column;
  gap:var(--nav-menu-gap);
  text-align:center;
}

.nav-overlay .nav-menu a{
  color:var(--nav-menu-color);
  text-decoration:none;
  font-size:var(--nav-menu-size);
  font-weight:500;
  position:relative;
  display:inline-block;
}

.nav-overlay .nav-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background:var(--nav-overlay-underline-color);
  transition:width var(--nav-anim) var(--nav-ease);
}
.nav-overlay .nav-menu a:hover::after{ width:100%; }

/* Open state */
html.nav-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}

/* Hamburger -> X als menu open is */
html.nav-open .nav-toggle .nav-burger span{
  background:var(--nav-burger-x-color);
}

html.nav-open .nav-toggle .nav-burger span:nth-child(1){
  top:calc(var(--nav-burger-line-h) + var(--nav-burger-gap));
  transform:rotate(45deg);
}
html.nav-open .nav-toggle .nav-burger span:nth-child(2){
  opacity:0;
}
html.nav-open .nav-toggle .nav-burger span:nth-child(3){
  top:calc(var(--nav-burger-line-h) + var(--nav-burger-gap));
  transform:rotate(-45deg);
}

/* Scroll blokkeren als overlay open is */
html.nav-open,
html.nav-open body{
  overflow:hidden;
}

/* Breakpoint: zelfde als Bootstrap md */
@media (max-width: 767.98px){
  .site-nav{ display:none; }
}

@media (min-width: 768px){
  .nav-toggle,
  .nav-overlay{ display:none; }
}


/* =========================================================
   SHEET (bladspiegel)
   ========================================================= */

.sheet{
  max-width:1064px;
  margin:0 auto;
  background:var(--bg-sheet);
  /* box-shadow:var(--shadow); /* /* Geen verticale lijn zichtbaar als bg sheet en bg body gelijk zijn */
  padding:var(--sheet-pad);
  /* border-radius:18px; */
}

/* Elke sectie (alles op de pagina) krijgt zo padding */
.section-block {
    padding: 0px 35px 0px 35px;
    margin: 35px 0 15px 0 !important;
}

@media (max-width: 640px) {
  .section-block {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 640px) {
  :root {
    --svcms-inset: 15px; /* is verder overal 35px */
  }
}

body{ align-items:stretch; }
main{ width:100%; }
.sheet{ width:100%; display:block; }


/* =========================================================
   TYPE PAGES (paginasoorten) (for blog / study / article)
   a: css voor wat we vervangen (head, kantlijn, {} linkjes
   b: css voor de after-content (software onder content)
   ========================================================= */

/* a: css voor wat we vervangen (head, kantlijn, {} linkjes */
/* a: css voor wat we vervangen (head, kantlijn, {} linkjes */
.svcms-type-head{
  font-family:var(--font-heading);
  font-weight:var(--w-bold);
  letter-spacing:.08em;
  font-size:2.2rem;
  margin: 10px 0 18px;
  color:#689327; /* default, per type override hieronder */
}

/* =========================================================
   TYPE PAGES (blog / study / article)
   Alles uitlijnen met de content (35px inset)
   ========================================================= */

/* dezelfde links/rechts inset als .section-block */
:root{
  --svcms-inset:35px;        /* desktop */
  --svcms-line-gap:22px;
  --svcms-line-w:4px;
}

@media (max-width: 640px){
  :root{
    --svcms-inset:20px;      /* mobiel smaller */
  }
}

/* Kop bovenaan (ARTIKEL / BLOG / BIJBELSTUDIE) */
.svcms-type-head{
  font-family:var(--font-heading);
  font-weight:var(--w-bold);
  letter-spacing:.08em;
  font-size:2.2rem;
  margin:10px 0 18px;
  padding:0 var(--svcms-inset);
  color:#689327;
}

/* Wrapper met lijn links */
.svcms-type-wrap{
  position:relative;
  padding-left:var(--svcms-inset);
  padding-right:var(--svcms-inset);
}

/* Verticale lijn, ook netjes ingesprongen */
.svcms-type-wrap::before{
  content:"";
  position:absolute;
  left:var(--svcms-inset);
  top:0;
  bottom:0;
  width:var(--svcms-line-w);
  background:var(--blog-wrap);
}

/* Kleur per type */
body.svcms-type-blog .svcms-type-head{ color:var(--blog-head); }
body.svcms-type-blog .svcms-type-wrap::before{ background:var(--blog-wrap); }

body.svcms-type-study .svcms-type-head{ color:var(--study-head); }
body.svcms-type-study .svcms-type-wrap::before{ background:var(--study-wrap); }

body.svcms-type-article .svcms-type-head{ color:var(--article-head); }
body.svcms-type-article .svcms-type-wrap::before{ background:var(--article-wrap); }

/* Na-content (de “gele banner” en blog knoppen) ook uitlijnen */
.svcms-after-content{
  margin-top:22px;
  padding:0 var(--svcms-inset);
}

/* Binnenkant houdt Bootstrap alert netjes */
.svcms-after-content-inner{
  padding:0;
}


/* Kleur per type */
body.svcms-type-study .svcms-type-wrap::before{
  background: var(--study-wrap);
}
body.svcms-type-article .svcms-type-wrap::before{
  background: var(--article-wrap);
}
    /* Dit hoort ook nog bij a: 
      =========================================================
      Type-kleuren (vanuit :root variabelen)
      head  = 20% dekking (lichte kop bovenaan)
      wrap  = volle kleur (lijn in de kantlijn) SPECIFIEK per SOORT
      ========================================================= */

/* --- BLOG ---------------------------------------------- */
body.svcms-type-blog .svcms-type-head{
  color: var(--blog-head);          /* 30% */
}
body.svcms-type-blog .svcms-type-wrap{
  border-left-color: var(--blog-wrap);  /* 100% */
}

/* --- STUDY --------------------------------------------- */
body.svcms-type-study .svcms-type-head{
  color: var(--study-head);
}
body.svcms-type-study .svcms-type-wrap{
  border-left-color: var(--study-wrap);
}

/* --- ARTICLE ------------------------------------------- */
body.svcms-type-article .svcms-type-head{
  color: var(--article-head);
}
body.svcms-type-article .svcms-type-wrap{
  border-left-color: var(--article-wrap);
}


/* b: css voor de after-content (software onder content) */

/* =========================================================
   AFTER CONTENT (niet de site-footer)
   ========================================================= */

.svcms-after-content{
  margin-top:22px;
}

.svcms-after-content-inner{
  padding:0; /* bootstrap alerts regelen hun eigen padding */
}

.svcms-after-content-box{
  padding:14px 16px;
  border-radius:10px;
  background:#f4f7ef;
  border:1px solid rgba(0,0,0,.08);
}

.svcms-after-nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.svcms-after-nav-mid{
  font-weight:600;
  opacity:.85;
  white-space:nowrap;
}

.svcms-after-link{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:opacity .15s ease;
}
.svcms-after-link:hover{
  opacity:.95;
}

/* Buttons: géén underline / stippels (ook niet via ::after) */
.svcms-after-content .btn{
  text-decoration:none;
}

/* Buttons: nooit dotted / hover underline (komen uit main/.sheet a::before/::after) */
.svcms-after-content a.btn::before,
.svcms-after-content a.btn::after{
  content:none !important;
  display:none !important;
}

/* EINDE TYPE PAGES (paginasoorten) */


/* =========================================================
   STICKY FOOTER LAYOUT
   ========================================================= */

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{
  flex:1 0 auto;
}

.site-footer{
  margin-top:auto; /* duwt footer naar beneden als content kort is */
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background:var(--bg-footer);
  padding:24px 0;
  color:var(--footer-text);
  font-size:var(--footer-text-size);
}

.footer-inner{
  max-width:1064px;
  margin:0 auto;
  padding:0 var(--sheet-pad);
}

/* Kolommen altijd bovenaan uitlijnen */
.site-footer .row{
  align-items:flex-start !important;
}
.site-footer .row > [class^="col-"],
.site-footer .row > [class*=" col-"]{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* Koppen in footer */
.site-footer h1,
.site-footer h2,
.site-footer h3{
  margin-top:0;
  color:var(--footer-heading);
  font-weight:var(--footer-heading-weight);
  font-size:var(--footer-heading-size);
}

/* Tekst in footer */
.site-footer p,
.site-footer li{
  color:var(--footer-text);
  font-size:var(--footer-text-size);
}

/* Links + underline animatie links->rechts */
.site-footer a{
  color:var(--footer-link);
  font-size:var(--footer-link-size);
  text-decoration:none;
  position:relative;
  display:inline-block;
}

.site-footer a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  height:2px;
  width:0;
  background:var(--footer-underline);
  transition:width .25s ease;
}

.site-footer a:hover::after{
  width:100%;
}

/* Linklijsten (onder elkaar) */
.footer-links a{
  display:block;
  padding:4px 0;
}

/* =========================================================
   CARDS
   ========================================================= */

.fp-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  background:#fff;
}

.fp-card .fp-card-head{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

.fp-card .fp-card-title{
  margin:0;
  font-weight:var(--w-bold);
}

.fp-card .fp-card-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f4f4f4;
}

.fp-card .fp-card-body{
  padding:0 16px;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease, padding .25s ease;
}

.fp-card.is-open .fp-card-body{
  padding:0 16px 16px 16px;
  max-height:500px;
}

.fp-card .fp-card-body p:last-child{
  margin-bottom:0;
}

/* ====== Lijsten ====== */
.svcms-ul{
  margin: 1rem 0;
  padding-left: 1.4rem;   /* hier regel je inspringing */
}

.svcms-ul li{
  margin-bottom: .35rem;
}

/* ====== Basis box ====== */
.svcms-box{
  margin: 2rem 0;
  padding: 25px;
  border-radius: 7px;
  border: 1px solid;
}

/* ====== Goud ====== */
.svcms-box-gold{
  background: #fbf6df;        /* heel licht goud */
  border-color: #d4b24c;      /* goud rand */
  color: #8a6a00;             /* donker goud */
}

/* ====== Zilver ====== */
.svcms-box-silver{
  background: #f2f2f2;        /* heel licht zilver */
  border-color: #b7b7b7;      /* zilver rand */
  color: #5a5a5a;             /* donker zilver */
}


/* =========================================================
   XREF pills – basis
   (styling hangt af van TARGET type: blog/study/article)
   ========================================================= */

/* ====== Basis van de TOKENS (de {codes} om te vervangen) ====== */

.svcms-xref{
  display:inline-flex;
  align-items:center;
  vertical-align:baseline;
  white-space:nowrap;

  font-size:.87em;
  line-height:1.2;

  padding:0 5px;  /* geen verticale padding => geen extra regelafstand */

  text-decoration:none;
  /* box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); */
  border: 1px dotted #ddd;

  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.svcms-xref:hover,
.svcms-xref:focus-visible{
  transform:translateY(-1px);
  filter:brightness(.97);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.10);
}

.svcms-xref:active{
  transform:translateY(0);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.08);
}

/* Onderline uit jouw globale link-CSS uitschakelen voor pills */
.sheet a.svcms-xref::before,
.sheet a.svcms-xref::after,
main a.svcms-xref::before,
main a.svcms-xref::after{
  content:none !important;
  display:none !important;
}

/* =========================================================
   XREF pills – TARGET varianten (dit zijn je “setjes”)
   ========================================================= */

/* TARGET: artikel (jouw huidige stijl) */
.svcms-xref--to-article{
  background:#fcfaf2;
  color:#6a5200;
  /* box-shadow:inset 0 0 0 1px rgba(212,178,76,.55); */
  border-radius:5px;
}

/* TARGET: blog (duidelijk anders) */
.svcms-xref--to-blog{
  background:#eef7ee;
  color:#245b2a;
  box-shadow:inset 0 0 0 1px rgba(104,147,39,.40);
  border-radius:5px;
}

/* TARGET: bijbelstudie (duidelijk anders) */
.svcms-xref--to-study{
  background:#eef3fb;
  color:#1f3f7a;
  box-shadow:inset 0 0 0 1px rgba(36,127,176,.35);
  border-radius:3px;  
}

/* Als token niet gevonden is */
.svcms-xref--missing{
  background:#f3f3f3;
  color:#777;
  opacity:.75;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.50);
  /* border-radius:999px;   */
}


/* =========================
   Footer software (per type blog, study, article)
   ========================= */
   
.svcms-footer-soft{
  margin-top:26px;
  padding:16px 18px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  background:#f7f7f7;
}

.svcms-footer-soft--blog{ background:#eef7ee; }
.svcms-footer-soft--article{ background:#fbf6df; }
.svcms-footer-soft--study{ background:#eef3fb; }

.svcms-footer-soft-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.svcms-footer-soft-mid{
  font-weight:600;
  opacity:.75;
}

.svcms-footnav{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  text-decoration:none;
  line-height:1;
}

.svcms-footnav--disabled{
  opacity:.45;
  cursor:default;
  border-style:dashed;
}

.svcms-footer-soft-title{
  font-weight:700;
  margin-bottom:10px;
}

.svcms-footer-soft-list{
  margin:0;
  padding-left:1.2rem;
}


/* =========================
   Na-content : software onder het content
   ========================= */

/* Footer software onder content (binnen .sheet) */
.svcms-type-footer{
  margin-top:24px;
}
.svcms-type-footer-inner{
  width:100%;
}
.svcms-footnav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.svcms-footnav-mid{
  font-weight:600;
  opacity:.85;
  white-space:nowrap;
}
.svcms-footlink{
  text-decoration:none;
}
.svcms-footlink:hover{
  text-decoration:underline;
}

/* ========================================
ARTICLE META
======================================== */

.article-meta{
  font-size:0.9rem;
  color:#777;
  margin:6px 0 24px var(--svcms-inset);
  display:flex;
  gap:18px;
  align-items:center;
}

.article-meta i{
margin-right:6px;
color:#999;
}

/* ========================================
VERDIEPING BLOK
======================================== */

.article-verdieping{
background:#f5f5f5;
border:1px solid #d9d9d9;
border-radius:5px;
padding:30px 22px 22px 22px;
margin:28px 0;
font-size:0.75em;
position:relative;
font-size:0.90em; /* Font in verdieping-blok ietsje kleiner */
}

/* alles binnen het blok meeschalen */

.article-verdieping h1,
.article-verdieping h2,
.article-verdieping h3,
.article-verdieping h4,
.article-verdieping p,
.article-verdieping li,
.article-verdieping ul,
.article-verdieping ol{
font-size:1em;
}

/* woord boven de lijn */

.article-verdieping::before{
content:"meer";
position:absolute;
left:22px;
top:-19px;
font-family:'Delius', cursive;
font-size:0.9rem;
color: var(--h2);
}

/* woord onder de lijn */

.article-verdieping::after{
content:"diepgang";
position:absolute;
left:56px;
top:-4px;
font-family:'Delius', cursive;
font-size:0.9rem;
color:var(--h2);
}
/* =========================
   SEARCH alle content
========================= */

:root {
    --svcms-search-overlay-height: 100dvh;
}

/* =========================
   1. HEADER SEARCH
========================= */

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-search--desktop {
    display: block;
    flex: 0 0 auto;
}

.header-search--mobile {
    display: none;
}

.header-search .svcms-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 236px;
    max-width: 236px;
    min-height: 42px;
    padding: 0 4px 0 18px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: #000;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.header-search .svcms-search-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}

.header-search .svcms-search-trigger:focus,
.header-search .svcms-search-trigger:focus-visible,
.svcms-search-overlay__close:focus,
.svcms-search-overlay__close:focus-visible,
.svcms-search-form__submit:focus,
.svcms-search-form__submit:focus-visible,
.svcms-search-form__input:focus,
.svcms-search-form__input:focus-visible {
    outline: none;
    box-shadow: none;
}

.svcms-search-trigger__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.82;
    font: inherit;
    font-size: 0.95rem;
}

.svcms-search-trigger__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: #f0d34f;
    color: #222;
}

.svcms-search-trigger__icon svg {
    width: 18px;
    height: 18px;
}

/* =========================
   2. SEARCH OVERLAY
========================= */

.svcms-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    min-height: var(--svcms-search-overlay-height);
}

.svcms-search-overlay.is-open {
    display: block;
}

.svcms-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(214, 174, 31, 0.28);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.svcms-search-overlay__panel {
    position: relative;
    z-index: 2;
    min-height: var(--svcms-search-overlay-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.svcms-search-form {
    position: relative;
    width: min(80vw, 1100px);
}

.svcms-search-overlay__close {
    position: fixed;
    top: 26px;
    right: 26px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #111;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    font-size: 30px;
    line-height: 1;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 100000;
}

.svcms-search-form__field {
    display: flex;
    align-items: center;
    min-height: 76px;
    padding-left: 28px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 24px 70px rgba(0,0,0,0.16);
}

.svcms-search-form__input {
    width: 100%;
    min-width: 0;
    padding: 20px 10px 20px 0;
    border: 0;
    background: transparent;
    color: #222;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.2;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.svcms-search-form__input::placeholder {
    color: rgba(0,0,0,0.48);
}

.svcms-search-form__submit {
    width: 84px;
    height: 76px;
    flex: 0 0 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.svcms-search-form__submit svg {
    width: 30px;
    height: 30px;
}

.svcms-search-form__hint {
    margin-top: 14px;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.24);
    font-size: 0.98rem;
}

/* =========================
   3. SEARCH RESULTS PAGE
========================= */

.svcms-search-page {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.svcms-search-count {
    margin-bottom: 16px;
}

.svcms-search-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 5px;
    padding-right: 5px;
}

.svcms-search-result,
.svcms-search-result:visited,
.svcms-search-result:hover,
.svcms-search-result:focus,
.svcms-search-result:active {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #d9d9d9 !important;
    border-radius: 10px;
    background: #f7f7f7;
    color: #000 !important;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.svcms-search-result:hover {
    background: #f1f1f1;
    border-color: #cfcfcf !important;
    transform: translateY(-1px);
}

.svcms-search-result,
.svcms-search-result * {
    color: #000 !important;
}

.svcms-search-result::before,
.svcms-search-result::after {
    display: none !important;
    content: none !important;
}

.svcms-search-result__titleline {
    margin-bottom: 6px;
    line-height: 1.35;
}

.svcms-search-result__title {
    font-weight: 700;
}

.svcms-search-result__type {
    opacity: 0.75;
}

.svcms-search-result__text {
    margin: 0;
}

.svcms-search-result__text + .svcms-search-result__text {
    margin-top: 6px;
}

.svcms-search-mark {
    background: #f4e57b;
    color: #000 !important;
    padding: 0 2px;
    border-radius: 2px;
}

/* =========================
   4. SEARCH CTA
========================= */

.svcms-search-cta {
    margin-top: 30px;
    padding: 18px 5px 0;
}

.svcms-search-cta__title {
    margin: 0 0 8px;
}

.svcms-search-cta__intro {
    margin: 0 0 16px;
    max-width: 760px;
}

.svcms-search-cta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.svcms-search-cta__card,
.svcms-search-cta__card:visited,
.svcms-search-cta__card:hover,
.svcms-search-cta__card:focus,
.svcms-search-cta__card:active {
    display: block;
    padding: 16px 18px;
    border: 1px solid #d8d2b2 !important;
    border-radius: 10px;
    background: #fbf8ea;
    color: #333 !important;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.svcms-search-cta__card:hover {
    background: #f7f1d8;
    border-color: #cdbf7c !important;
    transform: translateY(-1px);
}

.svcms-search-cta__card::before,
.svcms-search-cta__card::after {
    display: none !important;
    content: none !important;
}

.svcms-search-cta__card-title {
    margin-bottom: 6px;
    font-weight: 700;
    line-height: 1.35;
}

.svcms-search-cta__card-title i {
    margin-right: 8px;
}

.svcms-search-cta__card-text {
    margin: 0;
}

/* =========================
   5. RESPONSIVE
========================= */

@media (min-width: 768px) {
    .svcms-search-cta__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .header-right {
        display: none;
    }

    .header-search--mobile {
        display: block;
        width: 100%;
        margin-top: 28px;
        text-align: center;
    }

    .header-search--mobile .svcms-search-trigger {
        width: min(290px, 88vw);
        max-width: 100%;
        margin: 0 auto;
    }

    .nav-overlay__inner {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .nav-menu {
        width: 100%;
    }

    .svcms-search-form {
        width: min(92vw, 1100px);
    }

    .svcms-search-form__field {
        min-height: 66px;
        padding-left: 20px;
    }

    .svcms-search-form__submit {
        width: 72px;
        height: 66px;
        flex-basis: 72px;
    }
}

@media (max-width: 640px) {
    .svcms-search-overlay__panel {
        position: relative;
        padding: 16px;
    }

    .svcms-search-overlay__close {
        position: absolute;
        top: calc(50% - 120px);
        right: 21px;
        width: 44px;
        height: 44px;
        font-size: 28px;
        z-index: 100000;
    }

    .svcms-search-form__field {
        min-height: 60px;
    }

    .svcms-search-form__input {
        padding-top: 16px;
        padding-bottom: 16px;
        font-size: 20px;
    }

    .svcms-search-page h2,
    .svcms-search-page > p,
    .svcms-search-count {
        padding-left: 15px;
        padding-right: 15px;
    }

    .svcms-search-cta {
        padding-left: 5px;
        padding-right: 5px;
    }

    .svcms-search-cta__title,
    .svcms-search-cta__intro {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* === Scroll tot top ========== */
#scrollTopBtn{
  position:fixed;
  right:-60px;
  bottom:30px;
  width:46px;
  height:46px;
  background:#333;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  cursor:pointer;
  transition:right .35s ease, opacity .35s ease;
  opacity:0;
  z-index:9999;
  font-size:18px;
}

/* zichtbaar */
#scrollTopBtn.show{
  right:30px;
  opacity:1;
}

#scrollTopBtn:hover{
  background:#555;
}

/* === FEATURED search - speciale zoekresultaten === */
.svcms-search-result--featured{
    background:#fff7dc !important;
    border:1px solid rgba(230,184,0,.45);
    border-left:6px solid rgb(230,184,0);
    box-shadow:0 1px 10px rgba(0,0,0,.03);
}

.svcms-search-result--featured .svcms-search-result-title{
    color:#8a6a00;
    font-weight:700;
}

.svcms-search-result--featured:hover{
    background:#ffefbf;
    border-color:rgba(230,184,0,.65);
}

/* === Mobiel menu Extra regels (home bovenaan, hb-test onderaan === */
.nav-menu--after-search {
    margin-top: 28px;
}

.nav-link-mobile-home {
    opacity: .82;
}

.nav-link-mobile-hbtest {
    color: #689327;
    font-weight: 700;
}

/* File: hb-flip-cards.css */

/* =========================================================
   Flip cards – elegante versie met foto bovenaan
   Lichtgewicht voor performance / SEO
   ========================================================= */

:root{

  /* --- Layout --- */
  --hb-card-w: 315px;
  --hb-card-h: 200px;
  --hb-radius: 5px;
  --hb-gap: 22px;
  --hb-gap-mobile: 18px;

  /* --- Flip animatie --- */
  --hb-perspective: 1100px;
  --hb-flip-ms: .85s;
  --hb-flip-ease: cubic-bezier(.2, .8, .2, 1);

  /* --- Voorkant --- */
  --hb-front-bg-1: #f6df8f;
  --hb-front-bg-2: #fffdf6;
  --hb-front-border: #d8b34a;

  --hb-front-icon: #3A2E00;
  --hb-front-title: #6f0d0d;

  /* --- Achterkant --- */
  --hb-back-bg: #689327;
  --hb-back-kicker: #ddf2cd;
  --hb-back-text: #ffffff;

  /* --- Button --- */
  --hb-btn-text: #2f4f14;
  --hb-btn-bg: #dfecc2;
  --hb-btn-border: #c7dc99;
  --hb-btn-bg-hover: #cfe3a8;
  --hb-btn-border-hover: #b7d17f;

  --hb-focus: rgba(104,147,39,.35);
}

/* =========================================================
   Grid
   ========================================================= */

.hb-flip-wrap{
  width:100%;
}

.hb-flip-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--hb-gap);
  justify-items:center;
}

@media (max-width: 991.98px){
  .hb-flip-grid{
    grid-template-columns:1fr;
    gap:var(--hb-gap-mobile);
  }
}

/* =========================================================
   Card shell
   ========================================================= */

.hb-card{
  width:100%;
  max-width:var(--hb-card-w);
  height:var(--hb-card-h);
  perspective:var(--hb-perspective);
  cursor:pointer;
  outline:none;
}

.hb-card:focus-visible{
  outline:2px solid var(--hb-focus);
  outline-offset:4px;
  border-radius:var(--hb-radius);
}

.hb-card-inner{
  width:100%;
  height:100%;
  position:relative;
  border-radius:var(--hb-radius);
  transform-style:preserve-3d;
  transition:transform var(--hb-flip-ms) var(--hb-flip-ease);
  will-change:transform;
  transform:translateZ(0);
}

/* Flip */

.hb-card.is-flipped .hb-card-inner{
  transform:rotateY(180deg);
}

/* =========================================================
   Faces
   ========================================================= */

.hb-card-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding:0;

  border-radius:var(--hb-radius);
  overflow:hidden;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* =========================================================
   VOORKANT
   ========================================================= */

.hb-card-front{
  position:relative;
    background:linear-gradient(
    25deg,
    var(--hb-front-bg-1) 0%,
    var(--hb-front-bg-2) 100%
    );
  border:2px solid var(--hb-front-border);

  transform:translateZ(0.6px);
}

/* Foto bovenaan */

.hb-card-front::before{
  content:"";
  display:block;
  width:100%;
  height:92px;
  margin-bottom:15px;

  background-image:var(--hb-front-img, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  flex-shrink:0;
}

/* Geen overlay meer */

.hb-card-front::after{
  content:none;
}

.hb-card-front-content{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding:0 18px 14px;
}

.hb-card-front-icon{
  font-size:27px;
  line-height:1;
  color:var(--hb-front-icon);
  margin:0 0 12px 0;
}

.hb-card-front-title{
  font-size:17px;
  font-weight:600;
  color:var(--hb-front-title);
  text-align:center;
  margin:0 0 6px 0;
  line-height:1.2;
}

.hb-card-front-sub{
  font-size:13px;
  color:var(--hb-front-title);
  opacity:.82;
  text-align:center;
  line-height:1.3;
  margin:0;
}

/* =========================================================
   ACHTERKANT
   ========================================================= */

.hb-card-back{
  background:var(--hb-back-bg);
  transform:rotateY(180deg) translateZ(0.6px);

  text-align:center;

  justify-content:center;

  padding:18px;
}

.hb-card-back-kicker{
  font-size:17px;
  letter-spacing:.2px;
  color:var(--hb-back-kicker);
  font-weight:600;
  margin-bottom:10px;
}

.hb-card-back-text{
  color:var(--hb-back-text);
  font-size:15px;
  line-height:1.35;
  max-width:42ch;
  margin:0 auto 14px;
}

/* =========================================================
   Button
   ========================================================= */

.hb-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 16px;

  border-radius:10px;

  font-weight:600;
  font-size:14px;
  line-height:1;

  color:var(--hb-btn-text);
  background:var(--hb-btn-bg);
  border:1px solid var(--hb-btn-border);

  text-decoration:none;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.hb-card-btn:hover{
  background:var(--hb-btn-bg-hover);
  border-color:var(--hb-btn-border-hover);

  transform:translateY(-1px);

  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.hb-card-btn:active{
  transform:translateY(0);

  box-shadow:0 3px 10px rgba(0,0,0,.10);
}

.hb-card-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}

/* =========================================================
   Geen globale underline
   ========================================================= */

.hb-card-btn::before,
.hb-card-btn::after{
  content:none !important;
  display:none !important;
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce){

  .hb-card-inner,
  .hb-card-btn{
    transition:none;
  }
}