@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic");
@import url('https://fonts.googleapis.com/css?family=Raleway:700,900');
@import url('https://fonts.googleapis.com/css?family=Baloo+Paaji');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');


:root {
  --blockquote-content-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23151513'><path d='M9.983 3v7.391C9.983 16.095 6.252 19.961 1 21l-.995-2.151C2.437 17.932 4 15.211 4 13H0V3h9.983zM24 3v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151C16.437 17.932 18 15.211 18 13h-3.983V3H24z'/></svg>");
  --radius: 2em;
  --radius-inner: 1.5em;
  --color-yellow: #e7b541;
  --color-mm-grey: #151513;
  --color-menu-glass: rgba(255, 255, 255, 0.25);
  --color-menu-glass-full: rgba(255, 255, 255, 0.8);
  --color-full:rgba(209, 209, 209, 0.5);
  --color-download-item:rgb(255, 255, 255);
  --color-download-size:#999;
  --color-full2:rgba(0, 0, 0, 0.483);
  --color-text: #151513;
  --color-text2: #fff;
  --logo-image-top: url("https://www.markmooibroek.com/images/logo-black-top.svg");
  --logo-image-intro: url("https://www.markmooibroek.com/images/logo-markmooibroek.svg");
  --color-content: #cbcbc3;
  --color-content-gallery: #f3f1eb;
  --color-content-footer: #fff;
  --mm-bg:    rgba(255, 255, 255, 0.28);
  --mm-brd:   #ffffff4c;
  --mm-bg-hover: rgba(255,255,255,.36);
  --color-panel: #272724;
  --color-overlay-blog: rgba(0,0,0,0.2); /* 40% zwart */
  --color-auteur: #f8f8f8ba;
  --color-footer-button: #0000000f;
  --color-footer-button2: #0000002e;
  --color-caption: #151513;
  --color-catline: #444;
  --color-gal-status: #4caf4f1b;
  --color-scroll-box-shadow: rgba(255,255,255,0.12);
  --color-scroll-finger-box-shadow: rgba(255,255,255,0.9);
  --color-leestijd: #666;
  --color-reactie-tekst: #333;
  --color-reactie-tekst-p: #333;
  --color-menu-border: rgba(0,0,0,.08);
  --color-bg-theme: rgba(0, 0, 0, 0.7);
  --color-link: #999;
}

html[data-theme="dark"]{
   --blockquote-content-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23ffffff'><path d='M9.983 3v7.391C9.983 16.095 6.252 19.961 1 21l-.995-2.151C2.437 17.932 4 15.211 4 13H0V3h9.983zM24 3v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151C16.437 17.932 18 15.211 18 13h-3.983V3H24z'/></svg>");
  --color-menu-glass: rgba(0, 0, 0, 0.45);
  --color-menu-glass-full: rgba(0, 0, 0, 0.8);
  --color-full:rgba(255, 255, 255, 0.5);
  --color-download-item:rgb(89 89 89);
  --color-download-size:#fff;
  --color-full2:rgb(0, 0, 0);
  --color-text: #fff;
  --color-text2: #151513;
  --logo-image-top: url("https://www.markmooibroek.com/images/logo-black-top-dark.svg");
  --logo-image-intro: url("https://www.markmooibroek.com/images/logo-markmooibroek-dark.svg");
  --color-content: #151513;
  --color-content-gallery: #292929;
  --color-content-footer: #4f4f4d;
  --mm-bg:    rgba(0, 0, 0, 0.28);
  --mm-brd:   #444440;
  --mm-bg-hover: rgba(0, 0, 0, 0.56);
  --color-panel: #151513;
  --color-overlay-blog: rgba(255, 255, 255, 0.2); /* 40% zwart */
  --color-auteur: #f8f8f821;
  --color-footer-button: #83838317;
  --color-footer-button2: #00000069;
  --color-caption: #505050;
  --color-catline: #ffffffb2;
  --color-gal-status: #4caf4f59;
  --color-scroll-box-shadow: rgba(0, 0, 0, 0.12);
  --color-scroll-finger-box-shadow: rgba(0, 0, 0, 0.9);
  --color-leestijd: #ffffffb8;
  --color-reactie-tekst: #ffffffb9;
  --color-reactie-tekst-p: #000000;
  --color-menu-border: rgba(255,255,255,.12);
  --color-bg-theme: rgba(255, 255, 255, 0.7);
  --color-link: #999;
}

.mm-logo-top {
  display: inline-block;
  position: absolute;
  width: 150px;
  height: 45px;
  background: var(--logo-image-top) no-repeat center/contain;
      top: -24px;
    left: -40px;
}

.mm-logo-footer {
  display: inline-block;
  width: 90px;
  height: 90px;
  background: var(--logo-image-top) no-repeat center/contain;
}

.mm-logo-intro {
  display: inline-block;
  width: 18em;
  height: 12rem;
  background: var(--logo-image-intro) no-repeat center/contain;
}

/* visuele feedback + voorkom klikken tijdens laden */
#gal-more-btn[disabled] { pointer-events: none; }
#gal-more-btn[aria-busy="true"]::after {
  content: " •••";
  display: inline-block;
  animation: dotz 1s steps(4,end) infinite;
}

@keyframes dotz { 0%{content:""} 33%{content:" •"} 66%{content:" ••"} 100%{content:" •••"} }

/* helpt bij veel tegels om layout te stabiliseren */
#main .thumb {
  content-visibility: auto;
  contain-intrinsic-size: 320px 200px; /* schatting; pas aan als je wilt */
}
/* voorkomt iOS scroll-jitter tijdens auto-scrolls */
html { scroll-behavior: auto; }

:root { --header-h: 100px; }          /* pas aan aan jouw headerhoogte */
html { scroll-padding-top: var(--header-h); }
#main, #blog, #downloads { scroll-margin-top: var(--header-h); }

.highlighted-blog-figure { position: relative; }

/* Laagvolgorde forceren */
.highlighted-blog-blur-img,
.highlighted-blog-img { position: relative; z-index: 1; }

.highlighted-blog-overlay { position: relative; z-index: 2; }

/* Badge altijd boven alles */
.badge-new--highlight {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 999;          /* hoger dan overlay */
  display: inline-block;
  font-size: 12px; line-height: 1; font-weight: 700;
  background: #ff3b30; color: #fff;
  padding: 7px 10px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255,59,48,.25);
  pointer-events: none;  /* klik blijft op de kaart */
}

/* Mobiel iets compacter en niet buiten beeld */
@media (max-width: 480px){
  .badge-new--highlight{
    top: 8px; left: 8px;
    padding: 5px 8px; font-size: 11px;
  }
}

.fade-in,
.fade-in-right,
.fade-in-right-fast,
.fade-in-left,
.fade-in-scale,
.fade-in-scale-fast,
.fade-in-rotate,
.fade-in-blur {
  display: block; /* of block als je wilt dat het over volle breedte gaat */
  will-change: transform, opacity;
}

/* Fade in van onder */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 1s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-long {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out 0.5s, transform 1s ease-out 0.5s;
}

.fade-in-long.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in van onder */
.fade-in-fast {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.fade-in-fast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in van rechts */
.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease-out, transform 1s ease-out;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in van rechts */
.fade-in-right-fast {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.3s ease-out, transform 0.2s ease-out;
}

.fade-in-right-fast.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in van links */
.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease-out, transform 1s ease-out;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in met scale (inzoomen) */
.fade-in-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.1s ease-out, transform 0.3s ease-out;
}

.fade-in-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Fade in met scale (inzoomen) */
.fade-in-scale-fast {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.1s ease-out, transform 0.3s ease-out;
}

.fade-in-scale-fast.visible {
  opacity: 1;
  transform: scale(1);
}

/* Fade in met rotatie */
.fade-in-rotate {
  opacity: 0;
  transform: rotate(-10deg);
  transition: opacity 0.7s ease-out, transform 1s ease-out;
}

.fade-in-rotate.visible {
  opacity: 1;
  transform: rotate(0);
}

/* Fade in met blur */
.fade-in-blur {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.7s ease-out, filter 1s ease-out;
}

.fade-in-blur.visible {
  opacity: 1;
  filter: blur(0);
}

.fade-in-clip {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.7s ease-out, clip-path 1s ease-out;
}

.fade-in-clip.visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.fade-in-flip {
  opacity: 0;
  transform: rotateX(-90deg);
  transform-origin: top;
  transition: opacity 0.7s ease-out, transform 1s ease-out;
}

.fade-in-flip.visible {
  opacity: 1;
  transform: rotateX(0);
}

.fade-in-skew {
  opacity: 0;
  transform: skewY(10deg) translateY(20px);
  transition: opacity 0.7s ease-out, transform 1s ease-out;
}

.fade-in-skew.visible {
  opacity: 1;
  transform: skewY(0) translateY(0);
}


.fade-in-shadow {
  opacity: 0;
  transform: translateY(20px);
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.1));
  transition: opacity 0.5s ease-out, transform 0.7s ease-out, filter 0.7s ease-out;
}

.fade-in-shadow.visible {
  opacity: 1;
  transform: translateY(0);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

.fade-in-liquid {
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
  transition: opacity 0.7s ease-out, clip-path 1.2s cubic-bezier(.7, 0, .2, 1);
}

.fade-in-liquid.visible {
  opacity: 1;
  clip-path: circle(150% at 50% 50%);
}


/* LIQUID GLASS STYLES */

.liquidGlass-wrapper {
  display: flex;
  overflow: hidden;

  color: black;
  cursor: pointer;

  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.01);

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidGlass-wrapper-caption {
  position: relative;
  overflow: visible;
  display: inline-block;
 background: var(--color-caption);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  padding: 0.75em 1.2em;
  border-radius: 12px;
  border: 1px solid var(--color-mm-grey);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  font-size: 0.95em;
  line-height: 1.4;
  text-align: center;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.liquidGlass-wrapper-caption::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--color-caption);
  transition: border-bottom-color 0.3s ease;
}

.liquidGlass-wrapper-caption:hover {
  background: #000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}


.liquidGlass-wrapper-caption:hover::after {
  border-bottom-color: #000
}

.corner-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 275px;
  height: 275px;
}

.corner-container:hover .corner-fold {
  border-top-width: 375px;
  border-left-width: 375px;
}

.photo-stack {
  position: absolute;
  top: 0;
  right: 0;
  width: 275px;
  height: 275px;
  overflow: hidden;
  z-index: 11;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transition: width 0.4s ease, height 0.4s ease;
}

.corner-container:hover .photo-stack {
  width: 375px;
  height: 375px;
}

.photo-stack img {
  position: absolute;
  top: 0;
  right: 0;
  width: 375px;
  height: 375px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.photo-stack img.active {
  opacity: 1;
}

.corner-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 275px solid #cbcbc3;
  border-left: 275px solid transparent;
  box-shadow: -5px 5px 20px rgb(0 0 0 / 90%);
  z-index: 10;
  transition: border-top-width 0.4s ease, border-left-width 0.4s ease;
  background-color: #1b1b19;
}

/* === Mobiel: max 769px === */
@media (max-width: 769px) {
  .corner-container {
    width: 150px;
    height: 150px;
  }

  .corner-container:hover .corner-fold {
    border-top-width: 250px;
    border-left-width: 250px;
  }

  .photo-stack {
    width: 150px;
    height: 150px;
  }

  .corner-container:hover .photo-stack {
    width: 250px;
    height: 250px;
  }

  .photo-stack img {
    width: 250px;
    height: 250px;
  }

  .corner-fold {
    border-top: 150px solid #cbcbc3;
    border-left: 150px solid transparent;
  }
}


.new-label {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff3b3f;
  color: white;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 15;
}

.liquidGlass-wrapper-zoek {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 700px;
  text-align: center;
  box-sizing: border-box;

  /* 🔒 Belangrijk voor mobiel: */
  max-height: calc(100vh - 175px); /* houdt 100px over (80px top + 1em bottom) */
  overflow-y: auto;
  box-shadow: 0px 0px 40px 1000px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.01);
background-color: #00000054;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

@media (max-width: 769px) {
 .liquidGlass-wrapper-zoek  {
    width: 100%;
  }
}

   

.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(7px);
  /* filter: url(#glass-distortion); */
  overflow: hidden;
  isolation: isolate;
}

.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: var(--color-menu-glass);
}

.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;

  overflow: hidden;
  border-bottom: 1px solid var(--color-menu-glass-full);

   /* box-shadow: inset 0px 1px 1px 0 rgba(255, 255, 255, 0.5), inset 1px 0px 1px 0px rgba(255, 255, 255, 0.5); */
}

.liquidGlass-text {
  z-index: 3;
  color: #fff;
  width: 100%;
}


.mm-header {
  padding: 0.8em 0.8em;
}

.mm-header,
.mm-header > div {
}

.mm-header:hover {
  padding: 1.2em 1.2em;
}

.mm-header:hover > div {
}

.mm-header svg {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.mm-header:hover svg {
  transform: scale(0.95);
}

.mm-zoek {
  padding: 1.5em;
  border-radius: var(--radius);
}

.mm-zoek,
.mm-zoek > div {
  border-radius: var(--radius);
}

.mm-zoek:hover {
  padding: 2em 2em;
}

@media (max-width: 769px) {
.mm-zoek {
  padding: 0.5em 1em 0.2em 1em;
  border-radius: var(--radius);
}

.mm-zoek:hover {
  padding: 0.5em 1em 0.2em 1em;
}
}

.mm-zoek:hover > div {
  border-radius: var(--radius);
}

.mm-zoek svg {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}


.mm-zoek:hover svg {
  transform: scale(0.95);
}

@media (max-width: 769px) {
	.mm-zoek:hover svg {
  transform: none;
}
}

@keyframes moveBackground {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% -500%;
  }
}
.custom-swiper-buttons {
  display: flex;
  justify-content: flex-end;
  margin: 10px 20px 0 20px;
  gap: 10px;
}

.mm-gallery-button {
  background: #333;
  color: #fff;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

.mm-gallery-button:hover {
  background: #555;
  transform: scale(1.05);
}

.loader-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.429);
      backdrop-filter: blur(7px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      z-index: 9999;
      transition: opacity 0.4s ease;
    }

    .progress-bar {
      width: 60%;
      height: 10px;
	  backdrop-filter: blur(7px);
      border-radius: var(--radius);
      overflow: hidden;
      margin-top: 1em;
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      background-color: #fff;
      transition: width 0.3s ease;
    }

    .progress-text {
      font-size: 1.2em;
      color: #fff;
    }

    .page-content {
      padding: 3em;
    }

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

body{
	background-color: var(--color-mm-grey);
}



.shimmer {
  background: linear-gradient(
    90deg,
    #e0e0e0 0%,
    #f0f0f0 50%,
    #e0e0e0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

@font-face {
	font-family: "San Francisco";
	font-weight: 400;
	src: url("../webfonts/sanfranciscodisplay-regular-webfont.woff");
  }

  @font-face {
	font-family: "San Francisco bold";
	font-weight: 400;
	src: url("../webfonts/sanfranciscodisplay-bold-webfont.woff");
  }

  @font-face {
	font-family: "San Francisco medium";
	font-weight: 400;
	src: url("../webfonts/sanfranciscodisplay-rmedium-webfont.woff");
  }

  .text-filter{
	margin-top: -20px;
  }
  .text-filter-layer{
	position: relative;
	right: -200px
  }

    @media screen and (max-width: 736px) {
		.text-filter-layer{
	right: -85px
  }

	}

	  .reels-text{
	position: relative;
	margin: 0 auto;
  }

  
.sort-dropdown-container{
	display: grid;
  grid-template-columns: 1fr 1fr; /* 2 kolommen van gelijke breedte */
  gap: 1em; /* optioneel, ruimte tussen items */
}

.sort-dropdown-container {
      display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}

.filter-grid-container{
  display: grid;
  grid-auto-flow: column; /* items naast elkaar */
  grid-auto-columns: max-content; /* kolommen zo breed als inhoud */
  gap: 1em; /* optioneel: ruimte tussen de items */
}


  #pin{
	pointer-events: none;
    top: 10px;
    font-size: 1.2em;
    right: 10px;
    margin: 0;
    position: absolute;
    z-index: 1;
	color: #fff;
	float: right;
	display: block;
  }

  #pin h4{
	color: #fff !important;
  }

  #newpost{
	pointer-events: none;
    top: 30px;
    left: 8px;
    margin: 0;
    position: absolute;
    z-index: 1;
    float: left;

  }

  #newpost_text{
	font-size: 12px;
    color: #212121;
    position: absolute;
    top: -20px;
    left: 6px;
  }

  @media screen and (max-width: 480px) {
	#pin{
		top: 10px;
		font-size: 1em;
		right: 10px;
	  }
  }
  

  .move_top{
    position: fixed;
    bottom: -50px;
	padding-top: 5px;
	width: 63px;
	height: 58px;
    z-index: 9999;
	right: 0;
    background: #fff;
    padding: 1em;
    text-align: center;
	font-size: 18px;
	opacity: 0;
	box-shadow: 0 4px 60px rgba(0, 0, 0, 0.15);
}


.move_top_open {
	opacity: 1;
	bottom: 0px;
  }
  
  .transition {    
	-webkit-transition: all 0.5s ease-in-out;
	  -moz-transition: all 0.5s ease-in-out;
	  -o-transition: all 0.5s ease-in-out;
	  transition: all 0.5s ease-in-out;
  }

  body.is-preload .move_top {
	
	-moz-transform: translateY(80em);
	-webkit-transform: translateY(80em);
	-ms-transform: translateY(80em);
	transform: translateY(80em);
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

body::-webkit-scrollbar {
	width: 6px;               /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
	background: rgb(255, 255, 255);        /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
	background-color: rgb(0, 0, 0);    /* color of the scroll thumb */
  }






  canvas {
  object-fit: cover;
	object-position: center center;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

#c1 {
  opacity: 0;
}

#c2 {
  background: #000;
}

/* ===== Glass Language Select (robust, no color-mix) ===== */
:root{
  --glass-bg:        rgba(255,255,255,0.10);
  --glass-bg-strong: rgba(255,255,255,0.18);
  --glass-border:    rgba(255, 255, 255, 0.206);
  --glass-text:      #c9c9c9;
  --glass-ring:      #4d4d4d;
  --glass-shadow:    0 10px 30px rgba(0,0,0,0.10);
  --glass-radius:    14px;
  --glass-blur:      14px;
  --glass-saturate:  140%;
}



/* optioneel */
.language-switcher { position:relative; display:inline-flex; align-items:center; }

.theme-switcher { position:relative; display:inline-flex; align-items:center; }

/* toegankelijk label verbergen */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* GEENCODE’de SVG’s (let op %23 i.p.v. #) */
:root{
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --icon-globe:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20'/%3E%3C/svg%3E");
}

.lang-select.glass{
  -webkit-appearance: none;
  appearance: none;
  color: var(--glass-text) !important;
  background-color: var(--color-menu-glass) !important;
  background:
    var(--icon-chevron) no-repeat right 15px center / 12px,
    linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.20);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition: box-shadow .25s ease, transform .12s ease, border-color .2s ease;
  cursor: pointer;
  
}

.dark-menu.glass{
  -webkit-appearance: none;
  appearance: none;
  color: var(--glass-text) !important;
  background-color: #ffffff0d !important;
  background:
    linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.20);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition: box-shadow .25s ease, transform .12s ease, border-color .2s ease;
  cursor: pointer;
  
}

@media (max-width: 768px) {
  .lang-select.glass{
    width: 75px !important;
  }
}

.lang-select.glass:hover{
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.25);
}

.lang-select.glass:focus{
  outline: 2px solid transparent;       /* voorkom default ring */
  box-shadow:
    0 16px 40px rgba(0,0,0,0.38),
    0 0 0 3px rgba(255, 255, 255, 0.6);     /* eenvoudige focus-ring */
}


/* Light mode variant (andere iconkleur) */
@media (prefers-color-scheme: light){
  :root{
    --glass-bg:        rgba(255,255,255,0.65);
    --glass-bg-strong: rgba(255,255,255,0.85);
    --glass-border:    rgba(0,0,0,0.12);

    --glass-shadow:    0 10px 24px rgba(16,18,37,0.08);
    --glass-ring:      #ffffff;

  }
  .lang-select.glass{ border:1px solid var(--glass-border); color:var(--glass-text); }
}

.lang-select-full.glass{
  -webkit-appearance: none;
  appearance: none;
  color: var(--color-text) !important;
  background-color: #ffffff0d !important;
  background:
    var(--icon-chevron) no-repeat right 15px center / 12px,
    var(--icon-globe)   no-repeat 12px center / 12px,
    linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.20);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition: box-shadow .25s ease, transform .12s ease, border-color .2s ease;
  cursor: pointer;
  
}


.lang-select-full.glass:hover{
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.25);
}

.lang-select-full.glass:focus{
  outline: 2px solid transparent;       /* voorkom default ring */
  box-shadow:
    0 16px 40px rgba(0,0,0,0.38),
    0 0 0 3px rgba(255, 255, 255, 0.6);     /* eenvoudige focus-ring */
}


/* Light mode variant (andere iconkleur) */
@media (prefers-color-scheme: light){
  :root{
    --glass-bg:        rgba(255,255,255,0.65);
    --glass-bg-strong: rgba(255,255,255,0.85);
    --glass-border:    rgba(0,0,0,0.12);

    --glass-shadow:    0 10px 24px rgba(16,18,37,0.08);
    --glass-ring:      #ffffff;

  }
  .lang-select-full.glass{ border:1px solid var(--glass-border); color:var(--glass-text); }
}

.language-switcher {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  left: 1em;
  top: 1em;
  z-index: 9;
}

/* Zorgt dat de layer altijd met je thema-vars mee kleurt */
#themeToggle{
  /* layout zoals je had */
  display:flex; gap:5px; align-items:center; justify-content:center;
  position:absolute; right:2.4em; z-index:9;
  width:54px; height:54px; border-radius:50%;
  box-sizing:border-box;

  /* ALLE kleuren via jouw vars (die per thema wisselen) */
  background-color: var(--color-bg-theme) !important;
  border: 1px solid var(--color-menu-border) !important;
  color: var(--color-text);

  /* iOS Safari: blur werkt alleen met non-transparent bg */
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
}



.language-switcher-menu {
  display: flex;
  gap: 10px;
  align-items: center;
  left: 10px;
  top: 10px;
}

.language-switcher a {
  position: relative;
  z-index: 99999;
}

/* ===== Alleen vlag tonen op mobiel ===== */
@media (max-width: 768px) {
  .lang-select.glass option {
    font-size: 0;          /* tekst verbergen */
  }
  .lang-select.glass option::before {
    content: attr(data-flag);
    font-size: 18px;       /* vlag tonen */
  }
}

/* Zorg dat de select kan krimpen tot de contentbreedte */
#langSelect.lang-select.glass {
  display: inline-block;
  width: auto;           /* geen vaste/100% breedte */
  white-space: nowrap;   /* niet afbreken */
  box-sizing: border-box;
  /* als je al padding gebruikt, laat staan; anders kun je deze gebruiken: */
  /* padding: 10px 42px 10px 40px; */
}

.skyline{
    bottom: 0;
    width: 40em;
    z-index: 1;
	margin: 0 auto;
	position: relative;
	margin-bottom: -5px;
}

.skyline-bottom{
	background-color: #000;
	width: 100%;
	height:100px;
  bottom: 0;
}


  @media screen and (max-width: 736px) {
	.skyline{
    width: 20em;

}
  }

.viewport-header,
.scrollcontainer,
.language-switcher {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateY(0); /* Initial */
  transition: transform 0.05s linear;
}

.quote-line {
  position: relative;
  display: inline-block;
  padding: 1em 2em !important;
  text-transform: uppercase;
  margin-top: -1em;
  font-style: normal !important;
  font-size: 0.8em;
  color: var(--color-text2);
  border-radius: var(--radius);
  text-transform:none;
}

  
 .viewport-header h1 {
  color: var(--color-text2);
  text-transform: uppercase;
  line-height: 1.2;
  font-size: 0.8em;
  text-align: center;
  opacity: 0;
  transform: translateY(-320%);
  will-change: transform, opacity;
   white-space: nowrap;
   z-index: 9;
}


.viewport-header h1 span {
  color: var(--color-text2);
  font-family: 'Raleway', sans-serif;
  font-weight: 1000;
  font-style: normal;
  display: block;
  font-size: 4em;
  letter-spacing: -0.05em;
  white-space: normal;
}

.viewport-header p{
	color: var(--color-text2);
  margin-top: -3em;
}

  
.viewport-header h1.bounce-in {
  animation: bounceElastic 0.6s ease-out forwards;
  opacity: 1;
}

.viewport-header h1.bounce-out {
  animation: bounceElasticOut 0.5s ease-out forwards;
}


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

	.viewport-header h1 {
  
	  font-size: 3.5vw;
	  span {
		font-size: 11vw;
	  }
	  p{	
		  margin-top: -5em;
		  font-size: 2.5vw;
		  letter-spacing: 0.5vw;
		  color: var(--color-text2);
	  }
	  li{
		font-size: 3vw;

	}
	}

}

.viewport-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  overflow: hidden;
}

.viewport-header h1 {
  position: relative;
  z-index: 5;
  color: var(--color-text2);
  text-align: center;
}

/* Scroll animatie direct onder tekst */
.scroll-hint {
  display: flex;
  justify-content: center;
  margin-top: 1rem; /* was 1.5rem */
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform .25s ease;
  z-index: 9;
}

.scroll-hint:hover {
  transform: translateY(2px); /* was 3px */
}

/* De "capsule" of "vinger" vorm — compacter */
.scroll-indicator {
  width: clamp(26px, 4.5vw, 34px);   /* was 32–42px */
  height: clamp(42px, 7vw, 54px);    /* was 52–70px */
  border-radius: 999px;
  border: 1.5px solid var(--color-text2); /* was 2px */
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: start;
  box-shadow: 0 0 10px var(--color-scroll-box-shadow); /* subtieler */
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Het bewegende bolletje — compacter & kortere beweging */
.scroll-dot {
  width: clamp(4px, 1vw, 6px);  /* was 6–8px */
  height: clamp(4px, 1vw, 6px);
  border-radius: 50%;
  background: var(--color-text2);
  box-shadow: 0 0 8px var(--color-text2); /* subtieler */
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-fall 1.3s cubic-bezier(.25,.6,.25,1) infinite; /* was 1.6s */
}

@keyframes scroll-fall {
  0%   { transform: translate(-50%, -10%); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translate(-50%, 50%); opacity: 1; } /* was 60% */
  100% { transform: translate(-50%, 70%); opacity: 0; } /* was 90% */
}

/* Zacht pulserend randje — rustiger */
.scroll-indicator::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(255,255,255,0.10);
  animation: pulse 2.4s ease-in-out infinite; /* was 2s */
}

@keyframes pulse {
  0%, 100% { opacity: .15; } /* was .2 */
  50% { opacity: .35; }      /* was .5 */
}

/* Responsieve balans */
@media (max-width: 600px) {
  .scroll-indicator {
    width: 28px;   /* was 36px */
    height: 46px;  /* was 58px */
    border-width: 1.5px;
  }
  .scroll-dot {
    width: 5px;    /* was 7px */
    height: 5px;
  }
}

/* Respecteert "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .scroll-dot, .scroll-indicator::before { animation: none; }
}

/* --- Bestaande desktop animatie blijft --- */

/* Vingertop + swipe-spoor voor mobiel — compacter */
.scroll-finger {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;  /* was 22px */
  height: 16px; /* was 22px */
  border-radius: 50%;
  background: var(--color-text2);
  box-shadow: 0 0 10px var(--color-scroll-finger-box-shadow), 0 4px 12px rgba(0,0,0,0.25); /* subtieler */
  opacity: 0;
  pointer-events: none;
}

/* Trail (sleep-lijn) — smaller */
.scroll-finger::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translateX(-50%);
  width: 3px; /* was 4px */
  height: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--color-scroll-finger-box-shadow), rgba(255,255,255,0));
  opacity: 0;
}

/* Ripple bij start — compacter */
.scroll-finger::before {
  content: "";
  position: absolute;
  inset: -6px; /* was -8px */
  border-radius: 50%;
  border: 2px solid var(--color-scroll-finger-box-shadow);
  transform: scale(0.5);
  opacity: 0;
}

/* Alleen op touch: toon swipe-animatie i.p.v. dot */
@media (hover: none) and (pointer: coarse) {
  .scroll-dot { display: none; }         /* desktop-dot uit */
  .scroll-finger { animation: swipe-down 1.3s ease-in-out infinite; }      /* was 1.4s */
  .scroll-finger::after { animation: swipe-trail 1.3s ease-in-out infinite; }
  .scroll-finger::before { animation: swipe-ripple 1.3s ease-out infinite; }
}

/* Vingertop beweegt omlaag (swipe) — kortere afstand */
@keyframes swipe-down {
  0%   { transform: translate(-50%, -10%); opacity: 0; }
  10%  { opacity: 1; }
  60%  { transform: translate(-50%, 45%); opacity: 1; } /* was 60% */
  100% { transform: translate(-50%, 65%); opacity: 0; } /* was 85% */
}

/* Trail groeit mee — korter */
@keyframes swipe-trail {
  0%   { height: 0; opacity: 0; }
  10%  { height: 0; opacity: 0; }
  60%  { height: 28px; opacity: .5; } /* was 36px */
  100% { height: 40px; opacity: 0; }  /* was 54px */
}

/* Zachte start-ripple — compacter */
@keyframes swipe-ripple {
  0%   { opacity: 0; transform: scale(0.5); }
  12%  { opacity: .6; transform: scale(0.9); }  /* was 1 */
  40%  { opacity: 0; transform: scale(1.05); }  /* was 1.1 */
  100% { opacity: 0; transform: scale(1.05); }
}

/* Kleinere maat op heel smal scherm */
@media (max-width: 400px) {
  .scroll-finger { width: 14px; height: 14px; } /* was 18px */
}

/* Respecteer reduce motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-finger,
  .scroll-finger::after,
  .scroll-finger::before { animation: none !important; opacity: .85; }
}
  
  .chevron {
	position: absolute;
	width: 28px;
	height: 1px;
	opacity: 0;
	animation: move 3s ease-out infinite;
  }
  
  .chevron:first-child {
	animation: move 3s ease-out 1s infinite;
  }
  
  .chevron:nth-child(2) {
	animation: move 3s ease-out 2s infinite;
  }
  
  .chevron:before,
  .chevron:after {
	content: ' ';
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #fff;
  }
  
  .chevron:before {
	left: 0;
	transform: skew(0deg, 30deg);
  }
  
  .chevron:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -30deg);
  }
  
  @keyframes move {
	25% {
	  opacity: 1;
  
	}
	33% {
	  opacity: 1;
	  transform: translateY(30px);
	}
	67% {
	  opacity: 1;
	  transform: translateY(40px);
	}
	100% {
	  opacity: 0;
	  transform: translateY(55px) ;
	}
  }
  
  .text {
	display: block;
	margin-top: 140px;
	font-size: 12px;
	color: var(--color-mm-grey);
	text-transform: uppercase;
	white-space: nowrap;
	opacity: .25;
	animation: pulse 2s linear alternate infinite;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.5),
               0 0 12px rgba(0, 0, 0, 0.4);
  }
  
  @keyframes pulse {
	to {
	  opacity: 1;
	}
  }
  
.logo_intro{
	width: 15vw;
  }

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

	.logo_intro{
	  width: 35vw;
	}
}


  .viewport-header {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 150%;
	line-height: 1.4;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
	
  }

  .viewport-header {
  position: relative;
  width: 100%;
  height: 115vh;           /* beeldvullend */
  overflow: hidden;
  display: flex;
  padding-bottom: 15vh;
}

/* 1) header is de context */
.viewport-header {
  position: relative;
  overflow: hidden; /* snijdt blur-randen netjes af */
}

/* bestaande image (laat zoals je had) */
.viewport-header .header-blogimage {
  position: absolute;

  width: 110%;
  height: 110%;
  z-index: 0;
  transform: translate(-50%, -5%);
  object-fit: cover;
  filter: blur(8px);
}

/* 2) wrapper bedekt de header */
.viewport-header .header-blogimage-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;        /* boven de foto, onder de tekst */
  pointer-events: none;
}

/* 3) overlay zelf (alleen binnen wrapper) */
.viewport-header .header-blogimage-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay-blog);
}

.viewport-header .header-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%);
  object-fit: cover;       /* vult altijd volledig */
}

.viewport-header .header-overlay {
  position: relative;
  z-index: 1;              /* boven de video */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  text-align: center;
  background: rgba(0,0,0,0.3); /* optionele donkere overlay */
}
  

.header-ladybug {
  position: absolute;
  margin-top: -2px;
  left: 7px;
}

.header-ladybug img {
  height: 20px;
}

@media (max-width: 768px) {
.header-ladybug {
  position: absolute;
  margin-top: -2px;
  left: 1px;
}

.header-ladybug img {
  height: 15px;
}
}

.header-giraf {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.header-giraf img {
  height: 70vh;
}

@media (max-width: 768px) {
	.header-giraf {
  position: absolute;
  right: 0;
  top: 30%;
  transform: translateY(-30%);
}

  .header-giraf img {
  height: 50vh;
}
}

.header-vlinder {
  position: absolute;
  right: 2em;
  top: 2em;
}

.header-vlinder img {
  height: 75px;
}

@media (max-width: 768px) {
.header-vlinder {
  position: absolute;
  right: 2em;
  top: 2em;
}

.header-vlinder img {
  height: 50px;
}
}


/* Beperk de maximale hoogte van inline afbeeldingen in blogteksten */
.inline-image img {
  max-height: 700px;

}

.leestijd{
    width: 100%;
    text-align: left;
    color: var(--color-leestijd);
}

/* Op mobiel laten we de hoogte onbeperkt */
@media (max-width: 768px) {
  .inline-image img {
    max-height: none;
  }
}

.geentoegang{
	position: fixed; /* altijd bovenop en blijft staan bij scrollen */
  top: -4em;
  left: 0;
  width: 100%;
  height: calc(100% + 4em);
  background: rgba(0, 0, 0, 0.6); /* donker laagje */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* zorgt dat hij boven alles staat */
  text-align: center;
}

.geentoegang h1{
	color: #fff;
}

.author-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info span {
  font-size: 0.95em;
  font-weight: bold;
  color: #999;
}

.author-date {
  font-size: 0.95em;
  color: #999 ;
  white-space: nowrap; /* voorkomt dat de datum afbreekt */
}
.author-date b{
  color: #999 ;
}

#blog-view strong, .footer_bottom strong {
    color: var(--color-text) !important;
    font-family: "San Francisco bold";
}

#blog-view strong {
    color: var(--color-text) !important;
    font-family: "San Francisco bold";
}
#blog-view hr  {
    margin-top: 3em;
    margin-bottom: 3em;

}

@media (max-width: 768px) {
  #blog-view hr  {
    margin-top: 1em;
    margin-bottom: 1em;

}
}

#blog-view ul {
  list-style: none;
  padding-left: 0;
  margin: 0px !important;
}

#blog-view li {
  position: relative;
  margin-bottom: 15px !important;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: #ffffff38;
  padding: 1em;
  border-radius: var(--radius) !important;
  text-align: center;
}




/* Container voor inline afbeeldingen */
#blog-view img.profiel_content {
  position: relative;
  z-index: 1;
  max-height: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  background-color: transparent;
}

/* Achtergrond-blur via pseudo-element */
#blog-view img.profiel_content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit; /* werkt niet direct, zie uitleg onder */
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.1);
  z-index: -1;
}

.blur-wrapper {
  position: relative;
  width: 100%;
  max-height: 600px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blur-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.1);
  z-index: 1;
}

/* 📱 Mobiele weergave – geen blur, width 100%, height auto */
@media (max-width: 600px) {
  .blur-wrapper::before,
  #blog-view img.profiel_content::before {
    display: none !important;
  }

  .blur-wrapper {
    border-radius: 0;
    overflow: visible;
    background: none !important;
  }

#blog-view img.profiel_content {
    width: calc(100% + 4em); /* compenseer 1rem padding links + rechts */
    margin-left: -2em;
    margin-right: -2em;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    background-color: transparent !important;
    aspect-ratio: auto !important;
    border-radius: 0; /* buiten content → liever geen radius */
  }
  
  #blog-intro img {
  width: calc(100% + 2rem); /* compenseert padding */
  margin-left: -1rem;
}
}

#blog-view figure {
  margin: 2em 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#blog-view figure img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

#blog-view figure:hover img {
  transform: scale(1.02);
}

#blog-view figcaption {

    color: #ffffff;
    text-align: center;
    font-size: 12px;
    z-index: 1;
	padding: 0.5em 0.5em;
}

@media (max-width: 600px) {
  #blog-view figcaption {
    padding: 5px 10px;
    margin: 0.8em 05em;
	width: calc(100% - 1em);
  }
}

.grid-container-blog {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Twee gelijke kolommen */
  gap: 50px; /* Optioneel: ruimte tussen de blokken */
}

.blok-blog {
  border-radius: 10px;
}

@media (max-width: 768px) {
  .grid-container-blog {
    grid-template-columns: 1fr;
  }
}

h2, h3, h4, b{
    color: #4b4b4b;
}



.pswp-caption h3{
	color: #fff !important;
}

h2.dark, h3.dark, h4.dark, b.dark{
    color: var(--color-mm-grey);
}

fieldset {
  border: 1px solid #999 !important;
  border-radius: var(--radius-inner);
  padding: 20px;
  margin: 20px 0;
  width: 100%;
}

legend {
  padding: 0em 1em !important;
  font-weight: bold;
  color: #999 !important;
  text-align: center;
}
.rating-blog {
  display: grid;
  grid-template-columns: 1fr; /* Altijd 1 kolom */
  grid-template-rows: auto auto; /* Twee rijen */
  width: 100%;
}



.rating-blog {
  display: block; /* Zet container in normale block-flow */
}

.rating-blog > div {
  display: block; /* Forceer elk item als block */
  width: 100%;    /* Volledige breedte */
}

.rating-stars {
  display: flex;
  align-items: center; /* verticaal centreren */
  justify-content: center; /* horizontaal centreren */
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
  text-align: center;
}

.rating-stars .star {
  font-size: 32px;
  color: var(--color-mm-grey);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.rating-stars .star:hover {
  transform: scale(1.2);
}

.rating-stars .star.selected {
  color: gold;
}

.rating-blog .avg-score {
  font-size: 14px;
  color: var(--color-text);
  margin-left: 10px;
  text-align: center;
}

.share-container {
  margin: 0px auto;
}

.share-container h2 {
  margin-bottom: 20px;
  color: var(--color-text) !important;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.share-btn {
  padding: 10px 18px;
  border-radius: var(--radius);
  border: none;
  font-size: 0.95em;
  color: #fff;
  background-color: #888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.share-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.share-btn i {
  font-size: 1.2em;
  position: relative;
  top: 1px;
}

.share-btn.facebook { background-color: #3b5998; }
.share-btn.twitter  { background-color: #1da1f2; }
.share-btn.whatsapp { background-color: #25d366; }
.share-btn.copylink { background-color: #444; }

.copy-feedback {
  margin-top: 15px;
  font-size: 0.9em;
  color: green;
  display: none;
}



#blog-intro {
margin-top: 50px;
  color: #fff !important;
  font-style: italic;
}

p.blog-intro{
	color: #fff !important;
}

#blog-intro::before {
  content: "“";
  font-size: 4em;
  position: absolute;
  left: 20px;
  top: -10px;
  color: #e7b541;
}
/* Meldingen bij fout/succes */
.reactie-melding {
  padding: 1.0em 1.5em;
  border-radius: var(--radius);
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


.reactie-succes {
  background: #006600;
  color: #fff;
  display: inline-block;
  margin-bottom: -10px;
}

.reactie-fout {
    background: #d21313;
    color: #fff;
    display: inline-block;
	margin-bottom: -10px;
}

/* Emoji-balk boven het reactieveld */
#emoji-bar {
  float: left;
  padding: 0 2em;
}

#emoji-bar button{
  line-height: 2em;
}

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

	#emoji-bar {
  padding: 0 1em;
}

}

#reacties{
	margin-top: 2em;
  border-radius: var(--radius);

}

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

	#reacties{
		padding-top: 2em;
		padding-bottom: 2em;
	border-radius: 0;

	}

}

.reactie-text-container{
	background-color: none;
	border-radius: var(--radius-inner);
}

.emoji-button {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin-right: 5px;
  padding: 0px;
  box-shadow: inset 0 0 0 0px #000;
}




.emoji-button:hover {
  transform: scale(1.2);
  background: none;
  border: none;
  box-shadow: inset 0 0 0 0px #000;
}

#reactieForm textarea, #reactieForm input {
  border-radius: var(--radius-inner);
  margin-top: 0px !important;
  margin-bottom: 1em;
  background-color: #fff !important;
}

#reactieForm textarea {
  min-height: 120px;
  resize: vertical;
  min-height: 200px;
  line-height: 25px;
}

@media screen and (max-width: 736px) {
 #reactieForm textarea {
  padding: 1em;
}
    
}

.reactie-items {
  display: flex;
  flex-direction: column;
  gap: 15px; /* ruimte tussen reacties */
  align-items: flex-start; /* links uitlijnen */
  padding: 0;
  margin: 0;
  list-style: none;
}

@media screen and (max-width: 736px) {
	.reactie-items {
  gap: 10px; /* ruimte tussen reacties */
}
}

.reactie-item {
  display: inline-block;
  background-color: #f9f9f9;
  border-radius: var(--radius);
  padding: 1.5em 2em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  position: relative;
  min-width: 150px;
  word-wrap: break-word;
}

@media screen and (max-width: 736px) {
	.reactie-item {
	padding: 1.5em;
	}
}

/* Netter ballonstaartje linksonder */
.reactie-item::after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: -8px;
  width: 20px;
  height: 20px;
  background-color: #f9f9f9;
  border-bottom-right-radius: 16px;
  transform: rotate(45deg);
  box-shadow: -1px 1px 2px rgba(0,0,0,0.03);
}

.reactie-item:nth-child(even) {
  background-color: #f9f9f9;
}

.reactie-item:nth-child(odd) {
  background-color: #b8d9d1;
}

.reactie-item:nth-child(odd)::after {
  background-color: #b8d9d1;
}

.reactie-item:nth-child(even)::after {
  background-color: #f9f9f9;
}

/* Alternatief: als je de pijl recht wilt: vervang left: -15px door right: -15px + border-left i.p.v. border-right */

.reactie-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reactie-items li {
  list-style: none;
}

/* Rest blijft ongewijzigd */
.reactie-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 20px; /* 👈 ruimte tussen naam en datum */
}

.reactie-header-left{
  justify-content: left;
}
.reactie-header-right{
  justify-content: right;
}

@media (max-width: 600px) {
  .reactie-header {
    gap: 10px;
  }
  .emoji-button {
  margin-right: 2px;
}
}

.reactie-naam {
  font-weight: 600;
  color: #232323;
  font-size: 16px;
}

.reactie-datum {
  font-size: 13px;
  color: #666;
}

.reactie-tekst {
  font-size: 15px;
  color: var(--color-reactie-tekst);
  white-space: pre-wrap;
  margin-top: 20px;
  margin-bottom: 0;
}

p.reactie-tekst{
  color: var(--color-reactie-tekst-p) !important;
}

.rating-stars .star.selected {
  color: gold;
}

.rating-stars .star {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s ease;
}

.grecaptcha-badge {
  bottom: -70px !important;
  right: -70px !important;
  opacity: 0.2;
  z-index: 1;
}

/* Container */
.highlighted-blog-wrapper {
  width: 100%;
  max-width: 1200px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  margin-top: 1em;
}

/* Figure met blur achtergrond */
.highlighted-blog-figure {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* De geblurde achtergrondversie */
.highlighted-blog-blur-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(30px);
  transform: scale(1.1);
  z-index: 1;
}

/* De scherpe afbeelding bovenop */
.highlighted-blog-img {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  z-index: 2;
  border-radius: 0;
}

/* Overlay */
.highlighted-blog-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2em 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.15);
}

/* Titel */
.highlighted-blog-overlay h2 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
  color: #fff !important;
}

/* Intro */
.highlighted-blog-overlay #blog-intro {
  color: #eee;
  font-style: italic;
  font-size: 1.05em;
  margin-bottom: 1em;
}

/* Button */
.highlighted-blog-button {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), /* bovenlicht */
              inset 0 -1px 4px rgba(0,0,0,0.2),    /* onder schaduw */
              0 4px 20px rgba(0,0,0,0.1);          /* globale schaduw */
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  padding: 1.2em 2em;
}

.highlighted-blog-button:hover {
	color: #e0e0e0 !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), /* bovenlicht */
              inset 0 -1px 4px rgba(255,255,255,0.4),    /* onder schaduw */
              0 4px 20px rgba(0,0,0,0.1);          /* globale schaduw */
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
}

/* Mobiel */
@media (max-width: 768px) {

	.highlighted-blog-figure {
  height: auto;
}

  .highlighted-blog-overlay h2 {
    font-size: 1.3em;
  }

  .highlighted-blog-overlay #blog-intro {
    font-size: 0.95em;
  }

  .highlighted-blog-button {
    font-size: 0.9em;
  }
}

.soort_menu ul {
	padding-left: 0;
}

.newpost{
	z-index: 9;
}



.soort_menu a{
	color: #fff;
	text-decoration: none;
	line-height: 35px;
	font-size: 16px;
}

.soort_menu ul{
	text-align: center;
	
}

.soort_menu li{
    list-style: none;
    text-transform: uppercase;
    padding: 5px 5px;
    text-decoration: none;
    width: 40px;
    height: 40px;
    text-shadow: #000000 0px 0 1px;
}

.soort_menu li:hover{
	background-color: #000;
	border-radius: var(--radius);
	color: #fff;
}


#progress-bar {
	display: none;
}

  #progress-bar.small {
	--scrollAmount: 0%;
	display: block;
	background-color: #0000000f;
	width: var(--scrollAmount);
	height: 80px;
	margin-top: 0px;
	top: 1px;
	z-index: -1;
}

#progress-bar-container{
	position: fixed;
	top: 0px;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 63px;
	border-radius: var(--radius);
	z-index: -1;
}



.logo2{
	width: 8em;
}

.logo_gold{
	width: 6em;
	border-radius: var(--radius);
}

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


	.account_icon{
		font-size: 18px;
        position: relative;
        text-decoration: none;
        top: -60px;
        left: 5px;
        display: block;
        width: 1.5em;
		color: #fff;
	}

	.zoek_header{
		display: none;
	}

}

.icon_foto{
	width: 15px;
	margin-right: 3px;
	position: absolute;
	margin-top: 6px;
}

.icon_foto2{
	display: none;
}

.foto_detail-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* mobiel: 3 kolommen */
  gap: 5px;
  margin-top: 1.5em;
}

.foto_detail-container > :nth-child(4) {
  grid-column: 1 / -1; /* vierde item over volledige breedte */
}

/* Desktop (bijv. vanaf 768px): 2 kolommen */
@media (min-width: 768px) {
  .foto_detail-container {
    gap: 10px;
  }

}



.foto_detail{
	text-align: center;
   margin-right: 0px;
    color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 10px;
    padding: 0.7em 1em;
    display: flex;
  justify-content: center;  /* horizontaal */
  align-items: center;      /* verticaal */
}

.foto_detail i, .foto_detail_fb i{
	margin-right: 5px;
	color: inherit;
}



.foto_detail_fb{
	text-align: center;
    margin-right: 0px;
    color: #ffcc00;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 10px;
    padding: 0.7em 1em;
	display: flex;
  justify-content: center;  /* horizontaal */
  align-items: center;      /* verticaal */
}

.scrolldown img{
	width: 50px;
}

.profiel{
	width: 100%;
	aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 20px;
	border-radius: var(--radius);
}

.profiel_wrapper {
  width: 100%;
  max-height: 500px;
  height: 500px;          /* vaste hoogte voor croppen */
  overflow: hidden;       /* rest verbergen */
}

.profiel_content {
  width: 100%;
  height: 700px;
  object-fit: cover;      /* vult container */
  object-position: center;/* cropt vanuit midden */
  display: block;
}

@media (max-width: 768px) {
  .profiel_wrapper {
    height: auto;       /* hoogte vloeit mee */
    max-height: none;
  }
  .profiel_content {
    height: auto;
    object-fit: contain; /* geen croppen op mobiel */
  }
}

@media (min-width: 768px) {
  #blogfoto{
	    margin-left: -2rem;
    margin-right: -2rem;
    width: calc(100% + 4rem);
	border-radius: none;
}

}

.layer-container {
  display: flex;
  width: 100%;
  position: relative;
  gap: 1em; /* ← hier zet je de gap op 1em */
}



.layer-left {
  flex: 0 0 70%;
}

.layer-right {
  flex: 0 0 30%;
  position: sticky;
  top: 108px; /* ← dit zorgt dat hij bovenin blijft hangen */
  align-self: flex-start;
  padding-right: 1em;
}

    @media (max-width: 768px) {
  .layer-right {
  padding-right: 0em;
}
	}

.auteur{
	background-color: var(--color-auteur);
  
	border-radius: var(--radius);
	width: 100%;
	display: flex;
  flex-direction: column; /* Onder elkaar */
  align-items: center;    /* Horizontaal in het midden */
  justify-content: center; /* Optioneel: ook verticaal centreren als container een vaste hoogte heeft */
  padding: 2em;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
  
}

.auteur:hover {
  padding: 2.5em 2.5em;
}

.auteur img {
  border-radius: 100px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-width: 200px;
  display: block;
}

.auteur img { 
	color: var(--color-mm-grey);
}

.auteur span {
  text-align: center;
  margin-top: 8px;
  font-size: 1em;
  color: var(--color-text);
  width: 100%;
}


/* Eventueel voor overlay effect */
.layer-container.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* Onder 1200px: onder elkaar, eerst links, dan rechts */
@media (max-width: 1199px) {
  .layer-container {
    flex-direction: column;
  }

  .layer-left,
  .layer-right {
    flex: 0 0 auto;
    width: 100%;
  }

  .layer-right {
    border-left: none;
	margin-bottom: 3em;
  }
}


.grid-intro-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
      align-items: start;
    }

    .left-column {
      display: flex;
      flex-direction: column;
    }

    .item3 {
      display: flex;
      height: auto; /* wordt door JS gezet */
    }

    .item3 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius);
    }

    .item4 {
      grid-column: 1 / span 2;
      color: var(--color-text) !important;
    }

    .item4 a{
      color: var(--color-text) !important;
    }

    .insta-counter{
      margin-left: 0.5em; 
      border: 1px solid var(--color-text) ;
      border-radius: var(--radius); 
      padding: 0.5em 1em; 
      color: var(--color-text);
    }

    @media (max-width: 768px) {
  .grid-intro-container {
    grid-template-columns: 1fr;
  }

  .left-column,
  .item3,
  .item4 {
    grid-column: auto;
    grid-row: auto;
  }

  .item3 {
    height: auto !important;
  }

  .item3 img {
    height: auto;
  }
}

@-moz-keyframes spinner {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		-ms-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@-webkit-keyframes spinner {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		-ms-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@-ms-keyframes spinner {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		-ms-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@keyframes spinner {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		-ms-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none; /* belangrijk: voorkomt bounce boven/onder */
  overflow-y: none;
}

	html {
		scroll-behavior: smooth;
	  }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

.lazy-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
}
.view-toggle-blog {
  display: flex;
  justify-content: flex-end;
  column-gap: 10px;
  margin-bottom: 25px;
  width: fit-content;
  margin-left: auto;
}

.view-toggle-blog button {
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 15px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-mm-grey) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  gap: 10px;
  height: 45px;
}

.view-toggle-blog button:hover,
.view-toggle-blog button.active {
  background-color: var(--color-mm-grey);
  color: #fff !important;
  border-color: var(--color-mm-grey);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Grid standaard */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  margin-top: 20px;
}

@media (max-width: 1100px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
	gap: 1em;
  }
  .view-toggle-blog {
  display: none;
}
.download-datum {
	margin: 1em 0em !important;
}
}

/* Lijstweergave */
.blog-grid.list-view {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 10px;
}

@media (min-width: 769px) {
  .blog-grid.list-view {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1em !important;
  }
}

.blog-grid.list-view .download-item {
  flex-direction: row;
  padding: 10px;
  border-radius: var(--radius);
  align-items: flex-start;
}

.blog-grid.list-view .download-thumb {
  flex-shrink: 0;
  width: 150px;
  height: 100%;
  border-radius: var(--radius-inner);
  overflow: hidden;
  aspect-ratio: unset;
}

.blog-grid.list-view .download-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: none;
}

.blog-grid.list-view .download-item > div:not(.download-thumb) {
  margin-left: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-grid.list-view .download-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.blog-grid.list-view .download-size {
  font-size: 12px;
  color: var(--color-download-size);
  margin-bottom: 8px;
}

.blog-grid.list-view .download-button {
  font-size: 16px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background-color: var(--color-mm-grey);
  color: #fff;
  align-self: flex-start;
}

.blog-grid.list-view .download-button:hover {
  background-color: #afac9f;
  color: var(--color-mm-grey);
}

.is-hidden {
	display: none !important;
}

.load-more {
	display: inline-block;
	margin: 15px !important;
	padding: 8px 16px;
	background: #000;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.3s;
}

.load-more:hover {
	background: #444;
}

.download-item.placeholder {
  background: #f5f5f5;
  border: 2px dashed #ddd;
  box-shadow: none;
  cursor: default;
}

.download-item.placeholder .placeholder-block {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #eee,
    #eee 10px,
    #f9f9f9 10px,
    #f9f9f9 20px
  );
  border-radius: var(--radius);
}

.placeholder-item {
  background-color: #f3f3f3;
  border-radius: var(--radius);
  border: 1px dashed #ccc;
  height: 100%;
  min-height: 200px;
}

.placeholder-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: #e0e0e0;
}

.view-toggle {
  display: flex;
  justify-content: flex-end;
  column-gap: 10px; /* meer ruimte tussen de knoppen */
  margin-bottom: 25px;
  width: fit-content;
  margin-left: auto;
}

.view-toggle button {
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 15px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-mm-grey) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  gap: 10px;
  height: 45px;
}

.view-toggle button:hover{
  background-color: #e7b541;
  color: #fff !important;
  border-color: #e7b541;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


.view-toggle button.active {
  background-color: var(--color-mm-grey);
  color: #fff !important;
  border-color: var(--color-mm-grey);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Voor mobiel blijft 1 kolom behouden */
.download-grid.list-view {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 10px;
}

/* Vanaf 769px breed: 2 items naast elkaar in lijstweergave */
@media (min-width: 600px) {
  .download-grid.list-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1em !important;
  }
}

@media (min-width: 1000px) {
  .download-grid.list-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1em !important;
  }
}

.download-grid.list-view .download-item {
  flex-direction: row;
  padding: 10px;
  border-radius: var(--radius);
  align-items: flex-start;
}

.download-grid.list-view .download-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-inner);
  overflow: hidden;
  aspect-ratio: unset;
}

.download-grid.list-view .download-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: none;
}

.download-grid.list-view .download-item > div:not(.download-thumb) {
  margin-left: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* verticale uitlijning */
  
}

.download-grid.list-view .download-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  display: inline-block; /* deze regel toevoegen */
}

.download-grid.list-view .download-size {
  font-size: 12px;
  color: var(--color-download-size);
  margin-bottom: 8px;
}

.download-grid.list-view .aantal-overlay {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: var(--radius);
  z-index: 2;
}

.download-grid.list-view .download-button {
  font-size: 16px;
  padding: 6px 10px;
  background-color: var(--color-mm-grey);
  margin-bottom: 0;
  margin-right: 0;
  color: #fff;
  align-self: flex-start;
  border-radius: var(--radius);
}

.download-grid.list-view .download-button:hover {
  background-color: #afac9f;
  color: var(--color-mm-grey);
}

.download-grid.list-view .download-button i {
  margin: 0;
}

.download-grid.list-view .download-button::after {
  content: none;
}
/* Lijstweergave met 2 kolommen vanaf 768px breed */
@media (min-width: 600px) {
  .download-grid.list-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 items naast elkaar */
    gap: 16px;
  }

  .download-grid.list-view .download-item {
    flex-direction: row;
    padding: 12px;
    align-items: flex-start;
  }

  .download-grid.list-view .download-thumb {
    width: 100px;
    height: 100px;
  }

  .download-grid.list-view .download-title {
    font-size: 15px;
  }

  .download-grid.list-view .download-size {
    font-size: 13px;
  }

  .download-grid.list-view .download-button {
    font-size: 14px;
  }
}

@media (min-width: 1000px) {
  .download-grid.list-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 2 items naast elkaar */
    gap: 1em;
  }
}

/* ====== Nieuw-badge specifieke plaatsing in lijstweergave ====== */
.download-grid.list-view .download-thumb {
  position: relative; /* zorg dat de badge binnen de thumb blijft */
}

.download-grid.list-view .badge-new {
  top: 5px;
  left: auto;
  right: 5px;
  transform: none;
  font-size: 11px;
  padding: 5px 8px;
  box-shadow: 0 4px 12px rgba(14,165,233,0.25);
  z-index: 3; /* boven de aantal-overlay */
}

.download-grid.list-view .aantal-overlay {
  bottom: 5px;
  top: auto;
  right: 5px;
  z-index: 2;
}

/* Iets ruimer op grotere schermen */
@media (min-width: 600px) {
  .download-grid.list-view .badge-new {
    top: 8px;
    right: 8px;
    font-size: 12px;
    padding: 6px 10px;
  }
  .download-grid.list-view .aantal-overlay {
    bottom: 8px;
    right: 8px;
  }
}

/* Op brede schermen blijft hij mooi in balans */
@media (min-width: 1000px) {
  .download-grid.list-view .badge-new {
    top: 10px;
    right: 10px;
  }
  .download-grid.list-view .aantal-overlay {
    bottom: 10px;
    right: 10px;
  }
}

.download-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.download-thumb { position: relative; }

.badge-new {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: #0ea5e9; /* kies evt. dezelfde kleur als bij je blog-badge */
  color: #fff;
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(14,165,233,.25);
  user-select: none;
}
@media (min-width: 768px){ .badge-new{ font-size:13px; padding:8px 12px; } }

/* Subtiele puls (optioneel) */
.badge-new::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(14,165,233,.45);
  animation:newPulseDl 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes newPulseDl{
  0%{ box-shadow:0 0 0 0 rgba(14,165,233,.45); }
  70%{ box-shadow:0 0 0 12px rgba(14,165,233,0); }
  100%{ box-shadow:0 0 0 0 rgba(14,165,233,0); }
}

/* ====== NIEUW: Badge voor foto's ====== */
.badge-new-foto {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .5), 0 4px 15px rgba(0, 0, 0, .15);
  display: inline-block;
  user-select: none;
  pointer-events: none;
}

/* Puls animatie (subtiel wit licht) */
.badge-new-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6);
  animation: newPulseFoto 2.4s ease-out infinite;
}

@keyframes newPulseFoto {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}


@media (max-width: 768px) {
  .download-thumb {
    aspect-ratio: 1 / 1;
  }
}

.download-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aantal-overlay {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: var(--radius);
  z-index: 2;
}


.download-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* standaard: 5 kolommen op grote schermen */
  gap: 1em;
  margin-top: 20px;
}

@media (max-width: 1400px) {
  .download-grid {
    grid-template-columns: repeat(4, 1fr); /* brede laptops/desktops */
  }
}

@media (max-width: 1100px) {
  .download-grid {
    grid-template-columns: repeat(3, 1fr); /* tablets en kleinere laptops */
  }
}

.blog-card {
  position: relative;
  height: 440px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: flex-end;
}

.badge-new {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: #ff3b30;      /* warm rood */
  color: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255, 59, 48, .25);
  user-select: none;
}

@media (min-width: 768px) {
  .badge-new { font-size: 13px; padding: 9px 12px; }
}

/* Optioneel: lichte 'pulse' om aandacht te trekken, niet te schreeuwerig */
.badge-new::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45);
  animation: newPulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes newPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.blog-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.blog-card .content {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  width: 100%;
  padding: 1.2rem;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transition: background 0.3s ease;
}


.blog-card h2 {
  margin: 0;
  font-size: 1.2rem;
  color: #111;
}

.blog-card .date {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.5rem;
}

.blog-card .intro {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
}

.blog-card .stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* Fade-in animatie bij laden */
.download-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-download-item);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}


/* Actieve animatie zodra zichtbaar */
.download-item.visible {
  opacity: 1;
  transform: translateY(0);
}



/* Hover effect op het hele item */
.download-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    border: 1px solid #aaaaaa;
}

.download-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.download-item { position: relative; }

/* Onzichtbaar anker dat het hele item klikbaar maakt */
.download-item .stretched-link {
  position: static;             /* geen visuele impact */
  text-decoration: none;        /* geen onderstreping */
  color: inherit;               /* geen kleurverandering */
}
.download-item .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;                     /* bedek hele kaart */
  z-index: 1;                   /* onder de knop, boven de content */
}

/* Zorg dat je bestaande knop boven de stretched link ligt */
.download-item .download-button {
  position: relative;
  z-index: 2;
}


.download-title {
  font-weight: bold;
  font-size: 16px;
  padding: 20px 15px 0px;
  color: #000;
}

.download-size {
  font-size: 14px;
  color: var(--color-download-size);
  padding: 0 15px 20px;
}

.download-datum {
  font-size: 14px;
  color: #fff;
  background-color: #ffffff40;
  border: 1px solid rgb(27, 27, 25)40;
display: block; 
text-align: center;
padding: 0.5em 1em;
margin: 1em;
border-radius: var(--radius-inner);
}

.download-intro {
  font-size: 14px;
  color: #fff;
  padding: 15px 15px 20px;
}


.gal-more {
  display: flex;
  justify-content: center;   /* horizontaal perfect centreren */
  align-items: center;       /* optioneel: verticaal centreren */
  flex-direction: column;
  margin-top: 1em;
  margin-bottom: 4em;
  text-align: center;        /* fallback voor oudere browsers */
}

/* =========================================
   LOAD MORE BUTTON
   ========================================= */
.loadmore-button {
  display: inline-flex;             /* geen inline-flex meer → echte flexcentrering */
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--color-mm-grey);
  color: #fff;
  padding: 0.5em 1.2em;
  font-weight: normal;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background 0.3s ease, transform 0.2s ease;
  text-transform: uppercase;
  overflow: hidden;
  z-index: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  margin-bottom: 2em;        /* nette afstand naar onderen */
  font-size: 0.9em;
    letter-spacing: 0.1em;
    line-height: 2.7em;
}

.loadmore-button b {
  z-index: 2;
  color: #fff;
}

.loadmore-button i {
  color: #fff;
  z-index: 2;
  font-size: 20px;
  line-height: 1;
  position: relative;
  top: 1px; /* kleine correctie om icoon en tekst exact gelijk te krijgen */
}

.loadmore-button:hover {
  transform: scale(1.05);
  background-color: #1c1c1a;
}

/* =========================================
   STATUS: "Alle foto's zijn geladen"
   ========================================= */
/* Statuscontainer */
#gal-status{
  display:inline-flex;              /* tekst + knop naast elkaar */
  align-items:center;               /* perfecte verticale uitlijning */
  justify-content:center;
  gap:.6em;                         /* ruimte tussen tekst en knop */
  color: var(--color-catline);
  margin-top:.85rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
  font-weight:500;
  user-select:none;
  pointer-events:none;              /* niet klikbaar totdat .show */
  background-color:var(--color-gal-status);
  border-radius:var(--radius);
  padding:.7em 1.2em;
  font-size:.9em;
  line-height:1.6;
}

#gal-status.show{
  opacity:1;
  transform:translateY(0);
  margin-bottom:6em !important;
  pointer-events:auto;              /* klikbaar wanneer zichtbaar */
}

#gal-status .fi{
  font-size:1.1em;
  color:#4caf50;
  position:relative;
  top:1px;
  margin-right:.35rem;
}

/* Perfect ronde refresh-knop naast de tekst */
#gal-status .refresh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.2em;                      /* perfect rond */
  height:2.2em;
  border-radius:50%;
  background:#4caf50;
  color:#fff;
  text-decoration:none;
  transition:transform .25s ease, background .25s ease;
  flex:0 0 auto;                    /* niet meeschalen met tekst */
}

#gal-status .refresh-btn:hover{
  background:#43a047;               /* iets donkerder groen */
  transform:rotate(90deg) scale(1.06);
}

#gal-status .refresh-btn i{
  line-height:1;
  margin:0;
  pointer-events:none;
}

/* ===== Gallery › Categorie – Alle categorieën ===== */
#catline-free {
  margin: 1.5rem 0 2rem;
  text-align: center;
  font-size: .95rem;
  color: var(--color-catline);
  letter-spacing: .01em;
}

#catline-free .lead {
  opacity: .85;
  font-weight: 600;
}

#catline-free .sep {
  opacity: .55;
  margin: 0 .4rem;
  user-select: none;
}

#catline-free .sep.arrow::after { content: "›"; }
#catline-free .sep.dash::after  { content: "–"; }

#catline-free .cat-label {
  font-weight: 500;
}

#catline-free .tail-nowrap {
  white-space: nowrap; /* voorkomt afbreken */
}

#catline-free a {
  font-weight: 600;
  text-decoration: underline;
  color: inherit;
}
#catline-free a:hover {
  opacity: .8;
}

/* ===============================
   GEEN RESULTATEN - STYLING
   =============================== */
.no-results {
  text-align: center;
  padding: 6rem 1.5rem;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  animation: fadeInUp .6s ease both;
  margin-top: 22em;
}

.no-results-icon {
  font-size: 4.5rem;
  color: var(--color-mm-grey);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  padding: 1.2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.no-results h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.no-results p {
  color: #666;
  font-size: 1rem;
  max-width: 380px;
  line-height: 1.6;
}

.no-results-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  background: var(--color-mm-grey);
  color: #fff;
  text-decoration: none;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  font-weight: 500;
  transition: background .3s ease, transform .2s ease;
}

.no-results-btn:hover {
  background: #000;
  transform: translateY(-2px);
}

.no-results-btn .fi {
  font-size: 1.1em;
}

/* subtiele animatie */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===============================
   CENTREREN BINNEN GALLERY-MASONRY
   =============================== */
#main.gallery-masonry {
  display: grid;          /* zorgt dat we grid positioning kunnen gebruiken */
  place-items: center;    /* centreert horizontaal én verticaal */
  min-height: 60vh;       /* zodat het midden zichtbaar is bij lege resultaten */
}

#main.gallery-masonry .no-results {
  grid-column: 1 / -1;    /* over alle kolommen */
  justify-self: center;   /* horizontaal centreren binnen grid */
  align-self: center;     /* verticaal centreren binnen grid */
  width: min(600px, 90%); /* vriendelijk schalend op mobiel */
  box-sizing: border-box;
}

/* Minder animatie voor mensen met voorkeur */
@media (prefers-reduced-motion: reduce) {
  #gal-status {
    transition: none;
    transform: none;
  }
}

.download-button {
  position: relative;
  margin-top: auto;
  background-color: var(--color-mm-grey);
  color: #fff;
  text-align: center;
  padding: 12px;
  font-weight: bold;
  text-decoration: none;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: var(--radius-inner);
  transition: background 0.3s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  z-index: 0;
  
}

.download-button b{
	display: block;
	z-index: 2;
	color: #fff;
}

.download-button i {
	color: #fff;
	z-index: 2;
  margin: 0;
  position: static; /* niet absoluut gepositioneerd */
  font-size: 20px; /* optioneel, naar wens aanpassen */
  margin-top: 5px;
}

.download-button:hover {
  transform: scale(1.05);
}

.download-button2 {
	float: right;
  position: relative;
  margin-top: auto;
  background-color: #ffffff87;
  text-align: center;
  text-decoration: none;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  transition: background 0.3s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  z-index: 0;
  font-size: 0.9em;
		letter-spacing: 0.1em;
		line-height: 3.05556em;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		margin: 0 auto;
		padding: 0.1em 2em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: var(--radius);
}

.download-button2 b{
	display: block;
	z-index: 2;
	color: #000;
	
}

.download-button2 i {
	color: #000;
	z-index: 2;
  margin: 0;
  position: static; /* niet absoluut gepositioneerd */
  font-size: 25px; /* optioneel, naar wens aanpassen */
  position: relative;
	margin-top: 3px;
}


.download-button2:hover {
  transform: scale(1.05);
}

/* Golf-animatie */
@keyframes waves {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@media (max-width: 768px) {

	.view-toggle {
		display: none;
	}
	.aantal-overlay {

  top: 5px;
  right: 5px;
  
}
  .download-grid {
    grid-template-columns: 1fr; /* Eén kolom voor betere leesbaarheid */
    gap: 1em; /* Iets minder ruimte tussen items */
    margin-top: 10px;
  }

  .download-item {
    flex-direction: row; /* Van kolom naar rij-layout */
    padding: 10px;
    border-radius: var(--radius);
    align-items: center;
  }

  .download-thumb {
    flex-shrink: 0;
    width: 100px;
    height: 100%;
    aspect-ratio: unset; /* Niet forceren */
    border-radius: var(--radius-inner);
    overflow: hidden;
  }

  .download-thumb img {
    height: 100%;
    object-fit: cover;
    clip-path: none; /* Geen schuine clip voor mobiel */
  }

  .download-title,
  .download-size,
  .download-button {
    padding: 0;
    margin: 0;
  }

.download-intro {
  margin: 0;
padding: 10px 0px;
}

  .download-title {
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 2px;
  }

  .download-size {
    font-size: 12px;
    color: var(--color-download-size);
    margin-bottom: 6px;
  }

  .download-button {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: var(--radius-inner);
    margin: 0;
    margin-top: 4px;
  }

  .download-button b{
	display: none;
  }

  .download-item > div:not(.download-thumb) {
    margin: 12px;
    flex: 1;
  }
}




table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

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

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}



		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

		body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

	body, input, select, textarea {
		font-family: "San Francisco";
		font-weight: 100;
		letter-spacing: 0.033em;
		line-height: 1.2;
	}

		

	a {
		-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		color: var(--color-text);
		text-decoration: none;
	}



	strong {
		font-weight: 400;
		font-family: "San Francisco bold";
	}

	b {
		color: #000;
		font-weight: 400;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 25px 0;
		line-height: 25px;
	}

	h1, h4, h5, h6 {
		color: var(--color-text);
		font-weight: 300;
		letter-spacing: 0.05em;
		line-height: 1.5;
		margin: 0 0 1em 0;
		text-transform: uppercase;
	}


	h3 {
		color: #4b4b4b;
		font-weight: 300;
		line-height: 1.5;
		margin: 0 0 1em 0;
	}

	
	h2{
		color: var(--color-text) !important;
		font-weight: 300;
		letter-spacing: 0.05em;
		line-height: 1.5;
		margin: 0 0 1em 0;
		text-transform: uppercase;
	}

  	h2.blogtitel{
		color: var(--color-text2) !important;
		font-weight: 300;
		letter-spacing: 0.05em;
		line-height: 1.5;
		margin: 0 0 1em 0;
		text-transform: uppercase;
	}


		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.2em;
	}

	h3 {
		font-size: 1.1em;
	}

	h4 {
		font-size: 1em;
	}

	h5 {
		font-size: 0.9em;
	}

	h6 {
		font-size: 0.7em;
	}

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

		h2 {
			font-size: 1.2em;
		}


		h4 {
			font-size: 0.9em;
		}

		h5 {
			font-size: 0.7em;
		}

		h6 {
			font-size: 0.7em;
		}

	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: 4px #9d9a8d;
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	blockquote.dark {
		border-left: 4px var(--color-mm-grey);
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: #34363b;
		border: solid 1px #36383c;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px #aaaaa0;
		margin: 1em 0;
	}


		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

/* Button */

#load-more{
	box-shadow: inset 0 0 0 2px #000;
		color: #fff !important;
		background-color: #000;
		justify-content: center;
		align-items: center;
		float: none;
		margin-bottom: 40px;
}

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		float: right;
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border: 0;
		background-color: #fff;
		color: #000 !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.9em;
		letter-spacing: 0.1em;
		line-height: 2.7em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		margin: 0 auto;
		border-radius: var(--radius);
		padding: 0.5em 2em;
	}




	.button2 {
		float: right;
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border: 0;
		min-height: 52px;
		width: auto;
		background-color: #fff;
		color: var(--color-mm-grey) !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.9em;
		text-align: center;
		white-space: nowrap;
		border-radius: var(--radius);
		letter-spacing: 0.1em;
		line-height: 1.05556em !important;
		text-decoration: none;
		text-transform: uppercase;
		padding: 1em 3em 1em 2em;
	}

	@media (max-width: 768px) {
		
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button{
		padding: 1.2em 2.5em;
	}

	.button2 {
		padding: 1em 3em 1em 2em;

	}
}

	.button2:hover {
			background-color: #fff;
			color: var(--color-mm-grey) !important;
		}
		

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			color: #000 !important;
		}

		

			input[type="submit"]:hover:active,
			input[type="reset"]:hover:active,
			input[type="button"]:hover:active,
			button:hover:active,
			.button:hover:active {
				background-color: rgba(52, 165, 142, 0.15);
				color: #000 !important;
			}

		input[type="submit"].icon,
		input[type="reset"].icon,
		input[type="button"].icon,
		button.icon,
		.button.icon {
			padding-left: 1.35em;
		}

			input[type="submit"].icon:before,
			input[type="reset"].icon:before,
			input[type="button"].icon:before,
			button.icon:before,
			.button.icon:before {
				margin-right: 0.5em;
			}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 1.35em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #000;
			box-shadow: none;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
				background-color: #47c5ab;
				color: #ffffff !important;
			}

				input[type="submit"].primary:hover:active,
				input[type="reset"].primary:hover:active,
				input[type="button"].primary:hover:active,
				button.primary:hover:active,
				.button.primary:hover:active {
					background-color: #287e6d;
				}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			opacity: 0.35;
		}

		.filter-section-button {
			display: flex;
			justify-content: center;  /* Centreer het geheel */
			align-items: center;
			width: 100%;
		}

		.filter-section-button button{
			 margin: 0;        /* Geen extra marges */
			background-color: #000 !important; 
			margin-top: 1em; 
			display: flex; 
			justify-content: center; 
			color: #fff !important;
			box-shadow: none;
			height: 52px;
		}


		.filter-section-button button + button {
			margin-left: 8px;  /* Alleen subtiele ruimte tussen knoppen */
		}
		







		.filter-section-button button:hover{
			color: #000 !important; 
			background-color: #fff !important; 
		}

/* Form */



		form > :last-child {
			margin-bottom: 0;
		}

		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3em);
			margin: -1.5em 0 2em -1.5em;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5em 0 0 1.5em;
				width: calc(100% - 1.5em);
			}

				form > .fields > .field.half {
					width: calc(50% - 0.75em);
				}

				form > .fields > .field.third {
					width: calc(100%/3 - 0.5em);
				}

				form > .fields > .field.quarter {
					width: calc(25% - 0.375em);
				}


	label {
		color: #ffffff;
		display: block;
		font-size: 0.9em;
		font-weight: 300;
		margin: 0 0 1em 0;
	}

.paginanummers{
	text-align: center;
	line-height: 35px;
	margin-bottom: 2em;
  display:none !important; 
}




.paginanummers a{
	text-decoration: none;
	color: #212121 !important;
	padding: 10px 15px;
	position: relative;
	background-color: #dedcd3;
	border-radius: var(--radius);
	text-align: center;
	align-items: center; 
	justify-content: center;
}

.paginanummers a i {
  font-size: 12px;
}

.paginanummers a:hover{
	text-decoration: none;
	background-color: var(--color-mm-grey);
	padding: 10px 15px;
	position: relative;
	color: #fff !important;
	border-radius: var(--radius);
	text-align: center;
	align-items: center; 
	justify-content: center;
	
}

.paginanummers span{
	padding: 10px 15px;
	position: relative;
	color: var(--color-mm-grey) !important;
	background-color: #fff;
	border-radius: var(--radius);
	text-align: center;
	align-items: center; 
	justify-content: center;
}

.zoek-wrapper {
  position: relative; /* 👈 belangrijk */
  display: block;
  width: 100%;
}


/* ===== Suggestielijst styling ===== */
#mm-suggest {
  position: absolute;
  z-index: 1000;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-top: none;
  max-height: 240px;
  overflow-y: auto;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-size: 14px;
}

#mm-suggest li {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

#mm-suggest li:hover {
  background: #f5f5f5;
}

/* 🚀 Actieve item via pijltjes */
#mm-suggest li.is-active {
  background: #000;   /* blauwe achtergrond */
  color: #fff;           /* witte tekst */
  font-weight: bold;
}


.suggesties {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background: #fff;
  z-index: 99999;
  max-height: 144px;
  overflow-y: auto;
  width: calc(100% + 0px);
  border-radius: var(--radius-inner);
  text-align: left;
}

.suggesties li {
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 1px solid #00000008;
  color: var(--color-mm-grey);
}
.suggesties li:hover {
  background-color: #f0f0f0;
}

#zoeken{
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 15px;
	padding-right: 15px;
	margin: 0 auto;
	width: 35em;
}

#zoeken input{
	margin-bottom: 10px;
	border-radius: var(--radius);
	padding: 0em 2.5em;
	color: #000;
}

.filter-row {
    display: flex;
	align-items: flex-start; /* alles bovenin uitlijnen */
	gap: 0;
	z-index: 10;
	position: sticky;
  	top: 0;
}

.filter-menu-toggle {
    background-color: var(--color-mm-grey); 
	border: none; 
	color: #fff !important; 
	height: 54px;
	padding: 10px 20px; 
	border-radius: 0px; 
	text-decoration: none; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	box-shadow: none;
	position: relative;
}

 @media screen and (max-width: 736px) {
.filter-menu-toggle {
	padding: 10px 10px; 
  }
}
  .filter-menu-toggle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #8c8a7e, transparent);
  pointer-events: none;
}

    .filter-menu-toggle:hover {
		background-color: #b0ac9f; 
	border: none; 
	box-shadow: none;
	color: var(--color-mm-grey) !important; 
	}

/* Zoeklayer structuur */
.zoek-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 9999;
}

.zoek-content {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100vh; /* beperkt tot schermhoogte */
}

@media (max-width: 600px) {
  .zoek-content {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100vh; /* beperkt tot schermhoogte */
  width: 100%;
  margin: 0.5em;
  padding: 0.5em 0em;
}
}


/* Formulier vult volledige ruimte */
form#zoeken3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sticky zoekbalk bovenin */


/* Container waarin filterblokken scrollbaar zijn */
.filter-menu-container {
  width: 100%;
  max-height: 0;
  margin-top: -30px;
  transition: max-height 0.4s ease, transform 0.4s ease;

}

/* Opengeklapte container */
.filter-menu-container.open {
  max-height: 1000px;
  margin-top: -30px;
  transform: scaleY(1);
}

/* Grid layout met aanvulling waar ruimte is */
.filter-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-flow: dense;
  gap: 20px;
  padding: 50px 0 0;
}

/* Responsief gedrag */
@media (max-width: 1100px) {
  .filter-menu {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .filter-menu {
    grid-template-columns: 1fr;
  }

  .filter-menu-container {
    margin-top: -25px;
  }

  .filter-menu-container.open {
    margin-top: -25px;
  }
}



.filter-section-sub {
  background: #ffffff1f;
  padding: 15px;
  border-radius: var(--radius-inner);
  box-sizing: border-box;
  break-inside: avoid;
  display: block;
}



  .filter-section strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: #ffffff;
	text-align: left;
	padding-bottom: 5px;
  }

  .filter-section label {
    display: block;
    cursor: pointer;
	color: #ffffff;
  }

  /* Stijl voor custom checkboxes */
.filter-section input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-mm-grey);
  border-radius: var(--radius);
  background-color: #fff;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
  vertical-align: middle;
  transition: all 0.2s ease;
  opacity: 1;
  z-index: 1;
}

.filter-section input[type="checkbox"]:checked {
  background-color: var(--color-mm-grey);
  border-color: var(--color-mm-grey);
}

.filter-section input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.filter-section input[type="checkbox"]:checked::after {
  opacity: 1;
}

.filter-section label {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  font-size: 15px;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s ease;
}

.filter-section label:hover {
  color: #b6b6b6;
}

.zoek-button{
	background-color: #000;
    height: 54px;
    border: none;
    color: #fff !important;
    border: 0px;
    cursor: pointer;
    box-shadow: none;
	border-radius: 0px var(--radius) var(--radius) 0px;
	align-items: center; 
	justify-content: center;
}


.zoek-button:hover{
	background-color: #b6b6af;
	color: var(--color-mm-grey) !important;
	border: none;
	box-shadow: none;
}

.zoek-reset-button{
	background-color: #c74040; 
	border: none; 
	color: var(--color-mm-grey); 
	height: 54px;
	padding: 10px 20px; 
	border-radius: 0px; 
	text-decoration: none; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}


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

	.zoek-button{
    height: 54px;
    padding: 7px 25px;
}

.zoek-reset-button{
	height: 54px;

	padding: 10px 10px; 

}

}

.zoek-reset-button:hover{
	background-color: #b0ac9f;
	color: var(--color-mm-grey) !important;
}

#zoeken2{
	position: relative;
	display: flex; gap: 0px; 
	
}

#zoeken2 button:hover{
	background-color: #ffffff9b;
}

#zoeken2 input{
	background-color: #dedcd3;
	color: #000;
	border-radius: var(--radius) 0px 0px var(--radius);
}

#zoeken2_menu input{
	background-color: #dedcd3;
	color: #000;
}

#error{
	font-size: 1.5em;
	text-align: center;
	padding-top: 2.5em;
	color: var(--color-mm-grey);
}

#error i{
	color: var(--color-mm-grey) !important;
}

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

	#zoeken{
		padding-top: 50px;
		padding-bottom: 125px;
		padding-left: 15px;
		padding-right: 15px;
		margin: 0 auto;
		width: 20em;
		border-radius: var(--radius);
	}

	#error{
		text-align: center;
        padding-top: 2.0em;
        font-size: 1em;
	}

	.paginanummers{

		margin-bottom: 2em;
		text-align: center;
	}

}


	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: #ffffff;
  border: none;
  outline: none;
		border: 0;
		color: #000;
		display: block;
    outline: 0;
    /* padding: 1em 1em; */
    text-decoration: none;
    width: 100%;
	height: 3em;
    letter-spacing: 0.1em;
    line-height: 3.05556em;
    padding: 2px 1.0em;
	font-size: 1em;
	transition: border 0.3s ease;
		border: 1px solid transparent; /* ruimte reserveren voor border */
	}

	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	input[type="tel"]:focus,
	input[type="search"]:focus,
	input[type="url"]:focus,
	input:focus {
	
  outline: none;
}



		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		input[type="search"]:invalid,
		input[type="url"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}





	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%2336383c' /%3E%3C/svg%3E") !important;
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75em;
		padding-right: 2.75em;
		text-overflow: ellipsis;
	}

		select option {
			color: #ffffff;
			background: #242629;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select {
		height: 54px;
	}

	textarea {
		padding: 0.75em 1em;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: #a0a0a1;
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: 300;
			padding-left: 2.4em;
			padding-right: 0.75em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				background: #34363b;
				content: '';
				display: inline-block;
				font-size: 0.8em;
				height: 2.0625em;
				left: 0;
				line-height: 2.0625em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2.0625em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #000;
			border-color: #000;
			color: #ffffff;
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			box-shadow: 0 0 0 2px #000;
		}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: #707071 !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: #707071 !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: #707071 !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: #707071 !important;
		opacity: 1.0;
	}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			position: relative;
			left: 0.3em;
			top: -0.2em;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* List */

/* --- Radio's voor categorieën stylen zoals de custom checkboxes --- */
.filter-section input[type="radio"].kind-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-mm-grey);
  border-radius: var(--radius);            /* zelfde als checkbox */
  background-color: #fff;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
  vertical-align: middle;
  transition: all 0.2s ease;
  opacity: 1;
  z-index: 1;
  /* Zorg dat eventuele globale input[type=radio]-regels dit niet verstoppen */
  display: inline-block;
  float: none;
}

.filter-section input[type="radio"].kind-radio:checked {
  background-color: var(--color-mm-grey);
  border-color: var(--color-mm-grey);
}

.filter-section input[type="radio"].kind-radio::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.filter-section input[type="radio"].kind-radio:checked::after {
  opacity: 1;
}

/* Optioneel: zelfde label-uitlijning als bij je checkboxes */
.filter-section label {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  font-size: 15px;
  cursor: pointer;
  color: #fff;
  transition: color 0.2s ease;
}


	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		
	}

	

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px #36383c;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: 300;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

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

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5rem;
						}

		}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
		line-height: 35px;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 1em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}

			ul.icons li .icon {
				color: var(--color-text);
			}

				ul.icons li .icon:before {
					font-size: 1.5em;
				}

/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px #36383c;
			border-left: 0;
			border-right: 0;
		}

			table tbody tr:nth-child(2n + 1) {
				background-color: #34363b;
			}

		table td {
			padding: 0.75em 0.75em;
		}

		table th {
			color: #ffffff;
			font-size: 0.9em;
			font-weight: 300;
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px #36383c;
		}

		table tfoot {
			border-top: solid 2px #36383c;
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px #36383c;
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

/* Panel */

	.panel {
		padding: 4em 4em 2em 4em ;
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-webkit-overflow-scrolling: touch;
		background: var(--color-panel);
		color: #fff;
		bottom: 0;
		right: 0;
		max-height: 100vh;
		overflow-y: auto;
		position: fixed;
		width: 40%;
		z-index: 99999;
		top: calc(0em - 1px);
	}

	.panel h1, .panel h2, .panel a{
		color: #b7b7b7 !important;
	}

	  @media (min-width: 667px) {

	  .panel {
	padding: 100px 41px 24px 41px;

	}
  }

		.panel.active {
			-moz-transform: translateY(0px);
			-webkit-transform: translateY(0px);
			-ms-transform: translateY(0px);
			transform: translateY(0px);
		}

		.inner {
			margin: 0 auto;
			max-width: 100%;
		}

			 .inner.split {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
			}

				 .inner.split > div {
					margin-left: 4em;
					width: 50%;
				}

				 .inner.split > :first-child {
					margin-left: 0;
				}

		.panel > .closer {
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			background-image: url("images/close.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 3em;
			cursor: pointer;
			height: 3.5em;
			opacity: 0.8;
			position: absolute;
			right: 20px;
			top: 18px;
			width: 3.5em;
			z-index: 2;
			padding: 2em;
		}

			.panel > .closer:hover {
				opacity: 1.0;
			}

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

			.panel {
				padding: 3em 3em 1em 3em ;
				width: 100%;
			}

				.inner.split > div {
					margin-left: 3em;
				}


		}

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

			 .inner.split {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}

				.inner.split > div {
					margin-left: 0;
					width: 100%;
				}

		}

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

			.panel {
				-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
				padding: 6em 2em 2em 2em ;
				bottom: auto;
			}

				.panel.active {
					-moz-transform: translateY(0);
					-webkit-transform: translateY(0);
					-ms-transform: translateY(0);
					transform: translateY(0);
				}

		}
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch; /* zorgt dat items dezelfde hoogte krijgen */
  margin-bottom: 25px;
}

/* Zorg dat de afbeelding 100% van de hoogte van het grid-item vult */
.about-grid .item2 img {
  height: 100%;
  max-height: 400px;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Mobiel: onder elkaar */
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-grid .item2 img {
    height: auto;
  }
}


/* Wrapper */


	#wrapper {
		-moz-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -moz-filter 0.5s ease;
		-webkit-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -webkit-filter 0.5s ease;
		-ms-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -ms-filter 0.5s ease;
		transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease;
		position: relative;


		
		
	}

		#wrapper:after {
			pointer-events: none;
			-moz-transition: opacity 0.5s ease, visibility 0.5s;
			-webkit-transition: opacity 0.5s ease, visibility 0.5s;
			-ms-transition: opacity 0.5s ease, visibility 0.5s;
			transition: opacity 0.5s ease, visibility 0.5s;
			background: rgba(36, 38, 41, 0.5);
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			visibility: hidden;
			width: 100%;
			z-index: 1;
		}

			body.ie #wrapper:after {
				background: rgba(0, 0, 0, 0.8);
			}

		body.modal-active #wrapper {
			-moz-filter: blur(20px);
			-webkit-filter: blur(20px);
			-ms-filter: blur(20px);
			filter: blur(20px);
		}

			body.modal-active #wrapper:after {
				pointer-events: auto;
				opacity: 1;
				visibility: visible;
				z-index: 10003;
			}

			@keyframes spinner-scale {
				0%, 100% {
					background-size: 60px 60px;
				}
				50% {
					background-size: 80px 80px;
				}
			}

			#wrapper::before {
				content: '';
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.75); /* transparante zwarte achtergrond */
				background-image: url("images/spinner2.svg");
				background-repeat: no-repeat;
				background-position: center;
				background-size: 80px 80px;
				z-index: 999999;
				opacity: 0;
				visibility: hidden;
				transition: opacity 0.35s ease-out, visibility 0.35s;
				pointer-events: none;
				animation: spinner-scale 1s ease-in-out infinite;
			}

			

			body.is-preload #wrapper::before {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
			}



/* Header */




body {
	overflow-x: hidden;
}



.background-image-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('https://www.markmooibroek.com/images/canvas-background.webp');
  background-size: cover;
  background-position: 65% center; /* iets naar links */
  background-repeat: no-repeat;
  z-index: -3;
  pointer-events: none;
}

#bokehCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
}


	#header {
		-moz-transition: -moz-transform 0.2s ease;
		-webkit-transition: -webkit-transform 0.2s ease;
		-ms-transition: -ms-transform 0.2s ease;
		transition: transform 0.2s ease;
		-moz-user-select: none;
		-ms-user-select: none;
		-webkit-user-select: none;
		left: 0;
		line-height:4em;
		position: fixed;
		user-select: none;
		width: calc(100% - 0em);
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		bottom: auto;
		top: 0;
		display: none;
		z-index: 9999;
			.logo-text, .logo{
				display: none;
			}
	}

#header.small {
  z-index: 9999;
  border-bottom: 10px solid transparent; /* afstand creëren */
}


	#header.small {
		display: block;

		z-index: 999;
		.logo{
			position: absolute;
			width: 64px;
			margin-top: -14px;
			margin-left: -65px;
			display: none;
			display: block;
			z-index: 1;
			}
			.logo-text{

				margin-top: -9px;
				margin-left: -10px;
				display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      text-decoration: none;
      color: inherit;
      position: relative;
      z-index: 3; /* boven overlay */
			}
			h1{
				position: absolute;
				margin-top: 17px;
				padding-left: 80px;
			}
	}


/* Het logo zelf */
.mm-logo-top {
  display: inline-block;
  width: 150px;
  height: 45px;
  top:-16px;
  left: -110px;
  background: var(--logo-image-top) no-repeat center/contain;
}

/* Als je een overlay boven je header hebt */
.header-blogimage-overlay,
.header-blogimage-overlay img {
  pointer-events: none; /* laat kliks door */
}

  .logo-text b{
    color: var(--color-text);
  }

@media screen and (max-width: 736px) {
  #header.small h1{
		margin-left: 0px;
	}

#header.small b{
		margin-left: -5px;
	}
	
}




.bounce-elastic {
  animation: bounceElastic 0.6s ease-out;
}

.scroll-started #header.small {
  animation: none !important;
}

/* ANIMATIES */
@keyframes bounceElastic {
  0%   { transform: translateY(-120%); opacity: 0; }
  40%  { transform: translateY(10%); opacity: 1; }
  65%  { transform: translateY(-5%); }
  85%  { transform: translateY(3%); }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes bounceElasticOut {
  0%   { transform: translateY(0); opacity: 1; }
  30%  { transform: translateY(-10%); }
  60%  { transform: translateY(8%); }
  80%  { transform: translateY(-4%); }
  100% { transform: translateY(-100%); opacity: 0; }
}


#header.small.animate-in {
  animation: bounceElastic 0.5s ease-out;
}
#header.small.animate-out {
  animation: bounceElasticOut 0.5s ease-in;
  animation-fill-mode: forwards;
  pointer-events: none; /* voorkomt onbedoelde hover-effecten */
}

.header-menu{
	display: none;
	
}

 ul.inline-list {
      display: flex;
      justify-content: center;
      list-style: none;
      gap: 0.1em;
      padding: 0;
      margin: 0;
	  width: 100%;
	  position: absolute;
	  margin-top: 1px;
    }


.header-menu.small {
	display: block;

}


.inline-list .label {
  display: inline;
}

@media screen and (max-width: 1065px) {
  .inline-list .label {
    display: none;
  }

  .inline-list a i {
    font-size: 1.2em; /* toon het icoon normaal */
    margin-right: -2px !important;
  }
   a.menu-zoek.zoekicon {
    font-size: 1.2em; /* toon het icoon normaal */
    margin-right: 12px !important;
  }
}


.inline-list a {
  list-style: none;
  border-radius: var(--radius);
  background-color: transparent;
  padding: 0 1em !important;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: background-color 0.3s ease;
}


@media (max-width: 700px) {
	a.menu-downloads.menu-downloads{
	display: none;
	}
	a.menu-home.menu-home{
	display: none;
	}
	a.menu-main.menu-main{
	display: none;
	}
	a.menu-blog.menu-blog{
	display: none;
	}
	a.menu-zoek.menu-zoek{
	display: none !important;
	}
	.inline-list a {
    padding: 0 1em !important;
    margin-top: 0px;
    margin-bottom: 9px;
    height: 50px;
    background: none;
	position: absolute;
	right: 65px;
}
.inline-list a i {
    font-size: 22px !important;
}
.inline-list a:hover {
    background-color: transparent !important;
    color: #fff;
}
}

a.menu-zoek i {
  animation: rotateHint 3s linear infinite;
  display: inline-block;
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(15deg); }
  10% { transform: rotate(-10deg); }
  15% { transform: rotate(5deg); }
  20% { transform: rotate(0deg); }
}

a.menu-zoek.zoekicon i {
    margin-right: 5px;

  }

 .inline-list a i {
    margin-right: 5px;
	position: relative;
	margin-top: 5px;
  font-size: 14px;
  }

.inline-list a:hover {
  background-color: var(--color-mm-grey);
  color: #fff;
}

.inline-list a {
  -webkit-tap-highlight-color: transparent; /* of gebruik een lichte rgba-kleur */
}

.inline-list a:active {
  background-color: transparent; /* of je gewenste kleur */
}

/* === BASISSTIJL KNOPPEN === */
.menu-home,
.menu-main,
.menu-blog,
.menu-downloads {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  border-radius: var(--radius-inner);
  background-color: #fff;
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  transition: color 0.3s ease;
}

/* Label en icoon */
.menu-home .label,
.menu-main .label,
.menu-blog .label,
.menu-downloads .label,
.menu-home i,
.menu-main i,
.menu-blog i,
.menu-downloads i {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

/* Wave container */
.menu-home::before,
.menu-main::before,
.menu-blog::before,
.menu-downloads::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 2200px;
  height: 126px;
  background-repeat: repeat-x;
  transform: translateY(100%);
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

/* Active wave animation */
.menu-home.highlight::before,
.menu-main.highlight::before,
.menu-blog.highlight::before,
.menu-downloads.highlight::before {
  transform: translateY(35%);
  animation: waves 7.5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}

/* Highlight (actieve) knop */
.menu-home.highlight,
.menu-main.highlight,
.menu-blog.highlight,
.menu-downloads.highlight {
  color: var(--color-text);
  border: 1px solid var(--color-text);
  background-color: var(--color-mm-grey)0e;
}

/* === Pijl onder tekst – alleen bij highlight === */
.menu-home.highlight::after,
.menu-main.highlight::after,
.menu-blog.highlight::after,
.menu-downloads.highlight::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px; /* net boven onderrand */
  transform: translateX(-50%) scale(1);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-text); /* kleur van driehoek */
  z-index: 3;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Verborgen standaardtoestand zodat de fade-in werkt */
.menu-home::after,
.menu-main::after,
.menu-blog::after,
.menu-downloads::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%) scale(0.7);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-mm-grey)69;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes waves {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

.zoek-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3vh);
  transition: opacity 0.4s ease, transform 0.4s ease;
  padding: 6.8em 0em 0em 0em; /* top: 80px, bottom: 1em */
  box-sizing: border-box;
  overflow: hidden;
}


@media (max-width: 768px) {
	.zoek-layer {
  padding: 6.1em 0em 0em 0em; /* top: 80px, bottom: 1em */
}
}

.zoek-layer.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0%);
}


.sluit-layer {
  position: absolute;
    top: -0.2em;
    right: -0.2em;
    align-self: flex-end;
    width: 30px;
    height: 30px;
    margin-bottom: 0.3em;
    border-radius: 50px;
    background: #fff;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 1;
	display: flex;
  justify-content: center;   /* horizontaal centreren */
  align-items: center; 
    padding-bottom: 4px;
}



	body.is-preload #header {
		-moz-transform: translateY(-5em);
		-webkit-transform: translateY(-5em);
		-ms-transform: translateY(-5em);
		transform: translateY(-5em);
	}

		#header h1 {
			color: #a0a0a1;
			display: inline-block;
			font-size: 0.9em;
			line-height: 1;
			margin: 0;
			vertical-align: middle;
		}


			#header h1 a {
				border: 0;
				color: var(--color-text) !important;
			}

				#header h1 a:hover {
					color: inherit !important;
				}

			


						

/* Main */

	#main {

		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		clear: both;
	}


	#main > a > img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	  }

	.horizontal {
		grid-column: span 2;
	  }
	  
	  .vertical {
		grid-row: span 2;
	  }
	  
	  .big {
		grid-column: span 2;
		grid-row: span 2;
	  }

	  .full {
		grid-column: span 6;
		grid-row: span 4;
	  }

		#main .thumb {

			pointer-events: auto;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			overflow: hidden;
			position: relative;
			
			
		  }



		#loadMore{
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		-moz-transition: -moz-transform 1s ease;
		-webkit-transition: -webkit-transform 1s ease;
		-ms-transition: -ms-transform 1s ease;
		transition: transform 1s ease;
		-moz-user-select: none;
		-ms-user-select: none;
		-webkit-user-select: none;
		clear: both;
		margin-top: 40px;
		margin-bottom: 130px;

			
		}

			#main .thumb:after {
				background-image: -moz-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
				background-image: -webkit-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
				background-image: -ms-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
				background-image: linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
				pointer-events: none;
				background-size: cover;
				content: '';
				display: block;
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				
			}

			

			#main .thumb > .image {
				-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				border: 0;
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				transition: transform 0.2s ease; /* overgang voor het zoomen */
			}

			#main .thumb > .image:hover { 
				transform: scale(1.08) rotate(1deg);
			}


			#main .thumb > h2 {
				color: #fff !important;
				pointer-events: none;
				bottom: 1.875em;
				font-size: 0.8em;
				left: 2.1875em;
				right: 2.1875em;
				margin: 0;
				position: absolute;
				z-index: 1;
				text-align: center;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        min-width: 0;
			}

			#main .thumb > .image:hover #main .thumb > h2{ 
				opacity: 1;
			}

			@media screen and (max-width: 736px) {
				#main .thumb > h2 {
				bottom: 1em;
				font-size: 0.6em;
				left: 1em;
				right: 1em;
				}
			}

			.soort_cap{
				display: none;
			}

			#main .thumb > p, #main .thumb > b {
				display: none;
			}

		#main:after {
			pointer-events: none;
			background: rgba(36, 38, 41, 0.25);
			content: '';
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 1px;
			visibility: hidden;
			width: 100%;
			z-index: 1;
		}

			body.ie #main:after {
				background: #dedcd3;
			}

		body.content-active #main {
			-moz-filter: blur(6px);
			-webkit-filter: blur(6px);
			-ms-filter: blur(6px);
			filter: blur(6px);
		}

			body.content-active #main:after {
				pointer-events: auto;
				opacity: 1;
				visibility: visible;
			}

		body.is-preload #main .thumb {
			pointer-events: none;

		}

    /* Alleen zichtbaar maken; NIET aan layout-eigenschappen komen */
#main .thumb,
#main .thumb .pswp-gallery-item.image,
#main .thumb picture,
#main .thumb img {
  opacity: 1 !important;
  visibility: visible !important;
}

		

		.instagram-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 1.5rem;
			justify-items: center;
		  }

		#main .thumb {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			object-fit: cover;
		}
			

#main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 280px;
  grid-gap: 0em;
  padding: 0em;
  grid-auto-flow: dense;
}


#content {
	display: flex;
    align-items: center;
    justify-content: center;
	display: block;
	position: relative;
	height: auto;
	background-color: var(--color-content);
	width: 100%;
	color: var(--color-text) !important;
	margin-top: -24px;
}




.sort-desktop{
	margin-left: 3px;
	color: #212121;
}

.tab.active > .sort-desktop{
	margin-left: 3px;
	color: #fff;
}

@media screen and (max-width: 736px) {
	.sort-desktop{
		display: none;
	}
}

.tabs {
	width: 100%;
	display: flex;
	float: left;
	border-bottom: 3px solid var(--color-mm-grey);
}

.tab {
	padding: 15px 30px;
	margin-left: -10px;
	border-bottom: none;
	background-color: #dedcd3;
	cursor: pointer;
	text-decoration: none;
	color: #212121;
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: -10px 0px 12px -10px rgba(0, 0, 0, 0.35);

}

.tabs .tab.active {
    color: #ffcc00;
}

.tabs .tab:first-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.tab:hover {
	background-color: #fff;
}

.tab.active {
	background-color: var(--color-mm-grey);
	color: #fff;
	font-weight: bold;
}


#content-gallery {
	display: flex;
    align-items: center;
    justify-content: center;
	display: block;
	position: relative;
	height: auto;
	background-color: var(--color-content-gallery);
	width: 100%;
	color: #212121;
}

#content_gallery.blog-gallery{
  background-color: var(--color-content-gallery);
}


#content h1{
	color: var(--color-text) !important;
}

#content_text{
	padding: 4em 2em;
	max-width: 80em;
	margin: 0 auto;
  color: var(--color-text);
}

#main_bg{
	background-image: url(https://www.markmooibroek.com/images/logo_bg.png);
  background-size: 10rem;
  background-position: center center;
  background: repeating-linear-gradient(
    to bottom,
    #000000,
    #000000 10px,
    #222222 10px,
    #222222 20px
  );
}

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

#main {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: 175px;
  grid-gap: 0em;
  background-size: 22rem;
	}

}


#main > .thumb > img { 
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}


.thumb img,
.thumb picture,
.thumb picture img,
.thumb .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);           /* compositing fix */
  backface-visibility: hidden;
}


.horizontal {
  grid-column: span 2;
}

.vertical {
  grid-row: span 2;
}

.big {
  grid-column: span 2;
  grid-row: span 2;
}

.footer{
	background-color: var(--color-content-footer);
	color: var(--color-text);
	margin-bottom: -1px;
}

.footer-a a:hover{
	color: #999 !important;
}

.footer-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1em;
  padding: 1em 0;
  text-align: left;
}

/* Items */
.footer-bottom-item,
.footer-bottom-item-sub {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  align-items: center;
  gap: .6em;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  transition: background-color .3s ease, color .3s ease, padding .3s ease;
  background-color: var(--color-footer-button);
  padding: 1em; /* basis */
}

/* subitems lichter */
.footer-bottom-item-sub {
  background-color: var(--color-footer-button2);
}

/* Hover effect */
.footer-bottom-item:hover,
.footer-bottom-item-sub:hover {
  background-color: #ffffff23;
}

/* Icon */
.footer-bottom-item i,
.footer-bottom-item-sub i {
  font-size: 1.2rem;
  line-height: 1;
  justify-self: center;
}

/* 💡 Hier komt de ‘ruimte-opvul’-magie */
@media (min-width: 768px) {
  .footer-bottom-item,
  .footer-bottom-item-sub {
    padding: 1.25em 1.5em; /* iets ruimer */
  }
}

@media (min-width: 1024px) {
  .footer-bottom {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* iets breder */
  }

  .footer-bottom-item,
  .footer-bottom-item-sub {
    padding: 1.5em 2em; /* extra ruimte bij brede schermen */
  }
}

.lang-flag {
  transition: transform 0.4s ease;
}

.lang-flag:hover {
  transform: scale(1.1);
}

/* Tablet: 2 kolommen */
@media (max-width: 992px) {
  .footer-bottom {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobiel: 1 kolom */
@media (max-width: 600px) {
  .footer-bottom {
    grid-template-columns: 1fr;
  }
}

	
/* Footer */

.footer-copyright {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.footer-copyright-item {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-left {
  justify-self: start;
}

.footer-center {
  justify-self: center;
}

.footer-right {
  justify-self: end;
}

.footer-right a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s;
}

.footer-right a:hover {
  color: #6B04FF;
}

/* Mobiel layout aanpassen */
@media (max-width: 600px) {
  .footer-copyright {
    grid-template-columns: 1fr;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    justify-self: center;
    text-align: center;
  }

  .footer-left {
    flex-direction: column; /* Logo boven, tekst onder */
    order: 2; /* Na center item */
  }

  .footer-center {
    order: 1; /* Komt bovenaan */
  }

  .footer-right {
    flex-wrap: wrap;
    justify-content: center;
    order: 3; /* Onderaan */
  }
}

	#footer .copyright {
		color: #505051;
		font-size: 0.9em;
	}

#footer h1{
	color: #fff !important;
}

		#footer .copyright a {
			color: inherit;
		}

.copyright{
	margin-bottom: 4em;
}	  

		  /*  BURGER
========================================== */
.burger {
	display: block;
	width: 40px;
	height: 50px;
	position: fixed;
	top: 2px;
	right: 10px;
	padding: 10px;
	z-index: 10;
	margin-top: -1px;
	border-radius: 0 var(--radius) var(--radius) 0;
	position: relative;
    float: right;
  }



  .burger span {
	position: relative;
	margin-top: 9px;
	margin-bottom: 9px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -15px;
	margin-top: -1.5px;
  }


    .burger span, .burger span::before, .burger span::after {
	margin-left: -1px;
	display: block;
	width: 15px;
	height: 1px;
	border-radius: var(--radius);
	right: 0;
	background-color: var(--color-text);
	outline: 1px solid transparent;
	-webkit-transition-property: background-color, -webkit-transform;
	-moz-transition-property: background-color, -moz-transform;
	-o-transition-property: background-color, -o-transform;
	transition-property: background-color, transform;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	z-index: 99999999999;
  }

  .burger span::before{
	position: absolute;
	content: "";
	width: 25px;
  }

  .burger.small span::before{
	position: absolute;
	content: "";
	width: 25px;
  }

  .burger span::after {
	position: absolute;
	content: "";
	width: 25px;
  }

  .burger.small span::after {
	position: absolute;
	content: "";
	width: 25px;
  }

  .burger span::before {
	top: -9px;
  }
  .burger span::after {
	top: 9px;
  }
  .burger.clicked span {
	background-color: transparent;
  }
  .burger.clicked span::before {
	-webkit-transform: translateY(9px) rotate(45deg);
	-moz-transform: translateY(9px) rotate(45deg);
	-ms-transform: translateY(9px) rotate(45deg);
	-o-transform: translateY(9px) rotate(45deg);
	transform: translateY(9px) rotate(45deg);
  }
  .burger.clicked span::after {
	-webkit-transform: translateY(-9px) rotate(-45deg);
	-moz-transform: translateY(-9px) rotate(-45deg);
	-ms-transform: translateY(-9px) rotate(-45deg);
	-o-transform: translateY(-9px) rotate(-45deg);
	transform: translateY(-9px) rotate(-45deg);
  }
  .burger.clicked span:before, .burger.clicked span:after {
	background-color: var(--color-text);
  }
  .burger:hover {
	cursor: pointer;
  }


  .burger-topmenu {
	display: block;
	width: 63px;
	height: 63px;
	position: absolute;
	top: 30px;
	right: 0px;
	padding: 10px;
	z-index: 99999;
  }

    .burger-topmenu span {
	position: relative;
	margin-top: 9px;
	margin-bottom: 9px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -15px;
	margin-top: -1.5px;
  }


    .burger-topmenu span, .burger-topmenu span::before, .burger-topmenu span::after {
	margin-left: -1px;
	display: block;
	width: 15px;
	height: 1px;
	border-radius: var(--radius);
	right: 0;
	background-color: #fff;
	outline: 1px solid transparent;
	-webkit-transition-property: background-color, -webkit-transform;
	-moz-transition-property: background-color, -moz-transform;
	-o-transition-property: background-color, -o-transform;
	transition-property: background-color, transform;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	z-index: 99999999999;
  }

  .burger-topmenu span::before{
	position: absolute;
	content: "";
	width: 25px;
  }

  .burger-topmenu.small span::before{
	position: absolute;
	content: "";
	width: 25px;
  }

  .burger-topmenu span::after {
	position: absolute;
	content: "";
	width: 25px;
  }

  .burger-topmenu.small span::after {
	position: absolute;
	content: "";
	width: 25px;
  }

  .burger-topmenu span::before {
	top: -9px;
  }
  .burger-topmenu span::after {
	top: 9px;
  }
  .burger-topmenu.clicked span {
	background-color: transparent;
  }
  .burger-topmenu.clicked span::before {
	-webkit-transform: translateY(9px) rotate(45deg);
	-moz-transform: translateY(9px) rotate(45deg);
	-ms-transform: translateY(9px) rotate(45deg);
	-o-transform: translateY(9px) rotate(45deg);
	transform: translateY(9px) rotate(45deg);
  }
  .burger-topmenu.clicked span::after {
	-webkit-transform: translateY(-9px) rotate(-45deg);
	-moz-transform: translateY(-9px) rotate(-45deg);
	-ms-transform: translateY(-9px) rotate(-45deg);
	-o-transform: translateY(-9px) rotate(-45deg);
	transform: translateY(-9px) rotate(-45deg);
  }
  .burger-topmenu.clicked span:before, .burger-topmenu.clicked span:after {
	background-color: #000;
  }
  .burger-topmenu:hover {
	cursor: pointer;
  }
  
  /*  NAV
  ========================================== */
  
nav {
  line-height: 2em;
  z-index: 9999;
  background-color: var(--color-text2);
  position: fixed;
  top: 0;
  right: 0;
  height: 100svh;
  max-width: 500px;
  width: 110%;
  padding: 24px 75px;
  overflow-y: auto;
  display: flex;                 /* ✅ Flexbox inschakelen */
  flex-direction: column;        /* Zorgt dat alles onder elkaar blijft */
  justify-content: center;       /* ✅ Centreert verticaal */
  box-sizing: border-box;        /* Houd padding netjes binnen de hoogte */
  
  transform: translateX(110%);
  transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

  nav.show {
    height: 100%;
	-webkit-transform: translateX(17px);
	-moz-transform: translateX(17px);
	-ms-transform: translateX(17px);
	-o-transform: translateX(17px);
	transform: translateX(17px);
  }
  nav.show ul.main li {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	opacity: 1;
  }
  
nav.show ul.main li:nth-child(1)  { transition-delay: 0.07s; }
nav.show ul.main li:nth-child(2)  { transition-delay: 0.14s; }
nav.show ul.main li:nth-child(3)  { transition-delay: 0.21s; }
nav.show ul.main li:nth-child(4)  { transition-delay: 0.28s; }
nav.show ul.main li:nth-child(5)  { transition-delay: 0.35s; }
nav.show ul.main li:nth-child(6)  { transition-delay: 0.42s; }
nav.show ul.main li:nth-child(7)  { transition-delay: 0.49s; }
nav.show ul.main li:nth-child(8)  { transition-delay: 0.56s; }
nav.show ul.main li:nth-child(9)  { transition-delay: 0.63s; }
nav.show ul.main li:nth-child(10) { transition-delay: 0.70s; }
nav.show ul.main li:nth-child(11) { transition-delay: 0.77s; }
nav.show ul.main li:nth-child(12) { transition-delay: 0.84s; }
nav.show ul.main li:nth-child(13) { transition-delay: 0.91s; }
nav.show ul.main li:nth-child(14) { transition-delay: 0.98s; }
nav.show ul.main li:nth-child(15) { transition-delay: 1.05s; }
nav.show ul.main li:nth-child(16) { transition-delay: 1.12s; }
nav.show ul.main li:nth-child(17) { transition-delay: 1.19s; }
nav.show ul.main li:nth-child(18) { transition-delay: 1.26s; }
nav.show ul.main li:nth-child(19) { transition-delay: 1.33s; }
nav.show ul.main li:nth-child(20) { transition-delay: 1.40s; }

  nav.show .about, nav.show .social, nav.show ul.sub {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
	transition-delay: 0.85s;
	z-index: 9;
  }
 
  nav ul.main {
	list-style-type: none;
  }

  nav ul.main li {
	-webkit-transform: translateX(40px);
	-moz-transform: translateX(40px);
	-ms-transform: translateX(40px);
	-o-transform: translateX(40px);
	transform: translateX(40px);
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
  }
  nav ul.main li:last-of-type {
	margin-bottom: 0px;
  }
  nav ul.main li a {
	color: var(--color-text);
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	padding: 5px 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
  }

  nav ul.main li a b{
	color: var(--color-text) !important;
	border: 1px solid var(--color-text);
	border-radius: var(--radius-inner);
	padding: 0.2em 0.5em;

}

  nav ul.main li a span {
	color: #b7ac7f;
  }
  nav ul.main li a:hover {
	color: #b7ac7f;
  }

  nav li i {
	color: var(--color-text);
  }

  nav .about {
	margin-top: 20px;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
	transform: translateY(30px);
	opacity: 0;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
  }
  nav .about p {
	color: #ffffff;
	font-family: "Spectral", serif;
	font-size: 1.05rem;
	letter-spacing: 0.5px;
	line-height: 170%;
  }
  nav .social {
	margin-top: 40px;
	position: relative;
	padding-bottom: 30px;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
	transform: translateY(30px);
	opacity: 0;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
  }
  nav .social:after {
	content: "";
	width: 230px;
	height: 2px;
	background-color: #b7ac7f;
	position: absolute;
	bottom: 0;
	left: 0;
  }
  nav .social a {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 25px;
  }
  nav .social a:last-of-type {
	margin-right: 0px;
  }
  nav .social a:hover svg path, nav .social a:hover svg circle {
	fill: #b7ac7f;
  }
  nav .social a svg {
	width: 100%;
	height: 100%;
  }
  nav .social a svg path, nav .social a svg circle {
	fill: #ffffff;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
  }
  nav ul.sub {
	list-style-type: none;
	margin-top: 40px;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
	transform: translateY(30px);
	opacity: 0;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
  }
  nav ul.sub li {
	margin-bottom: 10px;
  }
  nav ul.sub li:last-of-type {
	margin-bottom: 0px;
  }
  nav ul.sub li a {
	color: #ffffff;
	font-family: "Raleway", sans-serif;
	letter-spacing: 1px;
	font-size: 0.9rem;
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
  }
  nav ul.sub li a:hover {
	color: #b7ac7f;
  }

  nav a:hover{
	color: var(--color-link) !important;
  }

  .hr-menu{
    margin-top:10px; 
    margin-bottom:10px; 
    margin-left:0px; 
    margin-right:0px; 
    border-bottom: 1px solid var(--color-text);
  }
  
  /*  OVERLAY
  ========================================== */
  .overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
	background-color: #00000045;
	
  }

  .overlay2 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
	
  }
  .overlay.show {
	opacity: 1;
	backdrop-filter: blur(10px);
	visibility: visible;
	

  }

  .overlay2.show2 {
	opacity: 1;
	background: #00000070;
	backdrop-filter: blur(10px);
	visibility: visible;
	

  }
  
  .ig-badge {
  display: inline-flex;
  align-items: center;
  background-color: #f3f1eb; /* zachte achtergrond */
  color: var(--color-mm-grey); /* donkere tekst */
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  transition: transform 0.3s ease;
}

.ig-badge:hover {
  transform: translateY(-2px);
}

.ig-icon {
  margin-right: 8px;
  font-size: 1.2em;
}

  

.recent-work-buttons ul{
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-gap: 10px;
	grid-auto-flow: dense;
}


.recent-work-buttons h1{
	color: #212121 !important;
}

.recent-work-buttons li{
	float: left;
	border-radius: var(--radius);
	width: 100%;
	text-align: center;
		  }

.recent-work-buttons .actief {
	background-color: #fff !important;
	color: #000 !important;
}

/* li: ruimte rechts reserveren voor het icoon */
ul.mygear li {
  position: relative;
  padding: 12px 40px 12px 12px; /* extra right padding voor icoon */
}

/* odd achtergrond (blijft werken) */
ul.mygear li:nth-child(odd){
  background-color: rgba(255,255,255,0.1);
}

/* icoon: pak 'm ongeacht nesting (ook binnen <u>) en overrule inline styles */
ul.mygear li i {
  position: absolute !important;   /* overrule inline position: relative */
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  float: none !important;          /* overrule eventuele float:right/left */
  padding: 0 !important;           /* overrule padding-left uit oude regel */
  line-height: 1;
}

.mygear + h2 {
    margin-top: 30px; /* ruimte boven nieuwe sectie */
}

h2.fade-in.dark {
    margin-bottom: 10px; /* ruimte onder de titel */
}

.badge-count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;          /* centreert verticaal */
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;               /* geen extra leading */
  color: #fff;
  background: rgba(21,21,19,.85);
  backdrop-filter: saturate(1.2) blur(2px);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  pointer-events: none;
}

/* >>> Kritiek: lijnhoogte van het icoon uitzetten, dan exact centreren */
.badge-count i {
  display: flex;                /* maakt een echte box */
  align-items: center;
  justify-content: center;
  font-size: 1em;               /* gelijk aan tekstgrootte */
  line-height: 0;               /* haalt font-leading weg */
  height: 1em;                  /* zelfde em-box als tekst */
  width: 1em;                   /* optioneel, geeft perfecte box */
  margin: 0;                    /* geen extra marge */
}

.badge-count-num {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 0;                /* reset */
  transform: none;              /* geen micro-shifts meer */
}

/* iets groter op tablet/desktop */
@media (min-width: 768px){
  .badge-count { padding: 7px 12px; font-size: 13px; }
}

.swiper-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	/* Fix of Webkit flickering */
	z-index: 1;
  }

  .swiper-end-slide{
    margin-right: 2em;
  }


  .swiper-container-no-flexbox .swiper-slide {
	float: left;
  }
  .swiper-container-vertical > .swiper-wrapper {
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
  }
  .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
  }
  .swiper-container-android .swiper-slide,
  .swiper-wrapper {
	-webkit-transform: translate3d(0px, 0, 0);
	-moz-transform: translate3d(0px, 0, 0);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate3d(0px, 0, 0);
	transform: translate3d(0px, 0, 0);
  }
  .swiper-container-multirow > .swiper-wrapper {
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
  }
  .swiper-container-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
  }

.reel-slide {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: white;
    text-decoration: none;
    overflow: hidden;
}

.reel-overlay {
    padding: 10px 20px;
	position: absolute;
	bottom: 2em;
    align-items: center;
    border-radius: var(--radius-inner);
	color: #fff !important;	
}

.reel-overlay i{
	position: relative;
    margin-right: 5px;
    top: 2px;
    font-size: 1rem;
}

    .swiper-slide {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: var(--radius);
    }

    /* a11y */
    .swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
    }
    /* IE10 Windows Phone 8 Fixes */
    .swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    }
    .swiper-wp8-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
    }
    /* Arrows */
    .swiper-button-prev,
    .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 10px 44px;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1em;
    border-radius: 100px;
    }
    .swiper-button-prev.swiper-button-disabled,
    .swiper-button-next.swiper-button-disabled {
    opacity: 0.15;
    cursor: auto;
    pointer-events: none;
    }
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
    left: 10px;
    right: auto;
    }
    .swiper-button-prev.swiper-button-black,
    .swiper-container-rtl .swiper-button-next.swiper-button-black {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
    }
    .swiper-button-prev.swiper-button-white,
    .swiper-container-rtl .swiper-button-next.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
    right: 10px;
    left: auto;
    }
    .swiper-button-next.swiper-button-black,
    .swiper-container-rtl .swiper-button-prev.swiper-button-black {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
    }
    .swiper-button-next.swiper-button-white,
    .swiper-container-rtl .swiper-button-prev.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
    }
    /* Pagination Styles */
    .swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10;
    }
    .swiper-pagination.swiper-pagination-hidden {
    opacity: 0;
    }
    .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
    }
    .swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
    }
    .swiper-pagination-white .swiper-pagination-bullet {
    background: #fff;
    }
    .swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff;
    }
    .swiper-pagination-white .swiper-pagination-bullet-active {
    background: #fff;
    }
    .swiper-pagination-black .swiper-pagination-bullet-active {
    background: #000;
    }
    .swiper-container-vertical > .swiper-pagination {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0px, -50%, 0);
    -moz-transform: translate3d(0px, -50%, 0);
    -o-transform: translate(0px, -50%);
    -ms-transform: translate3d(0px, -50%, 0);
    transform: translate3d(0px, -50%, 0);
    }
    .swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
    margin: 5px 0;
    display: block;
    }
    .swiper-container-horizontal > .swiper-pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    }
    .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
    margin: 0 5px;
    }
    /* 3D Container */
    .swiper-container-3d {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    }
    .swiper-container-3d .swiper-wrapper,
    .swiper-container-3d .swiper-slide,
    .swiper-container-3d .swiper-slide-shadow-left,
    .swiper-container-3d .swiper-slide-shadow-right,
    .swiper-container-3d .swiper-slide-shadow-top,
    .swiper-container-3d .swiper-slide-shadow-bottom,
    .swiper-container-3d .swiper-cube-shadow {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    }
    .swiper-container-3d .swiper-slide-shadow-left,
    .swiper-container-3d .swiper-slide-shadow-right,
    .swiper-container-3d .swiper-slide-shadow-top,
    .swiper-container-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    }
    .swiper-container-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Firefox 3.6-15 */
    background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Opera 11.10-12.00 */
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-container-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Firefox 3.6-15 */
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Opera 11.10-12.00 */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-container-3d .swiper-slide-shadow-top {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Firefox 3.6-15 */
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Opera 11.10-12.00 */
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Firefox 3.6-15 */
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Opera 11.10-12.00 */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    /* Firefox 16+, IE10, Opera 12.50+ */
    }
    /* Coverflow */
    .swiper-container-coverflow .swiper-wrapper {
    /* Windows 8 IE 10 fix */
    -ms-perspective: 1200px;
    }
    /* Fade */
    .swiper-container-fade.swiper-container-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    }
    .swiper-container-fade .swiper-slide {
    pointer-events: none;
    }
    .swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none;
    }
    .swiper-container-fade .swiper-slide-active,
    .swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
    }
    /* Cube */
    .swiper-container-cube {
    overflow: visible;
    }
    .swiper-container-cube .swiper-slide {
    pointer-events: none;
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    }
    .swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    }
    .swiper-container-cube .swiper-slide-active,
    .swiper-container-cube .swiper-slide-next,
    .swiper-container-cube .swiper-slide-prev,
    .swiper-container-cube .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
    }
    .swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    }
    .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
    z-index: 0;
    }
    /* Scrollbar */
    .swiper-scrollbar {
    border-radius: var(--radius);
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, 0.6);
    }
    .swiper-container-horizontal > .swiper-scrollbar {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 50;
    height: 5px;
    width: 60%;
    transform: translate(-50%,0);

    }
    .swiper-container-vertical > .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%;
    }
    .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--radius);
    left: 0;
    top: 0;
    
    }
    .swiper-scrollbar-cursor-drag {
    cursor: move;
    }
    /* Preloader */
    .swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    animation: swiper-preloader-spin 1s steps(12, end) infinite;
    }
    .swiper-lazy-preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    }
    .swiper-lazy-preloader-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    }
    @-webkit-keyframes swiper-preloader-spin {
    100% {
      -webkit-transform: rotate(360deg);
    }
    }
    @keyframes swiper-preloader-spin {
    100% {
      transform: rotate(360deg);
    }
    }

    .swiper-pagination{
    position:absolute;
    text-align:center;
    transition:.3s opacity;
    transform:translate3d(0,0,0);
    z-index:10;
  }

  .swiper-pagination.swiper-pagination-hidden{
    opacity:0
  }

  .swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{
    display:none!important
  }

  .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{
    bottom:var(--swiper-pagination-bottom,0px);
    top:var(--swiper-pagination-top,auto);
    left:0;
    width:100%
  }

  .swiper-pagination-bullets-dynamic{
    overflow:hidden;font-size:0
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
    transform:scale(.33);position:relative
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{
    transform:scale(1)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{
    transform:scale(1)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{
    transform:scale(.66)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{
    transform:scale(.33)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{
    transform:scale(.66)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{
    transform:scale(.33)
  }

  .swiper-pagination-bullet{
    width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
    eight:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));
    display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);
    background:var(--swiper-pagination-bullet-inactive-color,#757575);
    opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)
  }

  button.swiper-pagination-bullet{
    border:none;
    margin:0;
    padding:0;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none
  }

  .swiper-pagination-clickable .swiper-pagination-bullet{
    cursor:pointer
  }

  .swiper-pagination-bullet:only-child{
    display:none!important
  }

  .swiper-pagination-bullet-active{
    opacity:var(--swiper-pagination-bullet-opacity, 1);
    background:var(--swiper-pagination-color,var(--swiper-theme-color, #000));
  }

  .swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{
    right:var(--swiper-pagination-right,8px);
    left:var(--swiper-pagination-left,auto);
    top:50%;
    transform:translate3d(0px,-50%,0)
  }

  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;
    display:block
  }

  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
    top:50%;
    transform:translateY(-50%);
    width:8px
  }

  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
    display:inline-block;
    transition:.2s transform,.2s top
  }

  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
    

      .swiper-container {
        width: 100%;
        height: 35em;
        padding: 40px 0px;
        margin-bottom: 4em;
      }
      .swiper-slide b {
      color: #fff;
      bottom: 2em;
        position: absolute;
      font-size: 2.5em;
      font-family: 'Raleway', sans-serif;
        font-weight: 1000;
        letter-spacing: -0.05em;
      }
      .swiper-slide {
        text-align: center;
        font-size: 1em;
        color: #212121;
        width: 15em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      
        }
        

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

        .swiper-slide b {
          font-size: 1.5em;
          }
          .swiper-container {
          height: 30em;

        }
        

        }

/* =========================
   Vars
   ========================= */
:root{
  /* site layout */
  --site-max: 80em;
  --site-pad-x: 2em;
  /* berekende gutter: side-bleed + 2 em content-padding */
  --gutter: calc((100vw - min(100vw, var(--site-max))) / 2 + var(--site-pad-x));

  /* mmx kleuren e.d. */
  --mmx-brand: #e7b541;
  --mmx-fg: #fff;
  --mmx-fg-muted: #e8ecf4;
  --mmx-border: rgba(255,255,255,.14);
  --mmx-glass: rgba(0,0,0,.30);
  --mmx-badge-bg: rgba(0,0,0,.45);
  --mmx-radius: 20px;
}

/* =========================
   Swiper full-bleed + controls
   ========================= */
.swiper-container{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* Laat Swiper breedtes bepalen */
.swiper-slide{ box-sizing: border-box; flex-shrink: 0; }

/* Pagination / scrollbar uitgelijnd met content */
.swiper-container .swiper-pagination,
.swiper-container .swiper-scrollbar{
  left: auto;
  right: auto;
  margin: 0 auto;
  max-width: 50%;
  width: calc(min(var(--site-max), 100vw) - 2 * var(--site-pad-x));
  overflow: hidden;
}

/* Arrows (100% breedte, grotere klikzone) */
.swiper-button-prev,
.swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  z-index: 10;
}
.swiper-button-prev{ left: 10px !important; }
.swiper-button-next{ right: 10px !important; }

@media (max-width: 768px){
  .swiper-button-prev,
  .swiper-button-next{ display: none !important; }
}

/* =========================
   MMX slide content
   ========================= */

/* basis van de slide + kaart */
.swiper-container .swiper-slide{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column; /* i.c.m. equal-height */
}

/* full-bleed kaart als achtergrond */
.swiper-container .swiper-slide .mmx-card{
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: center/cover no-repeat;
  height: 100%;
  width: 100%;
}

/* Maak de archief-kaart 100% klikbaar (zoals je coverlink) */
.mmx-card-archive .mmx-coverlink.mmx-archive-open {
  cursor: pointer;
}

/* Klein visueel verschil t.o.v. gewone kaarten (optioneel) */
.mmx-card-archive .mmx-title::before{
  content: "";
  opacity: .9;
}

/* klikbare overlay (tekst verborgen) */
.swiper-container .swiper-slide .mmx-coverlink{
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
}

/* overlay + body lagen */
.swiper-container .swiper-slide .mmx-gradient{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.62) 12%,
    rgba(0,0,0,.35) 42%,
    rgba(0,0,0,0) 68%
  );
}

.swiper-container .swiper-slide .mmx-body{
   left:0; right:0; bottom:0; z-index:3;
  display:grid; gap:0px; padding: 1.5em;
  color:var(--mmx-fg);
  background:linear-gradient(to top, var(--mmx-glass), transparent 60%);
  text-align:left; align-items:start;
}

.mmx-body p {
    margin: 0 0 15px 0;
    line-height: 20px;
}

/* headerlijn: “Categorie | aantal foto’s” */
.swiper-container .swiper-slide .mmx-headerline{
  display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  margin-bottom:6px; flex-wrap:wrap;
}
.swiper-container .swiper-slide .mmx-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; text-transform:uppercase; letter-spacing:.2px; opacity:.95;
}
.swiper-container .swiper-slide .mmx-kicker .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--mmx-brand); box-shadow:0 0 0 4px rgba(231,181,65,.18);
}
.swiper-container .swiper-slide .mmx-label{ color:var(--mmx-fg-muted); }
.swiper-container .swiper-slide .mmx-value{ font-weight:700; color:var(--mmx-fg); text-transform:none; }

/* badge met aantal foto’s (rechts) */
.swiper-container .swiper-slide .mmx-meta{ display:flex; align-items:center; }
.swiper-container .swiper-slide .mmx-badge{
  margin: 10px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:var(--mmx-badge-bg); border:1px solid var(--mmx-border);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  white-space:nowrap;
}

/* titel links onder header */
.swiper-container .swiper-slide .mmx-title{
  margin:0; justify-self:start;
  font-weight:1000; letter-spacing:-0.05em;
  font-size:clamp(1.4rem, 3.5vw, 2.4em);
  color:#fff; text-shadow:0 4px 16px rgba(0,0,0,.6); line-height: 40px; margin-bottom: 0.5em; 
}

/* acties */
.swiper-container .swiper-slide .mmx-actions{
  margin-top:6px; display:flex; flex-wrap:wrap; gap:10px;
}
.swiper-container .swiper-slide .mmx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius: var(--radius-inner); font-weight:700;
  color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(4px);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.swiper-container .swiper-slide .mmx-btn:hover{
  transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.25);
}

/* equal height voor alle body’s */
.swiper-container .swiper-wrapper{ display:flex; align-items:stretch; }
.swiper-container .swiper-slide .mmx-card{ display:flex; flex-direction:column; justify-content:flex-end; }
.swiper-container .swiper-slide .mmx-body{
  flex-grow:1; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:220px; padding-top:1.5em;
}

/* mobiel tweaks */
@media (max-width:736px){
  .swiper-container .swiper-slide .mmx-title{ font-size:clamp(1.1rem, 5vw, 1.6rem); line-height: 25px; }
  .swiper-container .swiper-slide .mmx-headerline{ gap:8px; }
  .swiper-container .swiper-slide .mmx-meta{ width:100%; justify-content:flex-end; }
  
}

@media (max-width: 736px) {
  /* container laat 1 kolom toe */
  .swiper-container .swiper-slide .mmx-actions{
    display: block !important;   /* was flex */
    width: 100%;
  }

  /* knop vult de hele breedte */
  .swiper-container .swiper-slide .mmx-actions .mmx-btn{
    display: flex !important;    /* was inline-flex */
    width: 100% !important;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }

  /* als je soms 2 knoppen hebt: onder elkaar met wat ruimte */
  .swiper-container .swiper-slide .mmx-actions .mmx-btn + .mmx-btn{
    margin-top: 10px;
  }
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .swiper-container .swiper-slide .mmx-body{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ===============================
   MMX: Aantal foto's rechtsboven op foto
   =============================== */
.swiper-container .swiper-slide {
  position: relative;
  overflow: hidden;
  border-radius:var(--radius-inner);
}

/* Plaats de badge los rechtsboven in de foto */
.swiper-container .swiper-slide .mmx-meta {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 5; /* boven afbeelding, onder swiper-arrows */
  pointer-events: none; /* laat klik op slide zelf gewoon werken */
}

/* Stijl van de badge */
.swiper-container .swiper-slide .mmx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}

/* Optioneel: iets compacter op mobiel */
@media (max-width: 768px) {
  .swiper-container .swiper-slide .mmx-meta {
    top: 8px;
    right: 8px;
  }
  .swiper-container .swiper-slide .mmx-badge {
    font-size: 12px;
    padding: 0.8em;
  }
}

/* Auteurblok onder intro in blog-swiper */
.mmx-authorline{
  display:flex;
  align-items:center;
  margin-top:.5rem;
  margin-bottom:.5rem;
}

.mmx-author{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.mmx-author-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.mmx-author-name{
  font-weight:600;
  font-size:.95rem;
  line-height:1;
}

/* Mobiel: iets compacter en beter uitgelijnd */
@media (max-width:640px){
  .mmx-author-avatar{
    width:26px;
    height:26px;
  }
  .mmx-author-name{
    font-size:.9rem;
  }
}
		 
		  .blockquote {
			padding-left: 2rem;
			position: relative;
			overflow: hidden;
			font-size: 1.2em;
			color: #fff;
		  }

		.blockquote.dark {
			padding-left: 2rem;
			position: relative;
			overflow: hidden;
			font-size: 1.2em;
			color: var(--color-text);
		  }

		  .blockquote::before, .blockquote::after {
			position: absolute;
			color: #fff;
			font-size: 10px;
		  }

		.blockquote.dark::before, .blockquote.dark::after {
			position: absolute;
			color: var(--color-text);
			font-size: 10px;
		  }

		  .blockquote p {
			margin: 0;
			width: 50%;
			font-size: 2em;
		  }
		  .blockquote p + p {
			margin-top: 1rem;
		  }
		  .blockquote--classic::before {
			content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23ffffff'><path d='M9.983 3v7.391C9.983 16.095 6.252 19.961 1 21l-.995-2.151C2.437 17.932 4 15.211 4 13H0V3h9.983zM24 3v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151C16.437 17.932 18 15.211 18 13h-3.983V3H24z'/></svg>");
			left: 0;
		  }
		  .blockquote--classic.dark::before {
			content: var(--blockquote-content-dark);
			left: 0;
		  }
		  .blockquote--classic::after {
			content: "";
			left: 5px;
			top: 25px;
			width: 1px;
			height: 100%;
			background-color: currentColor;
		  }

      .mySwiperBlogs .mmx-card{ aspect-ratio: 3 / 4; }
@media (max-width:736px){ .mySwiperBlogs .mmx-card{ aspect-ratio: 3 / 3.6; } }

/* Datum boven de titel in de tekstlaag */
.mmx-dateInBody{
  font-size: 13px;
  color: var(--mmx-fg-muted, #e8ecf4);
  opacity: .9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Scrollbar-container */
.mySwiperBlogs-scrollbar {
  width: 100%;
  height: 6px;
  border-radius: 10px;
  background: var(--color-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-top: 30px !important;
  cursor: grab;
}


/* Scroll-thumb (draggable balkje) */
.mySwiperBlogs-scrollbar .swiper-scrollbar-drag {
  background: var(--color-full2);
  border-radius: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover-effect */
.mySwiperBlogs-scrollbar:hover .swiper-scrollbar-drag {
  opacity: 1;
  transform: scaleY(1.2);
}

/* Mobiel iets dunner en compacter */
@media (max-width: 768px) {
  .mySwiperBlogs-scrollbar {
    height: 4px;
    margin-top: 12px;
  }
}

/* ============================
   Sorteermenu – glass look + bounceElastic hover
   ============================ */


   /* Sorteer-balk sticky op de variabele top */
#sorteer-flow .mmbar { position: sticky; top: var(--sticky-top, 0px); z-index: 5; }

/* Groot menu verbergen terwijl je OMLAAG binnen sorteer-flow zit */
.in-sortflow #header { opacity: 0; pointer-events: none; }
/* Wil je ‘m echt uit de flow halen tijdens verbergen, kun je ook gebruiken: */
/* .in-sortflow #header { visibility:hidden; } */

/* Sorteerbalk sticky met dynamische top */
#sorteer-flow .mmbar {
  position: sticky;
  top: var(--sticky-top, 0px);
  z-index: 5;
}



/* Verberg de header alléén wanneer we OMLAAG binnen #sorteer-flow zitten */
.in-sortflow-down #header {
  opacity: 0;
  pointer-events: none;
}

/* Forceer header zichtbaar in alle andere situaties (voor/na/omhoog) */
.header-force-show #header {
  opacity: 1 !important;
  pointer-events: auto;
}


:root {
  --mm-fg:    var(--color-mm-grey);
  --mm-h:     52px;   /* hoogte van dropdown én zoekknop */
  --mm-gap:   .6rem;
  --mm-pad-x: .9rem;
}


/* ===== Container ===== */
.mmbar {
  position: sticky;
  top: var(--sticky-top, 85px);
  z-index: 20;

  display: grid;
  grid-template-columns: 1fr auto; /* dropdown | search */
  align-items: center;
  gap: var(--mm-gap);

  width: 100%;
  max-width: 320px;
  margin: 0 auto 1rem;
  background: transparent;
}

@media (max-width: 700px) {
  .mmbar { max-width: 240px; --mm-h: 48px; }
}
@media (max-width: 380px) {
  .mmbar { max-width: 210px; --mm-h: 46px; }
}

/* ===== Gedeelde stijl (wrapper + search) ===== */
.mmbar-select-wrap,
.mmbar-search {
  height: var(--mm-h);
  border-radius: 999px;
  border: 1px solid var(--mm-brd);
  background: var(--mm-bg);
  color: var(--color-text) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 0 20px rgba(0,0,0,.06);
  transition: background-color .25s ease, box-shadow .25s ease;
  will-change: transform;
  transform-origin: center;
}

/* ===== Elastic bounce hover ===== */
@keyframes bounceElasticHover {
  0%   { transform: translateY(0)   scale(1);    }
  25%  { transform: translateY(3%)  scale(0.97); }
  50%  { transform: translateY(-2%) scale(1.03); }
  75%  { transform: translateY(1%)  scale(0.99); }
  100% { transform: translateY(0)   scale(1);    }
}

.mmbar-select-wrap:hover,
.mmbar-search:hover {
  background-color: var(--mm-bg-hover);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  animation: bounceElasticHover 0.65s cubic-bezier(.34,1.56,.64,1);
}


.mmbar-search:active,
.mmbar-select:active,
.mmbar-select-wrap:active {
  transform: scale(0.94);
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

/* ===== Dropdown WRAPPER met icoon links + caret rechts ===== */
.mmbar-select-wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr; /* icon | select */
  align-items: center;
  overflow: hidden;
}

/* Linker filter-icoon (bijv. <i class="fi fi-sr-filter"></i>) */
.mmbar-select-wrap > .fi {
  margin-left: var(--mm-pad-x);
  margin-right: .45rem;
  margin-top: 4px;
  font-size: 1rem;
  color: var(--color-text);
  opacity: .9;
  pointer-events: none;
}

/* Caret als echt element (niet via background → geen “tiling”) */
.mmbar-caret {
  position: absolute;
  right: .9rem;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px; /* expliciet tegen herhalen */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23151513' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  opacity: .9;
}

/* ===== Dropdown (het echte <select>) ===== */
.mmbar-select {
  width: 100%;
  height: 100%;
  border: none;
  background: none !important;      /* geen eigen pijl */
  background-image: none !important;
  color: var(--color-text);
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;

  /* links: ruimte wordt door icoon ingevuld; rechts: ruimte voor caret */
  padding: 0 calc(var(--mm-pad-x) + 1.6rem) 0 .2rem;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

/* ===== PERFECT RONDE zoekknop ===== */
.mmbar-search {
  /* loskoppelen van eventuele grid-stretch */
  align-self: center;
  justify-self: end;

  inline-size: var(--mm-h);   /* = width */
  block-size: var(--mm-h);    /* = height */
  aspect-ratio: 1 / 1;        /* extra safeguard */
  box-sizing: border-box;

  display: grid;              /* perfecte centrering van het icoon */
  place-items: center;

  padding: 0;                 /* geen extra ruimte → blijft exact vierkant */
  border-radius: 50%;         /* écht rond */
  border: 1px solid var(--mm-brd);
  background: var(--mm-bg);
  color: var(--mm-fg);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 0 20px rgba(0,0,0,.06);
  cursor: pointer;
  text-decoration: none;
  position: relative;

  transform: none;            /* geen scale in rust → geen optische vervorming */
  will-change: auto;
  contain: layout paint size; /* isoleren tegen oudertransforms */
}

.mmbar-search i {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-size: 1rem;    /* pas evt. aan */
  margin: 0;
  transform: translateY(0);
  color: var(--color-text) !important;
  pointer-events: none;
}

/* ===== Geen blur fallback ===== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mmbar-select-wrap,
  .mmbar-search { background: rgba(255,255,255,.85); }
}

.panel { overflow: auto; }
.panel [data-gear-root] .gear-toolbar { position: sticky; top: 0; z-index: 5; }

.gear-section h2{
  line-height: 1.5;
    margin: 0 0 0.5em 0 !important;
}

.gear-category ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  background-color: rgba(0,0,0,0.1);
  border-radius: 10px;
}

.gear-category.open ul {
  max-height: 1000px; /* voldoende ruimte voor inhoud */
  opacity: 1;
  margin-bottom: 0.5em; 
}

/* ===== Nieuwe layout voor de toggle-kop met pijl RECHTS ===== */
.gear-toggle {
  cursor: pointer;
  position: relative;
  /* i.p.v. left-padding → grid met vaste pijl rechts */
  display: grid;
  grid-template-columns: 1fr auto 0px; /* titel | (optioneel) count | pijl */
  align-items: center;
  gap: .3rem;
  border-radius: .4rem;
}

/* focus-toegankelijkheid */
.gear-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Rechter chevron (mask + currentColor), draait bij open */
.gear-toggle::after {
  content: "";
  width: 14px;
  height: 14px;
  justify-self: end;
  background-color: currentColor;
  opacity: .85;
  transform: rotate(0deg);
  transition: transform .25s ease, opacity .2s ease;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
          mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
}

/* OPEN = pijl 90° */
.gear-category.open .gear-toggle::after {
  transform: rotate(90deg);
  opacity: 1;
}


/* ---- OUDE '::before' pijl en left-padding zijn niet meer nodig ---- */
/* .gear-toggle::before, .gear-category.open .gear-toggle::before { verwijderd } */

.gear-header {
  display: flex;
  align-items: center;              /* midden van h1 = midden van button ✅ */
  justify-content: space-between;
  width: 100%;                      /* zorgt dat flex zich volledig uitstrekt */
  margin-bottom: 0.8em;
  gap: 1em;

  /* --- Sticky toevoeging --- */
  position: relative;
  z-index: 5;                       /* boven de content */
  padding: 0.6em 0em;             /* wat ruimte zodat het niet 'plakt' tegen de randen */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius, 10px);
}

.gear-section.in-layer .gear-header,
.layer .gear-header {
  top: 0px;                         /* variant zonder offset */
}

.gear-header h1 {
  flex: 1;                          /* titel gebruikt resterende ruimte */
  margin: 0;
}

/* Knop zelf */
.toggle-all {
  background: rgba(255,255,255,0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 14px;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: background 0.3s ease;
  white-space: nowrap;
  margin-left: auto;                /* duwt de knop helemaal naar rechts */
  position: relative;
  top: 0;                           /* geen offset meer nodig */
}
.toggle-all:hover {
  background: rgba(255,255,255,0.25);
}

/* Mobiel: knop onder de titel */
@media (max-width: 700px) {

  .gear-header {
    flex-direction: column;
    align-items: stretch;           /* laat kinderen (incl. button) volle breedte nemen */
  }

  /* in-layer variant idem */
  .gear-section.in-layer .gear-header,
  .layer .gear-header {
    flex-direction: column;
    align-items: stretch;           /* <-- belangrijk */
  }

  .toggle-all {
    display: block;                 /* voorkomt inline shrink */
    width: 100%;
    box-sizing: border-box;         /* padding telt mee binnen 100% */
    margin-left: 0;
    margin-top: 0.4em;
    top: 0;
  }

  /* De panel zelf is altijd fullscreen */
.panel {
  position: fixed;              /* of absolute, afhankelijk van jouw overlay-systeem */
  inset: 0;                     /* top:0; right:0; bottom:0; left:0 */
  flex-direction: column;
  min-height: 100vh;
  height: 100vh;
}

/* Laat de gear-section in de panel scrollen, niet de panel zelf */
.panel .gear-section {
  flex: 1;
  min-height: 0;                /* nodig i.c.m. flex voor scrollruimte */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sticky header blijft sticky binnen deze scrollende section */
.panel .gear-header {
  position: sticky;
  top: 0;                       /* of 0 px omdat hij direct onder je panel-top zit */
}
}

/* sticky offset */
.mmbar {
  position: sticky;
  top: var(--sticky-top, 10px);
  z-index: 30;
  transition: top 220ms ease;
}

/* header beweegt alleen verticaal; geen opacity */
#header.small {
  transition: transform 220ms ease;
  transform: translateY(0);
}

/* verberg alléén als sort stuck is én we naar beneden scrollen binnen de gallery */
html.sort-stuck.scrolling-down #header.small {
  transform: translateY(-100%);
}
/* bij omhoog of buiten gallery is header gewoon zichtbaar (default rule hierboven) */

/* =========================================================
   Blog Archief Tijdlijn — lijstweergave + full bleed blurred cover (VOLLEDIG)
   ========================================================= */

/* ---------- Light mode (defaults) ---------- */
:root{
  --menu-hoogte: 72px;

  /* heading */
  --ba-heading-color: #111;
  --ba-heading-border: rgba(0,0,0,.15);

  /* fallback kleuren */
  --ba-item-bg: rgba(0,0,0,.03);
  --ba-item-bg-even: rgba(0,0,0,.05);
  --ba-item-hover: rgba(0,0,0,.07);

  /* typografie */
  --ba-title-size: clamp(1.02rem, 2vw, 1.15rem);
  --ba-intro-size: .98rem;
  --ba-meta-size: .9rem;
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"]{
  --ba-heading-color: #fff;
  --ba-heading-border: rgba(255,255,255,.4);
  --ba-item-bg: rgba(255,255,255,.04);
  --ba-item-bg-even: rgba(255,255,255,.06);
  --ba-item-hover: rgba(255,255,255,.08);
}

/* ---------- Sectiecontainer ---------- */
.ba{
  max-width: 1200px;
  margin: auto;
  padding: 0;
  color: inherit;
}
.ba a{ color: inherit; }

/* =========================================================
   Heading “Archief”
   ========================================================= */
.ba-archive-heading{
  margin: 0;
  padding: .25rem 0 .5rem;
  border-bottom: 1px solid var(--ba-heading-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ba-heading-color);
}
.ba-archive-toggle{
  all: unset;
  cursor: pointer;
  font: inherit;
  color: var(--ba-heading-color) !important;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.ba-archive-toggle:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* Chevron (mask + currentColor) */
.ba-archive-toggle::after{
  content:"";
  width:16px; height:16px; flex-shrink:0;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
  mask:         no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
  transform: rotate(0deg);
  transition: transform .25s ease, opacity .2s ease;
  opacity:.9;
}
.ba-archive-toggle[aria-expanded="true"]::after{ transform: rotate(90deg); opacity:1; }

/* =========================================================
   Paneel + sticky jaarnavigatie
   ========================================================= */
.ba-archive-panel[hidden]{ display:none; }
.ba-archive-panel{ background:transparent; border:0; padding:0; margin-top:.75rem; }

.ba-nav{
  all: initial; font:inherit; color:inherit;
  position: sticky; top: calc(var(--menu-hoogte) + 8px); z-index:50;
  display:inline-flex; gap:.75rem; align-items:center; width:100%;
  overflow-x:auto; overflow-y:hidden; white-space:nowrap; -webkit-overflow-scrolling:touch;
  background:transparent !important; height:auto !important; min-height:0 !important; box-sizing:border-box;
  z-index: 1;

  /* (jouw extra style voor chips, laten staan als je die gebruikt)
     .ba-nav a kan eigen bg/backdrop krijgen via jouw var(--color-menu-glass) */
}
.ba-nav a{
  all: unset; display:inline-block; padding:6px 8px; border-bottom:2px solid transparent;
  cursor:pointer; font-size:.95rem; line-height:1.2; color:inherit; user-select:none;
  background-color: var(--color-menu-glass);
     backdrop-filter: blur(7px);
}
.ba-nav a:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.ba-nav a.active{ border-bottom-color: currentColor; }

/* =========================================================
   Tijdlijn lay-out (as + jaren/maanden)
   ========================================================= */
.ba-timeline{ display:grid; grid-template-columns:2px 1fr; column-gap:5px; }
.ba-axis{ background-color: currentColor; z-index: 9; }
.ba-years{ display:grid; gap:18px; }
.ba-year{ scroll-margin-top: calc(var(--menu-hoogte) + 14px); }
.ba-h2{ margin:0 0 .25rem; font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight:700; color:var(--ba-heading-color) !important; }
.ba-yearblock{ margin:.25rem 0; }
.ba-yearsummary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem; border-radius:.5rem; background:transparent; border:0; }
.ba-yearsummary::-webkit-details-marker{ display:none; }
.ba-months{ border-left:1px solid var(--ba-heading-border); margin:.25rem 0 0 .35rem; padding-left:.75rem; display:grid; gap:.5rem; background:transparent; }
.ba-month{ border:0; background:transparent; }
.ba-monthsummary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:.25rem .35rem; border-radius:14px; background:transparent; border:0; }
.ba-monthsummary::-webkit-details-marker{ display:none; }
.ba-monthsummary small{ font-size:.92em; }

/* =========================================================
   Verbinding tussen tijdlijn en maanden
   ========================================================= */

/* De bestaande linkerlijn blijft staan, maar de maand-items
   krijgen een kort verbindingsstreepje (“takje”) naar links. */
.ba-month {
  position: relative;
}

/* Het verbindingsstreepje links van elke maand */
.ba-month::before {
  content: "";
  position: absolute;
  left: -12px;              /* afstand tot de as, afstemmen op je layout */
  top: 1.5em;               /* verticaal gecentreerd bij de maandtitel */
  width: 12px;              /* lengte van het streepje */
  height: 1px;
  background-color: var(--ba-heading-border);
}

/* optioneel: iets sterker voor dark mode */
html[data-theme="dark"] .ba-month::before {
  background-color: rgba(255,255,255,.5);
}

/* optioneel: subtiel accent bij hover */
.ba-month:hover::before {
  background-color: currentColor;
  transition: background-color .2s ease;
}

/* ===== Fix: hoverkleur in dark mode (subtiel grijs i.p.v. zwart) ===== */
html[data-theme="dark"] .ba-yearsummary:hover,
html[data-theme="dark"] .ba-monthsummary:hover,
html[data-theme="dark"] .ba-item:hover,
html[data-theme="dark"] .ba-item:focus-within {
  background: rgba(255,255,255,0.10) !important; /* zacht grijs */
  color: #fff; /* tekst blijft leesbaar */
}

/* ===== Fix: hoverkleur hoofd-archieftoggle (dark mode) ===== */
html[data-theme="dark"] .ba-archive-toggle:hover {
  color: rgba(255,255,255,0.6) !important; /* zacht grijs */
}
/* ===== Om-en-om achtergrondkleur voor maanden — met duidelijker contrast ===== */
.ba-month:nth-of-type(odd) > .ba-monthsummary {
  background-color: rgba(0,0,0,0.06); /* iets donkerder */
}
.ba-month:nth-of-type(even) > .ba-monthsummary {
  background-color: rgba(0,0,0,0.1); /* duidelijker verschil */
}

/* Donkere modus — subtiele omkering met meer helderheid */
html[data-theme="dark"] .ba-month:nth-of-type(odd) > .ba-monthsummary {
  background-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .ba-month:nth-of-type(even) > .ba-monthsummary {
  background-color: rgba(255,255,255,0.12);
}

/* Hoverkleur blijft herkenbaar maar iets zachter dan voorheen */
.ba-monthsummary:hover {
  background-color: rgba(0,0,0,0.12);
}
html[data-theme="dark"] .ba-monthsummary:hover {
  background-color: rgba(255,255,255,0.18);
}


/* =========================================================
   Lijstweergave + BLURRED COVER
   ========================================================= */

/* ▼▼ AANGEPAST: 1 kolom mobiel, 2 kolommen bij ruime schermen ▼▼ */
.ba-list{
  display:grid;
  grid-template-columns: 1fr;  /* mobiel: één kolom */
  gap:12px;
  margin-top:6px;
}

/* vanaf ~900px: twee items naast elkaar */
@media (min-width: 900px){
  .ba-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* compacter beeld links zodat twee kaarten mooi passen */
  .ba-item-link{
    grid-template-columns: 180px minmax(0,1fr);
  }
}

/* vanaf 1200px: royaler beeld links */
@media (min-width: 1200px){
  .ba-item-link{
    grid-template-columns: 220px minmax(0,1fr);
  }
}
/* ▲▲ EINDE AANPASSING ▼ overige styles ongewijzigd ▲▲ */

/* Item met blur-achtergrond en overlay */
.ba-item{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 14px;
  padding: 1.5em 1.5em 1.5em 0; /* links géén padding (foto was al flush links) */
  background: transparent;
  color: #fff; /* alle tekst in item wit */
}

/* Achtergrondlaag: echte cover (blur) */
.ba-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(14px) saturate(1.15);
  transform: scale(1.08);
  transform-origin: center;
  opacity: .95;
  pointer-events: none;
  border-radius: inherit;
}

/* Donkere overlay voor leesbaarheid */
.ba-item::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
  border-radius: inherit;
}
html[data-theme="dark"] .ba-item::after{
  background: linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,.38));
}

/* Inhoud boven blur/overlay */
.ba-item-link{
  position: relative;
  z-index:1;
  display: grid;
  grid-template-columns: 220px minmax(0,1fr); /* thumb | tekst (wordt door MQ's hierboven overschreven waar nodig) */
  gap: 16px;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  padding: 0; /* laat grid zelf geen padding toevoegen */
}

/* ====== FOTO FLUSH ÓÓK BOVEN & ONDER ====== */
/* (links was al flush doordat .ba-item geen left padding heeft) */
.ba-item-thumb{
  width: 100%;
  height: calc(100% + 24px); /* 12px boven + 12px onder compenseren */
  margin: -12px 0;          /* trek de foto over top en bottom padding van .ba-item */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;

  /* linker hoeken volgen item; rechts blijft net wat afgerond */
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

/* Tekstkolom */
.ba-item-body{
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr; /* titel, intro, meta */
  gap: 8px;
}
.ba-item-title{
  margin: 0;
  font-size: var(--ba-title-size);
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ba-item-intro{
  margin: 0;
  font-size: var(--ba-intro-size);
  line-height: 1.55;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* Meta */
.ba-item-meta{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--ba-meta-size);
  color: #fff;
}
.ba-author{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ba-author-avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255,255,255,.6);
}
.ba-author-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ba-item-date{
  white-space: nowrap;
  opacity: .9;
}

/* Hover: overlay iets donkerder */
.ba-item:hover::after,
.ba-item:focus-within::after{
  background: linear-gradient(0deg, rgba(0,0,0,.52), rgba(0,0,0,.52));
}

/* =========================================================
   Mobiel (<= 640px)
   ========================================================= */
@media (max-width: 640px){
  .ba-list{ gap:10px; }

  .ba-item{
    border-radius:12px;
    padding:12px 12px 12px 0; /* zelfde aanname: 12px top/bottom */
  }

  .ba-item-link{
    grid-template-columns: 84px minmax(0,1fr);
    gap:10px;
    align-items:start;
    min-width:0;
    padding:0;
  }

  /* Flush top & bottom blijft gelden; links was al flush */
  .ba-item-thumb{
    height: calc(100% + 48px);
    margin: -24px 0;
    aspect-ratio: 1 / 1;      /* compact vierkant op mobiel */
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .ba-item-body{
    min-width:0;
    display:grid;
    gap:6px;
    grid-template-rows:auto auto auto;
  }

  .ba-item-title{
    font-size:1.06rem;
    line-height:1.25;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  }
  .ba-item-intro{
    font-size:.96rem;
    line-height:1.5;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5;
  }

  .ba-item-meta{
    margin-top:4px;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .ba-item-date{ display: none; }
}

/* =========================================================
   Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ba-bg{ transform:none; }
}

/* ===== Uit/inklappijl bij maanden (verbeterde uitlijning) ===== */
.ba-monthsummary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 16px; /* tekst links | aantal rechts | pijl vast rechts */
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: 1em;
  border-radius: 14px;
  transition: background-color .2s ease;
}

/* Chevron rechts, netjes uitgelijnd */
.ba-monthsummary::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  opacity: 0.8;
  transform: rotate(0deg);
  transition: transform .25s ease, opacity .2s ease;
  justify-self: end;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6-6 6z'/></svg>");
          mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6-6 6z'/></svg>");
}

/* Gedraaide pijl als de maand open is */
.ba-month[open] > .ba-monthsummary::after {
  transform: rotate(90deg);
  opacity: 1;
}

/* Hoverkleur (licht + donker modus respecteren) */
.ba-monthsummary:hover {
  background: var(--ba-item-hover);
}
html[data-theme="dark"] .ba-monthsummary:hover {
  background: rgba(255,255,255,0.10);
}
/* --- ARCHIEF LIST: laat de afbeelding de volle hoogte vullen --- */

/* Haal kaart-padding weg; geef padding aan de tekstkolom */
.ba-item{
  padding: 0;                 /* geen top/bottom/left padding meer */
}
.ba-item-link{
  gap: 0;                     /* naadloos tussen foto en tekst */
  min-height: 180px;          /* basis hoogte zodat de foto iets te vullen heeft */
}
.ba-item-body{
  padding: 16px;              /* interne ruimte alleen in de tekstkolom */
}

/* Thumbnail: rek in beide richtingen mee en crop netjes */
.ba-item-thumb{
  width: 100%;
  height: 100%;               /* <<< vult de volledige rijhoogte */
  margin: 0;                  /* oude negatieve marges weg */
  aspect-ratio: auto;         /* geen vaste ratio meer */
  object-fit: cover;          /* netjes croppen */
  display: block;

  /* afgeronde linkerhoeken; rechterkant vlak tegen content */
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Overlay/blur blijven netjes op de kaart zelf zitten */
.ba-item::after{ border-radius: 14px; }

/* Desktop kolombreedtes blijven zoals je had; dit mag blijven staan
   (je media-queries voor 900px/1200px blijven geldig) */

/* Mobile: iets lagere minimumhoogte en compacter padding */
@media (max-width: 640px){
  .ba-item-link{ min-height: 140px; }
  .ba-item-body{ padding: 12px; }
}
/* ——— Fix: datum mag niet over de padding heen “duwen” ——— */
.ba-item-meta{
  min-width: 0;                 /* laat children krimpen */
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ba-item-meta > *{ min-width: 0; } /* zowel .ba-author als .ba-item-date */

.ba-item-date{
  white-space: nowrap;          /* op één regel houden */
  overflow: hidden;             /* niet buiten de kaart laten lopen */
  text-overflow: ellipsis;      /* netjes afkappen met … */
  max-width: 45%;               /* ruimte-kader zodat hij niet door padding breekt */
}

/* Author-naam mag ook ellipsen i.p.v. duwen */
.ba-author-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Medium breakpoint: geef de datum iets meer lucht */
@media (max-width: 1024px){
  .ba-item-date{ max-width: 38%; }
}

/* Klein (jij had ’m al op mobile verstopt; laten zo) */
@media (max-width: 640px){
  .ba-item-date{ display: none; }
}

/* Zorg voor voorspelbare stapelvolgorde */
.ba-item{
  position: relative;
  isolation: isolate;   /* eigen stacking context */
  overflow: hidden;
}

/* Blur-achtergrond het laagst */
.ba-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(14px) saturate(1.15);
  transform: scale(1.08);
  opacity: .95;
  pointer-events: none;
  border-radius: inherit;
}

/* Donkere overlay boven blur, onder content */
.ba-item::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;                 /* <-- was 0: kan ‘niet vullend’ lijken */
  pointer-events:none;
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
  border-radius: inherit;
}
html[data-theme="dark"] .ba-item::after{
  background: linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,.38));
}

/* Content altijd boven overlay */
.ba-item-link{ position: relative; z-index: 2; }

#mmdl-msg{
  padding-top: 1em;
}

.mmdl-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.mmdl-modal{
  background:#fff;
  color:#111;
  padding:22px;
  border-radius:0 var(--radius) var(--radius) var(--radius);
  width:min(560px,92vw);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  position:relative;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  max-height:92vh;              /* ✅ past beter op klein scherm */
  overflow:auto;                /* ✅ inhoud kan scrollen */
  -webkit-overflow-scrolling:touch;
}
.mmdl-title{
  margin:6px 0 8px;
  font-size:22px;
  font-weight:700;
  color:#151513 !important;
}
.mmdl-text{margin:6px 0 14px;font-size:15px;color:#333}
.mmdl-close{
  position:absolute;
  top:6px;
  right:10px;
  background:none;
  border:none;
  padding:6px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  color:#333;
}

/* ========= Tabs ========= */
/* ========= Tabs: echt tabblad-effect ========= */
.mmdl-tabs{
  position: relative;
  display:flex;
  align-items:flex-end;
  gap:4px;
  background:#e9edf3;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  padding:10px 14px 0;
  margin: -22px -22px 12px;          /* laat tabs “aan de bovenrand” zitten binnen je modal-padding */
}

.mmdl-tab{
  appearance:none; -webkit-appearance:none;
  border:none;
  background:#f5f7fa;
  border-radius:8px 8px 0 0;         /* echte tab-vorm */
  padding:10px 14px;
  font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#555;
  cursor:pointer;
  position:relative;
  top:1px;                           /* net boven de baseline */
  transition:all .25s ease;
}
.mmdl-tab:hover{ background:#fff; color:#111; }

/* optionele underline-indicator onder de tabnamen */
.mmdl-tab-indicator{
  position:absolute;
  bottom:-1px;
  left:0;
  height:3px;
  width:0;
  background:#111;
  border-radius:3px;
  transition:left .22s ease, width .22s ease;
}

/* mobiel: tabs kunnen horizontaal scrollen */
@media (max-width:480px){
  .mmdl-tabs{
    overflow-x:auto;
    scrollbar-width:none;
  }
  .mmdl-tabs::-webkit-scrollbar{ display:none; }
  .mmdl-tab{ flex:0 0 auto; font-size:13px; padding:9px 12px; }
}

/* ========= Begeleidende tekst ========= */
.mmdl-why{
  background:#f8f8f8;
  border:1px solid #e8e8e8;
  border-radius:var(--radius);
  padding:10px 12px;
  margin:0 0 12px;
  color:#222;
}
.mmdl-why strong{display:block;margin-bottom:6px}
.mmdl-why ul{margin:0 0 0 16px;padding:0}
.mmdl-why li{margin:4px 0}

/* ========= Inputs ========= */
.mmdl-group{margin:8px 0}
.mmdl-label{display:block}
.mmdl-label-text{display:block;margin:0 0 6px;font-size:14px;color:#333}
.mmdl-input{
  width:100%;
  border-radius:var(--radius);
  border:1px solid #ccc !important;
  font-size:15px;
  background:#fff;
  color:#111;
  outline:none;
}
.mmdl-input:focus{border-color:#111 !important;}


/* ========= ✅ Unieke custom checkbox ========= */
.mmdl-consent{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 2px;
  font-size:14px;
  color:#222;
  user-select:none;
}
.mmdl-check{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.mmdl-checkbox{
  width:20px;
  height:20px;
  border:2px solid #111;
  border-radius:var(--radius);
  display:inline-block;
  position:relative;
  transition:all .18s ease;
  flex:0 0 20px;
}
.mmdl-consent:hover .mmdl-checkbox{border-color:#000}
.mmdl-check:focus + .mmdl-checkbox{outline:2px solid #000;outline-offset:2px}
.mmdl-check:checked + .mmdl-checkbox{background:#111;border-color:#111}
.mmdl-check:checked + .mmdl-checkbox::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:6px;
  height:12px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}
.mmdl-consent-text a{color:#111;text-decoration:underline}
.mmdl-subnote{ display: none; margin:4px 0 0;font-size:12px;color:#666}

/* ========= Knop ========= */
.mmdl-btn{
  display:inline-block;
  width:100%;
  text-align:center;
  padding:12px 14px;
  margin-top:10px;
  border-radius:var(--radius);
  border:none;
  background:#111;
  color:#fff !important;
  font:600 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  cursor:pointer;
}
.mmdl-btn:hover,.mmdl-btn:focus{
  background:#000;
  color:#999 !important;
  outline:none;
}

/* ===== FIX: ondersteunt ook de HTML-class 'mddl-check' (dubbel-d) ===== */
.mddl-check{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.mddl-check:focus + .mmdl-checkbox{outline:2px solid #000;outline-offset:2px}
.mddl-check:checked + .mmdl-checkbox{background:#111;border-color:#111}
.mddl-check:checked + .mmdl-checkbox::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:6px;
  height:12px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}

/* ========= Mobielvriendelijke tweaks ========= */
@media (max-width:480px){
  .mmdl-modal{
    padding:16px;
    width:min(480px,94vw);
  }
  .mmdl-title{font-size:19px;}
  .mmdl-text{font-size:14px;}
  .mmdl-btn{font-size:15px;padding:11px 12px;}
}

/* ==== MOBIEL VRIENDELIJKE VERBETERINGEN (alleen toevoegen, niets verwijderen) ==== */

/* voorkom achtergrond-scrollen wanneer overlay open is (moderne browsers) */
body:has(.mmdl-overlay) { overflow:hidden; }

/* soepel scrollen binnen de modal op touch */
.mmdl-overlay { overscroll-behavior:contain; }
.mmdl-modal   { -webkit-overflow-scrolling:touch; }



/* — Tablet & small laptops — */
@media (max-width: 640px){
  .mmdl-modal{
    width: min(560px, 96vw);
    max-height: calc(100dvh - 32px);
    padding: 18px;                   /* iets compacter */
    margin: 16px;                    /* ruimte rondom voor afgeronde hoeken */
    border-radius: var(--radius);    /* radius blijft zoals gevraagd */
    overflow: auto;
  }
  .mmdl-title   { font-size: 20px; }
  .mmdl-text    { font-size: 14px; line-height: 1.5; }
  .mmdl-tab     { padding: 6px 10px; font-size: 13px; }
  .mmdl-input   { font-size: 16px;  min-height: 48px; } /* betere tikdoelen */
  .mmdl-btn     { font-size: 16px;  padding: 12px 14px; min-height: 48px; }
  .mmdl-why     { font-size: 14px; }
}

/* — Telefoons — */
@media (max-width: 480px){
  .mmdl-modal{
    /* “Sheet”-gevoel: bijna full-screen, met marge zodat radius zichtbaar blijft */
    width: 100vw;
    max-width: 100vw;
    margin: 1.5em;                          /* laat afgeronde hoeken zien */
    padding: 1em;
    max-height: calc(100dvh - 20px);       /* past altijd in viewport */
    border-radius: 0 var(--radius) var(--radius) var(--radius);
  }

  .mmdl-close{
    top: 4px; right: 6px;
    padding: 10px;
    font-size: 22px;                       /* beter raakvlak */
  }

  .mmdl-title{ font-size: 18px; margin: 4px 0 6px; }
  .mmdl-text { font-size: 14px; margin: 6px 0 12px; }

  /* Tabs: horizontaal scrollbaar i.p.v. afbreken */
  .mmdl-tabs{
    gap: 6px;
    margin-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mmdl-tabs::-webkit-scrollbar{ display:none; }
  .mmdl-tab{ flex: 0 0 auto; font-size: 12.5px; padding: 6px 9px; 
  max-width: 20vh; 
  white-space: nowrap;        /* alles op één regel */
  overflow: hidden;           /* verberg wat niet past */
  text-overflow: ellipsis;}

  /* Invoerblokken: compacte verticale spacing, grotere tikdoelen */
  .mmdl-group{ margin: 7px 0; }
  .mmdl-label-text{ font-size: 13px; margin-bottom: 5px; }
  .mmdl-input{
    font-size: 16px;      /* zorgt ook voor iOS “zoom fix” */
    min-height: 46px;
  }

  /* Checkbox rij: netter uitlijnen en tikbaar */
  .mmdl-consent{ gap: 10px; font-size: 13.5px; }
  .mmdl-checkbox{ width: 18px; height: 18px; }
  .mmdl-subnote{ font-size: 11.5px; }

  /* Call-to-action */
  .mmdl-btn{
    font-size: 15.5px;
    padding: 12px 14px;
    min-height: 48px;
  }

  /* Meldingsbalk compacter maar leesbaar */
  #mmdl-msg{
    border-radius: var(--radius);
    font-size: 13.5px;
    line-height: 1.45;
    padding: 1em 2em;
  }

  /* “Waarom” blok: minder lucht op heel kleine schermen */
  .mmdl-why{
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 13.5px;
  }
  .mmdl-why ul{ margin-left: 14px; }
}

/* — Hele kleine toestellen — */
@media (max-width: 360px){
  .mmdl-modal{ margin: 8px; padding: 14px; max-height: calc(100dvh - 16px); }
  .mmdl-title{ font-size: 17px; }
  .mmdl-text { font-size: 13.5px; }
  .mmdl-btn  { font-size: 15px;  min-height: 46px; }
  .mmdl-input{ font-size: 16px;  min-height: 44px; }
}


/* Verberg het “Waarom vragen we dit?” blok */
.mmdl-why {
  display: none !important;
}

/* === Terms-paneel binnen overlay (geen extra overlay) === */
.mmdl-terms[hidden]{display:none!important;}
.mmdl-terms{
  position:absolute; inset:0; background:#fff; border-radius:var(--radius,12px);
  display:flex; flex-direction:column; box-shadow:0 10px 40px rgba(0,0,0,.10);
}

/* Header: knop écht helemaal links, titel rechts */
.mmdl-terms-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  /* links geen padding zodat de knop tegen de rand kan staan */
  padding:14px 16px 14px 0;            /* top right bottom left */
  border-bottom:1px solid #eee;
}

.mmdl-terms-back{
  /* staat nu tegen de linker rand van het paneel */
  margin-left: 16px;
  background:#fff; border:1px solid #ddd; border-radius:999px;
  padding:6px 12px; cursor:pointer;
  font:500 14px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.mmdl-terms-title{
  margin:0 0 0 auto;                   /* duwt de titel naar rechts */
  text-align:right;
  font-size:16px; font-weight:700;
}

.mmdl-terms-body{
  padding:16px; overflow:auto; flex:1;
  font-size:14px; line-height:1.6; color:#222;
}

.mmdl-terms-body h4{
  color: #151513;
}

.mmdl-terms-body ul{ margin:2.5em; }

ul#pf-downloads {
  margin-top: .3em;
}

ul#pf-downloads li { font-size: 1em; margin-bottom: .3em;}

@media (max-width:768px){
  ul#pf-downloads li { font-size: 0.8em; }
}

li#pf-downloads {
  font-size: 1em;
}

#profile-msg{
  border-radius: var(--radius);
  background-color: #6c6c6c42;
  text-align: center;
  padding: 1em;
}

/* Geef de binnenste lijstitems afwisselende kleuren */
ul#pf-downloads li:nth-child(odd) {
  
  background-color: rgb(0 0 0 / 6%);
}

ul#pf-downloads li:nth-child(even) {
      background-color: rgba(255,255,255,0.05);
}

/* optioneel wat opmaak */
ul#pf-downloads li {
  padding: 0.6em 0.8em;
  border-radius: 6px;
  list-style: none;
  transition: background-color 0.2s;
}

ul#pf-downloads li:hover {
  background-color: rgba(0,0,0,20%);
}

.mmdl-terms-footer{
  padding:12px 16px; border-top:1px solid #eee;
}

.mmdl-btn{ border-radius:999px; }
/* --- ECHT TABBLAD-EFFECT: tabs steken boven de modal uit --- */

.mmdl-modal {
  position: relative;
  overflow: visible;        /* laat tabs erboven uitsteken */
}

/* Tabs als kaartjes die boven de modal hangen */
.mmdl-tabs {
  position: absolute;
  left:8px;
  top: -31px;               /* tabs steken boven de witte laag uit */
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  background: transparent;
  z-index: 3;
}

/* Vormgeving van elk tabblad */
.mmdl-tab {
  appearance: none;
  background: #ffffffad;
  color: #111;
  border-radius: var(--radius) var(--radius) 0 0;   /* echte tabvorm */
  padding: 1em 2em;
  font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: pointer;
  margin-bottom: 0px;            /* sluit naadloos aan op de modal */
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  letter-spacing: normal;
}

.mmdl-tab:hover {
  background: #fff;
}

/* Actieve tab oogt verbonden met de modal */
.mmdl-tab.is-active {
  background: #fff;
  border-bottom-color: transparent;
  position: relative;
  z-index: 4;
}

/* Oude indicator verbergen (niet meer nodig) */
.mmdl-tabs .mmdl-tab-indicator {
  display: none;
}

/* --- Mobiele aanpassing --- */
@media (max-width: 480px) {
  .mmdl-tabs {
    left: 8px;
    top: -26px;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mmdl-tabs::-webkit-scrollbar { display: none; }
  .mmdl-tab {
    font-size: 13px;
    padding: 1em 1.5em;
    flex: 0 0 auto;
  }
}
.mmdl-modal input,
.mmdl-modal select,
.mmdl-modal textarea { font-size:16px !important; }

/* ===== Downloads header (desktop default) ===== */
.downloads-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:2em;
}
.downloads-header h1{
  margin:0;
  line-height:1.2;
}

/* Login-badge */
.login-status{
  display:flex;
  align-items:center;
  gap:12px;                     /* iets meer ruimte */
  flex-wrap:wrap;
  background:#3354851f;
  color:#335485;
  border:1px solid #3354854f;
  border-radius:var(--radius);
  padding:.7em 1.2em;
  font-weight:600;
  font-size:14px;
}
.login-status .emoji,
.login-status [aria-hidden="true"]{ font-size:16px; }

/* Tekst — desktop op één regel met ellipsis */
.login-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Container voor knoppen */
.login-actions{
  display:flex;
  align-items:center;
  gap:10px;                    /* EXTRA RUIMTE tussen profiel en logout op desktop */
}

/* Actieknoppen (Profiel + Uitloggen) */
.profile-btn,
.logout-btn{
  text-decoration:none;
  background:#335485;
  color:#fff !important;
  padding:1em 1.5em;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  transition:background .2s ease;
}
.profile-btn:hover,
.profile-btn:focus,
.logout-btn:hover,
.logout-btn:focus{
  background:#183055;
  outline:none;
}

/* ===== Mobiel layout (≤ 768px) ===== */
@media (max-width:768px){
  .downloads-header{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }

  .downloads-header h1{
    width:100%;
    margin:0;
  }

  /* Loginbalk 2em onder H1, 100% breed */
  .login-status{
    width:100%;
    margin-top:2em;
    border-radius:var(--radius);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.6em;
    text-align:center;
  }

  .login-status .emoji{ flex-shrink:0; }

  .login-status .login-text{
    font-size:15px;
    line-height:1.4;
    white-space:normal;
    word-break:break-word;
  }

  /* Container voor knoppen naast elkaar op mobiel */
  .login-status .login-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    width:100%;
    margin-top:6px;
  }

  .profile-btn,
  .logout-btn{
    flex:1;
    text-align:center;
    padding:10px 14px;
    border-radius:var(--radius);
    font-size:15px;
  }
}

/* =======================================================
   DARK THEME (grijstinten) — activeert met html[data-theme="dark"]
   Laat je bestaande (lichte) thema staan; dit overschrijft alleen in dark.
   ======================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
}

/* Overlay blijft donker met blur */
html[data-theme="dark"] .mmdl-overlay{
  background: rgba(0,0,0,.75);
}

/* Modal oppervlak + tekst */
html[data-theme="dark"] .mmdl-modal{
  background:#2d2d2d;          /* donker grijs */
  color:#e7e9ec;               /* bijna wit */
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}

/* Titels & copy */
html[data-theme="dark"] .mmdl-title{ color:#fff !important; }
html[data-theme="dark"] .mmdl-text{ color:#c7cbd1; }

/* Sluitkruisje */
html[data-theme="dark"] .mmdl-close{ color:#a9b0b7; }
html[data-theme="dark"] .mmdl-close:hover,
html[data-theme="dark"] .mmdl-close:focus{ color:#fff; }

/* Tabs (kaartjes boven modal) */
html[data-theme="dark"] .mmdl-tabs{ background:transparent; }
html[data-theme="dark"] .mmdl-tab{
  background:#191919;          /* donker kaartje */
  color:#cfd3da !important;
}
html[data-theme="dark"] .mmdl-tab:hover{ background:#151513; color:#fff; }
html[data-theme="dark"] .mmdl-tab.is-active{
  background:#2d2d2d;          /* gelijk aan modal achtergrond */
  color:#fff !important;
}

/* “Waarom”-blok (als je ‘m ooit weer toont) */
html[data-theme="dark"] .mmdl-why{
  background:#1b1f24;
  border-color:#2a2f36;
  color:#d7dbe0;
}
html[data-theme="dark"] .mmdl-why strong{ color:#fff; }

/* Labels + inputs */
html[data-theme="dark"] .mmdl-label-text{ color:#cfd3da; }
html[data-theme="dark"] .mmdl-input{
  background:#191919;
  color:#e7e9ec;
  border-color:#191919 !important;
}
html[data-theme="dark"] .mmdl-input::placeholder{ color:#8f96a3; }
html[data-theme="dark"] .mmdl-input:focus{
  border-color:#6a7a8c !important;
  box-shadow:0 0 0 3px rgba(106,122,140,.2);
}

/* Checkbox */
html[data-theme="dark"] .mmdl-consent{ color:#d7dbe0; }
html[data-theme="dark"] .mmdl-checkbox{
  background:#2d2d2d;
  border-color:#cfd3da;
}
html[data-theme="dark"] .mmdl-consent:hover .mmdl-checkbox{ border-color:#fff; }
html[data-theme="dark"] .mmdl-check:focus + .mmdl-checkbox,
html[data-theme="dark"] .mddl-check:focus + .mmdl-checkbox{
  outline:2px solid #6a7a8c; outline-offset:2px;
}
html[data-theme="dark"] .mmdl-check:checked + .mmdl-checkbox,
html[data-theme="dark"] .mddl-check:checked + .mmdl-checkbox{
  background:#2b2f36;          /* neutrale grijs-ondergrond */
  border-color:#2b2f36;
}
html[data-theme="dark"] .mmdl-check:checked + .mmdl-checkbox::after,
html[data-theme="dark"] .mddl-check:checked + .mmdl-checkbox::after{
  border-color:#fff;
}
html[data-theme="dark"] .mmdl-consent-text a{
  color:#cfd9e8; text-decoration:underline;
}
html[data-theme="dark"] .mmdl-consent-text a:hover{ color:#e7efff; }
html[data-theme="dark"] .mmdl-subnote{ color:#9aa1ab; }

/* Knop — laat je merkblauw intact; alleen hover/focus iets lichter */
html[data-theme="dark"] .mmdl-btn{
  /* je basis blijft uit licht thema komen; kleuren hier laten staan */
  filter: none;
}
html[data-theme="dark"] .mmdl-btn:hover,
html[data-theme="dark"] .mmdl-btn:focus{
  /* in dark geen grijze text bij hover */
  color:#fff !important;
}

/* Terms-paneel */
html[data-theme="dark"] .mmdl-terms{
  background:#2d2d2d;
}
html[data-theme="dark"] .mmdl-terms-header{ border-bottom:1px solid #2a2f36; }
html[data-theme="dark"] .mmdl-terms-back{
  background:#111111; border:1px solid #fff; color:#fff !important;
}
html[data-theme="dark"] .mmdl-terms-back:hover{ background:#20242a; color:#fff; }
html[data-theme="dark"] .mmdl-terms-title{ color:#fff; }
html[data-theme="dark"] .mmdl-terms-body{ color:#d7dbe0; }
html[data-theme="dark"] .mmdl-terms-body h4{ color:#fff; }
html[data-theme="dark"] .mmdl-terms-footer{ border-top:1px solid #2a2f36; }

/* Profiel: downloads-lijst in grijstinten */
html[data-theme="dark"] ul#pf-downloads{ padding-left:0; }
html[data-theme="dark"] ul#pf-downloads li{
  color:#e7e9ec;
  list-style:none;
  border-radius:6px;
  transition:background-color .2s;
  padding:.6em .8em;
}
html[data-theme="dark"] ul#pf-downloads li:nth-child(odd){
  background-color: rgba(255,255,255,0.05);
}
html[data-theme="dark"] ul#pf-downloads li:nth-child(even){
  background-color: rgba(255,255,255,0.03);
}
html[data-theme="dark"] ul#pf-downloads li:hover{
  background-color: rgba(255,255,255,0.09);
}