@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Inter|Quicksand");
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
@import url("magnific-popup.css");
@import url("dropmenu.css");

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

* {
 box-sizing: border-box;
}

/* Custom CSS
 * --------------------------------------- */
:root {
  --font-body: 'Inter', sans-serif;
  --font-title: 'Quicksand', sans-serif;
  --font-color: #000000;
  --font-color-red: #c40b1b;
  --font-color-blue: #314893;
  --font-color-white: #f2f2f2;
  --font-color-gray: #242526;
}

html, body {
 margin: 0;
 width: 100%;
 min-height: 100%;
 max-width: 100%;
 background: #ffffff url('../img/bg-frosty.png');
 background-position: bottom center;
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
 font-family: var(--font-body);
 color: var(--font-color);
 font-size: 16px;
 overflow-x: hidden;
 overflow-y: auto;
 overscroll-behavior-x: none;
}

/* Mobiel: fixed uit */
@media (max-width: 1024px){
  html, body{
    background-attachment: scroll;
  }
}

a { font-family: var(--font-body); font-size: 16px; color: var(--font-color-red); text-decoration: none;}
a:link { font-family: var(--font-body); font-size: 16px; color: var(--font-color-red); text-decoration: none;}
a:visited { font-family: var(--font-body); font-size: 16px; color: var(--font-color-red); text-decoration: none;}
a:hover { font-family: var(--font-body); font-size: 16px; color: var(--font-color-red); text-decoration: underline;}
a:active { font-family: var(--font-body); font-size: 16px; color: var(--font-color-red); text-decoration: underline;}

.visible{ display:block; }
.invisible{ display:none; }
.align-left{ float: left; }
.align-right{ float: right; }
.spacing10{ height: 10px; }
.spacing20{ height: 20px; }
.spacing40{ height: 40px; }
.spacing50{ height: 50px; }
.spacing100{ height: 100px;}

h1{font-size:32px; font-weight: 800;}h2{font-size:30px}h3{font-size:24px; font-weight: bold; color: var(--font-color-blue);}h4{font-size:18px;; font-weight: bold;}

/* -------------------------------- 
   Wrapper
-------------------------------- */
.wrapper {
 position: relative;
 margin-left:auto;
 margin-right:auto;
 max-width: 1600px;
}

.cols {
  display: flex;
  justify-content: space-between; /* links & rechts */
  align-items: center;
  gap: 5px;
  margin-left:auto;
  margin-right:auto;
  max-width: 1450px;  
}
.col-left,
.col-right {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 40px;
  font-weight: 700;
}

/* ==========================================================
   HEADER + SLIDES (WORKING, SMOOTH)
   ========================================================== */

.header{
  position: relative; /* anker voor absolute logo/cta */
  padding-bottom: 40px;
  height: 100%;
}

.header .top-nav {
  padding: 5px 15px 0 15px;
}

.nav-subtitle {
  display: block;
  font-family: var(--font-body);
  color: var(--font-color-blue);
  font-size: 20px;
  transition: all 0.30s ease-in-out;
}

/* Container van de slideshow */
.header .slides{
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 1600px;
  margin-top: 20px;

  border-radius: 25px;
  overflow: hidden;

  /* desktop: ratio */
  aspect-ratio: 1600 / 750;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);

  z-index: 1;
}

/* Slides vullen altijd container */
.header .slides .slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  opacity: 0;                 /* GSAP regelt autoAlpha */
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  pointer-events: none;

  /* background via inline style in HTML */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  /* GEEN transition: all; (conflict met GSAP opacity) */
  transition: border-radius 0.30s ease-in-out;
}

/* ==========================================================
   OVERLAYS OP SLIDES (LOGO / SPONSOR / CTA)
   ========================================================== */

.header .main-logo,
.header .main-sponsor,
.header .header-cta{
  position: absolute;
  z-index: 20;
}

/* Logo */
.header .main-logo{
  top: 20px;
  left: 50px;
  width: 450px;
  height: 450px;
  opacity: 0; /* GSAP fade-in */
  background: url('../img/logo.png') center center / contain no-repeat;

  transition: top 0.30s ease-in-out, left 0.30s ease-in-out,
              width 0.30s ease-in-out, height 0.30s ease-in-out;
}

/* Sponsor */
.header .main-sponsor{
  top: 600px;
  left: 50px;
  width: 240px;
  height: 75px;
  background: url('../img/klaverblad.png') center center / contain no-repeat;

  transition: top 0.30s ease-in-out, left 0.30s ease-in-out,
              width 0.30s ease-in-out, height 0.30s ease-in-out;
}

/* CTA blok */
.header .header-cta{
  top: 515px;
  right: 60px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  user-select: none;

  transition: top 0.30s ease-in-out, right 0.30s ease-in-out,
              left 0.30s ease-in-out, transform 0.30s ease-in-out;
}

.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 38px;
  min-width: 260px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  border-radius: 15px;
  border: 0;
  backdrop-filter: blur(6px);

  transition: border-radius 0.30s ease-in-out, box-shadow 0.30s ease-in-out, transform 0.30s ease-in-out;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
}
.cta-btn:hover{
  border-radius: 0px;
  transform: translateY(-1px);
  box-shadow: 0 22px 45px rgba(200, 13, 26, 0.5);
}

/* ==========================================================
   RESPONSIVE (FORCE OVERRIDES)
   - Zet dit als LAATSTE in je CSS zodat het altijd wint
   ========================================================== */

@media (max-width: 1600px){
  .header .slides,
  .footer{
    border-radius: 0px;
  }
}

@media (max-width: 1400px){
  .header .main-logo{
    top: 30px !important;
    left: 40px !important;
    width: 280px !important;
    height: 280px !important;
  }

  .header .main-sponsor{
    top: 450px !important;
    left: 40px !important;
    width: 240px !important;
    height: 75px !important;
  }

  .header .header-cta{
    top: 380px !important;
    right: 40px !important;
    left: auto !important;
    transform: none !important;
    flex-direction: column !important;
  }
}

@media (max-width: 1200px){
  .header .slides{
    aspect-ratio: auto !important;
    height: 60vh !important;
    min-height: 420px !important;
    max-height: 700px !important;
    border-radius: 0px !important;
  }
}

@media (max-width: 768px){
  #footer-links{ display: none; }

  .header .slides{
    aspect-ratio: auto !important;
    height: 60vh !important;
    min-height: 420px !important;
    max-height: 700px !important;
    border-radius: 0px !important;
  }

  .header .slides .slide {
    border-radius: 0px !important;
  }

  .header .main-logo{
    top: 40px !important;
    left: 30px !important;
    width: 180px !important;
    height: 180px !important;
  }

  .header .main-sponsor{
    top: 410px !important;
    left: 40px !important;
    width: 150px !important;
    height: 55px !important;
  }

  .nav-subtitle{ display: none; }

  .header .header-cta{
    top: 470px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    gap: 12px !important;
  }

  .cta-btn{ min-width: 200px !important; }
}

.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 38px;      /* GROTER */
  min-width: 260px;        /* BREEDER */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  border-radius: 15px;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
  border: 0;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
}
.cta-small-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;      /* GROTER */
  min-width: 160px;        /* BREEDER */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  border-radius: 15px;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
  border: 0;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
}
.cta-btn.primary, .cta-small-btn.primary{
  background: var(--font-color-red); 
  color: #fff;
}
.cta-btn.secondary, .cta-small-btn.secondary{
  background: rgba(255,255,255,0.9);
  color: #c80d1a;
  border: 2px solid var(--font-color-red); 
}
.cta-btn:hover, .cta-small-btn:hover{
  border-radius: 0px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow:
    0 22px 45px rgba(200, 13, 26, 0.5);
}

.social-text {
  font-family: var(--font-body);
  color: var(--font-color);
  font-size: 16px;
  padding-left: 10px;
  border-left: 1px solid var(--font-color-blue);
}
.social-fb {
  width: 20px;
  height: 20px;
  background: url('../img/social-fb.png') center center / contain no-repeat;
  transition: all 0.30s ease-in-out;
}
.social-fb:hover {
  background: url('../img/social-fb-hover.png') center center / contain no-repeat;
  transition: all 0.30s ease-in-out;
}
.social-ig {
  width: 20px;
  height: 20px;
  background: url('../img/social-ig.png') center center / contain no-repeat;
}
.social-ig:hover {
  background: url('../img/social-ig-hover.png') center center / contain no-repeat;
  transition: all 0.30s ease-in-out;
}

/* Sub Header */
.sub-header {
  position: relative;
  padding-bottom: 60px;
}
.sub-header .top-nav {
  padding: 5px 15px 0 15px;
}
.sub-header .slides {
  position: relative;
  height: 450px;      /* match met .slide-one hoogte */
  margin-top: 20px;
}
.sub-header .slides .slide {
  background-color: #eee;
  width: 100%;
  height: 480px;
  max-width: 100%;
  position: absolute;
  inset:0;
  opacity: 1;
  border-radius: 25px;
  overflow: hidden; /* belangrijk bij radius */
  transition: all 0.30s ease-in-out;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

.sub-slide { background: url('../img/photo-05.jpg') center center / cover no-repeat; }

.sub-header .main-logo {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: url('../img/logo.png') center center / contain no-repeat;
  z-index: 10;
  transition: all 0.30s ease-in-out;
}

@media (max-width: 1600px){
  .sub-header .slides .slide{
    border-radius: 0px;
  }
}

.sponsor {
  width: auto;
  height: 100px;
  cursor: pointer;
}

/* Wrapper */
.layout-wrap{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 24px;          /* ruimte tussen kolommen */
}

/* Linker kolom */
.layout-main{
  flex: 1 1 auto;     /* pakt alle resterende ruimte */
  min-width: 0;       /* BELANGRIJK bij flex */
  padding: 0px 25px 10px 25px;
}
/* Rechter kolom */
.layout-side{
  flex: 0 0 260px;    /* vast 260px */
  padding: 0px 15px 10px 15px;
}
.title-line{
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 12px;
}
.title-line::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background: var(--font-color-blue);
  border-radius: 2px;
}
.text{
  font-family: var(--font-body);
  color: var(--font-color);
  font-size: 16px;
  line-height: 20px;
//  text-align:justify!important;
}

ul.circle {list-style-type: circle;padding-left:30px!important;}
ul.disc {list-style-type: disc;padding-left:30px!important;}
ul.square {list-style-type: square;padding-left:30px!important;}

.level-list {
  list-style-type: upper-alpha; /* A, B, C */
  margin-top: 5px;
  margin-left: 30px;
}
.level-list.circle { list-style-type: circle; }
.level-list.disc { list-style-type: disc; }
.level-list.square { list-style-type: square; }

.level-list > li {
  margin-bottom: 0.6rem;
}
.level-list ul {
  list-style-type: disc;
  margin-top: 0.4rem;
  margin-left: 1.2rem;
}
.level-list ul li {
  list-style: disc;
  margin-bottom: 0.3rem;
}

.clean-list {
  list-style: none;
  padding-top: 5px;
  padding-left: 0;
  margin: 0;
  line-height: 20px;
}

.clean-list li{
  display: grid;
  grid-template-columns: 260px 1fr; /* labelbreedte */
  gap: 12px;
  align-items: start;
  margin-bottom: 0.4rem;
  min-width: 0;         /* belangrijk: geen inline-block kolom hacks */
}

/* label (Voorzitter:, etc.) */
.clean-list li > strong{
  display: block;
  min-width: 0;         /* belangrijk: geen inline-block kolom hacks */
  font-weight: 700;
  white-space: normal;
}

/* tekstkolom (namen) */
.clean-list li{
  overflow-wrap: anywhere; /* lange woorden/namen breken netjes */
}

/* mobiel: label boven tekst */
@media (max-width: 520px){
  .clean-list li{
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.agenda-card{
  background: #fff;
  border-radius: 15px;
  padding: 24px;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.08);
}
.agenda-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.agenda-list li{
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
}
.agenda-list li:last-child{
  border-bottom: none;
}
.agenda-list strong{
  color: var(--font-color-blue);
}
.agenda-actions{ float: right;}

.photo-card{
  width: 260px;
  height: auto;
  background: #fff;
  border: solid 8px #fff;
  border-radius: 15px;
  overflow:hidden;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.08);
}
.photo-card img{
  display: block;
  height: 100%;
  width: 100%;
  opacity:1;
  border: 0;
  inset: 0;
  border-radius: 15px;
  transition: all 0.30s ease-in-out;
}
.photo-card img:hover{
  opacity:0.65;
  transform: scale(1.1);
  transition: all 0.30s ease-in-out;
}

.text-card{
  height: auto;
  margin-bottom: 20px;
  padding: 20px;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
  overflow:hidden;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.08);
}

.text-card.blue { background: #314893; color: var(--font-color-white); }
.text-card h4.white { color: var(--font-color-white); }
.text-card.white{ background: #f2f2f290; color: var(--font-color); }
.text-card h4.blue { color: var(--font-color-blue); }

/* Footer */
.footer {
  position: relative;
  margin-top: 50px;
  background: var(--font-color-gray);
  width: 100%;
  color: #fff;
  font-size: 16px;
  padding-bottom: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transition: all 0.30s ease-in-out;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
}
.footer .content{
  margin: 0 auto;
  padding: 25px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.footer .content .row{
  width: calc(25% - 30px);
  line-height: 35px;
}
.footer .content .row img{
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.footer .content .row header{
  color: #f2f2f2;
  font-size: 20px;
  font-weight: 500;
}
.footer .content .row .mega-links{
  margin-left: -40px;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.footer .content .row .mega-text{
  margin-left: -40px;
  border-left: 1px solid rgba(255,255,255,0.09);
  color: #fff;
  font-size: 16px;
  padding: 0 40px;
}
.footer .row .mega-text a{
  color: #d9d9d9;
  font-size: 16px;
}
.footer .row .mega-links li{
  padding: 0 20px;
}
.footer .row .mega-links li a{
  padding: 0px;
  padding: 0 20px;
  color: #d9d9d9;
  font-size: 16px;
  display: block;
}
.footer .row .mega-links li a:hover, .footer .row .mega-text a:hover{
  color: #f2f2f2;
}
#footer-links { display: block; }

/* Scrolltop button */
.scrolltop {
  position: fixed;
  bottom: 15px;
  right: 15px;
  padding: 12px 14px;
  background: var(--font-color-red);
  font-size: 16px;
  color: var(--font-color-white);
  font-weight:600;
  text-align: center;
  cursor:pointer;
  border-radius: 5px;
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  border-radius: 15px;
  user-select: none;
  transition: all 0.30s ease-in-out;
}
.scrolltop:hover {
  text-decoration: none;
  transition: all 0.30s ease-in-out;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
}
.scrolltop.visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1600px) {
  .footer {
    border-radius: 0px;
  }
}

@media (max-width: 768px) {
  #footer-links { display: none; }
  .layout-wrap{
    flex-direction: column;
  }
  .layout-side{
    flex: 0 0 auto;
    width: 100%;
  }
  .agenda-card{
    margin-top: 24px;
  }
}

/* Floating modal linksonder */
/* Dimmer achter modal */
.cookie-overlay {
  position: fixed;
  inset: 0; /* top, right, bottom, left: 0 */
  background: rgba(0,0,0,0.25); /* lichte dimmer */
  z-index: 9999;
  display: none;
}
.cookie-overlay[aria-hidden="false"] {
  display: block;
}

/* Modal boven de overlay */
.cookie-modal {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 10000; /* boven overlay */
  width: 420px;
  max-width: calc(100vw - 36px);
  background: #fff;
  border: 1px solid #cfe1dc;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  display: none;
}
.cookie-modal[aria-hidden="false"] { display: block; }

.cookie-modal__content {
  padding: 24px 24px 20px;  /* meer ruimte binnenin */
}
.cookie-modal__content h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: #314893;
}
.cookie-modal__content p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.cookie-modal__actions {
  display: flex;
  gap: 12px;
}

/* kleine schermen */
@media (max-width: 480px){
  .cookie-modal{ 
    bottom: 12px; 
    left: 12px; 
    width: calc(100vw - 24px); /* op mobiel bijna volle breedte */
  }
}

/* =========================
   FOOTER – MOBILE FIX
   ========================= */

/* kleine desktop/tablet tweak (optioneel) */
@media (max-width: 1024px) {
  .footer .content {
    gap: 20px;
  }
  .footer .content .row {
    width: calc(50% - 10px);
  }
}

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

  .footer {
    margin-top: 30px;
    font-size: 15px;
  }

  .footer .content{
    padding: 22px 16px;
    flex-direction: column;     /* stack */
    gap: 18px;                  /* ruimte tussen blokken */
    align-items: stretch;
  }

  .footer .content .row{
    width: 100%;
    line-height: 32px;          /* was 45px -> te hoog */
  }

  /* Logo/afbeelding netjes */
  .footer .content .row img{
    width: 180px;
    max-width: 70%;
    height: auto;
    display: block;
  }

  .footer .content .row header{
    font-size: 18px;
    margin-bottom: 6px;
  }

  /* haal desktop “mega” offsets weg op mobiel */
  .footer .content .row .mega-links,
  .footer .content .row .mega-text{
    margin-left: 0;
    border-left: 0;
    padding: 0;
  }

  .footer .row .mega-links li{
    padding: 0;
  }

  .footer .row .mega-links li a{
    padding: 6px 0;             /* tappable */
    font-size: 15px;
  }

  .footer .content .row .mega-text{
    font-size: 15px;
    line-height: 26px;
  }

  /* jouw toggle blijft hetzelfde (links verbergen op mobiel) */
  #footer-links { display: none; }
}

/* FORMULIER */
.muted{color:var(--muted); font-size:14px}
.error{background:#ffecee; color:#7a1e2a; border:1px solid #ffd2d7; padding:10px 12px; border-radius:10px;}
.success{background:#eafaf3; color:#0f5132; border:1px solid #c7f0dd; padding:10px 12px; border-radius:10px;}
.hp-wrap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-style { padding: 0; margin: 0; }
.form-style.small  { max-width: 500px; }
.form-style.big    { max-width: 800px; }
.form-style.bigger { max-width: 1600px; }

/* UL/LI reset */
.form-style ul { list-style: none; margin: 0; padding: 0; }
.form-style ul li { position: relative; display: block; margin: 12px 0; }

/* Basis: label + veld */
.form-style ul li {
  display: grid;
  /* label-kolom min 120px, max 30%; veld neemt de rest */
  grid-template-columns: 200px 1fr;
  gap: 10px;
  align-items: start;
}

/* Label */
.form-style ul li > label:first-child {
  align-self: start;
  text-align: left;
  font-size: 11pt;
  color: #494949;
  padding-top: 4px;
 -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
}

/* Géén label als eerste element? ? volle breedte */
.form-style ul li:not(:has(> label:first-child)) {
  grid-template-columns: 1fr; gap: 0px;
}

/* Inputs / selects / textarea */
.form-style input,
.form-style select,
.form-style textarea {
  background-color: #fff;
  background-size: 16px;
  background-position: right 4px center;
  background-repeat: no-repeat;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  text-decoration: none;
  font-family: Verdana, Arial;
  font-size: 11pt;
  border:1px solid #e1e4e8;
  border-radius: 5px;
  outline: none;

 -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
}

.form-style input:focus,
.form-style select:focus,
.form-style textarea:focus {
  box-shadow: 0 0 5px #19a6fe;
  border: 1px solid #19a6fe;

 -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
}

.form-style input::file-selector-button {}
.form-style textarea { min-height: 160px; }

/* 2) Splitvelden */
.split-fields {
  display: flex;
  gap: 10px;
}
.split-fields2 {
  display: flex;
  gap: 10px;
}
.split-fields2 > *:first-child { flex: 1; }
.split-fields2 > *:nth-child(2) { flex: 0 0 150px; }

/* 3) Invoer + knop */
.input-with-button {
  position: relative;
  display: flex;
  gap: 8px;
}
.input-with-button input { flex: 1; }
.input-with-button button { flex: 0 0 auto; }

/* Button group */
.button-group {
  display: flex;
  flex-wrap: wrap;                /* wrapt als het krap wordt */
  justify-content: flex-start;    /* default: links */
  align-items: stretch;
  gap: 10px;
}

/* Uitlijn-modifiers */
.button-group.right  { justify-content: flex-end; }
.button-group.center { justify-content: center; }

/* Gelijke breedte knoppen */
.button-group.equal > button,
.button-group.equal > .btn {
  flex: 1 1 0;        /* verdeelt ruimte gelijkmatig */
  min-width: 120px;   /* ondergrens zodat ze niet té smal worden */
}

/* Nebula Checkbox */
.nebula-checkbox {
  position: relative;
  margin-bottom: 10px;
}
.nebula-checkbox:last-child {
  margin-bottom: 0; /* laatste krijgt geen extra marge */
}
.nebula-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
.nebula-checkbox label {
  position: relative;
  padding-top: 4px;
  padding-left: 40px; /* ruimte voor rondje */
  cursor: pointer;
  display: flex;
  align-items: center; /* verticaal centreren */
  min-height: 25px;    /* hoogte van je rondje */
}
.nebula-checkbox label::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 25px; height: 25px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
}
.nebula-checkbox input[type="checkbox"]:checked + label::before {
  background-color: #19a6fe;
  border-color: #19a6fe;
}
.nebula-checkbox input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  left: 7px; top: 8px;
  width: 12px; height: 6px;
  border: 2px solid #fff;
  border-top: none; border-right: none;
  transform: rotate(-45deg);
}

/* Mobiel stapelen (volledige breedte) */
@media (max-width: 520px) {
  .button-group.stack-mobile { flex-direction: column; }
  .button-group.stack-mobile > button,
  .button-group.stack-mobile > .btn { width: 100%; }
}

/* Responsive: onder ~700px alles onder elkaar */
@media (max-width:700px){
  .form-style ul li { grid-template-columns: 1fr; gap: 0px; align-items: stretch; }
  .form-style ul li > label:first-child {
    font-size: 9pt;
    text-transform: uppercase;
    line-height: 1.1;
    padding-bottom: 2px;
    margin: 0;
    color: #9aa0a6;
    align-self: end;
  }
  .split-fields { flex-direction: row; } /* blijft naast elkaar, maar je kunt naar column zetten */
  /* Voor écht smalle schermen splitvelden onder elkaar: */
  @media (max-width: 420px) {
    .split-fields { flex-direction: column; }
    .split-fields > *:first-child,
    .split-fields > *:last-child { flex: 1 1 auto; }
  }
}

.form-style ul li input.align-left,
.form-style ul li select.align-left,
.form-style ul li div.align-left{
  float:left;
}
.form-style ul li input.align-right,
.form-style ul li select.align-right,
.form-style ul li div.align-right{
  float:right;
}

.video-hero{
  position:relative;
  width:100%;
  height:300px;          /* pas aan */
  overflow:hidden;
  border-radius:12px;    /* optioneel */
}
.video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;      /* belangrijk */
}

/* Albums grid */
.album-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.album-card{
  background:#fff;
  border: solid 8px #fff;
  border-radius: 15px;
  overflow:hidden;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.08);
}
.album-card a{ display:block; color:inherit; text-decoration:none; }
.album-thumb{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:block;
  transition: transform .25s ease, opacity .25s ease;
}
.album-card:hover .album-thumb{ transform: scale(1.03); opacity: .9; }
.album-meta{
  padding: 14px 14px 12px;
}
.album-meta h4{
  margin:0;
  font-size:18px;
  font-weight:800;
  color: var(--font-color-blue);
}
.album-meta .small{
  margin-top:6px;
  font-size:14px;
  opacity:.75;
}

/* Foto grid (detail) */
.photo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.photo-grid .photo-card{ width: 100%; }
.photo-grid .photo-card img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}