/* ===========================================================================
   bedankt.css — de bedankpagina (bedankt.php)

   Opgezet naar het ontwerp op het canvas: een donkerblauwe kop met het
   kruimelpad erin en een witte kaart ernaast, de vier stappen als kaarten,
   en onderaan twee doorklikkaarten.

   Dezelfde vormtaal als de rest van de site:
     hoeken    40px 2px 40px 2px  (grote vlakken)
               24px 2px 24px 2px  (kaarten)
               12px               (knoppen)
     breedte   .container van site.css, dus var(--container-max-width)
     kleuren   zie hieronder; dezelfde waarden als hsb-profiel.css en
               hsb-paginahero.css
   =========================================================================== */

.bdk {
  --blauw: #103856;
  --blauw-donker: #0b263a;
  --licht: #eef4f9;
  --zacht: #c8d8e6;
  --zachter: #9dbbd6;
  --grijs: #5a6b7b;
  --lijn: #dde6ee;
  --cta: #c24d16;
  --cta-donker: #a63f0f;
  --vink: #5ec98a;
}

/* De lettersoort van de koppen regelt hsb-koppen.css voor de hele site;
   hier alleen de maten en de kleuren. */


/* ===========================================================================
   DE BLAUWE KOP
   =========================================================================== */

.bdk-kop { padding: 28px 0 0; }

.bdk-kop__blok {
  background: var(--blauw);
  border-radius: 40px 2px 40px 2px;
  padding: 48px 56px 52px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}

/* De tekstkolom krijgt een hoge flex-grow en de kaart een lage, zodat de
   kaart op zijn eigen breedte blijft tot er geen ruimte meer is. Onder de
   ~1000px valt de kaart vanzelf onder de tekst. */
.bdk-kop__tekst { flex: 999 1 540px; min-width: 0; }


/* --- Kruimelpad ----------------------------------------------------------- */
.bdk-kruimels { margin-bottom: 30px; }
.bdk-kruimels ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
}
.bdk-kruimels li { color: var(--zacht); }

/* Het pijltje staat in CSS en niet in de opmaak: het is een scheidingsteken
   en geen inhoud, dus een schermlezer hoeft het niet voor te lezen. */
.bdk-kruimels li + li::before {
  content: "›";
  margin-right: 9px;
  color: #7fa0bd;
}
.bdk-kruimels a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bdk-kruimels a:hover { color: var(--zachter); }


/* --- "Aanvraag ontvangen" ------------------------------------------------- */
.bdk-ontvangen {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--zachter);
}
.bdk-ontvangen__vink {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--vink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* --- Titel en tekst -------------------------------------------------------- */
.bdk-kop__titel {
  margin: 0 0 18px;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: #fff;
}

.bdk-kop__lead,
.bdk-kop__tekstblok {
  font-size: 19px;
  line-height: 1.6;
  color: var(--zacht);
  max-width: 34em;
}
.bdk-kop__lead p,
.bdk-kop__tekstblok p { margin: 0 0 14px; }
.bdk-kop__lead p:last-child,
.bdk-kop__tekstblok p:last-child { margin-bottom: 0; }

/* De inleiding en de paginatekst zijn twee losse blokken uit het CMS. Zonder
   deze regel plakken de laatste regel van het ene en de eerste van het andere
   aan elkaar, en lijkt het één alinea. */
.bdk-kop__tekstblok { margin-top: 14px; }
.bdk-kop__tekstblok:empty { margin-top: 0; }

.bdk-kop__lead strong,
.bdk-kop__tekstblok strong { color: #fff; }

.bdk-kop__tekstblok a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bdk-kop__tekstblok a:hover { color: var(--zachter); }


/* --- De twee chips --------------------------------------------------------- */
.bdk-chips {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bdk-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14.5px;
  color: #fff;
}
.bdk-chips svg { color: var(--zachter); flex-shrink: 0; }
.bdk-chips strong { font-weight: 600; }


/* ===========================================================================
   DE WITTE KAART IN DE KOP
   =========================================================================== */

.bdk-kaart {
  flex: 1 1 360px;
  min-width: 0;
  background: #fff;
  border-radius: 24px 2px 24px 2px;
  padding: 26px;
}

.bdk-kaart__kop {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a99a8;
}

.bdk-kaart__item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7ecf1;
  text-decoration: none;
}
a.bdk-kaart__item:hover .bdk-kaart__naam strong { color: var(--cta); }

.bdk-kaart__beeld {
  width: 68px;
  height: 68px;
  border-radius: 16px 2px 16px 2px;
  background: var(--licht);
  overflow: hidden;
  flex-shrink: 0;
}
.bdk-kaart__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.bdk-kaart__naam strong {
  display: block;
  font-size: 20px;
  line-height: 1.2;
  color: var(--blauw);
  transition: color .2s;
}
.bdk-kaart__naam > span {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--grijs);
}

.bdk-kaart__haast {
  margin: 20px 0 6px;
  font-weight: 600;
  font-size: 17px;
  color: var(--blauw);
}
/* Staat er geen spreker in de kaart, dan hoeft er geen ruimte boven. */
.bdk-kaart__kop + .bdk-kaart__haast,
.bdk-kaart > .bdk-kaart__haast:first-child { margin-top: 0; }

.bdk-kaart__uitleg {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grijs);
}

.bdk-bel {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  background: var(--licht);
  border-radius: 14px;
  padding: 14px 16px;
  transition: background-color .2s;
}
.bdk-bel:hover { background: #e3edf6; }
.bdk-bel__ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  color: var(--cta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bdk-bel strong {
  display: block;
  font-size: 21px;
  line-height: 1;
  color: var(--blauw);
}
.bdk-bel__sub {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--grijs);
}

/* --- Alleen op contact-bedankt.php: adres en terugknop in de kaart ------- */
.bdk-kaart__adres {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e7ecf1;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grijs);
}
.bdk-kaart__adres strong { color: var(--blauw); }

.bdk-kaart__terug {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 13px 20px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blauw);
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.bdk-kaart__terug:hover { background: var(--licht); border-color: #bfd2e2; color: var(--blauw); }
.bdk-kaart__terug svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.bdk-kaart__terug:hover svg { transform: translateX(4px); }


/* --- De paginatekst uit het CMS op contact-bedankt.php ------------------- */
.bdk-tekst { padding: 56px 0 0; }
.bdk-tekst__kolom {
  max-width: 44em;
  font-size: 17px;
  line-height: 1.7;
  color: #44525f;
}
.bdk-tekst__kolom h2 {
  margin: 32px 0 10px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--blauw);
}
.bdk-tekst__kolom h2:first-child { margin-top: 0; }
.bdk-tekst__kolom h3 {
  margin: 26px 0 8px;
  font-size: 20px;
  color: var(--blauw);
}
.bdk-tekst__kolom p { margin: 0 0 16px; }
.bdk-tekst__kolom a { color: var(--blauw); font-weight: 600; }


/* ===========================================================================
   WAT GEBEURT ER NU
   =========================================================================== */

.bdk-stappen { padding: 72px 0 8px; }

.bdk-stappen h2 {
  margin: 0 0 8px;
  font-size: 40px;
  line-height: 1.12;
  color: var(--blauw);
}
.bdk-stappen__lead {
  margin: 0 0 44px;
  font-size: 17px;
  color: var(--grijs);
  max-width: 40em;
}

.bdk-stappen__rij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.bdk-stap {
  background: var(--licht);
  border-radius: 24px 2px 24px 2px;
  padding: 30px 26px 32px;
}

.bdk-stap__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bdk-stap__ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #fff;
  color: var(--blauw);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bdk-stap__nr {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: #cfdeeb;
}

.bdk-stap h3 {
  margin: 0 0 9px;
  font-size: 19px;
  line-height: 1.25;
  color: var(--blauw);
}
.bdk-stap p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--grijs);
}

/* De laatste stap is de afloop en staat daarom in het blauw. */
.bdk-stap--slot { background: var(--blauw); }
.bdk-stap--slot .bdk-stap__ico { background: rgba(255, 255, 255, .12); color: #fff; }
.bdk-stap--slot .bdk-stap__nr { color: var(--cta); }
.bdk-stap--slot h3 { color: #fff; }
.bdk-stap--slot p { color: #b9cde0; }


/* ===========================================================================
   WAAROM SPREKERSBURO
   =========================================================================== */

.bdk-waarom-sectie { padding: 56px 0 0; }

.bdk-waarom {
  background: #fdf1ea;
  border-radius: 24px 2px 24px 2px;
  padding: 26px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
.bdk-waarom__kop { display: flex; align-items: center; gap: 14px; }
.bdk-waarom__ster {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--cta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bdk-waarom h2 {
  margin: 0;
  font-size: 21px;
  color: var(--blauw);
}

.bdk-waarom__lijst {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 15.5px;
  color: var(--blauw);
}
.bdk-waarom__lijst li { display: flex; align-items: center; gap: 9px; }
.bdk-vinkje { color: var(--cta); display: flex; flex-shrink: 0; }


/* ===========================================================================
   VERDER KIJKEN
   =========================================================================== */

.bdk-verder { padding: 44px 0 72px; }

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

.bdk-kaartje {
  display: flex;
  align-items: center;
  gap: 22px;
  border: 1px solid var(--lijn);
  border-radius: 24px 2px 24px 2px;
  padding: 28px 30px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.bdk-kaartje:hover {
  border-color: #bfd2e2;
  box-shadow: 0 10px 28px rgba(16, 56, 86, .07);
}

.bdk-kaartje__ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--licht);
  color: var(--blauw);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bdk-kaartje__tekst { flex-grow: 1; min-width: 0; }
.bdk-kaartje__tekst strong {
  display: block;
  font-size: 19px;
  color: var(--blauw);
}
.bdk-kaartje__tekst > span {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grijs);
}

.bdk-kaartje__knop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blauw);
  color: #fff;
  border-radius: 12px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background-color .2s;
}
.bdk-kaartje:hover .bdk-kaartje__knop { background: var(--blauw-donker); }
.bdk-kaartje__knop svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.bdk-kaartje:hover .bdk-kaartje__knop svg { transform: translateX(4px); }


/* --- De spamfolderregel ---------------------------------------------------- */
.bdk-spam {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #f6f8fa;
  border-radius: 24px 2px 24px 2px;
  padding: 24px 30px;
  margin-top: 24px;
}
.bdk-spam__ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--grijs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bdk-spam p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #44525f;
}
.bdk-spam strong { color: var(--blauw); }
.bdk-spam a { color: var(--blauw); font-weight: 600; }


/* ===========================================================================
   SMALLERE SCHERMEN
   =========================================================================== */

@media (max-width: 1199px) {
  .bdk-stappen__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .bdk-kop__blok { padding: 40px 36px 44px; gap: 32px; }
  .bdk-kop__titel { font-size: 40px; }
  .bdk-kop__lead, .bdk-kop__tekstblok { font-size: 17.5px; }
  .bdk-stappen { padding-top: 52px; }
  .bdk-stappen h2 { font-size: 32px; }
  .bdk-verder__rij { grid-template-columns: minmax(0, 1fr); }

  /* De knop onder de tekst in plaats van ernaast; naast elkaar wordt de
     tekstkolom hier te smal. */
  .bdk-kaartje { flex-wrap: wrap; }
  .bdk-kaartje__tekst { flex: 1 1 260px; }
  .bdk-kaartje__knop { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
  .bdk-waarom__lijst { margin-left: 0; flex-direction: column; gap: 11px; width: 100%; }
}

@media (max-width: 575px) {
  .bdk-kop { padding-top: 16px; }
  .bdk-kop__blok { padding: 28px 22px 30px; border-radius: 28px 2px 28px 2px; }
  .bdk-kop__titel { font-size: 31px; }
  .bdk-kop__lead, .bdk-kop__tekstblok { font-size: 16.5px; }
  .bdk-ontvangen { font-size: 13px; gap: 12px; }
  .bdk-ontvangen__vink { width: 44px; height: 44px; }
  .bdk-chips { flex-direction: column; align-items: flex-start; }

  .bdk-kaart { padding: 20px; border-radius: 20px 2px 20px 2px; }
  .bdk-stappen__rij { grid-template-columns: minmax(0, 1fr); }
  .bdk-stap { padding: 22px 20px; border-radius: 20px 2px 20px 2px; }
  .bdk-stap h3 { font-size: 17.5px; }

  .bdk-waarom { padding: 22px 20px; border-radius: 20px 2px 20px 2px; }
  .bdk-waarom h2 { font-size: 19px; }
  .bdk-waarom__kop { width: 100%; }

  .bdk-kaartje { padding: 22px 20px; border-radius: 20px 2px 20px 2px; }
  .bdk-spam { padding: 20px; border-radius: 20px 2px 20px 2px; align-items: flex-start; }
  .bdk-spam p { font-size: 14.5px; }
}