/*
Theme Name:   Mijnkerk Child
Template:     mijnkerk
Version: 	  1.0.1
*/
/*
:root {
  --gradient-light: linear-gradient(90deg, #eaf6ff 0%, #e0fdf6 100%);
  --gradient: linear-gradient(
    160deg,
    var(--hoofdkleur-1),
    var(--hoofdkleur-2),
    var(--hoofdkleur-3)
  );
  --koptekstkleur: #101828;
  --tekstkleur: #4a5565;
  --hoofdkleur-1: #006ec3;
  --hoofdkleur-2: #00a8e3;
  --hoofdkleur-3: #00d8a6;
  --achtergrondkleur-1: #ffffff;
  --achtergrondkleur-2: #f9fafb;
  --achtergrondkleur-3: #f0f9ff;
  --footerkleur: #101828;
  --borderradius: 10px;
}
*/
/*---ALGEMEEN---*/
section.hero:not(#blok_667a901bbde80) .div-block.media::after,
section.hero:not(#blok_667a901bbde80) .div-block.media img {
  max-width: 500px;
}

.hero .section-inner-wrap {
  padding-top: 20px;
  padding-bottom: 20px;
}
section.hero:not(#blok_667a901bbde80) .div-block.media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0; /* Plak aan de rechterkant */
  left: auto !important; /* Forceer dat hij niet meer aan de linkerkant trekt */
  width: 500px !important; /* Zorg dat de breedte 400px blijft */
  height: 100%; /* Vul de volledige hoogte */
  display: block; /* Of flex, zolang het maar een waarde heeft */
  z-index: 1; /* Zorg dat hij bovenop de afbeelding ligt */
}

.div-block.media,
section.hero .div-block.media::after {
  display: flex;
  flex-direction: column;
  align-items: flex-end !important; /* Verander dit van flex-start naar flex-end */
}

.div-block.media {
  align-self: flex-end;
}

.div-block {
  justify-content: center;
}
#blok_6a4b9eb205420 .boventitel::before {
  display: none;
}
#onze-locaties .tekst-container i::before {
  display: none;
  gap: 0;
}
.icon-box i::before {
  display: block;
  line-height: 1;
  margin: 0;
  padding: 0;
}
/*
.button:not(.button-alt),
button.btn {
  background: linear-gradient(
      15deg,
      #0082d8,
      #00a8e3,
      #00d8a6,
      #00a8e3,
      #0082d8
    )
    no-repeat;
  background-size: 300%;
  background-position: left center;
  transition:
    background-position 0.3s ease,
    background-size 0.3s ease;
  transform: none;
  border-radius: 500px;
  color: #fff;
  padding: 15px 40px;
  font-size: 16px;
  text-transform: uppercase;
  border: none;
}
*/
.button i:before {
  margin-left: 8px;
}
.boventitel::before {
  display: none;
}

.sub-menu {
  overflow: hidden;
}
.sub-menu a:hover {
  background: #e0fdf699;
}

.boventitel {
  font-weight: 600;
}

.home .overzicht .paginatie {
  display: none;
}

#vieringen .viering-tijd i,
#vieringen .viering-type i,
#vieringen .viering-locatie i {
  font-size: 17px;
}

#vieringen .text-block {
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px;
}

#nieuw-hier .div-block i {
  width: 50px;
  height: 50px;
}

.button {
  text-transform: none !important;
}

#vieringen .overzicht-cell > a {
  padding: 15px !important;
}

.verwijzingen-tekst {
  margin-bottom: 30px;
}

section.hero .div-block.media {
  transform: scale(1.5);
  transform-origin: center;
}
.overzicht-cell a,
.carousel-cell a {
  overflow: hidden !important;
  transform: translateY(0px);
}
section.verwijzingen .verwijzing-columns > a::before,
section.overzicht:not(.overzicht-viering) .overzicht-cell a::before,
section.carousel:not(.carousel-viering) .carousel-cell a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient);
  opacity: 1;
  transition: opacity 0.25s ease;
  z-index: 2;
}

section.verwijzingen .verwijzing-columns > a {
  padding-top: 25px;
}

section.verwijzingen .verwijzing-icon {
  margin-bottom: 15px;
}

.home section.hero {
  overflow-x: clip;
}

section.tekst-afbeelding .media img {
  box-shadow: var(--box-shadow);
}

#blok_6a228c9ebddd9 h3::after {
  display: none;
}

#blok_6a228c9ebddd9 h5 {
  font-size: var(--h6);
}

blockquote::before {
  display: none;
}

.collumns-2.video .div-block.media iframe {
  height: 100%;
}

body:not(.home) .hero-tekst {
  font-size: 22px;
  max-width: 1000px;
}
#input_8_1 {
  color: #ffffff;
}

.group-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.badge {
  border-radius: 999px;
  background: #e7fbf8;
  color: #007c74;
  font-weight: 850;
  padding: 11px 16px;
}

.button:not(.button-alt):hover {
  background-size: 320%;
  background-position: right center;
}

.button:not(.button-disabled).selected {
  color: #fff;
}

a.button.button-alt {
  background-color: transparent;
  padding: 15px 40px;
  border: 2px solid var(--hoofdkleur-1);
  border-radius: 500px;
  box-shadow: none;
  color: var(--hoofdkleur-1);
  font-size: 16px;
}

/*---FONT---*/

/*---HEADER---*/

.header-container {
  position: relative;
}

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

#hoofdmenu-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#hoofdmenu-list {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.headerbutton {
  margin-left: auto;
}

header.vertikaal_submenu #hoofdmenu-list.menu-list .sub-menu img {
  display: none;
}

/*---MENU---*/

.pagina-icoon {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--hoofdkleur-3);
  font-size: 16px;
}

.sub-menu li a {
  display: block;
  width: 100%;
}

.sub-menu .menu-titel {
  width: 100%;
}

.sub-menu .menu-titel > span {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
}

.sub-menu .kerknaam {
  text-align: left;
}

.sub-menu .locatie {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  color: #b2b2b2;
  font-style: italic;
}

/*---HOME---*/

/*---PAGE---*/

/* ==========================================================================
   Activiteiten-paginakop (bv. Alpha Youth): een losse banner-afbeelding
   gevolgd door een titel-sectie. Hier zelfde gradient/kaart-stijl van
   toepassing maken als de rest van de site (var(--gradient-light), witte
   kaart met var(--borderradius) en schaduw, die licht over de banner heen valt).
   ========================================================================== */

img.hero-image {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.hero-image + section.content-section.standaard {
  background: var(--gradient-light);
  padding-top: 0;
}

img.hero-image + section.content-section.standaard .section-inner-wrap {
  position: relative;
  margin-top: -60px;
}

body:not(.single) img.hero-image + section.content-section.standaard .rounded.content {
  background: #ffffff;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 40px;
  text-align: center;
}

img.hero-image + section.content-section.standaard h1 {
  color: var(--koptekstkleur);
}

img.hero-image + section.content-section.standaard .buttons {
  display: flex;
  justify-content: center;
  margin-top: var(--m-space, 24px);
}

@media (max-width: 600px) {
  img.hero-image {
    height: 240px;
  }

  img.hero-image + section.content-section.standaard .section-inner-wrap {
    margin-top: -32px;
  }

  img.hero-image + section.content-section.standaard .rounded.content {
    padding: 32px 24px;
  }
}

/* Doneren-pagina */
#steun .collumns-2 {
  align-items: start;
}

/* Livestream-pagina (page-id-182): heeft wél een uitgelichte afbeelding
   ingesteld, maar moet er hetzelfde uitzien als pagina's zonder afbeelding
   (bv. "Wie we zijn"). De foto+kaart-stijl hierboven wordt getriggerd door de
   "img.hero-image + …"-sibling-selector, die ook matcht als de afbeelding
   verborgen is — dus hier expliciet neutraliseren i.p.v. alleen de img
   verbergen. !important omdat de sibling-selector hierboven anders wint. */
img.hero-image {
  display: none !important;
}

.content-section.standaard {
  padding-top: revert !important;
}

.content-section.standaard .section-inner-wrap {
  margin-top: revert !important;
}

.content-section.standaard .rounded.content {
  background: none !important;
  box-shadow: none !important;
  max-width: none !important;
  padding: 0 !important;
}
.hero-image + section > .section-inner-wrap {
  padding-top: 75px !important;
}
body.page-id-150 .content-section.standaard {
  background-color: #f3f4f6;
}

body.page-id-150 .content-section.standaard .rounded {
  background-color: transparent;
  box-shadow: none;
}

/* Subtiele border toevoegen aan de kaarten (achtergrond/radius komen al uit het thema) */
body.page-id-150 .overzicht-cell > a {
  border: 1px solid #e2e4e8;
}

/* Ruimere witruimte in het tekstgedeelte van de kaart */
body.page-id-150 .text-block {
  padding: var(--l-space);
}

body.page-id-242 .content-section .overzicht {
  display: none;
}

/* ==========================================================================
   Pagina "Vieringen overzicht" (page-id-174)
   Deze pagina gebruikt hetzelfde .overzicht-viering blok, maar zonder eigen
   #id en zonder de ".naast"-modifier op .overzicht-inner, en met een
   ".rounded"-wrapper (witte kaart met schaduw) eromheen. Daarom scopen we
   hier op de paginaklasse "page-id-174" i.p.v. op een blok-ID.
   Gebruikt dezelfde .viering-datum / .viering-tijd / .viering-type /
   .viering-locatie / .viering-voorganger classes die de PHP-filter
   (functions.php) al overal injecteert voor berichtsoort "viering".
   ========================================================================== */

body.page-id-174 .overzicht-viering .section-inner-wrap {
  max-width: 1400px;
}

/* De bestaande witte "rounded" kaart rond het hele overzicht: vlakker maken
   zodat de losse vieringkaarten er weer bovenuit springen */
body.page-id-174 .overzicht-viering .section-inner-wrap .rounded {
  box-shadow: none;
}

/* Grid: 2 kolommen op desktop, 1 kolom op mobiel (".naast" ontbreekt hier) */
body.page-id-174 .overzicht-viering .overzicht-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--m-space);
}

@media (max-width: 767px) {
  body.page-id-174 .overzicht-viering .overzicht-inner {
    grid-template-columns: 1fr;
  }
}

/* Cards: witte achtergrond, subtiele border, afgeronde hoeken, ruime padding */
body.page-id-174 .overzicht-viering .overzicht-cell {
  margin: 0;
  height: auto;
}

body.page-id-174 .overzicht-viering .overzicht-cell > a {
  display: block;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e2e4e8;
  border-radius: var(--borderradius);
  padding: var(--m-space);
  box-shadow: none;
}

/* Afbeelding verbergen */
body.page-id-174 .overzicht-viering .overzicht-cell img {
  display: none;
}

/* Tekstblok: ruimte reserveren links voor het datumblok */
body.page-id-174 .overzicht-viering .text-block {
  position: relative;
  min-height: 156px;
  padding-left: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

body.page-id-174 .overzicht-viering h4 {
  color: #1a1a1a;
  font-size: var(--h6);
  margin: 0 0 4px;
}

/* Datumblok: dag bovenaan, datum groot in het midden, maand klein, jaar kleinst */
body.page-id-174 .overzicht-viering .post-info .viering-datum {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  color: #ffffff;
  padding: 12px 6px;
  border-radius: var(--borderradius);
  background: linear-gradient(
    160deg,
    var(--hoofdkleur-1),
    var(--hoofdkleur-2),
    var(--hoofdkleur-3)
  );
}

body.page-id-174 .overzicht-viering .viering-dag {
  font-size: 13px;
  font-weight: 500;
  text-transform: lowercase;
}

body.page-id-174 .overzicht-viering .viering-getal {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

body.page-id-174 .overzicht-viering .viering-maand {
  font-size: 13px;
  font-weight: 500;
  text-transform: lowercase;
}

body.page-id-174 .overzicht-viering .viering-jaar {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
}

/* Info-regels met Font Awesome-icoon: tijd, type, locatie */
body.page-id-174 .overzicht-viering .viering-tijd,
body.page-id-174 .overzicht-viering .viering-type,
body.page-id-174 .overzicht-viering .viering-locatie {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #55585f;
  font-size: 14px;
  line-height: 1.5;
}

body.page-id-174 .overzicht-viering .viering-tijd i,
body.page-id-174 .overzicht-viering .viering-type i,
body.page-id-174 .overzicht-viering .viering-locatie i {
  color: var(--hoofdkleur-1);
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Voorganger: blijft plain, zonder icoon */
body.page-id-174 .overzicht-viering .viering-voorganger {
  color: #55585f;
  font-size: 14px;
  margin-top: 4px;
}

/* Kleine schermen: datumblok iets compacter */
@media (max-width: 480px) {
  body.page-id-174 .overzicht-viering .text-block {
    padding-left: 92px;
    min-height: 136px;
  }

  body.page-id-174 .overzicht-viering .post-info .viering-datum {
    width: 76px;
  }

  body.page-id-174 .overzicht-viering .viering-getal {
    font-size: 28px;
  }
}

body.page-id-174 .overzicht-viering .viering-datum span {
  color: #fff;
}

/*---SINGLE---*/

/*---PAGINABLOKKEN---*/

/**hero**/

/* Reset de div — geen mask hier */
section.hero .div-block.media {
  position: relative;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Afbeelding krijgt de cirkel-mask */
section.hero .div-block.media img {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='514' height='516' viewBox='0 0 514 516' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='261.555' cy='256.972' r='192.336' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='514' height='516' viewBox='0 0 514 516' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='261.555' cy='256.972' r='192.336' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: block;
}

/* Gradient blob-ring als overlay via ::after *//*
section.hero .div-block.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    7deg,
    rgba(0, 130, 216, 0.2) 1.11%,
    rgba(0, 168, 227, 0.2) 49.06%,
    rgba(0, 216, 166, 0.2) 98.89%
  );
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='514' height='516' viewBox='0 0 514 516' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M452.029 160.821C425.688 72.4224 409.153 25.3425 368.005 7.41592C311.719 -17.1117 261.423 23.6799 170.011 64.4386C121.047 86.2665 39.375 92.3902 11.7835 125.791C-22.9814 167.883 29.8817 225.054 33.6329 271.771C36.2489 304.464 9.97371 331.806 33.3532 367.051C48.1115 389.29 112.508 398.08 129.685 418.048C158.395 451.383 182.729 481.046 212.015 495.368C241.811 509.936 266.359 473.524 294.641 470.445C360.519 463.252 356.751 485.392 387.057 466.231C412.214 450.329 403.872 425.884 434.376 381.899C462.954 340.712 513.349 348.301 513.349 286.076C513.349 223.852 478.074 248.248 452.029 160.821ZM261.555 449.309C155.384 449.309 69.3192 363.182 69.3192 256.972C69.3192 150.763 155.384 64.6361 261.555 64.6361C367.725 64.6361 453.79 150.746 453.79 256.972C453.79 363.199 367.725 449.309 261.555 449.309Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='514' height='516' viewBox='0 0 514 516' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M452.029 160.821C425.688 72.4224 409.153 25.3425 368.005 7.41592C311.719 -17.1117 261.423 23.6799 170.011 64.4386C121.047 86.2665 39.375 92.3902 11.7835 125.791C-22.9814 167.883 29.8817 225.054 33.6329 271.771C36.2489 304.464 9.97371 331.806 33.3532 367.051C48.1115 389.29 112.508 398.08 129.685 418.048C158.395 451.383 182.729 481.046 212.015 495.368C241.811 509.936 266.359 473.524 294.641 470.445C360.519 463.252 356.751 485.392 387.057 466.231C412.214 450.329 403.872 425.884 434.376 381.899C462.954 340.712 513.349 348.301 513.349 286.076C513.349 223.852 478.074 248.248 452.029 160.821ZM261.555 449.309C155.384 449.309 69.3192 363.182 69.3192 256.972C69.3192 150.763 155.384 64.6361 261.555 64.6361C367.725 64.6361 453.79 150.746 453.79 256.972C453.79 363.199 367.725 449.309 261.555 449.309Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}*/
/*
.hero {
  background: linear-gradient(90deg, #eaf6ff 0%, #e0fdf6 100%);
}*/

.hero img {
  height: 500px;
}

.hero .boventitel {
  color: var(--hoofdkleur-1);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

/**tekst en afbeeldingen**/

section.paginadesign-naast .section-inner-wrap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

section.tekst-afbeelding:not(.hero) .tekst-inner {
  background: none;
}

/* Paginaheader (paginadesign-naast) er hetzelfde laten uitzien als de homepage-hero */
/*
section.paginadesign-naast.standaard {
  background: linear-gradient(90deg, #eaf6ff 0%, #e0fdf6 100%);
}
*/
section.paginadesign-naast.standaard .section-inner-wrap > .content.rounded {
  background: none;
  box-shadow: none;
  padding: 0;
}

section.paginadesign-naast.standaard .content > div > p {
  font-size: var(--l-text);
  margin-top: var(--s-space);
}

section.paginadesign-naast.standaard .content .buttons {
  margin-top: var(--m-space);
}

section.paginadesign-naast.standaard .section-inner-wrap {
  position: relative;
}

/* Gradient blob-ring als overlay via ::after (zelfde vorm als de hero) */
section.paginadesign-naast.standaard .section-inner-wrap::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 420px;
  height: 420px;
  background: linear-gradient(
    7deg,
    rgba(0, 130, 216, 0.2) 1.11%,
    rgba(0, 168, 227, 0.2) 49.06%,
    rgba(0, 216, 166, 0.2) 98.89%
  );
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='514' height='516' viewBox='0 0 514 516' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M452.029 160.821C425.688 72.4224 409.153 25.3425 368.005 7.41592C311.719 -17.1117 261.423 23.6799 170.011 64.4386C121.047 86.2665 39.375 92.3902 11.7835 125.791C-22.9814 167.883 29.8817 225.054 33.6329 271.771C36.2489 304.464 9.97371 331.806 33.3532 367.051C48.1115 389.29 112.508 398.08 129.685 418.048C158.395 451.383 182.729 481.046 212.015 495.368C241.811 509.936 266.359 473.524 294.641 470.445C360.519 463.252 356.751 485.392 387.057 466.231C412.214 450.329 403.872 425.884 434.376 381.899C462.954 340.712 513.349 348.301 513.349 286.076C513.349 223.852 478.074 248.248 452.029 160.821ZM261.555 449.309C155.384 449.309 69.3192 363.182 69.3192 256.972C69.3192 150.763 155.384 64.6361 261.555 64.6361C367.725 64.6361 453.79 150.746 453.79 256.972C453.79 363.199 367.725 449.309 261.555 449.309Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='514' height='516' viewBox='0 0 514 516' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M452.029 160.821C425.688 72.4224 409.153 25.3425 368.005 7.41592C311.719 -17.1117 261.423 23.6799 170.011 64.4386C121.047 86.2665 39.375 92.3902 11.7835 125.791C-22.9814 167.883 29.8817 225.054 33.6329 271.771C36.2489 304.464 9.97371 331.806 33.3532 367.051C48.1115 389.29 112.508 398.08 129.685 418.048C158.395 451.383 182.729 481.046 212.015 495.368C241.811 509.936 266.359 473.524 294.641 470.445C360.519 463.252 356.751 485.392 387.057 466.231C412.214 450.329 403.872 425.884 434.376 381.899C462.954 340.712 513.349 348.301 513.349 286.076C513.349 223.852 478.074 248.248 452.029 160.821ZM261.555 449.309C155.384 449.309 69.3192 363.182 69.3192 256.972C69.3192 150.763 155.384 64.6361 261.555 64.6361C367.725 64.6361 453.79 150.746 453.79 256.972C453.79 363.199 367.725 449.309 261.555 449.309Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

@media (min-width: 768px) {
  section.paginadesign-naast.standaard .section-inner-wrap {
    align-items: center;
  }

  /* Foto naar rechts, tekst naar links, zoals bij de hero */
  section.paginadesign-naast.standaard .section-inner-wrap > .content {
    grid-column: 1;
    grid-row: 1;
  }

  section.paginadesign-naast.standaard .section-inner-wrap > img {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 100%;
    max-width: 420px;
    height: 420px;
    object-fit: cover;
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='514' height='516' viewBox='0 0 514 516' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='261.555' cy='256.972' r='192.336' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='514' height='516' viewBox='0 0 514 516' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='261.555' cy='256.972' r='192.336' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}

/**carousel**/

section.carousel .carousel-cell > a {
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  background-color: #fff;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

section.carousel .carousel-cell > a:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/**overzicht**/

section.overzicht .overzicht-cell > a {
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  background-color: #fff;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

section.overzicht .overzicht-cell > a:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

section.overzicht .overzicht-cell > a span {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 0;
  gap: 8px;
}

/* Kaarten met wisselende foto-verhoudingen (bv. een 4:3-foto naast dummy
   16:9-afbeeldingen) gelijk trekken: vaste beeldhoogte + object-fit: cover.
   Tekst krijgt eigen padding i.p.v. tegen de randen te plakken. */
section.overzicht .overzicht-cell > a img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

section.overzicht .overzicht-cell .text-block {
  padding: 20px 24px 24px;
}

section.overzicht .overzicht-cell h4 {
  color: #101828;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

section.overzicht .overzicht-cell .post-info:empty {
  display: none;
}

/* ==========================================================================
   #vieringen — "Eerstvolgende vieringen"
   Alle regels scoped onder #vieringen zodat andere .overzicht-blokken
   (agenda, post, team, etc.) niet worden geraakt.

   Vereist de PHP-filter op 'overzicht_filter_text' (child theme functions.php)
   die de volgende classes injecteert:
   .viering-datum > .viering-dag / .viering-getal / .viering-maand / .viering-jaar
   .viering-tijd, .viering-type, .viering-locatie, .viering-voorganger
   ========================================================================== */

#vieringen .section-inner-wrap {
  position: relative;
  max-width: 1400px;
}

/* 2. Titel linksboven, tekst eronder, knop rechtsboven (desktop) */
@media (min-width: 768px) {
  #vieringen > .section-inner-wrap > h2,
  #vieringen > .section-inner-wrap > .overzicht-tekst {
    max-width: 70%;
  }
}

/* 3. Grid van 2 kolommen op desktop, 1 kolom op mobiel */
#vieringen .overzicht-inner.naast {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--m-space);
}

@media (max-width: 767px) {
  #vieringen .overzicht-inner.naast {
    grid-template-columns: 1fr;
  }
}

/* 4. Cards: witte achtergrond, subtiele border, afgeronde hoeken, ruime padding */
#vieringen .overzicht-cell {
  margin: 0;
  height: auto;
}

#vieringen .overzicht-cell > a {
  display: block;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e2e4e8;
  border-radius: var(--borderradius);
  padding: var(--m-space);
  box-shadow: none;
  text-decoration: none;
}

#vieringen .overzicht-cell > a:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

#vieringen .overzicht-cell > a {
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  background-color: #fff;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

#vieringen .overzicht-cell > a span {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 0;
  gap: 8px;
}

#vieringen .overzicht-cell > a div.post-text {
  white-space: normal;
}

  

/* 5. Afbeelding verbergen */
#vieringen .overzicht-cell img {
  display: none;
}

/* 6. Tekstblok: ruimte reserveren links voor het datumblok */
#vieringen .text-block {
  position: relative;
  min-height: 156px;
  padding-left: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

#vieringen h4 {
  color: #1a1a1a;
  font-size: var(--h6);
  margin: 0 0 4px;
}

/* 7. Datumblok: dag bovenaan, datum groot in het midden, maand klein, jaar kleinst */
#vieringen .post-info .viering-datum {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  color: #ffffff;
  padding: 12px 6px;
  border-radius: var(--borderradius);
  background: linear-gradient(
    160deg,
    var(--hoofdkleur-1),
    var(--hoofdkleur-2),
    var(--hoofdkleur-3)
  );
}

#vieringen .viering-dag {
  font-size: 13px;
  font-weight: 500;
  text-transform: lowercase;
}

#vieringen .viering-getal {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

#vieringen .viering-maand {
  font-size: 13px;
  font-weight: 500;
  text-transform: lowercase;
}

#vieringen .viering-jaar {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
}

/* 8. Info-regels met Font Awesome-icoon: tijd, type, locatie */
#vieringen .viering-tijd,
#vieringen .viering-type,
#vieringen .viering-locatie,
#vieringen .viering-voorganger
{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #55585f;
  font-size: 14px;
  line-height: 1.5;
}

#vieringen .viering-tijd i,
#vieringen .viering-type i,
#vieringen .viering-locatie i,
#vieringen .viering-voorganger i {
  color: var(--hoofdkleur-1);
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Kleine schermen: datumblok iets compacter */
@media (max-width: 480px) {
  #vieringen .text-block {
    padding-left: 92px;
    min-height: 136px;
  }

  #vieringen .post-info .viering-datum {
    width: 76px;
  }

  #vieringen .viering-getal {
    font-size: 28px;
  }
}

#vieringen .viering-dag,
#vieringen .viering-getal,
#vieringen .viering-maand,
#vieringen .viering-jaar {
  color: #fff;
}

#vieringen h4 {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 155.556% */
}

/**page breaker**/

/**verwijzingen**/

/* Titel en intro-tekst naast elkaar i.p.v. onder elkaar (desktop) */
@media (min-width: 768px) {
  #blok_6a4cbf5918264 .section-inner-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 44px;
  }

  #blok_6a4cbf5918264 .section-inner-wrap > h2 {
    flex: 0 0 620px;
    margin: 0;
  }

  #blok_6a4cbf5918264 .section-inner-wrap > .verwijzingen-tekst {
    flex: 1;
    min-width: 240px;
  }

  /* Kaartjes-grid blijft op een eigen, volledige regel staan */
  #blok_6a4cbf5918264 .section-inner-wrap > .verwijzing-columns {
    flex: 0 0 100%;
  }
}

section.verwijzingen .verwijzing-titel {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

section.verwijzingen .verwijzing-columns a {
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  background-color: #fff;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

section.verwijzingen .verwijzing-columns a:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

section.verwijzingen a div.verwijzing-tekst {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

#blok_6a0c737755fe4 .verwijzing-columns .verwijzing-icon,
#blok_6a1d9ce9cd715 .verwijzing-columns .verwijzing-icon,
#blok_6a4bb71b65b99 .verwijzing-columns .verwijzing-icon,
#blok_6a4bb71b65b99 .verwijzing-columns-4 .verwijzing-icon,
#blok_6a4bb71b65b99 .verwijzing-columns-7 .verwijzing-icon,
#blok_6a4bb71b65b99 .verwijzing-columns-8 .verwijzing-icon,
#blok_6a4bb71b65b99 .verwijzing-columns-10 .verwijzing-icon,
#blok_6a4bb71b65b99 .verwijzing-columns-11 .verwijzing-icon,
#blok_6a4bb71b65b99 .verwijzing-columns-12 .verwijzing-icon,
#blok_6a4bb71b65b99 .verwijzing-columns-13 .verwijzing-icon,
#blok_6a4cbf5918264 .verwijzing-columns .verwijzing-icon,
#blok_6a4cbf5918264 .verwijzing-columns-4 .verwijzing-icon,
#blok_6a4cbf5918264 .verwijzing-columns-7 .verwijzing-icon,
#blok_6a4cbf5918264 .verwijzing-columns-8 .verwijzing-icon,
#blok_6a4cbf5918264 .verwijzing-columns-10 .verwijzing-icon,
#blok_6a4cbf5918264 .verwijzing-columns-11 .verwijzing-icon,
#blok_6a4cbf5918264 .verwijzing-columns-12 .verwijzing-icon,
#blok_6a4cbf5918264 .verwijzing-columns-13 .verwijzing-icon {
  background: linear-gradient(
    160deg,
    var(--hoofdkleur-1),
    var(--hoofdkleur-2),
    var(--hoofdkleur-3)
  );
}

.verwijzing-columns .verwijzing-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.verwijzing-columns .verwijzing-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

#onze-locaties .verwijzing-columns .verwijzing-icon i {
  align-items: left;
  justify-content: left;
}

.verwijzing-columns .verwijzing-icon i::before {
  font-size: 1.8rem;
  color: #ffffff;
  line-height: 1;
}

.verwijzing-columns a:nth-child(3n + 1) .verwijzing-icon {
  background: var(--hoofdkleur-1);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.verwijzing-columns a:nth-child(3n + 2) .verwijzing-icon {
  background: var(--hoofdkleur-2);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.verwijzing-columns a:nth-child(3n + 3) .verwijzing-icon {
  background: var(--hoofdkleur-3);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

#blok_6a3a7a446fcb4 div.verwijzing-titel:nth-child(3n + 1) {
  color: var(--hoofdkleur-1);
}

#blok_6a3a7a446fcb4 div.verwijzing-titel:nth-child(3n + 2) {
  color: var(--hoofdkleur-2);
}

#blok_6a3a7a446fcb4 div.verwijzing-titel:nth-child(3n + 3) {
  color: var(--hoofdkleur-3);
}

#blok_6a3a7a446fcb4
  .verwijzing-columns-4
  > a:nth-of-type(4n + 1)
  .verwijzing-titel {
  color: var(--hoofdkleur-1);
}

#blok_6a3a7a446fcb4
  .verwijzing-columns-4
  > a:nth-of-type(4n + 2)
  .verwijzing-titel {
  color: var(--hoofdkleur-2);
}

#blok_6a3a7a446fcb4
  .verwijzing-columns-4
  > a:nth-of-type(4n + 3)
  .verwijzing-titel {
  color: var(--hoofdkleur-3);
}

#blok_6a3a7a446fcb4
  .verwijzing-columns-4
  > a:nth-of-type(4n)
  .verwijzing-titel {
  color: var(--hoofdkleur-1);
}

.verwijzing-columns-4,
.verwijzing-columns-7,
.verwijzing-columns-8,
.verwijzing-columns-10,
.verwijzing-columns-11,
.verwijzing-columns-12,
.verwijzing-columns-13 {
  align-items: self-start;
}

#blok_69b825a476ef7 a {
  background-color: var(--achtergrondkleur-2);
}

section.verwijzingen.voor a,
section.verwijzingen.boven a {
  padding: 20px;
  background-color: var(--achtergrondkleur-2);
  border-radius: 10px;
}

section.verwijzingen .tekst-container {
  padding: 0px;
  display: flex;
  flex-direction: column;
}

section.verwijzingen h4 {
  color: #101828;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 155.556% */
}

.verwijzing-columns .tekst-container .button,
.verwijzing-columns-4 .button {
  padding: 0;
  background: none;
  border: none;
  text-transform: none;
  color: #0082d8;
  box-shadow: none;
  outline: none;
  transition: none;
  transform: none;
  font-size: 14px;
  margin-top: 10px;
}

.verwijzing-columns .button:not(.button-disabled):hover {
  border: none;
}

.verwijzing-columns .tekst-container .button::after,
.verwijzing-columns .button::after {
  content: " →";
}

/* "Nieuw hier" — introductieblok met icoon-regels *//*
#nieuw-hier {
  background: linear-gradient(90deg, #eaf6ff 0%, #e0fdf6 100%);
}*/

#nieuw-hier .div-block {
  background: none;
}

#nieuw-hier .div-block i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-right: 0.5rem;
  vertical-align: middle;
  flex-shrink: 0;
}

#nieuw-hier .div-block i::before {
  font-size: 1.1rem;
  line-height: 1;
  margin: 0;
}

#nieuw-hier .div-block p {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* "Onze locaties" */
#onze-locaties a {
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 0;
  height: 100%;
}

#onze-locaties .verwijzing-icon {
  background: none !important;
  box-shadow: none !important;
  height: auto;
  width: auto;
  margin: 10px 16px 0 0;
}

#onze-locaties .verwijzing-icon i::before {
  color: var(--hoofdkleur-1);
}

/* Contact-blok *//*
#contact {
  background: linear-gradient(
      15deg,
      #0082d8,
      #00a8e3,
      #00d8a6,
      #00a8e3,
      #0082d8
    )
    no-repeat;
}

#contact div.div-block.tekst,
#contact div.div-block.tekst-inner,
#contact div.div-block.tekst-inner h3 {
  background: none;
  color: #fff;
}

#contact .button:not(.button-alt) {
  background: #fff;
  color: var(--hoofdkleur-1);
}

#contact .button-alt {
  border: 2px solid #ffffff;
  color: #fff;
}
*/
/* Geloofsleerling vertelt — Testimonial block */
#blok_6a4bae9d7c95e {
  padding: 80px 20px;
  text-align: center;
}

#blok_6a4bae9d7c95e .section-inner-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

#blok_6a4bae9d7c95e .collumns-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#blok_6a4bae9d7c95e .div-block.media {
  display: none;
}

#blok_6a4bae9d7c95e .tekst-inner {
  background: none;
  padding: 0;
}

#blok_6a4bae9d7c95e h3 {
  color: var(--hoofdkleur-1);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 32px;
}

#blok_6a4bae9d7c95e blockquote {
  margin: 0 0 40px 0;
  position: relative;
  padding: 0;
}

#blok_6a4bae9d7c95e blockquote::before {
  content: '"';
  display: block;
  font-size: 80px;
  color: var(--hoofdkleur-1);
  line-height: 1;
  margin-bottom: 20px;
}

#blok_6a4bae9d7c95e blockquote p {
  color: var(--hoofdkleur-1);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

#blok_6a4bae9d7c95e .buttons {
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  #blok_6a4bae9d7c95e {
    padding: 60px 20px;
  }

  #blok_6a4bae9d7c95e blockquote p {
    font-size: 20px;
  }

  #blok_6a4bae9d7c95e blockquote::before {
    font-size: 60px;
  }
}

/**faq**/

/**tabbladen**/

section.tabbladen .tab-button {
  background-color: var(--achtergrondkleur-2);
  color: var(--tekstkleur);
}

section.tabbladen .tab-button:hover {
  background-color: var(--achtergrondkleur-3);
  color: var(--hoofdkleur-1);
}

section.tabbladen .tab-button.active {
  background: linear-gradient(
    160deg,
    var(--hoofdkleur-1),
    var(--hoofdkleur-2),
    var(--hoofdkleur-3)
  );
  color: #ffffff;
}

section.tabbladen .tabs {
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
}



/* =========================================================
   Titels
   ========================================================= */

footer .footer-heading {
    position: relative;
    margin: 0 0 24px;
    padding-bottom: 14px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

footer .footer-heading:not(.footer-heading-main)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--hoofdkleur-2),
        var(--hoofdkleur-3)
    );
}

.footer-heading.footer-heading-main {
  display: none;
}


footer .footer-divider {
    width: 100%;
    height: 1px;
    margin: 56px 0 24px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.16) 15%,
        rgba(255, 255, 255, 0.16) 85%,
        transparent
    );
}

footer .footer-row-bottom {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding-right: 56px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
    line-height: 1.6;
}

footer .footer-row-bottom a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

footer .footer-row-bottom a:hover {
    color: var(--hoofdkleur-3);
}

/*---CONTENT---*/

.content-section .section-inner-wrap {
  align-items: center;
}

.section-inner-wrap .collumns-2 {
  align-items: center;
}

.collumns-2.video {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 48px;
}

/* Video-embeds (bv. YouTube) responsive maken i.p.v. het vaste width/height
   dat WordPress in de iframe zet, en dezelfde kaart-schaduw geven als de
   .alpha-card / verwijzing-kaarten elders op de site */
.collumns-2.video .div-block.media {
  width: 100%;
}

.collumns-2.video .div-block.media iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--borderradius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.icon-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.icon-1 {
  min-width: 0;
}

.icon-list .icon-1 > i {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  line-height: 1;
  background: linear-gradient(
    160deg,
    var(--hoofdkleur-1),
    var(--hoofdkleur-2),
    var(--hoofdkleur-3)
  );
}

.icon-list .icon-1 > i::before {
  font-size: 1.8rem;
  color: #ffffff;
  line-height: 1;
}

/* "Alpha" info-blok: twee kolommen met feiten-kaart en info-lijst */
.alpha-info-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  max-width: 1100px;
  margin: 64px auto;
  padding: 0 24px;
}

.alpha-card {
  background: #fff;
  border: 1px solid rgba(10, 36, 64, 0.08);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.alpha-card-highlight {
  background: linear-gradient(135deg, #eefaff 0%, #eefdf8 100%);
}

.alpha-label {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color: #101f3d;
}

.alpha-fact {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(10, 36, 64, 0.08);
}

.alpha-fact:last-of-type {
  border-bottom: 0;
}

.alpha-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  font-size: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.alpha-fact p,
.alpha-info-item p {
  margin: 0;
  color: #41516b;
  line-height: 1.6;
}

.alpha-card small {
  display: block;
  margin-top: 18px;
  color: #6b7a90;
}

.alpha-info-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(10, 36, 64, 0.08);
}

.alpha-info-item:first-of-type {
  padding-top: 0;
}

.alpha-info-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.alpha-info-item strong {
  display: block;
  margin-bottom: 6px;
  color: #101f3d;
  font-size: 17px;
}

.alpha-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 24px 0;
}

@media (max-width: 800px) {
  .alpha-info-grid {
    grid-template-columns: 1fr;
    margin: 40px auto;
  }

  .alpha-info-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .alpha-label {
    font-size: 24px;
  }
}

/**blockquote**/

/**formulieren**/

#input_8_1 {
  border-radius: 10px;
  border: 0.8px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  height: 100%;
}

.ginput_container {
  height: 100%;
}

/* Digitale nieuwsbrief — Gravity Forms newsletter-blok */
#blok_6a228c9ebddd9 .div-block.tekst {
  height: 100%;
}

#blok_6a228c9ebddd9 .tekst-inner {
  height: 100%;
  background-color: #ffffff;
  border: 1px solid #e2e4e8;
}

/* 2. Titel met kleine gradient-accentbalk (zelfde merkaccent als vieringen) */
#blok_6a228c9ebddd9 h3 {
  position: relative;
  color: #1a1a1a;
  margin: 0 0 var(--s-space);
  padding-bottom: var(--s-space);
}

#blok_6a228c9ebddd9 h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--hoofdkleur-1), var(--hoofdkleur-2));
}

/* 3. Subkoppen ("Digitale nieuwsbrief", "Onze parochie-app", "Social Media") */
#blok_6a228c9ebddd9 h5 {
  color: var(--hoofdkleur-1);
  font-size: var(--s-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: var(--m-space) 0 var(--xs-space);
}

#blok_6a228c9ebddd9 .tekst-inner > .div-block > h5:first-child {
  margin-top: 0;
}

#blok_6a228c9ebddd9 p {
  color: #55585f;
  line-height: 1.6;
}

/* 4. Gravity Forms — nieuwsbriefformulier */
#blok_6a228c9ebddd9 .gform_wrapper {
  margin-top: var(--m-space);
}

#blok_6a228c9ebddd9 .gfield {
  margin-bottom: var(--s-space);
}

#blok_6a228c9ebddd9 .gfield_label,
#blok_6a228c9ebddd9 .gform-field-label {
  display: block;
  font-weight: 600;
  color: #1a1a1a;
  font-size: 14px;
  margin-bottom: 6px;
}

#blok_6a228c9ebddd9 .ginput_container_text input,
#blok_6a228c9ebddd9 .ginput_container_email input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d7dae0;
  border-radius: var(--borderradius);
  background-color: #f8f9fa;
  font-size: 15px;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

#blok_6a228c9ebddd9 .ginput_container_text input:focus,
#blok_6a228c9ebddd9 .ginput_container_email input:focus {
  border-color: var(--hoofdkleur-1);
  background-color: #ffffff;
  outline: none;
}

#blok_6a228c9ebddd9 .gfield_required_text {
  color: #a94442;
  font-weight: 400;
}

#blok_6a228c9ebddd9 .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#blok_6a228c9ebddd9 .ginput_container_consent input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--hoofdkleur-1);
}

#blok_6a228c9ebddd9 .gfield_consent_label {
  font-size: 13px;
  color: #55585f;
  line-height: 1.5;
}

#blok_6a228c9ebddd9 .gfield_consent_label a {
  color: var(--hoofdkleur-1);
}

#blok_6a228c9ebddd9 .gform_footer {
  margin-top: var(--m-space);
}

#blok_6a228c9ebddd9 .gform_button.button:hover {
  transform: translateY(-5px);
  box-shadow: 0px 7px 25px -10px rgba(0, 0, 0, 0.25);
}

/* Akismet honeypot-veld nooit tonen */
#blok_6a228c9ebddd9 .akismet-fields-container {
  display: none !important;
}
#blok_6a4bb4584ab4b .section-inner-wrap .collumns-2 {
  align-items: flex-start;
}

/* "De onderdelen van Alpha Youth" — kaarten met een foto boven de tekst
   i.p.v. een icoon. Afbeelding beeldvullend boven de kaart, tekst eronder
   met eigen padding, zelfde afgeronde hoeken/schaduw als de kaart zelf. */
#blok_6a3a84b14e3c7 .verwijzing-columns a {
  padding: 0;
  overflow: hidden;
  text-align: left;
}

#blok_6a3a84b14e3c7 .verwijzing-columns a img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

#blok_6a3a84b14e3c7 .tekst-container {
  padding: 20px 24px 24px;
}

/* "Livestream" locatie-kaarten: zelfde beeldvullende foto-kaart-stijl als
   bij "Alpha Youth" i.p.v. de losse 20px-padding rondom de foto, zodat het
   aansluit bij de rest van de site. */
#blok_6a3a6a6e11679 {
  padding: 32px 0 64px;
}

#blok_6a3a6a6e11679 .verwijzing-columns a {
  padding: 0;
  background-color: #ffffff;
  align-items: stretch !important;
}

#blok_6a3a6a6e11679 .verwijzing-columns a img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

#blok_6a3a6a6e11679 .tekst-container {
  padding: 20px 24px 24px;
  gap: 4px;
}

#blok_6a3a6a6e11679 .verwijzing-boventitel {
  display: none;
}

#blok_6a3a6a6e11679 .verwijzing-titel {
  color: #101828;
}

#blok_6a3a6a6e11679 .verwijzing-tekst {
  color: var(--tekstkleur);
}

/* "Ankerzondag" — titel en intro-tekst links uitlijnen (i.p.v. centraal) en
   de verwijzingen onder elkaar i.p.v. in kolommen naast elkaar. !important
   omdat de kolommen-grid en centrering standaard uit het thema komen. */
#blok_6a3a7a446fcb4 > .section-inner-wrap > h2,
#blok_6a3a7a446fcb4 .verwijzingen-tekst,
#blok_6a3a7a446fcb4 .verwijzingen-tekst p {
  text-align: left !important;
}

section.verwijzingen .verwijzing-columns a {
  justify-content: flex-start;
}

.quote span {
  display: block;
  margin-top: 18px;
  color: var(--hoofdkleur-3);
  font-weight: 850;
}
.quote {
  background: var(--gradient);
  color: #fff;
  border-radius: var(--borderradius);
  padding: 34px;
  text-align: center;
}
blockquote {
  margin: 0px;
  color: #fff;
}

.paginablokken section .cta {
  padding: 0px 72px;
  background: #fff;
}

.paginablokken section .cta .button {
  margin-top: 30px;
}

<div class="group-badges"><span class="badge">Bijbelgroep</span>
<span class="badge">Rozenkransgroep</span>
<span class="badge">Kleine groep</span></div>

.cta-box {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 52px;
  align-items: center;
  background: var(--footerkleur);
  color: #fff;
  border-radius: 8px;
  padding: 52px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.cta-box h2,
.cta-box p {
  color: #fff;
}
.cta-box p {
  color: #d9e6f3;
  max-width: 690px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0077a9;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 18px;
}

.cta-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 28px;
}

.cta-card strong {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
}
/* ========================================
   Filter vieringenoverzicht
======================================== */

.overzicht-filter:not(.buttons) {
    display: block;
    width: min(100%, 420px);
    min-height: 52px;
    margin: 24px 0 32px;
    padding: 12px 52px 12px 18px;

    color: var(--tekstkleur, #333);
    background-color: var(--achtergrondkleur-3, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px;

    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: var(--borderradius, 10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.overzicht-filter:not(.buttons):hover {
    border-color: var(--hoofdkleur-1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.overzicht-filter:not(.buttons):focus,
.overzicht-filter:not(.buttons):focus-visible {
    border-color: var(--hoofdkleur-1);
    outline: none;
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--hoofdkleur-1) 18%,
            transparent
        ),
        0 6px 18px rgba(0, 0, 0, 0.07);
}

.overzicht-filter:not(.buttons):disabled {
    color: rgba(0, 0, 0, 0.45);
    background-color: #f3f3f3;
    cursor: not-allowed;
    opacity: 0.75;
}

/* Opties in de geopende dropdown */
.overzicht-filter option {
    color: var(--tekstkleur, #333);
    background: #fff;
    font-weight: 400;
}

/* Mobiel */
@media (max-width: 600px) {
    .overzicht-filter {
        width: 100%;
        min-height: 50px;
        margin: 20px 0 28px;
        padding-right: 48px;
        background-position: right 16px center;
        font-size: 16px; /* Voorkomt automatisch inzoomen op iPhone */
    }
}
/* Mobiel */
@media (max-width: 600px) {
    .cta {
        padding: 40px 16px;
    }

    .cta-box {
        gap: 24px;
        padding: 24px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
    }

    .cta-card {
        padding: 24px;
        border-radius: 12px;
    }

    .cta h2 {
        font-size: clamp(28px, 9vw, 38px);
        overflow-wrap: anywhere;
    }

    .cta-card .btn {
        width: 100%;
    }
}
.boventitel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hoofdkleur-1);
}

#blok_6a4bb5aa263cd div.collumns-2 {
  gap: 48px;
  padding: 38px;
  border: 1px solid #d9e5ef;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #f5fcfb);
}

/* #blok_6a4bb5aa263cd .section-inner-wrap {
  padding-top: 0;
} */

.boventitel::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 3px;
  border-radius: 99px;
  background: var(--gradient);
}

.eyebrow::before {
  content: "";
  width: 32px;
  height: 3px;
  border-radius: 99px;
  background: var(--gradient);
}

#blok_6a4ce7e50b8f4 a div.verwijzing-boventitel {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hoofdkleur-1);
}

#blok_6a4ce8a2c0c34 .verwijzing-columns > a img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

#blok_6a4ce8a2c0c34 .verwijzing-columns .text-block {
  padding: 20px 24px 24px;
}

#blok_6a4ce8a2c0c34 .verwijzing-columns h4 {
  color: #101828;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

#blok_6a4ce8a2c0c34 .verwijzing-columns .post-info:empty {
  display: none;
}

#blok_6a4ce8a2c0c34 .verwijzing-columns a {
  padding: 0;
}

#blok_6a4ce8a2c0c34 .verwijzing-titel {
  padding: 20px 24px 24px;
  color: #101828;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* "Mariakapellen" — zelfde beeldvullende foto-kaart-stijl als de andere
   kaarten-blokken op de pagina (#blok_6a4ce8a2c0c34, #blok_6a3a6a6e11679),
   met daarbij per kaart een locatie-tekst (openingstijden). Die tekst leest
   als lopende tekst beter links uitgelijnd dan gecentreerd, dus die
   overschrijven we met !important op de var(--verwijzing-text-align) die
   het thema inline zet. */

#mariakapellen .verwijzing-columns a {
  padding: 0;
  background-color: #ffffff;
}

#mariakapellen .verwijzing-columns a img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

#mariakapellen .tekst-container {
  padding: 20px 24px 24px;
  gap: 8px;
}

#mariakapellen .verwijzing-titel {
  color: #101828;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

#mariakapellen .verwijzing-tekst {
  color: var(--tekstkleur);
  font-size: 14px;
  line-height: 1.6;
}

/* Aantal kolommen expliciet zetten (het blok mist de inline
   --aantal-columns die de andere kaarten-blokken wel hebben) */
@media (min-width: 768px) {
  #mariakapellen .verwijzing-columns {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 767px) {
  #mariakapellen .verwijzing-columns {
    grid-template-columns: 1fr !important;
  }
}

/* "Wat kan ik doen?" — FAQ-achtig tekstblok zonder afbeelding, met meerdere
   h4/p-paren na elkaar. Volle breedte i.p.v. halve kolom naast een lege
   .media-blok, met een scheidingslijn tussen de vraag-groepen (zelfde
   rgba-lijnkleur als .alpha-fact). */

.verwijzing-columns-8 .verwijzing-titel {
  display: flex;
  align-items: center;
  gap: 8px;
}

#mariakapellen i {
  color: var(--hoofdkleur-1);
}

#blok_6a4cd88190feb.boven-geen-ruimte {
  padding-top: 72px;
}

#blok_6a4cd88190feb .collumns-2 {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: stretch;
}

#blok_6a4cd88190feb .tekst-inner {
  height: 100%;
}

/* Eerste kolom */
#blok_6a4cd88190feb .collumns-2 > .div-block.tekst:first-child .tekst-inner {
  position: relative;
  padding: 44px;
  border-radius: var(--borderradius);
  background: var(--footerkleur);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.16);
}

#blok_6a4cd88190feb .collumns-2 > .div-block.tekst:first-child h4 {
  color: #fff;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
}

#blok_6a4cd88190feb .collumns-2 > .div-block.tekst:first-child p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.75;
  margin: 0;
}

/* Tweede kolom */
#blok_6a4cd88190feb .collumns-2 > .div-block.tekst:nth-child(2) .tekst-inner {
  padding: 44px;
  border-radius: var(--borderradius);
  background: var(--achtergrondkleur-1);
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.1);
}

#blok_6a4cd88190feb h4 {
  color: var(--koptekstkleur);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

#blok_6a4cd88190feb .collumns-2 > .div-block.tekst:nth-child(2) h4 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#blok_6a4cd88190feb .collumns-2 > .div-block.tekst:nth-child(2) h4::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 3px;
  margin-top: 16px;
  border-radius: 999px;
  background: var(--gradient);
}

#blok_6a4cd88190feb
  .collumns-2
  > .div-block.tekst:nth-child(2)
  h4:not(:first-child) {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(16, 24, 40, 0.1);
}

#blok_6a4cd88190feb p {
  color: var(--tekstkleur);
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
}

#blok_6a4cd88190feb a {
  color: var(--hoofdkleur-1);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid
    color-mix(in srgb, var(--hoofdkleur-1) 35%, transparent);
}

#blok_6a4cd88190feb a:hover {
  color: var(--hoofdkleur-2);
  border-bottom-color: currentColor;
}

/* Mobiel */
@media (max-width: 900px) {
  #blok_6a4cd88190feb {
    padding: 64px 0;
  }

  #blok_6a4cd88190feb .collumns-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #blok_6a4cd88190feb .collumns-2 > .div-block.tekst:first-child .tekst-inner,
  #blok_6a4cd88190feb .collumns-2 > .div-block.tekst:nth-child(2) .tekst-inner {
    padding: 28px;
  }
}

#viering-van-barmhartigheid h3 {
  color: var(--koptekstkleur);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}

#viering-van-barmhartigheid h4 {
  color: var(--koptekstkleur);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.2;
  margin: 40px 0 16px;
  letter-spacing: -0.02em;
}

#viering-van-barmhartigheid p {
  color: var(--tekstkleur);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 18px;
}

#viering-van-barmhartigheid blockquote {
  position: relative;
  margin: 34px 0 10px;
  padding: 32px;
  border-radius: var(--borderradius);
  background: var(--gradient-light);
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.08);
}

#viering-van-barmhartigheid blockquote p {
  color: var(--koptekstkleur);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  font-style: italic;
  margin: 0;
}

#viering-van-barmhartigheid h4 + p {
  padding: 28px;
  border-radius: var(--borderradius);
  background: var(--achtergrondkleur-2);
  border-left: 4px solid var(--hoofdkleur-3);
}

/* Afbeelding */
#viering-van-barmhartigheid .div-block.media {
  position: relative;
}

#viering-van-barmhartigheid .div-block.media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  border-radius: var(--borderradius);
  box-shadow: 0 22px 55px rgba(16, 24, 40, 0.16);
}

#viering-van-barmhartigheid blockquote:before {
  display: none;
}

/* Mobiel */
@media (max-width: 900px) {
  #viering-van-barmhartigheid {
    padding: 64px 0;
  }

  #viering-van-barmhartigheid .collumns-2 {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  #viering-van-barmhartigheid .tekst-inner {
    max-width: none;
  }

  #viering-van-barmhartigheid blockquote {
    padding: 28px;
  }

  #viering-van-barmhartigheid .div-block.media::before {
    inset: 22px -14px -14px 22px;
  }
}

#blok_6a4cffdd4e192 .verwijzing-columns > a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
  text-align: left;
}

#blok_6a4cffdd4e192 .verwijzing-icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  justify-self: start;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#blok_6a4cffdd4e192 .verwijzing-icon i {
  font-size: 32px;
  line-height: 1;
  aspect-ratio: 1 / 1;
}

#blok_6a4cffdd4e192 .verwijzing-boventitel,
#blok_6a4cffdd4e192 .verwijzing-titel,
#blok_6a4cffdd4e192 .verwijzing-tekst {
  grid-column: 2;
  text-align: left;
}

#blok_6a4cffdd4e192 .verwijzing-boventitel:empty {
  display: none;
}

#blok_6a4cffdd4e192 .section-inner-wrap {
  max-width: 800px;
}

/* Blok: De viering */
#blok_6a4cffdd4f9f1 {
  background: var(--achtergrondkleur-3);
  padding: clamp(56px, 8vw, 96px) 0;
}

#blok_6a4cffdd4f9f1 .section-inner-wrap {
  max-width: 960px;
  margin: 0 auto;
}

#blok_6a4cffdd4f9f1 .collumns-2 {
  display: block;
}

#blok_6a4cffdd4f9f1 .media {
  display: none;
}

#blok_6a4cffdd4f9f1 .tekst {
  width: 100%;
}

#blok_6a4cffdd4f9f1 .tekst-inner {
  background: var(--achtergrondkleur-1);
  border: 1px solid rgba(0, 110, 195, 0.12);
  border-radius: var(--borderradius);
  padding: clamp(28px, 5vw, 56px);
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.08);
}

#blok_6a4cffdd4f9f1 .boventitel {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--hoofdkleur-1);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#blok_6a4cffdd4f9f1 h3 {
  max-width: 720px;
  margin: 0 0 22px;
  color: var(--koptekstkleur);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}

#blok_6a4cffdd4f9f1 p {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--tekstkleur);
  font-size: 1.05rem;
  line-height: 1.75;
}

#blok_6a4cffdd4f9f1 .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

#blok_6a4cffdd4f9f1 .grid > div {
  position: relative;
  overflow: hidden;
  background: var(--achtergrondkleur-2);
  border: 1px solid rgba(0, 110, 195, 0.12);
  border-radius: var(--borderradius);
  padding: 22px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

#blok_6a4cffdd4f9f1 .grid > div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gradient);
}

#blok_6a4cffdd4f9f1 .grid > div:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 110, 195, 0.25);
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.08);
}

#blok_6a4cffdd4f9f1 .grid > div p:first-child {
  margin: 0 0 6px;
  color: var(--koptekstkleur);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

#blok_6a4cffdd4f9f1 .grid > div p:last-child {
  margin: 0;
  color: var(--tekstkleur);
  font-size: 0.94rem;
  line-height: 1.55;
}

@media (max-width: 700px) {
  #blok_6a4cffdd4f9f1 {
    padding: 48px 0;
  }

  #blok_6a4cffdd4f9f1 .tekst-inner {
    padding: 28px 22px;
  }

  #blok_6a4cffdd4f9f1 .grid {
    grid-template-columns: 1fr;
  }
}

/* Tekstblokken: Herdenking + Begraving */
#blok_6a4cffdd52733,
#blok_6a4cffdd50a8d {
  background: var(--achtergrondkleur-1);
  padding: clamp(56px, 8vw, 96px) 0;
}

#blok_6a4cffdd52733 .section-inner-wrap,
#blok_6a4cffdd50a8d .section-inner-wrap {
  max-width: 960px;
  margin: 0 auto;
}

#blok_6a4cffdd52733 .collumns-2,
#blok_6a4cffdd50a8d .collumns-2 {
  display: block;
}

#blok_6a4cffdd52733 .media,
#blok_6a4cffdd50a8d .media {
  display: none;
}

#blok_6a4cffdd52733 .tekst,
#blok_6a4cffdd50a8d .tekst {
  width: 100%;
}

#blok_6a4cffdd52733 .tekst-inner,
#blok_6a4cffdd50a8d .tekst-inner {
  position: relative;
  overflow: hidden;
  background: var(--achtergrondkleur-2);
  border: 1px solid rgba(0, 110, 195, 0.12);
  border-radius: var(--borderradius);
  padding: clamp(28px, 5vw, 56px);
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.06);
}

#blok_6a4cffdd52733 .tekst-inner::before,
#blok_6a4cffdd50a8d .tekst-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--gradient);
}

#blok_6a4cffdd52733 .boventitel,
#blok_6a4cffdd50a8d .boventitel {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--hoofdkleur-1);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#blok_6a4cffdd52733 h3,
#blok_6a4cffdd50a8d h3 {
  max-width: 720px;
  margin: 0 0 22px;
  color: var(--koptekstkleur);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}

#blok_6a4cffdd52733 p,
#blok_6a4cffdd50a8d p {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--tekstkleur);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* ------------------------------------------------------------
   1. Intro-sectie (titel + inleidende tekst) — alleen locatiepagina
   ------------------------------------------------------------ */
body.page-id-242 .content-section.standaard {
  padding-top: 64px;
  padding-bottom: 48px;
}

body.page-id-242 .content-section.standaard h1 {
  color: var(--koptekstkleur);
  margin-bottom: 16px;
}

body.page-id-242 .content-section.standaard .rounded.content > div p {
  color: var(--tekstkleur);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   2. Locatie-overzicht — sectie-achtergrond — alleen locatiepagina
   Zachte gradient-achtergrond achter de kaarten voor rust en diepte.
   Blijft bewust beperkt tot deze pagina (verandert niet de
   homepage-sectie die dezelfde "boven kolommen"-klassen deelt).
   ------------------------------------------------------------ */
body.page-id-242 section.verwijzingen.boven.kolommen {
  background: var(--gradient-light);
  padding-top: 56px;
  padding-bottom: 56px;
}

body.page-id-242 section.verwijzingen.boven.kolommen .verwijzing-columns {
  row-gap: 32px;
  column-gap: 32px;
}

/* ------------------------------------------------------------
   3. Kaart-stijl "verwijzingen" — SITEBREED
   Basisvorm: afgeronde hoeken, zachte schaduw, duidelijke hiërarchie.
   Geldt voor elke section.verwijzingen op de hele site.
   ------------------------------------------------------------ */
section.verwijzingen .verwijzing-columns > a.box-shadow {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--achtergrondkleur-1);
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: var(--borderradius);
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

section.verwijzingen .verwijzing-columns > a.box-shadow:hover,
section.verwijzingen .verwijzing-columns > a.box-shadow:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(0, 110, 195, 0.25);
  box-shadow:
    0 20px 40px rgba(16, 24, 40, 0.12),
    0 0 0 3px rgba(0, 168, 227, 0.08);
}

section.verwijzingen .verwijzing-columns > a.box-shadow:focus-visible {
  outline: 2px solid var(--hoofdkleur-2);
  outline-offset: 2px;
}

/* Dunne accentlijn bovenaan de kaart, subtiel in de hoofdkleuren */
section.verwijzingen .verwijzing-columns > a.box-shadow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}

section.verwijzingen .verwijzing-columns > a.box-shadow:hover::before,
section.verwijzingen .verwijzing-columns > a.box-shadow:focus-visible::before {
  opacity: 1;
}

/* ------------------------------------------------------------
   4. Kaart-afbeelding — SITEBREED
   Waar een kaart een <img> bevat (zoals de locatiefoto's): vult de
   volledige breedte van de kaart (bleed) met afgeronde bovenhoeken
   en een zachte zoom bij hover. Kaarten zonder afbeelding (bijv. de
   icoon-kaarten op de homepage) worden hierdoor niet geraakt.
   ------------------------------------------------------------ */
section.verwijzingen .verwijzing-columns > a.box-shadow img {
  display: block;
  width: calc(100% + 40px);
  height: 220px;
  margin: -20px -20px 0 -20px;
  object-fit: cover;
  border-radius: var(--borderradius) var(--borderradius) 0 0;
  transition: transform 0.4s ease;
  max-width: none;
}

section.verwijzingen .verwijzing-columns > a.box-shadow:hover img,
section.verwijzingen .verwijzing-columns > a.box-shadow:focus-visible img {
  transform: scale(1.06);
}

/* ------------------------------------------------------------
   5. Kaart-tekstinhoud — SITEBREED
   Duidelijke hiërarchie: titel > tekst (omschrijving/adres/tijden)
   ------------------------------------------------------------ */
section.verwijzingen .tekst-container {
  padding-top: 20px;
  gap: 4px;
}

section.verwijzingen .verwijzing-titel {
  color: var(--koptekstkleur) !important;
  font-weight: 700;
  transition: color 0.25s ease;
}

section.verwijzingen .verwijzing-columns > a.box-shadow:hover .verwijzing-titel,
section.verwijzingen
  .verwijzing-columns
  > a.box-shadow:focus-visible
  .verwijzing-titel {
  color: var(--hoofdkleur-1) !important;
}

section.verwijzingen .verwijzing-tekst {
  color: var(--tekstkleur) !important;
  font-size: var(--s-text, 15px);
  line-height: 1.6;
  margin-top: 8px !important;
}

/* ------------------------------------------------------------
   6. Adres- en tijd-iconen (Font Awesome) — SITEBREED
   Subtiel gekleurd in de hoofdkleur, geldt overal waar deze
   iconen in een verwijzingen-kaart voorkomen.
   ------------------------------------------------------------ */
section.verwijzingen .verwijzing-tekst i.fa-location-dot,
section.verwijzingen .verwijzing-tekst i.fa-clock {
  color: var(--hoofdkleur-2);
  width: 16px;
  margin-right: 8px;
  text-align: center;
}

/* ------------------------------------------------------------
   7. Kaart-sectie onderaan (interactieve kaart / "Bekijk op kaart")
   — alleen locatiepagina
   ------------------------------------------------------------ */
body.page-id-242 section.tekst-afbeelding.standaardkleur .collumns-2.map {
  background: var(--achtergrondkleur-3);
  border-radius: var(--borderradius);
  padding: 40px;
}

body.page-id-242
  section.tekst-afbeelding.standaardkleur
  .collumns-2.map
  .tekst-inner
  h3 {
  color: var(--koptekstkleur);
  margin-bottom: 8px;
}

body.page-id-242
  section.tekst-afbeelding.standaardkleur
  .collumns-2.map
  .tekst-inner
  p {
  color: var(--tekstkleur);
}

body.page-id-242
  section.tekst-afbeelding.standaardkleur
  .collumns-2.map
  .div-block.media {
  border-radius: var(--borderradius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
}

body.page-id-242
  section.tekst-afbeelding.standaardkleur
  .collumns-2.map
  .div-block.media
  iframe,
body.page-id-242
  section.tekst-afbeelding.standaardkleur
  .collumns-2.map
  .div-block.media
  img {
  border-radius: var(--borderradius);
  display: block;
}

/* ============================================================
   8. RESPONSIVE — tablet en mobiel
   Volgt de bestaande breakpoints van het thema (767px / 479px).
   Kaart-regels (sitebreed) staan los van de pagina-specifieke regels.
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  body.page-id-242 section.verwijzingen.boven.kolommen .verwijzing-columns {
    row-gap: 24px;
    column-gap: 24px;
  }

  section.verwijzingen .verwijzing-columns > a.box-shadow img {
    height: 200px;
  }
}

/* Mobiel (tablet-portret) */
@media (max-width: 767px) {
  body.page-id-242 .content-section.standaard {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  body.page-id-242 section.verwijzingen.boven.kolommen {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  body.page-id-242 section.verwijzingen.boven.kolommen .verwijzing-columns {
    row-gap: 20px;
    column-gap: 20px;
  }

  section.verwijzingen .verwijzing-columns > a.box-shadow img {
    height: 180px;
  }

  body.page-id-242 section.tekst-afbeelding.standaardkleur .collumns-2.map {
    padding: 24px;
  }

  footer .footer-row-top {
    display: flex;
    flex-direction: column;
  }

  #contact .buttons {
    justify-content: center;
  }
}
/* Mobiel (smal) */
@media (max-width: 479px) {
  section.verwijzingen .verwijzing-columns > a.box-shadow img {
    height: 160px;
  }

  section.verwijzingen .verwijzing-columns > a.box-shadow:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 767px) {
  section.hero .div-block.media {
    align-items: center !important;
  }

  section.hero .div-block.media img,
  section.hero:not(#blok_667a901bbde80) .div-block.media img,
  section.hero .div-block.media::after,
  section.hero:not(#blok_667a901bbde80) .div-block.media::after {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 514 / 516;
  }
}
/* ------------------------------------------------------------
   9. Toegankelijkheid — verminderde beweging — SITEBREED
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  section.verwijzingen .verwijzing-columns > a.box-shadow,
  section.verwijzingen .verwijzing-columns > a.box-shadow img,
  section.verwijzingen .verwijzing-titel {
    transition: none !important;
  }
}

#onze-locaties a h4 {
  text-align: left;
}

#onze-locaties .tekst-container {
  padding-top: 0;
}

/** toegevoegt door piet **/

/* Single paginas met afbeelding bovenaan inhoud. */
body.single section.content-section.standaard .section-inner-wrap .rounded:has(.bovenaan-image) {
    --padding: clamp(20px, 5vmin, 50px);

    overflow: hidden;
    background: #fff !important;
    padding: 0px var(--padding) var(--padding) var(--padding) !important;
}

body.single section.content-section .section-inner-wrap .rounded .bovenaan-image {
    width: calc(100% + var(--padding) + var(--padding));
    max-width: none;
    margin-left: calc(-1 * var(--padding));
}

body.single section.content-section:has(.section-inner-wrap .rounded .bovenaan-image) {
  background: var(--gradient-light);
}

/* Doneren pagina page-breaker */
.page-breaker.breaker-image .section-inner-wrap div.text-shadow.div-block {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* tekst naast icoon verwijzingen */
.verwijzing-columns.verwijzing-columns-3 > a {     display: flex !important;     flex-direction: row !important;     align-items: flex-start !important;     gap: 30px; }
.verwijzing-columns.verwijzing-columns-3 > a > .verwijzing-icon {     flex: 0 0 auto !important;     align-self: flex-start; }
.verwijzing-columns.verwijzing-columns-3 > a > .tekst-container {     flex: 1 1 auto !important;     width: auto !important;     min-width: 0;     margin-top: 0 !important;     padding-top: 0 !important; }
.verwijzing-columns.verwijzing-columns-3 > a > .tekst-container h4 {     margin-top: 0 !important; }

.verwijzing-columns-4 > a {     display: grid !important;     grid-template-columns: auto 1fr;     column-gap: 24px;     align-items: start; }
.verwijzing-columns-4 > a > .verwijzing-icon {     grid-column: 1;     grid-row: 1 / 5; }
.verwijzing-columns-4 > a > .verwijzing-boventitel, .verwijzing-columns-4 > a > h4, .verwijzing-columns-4 > a > .verwijzing-tekst, .verwijzing-columns-4 > a > .button {     grid-column: 2; }
.verwijzing-columns-4 > a > h4 {     margin-top: 0 !important; }
.verwijzing-columns h4 {     text-align: left !important; }

/* Dropdown locaties nieuwsbrief inschrijving footer */
.checkbox-dropdown {     position: relative; }
.checkbox-dropdown .gfield_label {     display: flex !important;     align-items: center;     justify-content: space-between;     width: 100%;     box-sizing: border-box;     margin: 0 !important;     padding: 14px 48px 14px 16px !important;     border: 1px solid rgba(255,255,255,.3);     border-radius: 12px;     cursor: pointer;     position: relative; }
.checkbox-dropdown .gfield_label::after {     content: "\f078";     font-family: "Font Awesome 6 Pro";     font-weight: 300;     position: absolute;     right: 18px;     top: 50%;     transform: translateY(-50%);     transition: transform .2s ease; }
.checkbox-dropdown.is-open .gfield_label::after {     transform: translateY(-50%) rotate(180deg); }
.checkbox-dropdown .gfield_checkbox {     display: none;     margin: 8px 0 0 !important;     padding: 18px 28px !important;     border: 1px solid rgba(255,255,255,.3);     border-radius: 12px; }
.checkbox-dropdown.is-open .gfield_checkbox {     display: block; }

/* Aanvink vakjes nieuwsbrief */
#field_4_5 .gfield_checkbox .gchoice {     display: flex !important;     align-items: center !important;     gap: 10px; }
#field_4_5 .gfield_checkbox .gchoice input[type="checkbox"] {     width: 18px !important;     height: 18px !important;     min-width: 18px !important;     min-height: 18px !important;     margin: 0 !important;     padding: 0 !important;     transform: none !important;     appearance: auto !important; }
#field_4_5 .gfield_checkbox .gchoice label {     font-weight: 400 !important;     font-size: inherit !important;     line-height: 1.4 !important;     margin: 0 !important;     padding: 0 !important; }