/* ============================================================
   Contactpagina
   ============================================================ */
.bb-cc__head { background: var(--bb-mint); padding: 40px 0 48px; position: relative; overflow: hidden; }
.bb-cc__head::after { content: ""; position: absolute; left: -160px; bottom: -180px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(141, 187, 78, 0.2), rgba(141, 187, 78, 0) 70%); pointer-events: none; }
.bb-cc__crumb { display: flex; gap: 10px; align-items: center; font-size: var(--fs-small); color: var(--fg-muted); margin-bottom: 24px; }
.bb-cc__crumb a { color: var(--bb-green-forest); }
.bb-cc__headgrid { display: grid; gap: 32px; align-items: start; position: relative; z-index: 1; }
.bb-cc__head h1 { margin: 0 0 12px; }
.bb-cc__lead { font-size: var(--fs-lead); color: var(--fg-2); max-width: 48ch; margin: 0 0 28px; text-wrap: pretty; }

/* directe kanalen */
.bb-cc__channels { display: grid; gap: 12px; }
.bb-cc__ch { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; padding: 16px 18px; background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-decoration: none; transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.bb-cc__ch:hover { border-color: var(--bb-green-light); transform: translateY(-2px); }
.bb-cc__chicon { grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bb-mint); color: var(--bb-green-forest); }
.bb-cc__chlabel { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.bb-cc__chvalue { font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 4.4vw, 20px); line-height: 1.25; color: var(--bb-green-dark); overflow-wrap: anywhere; }
.bb-cc__chnote { font-size: var(--fs-small); color: var(--fg-muted); }

/* persoonskaart */
.bb-cc__person { background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 14px 34px rgba(6, 69, 48, 0.14); }
.bb-cc__portrait { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 34%; }
.bb-cc__personbody { padding: 20px 22px 24px; }
.bb-cc__personname { margin: 0; font: 600 var(--fs-h3) var(--font-display); color: var(--bb-green-dark); }
.bb-cc__personrole { margin: 2px 0 12px; font-size: var(--fs-small); color: var(--fg-muted); }
.bb-cc__personline { margin: 0; font-family: var(--font-hand); font-size: var(--fs-lead); line-height: 1.45; color: var(--bb-green-forest); }

/* --- hoofddeel --- */
.bb-cc { padding: 48px 0 72px; }
.bb-cc__grid { display: grid; gap: 32px; align-items: start; }
/* Kolommen van het contactblok mogen nooit breder worden dan het scherm. */
.bb-cc__grid > * { min-width: 0; }
.bb-cc__formwrap { background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 28px 22px 32px; min-width: 0; }
.bb-cc__formwrap h2 { margin: 0 0 6px; font-size: var(--fs-h2); }
.bb-cc__formintro { margin: 0 0 24px; font-size: var(--fs-lead); color: var(--fg-2); }
.bb-textarea { min-height: 160px; resize: vertical; font: 400 var(--fs-body)/var(--lh-body) var(--font-body); }
.bb-cc__privacy { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border-card); font-size: var(--fs-small); color: var(--fg-muted); }
.bb-cc__privacy svg { flex: none; margin-top: 2px; color: var(--bb-green-forest); }

/* --- zijkolom --- */
/* Ook hier geldt: niets mag breder worden dan het scherm. Zonder deze regels
   duwt de langste regel in een kaart de hele kolom buiten beeld. */
.bb-cc__side { display: grid; gap: 16px; min-width: 0; }
.bb-cc__side > *, .bb-cc__dl, .bb-cc__dl div, .bb-cc__dl dd, .bb-cc__trust li, .bb-cc__socials a { min-width: 0; }
.bb-cc__card { background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-lg); padding: 22px; min-width: 0; }
.bb-cc__card h3 { margin: 0 0 14px; font-size: var(--fs-h3); }
.bb-cc__dl { margin: 0; display: grid; gap: 12px; }
.bb-cc__dl div { display: grid; gap: 2px; }
.bb-cc__dl dt { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.bb-cc__dl dd { margin: 0; color: var(--fg-1); overflow-wrap: anywhere; }
.bb-cc__todo { background: var(--bb-yellow); color: var(--bb-ink); border-radius: 4px; padding: 1px 6px; font-size: var(--fs-small); font-weight: 600; }
.bb-cc__socials { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-card); }
.bb-cc__socials a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; width: fit-content; max-width: 100%; }
.bb-cc__socials a:hover { border-bottom-color: var(--bb-green-light); }
/* Het pictogram mag niet platgedrukt worden als de tekst ernaast lang is. */
.bb-cc__socials a > svg, .bb-cc__socialicon { flex: none; }
/* Het label staat naast het pictogram en mag over twee regels lopen. De naam van
   het netwerk en het pijltje blijven daarbij altijd samen op één regel. */
.bb-cc__sociallabel { flex: 0 1 auto; min-width: 0; line-height: 1.35; }
.bb-cc__socialnb { white-space: nowrap; }
.bb-cc__sociallabel svg { vertical-align: -2px; }
.bb-cc__socialicon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bb-mint); color: var(--bb-green-dark); flex: none; }
.bb-cc__socials a:hover .bb-cc__socialicon { background: var(--bb-green-forest); color: #fff; }

.bb-cc__card--trust { background: var(--bb-mint); border-color: rgba(148, 177, 67, 0.4); }
.bb-cc__trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bb-cc__trust li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: var(--fs-small); color: var(--fg-2); }
.bb-cc__trust li .i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bb-white); color: var(--bb-green-forest); }
.bb-cc__partner { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(6, 69, 48, 0.12); }
.bb-cc__partner a.bb-logolink { flex: none; }
.bb-cc__partner img { width: 118px; height: auto; flex: none; }
.bb-cc__partner p { margin: 0; font-size: var(--fs-caption); color: var(--bb-ink-soft); }

.bb-cc__card--faq p { color: var(--fg-2); font-size: var(--fs-small); margin-bottom: 16px; }

/* --- bevestiging --- */
.bb-cc__thanks { text-align: center; }
.bb-cc__next { list-style: none; margin: 22px auto 24px; padding: 18px 20px; max-width: 520px; text-align: left; background: var(--bb-mint); border-radius: var(--radius-lg); display: grid; gap: 10px; }
.bb-cc__next li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: var(--fs-small); color: var(--fg-2); }
.bb-cc__next li > span:first-child { font-weight: 700; color: var(--bb-green-forest); }
.bb-cc__next li .t { font-weight: 400; color: var(--fg-2); }

@media (min-width: 720px) {
  .bb-cc__head { padding: 48px 0 56px; }
  .bb-cc__channels { grid-template-columns: repeat(2, 1fr); }
  .bb-cc__formwrap { padding: 36px 34px 40px; }
}

@media (min-width: 1024px) {
  /* Links en rechts komen op dezelfde hoogte uit: de kaart van Sabrina rekt mee
     met de tekstkolom en de foto vult precies de ruimte die overblijft. Zo staat
     zij niet groot in beeld en komt het formulier eerder in zicht. */
  .bb-cc__head { padding: 44px 0 44px; }
  .bb-cc__headgrid { grid-template-columns: 1.28fr 0.72fr; gap: 44px; align-items: stretch; }
  .bb-cc__person { display: flex; flex-direction: column; }
  .bb-cc__portrait { flex: 1 1 0; min-height: 130px; aspect-ratio: auto; height: auto; object-position: 50% 45.2%; }
  /* De tekst in de kaart is compact gehouden, zodat de kaart nooit hoger wordt dan
     de kolom links en de onderkanten exact gelijk uitkomen. */
  .bb-cc__personbody { flex: none; padding: 14px 20px 16px; }
  .bb-cc__personname { font-size: 18px; }
  .bb-cc__personrole { margin: 1px 0 8px; font-size: 14px; }
  .bb-cc__personline { font-size: 17px; line-height: 1.38; }
  .bb-cc__grid { grid-template-columns: 1.35fr 0.65fr; gap: 40px; }
  .bb-cc__side { position: sticky; top: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-cc__ch { transition: none; }
}


/* ================================================================
   LEESBAARHEID OP MOBIEL (WCAG 2.2, EAA)
   ================================================================ */
@media (max-width: 719px) {
  .bb-cc__chvalue { font-size: 17px; }
  .bb-cc__personrole { font-size: 16.5px; }
}