/**********************************************
 * FONTS –  Poppins (TTF)
 **********************************************/
@font-face {
  font-family: 'PoppinsLocal';
  src: url('/font/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PoppinsLocal';
  src: url('/font/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/**********************************************
 * KLEUREN
 **********************************************/
:root {
  --iii-blue-900:  #0B3A8F;
  --iii-blue-700:  #1A4FA7;
  --iii-blue-500:  #2D7BD4;
  --iii-blue-300:  #57B6FF;
  --iii-blue-100:  #B6E6FF;

  --iii-red-900:   #B01012;
  --iii-red-700:   #D31818;
  --iii-red-500:   #F13C1E;
  --iii-orange-500:#FF6A00;
  --iii-orange-300:#FF9B2E;

  --accent-color: #D31818;
  --fade-duration: 600ms;

  --badge-left: 0.75rem;
  --badge-elev: 50%;
  --badge-y-offset: 0px;
}

.logo-text .blue { color: var(--iii-blue-700); }
.logo-text .red  { color: var(--iii-red-700); }

.logo-text .blue-gradient {
  background-image: linear-gradient(
    to bottom,
    var(--iii-blue-500),
    var(--iii-blue-900)
  );
}

.logo-text .red-gradient {
  background-image: linear-gradient(
    to bottom,
    var(--iii-red-500),
    var(--iii-red-900)
  );
}

/**********************************************
 * PRELOADER
 **********************************************/
html.no-scroll, html.no-scroll body {
  overflow: hidden;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #000;
  opacity: 1;
  transition: opacity var(--fade-duration) ease-out;
}

#preloader.is-fading {
  opacity: 0;
  pointer-events: none;
}

#preloader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px;
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  animation: animate-preloader 1.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #preloader::before { animation: none; border-color: var(--accent-color); }
}

@keyframes animate-preloader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/**********************************************
 * NAVBAR
 **********************************************/
.navbar {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.navbar-brand img {
  height: auto !important;
  max-height: none !important;
}

/**********************************************
 * ZWEVEND LOGO (desktop + small variant)
 **********************************************/
.floating-logo img,
.floating-logo-sm img {
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: 2000;
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.45));
}

.floating-logo img {
  width: 250px;
  transform-origin: top left;
  --logo-scale: 1;
  transform: scale(var(--logo-scale));
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
}

.floating-logo-sm img {
  width: 112px;
}

/* Hover scaling */
.floating-logo img:hover,
.floating-logo-sm img:hover {
  transform: scale(calc(var(--logo-scale) * 1.03));
}

@media (pointer: coarse) {
  .floating-logo img:hover,
  .floating-logo-sm img:hover {
    transform: scale(var(--logo-scale));
  }
}

/* Floating logo responsive sizes */
@media (max-width: 1366px) {
  .floating-logo img { width: 200px; }
  .floating-logo-sm img { width: 90px; }
}
@media (max-width: 992px) {
  .floating-logo img { width: 180px; }
  .floating-logo-sm img { width: 95px; }
}
@media (max-width: 768px) {
  .floating-logo img { width: 140px; }
  .floating-logo-sm img { width: 98px; }
}
@media (max-width: 576px) {
  .floating-logo img { width: 110px; left: 10px; }
  .floating-logo-sm img { width: 77px; left: 10px; }
}
@media (max-width: 360px) {
  .floating-logo img { width: 95px; }
  .floating-logo-sm img { width: 66.5px; }
}

/**********************************************
 * NAVBAR MOBILE
 **********************************************/
@media (max-width: 576px) {
  .navbar { padding-top: .6rem !important; padding-bottom: .6rem !important; }

  .navbar .navbar-brand {
    padding: .25rem 0;
    display: flex;
    align-items: center;
  }

  .navbar .navbar-toggler {
    padding: .5rem .6rem;
    border-radius: .375rem;
  }

  .navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(255,255,255,.35);
  }

  .navbar-nav .nav-link {
    padding-top: .6rem;
    padding-bottom: .6rem;
  }

  body { padding-top: 0 !important; }
}

@media (min-width: 577px) and (max-width: 768px) {
  .navbar { padding: .5rem 0 !important; }
  .navbar-nav .nav-link { padding: .5rem 0; }
}

/**********************************************
 * HERO
 **********************************************/
.hero {
  position: relative;
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero video,
#heroVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.8) 50%,
    rgba(0,0,0,0.9) 60%,
    rgba(0,0,0,1) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  padding: 0 1rem;
  color: unset;
  transform: translateY(-30vh);
}


@media (max-width: 576px) {
  .hero {
    min-height: 110vh;
    padding-top: 0rem;
    padding-bottom: 4rem;

  }
}

/**********************************************
 * HERO TITEL
 **********************************************/
.logo-text {
  font-family: 'PoppinsLocal', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.05;
  max-width: 90vw;
}

.logo-text .line1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15em;
  font-weight: 700;
  font-size: clamp(26px, 6vw, 56px);
  letter-spacing: -0.4px;
}

.logo-text .line2 {
  font-weight: 600;
  font-size: clamp(26px, 7vw, 54px);
  letter-spacing: -0.5px;
  margin-top: .15em;
}

.hero-content .lead {
  font-family: 'PoppinsLocal';
  font-weight: 500;
  font-size: clamp(16px, 2.6vw, 20px);
  margin-top: 2rem;
  color: #e3e2e2;
}

.logo-text span,
.logo-text .line2 {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/**********************************************
 * ACTUEEL
 **********************************************/
.hero-actueel {
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  padding: 0 1.5rem;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.actueel-title {
  font-family: 'PoppinsLocal';
  font-weight: 600;
  font-size: clamp(22px, 3.5vw, 32px);
  margin-bottom: 1.5rem;
}

.actueel-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.5rem;
}

.actueel-card {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  box-shadow: var(--bs-box-shadow-sm);
  padding: .5rem 1.25rem 1.25rem 1rem; 
  max-height: 250px;
  overflow-y:auto;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;

}

.actueel-card h3 {
  font-size: 18px;
  margin-bottom: .5rem;
  font-weight: 600;
 color: #000000; 
}

.actueel-card p {
  font-size: 15px;
  color: #000000;
  line-height: 1.5;
}


/**********************************************
 * RESPONSIVE
 **********************************************/

@media (max-width: 700px) {
  .actueel-cards {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-actueel {
    top: 15rem;
    width: 100%;
  }

  .actueel-card {
    max-width: 480px;
    margin-inline: auto;
    min-height: fit-content;
    padding: .5rem;
  }

  .hero-content {
    margin-top: 0;
    margin-bottom: 150;
  }
}

@media (max-width: 768px) {
  .actueel-cards {
    grid-template-columns: 1fr;
    max-height: 20px;
  }
  .actueel-title{
    color:#3b3b3b;
  }
}

/**********************************************
 * AFTER HERO
 **********************************************/
#foto-carousel img {
  max-height: 400px;
  object-fit: contain;
}

#foto-carousel .carousel-control-prev-icon,
#foto-carousel .carousel-control-next-icon {
  filter: invert(1);
}

.after-hero {
  background-color: #fff;
  background-image:
    radial-gradient(600px 420px at 100% 100%, rgba(241,60,30,.06), rgba(255,155,46,.04) 45%, transparent 70%),
    linear-gradient(to bottom, rgba(26,79,167,.18) 0%, transparent 55%, rgba(241,60,30,.04) 100%),
    radial-gradient(1200px 500px at 50% -10%, rgba(45,123,212,.12), transparent 70%);
  background-repeat: no-repeat;
  background-size: auto, cover, cover;
  padding: clamp(12px, 3vw, 32px) 0;
  font-weight: 500;
  font-family: 'PoppinsLocal';
}

.after-hero .blue-gradient { color: var(--iii-blue-700) !important; }
.after-hero .red-gradient  { color: var(--iii-red-700) !important; }

.after-hero .blue-gradient,
.after-hero .red-gradient {
  font-size: clamp(1.4rem, 2.2vw, 2.8rem);
  text-shadow: 0 4px 14px rgba(0,0,0,.6);
}

.after-hero a { text-decoration: none; }

.decor-icon {
  width: clamp(72px, 8vw, 600px);
  height: auto;
}

@media (min-width: 1200px) { .decor-icon { width: clamp(100px, 10vw, 900px); } }
@media (min-width: 1600px) { .decor-icon { width: clamp(140px, 12vw, 1100px); } }
@media (min-width: 2000px) { .decor-icon { width: clamp(180px, 14vw, 1300px); } }

.line2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 16px);
  flex-wrap: wrap;
  font-size: clamp(16px, 2.2vw, 28px);
  line-height: 1.2;
}

/**********************************************
 * FOOTER
 **********************************************/
.site-footer {
  background: #c6c6c7;
  color: #212529;
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid rgba(0,0,0,.06);
  position: relative;
  overflow: visible;
}

.site-footer a { color: #212529; text-decoration: none; }
.site-footer a:hover { color: var(--iii-blue-700); }

.footer-title {
  font-weight: 600;
  font-family: 'PoppinsLocal';
}

.footer-title .blue-gradient { color: var(--iii-blue-700) !important; }
.footer-title .red-gradient  { color: var(--iii-red-700) !important; }

.footer-title .blue-gradient,
.footer-title .red-gradient {
  font-size: 2rem;
  text-shadow: 0 4px 14px rgba(0,0,0,.6);
}

.site-footer .footer-sep {
  border-top: 1px solid rgba(0,0,0,.32);
  margin: clamp(20px, 3vw, 32px) 0 clamp(16px, 2vw, 24px);
}

.site-footer .footer-legal {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.site-footer .footer-legal a {
  color: rgba(0,0,0,.62);
  transition: color .2s ease, opacity .2s ease;
}

.site-footer .footer-legal a:hover {
  color: var(--iii-blue-700);
}

/**********************************************
 * ZWARTE BALK
 **********************************************/
.footer-cr {
  background-color: #0b0b0c;
  border-top: 1px solid #222;
  color: rgb(141,140,140);
}

/**********************************************
 * FOOTER BADGE
 **********************************************/
.footer-badge {
  position: absolute;
  left: var(--badge-left);
  bottom: 15px;
  transform: translateY(calc(var(--badge-elev) + var(--badge-y-offset)));
  z-index: 4;
  width: fit-content;
  text-shadow: 0 4px 14px rgba(0,0,0,.45);
}

.card-on-bar {
  background-color: #313136;
  color: #3b3b3b;
  border-radius: 10px;
  border: 1px solid rgba(22,22,22,.547);
  box-shadow:
    0 10px 20px rgba(0,0,0,.25),
    0 2px 6px rgba(0,0,0,.18);
}

.card-on-bar .card-body small {
  font-size: .78rem;
  opacity: .92;
}

.footer-logo-in-card { height: 40px; }

.footer-logo-link { transition: opacity .2s ease; }
.footer-logo-link:hover { opacity: .9; }

.phone-footer { color: var(--iii-blue-700); }

/**********************************************
 * RESPONSIVE BADGE & FOOTER
 **********************************************/
@media (max-width: 576px) {
  .site-footer { padding-bottom: 56px; }
  .footer-legal { margin-bottom: .75rem; }

  .footer-badge {
    left: 50% !important;
    bottom: 18px;
    transform: translate(-50%, 0);
  }

  .card-on-bar .card-body { padding: .45rem .7rem; }
  .footer-logo-in-card { height: 32px; }

  .footer-bottom { margin-bottom: 90px; }
}

@media (min-width: 577px) and (max-width: 768px) {
  .site-footer { padding-bottom: 48px; }
  .footer-badge { bottom: 12px; transform: translateY(0); }
}

/**********************************************
 * REDUCED MOTION
 **********************************************/
@media (prefers-reduced-motion: reduce) {
  .floating-logo img,
  .floating-logo-sm img {
    transition: none;
  }
}

/* Force AOS initial state */
p.lead[data-aos]:not(.aos-animate) {
  opacity: 0 !important;
  transform: translateY(20px) !important;
}
/**********************************************
 * CONTENT
 **********************************************/
.content-top {
  padding-top: 100px;
}

@media (max-width: 992px) {
  .content-top {
    padding-top: 100px;
  }
}

@media (max-width: 576px) {
  .content-top {
    padding-top: 80px;
  }
}











/* Content onder fixed navbar/floating logo */
section.content-top {
  padding-top: 130px;
}
@media (max-width: 992px) {
  section.content-top { padding-top: 150px; }
}
@media (max-width: 576px) {
  section.content-top { padding-top: 165px; }
}

/* Hero-container: centreer content verticaal/horizontaal en geef hoogte */
.hero-404 {
  min-height: 60vh;                     /* hero-gevoel zonder te forceren */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;                   /* future-proof als je tekst toevoegt */
}

/* Afbeelding: altijd gecentreerd, responsive, limieten per breakpoint */
.hero-404-img {
  display: block;                       /* nodig om margin auto te laten werken */
  margin: 0 auto;                       /* horizontaal centreren */
  width: 100%;
  height: auto;
  max-width: 720px;                     /* cap op grote schermen */
}

/* Medium: vaak wat “te klein” zonder cap -> iets royaler */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero-404-img { max-width: 820px; }   /* voel vrij om 760–900px te kiezen */
}

/* Klein scherm: beperk breedte zodat hij niet “te groot” oogt */
@media (max-width: 576px) {
  .hero-404-img {
    max-width: 85vw;                    /* houdt het binnen de viewport */
  }
}

/* Extra: als je heel smalle devices wil afvangen */
@media (max-width: 360px) {
  .hero-404-img { max-width: 90vw; }
}
/* Content onder fixed navbar + floating logo */
section.content-top { padding-top: 130px; }
@media (max-width: 992px) { section.content-top { padding-top: 150px; } }
@media (max-width: 576px) { section.content-top { padding-top: 165px; } }

/* 404-afbeelding: limiteren en altijd netjes schalen */
.hero-404-img {
  display: block;
  margin-inline: auto;    /* extra zekerheid op centreren */
  width: 100%;
  height: auto;           /* behoud verhouding */
  max-width: 680px;       /* hard cap voor desktop */
}

/* Medium: iets royaler maar nog gecapped */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero-404-img { max-width: 760px; }
}

/* Klein scherm: hou 'm duidelijk binnen de viewport */
@media (max-width: 576px) {
  .hero-404-img { max-width: 85vw; }
}

/* Extreem smal scherm */
@media (max-width: 360px) {
  .hero-404-img { max-width: 90vw; }
}
/* Ruimte onder je fixed-top navbar + floating logo */
section.content-top { padding-top: 130px; }
@media (max-width: 992px) { section.content-top { padding-top: 150px; } }
@media (max-width: 576px) { section.content-top { padding-top: 165px; } }

/* Hero container: geef wat hoogte zodat het "hero" aanvoelt */
.hero-404 {
  min-height: 55vh;                 /* 50–65vh naar smaak */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Beveiligde responsive image — override eventueel storende regels */
.hero-404-img {
  display: block;
  margin: 0 auto;
  width: 100% !important;           /* forceer schalen binnen kolom */
  max-width: 100% !important;       /* voorkom eigen px-breedte elders */
  height: auto !important;          /* behoud verhouding */
  object-fit: contain;              /* geen croppen (voor toekomstbestendigheid) */
}

/* Extra begrenzing per viewport (optioneel; kies één van beide varianten) */

/* Variant A: vaste caps per breakpoint */
@media (min-width: 1200px) {
  .hero-404-img { max-width: 760px !important; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero-404-img { max-width: 680px !important; }
}
@media (max-width: 576px) {
  .hero-404-img { max-width: 85vw !important; }
}

/* Variant B (alternatief i.p.v. A): één regel met clamp — comment A uit als je deze gebruikt */
/*
.hero-404-img { max-width: clamp(260px, 70vw, 760px) !important; }
*/
/* Subtiele lineaire gradient: zwart → blauw → rood */
.bg-iii-gradient {
  /* fallback-kleuren als CSS-variabelen niet bestaan */
  --g-blue: var(--iii-blue-700, #1A4FA7);
  --g-red:  var(--iii-red-700,  #D31818);

  /* achtergrond op element */
  background:
    linear-gradient(
      135deg,
      rgba(0,0,0, 0.85) 0%,          /* zacht zwart, niet full black */
      color-mix(in srgb, var(--g-blue) 28%, #000 72%) 35%,
      color-mix(in srgb, var(--g-red)  28%, #000 72%) 100%
    );
  /* voor oudere browsers zonder color-mix: een veilige fallback */
  background:
    linear-gradient(
      135deg,
      rgba(0,0,0, 0.85) 0%,
      rgba(26,79,167,0.28) 35%,
      rgba(211,24,24,0.28) 100%
    );
  /* hou text leesbaar op donkere achtergrond */
  color: #f4f5f7;
}

/* Iets ‘rijkere’ variant met subtiele gloedlagen (nog steeds subtiel) */
.bg-iii-gradient-rich {
  --g-blue: var(--iii-blue-700, #1A4FA7);
  --g-red:  var(--iii-red-700,  #D31818);

  background:
    radial-gradient(60% 50% at 20% 15%, color-mix(in srgb, var(--g-blue) 22%, #000 78%) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(60% 50% at 80% 85%, color-mix(in srgb, var(--g-red)  20%, #000 80%) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 100%);
  background:
    radial-gradient(60% 50% at 20% 15%, rgba(26,79,167,0.22) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(60% 50% at 80% 85%, rgba(211,24,24,0.20) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 100%);
  color: #eef1f5;
}

/* Utility om binnenranden wat lucht te geven als je ‘m als achtergrond gebruikt */
.bg-iii-gradient,
.bg-iii-gradient-rich {
  /* laat de gradient netjes vullen */
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

/* Optioneel: padding utilities als je geen Bootstrap pb/pt gebruikt */
.section-pad {
  padding: clamp(24px, 5vw, 64px) 0;
}

/* ============================
   Aluminium (brushed metal) buttons
   ============================ */

/* Basis variabelen (vals terug op nette waarden) */
:root {
  --alu-light: #f3f4f5;
  --alu-mid:   #d7d9dc;
  --alu-dark:  #b7bbc1;
  --alu-edge:  #8f949c;   /* rand/active */
  --alu-text:  #1c1f24;   /* tekstkleur */
  --alu-glow:  rgba(255,255,255,0.55);
}

html[data-bs-theme="dark"] {
  --alu-light: #e7e9ec;
  --alu-mid:   #c9ccd2;
  --alu-dark:  #9da3ac;
  --alu-edge:  #7e858f;
  --alu-text:  #0f1114;
  --alu-glow:  rgba(255,255,255,0.35);
}

/* Brushed metal achtergrond (utility mixin via meerdere layers):
   - subtiel vertical grain (repeating-linear-gradient)
   - lichte ruis (grain) met transparantie
   - diagonale glans
*/
.btn-aluminium,
.btn-aluminium-outline {
  position: relative;
  isolation: isolate; /* zodat pseudo-elementen mooi “binnen” blijven */
  overflow: hidden;
  border-radius: .5rem;
  transition: transform .08s ease,
              filter .18s ease,
              box-shadow .18s ease,
              border-color .18s ease,
              background .18s ease;
  font-weight: 600;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

/* Volle (solid) aluminium */
.btn-aluminium {
  color: var(--alu-text);
  background:
    /* diagonale zachte highlight */
    linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.0) 45%),
    /* brushed verticale lijnen (grain) */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 1px,
      rgba(0,0,0,0.04) 2px,
      rgba(0,0,0,0.04) 3px
    ),
    /* basis metallic gradient */
    linear-gradient(180deg, var(--alu-light) 0%, var(--alu-mid) 50%, var(--alu-dark) 100%);
  border: 1px solid color-mix(in srgb, var(--alu-dark) 70%, #000 30%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),       /* top bevel */
    inset 0 -1px 0 rgba(0,0,0,0.10),            /* bottom bevel */
    0 6px 14px rgba(0,0,0,0.16);                /* drop shadow */
}

/* Subtiele noise overlay voor realistisch metaal */
.btn-aluminium::after,
.btn-aluminium-outline::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* zeer subtiele noise */
    radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,0.06), transparent 50%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.05), transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(0,0,0,0.05), transparent 50%);
  mix-blend-mode: soft-light;
  opacity: .25;
  z-index: 1;
}

/* Hover/active/focus – solid */
.btn-aluminium:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 10px 22px rgba(0,0,0,0.22);
}

.btn-aluminium:active {
  transform: translateY(0);
  filter: brightness(.98);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.0) 45%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 1px,
      rgba(0,0,0,0.05) 2px,
      rgba(0,0,0,0.05) 3px
    ),
    linear-gradient(180deg, var(--alu-mid) 0%, var(--alu-dark) 50%, color-mix(in srgb, var(--alu-dark) 85%, #000 15%) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 10px rgba(0,0,0,0.18);
}

.btn-aluminium:focus-visible {
  outline: 2px solid var(--alu-glow);
  outline-offset: 2px;
}

/* Outline (ghost) aluminium */
.btn-aluminium-outline {
  color: var(--alu-text);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.0) 45%),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.06) 100%);
  border: 1px solid color-mix(in srgb, var(--alu-dark) 65%, #000 35%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

.btn-aluminium-outline:hover {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.0) 45%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.10) 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.btn-aluminium-outline:active {
  transform: translateY(0);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.0) 45%),
    linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.16) 100%);
}

.btn-aluminium-outline:focus-visible {
  outline: 2px solid var(--alu-glow);
  outline-offset: 2px;
}

/* Sizing mooi laten aansluiten op Bootstrap */
.btn-aluminium.btn-sm,
.btn-aluminium-outline.btn-sm { padding: .375rem .75rem; font-size: .875rem; }

.btn-aluminium.btn-lg,
.btn-aluminium-outline.btn-lg { padding: .7rem 1.25rem; font-size: 1.05rem; border-radius: .6rem; }

/* Disabled state */
.btn-aluminium:disabled,
.btn-aluminium-outline:disabled {
  filter: grayscale(.25) opacity(.7);
  cursor: not-allowed;
  transform: none;
}

/* Optioneel: toon de metalen look ook op .active in btn-groups/toggles */
.btn-check:checked + .btn.btn-aluminium,
.btn.active.btn-aluminium {
  filter: brightness(1.02);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.0) 45%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 1px,
      rgba(0,0,0,0.05) 2px,
      rgba(0,0,0,0.05) 3px
    ),
    linear-gradient(180deg, var(--alu-light) 0%, var(--alu-mid) 50%, var(--alu-dark) 100%);
}

/* ===============================
   Taal dropdown: transparant, perfecte uitlijning, lichte caret
   =============================== */

/* Transparante, randloze trigger-button */
.navbar .bootstrap-select > .dropdown-toggle.btn,
.bootstrap-select > .dropdown-toggle.btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.9) !important; /* lichte tekstkleur */
  padding: 0rem .45rem;
  min-height: auto;
  line-height: 1;
}

/* Hover/focus ook transparant */
.navbar .bootstrap-select > .dropdown-toggle.btn:hover,
.navbar .bootstrap-select > .dropdown-toggle.btn:focus,
.navbar .bootstrap-select > .dropdown-toggle.btn:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ======================================
   Vlag perfect centreren en verlagen
   ====================================== */
.bootstrap-select .filter-option-inner-inner {
  display: flex !important;
  align-items: center !important; /* centrum verticaal */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.bootstrap-select .filter-option-inner-inner .fi {
  font-size: 1.15rem;   /* mooie grootte */
  line-height: 1;
}

/* ======================================
   Caret (pijltje) lichter maken + beter centreren
   ====================================== */
.bootstrap-select > .dropdown-toggle::after {
  border-top-color: rgba(255,255,255,0.8) !important; /* lichte caret */
  margin-left: .35rem;
  vertical-align: middle; /* netjes gecentreerd */
  opacity: .9;
}

/* ======================================
   Dropdown menu rechts uitlijnen
   ====================================== */
.bootstrap-select .dropdown-menu.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}

/* Algemene kaart-stijl */
.card-like {
  background-color: var(--bs-body-bg);         /* solide achtergrond */
  border: 1px solid var(--bs-border-color);    /* subtiele rand */
  border-radius: .75rem;                       /* zachte hoeken */
  box-shadow: var(--bs-box-shadow-sm);         /* subtiele schaduw */
  padding: 1.25rem 1.25rem 1.25rem 1rem;       /* ademruimte */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  cursor: pointer;                             /* duidelijk klikbaar */
}

/* Layout icon + content */
.service-item-horizontal .icon {
  width: 3.25rem;               /* iets groter voor visuele balans */
  height: 3.25rem;
  border-radius: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  background: var(--bs-primary-bg-subtle); /* subtiele primaire tint */
  color: var(--bs-primary);
}

/* Icoon grootte */
.service-item-horizontal .icon i {
  font-size: 1.75rem;   /* pas aan naar wens: 1.5rem–2rem */
  line-height: 1;
}

/* Heading/tekst afstanden */
.service-item-horizontal .service-content h3 {
  margin-top: .125rem;
}

/* Hover: lichte lift + sterkere schaduw + accentrand */
.card-like:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow); /* iets sterker */
  border-color: var(--bs-primary);
}

/* Stretched link dekt het hele kaartvlak, zonder content te verbergen */
.service-item-horizontal .stretched-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: .75rem;
}

/* Zorg dat icon en content interacties boven de link blijven indien nodig */
.service-item-horizontal .icon,
.service-item-horizontal .service-content > *:not(.stretched-link) {
  position: relative;
  z-index: 2;
}

/* Optioneel: lichte hover-tint op achtergrond (heel subtiel) */
.card-like:hover {
  background-color: color-mix(in oklab, var(--bs-body-bg), var(--bs-primary-bg-subtle) 6%);
}

/* Donkere modus nuance (optioneel) */
@media (prefers-color-scheme: dark) {
  .card-like {
    box-shadow: none;                    /* schaduw vaak te hard in dark mode */
    border-color: color-mix(in oklab, var(--bs-border-color), #000 25%);
  }
  .card-like:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.25);
  }
}

.header, .navbar {
  position: sticky;
  top: 0;
  z-index: 1000;            /* boven content */
}

section[id], div[id] {
  scroll-margin-top: 50px;  /* stel af op je header-hoogte */
}

html {
  scroll-behavior: smooth;
}