/* ============================ BASIS ACHTERGROND ============================ */
/* Verwijdert witte flits bij laden of taalwissel */
html, body {
  background-color: #000000;
}

/* Dark mode inline-detectie */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #000000 !important;
  }
}

:root {
  --knop1-bg: #265684;
  --knop1-bg-hover: #3473B3;
  --knop2-bg: #777777;
  --knop2-bg-hover: #3473B3;
  --knop3-bg: #CC0000;
  --knop3-bg-hover: #3473B3;
  --knop-more-bg: #265684;
  --knop-more-bg-hover: #3473B3;
}
/* === Basis reset alléén voor onze bs-knoppen (geen globale button-selector) === */
button.bs-btnA,
a.bs-btnA,
button.bs-btnB,
a.bs-btnB,
button.bs-btnC,
a.bs-btnC {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 1px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  vertical-align: middle;
  white-space: nowrap;
}

/* === Knop 1 === */
button.bs-btnA,
a.bs-btnA {
  padding: 8px 14px;
  font-size: 15px;
  background-color: var(--knop1-bg);
  color: var(--knop1-text) !important;
}
button.bs-btnA:hover,
/* === Knop 2 === */
button.bs-btnB,
a.bs-btnB {
  padding: 10px 18px;
  font-size: 16px;
  width: 200px;
  justify-content: center;
  text-align: center;
  background-color: var(--knop1-hover);
  color: var(--knop2-text) !important;
}
button.bs-btnB:hover,
/* === Knop 3 === */
button.bs-btnC,
a.bs-btnC {
  padding: 12px 20px;
  font-size: 17px;
  background-color: var(--knop2-hover);
  color: var(--knop3-text) !important;
}
button.bs-btnC:hover,
/* Links in knoppen (mailto, sms, WhatsApp) nooit onderstreept */
a.bs-btnA[href^="mailto:"],
a.bs-btnB[href^="mailto:"],
a.bs-btnC[href^="mailto:"],
a.bs-btnA[href^="sms:"],
a.bs-btnB[href^="sms:"],
a.bs-btnC[href^="sms:"],
a.bs-btnA[href^="https://wa.me"],
a.bs-btnB[href^="https://wa.me"],
a.bs-btnC[href^="https://wa.me"],
a.bs-btnA[href^="mailto:"]:hover,
a.bs-btnB[href^="mailto:"]:hover,
a.bs-btnC[href^="mailto:"]:hover,
a.bs-btnA[href^="sms:"]:hover,
a.bs-btnB[href^="sms:"]:hover,
a.bs-btnC[href^="sms:"]:hover,
a.bs-btnA[href^="https://wa.me"]:hover,
a.bs-btnB[href^="https://wa.me"]:hover,
a.bs-btnC[href^="https://wa.me"]:hover {
  text-decoration: none !important;
}

/* Hover neutraliseren zodra 

/* ===== Hover/focus uitschakelen op touch, alleen kort :active feedback ===== */
@media (hover: none) and (pointer: coarse) {
  .bs-btnA, .bs-btnB, .bs-btnC { -webkit-tap-highlight-color: transparent; }

  .bs-btnA:hover, .bs-btnA:focus, .bs-btnA:focus-visible {
    background-color: var(--knop1-hover);
    color: var(--knop1-text) !important;
    outline: none !important;
  }
  .bs-btnB:hover, .bs-btnB:focus, .bs-btnB:focus-visible {
    background-color: var(--knop2-hover);
    color: var(--knop2-text) !important;
    outline: none !important;
  }
  .bs-btnC:hover, .bs-btnC:focus, .bs-btnC:focus-visible {
    background-color: var(--knop3-hover);
    color: var(--knop3-text) !important;
    outline: none !important;
  }

  .bs-btnA:active { background-color: var(--knop1-bg); }
  .bs-btnB:active { background-color: var(--knop2-bg); }
  .bs-btnC:active { background-color: var(--knop3-bg); }
}

/* ===== Hover alleen voor muis ===== */
@media (hover: hover) and (pointer: fine) {
  .bs-btnA:hover { background-color: var(--knop1-hover); }
  .bs-btnB:hover { background-color: var(--knop2-hover); }
  .bs-btnC:hover { background-color: var(--knop3-hover); }
  .bs-btn-more:hover { background-color: var(--knop-more-bg-hover) !important; }
}

/* ===== Touch: géén hover, alleen kort :active ===== */
@media (hover: none) and (pointer: coarse) {
  .bs-btnA, .bs-btnB, .bs-btnC, .bs-btn-more {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .bs-btnA:hover, .bs-btnA:focus, .bs-btnA:focus-visible {
    background-color: var(--knop1-hover);
    color: var(--knop1-text) !important;
    outline: none !important;
  }
  .bs-btnB:hover, .bs-btnB:focus, .bs-btnB:focus-visible {
    background-color: var(--knop2-hover);
    color: var(--knop2-text) !important;
    outline: none !important;
  }
  .bs-btnC:hover, .bs-btnC:focus, .bs-btnC:focus-visible {
    background-color: var(--knop3-hover);
    color: var(--knop3-text) !important;
    outline: none !important;
  }
  .bs-btn-more:hover, .bs-btn-more:focus, .bs-btn-more:focus-visible {
    background-color: var(--knop-more-bg) !important;
    color: var(--knop-more-text) !important;
    outline: none !important;
  }

  .bs-btnA:active { background-color: var(--knop1-bg); }
  .bs-btnB:active { background-color: var(--knop2-bg); }
  .bs-btnC:active { background-color: var(--knop3-bg); }
  .bs-btn-more:active { background-color: var(--knop-more-bg-hover) !important; }
}

/* --- Buttons: nooit onderstreept, in alle states --- */
a.bs-btnA, a.bs-btnA:link, a.bs-btnA:visited, a.bs-btnA:hover, a.bs-btnA:focus, a.bs-btnA:active { text-decoration: none !important; }
a.bs-btnB, a.bs-btnB:link, a.bs-btnB:visited, a.bs-btnB:hover, a.bs-btnB:focus, a.bs-btnB:active { text-decoration: none !important; }
a.bs-btnC, a.bs-btnC:link, a.bs-btnC:visited, a.bs-btnC:hover, a.bs-btnC:focus, a.bs-btnC:active { text-decoration: none !important; }
a.bs-btn-more, a.bs-btn-more:link, a.bs-btn-more:visited, a.bs-btn-more:hover, a.bs-btn-more:focus, a.bs-btn-more:active { text-decoration: none !important; }

/* --- Desktop-only hover (alleen met muis + body/html .has-hover) --- */
@media (hover: hover) and (pointer: fine) {
  .has-hover .bs-btnA:hover { background-color: var(--knop1-hover); color: var(--knop1-text) !important; }
  .has-hover .bs-btnB:hover { background-color: var(--knop2-hover); color: var(--knop2-text) !important; }
  .has-hover .bs-btnC:hover { background-color: var(--knop3-hover); color: var(--knop3-text) !important; }
  .has-hover .bs-btn-more:hover { background-color: var(--knop-more-bg-hover) !important; color: var(--knop-more-text) !important; }
}

/* --- Touch apparaten: geen hover/focus/active, geen highlight --- */
@media (hover: none), (pointer: coarse) {
  .bs-btnA, .bs-btnB, .bs-btnC, .bs-btn-more { -webkit-tap-highlight-color: transparent; }

  /* Verwijder visuele states in iOS/Android met hoge specificiteit */
  html body button.bs-btnA:hover,
  html body a.bs-btnA:hover,
  html body button.bs-btnA:focus,
  html body a.bs-btnA:focus,
  html body button.bs-btnA:active,
  html body a.bs-btnA:active { background-color: var(--knop1-hover); color: var(--knop1-text) !important; outline: none !important; }

  html body button.bs-btnB:hover,
  html body a.bs-btnB:hover,
  html body button.bs-btnB:focus,
  html body a.bs-btnB:focus,
  html body button.bs-btnB:active,
  html body a.bs-btnB:active { background-color: var(--knop2-hover); color: var(--knop2-text) !important; outline: none !important; }

  html body button.bs-btnC:hover,
  html body a.bs-btnC:hover,
  html body button.bs-btnC:focus,
  html body a.bs-btnC:focus,
  html body button.bs-btnC:active,
  html body a.bs-btnC:active { background-color: var(--knop3-hover); color: var(--knop3-text) !important; outline: none !important; }

  html body button.bs-btn-more:hover,
  html body a.bs-btn-more:hover,
  html body button.bs-btn-more:focus,
  html body a.bs-btn-more:focus,
  html body button.bs-btn-more:active,
  html body a.bs-btn-more:active { background-color: var(--knop-more-bg) !important; color: var(--knop-more-text) !important; outline: none !important; }

  /* Zorg dat anchors in buttons nooit onderstreept worden, ook niet in focus/active */
  a.bs-btnA, a.bs-btnA:link, a.bs-btnA:visited, a.bs-btnA:hover, a.bs-btnA:focus, a.bs-btnA:active { text-decoration: none !important; }
  a.bs-btnB, a.bs-btnB:link, a.bs-btnB:visited, a.bs-btnB:hover, a.bs-btnB:focus, a.bs-btnB:active { text-decoration: none !important; }
  a.bs-btnC, a.bs-btnC:link, a.bs-btnC:visited, a.bs-btnC:hover, a.bs-btnC:focus, a.bs-btnC:active { text-decoration: none !important; }
  a.bs-btn-more, a.bs-btn-more:link, a.bs-btn-more:visited, a.bs-btn-more:hover, a.bs-btn-more:focus, a.bs-btn-more:active { text-decoration: none !important; }

  /* Geen transitie-flicker op tap */
  .bs-btnA, .bs-btnB, .bs-btnC, .bs-btn-more { transition: none !important; }
}

/* === FIX: Hover transparantie voor knoppen A, B, C === */
@media (hover:hover) and (pointer:fine) {
  .bs-btnA:hover {
    background-color: #3473B3 !important; /* dezelfde kleur als main-color-hover */
    color: var(--knop1-text);
  }
  .bs-btnB:hover {
    background-color: #00C060 !important; /* zelfde groen als knop2 */
    color: var(--knop2-text);
  }
  .bs-btnC:hover {
    background-color: #FF7F32 !important; /* zelfde oranje als knop3 */
    color: var(--knop3-text);
  }
}

/* === Hover uit op mobiel === */
@media (hover:none), (pointer:coarse) {
  .bs-btnA:hover { background-color: var(--knop1-bg) !important; }
  .bs-btnB:hover { background-color: var(--knop2-bg) !important; }
  .bs-btnC:hover { background-color: var(--knop3-bg) !important; }
}



/* === FORMULIER STYLING TOEGEVOEGD === */
.bs-form-wrap {
  background:#fff;
  border:0px solid #ddd;
  border-radius:1px;
  padding:18px;
  width:100%;
  max-width:480px;
  margin:0 auto 20px;
}

.bs-form .bs-field { margin-bottom:14px; }

.bs-form input,
.bs-form textarea {
  width:100%;
  padding:14px;
  border:2px solid #c3c3c3;
  border-radius:1px;
  font-size:16px;
  background:#fff;
  color:#222;
}

.bs-form input::placeholder,
.bs-form textarea::placeholder {
  color:#666!important;
  opacity:1;
}

.bs-submit-btn {
  display:block;
  width:100%;
  padding:16px;
  font-size:18px;
  font-weight:600;
  background: var(--form-knoppen-achtergrond);
  color:#fff;
  border:none;
  border-radius:1px;
  cursor:pointer;
  text-align:center;
}

.bs-submit-btn:after { content:" ›"; font-weight:900; }

@media(hover:hover)and(pointer:fine){
  .bs-submit-btn:hover{
    background: var(--form-knoppen-hover);
  }

}

@media(hover:none){
  .bs-submit-btn:hover{
    background: var(--form-knoppen-achtergrond);
  }

}

/* === FORM FIX: breedte en mobiel overflow === */
.bs-form-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: 18px;
  border: 0px solid #ddd;
  border-radius: 1px;
  background: #fff;
  margin: 0 auto 20px;
}

.bs-form *,
.bs-form *::before,
.bs-form *::after {
  box-sizing: border-box !important;
}

.bs-form input,
.bs-form textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid #c3c3c3;
  border-radius: 1px;
  font-size: 16px;
  background: #fff;
  color: #222;
}

/* Mobiel safe area fix */
@media (max-width: 480px) {
  .bs-form-wrap {
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }
}



/* ================= FORMULIER STYLING ================= */
.bs-form-wrap {
  background:#fff;                 /* witte achtergrond */
  border:0px solid #ddd;           /* lichtgrijze rand */
  border-radius:1px;              /* ronde hoeken van de kaderbox */
  padding:18px;                    /* binnenruimte rond formulier */
  width:100%;                      /* neemt volledige breedte container */
  max-width:480px;                 /* maximale breedte */
  margin:0 auto 20px;              /* centreer + ruimte onder */
  box-sizing:border-box;           /* correcte breedteberekening */
}

.bs-form .bs-field {
  margin-bottom:14px;              /* ruimte tussen velden */
}

.bs-form input,
.bs-form textarea {
  width:100%;                      /* veld vult volledige breedte */
  padding:14px;                    /* binnenruimte veld */
  border:2px solid #c3c3c3;        /* rand */
  border-radius:1px;               /* afgeronde hoeken velden */
  font-size:16px;                  /* lettergrootte */
  background:#fff;                 /* witte invulvelden */
  color:#222;                      /* donkere tekstkleur */
  box-sizing:border-box;           /* voorkomt overflow */
}

.bs-form input::placeholder,
.bs-form textarea::placeholder {
  color:#666!important;            /* donkere placeholder */
  opacity:1;                       /* volledige zichtbaarheid */
}

.bs-submit-btn {
  display:block;                   /* knop = blok */
  width:100%;                      /* volle breedte */
  padding:16px;                    /* knophoogte */
  font-size:18px;                  /* knoptekstgrootte */
  font-weight:600;                 /* vet */
  background: var(--form-knoppen-achtergrond);  /* oranje knop via variabele */
  color:#fff;                      /* witte tekst */
  border:none;                     /* geen rand */
  border-radius:1px;              /* ronde hoeken knop */
  cursor:pointer;                  /* handcursor */
  text-align:center;               /* gecentreerde tekst */
}

.bs-submit-btn:after {
  content:" ›";                    /* pijl */
  font-weight:900;                 /* dikke pijl */
}

@media(hover:hover)and(pointer:fine){
  .bs-submit-btn:hover{
    background: var(--form-knoppen-hover);            /* hoverkleur via variabele */
  }

}

@media(hover:none){
  .bs-submit-btn:hover{
    background: var(--form-knoppen-achtergrond);            /* zelfde op mobiel */
  }

}

.bs-form *,
.bs-form *::before,
.bs-form *::after {
  box-sizing:border-box !important; /* beheers box model */
}

@media (max-width: 480px) {
  .bs-form-wrap {
    width: calc(100% - 24px);      /* marges mobiel */
    margin-left:auto;              /* centreer */
    margin-right:auto;             /* centreer */
  }
}



/* === UNIFIED INLINE FORM BUTTON OVERRIDE === */

/* Desktop hover werkt altijd correct */
@media (hover:hover) and (pointer:fine) {
  .bs-submit-btn:hover {
    background: var(--form-knoppen-hover) !important;
  }
}

/* Hover uit op mobiel */
@media (hover:none) {
  .bs-submit-btn:hover {
    background: var(--form-knoppen-achtergrond) !important;
  }
}

/* === Force orange submit button inside modal === */
.modal-overlay .bs-submit-btn {
  background: var(--form-knoppen-achtergrond) !important;
}
@media(hover:hover) and (pointer:fine){
  .modal-overlay .bs-submit-btn:hover {
    background: var(--form-knoppen-hover) !important;
  }
}

/* === UTILITIES === */
.up-arrow-like {
  display: inline-block !important;
  transform: rotate(90deg) !important;
}


/* ===== Tekstweergave voor bedank-modal ===== */
.bs-doc-text {
  padding: 20px;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
  white-space: normal;
}


@media (min-width: 400px) {
  .hero-fixed-img {
    max-height: 300px;   /* Pas deze waarde aan */
    width: auto;         /* voorkomt forceren van extreme breedte */
  }
}